diff options
author | Volpeon <git@volpeon.ink> | 2022-02-06 17:17:33 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2022-02-06 17:17:33 +0100 |
commit | 3524f1bac11c8a9d1640bfeac5ceb063ff96d623 (patch) | |
tree | 52907b3161045c2d24bba18442c1ece9c12986a6 /src/index.scss | |
parent | Updated action button (diff) | |
download | iro-design-3524f1bac11c8a9d1640bfeac5ceb063ff96d623.tar.gz iro-design-3524f1bac11c8a9d1640bfeac5ceb063ff96d623.tar.bz2 iro-design-3524f1bac11c8a9d1640bfeac5ceb063ff96d623.zip |
Improved variable structure
Diffstat (limited to 'src/index.scss')
-rw-r--r-- | src/index.scss | 24 |
1 files changed, 15 insertions, 9 deletions
diff --git a/src/index.scss b/src/index.scss index 1124840..63124ed 100644 --- a/src/index.scss +++ b/src/index.scss | |||
@@ -20,29 +20,35 @@ | |||
20 | @import 'layouts/form'; | 20 | @import 'layouts/form'; |
21 | 21 | ||
22 | :root { | 22 | :root { |
23 | @include iro.props-assign; | 23 | @include iro.props-assign('dims'); |
24 | @include iro.props-assign('light-palette'); | ||
25 | 24 | ||
26 | @each $breakpoint in map-keys(media.$breakpoints) { | 25 | @each $breakpoint in map-keys(media.$breakpoints) { |
27 | @include media.media('<=#{$breakpoint}') { | 26 | @include media.media('<=#{$breakpoint}') { |
28 | @include iro.props-assign($breakpoint); | 27 | @include iro.props-assign($breakpoint); |
29 | } | 28 | } |
30 | } | 29 | } |
31 | } | ||
32 | 30 | ||
33 | @include iro.bem-theme('grayscale') { | 31 | @include iro.props-assign('colors'); |
34 | @include iro.props-assign($root: --colors --grayscale-accent, $prefix: --colors --accent); | 32 | @include iro.props-assign('palette-light'); |
33 | |||
34 | @media (prefers-color-scheme: dark) { | ||
35 | @include iro.props-assign('palette-dark'); | ||
36 | } | ||
35 | } | 37 | } |
36 | 38 | ||
37 | @include iro.bem-theme('raised') { | 39 | @include iro.bem-theme('raised') { |
38 | @include iro.props-assign('light-raised-palette'); | 40 | @include iro.props-assign('colors'); |
39 | @include iro.props-assign; | 41 | @include iro.props-assign('palette-light-raised'); |
40 | 42 | ||
41 | @include iro.bem-multi('at-theme' 'grayscale', 'theme' 'grayscale') { | 43 | @media (prefers-color-scheme: dark) { |
42 | @include iro.props-assign($root: --colors --grayscale-accent, $prefix: --colors --accent); | 44 | @include iro.props-assign('palette-dark-raised'); |
43 | } | 45 | } |
44 | } | 46 | } |
45 | 47 | ||
48 | @include iro.bem-theme('grayscale') { | ||
49 | @include iro.props-assign('colors', $root: --colors --grayscale-accent, $prefix: --colors --accent); | ||
50 | } | ||
51 | |||
46 | /*@media (prefers-color-scheme: dark) { | 52 | /*@media (prefers-color-scheme: dark) { |
47 | @include iro.props-assign('dark'); | 53 | @include iro.props-assign('dark'); |
48 | @include iro.props-assign('dark-palette'); | 54 | @include iro.props-assign('dark-palette'); |