diff options
Diffstat (limited to 'src/_themes.scss')
-rw-r--r-- | src/_themes.scss | 104 |
1 files changed, 52 insertions, 52 deletions
diff --git a/src/_themes.scss b/src/_themes.scss index caf1e80..fe5a0cb 100644 --- a/src/_themes.scss +++ b/src/_themes.scss | |||
@@ -8,67 +8,67 @@ | |||
8 | @forward 'core.vars'; | 8 | @forward 'core.vars'; |
9 | 9 | ||
10 | @mixin styles { | 10 | @mixin styles { |
11 | @include bem.theme('base') { | 11 | @include bem.theme('base') { |
12 | background-color: props.get(vars.$theme, --bg-base); | 12 | background-color: props.get(vars.$theme, --bg-base); |
13 | 13 | ||
14 | @include bem.suffix('light') { | 14 | @include bem.suffix('light') { |
15 | @media (prefers-color-scheme: light) { | 15 | @media (prefers-color-scheme: light) { |
16 | background-color: props.get(vars.$theme, --bg-base); | 16 | background-color: props.get(vars.$theme, --bg-base); |
17 | } | 17 | } |
18 | } | 18 | } |
19 | 19 | ||
20 | @include bem.suffix('dark') { | 20 | @include bem.suffix('dark') { |
21 | @media (prefers-color-scheme: dark) { | 21 | @media (prefers-color-scheme: dark) { |
22 | background-color: props.get(vars.$theme, --bg-base); | 22 | background-color: props.get(vars.$theme, --bg-base); |
23 | } | 23 | } |
24 | } | 24 | } |
25 | } | 25 | } |
26 | 26 | ||
27 | @include bem.theme('l1') { | 27 | @include bem.theme('l1') { |
28 | background-color: props.get(vars.$theme, --bg-l1); | 28 | background-color: props.get(vars.$theme, --bg-l1); |
29 | 29 | ||
30 | @include bem.suffix('light') { | 30 | @include bem.suffix('light') { |
31 | @media (prefers-color-scheme: light) { | 31 | @media (prefers-color-scheme: light) { |
32 | background-color: props.get(vars.$theme, --bg-l1); | 32 | background-color: props.get(vars.$theme, --bg-l1); |
33 | } | 33 | } |
34 | } | 34 | } |
35 | 35 | ||
36 | @include bem.suffix('dark') { | 36 | @include bem.suffix('dark') { |
37 | @media (prefers-color-scheme: dark) { | 37 | @media (prefers-color-scheme: dark) { |
38 | background-color: props.get(vars.$theme, --bg-l1); | 38 | background-color: props.get(vars.$theme, --bg-l1); |
39 | } | 39 | } |
40 | } | 40 | } |
41 | } | 41 | } |
42 | 42 | ||
43 | @include bem.theme('l2') { | 43 | @include bem.theme('l2') { |
44 | background-color: props.get(vars.$theme, --bg-l2); | 44 | background-color: props.get(vars.$theme, --bg-l2); |
45 | 45 | ||
46 | @include bem.suffix('light') { | 46 | @include bem.suffix('light') { |
47 | @media (prefers-color-scheme: light) { | 47 | @media (prefers-color-scheme: light) { |
48 | background-color: props.get(vars.$theme, --bg-l2); | 48 | background-color: props.get(vars.$theme, --bg-l2); |
49 | } | 49 | } |
50 | } | 50 | } |
51 | 51 | ||
52 | @include bem.suffix('dark') { | 52 | @include bem.suffix('dark') { |
53 | @media (prefers-color-scheme: dark) { | 53 | @media (prefers-color-scheme: dark) { |
54 | background-color: props.get(vars.$theme, --bg-l2); | 54 | background-color: props.get(vars.$theme, --bg-l2); |
55 | } | 55 | } |
56 | } | 56 | } |
57 | } | 57 | } |
58 | 58 | ||
59 | @include bem.theme('50') { | 59 | @include bem.theme('50') { |
60 | background-color: props.get(vars.$theme, --base, --50); | 60 | background-color: props.get(vars.$theme, --base, --50); |
61 | 61 | ||
62 | @include bem.suffix('light') { | 62 | @include bem.suffix('light') { |
63 | @media (prefers-color-scheme: light) { | 63 | @media (prefers-color-scheme: light) { |
64 | background-color: props.get(vars.$theme, --base, --50); | 64 | background-color: props.get(vars.$theme, --base, --50); |
65 | } | 65 | } |
66 | } | 66 | } |
67 | 67 | ||
68 | @include bem.suffix('dark') { | 68 | @include bem.suffix('dark') { |
69 | @media (prefers-color-scheme: dark) { | 69 | @media (prefers-color-scheme: dark) { |
70 | background-color: props.get(vars.$theme, --base, --50); | 70 | background-color: props.get(vars.$theme, --base, --50); |
71 | } | 71 | } |
72 | } | 72 | } |
73 | } | 73 | } |
74 | } | 74 | } |