From 1e902449652213eb1feae5e61740cb9ce3b9d6e3 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 22 Jun 2024 10:39:48 +0200 Subject: WIP: Refactoring --- src/_declare-vars.scss | 68 +++++++++++++++++++++++--------------------------- 1 file changed, 31 insertions(+), 37 deletions(-) (limited to 'src/_declare-vars.scss') diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss index 37d9cae..2084905 100644 --- a/src/_declare-vars.scss +++ b/src/_declare-vars.scss @@ -1,4 +1,5 @@ @use 'sass:map'; +@use 'sass:list'; @use 'iro-sass/src/index' as iro; @use 'include-media/dist/include-media' as media; @use '@oddbird/blend'; @@ -99,6 +100,8 @@ --thin: 1px, ), + --rounding: 3px, + --focus: ( --outline-width: 3px, ), @@ -173,58 +176,49 @@ // -@include iro.props-store(( - --colors: ( - --base: fn.palette( - map.get(config.$theme-light, --base), - map.get(config.$theme-light, --grays), - ), - ), -)); - -@include iro.props-store(( - --colors: ( - --base: fn.palette( - map.get(config.$theme-dark, --base), - map.get(config.$theme-dark, --grays), - ), - ), -), 'dark'); +@each $theme-name, $theme in config.$themes { + $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name); -@each $name, $theme in config.$themes { - $props-name: if($name == config.$theme-default, iro.$props-default-tree, $name); + @each $palette-name, $palette in map.get($theme, --palettes) { + $base-color: list.nth($palette, 1); + $contrasts: list.nth($palette, 2); + $ranges: list.nth($palette, 3); - @each $color in 'blue' 'purple' 'red' 'green' 'yellow' { @include iro.props-store(( --colors: ( - --#{$color}: fn.palette( - map.get($theme, --#{$color}), - map.get($theme, --colors), - map.get($theme, --base), + $palette-name: fn.palette( + $base-color, + map.get($theme, --contrasts, $contrasts), + map.get($theme, --ranges, $ranges), + nth(map.get($theme, --palettes, --base), 1), ), ), - ), $props-name); - } + ), $tree); - @include iro.props-store(( - --colors: ( - --accent: iro.props-get-static(--colors map.get($theme, --accent), $props-name), - ), - ), $props-name); + @if $theme-name == config.$theme-default { + @include iro.props-store(( + --colors: ( + #{$palette-name}-static: iro.props-get-static(--colors $palette-name, $tree), + ), + ), $tree); + } + } - @each $color in 'bg-l2' 'bg-l1' 'bg-base' 'border-mute' 'border' 'border-strong' 'text-disabled' 'text-mute-more' 'text-mute' 'text' 'heading' { + @each $color, $ref in map.get($theme, --semantic-colors) { @include iro.props-store(( --colors: ( - --#{$color}: fn.color(--base map.get($theme, --#{$color})), + $color: fn.color($ref), ), - ), $props-name); + ), $tree); } } -@each $color in 'blue' 'purple' 'red' 'green' 'yellow' { +@each $theme-name, $theme in config.$themes { + $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name); + @include iro.props-store(( --colors: ( - --#{$color}-static: iro.props-get-static(--colors --#{$color}), + ), - )); + ), $tree); } -- cgit v1.2.3-54-g00ecf