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/.old/objects/_checkbox.scss | 249 ------------------------------------
 src/.old/objects/_radio.scss    | 176 --------------------------
 src/_config.scss                |  62 ++++-----
 src/_declare-vars.scss          |   8 +-
 src/_functions.scss             |  82 ++++++++++--
 src/_objects.scss               |   4 +-
 src/functions/_colors.scss      | 159 +++++++++++++++++++++++
 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 +-
 src/scopes/_links.scss          |   9 +-
 tpl/objects/checkbox.pug        |   1 +
 tpl/objects/radio.pug           |   1 +
 tpl/views/button.pug            |   2 +-
 tpl/views/links.pug             |   6 +-
 17 files changed, 818 insertions(+), 526 deletions(-)
 delete mode 100644 src/.old/objects/_checkbox.scss
 delete mode 100644 src/.old/objects/_radio.scss
 create mode 100644 src/functions/_colors.scss
 create mode 100644 src/objects/_checkbox.scss
 create mode 100644 src/objects/_radio.scss

diff --git a/src/.old/objects/_checkbox.scss b/src/.old/objects/_checkbox.scss
deleted file mode 100644
index b3bb34d..0000000
--- a/src/.old/objects/_checkbox.scss
+++ /dev/null
@@ -1,249 +0,0 @@
-@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-x:     fn.global-dim(--size --65),
-            --pad-y:     fn.global-dim(--size --65),
-        ),
-    ), 'dims');
-
-    @include iro.props-store((
-        --colors: (
-            --box-border: fn.global-color(--fg-hi),
-            --box-bg:     fn.global-color(--bg-hi),
-    
-            --hover: (
-                --label:      fn.global-color(--fg-lo),
-                --box-border: fn.global-color(--fg),
-            ),
-            --accent: (
-                --box-border: fn.global-color(--accent --primary --solid --bg),
-    
-                --hover: (
-                    --box-border: fn.global-color(--accent --primary --solid --obj),
-                ),
-            ),
-            --key-focus: (
-                --label:      fn.global-color(--focus --text),
-                --box-border: fn.global-color(--focus --fill),
-                --shadow:     fn.global-color(--focus --shadow),
-            ),
-            --disabled: (
-                --label:      fn.global-color(--fg-hi3),
-                --box-border: fn.global-color(--obj-lo),
-                --box-bg:     fn.global-color(--bg-hi),
-            )
-        ),
-    ), 'colors');
-
-    @include iro.bem-object(iro.props-namespace()) {
-        display:      inline-flex;
-        position:     relative;
-        align-items:  flex-start;
-        margin-right: calc(-1 * fn.dim(--pad-x));
-        margin-left:  calc(-1 * fn.dim(--pad-x));
-        padding:      fn.dim(--pad-y) fn.dim(--pad-x);
-    
-        @include iro.bem-elem('box') {
-            display:          block;
-            position:         relative;
-            flex:             0 0 auto;
-            width:            fn.dim(--size);
-            height:           fn.dim(--size);
-            margin-top:       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;
-                top:              fn.dim(--border);
-                left:             fn.dim(--border);
-                width:            calc(fn.dim(--size) - 2 * fn.dim(--border));
-                height:           calc(fn.dim(--size) - 2 * fn.dim(--border));
-                transition:       transform .2s ease;
-                background-color: fn.color(--box-bg);
-            }
-    
-            &::after {
-                z-index:       3;
-                top:           calc(.5 * fn.dim(--size) - 1px);
-                left:          calc(1.5 * fn.dim(--border));
-                box-sizing:    border-box;
-                width:         calc(fn.dim(--size) - 3 * fn.dim(--border));
-                height:        0;
-                transform:     scale(0);
-                transition:    transform .2s ease;
-                border-width:  0 2px 2px 0;
-                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;
-            top:              calc(1 * fn.dim(--border));
-            left:             calc(1 * fn.dim(--border));
-            width:            calc(100% - 2 * fn.dim(--border));
-            height:           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;
-            top:      0;
-            left:     0;
-            width:    100%;
-            height:   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);
-                    }
-                }
-            }
-    
-            @include iro.bem-at-theme('keyboard') {
-                &:focus {
-                    @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);
-                        box-shadow:       fn.color(--key-focus --shadow);
-                    }
-                }
-            }
-        }
-    
-        @include iro.bem-modifier('standalone') {
-            @include iro.bem-elem('box') {
-                margin-top: 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);
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/src/.old/objects/_radio.scss b/src/.old/objects/_radio.scss
deleted file mode 100644
index 5af7a12..0000000
--- a/src/.old/objects/_radio.scss
+++ /dev/null
@@ -1,176 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('radio') {
-    @include iro.props-store((
-        --dims: (
-            --diameter:  calc(fn.global-dim(--size --175) + 1px),
-            --label-gap: fn.global-dim(--size --125),
-            --border:    fn.global-dim(--border --medium),
-            --pad-x:     fn.global-dim(--size --65),
-            --pad-y:     fn.global-dim(--size --65),
-        ),
-    ), 'dims');
-
-    @include iro.props-store((
-        --colors: (
-            --circle-border: fn.global-color(--fg-hi),
-            --circle-bg:     fn.global-color(--bg-hi),
-    
-            --hover: (
-                --label:         fn.global-color(--fg-lo),
-                --circle-border: fn.global-color(--fg),
-            ),
-            --accent: (
-                --circle-border: fn.global-color(--accent --primary --solid --bg),
-    
-                --hover: (
-                    --circle-border: fn.global-color(--accent --primary --solid --obj),
-                ),
-            ),
-            --key-focus: (
-                --label:         fn.global-color(--focus --text),
-                --circle-border: fn.global-color(--focus --fill),
-                --shadow:        fn.global-color(--focus --shadow),
-            ),
-            --disabled: (
-                --label:         fn.global-color(--fg-hi3),
-                --circle-border: fn.global-color(--obj-lo),
-                --circle-bg:     fn.global-color(--bg-hi),
-            )
-        ),
-    ), 'colors');
-
-    @include iro.bem-object(iro.props-namespace()) {
-        display:      inline-flex;
-        position:     relative;
-        align-items:  flex-start;
-        margin-right: calc(-1 * fn.dim(--pad-x));
-        margin-left:  calc(-1 * fn.dim(--pad-x));
-        padding:      fn.dim(--pad-y) fn.dim(--pad-x);
-    
-        @include iro.bem-elem('circle') {
-            display:          block;
-            box-sizing:       border-box;
-            flex:             0 0 auto;
-            width:            fn.dim(--diameter);
-            height:           fn.dim(--diameter);
-            margin-top:       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;
-                top:              fn.dim(--border);
-                left:             fn.dim(--border);
-                width:            calc(fn.dim(--diameter) - 2 * fn.dim(--border));
-                height:           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-left: fn.dim(--label-gap);
-        }
-    
-        @include iro.bem-elem('native') {
-            position: absolute;
-            top:      0;
-            left:     0;
-            width:    100%;
-            height:   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);
-                    }
-                }
-            }
-    
-            @include iro.bem-at-theme('keyboard') {
-                &:focus {
-                    @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);
-                        box-shadow:       fn.color(--key-focus --shadow);
-                    }
-                }
-            }
-        }
-    
-        @include iro.bem-modifier('standalone') {
-            @include iro.bem-elem('circle') {
-                margin-top: 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);
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/src/_config.scss b/src/_config.scss
index 3cffbfd..950ff3b 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -23,7 +23,7 @@ media.$unit-intervals: (
 
 res.$named-viewports: media.$breakpoints;
 
-$palette-precision: 5 !default;
+$palette-precision: 0.01 !default;
 
 $static-colors: (
     --base: hsl(0, 0%, 97%),
@@ -56,29 +56,29 @@ $static-colors: (
 $theme-light: (
     --contrasts: (
         --grays: (
-            --50:  1.1,
-            --75:  1.04,
-            --100: 1,
+            --50:  -10,
+            --75:  -5,
+            --100: 0,
         
-            --200: -1.15,
-            --300: -1.35,
-            --400: -1.7,
+            --200: 13.2375,
+            --300: 26.475,
+            --400: 39.7125,
         
-            --500: -2.4,
-            --600: -3.3,
-            --700: -6,
-            --800: -13,
-            --900: -20,
+            --500: 52.95,
+            --600: 66.1875,
+            --700: 79.425,
+            --800: 92.6625,
+            --900: 105.9,
         ),
 
         --colors: (
-            --100:  -1.08,
-            --200:  -1.20,
-            --300:  -1.33,
-            --400:  -1.58,
-            --500:  -1.92,
-            --600:  -2.39,
-            --700:  -3.01,
+            --100:  -1.18,
+            --200:  -1.30,
+            --300:  -1.43,
+            --400:  -1.68,
+            --500:  -2.00,
+            --600:  -2.45,
+            --700:  -3.04,
             --800:  -3.87,
             --900:  -5.07,
             --1000: -6.72,
@@ -90,7 +90,7 @@ $theme-light: (
 
     --ranges: (
         --full:  1,
-        --muted: 0.8,
+        --muted: .2,
     ),
 
     --palettes: (
@@ -104,15 +104,17 @@ $theme-light: (
 
     --semantic: (
         --accent:          --blue,
-        --positive:        --green,
-        --negative:        --red,
-        --warning:         --yellow,
-
         --accent-static:   --blue-static,
+        --positive:        --green,
         --positive-static: --green-static,
+        --negative:        --red,
         --negative-static: --red-static,
+        --warning:         --yellow,
         --warning-static:  --yellow-static,
 
+        --focus:           --yellow,
+        --focus-static:    --yellow-static,
+
         --bg-l2:           --base --50,
         --bg-l1:           --base --100,
         --bg-base:         --base --200,
@@ -166,7 +168,7 @@ $theme-dark: (
 
     --ranges: (
         --full:  1,
-        --muted: 0.8,
+        --muted: .2,
     ),
 
     --palettes: (
@@ -180,15 +182,17 @@ $theme-dark: (
 
     --semantic: (
         --accent:          --blue,
-        --positive:        --green,
-        --negative:        --red,
-        --warning:         --yellow,
-
         --accent-static:   --blue-static,
+        --positive:        --green,
         --positive-static: --green-static,
+        --negative:        --red,
         --negative-static: --red-static,
+        --warning:         --yellow,
         --warning-static:  --yellow-static,
 
+        --focus:           --yellow,
+        --focus-static:    --yellow-static,
+
         --bg-base:         --base --50,
         --bg-l1:           --base --75,
         --bg-l2:           --base --100,
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 4574333..2c845fa 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -78,7 +78,7 @@
         ),
 
         --font-size: (
-            --50:   iro.fn-px-to-rem(11px),
+            --50:   iro.fn-px-to-rem(12px),
             --75:   iro.fn-px-to-rem(13px),
             --100:  iro.fn-px-to-rem(14px),
             --150:  iro.fn-px-to-rem(16px),
@@ -102,8 +102,8 @@
 
         --rounding:   4px,
 
-        --focus: (
-            --outline-width: 3px,
+        --key-focus: (
+            --border: 4px,
         ),
 
         --paragraph: (
@@ -183,7 +183,6 @@
                 $palette,
                 map.get(config.$static-colors, --contrasts),
                 1,
-                false,
                 map.get(config.$static-colors, --base),
             ),
         ),
@@ -204,7 +203,6 @@
                     $base-color,
                     map.get($theme, --contrasts, $contrasts),
                     map.get($theme, --ranges, $ranges),
-                    true,
                     list.nth(map.get($theme, --palettes, --base), 1),
                 ),
             ),
diff --git a/src/_functions.scss b/src/_functions.scss
index 8553833..2d4aeef 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -2,11 +2,15 @@
 @use 'sass:math';
 @use 'sass:map';
 @use 'sass:list';
-@use 'iro-sass/src/index' as iro;
-@use 'config';
+@use 'sass:meta';
+
 @use '@oddbird/blend';
 @use '@oddbird/blend/sass/convert' as blend-convert;
 
+@use 'functions/colors' as iro-colors;
+@use 'iro-sass/src/index' as iro;
+@use 'config';
+
 @function color($key, $tree: iro.$props-default-tree, $default: null, $global: false) {
     @return iro.props-get(list.join(--colors, $key), $tree, $default, $global);
 }
@@ -107,7 +111,9 @@
     @return $result;
 }
 
-@function palette($base-color, $contrasts, $range: 1, $desaturate: true, $reference-color: $base-color) {
+@function palette-old($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) {
+    $chroma-range: 1 - $chroma-range;
+
     $palette: ();
 
     @if list.nth(list.nth($contrasts, 1), 2) > list.nth(list.nth($contrasts, list.length($contrasts)), 2) {
@@ -115,12 +121,25 @@
     }
 
     $reference-lightness: blend.lightness($reference-color);
-    $i: -100%;
+    $i: 0;
+
+    @while $i <= 1 {
+        $l: $i * 200% - 100%;
+        $c: 0%;
+
+        @if $chroma-range != 0 {
+            $c: $i * 2 - 1;
+            $c: if(
+                $reference-lightness >= 50%,
+                math.clamp(0, $c, 1),
+                math.clamp(0, -1 * $c, 1)
+            );
+            $c: $chroma-range * $c * -100%;
+        }
+
+        $palette: list.append($palette, blend.scale($base-color, $l: $l, $c: $c));
 
-    @while $i <= 100% {
-        $c:       if($desaturate, .8 * if($reference-lightness >= 50%, -1 * math.clamp(0%, $i, 100%), math.clamp(-100%, $i, 0%)), 0%);
-        $palette: list.append($palette, blend.scale($base-color, $l: $range * $i, $c: $c));
-        $i:       $i + config.$palette-precision;
+        $i: $i + config.$palette-precision;
     }
 
     $palette: multi-contrast($base-color, $palette, $contrasts, $reference-color);
@@ -132,6 +151,53 @@
     @return $palette;
 }
 
+@function palette($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) {
+    $base-lch: blend-convert.Lab_to_LCH(
+        iro-colors.lin_sRGB_to_Oklab(
+            blend-convert.lin_sRGB(
+                blend-convert.sassToRgb($base-color)
+            )
+        )
+    );
+    $ref-y: iro-colors.apca_sRGB_to_Y($reference-color);
+
+    $palette: ();
+
+    @each $key, $contrast in $contrasts {
+        $y: iro-colors.apcaReverse($contrast, $ref-y);
+        $l: list.nth($base-lch, 1);
+
+        @if $y != false {
+            @debug $contrast, $ref-y, $y, iro-colors.apca_Y_to_sRGB($y);
+    
+            $y-lch: blend-convert.Lab_to_LCH(
+                iro-colors.lin_sRGB_to_Oklab(
+                    blend-convert.lin_sRGB(
+                        blend-convert.sassToRgb(
+                            iro-colors.apca_Y_to_sRGB($y)
+                        )
+                    )
+                )
+            );
+            $l: list.nth($y-lch, 1);
+        } @else {
+            @debug $contrast, $ref-y, $y;
+        }
+
+        $color: oklch($l * 100% list.nth($base-lch, 2) list.nth($base-lch, 3));
+        //$color: blend-convert.LCH_to_Lab($color);
+        //$color: iro-colors.Oklab_to_lin_sRGB($color);
+        //$color: blend-convert();
+
+        $palette: map.set($palette, $key, $color);
+        $palette: map.set($palette, #{$key}-text, if($l > 50%, #000, #fff));
+    }
+
+    @debug '-------------------------------------------';
+
+    @return $palette;
+}
+
 @function px-to-em($size, $base: iro.$vars-root-size) {
     @return math.div($size, $base) * 1em;
 }
diff --git a/src/_objects.scss b/src/_objects.scss
index 3dd5176..0f510ff 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -6,8 +6,8 @@
 @use 'objects/button';
 @use 'objects/text-field';
 @use 'objects/field-label';
-// @use 'objects/radio';
-// @use 'objects/checkbox';
+@use 'objects/radio';
+@use 'objects/checkbox';
 // @use 'objects/switch';
 // @use 'objects/action-button';
 // @use 'objects/overflow-button';
diff --git a/src/functions/_colors.scss b/src/functions/_colors.scss
new file mode 100644
index 0000000..265c09a
--- /dev/null
+++ b/src/functions/_colors.scss
@@ -0,0 +1,159 @@
+/* stylelint-disable scss/dollar-variable-pattern */
+/* stylelint-disable scss/at-function-pattern */
+
+@use 'sass:color';
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use '@oddbird/blend/sass/utils/pow';
+
+$SA98G: (
+    mainTRC:     2.4,
+
+    sRco:        0.2126729, 
+    sGco:        0.7151522, 
+    sBco:        0.0721750,
+
+    normBG:      0.56, 
+    normTXT:     0.57,
+    revTXT:      0.62,
+    revBG:       0.65,
+
+    blkThrs:     0.022,
+    blkClmp:     1.414,
+    scaleBoW:    1.14,
+    scaleWoB:    1.14,
+    loBoWoffset: 0.027,
+    loWoBoffset: 0.027,
+    deltaYmin:   0.0005,
+    loClip:      0.0001,
+
+    mFactor:     1.94685544331710,
+    mOffsetIn:   0.03873938165714010,
+    mExpAdj:     0.2833433964208690,
+    mOffsetOut:  0.3128657958707580,
+);
+
+@function lin_sRGB_to_Oklab($color) {
+    $r_: list.nth($color, 1);
+    $g_: list.nth($color, 2);
+    $b_: list.nth($color, 3);
+
+    $l: pow.cbrt(0.4122214708 * $r_ + 0.5363325363 * $g_ + 0.0514459929 * $b_);
+    $m: pow.cbrt(0.2119034982 * $r_ + 0.6806995451 * $g_ + 0.1073969566 * $b_);
+	$s: pow.cbrt(0.0883024619 * $r_ + 0.2817188376 * $g_ + 0.6299787005 * $b_);
+    
+    @return (
+        0.2104542553 * $l + 0.7936177850 * $m - 0.0040720468 * $s,
+        1.9779984951 * $l - 2.4285922050 * $m + 0.4505937099 * $s,
+        0.0259040371 * $l + 0.7827717662 * $m - 0.8086757660 * $s,
+    );
+}
+
+@function Oklab_to_lin_sRGB($color) {
+    $l_: list.nth($color, 1);
+    $a_: list.nth($color, 2);
+    $b_: list.nth($color, 3);
+
+    $l: $l_ + 0.3963377774 * $a_ + 0.2158037573 * $b-;
+    $m: $l_ - 0.1055613458 * $a_ - 0.0638541728 * $b-;
+    $s: $l_ - 0.0894841775 * $a_ - 1.2914855480 * $b-;
+
+    $l: $l * $l * $l;
+    $m: $m * $m * $m;
+    $s: $s * $s * $s;
+    
+    @return (
+		 4.0767416621 * $l - 3.3077115913 * $m + 0.2309699292 * 4s,
+		-1.2684380046 * $l + 2.6097574011 * $m - 0.3413193965 * 4s,
+		-0.0041960863 * $l - 0.7034186147 * $m + 1.7076147010 * 4s,
+    );
+}
+
+@function apca_sRGB_to_Y($color) {
+    @return map.get($SA98G, sRco) * math.pow(math.div(color.red($color), 255), map.get($SA98G, mainTRC)) +
+        map.get($SA98G, sGco) * math.pow(math.div(color.green($color), 255), map.get($SA98G, mainTRC)) +
+        map.get($SA98G, sBco) * math.pow(math.div(color.blue($color), 255), map.get($SA98G, mainTRC));
+}
+
+@function apca_Y_to_sRGB($y) {
+    $c: math.round(math.pow($y, math.div(1, map.get($SA98G, mainTRC))) * 255);
+    @return rgb($c, $c, $c);
+}
+
+@function apcaContrast($txtY, $bgY) {
+    @if $txtY <= map.get($SA98G, blkThrs) {
+        $txtY: $txtY + math.pow(map.get($SA98G, blkThrs) - $txtY, map.get($SA98G, blkClmp));
+    }
+    @if $bgY <= map.get($SA98G, blkThrs) {
+        $bgY: $bgY + math.pow(map.get($SA98G, blkThrs) - $bgY, map.get($SA98G, blkClmp));
+    }
+
+    @if math.abs($bgY - $txtY) < map.get($SA98G, deltaYmin) {
+        @return 0;
+    }
+
+    $outputContrast: 0;
+
+    @if $bgY > $txtY {
+        $SAPC: map.get($SA98G, scaleBoW) * (math.pow($bgY, map.get($SA98G, normBG)) - math.pow($txtY, map.get($SA98G, normTXT)));
+        
+        @if $SAPC >= map.get($SA98G, loClip) {
+            $outputContrast: $SAPC - map.get($SA98G, loBoWoffset);
+        }
+    } @else {
+        $SAPC: map.get($SA98G, scaleWoB) * (math.pow($bgY, map.get($SA98G, revBG)) - math.pow($txtY, map.get($SA98G, revTXT)));
+        
+        @if $SAPC <= -1 * map.get($SA98G, loClip) {
+            $outputContrast: $SAPC + map.get($SA98G, loWoBoffset);
+        }
+    }
+
+    @return outputContrast * 100.0;
+}
+
+@function apcaReverse($contrast, $knownY, $knownType: 'bg') {
+    $unknownY:   $knownY;
+
+    $knownExp:   0;
+    $unknownExp: 0;
+
+    $scale:  map.get($SA98G, if($contrast > 0, scaleBoW, scaleWoB));
+    $offset: map.get($SA98G, if($contrast > 0, loBoWoffset, loWoBoffset));
+
+    $contrast: math.div($contrast * 0.01 + $offset, $scale);
+
+    @if $knownY <= map.get($SA98G, blkThrs) {
+        $knownY: $knownY + math.pow(map.get($SA98G, blkThrs) - $knownY, map.get($SA98G, blkClmp));
+    }
+
+    @if $knownType == 'bg' {
+        $knownExp:   map.get($SA98G, if($contrast > 0, normBG, revBG));
+        $unknownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT));
+        $unknownY:   math.pow(math.pow($knownY, $knownExp) - $contrast, math.div(1, $unknownExp));
+    } @else {
+        $knownExp:   map.get($SA98G, if($contrast > 0, normTXT, revTXT));
+        $unknownExp: map.get($SA98G, if($contrast > 0, normBG, revBG));
+        $unknownY:   math.pow($contrast + math.pow($knownY, $knownExp), math.div(1, $unknownExp));
+    }
+
+    @if '#{$unknownY}' == '#{math.sqrt(-1)}' {
+        @return false;
+    }
+
+    @if $unknownY > 1.06 or $unknownY < 0 {
+        @return false;
+    }
+
+    @if $unknownY <= map.get($SA98G, blkThrs) {
+        $unknownY: math.pow(
+            ($unknownY + map.get($SA98G, mOffsetIn)) * map.get($SA98G, mFactor),
+            math.div(map.get($SA98G, mExpAdj), map.get($SA98G, blkClmp))
+        ) * math.div(1, map.get($SA98G, mFactor)) - map.get($SA98G, mOffsetOut);
+    }
+
+    $unknownY: math.max(math.min($unknownY, 1), 0);
+
+    @return $unknownY;
+}
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),
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index a9de8b5..4f36972 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -33,8 +33,8 @@
             ),
 
             --key-focus: (
-                --bg:            fn.global-color(--yellow-static --400),
-                --text:          fn.global-color(--yellow-static --400-text),
+                --bg:            fn.global-color(--focus-static --400),
+                --text:          fn.global-color(--focus-static --400-text),
             )
         )
     ));
@@ -42,7 +42,9 @@
     @include iro.bem-scope(iro.props-namespace()) {
         :link,
         :visited {
-            border-radius:             fn.dim(--rounding);
+            margin:                    calc(-1 * fn.global-dim(--border --thick));
+            padding:                   fn.global-dim(--border --thick);
+            border-radius:             calc(fn.dim(--rounding) + fn.global-dim(--border --thick));
             color:                     currentColor;
             text-decoration:           underline;
             text-decoration-color:     fn.color(--underline);
@@ -56,7 +58,6 @@
 
             &:focus-visible {
                 background-color:          fn.color(--key-focus --bg);
-                box-shadow:                0 0 0 fn.global-dim(--border --thick) fn.color(--key-focus --bg);
                 color:                     fn.color(--key-focus --text);
                 text-decoration:           underline;
                 text-decoration-thickness: fn.dim(--hover --underline);
diff --git a/tpl/objects/checkbox.pug b/tpl/objects/checkbox.pug
index 874505b..cb975d5 100644
--- a/tpl/objects/checkbox.pug
+++ b/tpl/objects/checkbox.pug
@@ -16,3 +16,4 @@ mixin checkbox
             +icon('check')(class='o-checkbox__check-icon')
         .o-checkbox__label
             block
+        .o-checkbox__bg
diff --git a/tpl/objects/radio.pug b/tpl/objects/radio.pug
index 8cb1b1f..ba941be 100644
--- a/tpl/objects/radio.pug
+++ b/tpl/objects/radio.pug
@@ -10,3 +10,4 @@ mixin radio
         .o-radio__circle
         .o-radio__label
             block
+        .o-radio__bg
diff --git a/tpl/views/button.pug b/tpl/views/button.pug
index 4b2281e..7e8f572 100644
--- a/tpl/views/button.pug
+++ b/tpl/views/button.pug
@@ -46,7 +46,7 @@ mixin view-button
                 +a-button(outline=true icon='trash')
                 +a-button(outline=true disabled=true icon='trash')
 
-        each theme in ['primary', 'accent', 'positive', 'negative', 'warning']
+        each theme in ['primary', 'accent', 'negative']
             .c-box
                 .l-button-group
                     +a-button(variant=theme)= 'Button'
diff --git a/tpl/views/links.pug b/tpl/views/links.pug
index 91d6dde..efc8817 100644
--- a/tpl/views/links.pug
+++ b/tpl/views/links.pug
@@ -5,7 +5,7 @@ mixin view-links
                 = 'Lorem ipsum dolor '
                 a(href='https://mk.vulpes.one/')= 'https://mk.vulpes.one/'
                 = ' sit amet, consetetur '
-                a(href='https://v.reddit.com/')= 'https://v.reddit.com/'
+                a(href='https://is-a.wyvern.rip/')= 'https://is-a.wyvern.rip/'
                 = ' sadipscing elitr, sed diam nonumy eirmod tempor'
 
         .c-box
@@ -13,7 +13,7 @@ mixin view-links
                 = 'Lorem ipsum dolor '
                 a(href='https://mk.vulpes.one/')= 'https://mk.vulpes.one/'
                 = ' sit amet, consetetur '
-                a(href='https://v.reddit.com/')= 'https://v.reddit.com/'
+                a(href='https://is-a.wyvern.rip/')= 'https://is-a.wyvern.rip/'
                 = ' sadipscing elitr, sed diam nonumy eirmod tempor'
 
         .c-box
@@ -21,5 +21,5 @@ mixin view-links
                 = 'Lorem ipsum dolor '
                 a(href='https://mk.vulpes.one/')= 'https://mk.vulpes.one/'
                 = ' sit amet, consetetur '
-                a(href='https://v.reddit.com/')= 'https://v.reddit.com/'
+                a(href='https://is-a.wyvern.rip/')= 'https://is-a.wyvern.rip/'
                 = ' sadipscing elitr, sed diam nonumy eirmod tempor'
-- 
cgit v1.2.3-54-g00ecf