Improved accent structure

10 files changed, 89 insertions, 77 deletions

diff --git a/src/_config.scss b/src/_config.scss
index 78f81c7..b54cb37 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -16,15 +16,17 @@ media.$unit-intervals: (
 );
 
 $wanted-grays: (
-    -1.25,
-    -1.1,
-    1,
-    1.15,
-    1.3,
-    1.73,
-    2.4,
-    3.26,
-    5,
-    11,
-    21,
+    --1:  -1.25,
+    --2:  -1.1,
+    --3:  1,
+
+    --4:  1.15,
+    --5:  1.3,
+    --6:  1.73,
+
+    --7:  2.4,
+    --8:  3.26,
+    --9:  5,
+    --10: 11,
+    --11: 21,
 );
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index fa6de76..44b7d0e 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -70,32 +70,30 @@
 @include iro.fn-execute {
     @include iro.props-store((
         --colors: (
-            --gray-h: 220,
-            --gray-s: 5%,
+            --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
 
-            --bg-hi2: fn.color(--gray1, null), // Lightest background
-            --bg-hi:  fn.color(--gray2, null), // Lighter background
-            --bg:     fn.color(--gray3, null), // Background
+            --obj-hi: fn.color(--gray --4, null),
+            --obj:    fn.color(--gray --5, null),
+            --obj-lo: fn.color(--gray --6, null),
 
-            --obj-hi: fn.color(--gray4, null),
-            --obj:    fn.color(--gray5, null),
-            --obj-lo: fn.color(--gray6, 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
 
-            --fg-hi3: fn.color(--gray7, null),  // Disabled text
-            --fg-hi2: fn.color(--gray8, null),  // Placeholder text
-            --fg-hi:  fn.color(--gray9, null),  // Faint text
-            --fg:     fn.color(--gray10, null), // Text
-            --fg-lo:  fn.color(--gray11, null), // Strong text
+            --gray:   ( --h: 220, --s: 5% ),
+            --blue:   fn.color-palette(blend.lch(48% 50 279)),
+            --red:    fn.color-palette(blend.lch(48% 50 23)),
+            --green:  fn.color-palette(blend.lch(63% 50 141)),
+            --yellow: fn.color-palette(blend.lch(73% 50 90)),
 
             --accent: (
-                --blue:   fn.accent-palette(blend.lch(48% 50 279)),
-                --red:    fn.accent-palette(blend.lch(48% 50 23)),
-                --green:  fn.accent-palette(blend.lch(58% 50 141)),
-                --yellow: fn.accent-palette(blend.lch(73% 50 90)),
-
-                --primary: iro.props-ref('colors', --colors --accent --blue),
-                --error:   iro.props-ref('colors', --colors --accent --red),
-                --success: iro.props-ref('colors', --colors --accent --green),
+                --primary: iro.props-ref('colors', --colors --blue),
+                --error:   iro.props-ref('colors', --colors --red),
+                --success: iro.props-ref('colors', --colors --green),
             ),
 
             --selection: (
@@ -106,7 +104,7 @@
 
             --focus: (
                 --shadow:    0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary --semi, null),
-                --fill:      fn.color(--accent --primary --main, null),
+                --fill:      fn.color(--accent --primary --bg, null),
                 --text:      fn.color(--accent --primary --lo, null),
                 --fill-text: fn.color(--accent --primary --fg, null),
             ),
@@ -114,11 +112,15 @@
     ), 'colors');
 
     @include iro.props-store((
-        --colors: fn.gray-palette(94%)
+        --colors: (
+            --gray: fn.gray-palette(94%),
+        ),
     ), 'palette-light');
 
     @include iro.props-store((
-        --colors: fn.gray-palette(100%)
+        --colors: (
+            --gray: fn.gray-palette(100%),
+        ),
     ), 'palette-light-raised');
 }
 
@@ -127,25 +129,29 @@
 @include iro.fn-execute {
     @include iro.props-store((
         --colors: (
-            --accent: (
-                --blue:   fn.accent-palette(blend.lch(58% 60 279), -1),
-                --red:    fn.accent-palette(blend.lch(58% 60 23), -1),
-                --green:  fn.accent-palette(blend.lch(68% 60 141), -1),
-                --yellow: fn.accent-palette(blend.lch(83% 60 90), -1),
+            --blue:   fn.color-palette(blend.lch(58% 60 279), -1),
+            --red:    fn.color-palette(blend.lch(58% 60 23), -1),
+            --green:  fn.color-palette(blend.lch(73% 60 141), -1),
+            --yellow: fn.color-palette(blend.lch(83% 60 90), -1),
 
-                --primary: iro.props-ref('colors-dark', --colors --accent --blue),
-                --error:   iro.props-ref('colors-dark', --colors --accent --red),
-                --success: iro.props-ref('colors-dark', --colors --accent --green),
+            --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),
             ),
         )
     ), 'colors-dark');
 
     @include iro.props-store((
-        --colors: fn.gray-palette(9%)
+        --colors: (
+            --gray: fn.gray-palette(9%),
+        ),
     ), 'palette-dark');
 
     @include iro.props-store((
-        --colors: fn.gray-palette(16%)
+        --colors: (
+            --gray: fn.gray-palette(16%),
+        ),
     ), 'palette-dark-raised');
 }
 
diff --git a/src/_functions.scss b/src/_functions.scss
index 56fdf39..c45dcfb 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -78,10 +78,12 @@
             }
         }
 
-        $wanted-contrast: nth($wanted-contrasts, $wanted-idx);
+        $wanted:          nth($wanted-contrasts, $wanted-idx);
+        $wanted-key:      nth($wanted, 1);
+        $wanted-contrast: nth($wanted, 2);
 
         @if $contrast >= $wanted-contrast {
-            $result:     append($result, $color);
+            $result:     map.set($result, $wanted-key, $color);
             $wanted-idx: $wanted-idx + 1;
         } @else {
             $colors-idx: $colors-idx + $dir * 1;
@@ -90,19 +92,23 @@
 
     $last-color: nth($colors, if($dir == -1, 1, $colors-len));
 
-    @for $i from $wanted-idx through $wanted-len {
-        $result: append($result, $last-color);
+    @if $wanted-idx <= $wanted-len {
+        @for $i from $wanted-idx through $wanted-len {
+            $wanted:     nth($wanted-contrasts, $i);
+            $wanted-key: nth($wanted, 1);
+            $result:     map.set($result, $wanted-key, $last-color);
+        }
     }
 
     @return $result;
 }
 
-@function accent-palette($base, $dir: 1) {
+@function color-palette($base, $dir: 1) {
     @return (
-        --hi:        blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 10%),
-        --main:      $base,
-        --lo:        blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -10%),
-        --lo2:       blend.scale($base, $lightness: $dir * -25%, $chroma: $dir * -20%),
+        --bg-hi:     blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 10%),
+        --bg:        $base,
+        --obj:       blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -10%),
+        --obj-lo:    blend.scale($base, $lightness: $dir * -25%, $chroma: $dir * -20%),
         --semi:      rgba($base, .4),
         --selection: rgba($base, .99),
         --fg:        blend.contrast($base),
@@ -118,11 +124,9 @@
 
     $colors: multi-contrast(blend.lch($lightness * 1% 0 0), $grays, config.$wanted-grays);
 
-    $palette: ();
-
-    @for $i from 1 through length($colors) {
-        $palette: map.set($palette, --gray#{$i}, hsl(color(--gray-h), color(--gray-s), lightness(nth($colors, $i))));
+    @each $key, $color in $colors {
+        $colors: map.set($colors, $key, hsl(color(--gray --h), color(--gray --s), lightness($color)));
     }
 
-    @return $palette;
+    @return $colors;
 }
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 586ee84..f93f342 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -57,18 +57,18 @@
                 ),
             ),
             --accent: (
-                --bg:            fn.global-color(--accent --primary --main),
+                --bg:            fn.global-color(--accent --primary --bg),
                 --label:         fn.global-color(--accent --primary --fg),
-                --outline-label: fn.global-color(--accent --primary --lo),
+                --outline-label: fn.global-color(--accent --primary --obj),
                 --shadow:        0 0 0 0 transparent,
 
                 --hover: (
-                    --bg:     fn.global-color(--accent --primary --lo),
+                    --bg:     fn.global-color(--accent --primary --obj),
                     --label:  fn.global-color(--accent --primary --fg),
                     --shadow: 0 0 0 0 transparent,
                 ),
                 --active: (
-                    --bg:     fn.global-color(--accent --primary --lo2),
+                    --bg:     fn.global-color(--accent --primary --obj-lo),
                     --label:  fn.global-color(--accent --primary --fg),
                     --shadow: 0 0 0 0 transparent,
                 ),
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index be47eee..b7762d2 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -23,10 +23,10 @@
                 --box-border: fn.global-color(--fg),
             ),
             --accent: (
-                --box-border: fn.global-color(--accent --primary --main),
+                --box-border: fn.global-color(--accent --primary --bg),
     
                 --hover: (
-                    --box-border: fn.global-color(--accent --primary --lo),
+                    --box-border: fn.global-color(--accent --primary --obj),
                 ),
             ),
             --key-focus: (
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss
index 4b75282..a42be1d 100644
--- a/src/objects/_field-label.scss
+++ b/src/objects/_field-label.scss
@@ -15,7 +15,7 @@
         --colors: (
             --label:      fn.global-color(--fg-hi),
             --hint:       fn.global-color(--fg),
-            --error-hint: fn.global-color(--accent --error --main),
+            --error-hint: fn.global-color(--accent --error --bg),
             --disabled:   fn.global-color(--fg-hi3),
         ),
     ), 'colors');
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index 85f94f2..7346a74 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -23,10 +23,10 @@
                 --circle-border: fn.global-color(--fg),
             ),
             --accent: (
-                --circle-border: fn.global-color(--accent --primary --main),
+                --circle-border: fn.global-color(--accent --primary --bg),
     
                 --hover: (
-                    --circle-border: fn.global-color(--accent --primary --lo),
+                    --circle-border: fn.global-color(--accent --primary --obj),
                 ),
             ),
             --key-focus: (
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index e06c80b..0ddd115 100644
--- a/src/objects/_status-indicator.scss
+++ b/src/objects/_status-indicator.scss
@@ -11,9 +11,9 @@
     @include iro.props-store((
         --colors: (
             --default: fn.global-color(--obj-lo),
-            --green:   fn.global-color(--accent --green --hi),
-            --yellow:  fn.global-color(--accent --yellow --hi),
-            --red:     fn.global-color(--accent --red --hi),
+            --green:   fn.global-color(--green --bg-hi),
+            --yellow:  fn.global-color(--yellow --bg-hi),
+            --red:     fn.global-color(--red --bg-hi),
         ),
     ), 'colors');
 
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index e0ff178..06b5540 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -25,10 +25,10 @@
                 --handle-border: fn.global-color(--fg),
             ),
             --accent: (
-                --handle-border: fn.global-color(--accent --primary --main),
+                --handle-border: fn.global-color(--accent --primary --bg),
     
                 --hover: (
-                    --handle-border: fn.global-color(--accent --primary --lo),
+                    --handle-border: fn.global-color(--accent --primary --obj),
                 ),
             ),
             --key-focus: (
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index b18b404..856c41f 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -56,7 +56,7 @@
                 --shadow: 0 0 0 0 transparent,
             ),
             --focus: (
-                --border: fn.global-color(--accent --primary --main),
+                --border: fn.global-color(--accent --primary --bg),
                 --shadow: 0 0 0 0 transparent,
             ),
             --key-focus: (
@@ -64,15 +64,15 @@
                 --shadow: fn.global-color(--focus --shadow),
             ),
             --error: (
-                --border: fn.global-color(--accent --error --hi),
+                --border: fn.global-color(--accent --error --bg-hi),
                 --shadow: 0 0 0 0 transparent,
     
                 --hover: (
-                    --border: fn.global-color(--accent --error --main),
+                    --border: fn.global-color(--accent --error --bg),
                     --shadow: 0 0 0 0 transparent,
                 ),
                 --focus: (
-                    --border: fn.global-color(--accent --error --main),
+                    --border: fn.global-color(--accent --error --bg),
                     --shadow: 0 0 0 0 transparent,
                 ),
             ),