diff options
| author | Volpeon <git@volpeon.ink> | 2026-07-22 12:27:09 +0200 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2026-07-22 12:27:09 +0200 |
| commit | cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 (patch) | |
| tree | d16dea8f0a5edca2b610ecabeac5e93a4d98be2f /src/_themes.scss | |
| parent | Update _index.scss (diff) | |
| download | iro-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.scss | 38 |
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 | } |
