From 64a841c69ead262666dd0754218585d0f05cf735 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sun, 23 Jun 2024 19:05:33 +0200
Subject: WIP: New color calculations

---
 src/objects/_button.scss | 74 ++++++++++++++++++++++++++++--------------------
 1 file changed, 43 insertions(+), 31 deletions(-)

(limited to 'src/objects/_button.scss')

diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index a823f17..1a0e52c 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -2,7 +2,7 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
 
-$themes: primary accent positive negative warning;
+$themes: accent negative;
 
 @mixin button-variant($theme: null) {
     $key: if($theme == null, (), --#{$theme});
@@ -19,6 +19,7 @@ $themes: primary accent positive negative warning;
         &:link,
         &:visited,
         &:enabled {
+            border-color:     fn.color(list.join($key, --outline-border));
             background-color: transparent;
             color:            fn.color(list.join($key, --outline-label));
         }
@@ -66,11 +67,16 @@ $themes: primary accent positive negative warning;
                 --pad-b:      fn.global-dim(--size --150),
                 --font-size:  fn.global-dim(--font-size --200),
             ),
+            
+            --key-focus: (
+                --border: fn.global-dim(--key-focus --border),
+            ),
         ),
         --colors: (
-            --bg:            fn.global-color(--border-mute),
-            --label:         fn.global-color(--text),
-            --outline-label: fn.global-color(--text),
+            --bg:             fn.global-color(--border-mute),
+            --label:          fn.global-color(--text),
+            --outline-border: fn.global-color(--border),
+            --outline-label:  fn.global-color(--text),
 
             --hover: (
                 --bg:     fn.global-color(--border),
@@ -81,19 +87,21 @@ $themes: primary accent positive negative warning;
                 --label:  fn.global-color(--heading),
             ),
             --disabled: (
-                --bg:     fn.global-color(--border-mute),
-                --label:  fn.global-color(--text-disabled),
+                --bg:             fn.global-color(--border-mute),
+                --outline-border: fn.global-color(--border),
+                --label:          fn.global-color(--text-disabled),
             ),
             --key-focus: (
-                --bg:     fn.global-color(--base --50),
-                --label:  fn.global-color(--heading),
-                --border: fn.global-color(--yellow-static --400),
+                --bg:      fn.global-color(--base --50),
+                --label:   fn.global-color(--heading),
+                --border:  fn.global-color(--focus-static --400),
             ),
             
             --primary: (
-                --bg:            fn.global-color(--base --800),
-                --label:         fn.global-color(--base --800-text),
-                --outline-label: fn.global-color(--text),
+                --bg:             fn.global-color(--base --800),
+                --label:          fn.global-color(--base --800-text),
+                --outline-border: fn.global-color(--base --800),
+                --outline-label:  fn.global-color(--text),
 
                 --hover: (
                     --bg:     fn.global-color(--base --900),
@@ -108,26 +116,25 @@ $themes: primary accent positive negative warning;
     ));
 
     @each $theme in $themes {
-        @if $theme != primary {
-            @include iro.props-store((
-                --colors: (
-                    --#{$theme}: (
-                        --bg:            fn.global-color(--#{$theme} --900),
-                        --label:         fn.global-color(--#{$theme} --900-text),
-                        --outline-label: fn.global-color(--#{$theme} --1000),
-
-                        --hover: (
-                            --bg:     fn.global-color(--#{$theme} --1000),
-                            --label:  fn.global-color(--#{$theme} --1000-text),
-                        ),
-                        --active: (
-                            --bg:     fn.global-color(--#{$theme} --1100),
-                            --label:  fn.global-color(--#{$theme} --1100-text),
-                        ),
+        @include iro.props-store((
+            --colors: (
+                --#{$theme}: (
+                    --bg:             fn.global-color(--#{$theme}-static --900),
+                    --label:          fn.global-color(--#{$theme}-static --900-text),
+                    --outline-border: fn.global-color(--#{$theme} --900),
+                    --outline-label:  fn.global-color(--#{$theme} --1000),
+
+                    --hover: (
+                        --bg:     fn.global-color(--#{$theme}-static --1000),
+                        --label:  fn.global-color(--#{$theme}-static --1000-text),
+                    ),
+                    --active: (
+                        --bg:     fn.global-color(--#{$theme}-static --1100),
+                        --label:  fn.global-color(--#{$theme}-static --1100-text),
                     ),
                 ),
-            ));
-        }
+            ),
+        ));
     }
 
     @include iro.bem-object(iro.props-namespace()) {
@@ -151,6 +158,7 @@ $themes: primary accent positive negative warning;
         }
     
         @include iro.bem-modifier('outline') {
+            border-color:     fn.color(--disabled --outline-border);
             background-color: transparent;
             box-shadow:       none;
         }
@@ -164,6 +172,10 @@ $themes: primary accent positive negative warning;
         }
 
         @include button-variant();
+
+        @include iro.bem-modifier('primary') {
+            @include button-variant('primary');
+        }
     
         @each $theme in $themes {
             @include iro.bem-modifier($theme) {
@@ -177,7 +189,7 @@ $themes: primary accent positive negative warning;
             &:focus-visible {
                 border-color:     fn.color(--key-focus --border);
                 background-color: fn.color(--key-focus --bg);
-                box-shadow:       0 0 0 calc(fn.global-dim(--border --thick) - fn.dim(--border)) fn.color(--key-focus --border);
+                box-shadow:       0 0 0 calc(fn.dim(--key-focus --border) - fn.dim(--border)) fn.color(--key-focus --border);
                 color:            fn.color(--key-focus --label);
             }
         }
-- 
cgit v1.2.3-70-g09d2