diff options
| author | Volpeon <git@volpeon.ink> | 2024-11-29 23:42:09 +0100 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2024-11-29 23:42:09 +0100 |
| commit | c9b00ce5c53b7abe68cbd4021ccc2c4c1d0fb50e (patch) | |
| tree | 57d6d59a6c6d95fdf8908a7f9ddbc39773822651 /src/_utils.scss | |
| parent | Fix (diff) | |
| download | iro-design-c9b00ce5c53b7abe68cbd4021ccc2c4c1d0fb50e.tar.gz iro-design-c9b00ce5c53b7abe68cbd4021ccc2c4c1d0fb50e.tar.bz2 iro-design-c9b00ce5c53b7abe68cbd4021ccc2c4c1d0fb50e.zip | |
Static themes fix
Diffstat (limited to 'src/_utils.scss')
| -rw-r--r-- | src/_utils.scss | 33 |
1 files changed, 33 insertions, 0 deletions
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 @@ | |||
| 1 | @use 'sass:map'; | 1 | @use 'sass:map'; |
| 2 | @use 'sass:string'; | ||
| 2 | @use 'iro-sass/src/bem'; | 3 | @use 'iro-sass/src/bem'; |
| 3 | @use 'iro-sass/src/props'; | 4 | @use 'iro-sass/src/props'; |
| 4 | @use 'include-media/dist/include-media' as media; | 5 | @use 'include-media/dist/include-media' as media; |
| @@ -154,18 +155,50 @@ $-sizes: ( | |||
| 154 | 155 | ||
| 155 | @include bem.utility('c-heading') { | 156 | @include bem.utility('c-heading') { |
| 156 | color: props.get(vars.$theme, --heading); | 157 | color: props.get(vars.$theme, --heading); |
| 158 | |||
| 159 | @each $theme in map.keys(props.get(vars.$transparent-colors)) { | ||
| 160 | $theme-name: static-#{string.slice($theme, 3)}; | ||
| 161 | |||
| 162 | @include bem.at-theme($theme-name) { | ||
| 163 | color: props.get(vars.$transparent-colors, $theme, --900); | ||
| 164 | } | ||
| 165 | } | ||
| 157 | } | 166 | } |
| 158 | 167 | ||
| 159 | @include bem.utility('c-text') { | 168 | @include bem.utility('c-text') { |
| 160 | color: props.get(vars.$theme, --text); | 169 | color: props.get(vars.$theme, --text); |
| 170 | |||
| 171 | @each $theme in map.keys(props.get(vars.$transparent-colors)) { | ||
| 172 | $theme-name: static-#{string.slice($theme, 3)}; | ||
| 173 | |||
| 174 | @include bem.at-theme($theme-name) { | ||
| 175 | color: props.get(vars.$transparent-colors, $theme, --800); | ||
| 176 | } | ||
| 177 | } | ||
| 161 | } | 178 | } |
| 162 | 179 | ||
| 163 | @include bem.utility('c-mute') { | 180 | @include bem.utility('c-mute') { |
| 164 | color: props.get(vars.$theme, --text-mute); | 181 | color: props.get(vars.$theme, --text-mute); |
| 182 | |||
| 183 | @each $theme in map.keys(props.get(vars.$transparent-colors)) { | ||
| 184 | $theme-name: static-#{string.slice($theme, 3)}; | ||
| 185 | |||
| 186 | @include bem.at-theme($theme-name) { | ||
| 187 | color: props.get(vars.$transparent-colors, $theme, --700); | ||
| 188 | } | ||
| 189 | } | ||
| 165 | } | 190 | } |
| 166 | 191 | ||
| 167 | @include bem.utility('c-mute-more') { | 192 | @include bem.utility('c-mute-more') { |
| 168 | color: props.get(vars.$theme, --text-mute-more); | 193 | color: props.get(vars.$theme, --text-mute-more); |
| 194 | |||
| 195 | @each $theme in map.keys(props.get(vars.$transparent-colors)) { | ||
| 196 | $theme-name: static-#{string.slice($theme, 3)}; | ||
| 197 | |||
| 198 | @include bem.at-theme($theme-name) { | ||
| 199 | color: props.get(vars.$transparent-colors, $theme, --600); | ||
| 200 | } | ||
| 201 | } | ||
| 169 | } | 202 | } |
| 170 | 203 | ||
| 171 | @each $dir, $prop in (is: inline-size, bs: block-size) { | 204 | @each $dir, $prop in (is: inline-size, bs: block-size) { |
