From a6745cc1c39dca0a26a72ffde885dda33acfed5f Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Tue, 25 Jun 2024 21:45:22 +0200
Subject: Added back action button

---
 src/.old/objects/_action-button.scss | 222 ----------------------------------
 src/_objects.scss                    |   2 +-
 src/objects/_action-button.scss      | 227 +++++++++++++++++++++++++++++++++++
 src/objects/_button.scss             |  25 ++--
 src/objects/_checkbox.scss           |   2 +-
 src/objects/_radio.scss              |   2 +-
 6 files changed, 242 insertions(+), 238 deletions(-)
 delete mode 100644 src/.old/objects/_action-button.scss
 create mode 100644 src/objects/_action-button.scss

(limited to 'src')

diff --git a/src/.old/objects/_action-button.scss b/src/.old/objects/_action-button.scss
deleted file mode 100644
index 48ac2a6..0000000
--- a/src/.old/objects/_action-button.scss
+++ /dev/null
@@ -1,222 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('action-button') {
-    @include iro.props-store((
-        --dims: (
-            --line-height: 1.4,
-            --pad-x:       fn.global-dim(--size --100),
-            --pad-y:       fn.global-dim(--size --85),
-            --rounding:    3px,
-        ),
-    ), 'dims');
-
-    @include iro.props-store((
-        --colors: (
-            --bg:     fn.global-color(--bg-hi),
-            --label:  fn.global-color(--fg),
-            --border: fn.global-color(--obj-lo),
-    
-            --hover: (
-                --bg:     fn.global-color(--bg-hi2),
-                --label:  fn.global-color(--fg-lo),
-                --border: fn.global-color(--fg-hi2),
-            ),
-            --active: (
-                --bg:     fn.global-color(--obj-hi),
-                --label:  fn.global-color(--fg-lo),
-                --border: fn.global-color(--fg-hi2),
-            ),
-            --selected: (
-                --bg:     fn.global-color(--obj-hi),
-                --label:  fn.global-color(--fg),
-                --border: fn.global-color(--fg-hi3),
-
-                --hover: (
-                    --label:  fn.global-color(--fg-lo),
-                    --border: fn.global-color(--fg-hi2),
-                ),
-            ),
-            --disabled: (
-                --bg:     fn.global-color(--obj-hi),
-                --label:  fn.global-color(--fg-hi3),
-                --border: fn.global-color(--obj-hi),
-            ),
-            --key-focus: (
-                --border: fn.global-color(--focus --fill),
-                --shadow: fn.global-color(--focus --shadow),
-            ),
-            --quiet: (
-                --label: fn.global-color(--fg),
-    
-                --hover: (
-                    --bg:    fn.global-color(--obj-hi),
-                    --label: fn.global-color(--fg-lo),
-                ),
-                --active: (
-                    --bg:    fn.global-color(--obj),
-                    --label: fn.global-color(--fg-lo),
-                ),
-                --selected: (
-                    --bg:    fn.global-color(--obj-hi),
-                    --label: fn.global-color(--fg),
-    
-                    --hover: (
-                        --bg:    fn.global-color(--obj),
-                        --label: fn.global-color(--fg-lo),
-                    ),
-                ),
-                --disabled: (
-                    --label: fn.global-color(--fg-hi3),
-                ),
-            ),
-        ),
-    ), 'colors');
-
-    @include iro.bem-object(iro.props-namespace()) {
-        display:          inline-block;
-        padding:          fn.dim(--pad-y) fn.dim(--pad-x);
-        overflow:         hidden;
-        border:           1px solid fn.color(--disabled --border);
-        border-radius:    fn.dim(--rounding);
-        background-color: fn.color(--disabled --bg);
-        color:            fn.color(--disabled --label);
-        line-height:      fn.dim(--line-height);
-        text-align:       center;
-        text-decoration:  none;
-        text-overflow:    ellipsis;
-        vertical-align:   top;
-        white-space:      nowrap;
-
-        &:link,
-        &:visited,
-        &:enabled {
-            border-color:     fn.color(--border);
-            background-color: fn.color(--bg);
-            color:            fn.color(--label);
-
-            &:hover {
-                border-color:     fn.color(--hover --border);
-                background-color: fn.color(--hover --bg);
-                color:            fn.color(--hover --label);
-            }
-    
-            &:active {
-                border-color:     fn.color(--active --border);
-                background-color: fn.color(--active --bg);
-                color:            fn.color(--active --label);
-            }
-    
-            @include iro.bem-at-theme('keyboard') {
-                &:focus {
-                    background-color: fn.color(--hover --bg);
-                    color:            fn.color(--hover --label);
-                }
-            }
-        }
-    
-        @include iro.bem-is('selected') {
-            &:link,
-            &:visited,
-            &:enabled {
-                border-color:     fn.color(--selected --border);
-                background-color: fn.color(--selected --bg);
-                color:            fn.color(--selected --label);
-        
-                &:hover,
-                &:active {
-                    border-color:     fn.color(--selected --hover --border);
-                    background-color: fn.color(--selected --bg);
-                    color:            fn.color(--selected --hover --label);
-                }
-    
-                @include iro.bem-at-theme('keyboard') {
-                    &:focus {
-                        background-color: fn.color(--selected --bg);
-                        color:            fn.color(--selected --hover --label);
-                    }
-                }
-            }
-        }
-    
-        @include iro.bem-modifier('quiet') {
-            border-color:     transparent;
-            background-color: transparent;
-            box-shadow:       none;
-            color:            fn.color(--quiet --disabled --label);
-    
-            &:link,
-            &:visited,
-            &:enabled {
-                border-color:     transparent;
-                background-color: transparent;
-                box-shadow:       none;
-                color:            fn.color(--quiet --label);
-
-                &:hover {
-                    border-color:     transparent;
-                    background-color: fn.color(--quiet --hover --bg);
-                    box-shadow:       none;
-                    color:            fn.color(--quiet --hover --label);
-                }
-    
-                &:active {
-                    border-color:     transparent;
-                    background-color: fn.color(--quiet --active --bg);
-                    box-shadow:       none;
-                    color:            fn.color(--quiet --active --label);
-                }
-    
-                @include iro.bem-at-theme('keyboard') {
-                    &:focus {
-                        background-color: fn.color(--quiet --hover --bg);
-                        color:            fn.color(--quiet --hover --label);
-                    }
-                }
-            }
-    
-            @include iro.bem-is('selected') {
-                background-color: fn.color(--quiet --selected --bg);
-                color:            fn.color(--quiet --disabled --label);
-
-                &:link,
-                &:visited,
-                &:enabled {
-                    border-color:     transparent;
-                    background-color: fn.color(--quiet --selected --bg);
-                    box-shadow:       none;
-                    color:            fn.color(--quiet --selected --label);
-
-                    &:hover,
-                    &:active {
-                        border-color:     transparent;
-                        background-color: fn.color(--quiet --selected --hover --bg);
-                        box-shadow:       none;
-                        color:            fn.color(--quiet --selected --hover --label);
-                    }
-    
-                    @include iro.bem-at-theme('keyboard') {
-                        &:focus {
-                            background-color: fn.color(--quiet --selected --bg);
-                            color:            fn.color(--quiet --selected --hover --label);
-                        }
-                    }
-                }
-            }
-        }
-    
-        @include iro.bem-at-theme('keyboard') {
-            &:focus {
-                border-color: fn.color(--key-focus --border);
-                box-shadow:   inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
-            }
-        }
-    
-        @include iro.bem-modifier('round') {
-            width:         calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-y));
-            padding-right: 0;
-            padding-left:  0;
-            border-radius: 100em;
-        }
-    }
-}
diff --git a/src/_objects.scss b/src/_objects.scss
index 525e31a..b1872c9 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -9,7 +9,7 @@
 @use 'objects/radio';
 @use 'objects/checkbox';
 @use 'objects/switch';
-// @use 'objects/action-button';
+@use 'objects/action-button';
 // @use 'objects/overflow-button';
 // @use 'objects/status-indicator';
 // @use 'objects/avatar';
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
new file mode 100644
index 0000000..6f0288d
--- /dev/null
+++ b/src/objects/_action-button.scss
@@ -0,0 +1,227 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('action-button') {
+    @include iro.props-store((
+        --dims: (
+            --line-height: 1.4,
+            --pad-i:       fn.global-dim(--size --100),
+            --pad-b:       fn.global-dim(--size --85),
+            --border:      fn.global-dim(--border --thin),
+            --rounding:    fn.global-dim(--rounding),
+            
+            --key-focus: (
+                --border:        fn.global-dim(--key-focus --border),
+                --border-offset: fn.global-dim(--key-focus --border-offset),
+                --outline:       fn.global-dim(--key-focus --outline),
+            ),
+        ),
+        --colors: (
+            --bg:     fn.global-color(--base --75),
+            --label:  fn.global-color(--text),
+            --border: fn.global-color(--border-strong),
+    
+            --hover: (
+                --bg:     fn.global-color(--base --50),
+                --label:  fn.global-color(--heading),
+                --border: fn.global-color(--text-mute-more),
+            ),
+            --active: (
+                --bg:     fn.global-color(--border-mute),
+                --label:  fn.global-color(--heading),
+                --border: fn.global-color(--text-mute-more),
+            ),
+            --selected: (
+                --bg:     fn.global-color(--border-mute),
+                --label:  fn.global-color(--text),
+                --border: fn.global-color(--text-disabled),
+
+                --hover: (
+                    --label:  fn.global-color(--heading),
+                    --border: fn.global-color(--text-mute-more),
+                ),
+            ),
+            --disabled: (
+                --bg:     fn.global-color(--bg-base),
+                --label:  fn.global-color(--text-disabled),
+                --border: fn.global-color(--border-mute),
+            ),
+            --key-focus: (
+                --border:  fn.global-color(--focus --border),
+                --outline: fn.global-color(--focus --outline),
+            ),
+            --quiet: (
+                --label: fn.global-color(--text),
+    
+                --hover: (
+                    --bg:    fn.global-color(--border-mute),
+                    --label: fn.global-color(--heading),
+                ),
+                --active: (
+                    --bg:    fn.global-color(--border),
+                    --label: fn.global-color(--heading),
+                ),
+                --selected: (
+                    --bg:    fn.global-color(--border-mute),
+                    --label: fn.global-color(--text),
+    
+                    --hover: (
+                        --bg:    fn.global-color(--border),
+                        --label: fn.global-color(--heading),
+                    ),
+                ),
+                --disabled: (
+                    --label: fn.global-color(--text-disabled),
+                ),
+            ),
+        ),
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:          inline-block;
+        position:         relative;
+        padding-block:    fn.dim(--pad-b);
+        padding-inline:   fn.dim(--pad-i);
+        border:           fn.dim(--border) solid fn.color(--disabled --border);
+        border-radius:    fn.dim(--rounding);
+        background-color: fn.color(--disabled --bg);
+        color:            fn.color(--disabled --label);
+        line-height:      fn.dim(--line-height);
+        text-align:       center;
+        text-decoration:  none;
+        text-overflow:    ellipsis;
+        vertical-align:   top;
+        white-space:      nowrap;
+
+        &::after {
+            content:        '';
+            display:        none;
+            position:       absolute;
+            z-index:        1;
+            inset:          calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset));
+            border-radius:  calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
+            outline:        fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
+            box-shadow:     0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+            pointer-events: none;
+        }
+
+        &:link,
+        &:visited,
+        &:enabled {
+            border-color:     fn.color(--border);
+            background-color: fn.color(--bg);
+            color:            fn.color(--label);
+
+            &:hover,
+            &:focus-visible {
+                border-color:     fn.color(--hover --border);
+                background-color: fn.color(--hover --bg);
+                color:            fn.color(--hover --label);
+            }
+    
+            &:active {
+                border-color:     fn.color(--active --border);
+                background-color: fn.color(--active --bg);
+                color:            fn.color(--active --label);
+            }
+    
+            &:focus-visible {
+                &::after {
+                    display: block;
+                }
+            }
+        }
+    
+        @include iro.bem-is('selected') {
+            &:link,
+            &:visited,
+            &:enabled {
+                border-color:     fn.color(--selected --border);
+                background-color: fn.color(--selected --bg);
+                color:            fn.color(--selected --label);
+        
+                &:hover,
+                &:active,
+                &:focus-visible {
+                    border-color:     fn.color(--selected --hover --border);
+                    background-color: fn.color(--selected --bg);
+                    color:            fn.color(--selected --hover --label);
+                }
+    
+                @include iro.bem-at-theme('keyboard') {
+                    &:focus {
+                        background-color: fn.color(--selected --bg);
+                        color:            fn.color(--selected --hover --label);
+                    }
+                }
+            }
+        }
+    
+        @include iro.bem-modifier('quiet') {
+            border-color:     transparent;
+            background-color: transparent;
+            box-shadow:       none;
+            color:            fn.color(--quiet --disabled --label);
+    
+            &:link,
+            &:visited,
+            &:enabled {
+                border-color:     transparent;
+                background-color: transparent;
+                box-shadow:       none;
+                color:            fn.color(--quiet --label);
+
+                &:hover,
+                &:focus-visible {
+                    border-color:     transparent;
+                    background-color: fn.color(--quiet --hover --bg);
+                    box-shadow:       none;
+                    color:            fn.color(--quiet --hover --label);
+                }
+    
+                &:active {
+                    border-color:     transparent;
+                    background-color: fn.color(--quiet --active --bg);
+                    box-shadow:       none;
+                    color:            fn.color(--quiet --active --label);
+                }
+    
+                @include iro.bem-at-theme('keyboard') {
+                    &:focus {
+                        background-color: fn.color(--quiet --hover --bg);
+                        color:            fn.color(--quiet --hover --label);
+                    }
+                }
+            }
+    
+            @include iro.bem-is('selected') {
+                background-color: fn.color(--quiet --selected --bg);
+                color:            fn.color(--quiet --disabled --label);
+
+                &:link,
+                &:visited,
+                &:enabled {
+                    border-color:     transparent;
+                    background-color: fn.color(--quiet --selected --bg);
+                    box-shadow:       none;
+                    color:            fn.color(--quiet --selected --label);
+
+                    &:hover,
+                    &:active,
+                    &:focus-visible {
+                        border-color:     transparent;
+                        background-color: fn.color(--quiet --selected --hover --bg);
+                        box-shadow:       none;
+                        color:            fn.color(--quiet --selected --hover --label);
+                    }
+                }
+            }
+        }
+
+        @include iro.bem-modifier('round') {
+            inline-size:    calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b));
+            padding-inline: 0;
+            border-radius:  100em;
+        }
+    }
+}
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 49f3f67..1c907c0 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -231,13 +231,22 @@ $static-themes: 'black' 'white' !default;
             display:        none;
             position:       absolute;
             z-index:        1;
-            inset-block:    calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset));
-            inset-inline:   calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset));
-            border-radius:  fn.dim(--rounding);
+            inset:          calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset));
+            border-radius:  calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
             outline:        fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
             box-shadow:     0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
             pointer-events: none;
         }
+
+        &:link,
+        &:visited,
+        &:enabled {
+            &:focus-visible {
+                &::after {
+                    display: block;
+                }
+            }
+        }
     
         @include iro.bem-modifier('block') {
             display: block;
@@ -268,16 +277,6 @@ $static-themes: 'black' 'white' !default;
                 @include theme($theme);
             }
         }
-
-        &:link,
-        &:visited,
-        &:enabled {
-            &:focus-visible {
-                &::after {
-                    display: block;
-                }
-            }
-        }
     
         @each $theme in $static-themes {
             @include iro.bem-modifier(static-#{$theme}) {
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 509822b..8527948 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -15,7 +15,7 @@
             --key-focus: (
                 --border:        fn.global-dim(--key-focus --border),
                 --border-offset: fn.global-dim(--key-focus --border-offset),
-                --outline:       fn.global-dim(--key-focus --border),
+                --outline:       fn.global-dim(--key-focus --outline),
             ),
         ),
         --colors: (
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index 7ade7e1..9fa937d 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -15,7 +15,7 @@
             --key-focus: (
                 --border:        fn.global-dim(--key-focus --border),
                 --border-offset: fn.global-dim(--key-focus --border-offset),
-                --outline:       fn.global-dim(--key-focus --border),
+                --outline:       fn.global-dim(--key-focus --outline),
             ),
         ),
         --colors: (
-- 
cgit v1.2.3-54-g00ecf