From 231b45ea9fe01ee0d8a7fcda0d7f9a2f4e435466 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Tue, 25 Jun 2024 22:29:57 +0200
Subject: Action button styling

---
 src/objects/_action-button.scss | 116 ++++++++++++++++------------------------
 1 file changed, 45 insertions(+), 71 deletions(-)

(limited to 'src/objects/_action-button.scss')

diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 6f0288d..6286f4e 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -22,7 +22,7 @@
             --border: fn.global-color(--border-strong),
     
             --hover: (
-                --bg:     fn.global-color(--base --50),
+                --bg:     fn.global-color(--border-mute),
                 --label:  fn.global-color(--heading),
                 --border: fn.global-color(--text-mute-more),
             ),
@@ -31,20 +31,31 @@
                 --label:  fn.global-color(--heading),
                 --border: fn.global-color(--text-mute-more),
             ),
+            --disabled: (
+                --bg:     fn.global-color(--bg-l1),
+                --label:  fn.global-color(--border-strong),
+                --border: fn.global-color(--border-mute),
+            ),
             --selected: (
-                --bg:     fn.global-color(--border-mute),
-                --label:  fn.global-color(--text),
-                --border: fn.global-color(--text-disabled),
+                --bg:     fn.global-color(--text-mute),
+                --label:  fn.global-color(--base --50),
+                --border: fn.global-color(--text-mute),
 
                 --hover: (
-                    --label:  fn.global-color(--heading),
-                    --border: fn.global-color(--text-mute-more),
+                    --bg:     fn.global-color(--text),
+                    --label:  fn.global-color(--base --50),
+                    --border: fn.global-color(--text),
+                ),
+                --active: (
+                    --bg:     fn.global-color(--heading),
+                    --label:  fn.global-color(--base --50),
+                    --border: fn.global-color(--heading),
+                ),
+                --disabled: (
+                    --bg:     fn.global-color(--border-mute),
+                    --label:  fn.global-color(--border-strong),
+                    --border: fn.global-color(--border-mute),
                 ),
-            ),
-            --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),
@@ -61,15 +72,6 @@
                     --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),
                 ),
@@ -132,31 +134,6 @@
             }
         }
     
-        @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;
@@ -185,35 +162,32 @@
                     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);
+        @include iro.bem-is('selected') {
+            border-color:     fn.color(--selected --disabled --border);
+            background-color: fn.color(--selected --disabled --bg);
+            color:            fn.color(--selected --disabled --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);
-                    }
+            &:link,
+            &:visited,
+            &:enabled {
+                border-color:     fn.color(--selected --border);
+                background-color: fn.color(--selected --bg);
+                color:            fn.color(--selected --label);
+        
+                &:hover,
+                &:focus-visible {
+                    border-color:     fn.color(--selected --hover --border);
+                    background-color: fn.color(--selected --hover --bg);
+                    color:            fn.color(--selected --hover --label);
+                }
+        
+                &:active {
+                    border-color:     fn.color(--selected --active --border);
+                    background-color: fn.color(--selected --active --bg);
+                    color:            fn.color(--selected --active --label);
                 }
             }
         }
-- 
cgit v1.2.3-54-g00ecf