Improved accent structure

1 files changed, 40 insertions, 34 deletions

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