WIP: Refactoring

1 files changed, 31 insertions, 37 deletions

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);
 }