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/_badge.scss      |  32 ++---
 src/objects/_button.scss     |  74 +++++++-----
 src/objects/_checkbox.scss   | 271 +++++++++++++++++++++++++++++++++++++++++++
 src/objects/_radio.scss      | 197 +++++++++++++++++++++++++++++++
 src/objects/_text-field.scss |  11 +-
 5 files changed, 536 insertions(+), 49 deletions(-)
 create mode 100644 src/objects/_checkbox.scss
 create mode 100644 src/objects/_radio.scss

(limited to 'src/objects')

diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 23ae305..6001564 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -6,29 +6,33 @@ $themes: accent positive negative warning;
 @include iro.props-namespace('badge') {
     @include iro.props-store((
         --dims: (
-            --pad-b:      fn.global-dim(--size --100),
+            --pad-b:      fn.global-dim(--size --50),
             --pad-i:      fn.global-dim(--size --150),
             --pad-i-pill: fn.global-dim(--size --200),
             --rounding:   fn.global-dim(--rounding),
-            --font-size:  fn.global-dim(--font-size --100),
+            --font-size:  fn.global-dim(--font-size --75),
 
             --sm: (
-                --pad-b:      fn.global-dim(--size --50),
+                --pad-b:      fn.global-dim(--size --25),
                 --pad-i:      fn.global-dim(--size --115),
                 --pad-i-pill: fn.global-dim(--size --150),
-                --font-size:  fn.global-dim(--font-size --75),
+                --font-size:  fn.global-dim(--font-size --50),
             ),
             --lg: (
-                --pad-b:      fn.global-dim(--size --125),
+                --pad-b:      fn.global-dim(--size --75),
                 --pad-i:      fn.global-dim(--size --175),
                 --pad-i-pill: fn.global-dim(--size --225),
-                --font-size:  fn.global-dim(--font-size --150),
+                --font-size:  fn.global-dim(--font-size --100),
             ),
             --xl: (
-                --pad-b:      fn.global-dim(--size --160),
+                --pad-b:      fn.global-dim(--size --100),
                 --pad-i:      fn.global-dim(--size --225),
                 --pad-i-pill: fn.global-dim(--size --300),
-                --font-size:  fn.global-dim(--font-size --200),
+                --font-size:  fn.global-dim(--font-size --150),
+            ),
+            
+            --key-focus: (
+                --border: fn.global-dim(--key-focus --border),
             ),
         ),
         --colors: (
@@ -43,7 +47,7 @@ $themes: accent positive negative warning;
             --key-focus: (
                 --bg:     fn.global-color(--base --50),
                 --label:  fn.global-color(--heading),
-                --border: fn.global-color(--yellow-static --400),
+                --border: fn.global-color(--focus-static --400),
             ),
 
             --quiet: (
@@ -63,13 +67,13 @@ $themes: accent positive negative warning;
         @include iro.props-store((
             --colors: (
                 --#{$theme}: (
-                    --bg:    fn.global-color(--#{$theme} --800),
-                    --label: fn.global-color(--#{$theme} --800-text),
+                    --bg:    fn.global-color(--#{$theme}-static --800),
+                    --label: fn.global-color(--#{$theme}-static --800-text),
                     --hover: (
-                        --bg: fn.global-color(--#{$theme} --900),
+                        --bg: fn.global-color(--#{$theme}-static --900),
                     ),
                     --active: (
-                        --bg: fn.global-color(--#{$theme} --900),
+                        --bg: fn.global-color(--#{$theme}-static --900),
                     ),
                 ),
 
@@ -169,7 +173,7 @@ $themes: accent positive negative warning;
         &:enabled {
             &:focus-visible {
                 background-color: fn.color(--key-focus --bg);
-                box-shadow:       0 0 0 fn.global-dim(--border --thick) fn.color(--key-focus --border);
+                box-shadow:       0 0 0 fn.dim(--key-focus --border) fn.color(--key-focus --border);
                 color:            fn.color(--key-focus --label);
             }
         }
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);
             }
         }
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
new file mode 100644
index 0000000..8e9e64c
--- /dev/null
+++ b/src/objects/_checkbox.scss
@@ -0,0 +1,271 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('checkbox') {
+    @include iro.props-store((
+        --dims: (
+            --size:            fn.global-dim(--size --175),
+            --label-gap:       fn.global-dim(--size --125),
+            --border:          fn.global-dim(--border --medium),
+            --pad-i:           fn.global-dim(--size --65),
+            --pad-b:           fn.global-dim(--size --65),
+            --rounding:        fn.global-dim(--rounding),
+            --spacing-sibling: fn.global-dim(--size --300),
+        ),
+        --colors: (
+            --box-border: fn.global-color(--text-mute),
+            --box-bg:     fn.global-color(--base --75),
+    
+            --hover: (
+                --label:      fn.global-color(--heading),
+                --box-border: fn.global-color(--text),
+            ),
+            --accent: (
+                --box-border: fn.global-color(--accent --900),
+    
+                --hover: (
+                    --box-border: fn.global-color(--accent --1000),
+                ),
+            ),
+            --key-focus: (
+                --bg:         fn.global-color(--focus-static --400),
+                --label:      fn.global-color(--focus-static --400-text),
+                --box-border: fn.global-color(--focus-static --1000),
+                --box-bg:     fn.global-color(--focus-static --1000-text),
+            ),
+            --disabled: (
+                --label:      fn.global-color(--text-disabled),
+                --box-border: fn.global-color(--border-strong),
+                --box-bg:     fn.global-color(--base --75),
+            )
+        ),
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:        inline-flex;
+        position:       relative;
+        align-items:    flex-start;
+        margin-inline:  calc(-1 * fn.dim(--pad-i)) calc(fn.dim(--spacing-sibling) - fn.dim(--pad-b));
+        padding-block:  fn.dim(--pad-b);
+        padding-inline: fn.dim(--pad-i);
+
+        @include iro.bem-elem('bg') {
+            display:        block;
+            position:       absolute;
+            z-index:        -1;
+            inset-block:    0;
+            inset-inline:   0;
+            border-radius:  fn.dim(--rounding);
+            pointer-events: none;
+        }
+    
+        @include iro.bem-elem('box') {
+            display:            block;
+            position:           relative;
+            flex:               0 0 auto;
+            inline-size:        fn.dim(--size);
+            block-size:         fn.dim(--size);
+            margin-block-start: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--size)));
+            border-radius:      fn.dim(--border);
+            background-color:   fn.color(--box-border);
+    
+            &::before,
+            &::after {
+                content:  '';
+                display:  block;
+                position: absolute;
+            }
+    
+            &::before {
+                z-index:            2;
+                inset-block-start:  fn.dim(--border);
+                inset-inline-start: fn.dim(--border);
+                inline-size:        calc(fn.dim(--size) - 2 * fn.dim(--border));
+                block-size:         calc(fn.dim(--size) - 2 * fn.dim(--border));
+                transition:         transform .2s ease;
+                background-color:   fn.color(--box-bg);
+            }
+    
+            &::after {
+                z-index:             3;
+                inset-block-start:   calc(.5 * fn.dim(--size) - 1px);
+                inset-inline-start:  calc(1.5 * fn.dim(--border));
+                box-sizing:          border-box;
+                inline-size:         calc(fn.dim(--size) - 3 * fn.dim(--border));
+                block-size:          0;
+                transform:           scale(0);
+                transition:          transform .2s ease;
+                border-block-width:  0 2px;
+                border-inline-width: 0 2px;
+                border-style:        solid;
+                border-radius:       2px;
+                border-color:        fn.color(--box-bg);
+            }
+        }
+    
+        @include iro.bem-elem('check-icon') {
+            display:            block;
+            position:           absolute;
+            z-index:            2;
+            inset-block-start:  calc(1 * fn.dim(--border));
+            inset-inline-start: calc(1 * fn.dim(--border));
+            inline-size:        calc(100% - 2 * fn.dim(--border));
+            block-size:         calc(100% - 2 * fn.dim(--border));
+            margin:             0;
+            transform:          scale(0);
+            transform-origin:   40% 90%;
+            transition:         transform .2s ease;
+            stroke-width:       iro.fn-px-to-rem(3px);
+            color:              fn.color(--box-bg);
+        }
+    
+        @include iro.bem-elem('label') {
+            align-self:  baseline;
+            margin-left: fn.dim(--label-gap);
+        }
+    
+        @include iro.bem-elem('native') {
+            position:           absolute;
+            inset-block-start:  0;
+            inset-inline-start: 0;
+            inline-size:        100%;
+            block-size:         100%;
+            margin:             0;
+            padding:            0;
+            overflow:           hidden;
+            opacity:            .0001;
+    
+            &:hover {
+                @include iro.bem-sibling-elem('label') {
+                    color: fn.color(--hover --label);
+                }
+    
+                @include iro.bem-sibling-elem('box') {
+                    background-color: fn.color(--hover --box-border);
+                }
+            }
+    
+            &:checked {
+                @include iro.bem-sibling-elem('box') {
+                    &::before {
+                        transform: scale(0);
+                    }
+    
+                    @include iro.bem-elem('check-icon') {
+                        transform: scale(1);
+                    }
+                }
+            }
+    
+            &:indeterminate {
+                @include iro.bem-sibling-elem('box') {
+                    &::before {
+                        transform: scale(0);
+                    }
+    
+                    &::after {
+                        transform: scale(1);
+                    }
+    
+                    @include iro.bem-elem('check-icon') {
+                        transform: scale(0);
+                    }
+                }
+            }
+    
+            &:disabled {
+                @include iro.bem-sibling-elem('label') {
+                    color: fn.color(--disabled --label);
+                }
+    
+                @include iro.bem-sibling-elem('box') {
+                    background-color: fn.color(--disabled --box-border);
+    
+                    &::before {
+                        background-color: fn.color(--disabled --box-bg);
+                    }
+                }
+            }
+    
+            &:focus-visible {
+                @include iro.bem-sibling-elem('bg') {
+                    background-color: fn.color(--key-focus --bg);
+                }
+
+                @include iro.bem-sibling-elem('label') {
+                    color: fn.color(--key-focus --label);
+                }
+
+                @include iro.bem-sibling-elem('box') {
+                    background-color: fn.color(--key-focus --box-border);
+
+                    &::before {
+                        background-color: fn.color(--key-focus --box-bg);
+                    }
+                }
+            }
+        }
+    
+        @include iro.bem-modifier('standalone') {
+            @include iro.bem-elem('box') {
+                margin-block-start: 0;
+            }
+        }
+    
+        @include iro.bem-modifier('accent') {
+            @include iro.bem-elem('native') {
+                &:checked {
+                    @include iro.bem-sibling-elem('box') {
+                        background-color: fn.color(--accent --box-border);
+                    }
+        
+                    &:hover {
+                        @include iro.bem-sibling-elem('box') {
+                            background-color: fn.color(--accent --hover --box-border);
+                        }
+                    }
+                }
+    
+                &:indeterminate {
+                    @include iro.bem-sibling-elem('box') {
+                        background-color: fn.color(--accent --box-border);
+                    }
+        
+                    &:hover {
+                        @include iro.bem-sibling-elem('box') {
+                            background-color: fn.color(--accent --hover --box-border);
+                        }
+                    }
+                }
+    
+                &:disabled {
+                    @include iro.bem-sibling-elem('box') {
+                        background-color: fn.color(--disabled --box-border);
+        
+                        &::before {
+                            background-color: fn.color(--disabled --box-bg);
+                        }
+                    }
+
+                    &:checked {
+                        @include iro.bem-sibling-elem('box') {
+                            background-color: fn.color(--disabled --box-border);
+                        }
+                    }
+        
+                    &:indeterminate {
+                        @include iro.bem-sibling-elem('box') {
+                            background-color: fn.color(--disabled --box-border);
+                        }
+                    }
+                }
+
+                &:focus-visible {
+                    @include iro.bem-sibling-elem('box') {
+                        background-color: fn.color(--key-focus --box-border);
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
new file mode 100644
index 0000000..5f461ce
--- /dev/null
+++ b/src/objects/_radio.scss
@@ -0,0 +1,197 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('radio') {
+    @include iro.props-store((
+        --dims: (
+            --diameter:        fn.global-dim(--size --200),
+            --label-gap:       fn.global-dim(--size --125),
+            --border:          fn.global-dim(--border --medium),
+            --pad-i:           fn.global-dim(--size --65),
+            --pad-b:           fn.global-dim(--size --65),
+            --rounding:        fn.global-dim(--rounding),
+            --spacing-sibling: fn.global-dim(--size --300),
+        ),
+        --colors: (
+            --circle-border: fn.global-color(--text-mute),
+            --circle-bg:     fn.global-color(--base --75),
+    
+            --hover: (
+                --label:         fn.global-color(--heading),
+                --circle-border: fn.global-color(--text),
+            ),
+            --accent: (
+                --circle-border: fn.global-color(--accent --900),
+    
+                --hover: (
+                    --circle-border: fn.global-color(--accent --1000),
+                ),
+            ),
+            --key-focus: (
+                --bg:            fn.global-color(--focus-static --400),
+                --label:         fn.global-color(--focus-static --400-text),
+                --circle-border: fn.global-color(--focus-static --1000),
+                --circle-bg:     fn.global-color(--focus-static --1000-text),
+            ),
+            --disabled: (
+                --label:         fn.global-color(--text-disabled),
+                --circle-border: fn.global-color(--border-strong),
+                --circle-bg:     fn.global-color(--base --75),
+            )
+        ),
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:        inline-flex;
+        position:       relative;
+        align-items:    flex-start;
+        margin-inline:  calc(-1 * fn.dim(--pad-i)) calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i));
+        padding-block:  fn.dim(--pad-b);
+        padding-inline: fn.dim(--pad-i);
+
+        @include iro.bem-elem('bg') {
+            display:        block;
+            position:       absolute;
+            z-index:        -1;
+            inset-block:    0;
+            inset-inline:   0;
+            border-radius:  fn.dim(--rounding);
+            pointer-events: none;
+        }
+    
+        @include iro.bem-elem('circle') {
+            display:            block;
+            box-sizing:         border-box;
+            flex:               0 0 auto;
+            inline-size:        fn.dim(--diameter);
+            block-size:         fn.dim(--diameter);
+            margin-block-start: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--diameter)));
+            border-radius:      2em;
+            background-color:   fn.color(--circle-border);
+    
+            &::after {
+                content:            '';
+                display:            block;
+                position:           relative;
+                inset-block-start:  fn.dim(--border);
+                inset-inline-start: fn.dim(--border);
+                inline-size:        calc(fn.dim(--diameter) - 2 * fn.dim(--border));
+                block-size:         calc(fn.dim(--diameter) - 2 * fn.dim(--border));
+                transition:         transform .2s ease;
+                border-radius:      fn.dim(--diameter);
+                background-color:   fn.color(--circle-bg);
+            }
+        }
+    
+        @include iro.bem-elem('label') {
+            align-self:          baseline;
+            margin-inline-start: fn.dim(--label-gap);
+        }
+    
+        @include iro.bem-elem('native') {
+            position:           absolute;
+            inset-block-start:  0;
+            inset-inline-start: 0;
+            inline-size:        100%;
+            block-size:         100%;
+            margin:             0;
+            padding:            0;
+            overflow:           hidden;
+            opacity:            .0001;
+    
+            &:hover {
+                @include iro.bem-sibling-elem('label') {
+                    color: fn.color(--hover --label);
+                }
+    
+                @include iro.bem-sibling-elem('circle') {
+                    background-color: fn.color(--hover --circle-border);
+                }
+            }
+    
+            &:checked {
+                @include iro.bem-sibling-elem('circle') {
+                    &::after {
+                        transform: scale(.44);
+                    }
+                }
+            }
+    
+            &:disabled {
+                @include iro.bem-sibling-elem('label') {
+                    color: fn.color(--disabled --label);
+                }
+    
+                @include iro.bem-sibling-elem('circle') {
+                    background-color: fn.color(--disabled --circle-border);
+    
+                    &::after {
+                        background-color: fn.color(--disabled --circle-bg);
+                    }
+                }
+            }
+
+            &:focus-visible {
+                @include iro.bem-sibling-elem('bg') {
+                    background-color: fn.color(--key-focus --bg);
+                }
+
+                @include iro.bem-sibling-elem('label') {
+                    color: fn.color(--key-focus --label);
+                }
+
+                @include iro.bem-sibling-elem('circle') {
+                    background-color: fn.color(--key-focus --circle-border);
+
+                    &::after {
+                        background-color: fn.color(--key-focus --circle-bg);
+                    }
+                }
+            }
+        }
+    
+        @include iro.bem-modifier('standalone') {
+            @include iro.bem-elem('circle') {
+                margin-block-start: 0;
+            }
+        }
+    
+        @include iro.bem-modifier('accent') {
+            @include iro.bem-elem('native') {
+                &:checked {
+                    @include iro.bem-sibling-elem('circle') {
+                        background-color: fn.color(--accent --circle-border);
+                    }
+        
+                    &:hover {
+                        @include iro.bem-sibling-elem('circle') {
+                            background-color: fn.color(--accent --hover --circle-border);
+                        }
+                    }
+                }
+    
+                &:disabled {
+                    @include iro.bem-sibling-elem('circle') {
+                        background-color: fn.color(--disabled --circle-border);
+        
+                        &::after {
+                            background-color: fn.color(--disabled --circle-bg);
+                        }
+                    }
+        
+                    &:checked {
+                        @include iro.bem-sibling-elem('circle') {
+                            background-color: fn.color(--disabled --circle-border);
+                        }
+                    }
+                }
+
+                &:focus-visible {
+                    @include iro.bem-sibling-elem('circle') {
+                        background-color: fn.color(--key-focus --circle-border);
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index de5bcd1..04c809e 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -26,7 +26,8 @@
 
 @mixin keyboard-focus {
     @include iro.bem-sibling-elem('bg') {
-        border: fn.dim(--key-focus --border) solid fn.color(--key-focus --border);
+        border-color: fn.color(--key-focus --border);
+        box-shadow:   0 0 0 fn.dim(--key-focus --border) fn.color(--key-focus --outline);
     }
 }
 
@@ -46,9 +47,10 @@
             --focus: (
                 --border:  fn.global-dim(--border --medium),
             ),
+            
             --key-focus: (
-                --border:  fn.global-dim(--border --thick),
-            )
+                --border: fn.global-dim(--key-focus --border),
+            ),
         ),
         --colors: (
             --bg:          fn.global-color(--base --50),
@@ -63,7 +65,8 @@
                 --border: fn.global-color(--accent --900),
             ),
             --key-focus: (
-                --border: fn.global-color(--yellow-static --400),
+                --border:  fn.global-color(--focus --1300),
+                --outline: fn.global-color(--focus-static --400),
             ),
             --error: (
                 --border: fn.global-color(--negative --900),
-- 
cgit v1.2.3-70-g09d2