summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--assets/css/_apply-vars.scss36
-rw-r--r--assets/css/style.scss2
2 files changed, 37 insertions, 1 deletions
diff --git a/assets/css/_apply-vars.scss b/assets/css/_apply-vars.scss
new file mode 100644
index 0000000..5e6e54f
--- /dev/null
+++ b/assets/css/_apply-vars.scss
@@ -0,0 +1,36 @@
1@use 'iro-sass/src/index' as iro;
2@use 'include-media/dist/include-media' as media;
3
4:root {
5 @include iro.props-assign('dims');
6
7 @each $breakpoint in map-keys(media.$breakpoints) {
8 @include media.media('<=#{$breakpoint}') {
9 @include iro.props-assign($breakpoint);
10 }
11 }
12
13 @include iro.props-assign('colors');
14 @include iro.props-assign('palette-light');
15
16 @media (prefers-color-scheme: dark) {
17 @include iro.props-assign('colors-dark');
18 @include iro.props-assign('palette-dark');
19 }
20}
21
22@include iro.bem-theme('dark') {
23 @include iro.props-assign('colors');
24 @include iro.props-assign('colors-dark');
25 @include iro.props-assign('palette-dark');
26}
27
28@include iro.bem-theme('raised') {
29 @include iro.props-assign('colors');
30 @include iro.props-assign('palette-light-hi');
31
32 @media (prefers-color-scheme: dark) {
33 @include iro.props-assign('colors-dark');
34 @include iro.props-assign('palette-dark-lo');
35 }
36}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index f7d3e6b..20bcc27 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -39,4 +39,4 @@
39 39
40@use 'iro-design/src/utils'; 40@use 'iro-design/src/utils';
41 41
42@use 'iro-design/src/apply-vars'; 42@use 'apply-vars';