From c9b00ce5c53b7abe68cbd4021ccc2c4c1d0fb50e Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 29 Nov 2024 23:42:09 +0100 Subject: Static themes fix --- src/_themes.scss | 9 --------- src/_utils.scss | 33 +++++++++++++++++++++++++++++++++ src/scopes/_implicit.scss | 4 +++- 3 files changed, 36 insertions(+), 10 deletions(-) diff --git a/src/_themes.scss b/src/_themes.scss index 9b868f3..caf1e80 100644 --- a/src/_themes.scss +++ b/src/_themes.scss @@ -71,13 +71,4 @@ } } } - - @each $theme in map.keys(props.get(vars.$transparent-colors)) { - $theme-name: static-#{string.slice($theme, 3)}; - - @include bem.theme($theme-name) { - color: props.get(vars.$transparent-colors, $theme, --text); - background-color: props.get(vars.$transparent-colors, $theme, --900); - } - } } diff --git a/src/_utils.scss b/src/_utils.scss index e90aa57..49191ef 100644 --- a/src/_utils.scss +++ b/src/_utils.scss @@ -1,4 +1,5 @@ @use 'sass:map'; +@use 'sass:string'; @use 'iro-sass/src/bem'; @use 'iro-sass/src/props'; @use 'include-media/dist/include-media' as media; @@ -154,18 +155,50 @@ $-sizes: ( @include bem.utility('c-heading') { color: props.get(vars.$theme, --heading); + + @each $theme in map.keys(props.get(vars.$transparent-colors)) { + $theme-name: static-#{string.slice($theme, 3)}; + + @include bem.at-theme($theme-name) { + color: props.get(vars.$transparent-colors, $theme, --900); + } + } } @include bem.utility('c-text') { color: props.get(vars.$theme, --text); + + @each $theme in map.keys(props.get(vars.$transparent-colors)) { + $theme-name: static-#{string.slice($theme, 3)}; + + @include bem.at-theme($theme-name) { + color: props.get(vars.$transparent-colors, $theme, --800); + } + } } @include bem.utility('c-mute') { color: props.get(vars.$theme, --text-mute); + + @each $theme in map.keys(props.get(vars.$transparent-colors)) { + $theme-name: static-#{string.slice($theme, 3)}; + + @include bem.at-theme($theme-name) { + color: props.get(vars.$transparent-colors, $theme, --700); + } + } } @include bem.utility('c-mute-more') { color: props.get(vars.$theme, --text-mute-more); + + @each $theme in map.keys(props.get(vars.$transparent-colors)) { + $theme-name: static-#{string.slice($theme, 3)}; + + @include bem.at-theme($theme-name) { + color: props.get(vars.$transparent-colors, $theme, --600); + } + } } @each $dir, $prop in (is: inline-size, bs: block-size) { diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss index 9bd411a..78f06be 100644 --- a/src/scopes/_implicit.scss +++ b/src/scopes/_implicit.scss @@ -160,13 +160,15 @@ @each $theme in map.keys(props.get(core.$transparent-colors)) { .t-static-#{string.slice($theme, 3)} { + color: props.get(core.$transparent-colors, $theme, --800); + h1, h2, h3, h4, h5, h6 { - color: props.get(core.$transparent-colors, $theme, --text); + color: props.get(core.$transparent-colors, $theme, --900); } hr { -- cgit v1.2.3-70-g09d2