Improved accent handling

1 files changed, 27 insertions, 44 deletions

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