diff options
| author | Volpeon <git@volpeon.ink> | 2024-06-21 23:07:50 +0200 | 
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2024-06-21 23:07:50 +0200 | 
| commit | 48cb00040763459fc46d4aa108bf72c12f48f422 (patch) | |
| tree | 9609470d56bb31d55697ef0c42f1c908804dd3f1 /src/objects/_palette.scss | |
| parent | Update (diff) | |
| download | iro-design-48cb00040763459fc46d4aa108bf72c12f48f422.tar.gz iro-design-48cb00040763459fc46d4aa108bf72c12f48f422.tar.bz2 iro-design-48cb00040763459fc46d4aa108bf72c12f48f422.zip  | |
WIP: Refactoring
Diffstat (limited to 'src/objects/_palette.scss')
| -rw-r--r-- | src/objects/_palette.scss | 38 | 
1 files changed, 38 insertions, 0 deletions
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss new file mode 100644 index 0000000..a86c026 --- /dev/null +++ b/src/objects/_palette.scss  | |||
| @@ -0,0 +1,38 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:list'; | ||
| 3 | @use 'iro-sass/src/index' as iro; | ||
| 4 | @use '../functions' as fn; | ||
| 5 | @use '../config'; | ||
| 6 | |||
| 7 | @include iro.props-namespace('palette') { | ||
| 8 | @include iro.bem-object(iro.props-namespace()) { | ||
| 9 | display: flex; | ||
| 10 | height: 3em; | ||
| 11 | |||
| 12 | @include iro.bem-elem('item') { | ||
| 13 | flex: 1 1 auto; | ||
| 14 | |||
| 15 | @for $i from 1 through list.length(map.get(config.$theme-light, --grays)) { | ||
| 16 | $key: list.nth(map.keys(map.get(config.$theme-light, --grays)), $i); | ||
| 17 | |||
| 18 | &:nth-child(#{$i}) { | ||
| 19 | background-color: fn.global-color(--base $key); | ||
| 20 | } | ||
| 21 | } | ||
| 22 | } | ||
| 23 | |||
| 24 | @each $palette in 'blue' 'purple' 'red' 'green' 'yellow' { | ||
| 25 | @include iro.bem-modifier($palette) { | ||
| 26 | @include iro.bem-elem('item') { | ||
| 27 | @for $i from 1 through list.length(map.get(config.$theme-light, --colors)) { | ||
| 28 | $key: list.nth(map.keys(map.get(config.$theme-light, --colors)), $i); | ||
| 29 | |||
| 30 | &:nth-child(#{$i}) { | ||
| 31 | background-color: fn.global-color(--#{$palette} $key); | ||
| 32 | } | ||
| 33 | } | ||
| 34 | } | ||
| 35 | } | ||
| 36 | } | ||
| 37 | } | ||
| 38 | } | ||
