From 1e902449652213eb1feae5e61740cb9ce3b9d6e3 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 22 Jun 2024 10:39:48 +0200 Subject: WIP: Refactoring --- src/objects/_divider.scss | 35 +++++++++++++++-------------------- src/objects/_palette.scss | 20 +++++++++++++------- 2 files changed, 28 insertions(+), 27 deletions(-) (limited to 'src/objects') diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss index 465bbcf..3332331 100644 --- a/src/objects/_divider.scss +++ b/src/objects/_divider.scss @@ -1,5 +1,7 @@ +@use 'sass:map'; @use 'iro-sass/src/index' as iro; @use '../functions' as fn; +@use '../config'; @include iro.props-namespace('divider') { @include iro.props-store(( @@ -32,29 +34,22 @@ --bg: fn.global-color(--border), --label: fn.global-color(--text-mute-more), ), - --blue: ( - --bg: fn.global-color(--blue --700), - --label: fn.global-color(--blue --1000), - ), - --purple: ( - --bg: fn.global-color(--purple --700), - --label: fn.global-color(--purple --1000), - ), - --red: ( - --bg: fn.global-color(--red --700), - --label: fn.global-color(--red --1000), - ), - --green: ( - --bg: fn.global-color(--green --700), - --label: fn.global-color(--green --1000), - ), - --yellow: ( - --bg: fn.global-color(--yellow --700), - --label: fn.global-color(--yellow --1000), - ), ), )); + @each $color in map.keys(map.get(config.$themes, config.$theme-default, --palettes)) { + @if $color != '--base' { + @include iro.props-store(( + --colors: ( + $color: ( + --bg: fn.global-color($color --700), + --label: fn.global-color($color --1000), + ) + ), + )); + } + } + @include iro.bem-object(iro.props-namespace()) { display: flex; flex-direction: row; diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss index a86c026..9ecdfac 100644 --- a/src/objects/_palette.scss +++ b/src/objects/_palette.scss @@ -1,5 +1,6 @@ @use 'sass:map'; @use 'sass:list'; +@use 'sass:string'; @use 'iro-sass/src/index' as iro; @use '../functions' as fn; @use '../config'; @@ -12,8 +13,11 @@ @include iro.bem-elem('item') { flex: 1 1 auto; - @for $i from 1 through list.length(map.get(config.$theme-light, --grays)) { - $key: list.nth(map.keys(map.get(config.$theme-light, --grays)), $i); + $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); @@ -21,14 +25,16 @@ } } - @each $palette in 'blue' 'purple' 'red' 'green' 'yellow' { - @include iro.bem-modifier($palette) { + @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(map.get(config.$theme-light, --colors)) { - $key: list.nth(map.keys(map.get(config.$theme-light, --colors)), $i); + @for $i from 1 through list.length($contrasts) { + $key: list.nth(map.keys($contrasts), $i); &:nth-child(#{$i}) { - background-color: fn.global-color(--#{$palette} $key); + background-color: fn.global-color($palette-name $key); } } } -- cgit v1.2.3-70-g09d2