From 50f6acc739f24bfa2ca080d08e90d82f8fa83543 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 17 Oct 2024 16:45:00 +0200 Subject: Revamped variable management --- src_old/_themes.scss | 86 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 src_old/_themes.scss (limited to 'src_old/_themes.scss') diff --git a/src_old/_themes.scss b/src_old/_themes.scss new file mode 100644 index 0000000..2ca89cb --- /dev/null +++ b/src_old/_themes.scss @@ -0,0 +1,86 @@ +@use 'iro-sass/src/index' as iro; +@use 'functions' as fn; + +$static-themes: 'black' 'white' !default; + +@include iro.bem-theme('base') { + background-color: fn.global-color(--bg-base); + + @include iro.bem-suffix('light') { + @media (prefers-color-scheme: light) { + background-color: fn.global-color(--bg-base); + } + } + + @include iro.bem-suffix('dark') { + @media (prefers-color-scheme: dark) { + background-color: fn.global-color(--bg-base); + } + } +} + +@include iro.bem-theme('l1') { + background-color: fn.global-color(--bg-l1); + + @include iro.bem-suffix('light') { + @media (prefers-color-scheme: light) { + background-color: fn.global-color(--bg-l1); + } + } + + @include iro.bem-suffix('dark') { + @media (prefers-color-scheme: dark) { + background-color: fn.global-color(--bg-l1); + } + } +} + +@include iro.bem-theme('l2') { + background-color: fn.global-color(--bg-l2); + + @include iro.bem-suffix('light') { + @media (prefers-color-scheme: light) { + background-color: fn.global-color(--bg-l2); + } + } + + @include iro.bem-suffix('dark') { + @media (prefers-color-scheme: dark) { + background-color: fn.global-color(--bg-l2); + } + } +} + +@include iro.bem-theme('50') { + background-color: fn.global-color(--base --50); + + @include iro.bem-suffix('light') { + @media (prefers-color-scheme: light) { + background-color: fn.global-color(--base --50); + } + } + + @include iro.bem-suffix('dark') { + @media (prefers-color-scheme: dark) { + background-color: fn.global-color(--base --50); + } + } +} + +@each $theme in $static-themes { + @include iro.bem-theme(static-#{$theme}) { + color: fn.global-color(--#{$theme}-transparent --800); + + @include iro.bem-suffix('light') { + @media (prefers-color-scheme: light) { + background-color: fn.global-color(--base --50); + } + } + + @include iro.bem-suffix('dark') { + @media (prefers-color-scheme: dark) { + background-color: fn.global-color(--base --50); + } + } + } +} -- cgit v1.2.3-70-g09d2