From b566769679473b91d2f63406fba7cc3b44c4fcc1 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Tue, 25 Jun 2024 11:11:05 +0200
Subject: Update

---
 src/objects/_badge.scss      | 165 ++++++++++++++++++++++--------
 src/objects/_button.scss     |  58 +++++++----
 src/objects/_checkbox.scss   |  18 +---
 src/objects/_divider.scss    |   2 +-
 src/objects/_radio.scss      |  18 +---
 src/objects/_switch.scss     | 237 +++++++++++++++++++++++++++++++++++++++++++
 src/objects/_text-field.scss |  11 +-
 7 files changed, 410 insertions(+), 99 deletions(-)
 create mode 100644 src/objects/_switch.scss

(limited to 'src/objects')

diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 6a984bf..b9020b6 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -1,7 +1,60 @@
+@use 'sass:string';
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
 
-$themes: accent positive negative warning;
+$themes:        'accent' 'positive' 'negative' 'warning' !default;
+$static-themes: 'black' 'white' !default;
+
+@mixin theme($theme) {
+    background-color: fn.color(--#{$theme} --bg);
+    color:            fn.color(--#{$theme} --label);
+
+    &:link,
+    &:visited,
+    &:enabled {
+        &:hover {
+            background-color: fn.color(--#{$theme} --hover --bg);
+            color:            fn.color(--#{$theme} --hover --label);
+        }
+
+        &:active {
+            background-color: fn.color(--#{$theme} --active --bg);
+            color:            fn.color(--#{$theme} --active --label);
+        }
+    }
+
+    @include iro.bem-modifier('quiet') {
+        background-color: fn.color(--#{$theme}-quiet --bg);
+        color:            fn.color(--#{$theme}-quiet --label);
+
+        &:link,
+        &:visited,
+        &:enabled {
+            &:hover {
+                background-color: fn.color(--#{$theme}-quiet --hover --bg);
+                color:            fn.color(--#{$theme}-quiet --hover --label);
+            }
+
+            &:active {
+                background-color: fn.color(--#{$theme}-quiet --active --bg);
+                color:            fn.color(--#{$theme}-quiet --active --label);
+            }
+        }
+    }
+
+    @if string.slice($theme, 1, 7) == 'static-' {
+        &:link,
+        &:visited,
+        &:enabled {
+            &:focus-visible {
+                border-color:     fn.color(--#{$theme} --key-focus --border);
+                outline:          fn.color(--#{$theme} --key-focus --outline) solid fn.dim(--key-focus --outline);
+                background-color: fn.color(--#{$theme} --key-focus --bg);
+                color:            fn.color(--#{$theme} --key-focus --label);
+            }
+        }
+    }
+}
 
 @include iro.props-namespace('badge') {
     @include iro.props-store((
@@ -32,7 +85,8 @@ $themes: accent positive negative warning;
             ),
             
             --key-focus: (
-                --border: fn.global-dim(--key-focus --border),
+                --border:  fn.global-dim(--border --medium),
+                --outline: fn.global-dim(--key-focus --border),
             ),
         ),
         --colors: (
@@ -45,9 +99,10 @@ $themes: accent positive negative warning;
                 --bg: fn.global-color(--heading),
             ),
             --key-focus: (
-                --bg:     fn.global-color(--base --50),
-                --label:  fn.global-color(--heading),
-                --border: fn.global-color(--focus-static --400),
+                --bg:      fn.global-color(--base --50),
+                --label:   fn.global-color(--heading),
+                --border:  fn.global-color(--focus --1100),
+                --outline: fn.global-color(--focus --400),
             ),
 
             --quiet: (
@@ -70,10 +125,12 @@ $themes: accent positive negative warning;
                     --bg:    fn.global-color(--#{$theme}-static --900),
                     --label: fn.global-color(--#{$theme}-static --900-text),
                     --hover: (
-                        --bg: fn.global-color(--#{$theme}-static --1000),
+                        --bg:    fn.global-color(--#{$theme}-static --1000),
+                        --label: fn.global-color(--#{$theme}-static --1000-text),
                     ),
                     --active: (
-                        --bg: fn.global-color(--#{$theme}-static --1100),
+                        --bg:    fn.global-color(--#{$theme}-static --1100),
+                        --label: fn.global-color(--#{$theme}-static --1000-text),
                     ),
                 ),
 
@@ -81,20 +138,61 @@ $themes: accent positive negative warning;
                     --bg:    fn.global-color(--#{$theme} --200),
                     --label: fn.global-color(--#{$theme} --1100),
                     --hover: (
-                        --bg: fn.global-color(--#{$theme} --300),
+                        --bg:    fn.global-color(--#{$theme} --300),
+                        --label: fn.global-color(--#{$theme} --1200),
                     ),
                     --active: (
-                        --bg: fn.global-color(--#{$theme} --400),
+                        --bg:    fn.global-color(--#{$theme} --400),
+                        --label: fn.global-color(--#{$theme} --1300),
                     ),
                 )
             ),
         ));
     }
 
+    @each $theme in $static-themes {
+        @include iro.props-store((
+            --colors: (
+                --static-#{$theme}: (
+                    --bg:    fn.global-color(--#{$theme}-transparent --800),
+                    --label: fn.global-color(--#{$theme}-transparent --text),
+                    --hover: (
+                        --bg:    fn.global-color(--#{$theme}-transparent --900),
+                        --label: fn.global-color(--#{$theme}-transparent --text),
+                    ),
+                    --active: (
+                        --bg:    fn.global-color(--#{$theme}-transparent --900),
+                        --label: fn.global-color(--#{$theme}-transparent --text),
+                    ),
+                    --key-focus: (
+                        --bg:      fn.global-color(--#{$theme}-transparent --100),
+                        --label:   fn.global-color(--#{$theme}-transparent --900),
+                        --border:  fn.global-color(--#{$theme}-transparent --900),
+                        --outline: fn.global-color(--#{$theme}-transparent --300),
+                    ),
+                ),
+
+                --static-#{$theme}-quiet: (
+                    --bg:    fn.global-color(--#{$theme}-transparent --200),
+                    --label: fn.global-color(--#{$theme}-transparent --900),
+                    --hover: (
+                        --bg:    fn.global-color(--#{$theme}-transparent --300),
+                        --label: fn.global-color(--#{$theme}-transparent --900),
+                    ),
+                    --active: (
+                        --bg:    fn.global-color(--#{$theme}-transparent --400),
+                        --label: fn.global-color(--#{$theme}-transparent --900),
+                    ),
+                )
+            )
+        ));
+    }
+
     @include iro.bem-object(iro.props-namespace()) {
         display:          inline-block;
-        padding-block:    fn.dim(--pad-b);
-        padding-inline:   fn.dim(--pad-i);
+        padding-block:    calc(fn.dim(--pad-b) - fn.dim(--key-focus --border));
+        padding-inline:   calc(fn.dim(--pad-i) - fn.dim(--key-focus --border));
+        border:           fn.dim(--key-focus --border) solid transparent;
         border-radius:    fn.dim(--rounding);
         background-color: fn.color(--bg);
         color:            fn.color(--label);
@@ -134,37 +232,7 @@ $themes: accent positive negative warning;
     
         @each $theme in $themes {
             @include iro.bem-modifier($theme) {
-                background-color: fn.color(--#{$theme} --bg);
-                color:            fn.color(--#{$theme} --label);
-    
-                &:link,
-                &:visited,
-                &:enabled {
-                    &:hover {
-                        background-color: fn.color(--#{$theme} --hover --bg);
-                    }
-    
-                    &:active {
-                        background-color: fn.color(--#{$theme} --active --bg);
-                    }
-                }
-
-                @include iro.bem-modifier('quiet') {
-                    background-color: fn.color(--#{$theme}-quiet --bg);
-                    color:            fn.color(--#{$theme}-quiet --label);
-        
-                    &:link,
-                    &:visited,
-                    &:enabled {
-                        &:hover {
-                            background-color: fn.color(--#{$theme}-quiet --hover --bg);
-                        }
-        
-                        &:active {
-                            background-color: fn.color(--#{$theme}-quiet --active --bg);
-                        }
-                    }
-                }
+                @include theme($theme);
             }
         }
 
@@ -172,12 +240,19 @@ $themes: accent positive negative warning;
         &:visited,
         &:enabled {
             &:focus-visible {
+                border-color:     fn.color(--key-focus --border);
+                outline:          fn.color(--key-focus --outline) solid fn.dim(--key-focus --outline);
                 background-color: fn.color(--key-focus --bg);
-                box-shadow:       0 0 0 fn.dim(--key-focus --border) fn.color(--key-focus --border);
                 color:            fn.color(--key-focus --label);
             }
         }
     
+        @each $theme in $static-themes {
+            @include iro.bem-modifier(static-#{$theme}) {
+                @include theme(static-#{$theme});
+            }
+        }
+    
         @include iro.bem-modifier('pill') {
             padding-inline: fn.dim(--pad-i-pill);
             border-radius:  10em;
@@ -185,8 +260,8 @@ $themes: accent positive negative warning;
     
         @each $size in sm lg xl {
             @include iro.bem-modifier($size) {
-                padding-block:  fn.dim(--#{$size} --pad-b);
-                padding-inline: fn.dim(--#{$size} --pad-i);
+                padding-block:  calc(fn.dim(--#{$size} --pad-b) - fn.dim(--key-focus --border));
+                padding-inline: calc(fn.dim(--#{$size} --pad-i) - fn.dim(--key-focus --border));
                 font-size:      fn.dim(--#{$size} --font-size);
         
                 @include iro.bem-modifier('pill') {
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 0da3a65..08dc0ea 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -2,8 +2,8 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
 
-$themes:        'accent' 'negative';
-$static-themes: 'black' 'white';
+$themes:        'accent' 'negative' !default;
+$static-themes: 'black' 'white' !default;
 
 @mixin theme($theme: null) {
     $key: if($theme == null, (), --#{$theme});
@@ -57,6 +57,17 @@ $static-themes: 'black' 'white';
     }
 
     @include theme(static-#{$theme});
+
+    &:link,
+    &:visited,
+    &:enabled {
+        &:focus-visible {
+            border-color:     fn.color(list.join($key, --key-focus --border));
+            outline:          fn.color(list.join($key, --key-focus --outline)) solid fn.dim(--key-focus --outline);
+            background-color: fn.color(list.join($key, --key-focus --bg));
+            color:            fn.color(list.join($key, --key-focus --label));
+        }
+    }
 }
 
 @include iro.props-namespace('button') {
@@ -86,7 +97,7 @@ $static-themes: 'black' 'white';
             ),
             
             --key-focus: (
-                --border: fn.global-dim(--key-focus --border),
+                --outline: fn.global-dim(--key-focus --border),
             ),
         ),
         --colors: (
@@ -111,7 +122,8 @@ $static-themes: 'black' 'white';
             --key-focus: (
                 --bg:      fn.global-color(--base --50),
                 --label:   fn.global-color(--heading),
-                --border:  fn.global-color(--focus-static --400),
+                --border:  fn.global-color(--focus --1100),
+                --outline: fn.global-color(--focus --400),
             ),
             
             --primary: (
@@ -163,11 +175,6 @@ $static-themes: 'black' 'white';
                     --outline-border: fn.global-color(--#{$theme}-transparent --300),
                     --outline-label:  fn.global-color(--#{$theme}-transparent --900),
 
-                    --disabled: (
-                        --bg:             fn.global-color(--#{$theme}-transparent --200),
-                        --outline-border: fn.global-color(--#{$theme}-transparent --300),
-                        --label:          fn.global-color(--#{$theme}-transparent --500),
-                    ),
                     --hover: (
                         --bg:     fn.global-color(--#{$theme}-transparent --300),
                         --label:  fn.global-color(--#{$theme}-transparent --900),
@@ -176,6 +183,17 @@ $static-themes: 'black' 'white';
                         --bg:     fn.global-color(--#{$theme}-transparent --400),
                         --label:  fn.global-color(--#{$theme}-transparent --900),
                     ),
+                    --disabled: (
+                        --bg:             fn.global-color(--#{$theme}-transparent --200),
+                        --outline-border: fn.global-color(--#{$theme}-transparent --300),
+                        --label:          fn.global-color(--#{$theme}-transparent --500),
+                    ),
+                    --key-focus: (
+                        --bg:      fn.global-color(--#{$theme}-transparent --100),
+                        --label:   fn.global-color(--#{$theme}-transparent --900),
+                        --border:  fn.global-color(--#{$theme}-transparent --900),
+                        --outline: fn.global-color(--#{$theme}-transparent --300),
+                    ),
                 ),
                 --static-#{$theme}-primary: (
                     --bg:             fn.global-color(--#{$theme}-transparent --800),
@@ -240,28 +258,28 @@ $static-themes: 'black' 'white';
                 @include theme($theme);
             }
         }
-    
-        @each $theme in $static-themes {
-            @include iro.bem-modifier(static-#{$theme}) {
-                @include static-theme($theme);
-            }
-
-            @include iro.bem-modifier(static-#{$theme}-primary) {
-                @include static-theme(#{$theme}-primary, $theme);
-            }
-        }
 
         &:link,
         &:visited,
         &:enabled {
             &:focus-visible {
                 border-color:     fn.color(--key-focus --border);
+                outline:          fn.color(--key-focus --outline) solid fn.dim(--key-focus --outline);
                 background-color: fn.color(--key-focus --bg);
-                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);
             }
         }
     
+        @each $theme in $static-themes {
+            @include iro.bem-modifier(static-#{$theme}) {
+                @include static-theme($theme);
+            }
+
+            @include iro.bem-modifier(static-#{$theme}-primary) {
+                @include static-theme(#{$theme}-primary, $theme);
+            }
+        }
+    
         @include iro.bem-modifier('round') {
             inline-size:    calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b));
             padding-inline: 0;
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index e56b10e..a254ec4 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -49,16 +49,6 @@
         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;
@@ -125,7 +115,9 @@
         }
     
         @include iro.bem-elem('native') {
+            appearance:         none;
             position:           absolute;
+            z-index:            -1;
             inset-block-start:  0;
             inset-inline-start: 0;
             inline-size:        100%;
@@ -133,7 +125,7 @@
             margin:             0;
             padding:            0;
             overflow:           hidden;
-            opacity:            .0001;
+            border-radius:      fn.dim(--rounding);
     
             &:hover {
                 @include iro.bem-sibling-elem('label') {
@@ -188,9 +180,7 @@
             }
     
             &:focus-visible {
-                @include iro.bem-sibling-elem('bg') {
-                    background-color: fn.color(--key-focus --bg);
-                }
+                background-color: fn.color(--key-focus --bg);
 
                 @include iro.bem-sibling-elem('label') {
                     color: fn.color(--key-focus --label);
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 29ab537..84ddf12 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -3,7 +3,7 @@
 @use '../functions' as fn;
 @use '../config';
 
-$static-themes: 'black' 'white';
+$static-themes: 'black' 'white' !default;
 
 @include iro.props-namespace('divider') {
     @include iro.props-store((
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index 5f461ce..12dc6ca 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -48,16 +48,6 @@
         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;
@@ -89,7 +79,9 @@
         }
     
         @include iro.bem-elem('native') {
+            appearance:         none;
             position:           absolute;
+            z-index:            -1;
             inset-block-start:  0;
             inset-inline-start: 0;
             inline-size:        100%;
@@ -97,7 +89,7 @@
             margin:             0;
             padding:            0;
             overflow:           hidden;
-            opacity:            .0001;
+            border-radius:      fn.dim(--rounding);
     
             &:hover {
                 @include iro.bem-sibling-elem('label') {
@@ -132,9 +124,7 @@
             }
 
             &:focus-visible {
-                @include iro.bem-sibling-elem('bg') {
-                    background-color: fn.color(--key-focus --bg);
-                }
+                background-color: fn.color(--key-focus --bg);
 
                 @include iro.bem-sibling-elem('label') {
                     color: fn.color(--key-focus --label);
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
new file mode 100644
index 0000000..9ebb290
--- /dev/null
+++ b/src/objects/_switch.scss
@@ -0,0 +1,237 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('switch') {
+    @include iro.props-store((
+        --dims: (
+            --width:           fn.global-dim(--size --350),
+            --height:          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: (
+            --track-bg:      fn.global-color(--border),
+            --handle-border: fn.global-color(--text-mute),
+            --handle-bg:     fn.global-color(--base --50),
+    
+            --hover: (
+                --label:         fn.global-color(--heading),
+                --handle-border: fn.global-color(--text),
+            ),
+            --accent: (
+                --handle-border: fn.global-color(--accent --900),
+    
+                --hover: (
+                    --handle-border: fn.global-color(--accent --1000),
+                ),
+            ),
+            --disabled: (
+                --label:         fn.global-color(--text-disabled),
+                --track-bg:      fn.global-color(--border),
+                --handle-border: fn.global-color(--border-strong),
+                --handle-bg:     fn.global-color(--base --50),
+            ),
+            --key-focus: (
+                --bg:            fn.global-color(--focus-static --400),
+                --label:         fn.global-color(--focus-static --400-text),
+                --track-bg:      fn.global-color(--focus-static --700),
+                --handle-border: fn.global-color(--focus-static --1000),
+                --handle-bg:     fn.global-color(--focus-static --1000-text),
+            ),
+        ),
+    ));
+
+    @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-inline: fn.dim(--pad-i);
+        padding-block:  fn.dim(--pad-b);
+    
+        @include iro.bem-elem('indicator') {
+            display:            block;
+            box-sizing:         border-box;
+            flex:               0 0 auto;
+            inline-size:        fn.dim(--width);
+            block-size:         fn.dim(--height);
+            margin-block-start: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--height)));
+            transition:         background-color .2s ease;
+            border-radius:      2em;
+            background-color:   fn.color(--track-bg);
+    
+            &::after {
+                content:          '';
+                display:          block;
+                inline-size:      calc(fn.dim(--height) - 2 * fn.dim(--border));
+                block-size:       calc(fn.dim(--height) - 2 * fn.dim(--border));
+                transition:       transform .2s ease;
+                border:           fn.dim(--border) solid fn.color(--handle-border);
+                border-radius:    fn.dim(--width);
+                background-color: fn.color(--handle-bg);
+            }
+        }
+    
+        @include iro.bem-elem('label') {
+            align-self:          baseline;
+            margin-inline-start: fn.dim(--label-gap);
+        }
+    
+        @include iro.bem-elem('native') {
+            appearance:         none;
+            position:           absolute;
+            z-index:            -1;
+            inset-block-start:  0;
+            inset-inline-start: 0;
+            inline-size:        100%;
+            block-size:         100%;
+            margin:             0;
+            padding:            0;
+            overflow:           hidden;
+            border-radius:      fn.dim(--rounding);
+    
+            &:hover {
+                @include iro.bem-sibling-elem('label') {
+                    color: fn.color(--hover --label);
+                }
+    
+                @include iro.bem-sibling-elem('indicator') {
+                    &::after {
+                        border-color: fn.color(--hover --handle-border);
+                    }
+                }
+            }
+    
+            &:checked {
+                @include iro.bem-sibling-elem('indicator') {
+                    background-color: fn.color(--handle-border);
+    
+                    &::after {
+                        transform:    translate(calc(fn.dim(--width) - fn.dim(--height) + .5px), 0);
+                        border-color: fn.color(--handle-border);
+                    }
+                }
+    
+                &:hover {
+                    @include iro.bem-sibling-elem('indicator') {
+                        background-color: fn.color(--hover --handle-border);
+
+                        &::after {
+                            border-color: fn.color(--hover --handle-border);
+                        }
+                    }
+                }
+            }
+    
+            &:disabled {
+                @include iro.bem-sibling-elem('label') {
+                    color: fn.color(--disabled --label);
+                }
+    
+                @include iro.bem-sibling-elem('indicator') {
+                    background-color: fn.color(--disabled --track-bg);
+    
+                    &::after {
+                        border-color:     fn.color(--disabled --handle-border);
+                        background-color: fn.color(--disabled --handle-bg);
+                    }
+                }
+    
+                &:checked {
+                    @include iro.bem-sibling-elem('indicator') {
+                        background-color: fn.color(--disabled --handle-border);
+    
+                        &::after {
+                            border-color: fn.color(--disabled --handle-border);
+                        }
+                    }
+                }
+            }
+    
+            &:focus-visible {
+                background-color: fn.color(--key-focus --bg);
+
+                @include iro.bem-sibling-elem('label') {
+                    color: fn.color(--key-focus --label);
+                }
+
+                @include iro.bem-sibling-elem('indicator') {
+                    background-color: fn.color(--key-focus --track-bg);
+
+                    &::after {
+                        border-color:     fn.color(--key-focus --handle-border);
+                        background-color: fn.color(--key-focus --handle-bg);
+                    }
+                }
+
+                &:checked {
+                    @include iro.bem-sibling-elem('indicator') {
+                        background-color: fn.color(--key-focus --handle-border);
+                    }
+                }
+            }
+        }
+    
+        @include iro.bem-modifier('standalone') {
+            @include iro.bem-elem('indicator') {
+                margin-block-start: 0;
+            }
+        }
+    
+        @include iro.bem-modifier('accent') {
+            @include iro.bem-elem('native') {
+                &:checked {
+                    @include iro.bem-sibling-elem('indicator') {
+                        background-color: fn.color(--accent --handle-border);
+        
+                        &::after {
+                            border-color: fn.color(--accent --handle-border);
+                        }
+                    }
+        
+                    &:hover {
+                        @include iro.bem-sibling-elem('indicator') {
+                            background-color: fn.color(--accent --hover --handle-border);
+    
+                            &::after {
+                                border-color: fn.color(--accent --hover --handle-border);
+                            }
+                        }
+                    }
+                }
+        
+                &:disabled {
+                    @include iro.bem-sibling-elem('label') {
+                        color: fn.color(--disabled --label);
+                    }
+
+                    &:checked {
+                        @include iro.bem-sibling-elem('indicator') {
+                            background-color: fn.color(--disabled --handle-border);
+
+                            &::after {
+                                border-color: fn.color(--disabled --handle-border);
+                            }
+                        }
+                    }
+                }
+
+                &:focus-visible {
+                    &:checked {
+                        @include iro.bem-sibling-elem('indicator') {
+                            background-color: fn.color(--key-focus --handle-border);
+
+                            &::after {
+                                border-color: fn.color(--key-focus --handle-border);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index 37108ab..babec79 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -26,8 +26,9 @@
 
 @mixin keyboard-focus {
     @include iro.bem-sibling-elem('bg') {
-        border-color: fn.color(--key-focus --border);
-        box-shadow:   0 0 0 fn.dim(--key-focus --border) fn.color(--key-focus --outline);
+        border-color:   fn.color(--key-focus --border);
+        outline:        fn.color(--key-focus --outline) solid fn.dim(--key-focus --border);
+        //outline-offset: fn.dim(--focus --border);
     }
 }
 
@@ -62,11 +63,11 @@
                 --border: fn.global-color(--text-mute-more),
             ),
             --focus: (
-                --border: fn.global-color(--accent --900),
+                --border: fn.global-color(--focus --1100),
             ),
             --key-focus: (
-                --border:  fn.global-color(--focus --1300),
-                --outline: fn.global-color(--focus-static --400),
+                --border:  fn.global-color(--focus --1100),
+                --outline: fn.global-color(--focus --400),
             ),
             --error: (
                 --border: fn.global-color(--negative --700),
-- 
cgit v1.2.3-70-g09d2