summaryrefslogtreecommitdiffstats
path: root/src/_themes.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2026-07-22 12:27:09 +0200
committerVolpeon <git@volpeon.ink>2026-07-22 12:27:09 +0200
commitcc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 (patch)
treed16dea8f0a5edca2b610ecabeac5e93a4d98be2f /src/_themes.scss
parentUpdate _index.scss (diff)
downloadiro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.tar.gz
iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.tar.bz2
iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.zip
Paths
Diffstat (limited to 'src/_themes.scss')
-rw-r--r--src/_themes.scss38
1 files changed, 19 insertions, 19 deletions
diff --git a/src/_themes.scss b/src/_themes.scss
index f06a5ca..be13e60 100644
--- a/src/_themes.scss
+++ b/src/_themes.scss
@@ -1,71 +1,71 @@
1@use 'sass:map'; 1@use "sass:map";
2@use 'sass:string'; 2@use "sass:string";
3@use 'pkg:iro-sass/src/bem'; 3@use "pkg:iro-sass/bem";
4@use 'pkg:iro-sass/src/props'; 4@use "pkg:iro-sass/props";
5@use 'pkg:include-media/dist/include-media' as media; 5@use "pkg:include-media/dist/include-media" as media;
6 6
7@use 'core.vars' as vars; 7@use "core.vars" as vars;
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 }