Improved accent handling

9 files changed, 49 insertions, 78 deletions

diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss
index cf4c940..5d18afe 100644
--- a/src/_apply-vars.scss
+++ b/src/_apply-vars.scss
@@ -27,24 +27,12 @@
     }
 }
 
-@include iro.bem-theme('grayscale') {
-    @include iro.props-assign('colors', $root: --colors --grayscale-accent, $prefix: --colors --accent);
-}
-
 /*@media (prefers-color-scheme: dark) {
     @include iro.props-assign('dark');
     @include iro.props-assign('dark-palette');
 
-    @include iro.bem-theme('grayscale') {
-        @include iro.props-assign('dark', $root: --colors --grayscale-accent, $prefix: --colors --accent);
-    }
-
     @include iro.bem-theme('raised') {
         @include iro.props-assign('dark-raised-palette');
         @include iro.props-assign('dark');
-    
-        @include iro.bem-multi('at-theme' 'grayscale', 'theme' 'grayscale') {
-            @include iro.props-assign('dark', $root: --colors --grayscale-accent, $prefix: --colors --accent);
-        }
     }
 }*/
diff --git a/src/_vars.scss b/src/_vars.scss
index 825ec9c..fd369f7 100644
--- a/src/_vars.scss
+++ b/src/_vars.scss
@@ -85,11 +85,19 @@ media.$unit-intervals: (
 
 //
 
-@include iro.fn-execute {
-    $primary-accent-base: hsl(222, 49.8%, 52.4%);
-    $error-accent-base:   hsl(352, 49.8%, 52.4%);
-    $success-accent-base: hsl(113, 49.8%, 39.6%);
+@function accent-palette($base) {
+    @return (
+        --hi:        scale-color($base, $lightness: 15%),
+        --main:      $base,
+        --lo:        scale-color($base, $lightness: -15%),
+        --lo2:       scale-color($base, $lightness: -25%),
+        --semi:      rgba($base, .4),
+        --selection: rgba($base, .99),
+        --fg:        #fff,
+    );
+}
 
+@include iro.fn-execute {
     @include iro.props-store((
         --colors: (
             --bg-hi2: fn.color(--gray1, null), // Lightest background
@@ -107,52 +115,27 @@ media.$unit-intervals: (
             --fg-lo:  fn.color(--gray11, null), // Strong text
 
             --accent: (
-                --primary-const-hi:        scale-color($primary-accent-base, $lightness: 15%),
-                --primary-const:           $primary-accent-base,
-                --primary-const-lo:        scale-color($primary-accent-base, $lightness: -15%),
-                --primary-const-lo2:       scale-color($primary-accent-base, $lightness: -25%),
-                --primary-const-semi:      rgba($primary-accent-base, .4),
-                --primary-const-selection: rgba($primary-accent-base, .99),
-                --primary-const-fg:        #fff,
-
-                --primary-hi:   fn.color(--accent --primary-const-hi, null),
-                --primary:      fn.color(--accent --primary-const, null),
-                --primary-lo:   fn.color(--accent --primary-const-lo, null),
-                --primary-lo2:  fn.color(--accent --primary-const-lo2, null),
-                --primary-fg:   fn.color(--accent --primary-const-fg, null),
-
-                --error-hi:   scale-color($error-accent-base, $lightness: 15%),
-                --error:      $error-accent-base,
-                --error-lo:   scale-color($error-accent-base, $lightness: -15%),
-                --error-lo2:  scale-color($error-accent-base, $lightness: -25%),
-                --error-fg:   #fff,
-
-                --success-hi:   scale-color($success-accent-base, $lightness: 15%),
-                --success:      $success-accent-base,
-                --success-lo:   scale-color($success-accent-base, $lightness: -15%),
-                --success-lo2:  scale-color($success-accent-base, $lightness: -25%),
-                --success-fg:   #fff,
-            ),
-
-            --grayscale-accent: (
-                --primary-hi:  fn.color(--fg-hi2, null),
-                --primary:     fn.color(--fg-hi, null),
-                --primary-lo:  fn.color(--fg, null),
-                --primary-lo2: fn.color(--fg-lo, null),
-                --primary-fg:  #fff,
+                --blue:   accent-palette(hsl(222, 49.8%, 52.4%)),
+                --red:    accent-palette(hsl(352, 49.8%, 52.4%)),
+                --green:  accent-palette(hsl(113, 49.8%, 39.6%)),
+                --yellow: accent-palette(hsl(50, 59.8%, 52.4%)),
+
+                --primary: iro.props-ref('colors', --colors --accent --blue),
+                --error:   iro.props-ref('colors', --colors --accent --red),
+                --success: iro.props-ref('colors', --colors --accent --green),
             ),
 
             --selection: (
-                --bg:     fn.color(--accent --primary-const-selection, null),
-                --bg-img: fn.color(--accent --primary-const-semi, null),
-                --fg:     fn.color(--accent --primary-const-fg, null),
+                --bg:     fn.color(--accent --primary --selection, null),
+                --bg-img: fn.color(--accent --primary --semi, null),
+                --fg:     fn.color(--accent --primary --fg, null),
             ),
 
             --focus: (
-                --shadow:    0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary-const-semi, null),
-                --fill:      fn.color(--accent --primary-const, null),
-                --text:      fn.color(--accent --primary-const-lo, null),
-                --fill-text: fn.color(--accent --primary-const-fg, null),
+                --shadow:    0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary --semi, null),
+                --fill:      fn.color(--accent --primary --main, null),
+                --text:      fn.color(--accent --primary --lo, null),
+                --fill-text: fn.color(--accent --primary --fg, null),
             ),
         ),
     ), 'colors');
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 32d1193..0df0148 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -51,25 +51,25 @@
                 ),
                 --key-focus: (
                     --bg:     transparent,
-                    --label:  fn.global-color(--accent --primary-lo2),
+                    --label:  fn.global-color(--accent --primary --lo2),
                     --border: fn.global-color(--focus --fill),
                     --shadow: fn.global-color(--focus --shadow),
                 ),
             ),
             --accent: (
-                --bg:            fn.global-color(--accent --primary),
-                --label:         fn.global-color(--accent --primary-fg),
-                --outline-label: fn.global-color(--accent --primary-lo),
+                --bg:            fn.global-color(--accent --primary --main),
+                --label:         fn.global-color(--accent --primary --fg),
+                --outline-label: fn.global-color(--accent --primary --lo),
                 --shadow:        0 0 0 0 transparent,
 
                 --hover: (
-                    --bg:     fn.global-color(--accent --primary-lo),
-                    --label:  fn.global-color(--accent --primary-fg),
+                    --bg:     fn.global-color(--accent --primary --lo),
+                    --label:  fn.global-color(--accent --primary --fg),
                     --shadow: 0 0 0 0 transparent,
                 ),
                 --active: (
-                    --bg:     fn.global-color(--accent --primary-lo2),
-                    --label:  fn.global-color(--accent --primary-fg),
+                    --bg:     fn.global-color(--accent --primary --lo2),
+                    --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 efc85d6..053a6ab 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),
+                --box-border: fn.global-color(--accent --primary --main),
     
                 --hover: (
-                    --box-border: fn.global-color(--accent --primary-lo),
+                    --box-border: fn.global-color(--accent --primary --lo),
                 ),
             ),
             --key-focus: (
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss
index aaa5cca..66f5ef7 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),
+            --error-hint: fn.global-color(--accent --error --main),
             --disabled:   fn.global-color(--fg-hi3),
         ),
     ), 'colors');
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index 46f2a2a..b27766e 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),
+                --circle-border: fn.global-color(--accent --primary --main),
     
                 --hover: (
-                    --circle-border: fn.global-color(--accent --primary-lo),
+                    --circle-border: fn.global-color(--accent --primary --lo),
                 ),
             ),
             --key-focus: (
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index c688cbc..e06c80b 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:  scale-color(hsl(113, 49.8%, 49.6%), $lightness: 10%),
-            --yellow: scale-color(hsl(50, 59.8%, 58.4%), $lightness: 10%),
-            --red:    scale-color(hsl(352, 69.8%, 58.4%), $lightness: 10%),
+            --green:   fn.global-color(--accent --green --hi),
+            --yellow:  fn.global-color(--accent --yellow --hi),
+            --red:     fn.global-color(--accent --red --hi),
         ),
     ), 'colors');
 
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index 59e4c55..cc215a5 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),
+                --handle-border: fn.global-color(--accent --primary --main),
     
                 --hover: (
-                    --handle-border: fn.global-color(--accent --primary-lo),
+                    --handle-border: fn.global-color(--accent --primary --lo),
                 ),
             ),
             --key-focus: (
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index b819811..55e8a5c 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),
+                --border: fn.global-color(--accent --primary --main),
                 --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 --hi),
                 --shadow: 0 0 0 0 transparent,
     
                 --hover: (
-                    --border: fn.global-color(--accent --error),
+                    --border: fn.global-color(--accent --error --main),
                     --shadow: 0 0 0 0 transparent,
                 ),
                 --focus: (
-                    --border: fn.global-color(--accent --error),
+                    --border: fn.global-color(--accent --error --main),
                     --shadow: 0 0 0 0 transparent,
                 ),
             ),