@use 'sass:map'; @use 'sass:list'; @use 'sass:string'; @use 'iro-sass/src/iro-sass' as iro; @use '../functions' as fn; @use '../config'; @include iro.props-namespace('palette') { @include iro.bem-object(iro.props-namespace()) { display: flex; block-size: 3em; @include iro.bem-elem('item') { flex: 1 1 auto; $palette: map.get(config.$themes, config.$theme-default, --palettes, --base); $contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2)); @for $i from 1 through list.length($contrasts) { $key: list.nth(map.keys($contrasts), $i); &:nth-child(#{$i}) { background-color: fn.global-color(--base $key); } } } @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, --palettes) { $contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2)); @include iro.bem-modifier(string.slice($palette-name, 3)) { @include iro.bem-elem('item') { @for $i from 1 through list.length($contrasts) { $key: list.nth(map.keys($contrasts), $i); &:nth-child(#{$i}) { background-color: fn.global-color($palette-name $key); } } } } } @include iro.bem-modifier('static') { @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { $contrasts: map.get(config.$static-colors, --contrasts); @include iro.bem-modifier(string.slice($palette-name, 3)) { @include iro.bem-elem('item') { @for $i from 1 through list.length($contrasts) { $key: list.nth(map.keys($contrasts), $i); &:nth-child(#{$i}) { background-color: fn.global-color(#{$palette-name}-static $key); } } } } } } } }