mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-05-07 16:17:13 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

CSS Vars refactoring

Browse source
This commit is contained in:
Lucas Larroche 2021-07-02 16:54:41 +07:00
parent 14460576bf
commit d12af72cab
64 changed files with 4878 additions and 4948 deletions
Download patch file Download diff file Expand all files Collapse all files

12
docs/scss/themes/docs/_dark.scss
View file

@ -2,8 +2,11 @@
// Automatically enabled if user has Dark mode enabled
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--nav-background: #{rgba(darken($grey-900, 6%), .8)};
--nav-border: #{rgba($grey-500, .2)};
--invalid-color: #{rgba($red-900, .5)};
--valid-color: #{rgba($green-800, .5)};
--nav-background-color: #{rgba(darken($grey-900, 6%), .8)};
--nav-border-color: #{rgba($grey-500, .2)};
--nav-logo-color: #{mix($black, $grey-900)};
}
}
@ -12,6 +15,9 @@
// Dark theme (Forced) [Additions for docs]
// Enabled if forced with data-theme="dark"
[data-theme="dark"] {
--invalid-color: #{rgba($red-900, .5)};
--valid-color: #{rgba($green-800, .5)};
--nav-background: #{rgba(darken($grey-900, 6%), .8)};
--nav-border: #{rgba($grey-500, .2)};
--nav-border-color: #{rgba($grey-500, .2)};
--nav-logo-color: #{mix($black, $grey-900)};
}

1
docs/scss/themes/docs/_icons.scss
View file

@ -1,6 +1,5 @@
// Icons
// Source: https://feathericons.com/
:root {
--icon-external: 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='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
--icon-check: 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='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");

7
docs/scss/themes/docs/_light.scss
View file

@ -2,6 +2,9 @@
// Can be forced with data-theme="light"
[data-theme="light"],
:root:not([data-theme="dark"]) {
--nav-background: #{rgba($white, .7)};
--nav-border: #{rgba($grey-500, .2)};
--invalid-color: #{$red-800};
--valid-color: #{$green-700};
--nav-background-color: #{rgba($white, .7)};
--nav-border-color: #{rgba($grey-500, .2)};
--nav-logo-color: #{$white};
}