WIP: Refactoring

1 files changed, 52 insertions, 173 deletions

diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index bf7e955..37d9cae 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -1,7 +1,9 @@
+@use 'sass:map';
 @use 'iro-sass/src/index' as iro;
 @use 'include-media/dist/include-media' as media;
 @use '@oddbird/blend';
 @use 'functions' as fn;
+@use 'config';
 
 @include iro.props-store((
     --dims: (
@@ -102,12 +104,12 @@
         ),
 
         --paragraph: (
-            --margin-top: fn.dim(--size --300, null),
+            --margin-bs: fn.dim(--size --300, null),
         ),
 
         --heading: (
-            --margin-top:         fn.dim(--size --700, null),
-            --margin-top-sibling: fn.dim(--size --325, null),
+            --margin-bs:         fn.dim(--size --700, null),
+            --margin-bs-sibling: fn.dim(--size --325, null),
 
             --lg: fn.dim(--font-size --400, null),
             --md: fn.dim(--font-size --75, null),
@@ -137,12 +139,18 @@
             --compact-indent: fn.dim(--size --250, null),
         ),
     ),
-), 'dims');
+));
+
+@each $breakpoint in map.keys(media.$breakpoints) {
+    @include media.media('<=#{$breakpoint}') {
+        @include iro.props-store((), $breakpoint);
+    }
+}
 
 @include iro.props-store((
     --dims: (
         --heading: (
-            --margin-top: fn.dim(--size --600, null),
+            --margin-bs: fn.dim(--size --600, null),
         ),
 
         --list: (
@@ -154,7 +162,7 @@
 @include iro.props-store((
     --dims: (
         --heading: (
-            --margin-top: fn.dim(--size --500, null),
+            --margin-bs: fn.dim(--size --500, null),
         ),
 
         --list: (
@@ -167,185 +175,56 @@
 
 @include iro.props-store((
     --colors: (
-        --gray: fn.gray-palette(100%),
-    ),
-), 'palette-light-hi');
-
-@include iro.props-store((
-    --colors: (
-        --gray: fn.gray-palette(97%),
-    ),
-), 'palette-light');
-
-@include iro.props-store((
-    --colors: (
-        --gray: fn.gray-palette(93%),
-    ),
-), 'palette-light-lo');
-
-// @include iro.props-store((
-//     --colors: (
-//         --gray: fn.gray-palette(88%),
-//     ),
-// ), 'palette-light-lo2');
-
-@include iro.props-store((
-    --colors: (
-        --bg-hi2: fn.color(--gray --1, null), // Lightest background
-        --bg-hi:  fn.color(--gray --2, null), // Lighter background
-        --bg:     fn.color(--gray --3, null), // Background
-
-        --obj-hi: fn.color(--gray --4, null),
-        --obj:    fn.color(--gray --5, null),
-        --obj-lo: fn.color(--gray --6, null),
-
-        --fg-hi3: fn.color(--gray --7, null),  // Disabled text
-        --fg-hi2: fn.color(--gray --8, null),  // Placeholder text
-        --fg-hi:  fn.color(--gray --9, null),  // Faint text
-        --fg:     fn.color(--gray --10, null), // Text
-        --fg-lo:  fn.color(--gray --11, null), // Strong text
-
-        --border: (
-            --regular:   fn.color(--obj, null),
-            --stable:    iro.props-get-static(--colors --gray --5, 'palette-light'),
-            --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-light'),
-        ),
-
-        --blue:   fn.color-palette(blend.lch(48% 50 279)),
-        --purple: fn.color-palette(blend.lch(48% 50 308)),
-        --red:    fn.color-palette(blend.lch(48% 50 23)),
-        --green:  fn.color-palette(blend.lch(63% 50 147)),
-        --yellow: fn.color-palette(blend.lch(68% 50 70)),
-
-        --accent: (
-            --primary:      iro.props-ref('colors', --colors --blue),
-            --error:        iro.props-ref('colors', --colors --red),
-            --success:      iro.props-ref('colors', --colors --green),
-            --warning:      iro.props-ref('colors', --colors --yellow),
-            --link-idle:    iro.props-ref('colors', --colors --blue),
-            --link-visited: iro.props-ref('colors', --colors --purple),
-        ),
-
-        --selection: (
-            --bg:     fn.color(--accent --primary --selection, null),
-            --bg-img: fn.color(--accent --primary --quiet --obj-lo, null),
-            --fg:     fn.color(--accent --primary --solid --fg, null),
+        --base: fn.palette(
+            map.get(config.$theme-light, --base),
+            map.get(config.$theme-light, --grays),
         ),
-
-        --focus: (
-            --shadow:    0 0 0 fn.dim(--focus --outline-width, null) fn.color(--accent --primary --quiet --obj-lo, null),
-            --fill:      fn.color(--accent --primary --solid --bg, null),
-            --text:      fn.color(--accent --primary --solid --obj, null),
-            --fill-text: fn.color(--accent --primary --solid --fg, null),
-        ),
-    ),
-), 'colors');
-
-//
-
-// @include iro.props-store((
-//     --colors: (
-//         --gray: fn.gray-palette(1%),
-//     ),
-// ), 'palette-dark-hi2');
-
-@include iro.props-store((
-    --colors: (
-        --gray: fn.gray-palette(7%),
-    ),
-), 'palette-dark-hi');
-
-@include iro.props-store((
-    --colors: (
-        --gray: fn.gray-palette(12%),
     ),
-), 'palette-dark');
+));
 
 @include iro.props-store((
     --colors: (
-        --gray: fn.gray-palette(17%),
-    ),
-), 'palette-dark-lo');
-
-@include iro.props-store((
-    --colors: (
-        --border: (
-            --stable:    iro.props-get-static(--colors --gray --5, 'palette-dark-lo'),
-            --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-dark-lo'),
+        --base: fn.palette(
+            map.get(config.$theme-dark, --base),
+            map.get(config.$theme-dark, --grays),
         ),
-
-        --blue:   fn.color-palette(blend.lch(63% 50 279), -1),
-        --purple: fn.color-palette(blend.lch(63% 50 308), -1),
-        --red:    fn.color-palette(blend.lch(63% 50 23), -1),
-        --green:  fn.color-palette(blend.lch(78% 50 147), -1),
-        --yellow: fn.color-palette(blend.lch(88% 50 70), -1),
-
-        --accent: (
-            --primary:      iro.props-ref('colors-dark', --colors --blue),
-            --error:        iro.props-ref('colors-dark', --colors --red),
-            --success:      iro.props-ref('colors-dark', --colors --green),
-            --warning:      iro.props-ref('colors-dark', --colors --yellow),
-            --link-idle:    iro.props-ref('colors-dark', --colors --blue),
-            --link-visited: iro.props-ref('colors-dark', --colors --purple),
-        ),
-    )
-), 'colors-dark');
-
-//
-
-@include iro.props-store((
-    --colors: (
-        --gray: fn.gray-palette(97%, true),
     ),
-), 'palette-media-light');
-
-@include iro.props-store((
-    --colors: (
-        --border: (
-            --stable:    iro.props-get-static(--colors --gray --5, 'palette-media-light'),
-            --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-media-light'),
-        ),
-    )
-), 'colors-media-light');
+), 'dark');
 
-//
+@each $name, $theme in config.$themes {
+    $props-name: if($name == config.$theme-default, iro.$props-default-tree, $name);
 
-@include iro.props-store((
-    --colors: (
-        --gray: fn.gray-palette(12%, true),
-    ),
-), 'palette-media-dark');
+    @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),
+                ),
+            ),
+        ), $props-name);
+    }
 
-@include iro.props-store((
-    --colors: (
-        --border: (
-            --stable:    iro.props-get-static(--colors --gray --5, 'palette-media-dark'),
-            --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-media-dark'),
+    @include iro.props-store((
+        --colors: (
+            --accent: iro.props-get-static(--colors map.get($theme, --accent), $props-name),
         ),
+    ), $props-name);
 
-        --blue:   iro.props-get-static(--colors --blue, 'colors-dark'),
-        --purple: iro.props-get-static(--colors --purple, 'colors-dark'),
-        --red:    iro.props-get-static(--colors --red, 'colors-dark'),
-        --green:  iro.props-get-static(--colors --green, 'colors-dark'),
-        --yellow: iro.props-get-static(--colors --yellow, 'colors-dark'),
+    @each $color in 'bg-l2' 'bg-l1' 'bg-base' 'border-mute' 'border' 'border-strong' 'text-disabled' 'text-mute-more' 'text-mute' 'text' 'heading' {
+        @include iro.props-store((
+            --colors: (
+                --#{$color}: fn.color(--base map.get($theme, --#{$color})),
+            ),
+        ), $props-name);
+    }    
+}
 
-        --accent: (
-            --primary:      iro.props-ref('colors-media', --colors --blue),
-            --error:        iro.props-ref('colors-media', --colors --red),
-            --success:      iro.props-ref('colors-media', --colors --green),
-            --warning:      iro.props-ref('colors-media', --colors --yellow),
-            --link-idle:    iro.props-ref('colors-media', --colors --blue),
-            --link-visited: iro.props-ref('colors-media', --colors --purple),
+@each $color in 'blue' 'purple' 'red' 'green' 'yellow' {
+    @include iro.props-store((
+        --colors: (
+            --#{$color}-static: iro.props-get-static(--colors --#{$color}),
         ),
-    )
-), 'colors-media');
-
-//
-
-@each $breakpoint in map-keys(media.$breakpoints) {
-    @include media.media('<=#{$breakpoint}') {
-        @include iro.props-store((
-            --colors: ()
-        ), $breakpoint);
-    }
+    ));
 }