Skip to content

Commit

Permalink
Apply fixes to suppress SCSS deprecations
Browse files Browse the repository at this point in the history
problem
------

we get a pile of css deprecation warnings

solution
------

Follow the instructions from the warnings to get quiet them up.

changes
-------

* Applied Pico PR's (via patch) picocss#575 and picocss#596
* Update sass files to include `sass:color`, `sass:list` etc as required to avoid global methods
* Move from `color.red`, `color.green`, `color.blue` to `color.channel` as suggested by deprecation warnings
* bumped sass to 1.81
* rebuild css (with `yarn build`)
  • Loading branch information
Jon Rogers committed Nov 29, 2024
1 parent 6dc6489 commit 1a770fe
Show file tree
Hide file tree
Showing 247 changed files with 5,320 additions and 5,148 deletions.
80 changes: 40 additions & 40 deletions css/pico.amber.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.amber.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.blue.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.blue.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.amber.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.amber.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.blue.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.blue.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.conditional.amber.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.conditional.amber.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.conditional.blue.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.conditional.blue.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.conditional.cyan.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.conditional.cyan.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.conditional.fuchsia.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.conditional.fuchsia.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.conditional.green.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.conditional.green.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.conditional.grey.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.conditional.grey.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.conditional.indigo.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.conditional.indigo.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.conditional.jade.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.conditional.jade.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.conditional.lime.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.conditional.lime.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.conditional.orange.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.conditional.orange.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.conditional.pink.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.conditional.pink.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.conditional.pumpkin.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.conditional.pumpkin.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.conditional.purple.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.conditional.purple.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.conditional.red.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.conditional.red.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.conditional.sand.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.conditional.sand.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.conditional.slate.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.conditional.slate.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.conditional.violet.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.conditional.violet.min.css

Large diffs are not rendered by default.

84 changes: 42 additions & 42 deletions css/pico.classless.conditional.yellow.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.conditional.yellow.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.conditional.zinc.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.conditional.zinc.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.cyan.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.cyan.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.fuchsia.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.fuchsia.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.green.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.green.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.grey.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.grey.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.indigo.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.indigo.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.jade.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.jade.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.lime.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.lime.min.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.orange.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.orange.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.pink.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.pink.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.pumpkin.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.pumpkin.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.purple.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.purple.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.red.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.red.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.sand.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.sand.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.slate.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.slate.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.violet.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.violet.min.css

Large diffs are not rendered by default.

84 changes: 42 additions & 42 deletions css/pico.classless.yellow.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.yellow.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.classless.zinc.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.zinc.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.conditional.amber.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.conditional.amber.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.conditional.blue.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.conditional.blue.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.conditional.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.conditional.cyan.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.conditional.cyan.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.conditional.fuchsia.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.conditional.fuchsia.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.conditional.green.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.conditional.green.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.conditional.grey.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.conditional.grey.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.conditional.indigo.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.conditional.indigo.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.conditional.jade.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.conditional.jade.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.conditional.lime.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.conditional.lime.min.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.conditional.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.conditional.orange.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.conditional.orange.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.conditional.pink.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.conditional.pink.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.conditional.pumpkin.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.conditional.pumpkin.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.conditional.purple.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.conditional.purple.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.conditional.red.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.conditional.red.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.conditional.sand.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.conditional.sand.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.conditional.slate.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.conditional.slate.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.conditional.violet.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.conditional.violet.min.css

Large diffs are not rendered by default.

84 changes: 42 additions & 42 deletions css/pico.conditional.yellow.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.conditional.yellow.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.conditional.zinc.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.conditional.zinc.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.cyan.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.cyan.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.amber.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.amber.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.blue.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.blue.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.conditional.amber.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.conditional.amber.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.conditional.blue.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.conditional.blue.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.conditional.cyan.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.conditional.cyan.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.conditional.fuchsia.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.conditional.fuchsia.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.conditional.green.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.conditional.green.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.conditional.grey.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.conditional.grey.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.conditional.indigo.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.conditional.indigo.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.conditional.jade.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.conditional.jade.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.conditional.lime.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.conditional.lime.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.conditional.orange.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.conditional.orange.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.conditional.pink.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.conditional.pink.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.conditional.pumpkin.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.conditional.pumpkin.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.conditional.purple.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.conditional.purple.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.conditional.red.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.conditional.red.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.conditional.sand.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.conditional.sand.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.conditional.slate.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.conditional.slate.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.conditional.violet.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.conditional.violet.min.css

Large diffs are not rendered by default.

84 changes: 42 additions & 42 deletions css/pico.fluid.classless.conditional.yellow.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.conditional.yellow.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.conditional.zinc.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.conditional.zinc.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.cyan.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.cyan.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.fuchsia.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.fuchsia.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.green.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.green.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.grey.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.grey.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.indigo.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.indigo.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.jade.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.jade.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.lime.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.lime.min.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.orange.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.orange.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.pink.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.pink.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.pumpkin.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.pumpkin.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.purple.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.purple.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.red.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.red.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.sand.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.sand.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.slate.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.slate.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.violet.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.violet.min.css

Large diffs are not rendered by default.

84 changes: 42 additions & 42 deletions css/pico.fluid.classless.yellow.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.yellow.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fluid.classless.zinc.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.zinc.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.fuchsia.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fuchsia.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.green.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.green.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.grey.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.grey.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.indigo.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.indigo.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.jade.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.jade.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.lime.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.lime.min.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.orange.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.orange.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.pink.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.pink.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.pumpkin.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.pumpkin.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.purple.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.purple.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.red.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.red.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.sand.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.sand.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.slate.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.slate.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.violet.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.violet.min.css

Large diffs are not rendered by default.

84 changes: 42 additions & 42 deletions css/pico.yellow.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.yellow.min.css

Large diffs are not rendered by default.

80 changes: 40 additions & 40 deletions css/pico.zinc.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.zinc.min.css

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions scss/colors/utilities/_background-colors.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@use "sass:map";
@use "sass:list";
@use "../../colors";
@use "settings";
@use "utils";
Expand Down Expand Up @@ -30,7 +31,7 @@ $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
@if map.get(settings.$utilities, "background-colors") {
// Loop through color families
@each $family, $colors in colors.$colors {
@if index(map.get(settings.$palette, "color-families"), $family) {
@if list.index(map.get(settings.$palette, "color-families"), $family) {
$css-var-family-name: #{$css-var-color-prefix}-#{$family};
$class-family-name: #{$background-color-property-name}-#{$family};

Expand All @@ -52,7 +53,7 @@ $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};

// Shades
@else if
index(map.get(settings.$palette, "shades"), $shade) and
list.index(map.get(settings.$palette, "shades"), $shade) and
map.get(settings.$palette, "enable-shades")
{
$value: $color-value;
Expand Down
5 changes: 3 additions & 2 deletions scss/colors/utilities/_colors.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@use "sass:map";
@use "sass:list";
@use "../../colors";
@use "settings";
@use "utils";
Expand All @@ -11,7 +12,7 @@

// Loop through color families
@each $family, $colors in colors.$colors {
@if index(map.get(settings.$palette, "color-families"), $family) {
@if list.index(map.get(settings.$palette, "color-families"), $family) {
$css-var-family-name: #{$css-var-color-prefix}-#{$family};
$class-family-name: #{$color-property-name}-#{$family};

Expand All @@ -31,7 +32,7 @@

// Shades
@else if
index(map.get(settings.$palette, "shades"), $shade) and
list.index(map.get(settings.$palette, "shades"), $shade) and
map.get(settings.$palette, "enable-shades")
{
@if $enable-css-vars {
Expand Down
5 changes: 3 additions & 2 deletions scss/colors/utilities/_css-vars.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@use "sass:map";
@use "sass:list";
@use "../../colors";
@use "settings";
@use "utils";
Expand All @@ -12,7 +13,7 @@
:root {
// Loop through color families
@each $family, $colors in colors.$colors {
@if index(map.get(settings.$palette, "color-families"), $family) {
@if list.index(map.get(settings.$palette, "color-families"), $family) {
$css-var-family-name: #{$css-var-color-prefix}-#{$family};

// Loop through colors
Expand All @@ -24,7 +25,7 @@

// Shades
@else if
index(map.get(settings.$palette, "shades"), $shade) and
list.index(map.get(settings.$palette, "shades"), $shade) and
map.get(settings.$palette, "enable-shades")
{
#{$css-var-family-name}-#{$shade}: #{utils.display-color($color-value)};
Expand Down
12 changes: 9 additions & 3 deletions scss/colors/utilities/_utils.scss
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@
@function brightness($color) {
$color-brightness: round(
math.div(
(color.red($color) * 299) + (color.green($color) * 587) + (color.blue($color) * 114),
(color.channel($color, "red", $space: rgb) * 299) +
(color.channel($color, "green", $space: rgb) * 587) +
(color.channel($color, "blue", $space: rgb) * 114),
1000
)
);
Expand All @@ -45,12 +47,16 @@

// Display color as HSL
@function display-hsl($color) {
@return unquote(
@return string.unquote(
"hsl(#{math.round(hue($color))}, #{math.round(saturation($color))}, #{math.round(lightness($color))})"
);
}

// Display color as RGB
@function display-rgb($color) {
@return unquote("rgb(" + red($color) + ", " + green($color) + ", " + blue($color) + ")");
@return string.unquote(
"rgb(" + color.channel($color, "red", $space: rgb) + ", " +
color.channel($color, "green", $space: rgb) + ", " +
color.channel($color, "blue", $space: rgb) + ")"
);
}
8 changes: 4 additions & 4 deletions scss/components/_accordion.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,14 @@
list-style-type: none;
cursor: pointer;

&:not([role]) {
color: var(#{$css-var-prefix}accordion-close-summary-color);
}

@if $enable-transitions {
transition: color var(#{$css-var-prefix}transition);
}

&:not([role]) {
color: var(#{$css-var-prefix}accordion-close-summary-color);
}

// Reset marker
&::-webkit-details-marker {
display: none;
Expand Down
9 changes: 8 additions & 1 deletion scss/helpers/_functions.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
@use "sass:string";
@use "sass:color";

// Display color as RGB
@function display-rgb($color) {
@return unquote("rgb(" + red($color) + ", " + green($color) + ", " + blue($color) + ")");
@return string.unquote(
"rgb(" + color.channel($color, "red", $space: rgb) + ", " +
color.channel($color, "green", $space: rgb) + ", " +
color.channel($color, "blue", $space: rgb) + ")"
);
}

// Generate a shadow layer
Expand Down
81 changes: 47 additions & 34 deletions scss/themes/default/_dark.scss
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
@use "sass:map";
@use "sass:color";
@use "../../colors" as *;
@use "../../settings" as *;
@use "../../helpers/functions";
@use "theme-colors";

// Default: Dark theme
@mixin theme {
#{$css-var-prefix}background-color: #{mix($slate-950, $slate-900)};
color-scheme: dark;
#{$css-var-prefix}background-color: #{color.mix($slate-950, $slate-900)};

// Text color
#{$css-var-prefix}color: #{$zinc-200};
Expand Down Expand Up @@ -55,7 +57,7 @@
#{$css-var-prefix}contrast-inverse: #{$black};

// Box shadow
#{$css-var-prefix}box-shadow: functions.shadow(mix($black, $slate-950));
#{$css-var-prefix}box-shadow: functions.shadow(color.mix($black, $slate-950));

// Typography
@if map.get($modules, "content/typography") {
Expand All @@ -72,8 +74,8 @@
#{$css-var-prefix}mark-color: #{$white};

// Inserted (<ins>) & Deleted (<del>)
#{$css-var-prefix}ins-color: #{mix($jade-450, $zinc-200)};
#{$css-var-prefix}del-color: #{mix($red-500, $zinc-200)};
#{$css-var-prefix}ins-color: #{color.mix($jade-450, $zinc-200)};
#{$css-var-prefix}del-color: #{color.mix($red-500, $zinc-200)};

// Blockquote
#{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
Expand All @@ -96,45 +98,45 @@

// Code
@if map.get($modules, "content/code") {
#{$css-var-prefix}code-background-color: #{mix($slate-900, $slate-850, 75%)};
#{$css-var-prefix}code-background-color: #{color.mix($slate-900, $slate-850, 75%)};
#{$css-var-prefix}code-color: #{$zinc-400};
#{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
#{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color);
}

// Form elements
@if map.get($modules, "forms/basics") {
#{$css-var-prefix}form-element-background-color: #{mix($slate-900, $slate-850)};
#{$css-var-prefix}form-element-background-color: #{color.mix($slate-900, $slate-850)};
#{$css-var-prefix}form-element-selected-background-color: #{$slate-800};
#{$css-var-prefix}form-element-border-color: #{$slate-800};
#{$css-var-prefix}form-element-color: #{$zinc-100};
#{$css-var-prefix}form-element-placeholder-color: #{$zinc-400};
#{$css-var-prefix}form-element-active-background-color: #{mix($slate-900, $slate-850, 75%)};
#{$css-var-prefix}form-element-active-background-color: #{color.mix(
$slate-900,
$slate-850,
75%
)};
#{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}form-element-disabled-opacity: 0.5;
#{$css-var-prefix}form-element-invalid-border-color: #{mix($red-500, $slate-600)};
#{$css-var-prefix}form-element-invalid-active-border-color: #{mix($red-500, $slate-600, 75%)};
#{$css-var-prefix}form-element-invalid-border-color: #{color.mix($red-500, $slate-600)};
#{$css-var-prefix}form-element-invalid-active-border-color: #{color.mix(
$red-500,
$slate-600,
75%
)};
#{$css-var-prefix}form-element-invalid-focus-color: var(
#{$css-var-prefix}form-element-invalid-active-border-color
);
#{$css-var-prefix}form-element-valid-border-color: #{mix($jade-450, $slate-600)};
#{$css-var-prefix}form-element-valid-active-border-color: #{mix($jade-450, $slate-600, 75%)};
#{$css-var-prefix}form-element-valid-border-color: #{color.mix($jade-450, $slate-600)};
#{$css-var-prefix}form-element-valid-active-border-color: #{color.mix(
$jade-450,
$slate-600,
75%
)};
#{$css-var-prefix}form-element-valid-focus-color: var(
#{$css-var-prefix}form-element-valid-active-border-color
);

// Focus for buttons, radio and select
input:is(
[type="submit"],
[type="button"],
[type="reset"],
[type="checkbox"],
[type="radio"],
[type="file"]
) {
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
}
}

// Switch (input[type="checkbox"][role="switch"])
Expand Down Expand Up @@ -167,7 +169,7 @@
#{$css-var-prefix}card-background-color: #{$slate-900};
#{$css-var-prefix}card-border-color: var(#{$css-var-prefix}card-background-color);
#{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
#{$css-var-prefix}card-sectioning-background-color: #{mix($slate-900, $slate-850, 75%)};
#{$css-var-prefix}card-sectioning-background-color: #{color.mix($slate-900, $slate-850, 75%)};
}

// Dropdown (details.dropdown)
Expand All @@ -186,7 +188,7 @@

// Modal (<dialog>)
@if map.get($modules, "components/modal") {
#{$css-var-prefix}modal-overlay-background-color: #{rgba(mix($black, $zinc-950), 0.75)};
#{$css-var-prefix}modal-overlay-background-color: #{rgba(color.mix($black, $zinc-950), 0.75)};
}

// Progress
Expand All @@ -201,6 +203,26 @@
#{$css-var-prefix}tooltip-color: var(#{$css-var-prefix}contrast-inverse);
}

// Form validation icons
@if map.get($modules, "forms/basics") {
#{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($jade-450, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
#{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($red-500, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

// Focus for buttons, radio and select
@if map.get($modules, "forms/basics") {
input:is(
[type="submit"],
[type="button"],
[type="reset"],
[type="checkbox"],
[type="radio"],
[type="file"]
) {
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
}
}

// Chevron icons
@if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
// Change the icon color to black for accordion and dropdown .contrast buttons
Expand All @@ -217,12 +239,6 @@
}
}

// Form validation icons
@if map.get($modules, "forms/basics") {
#{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($jade-450, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
#{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($red-500, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

// Loading icon (animated)
@if map.get($modules, "components/loading") {
// Change the icon color to black for .contrast buttons
Expand All @@ -242,7 +258,4 @@
}
}
}

// Document
color-scheme: dark;
}
Loading

0 comments on commit 1a770fe

Please sign in to comment.