Adjusted action button variants

2 files changed, 66 insertions, 12 deletions

diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index f4a9a46..c997679 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -53,30 +53,30 @@
     }
 
     @include bem.modifier('static') {
-        color:            props.get($theme, list.join($key, --quiet --hover --label-color)...);
-        background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
-        border-color:     transparent;
+        color:            props.get($theme, list.join($key, --static --label-color)...);
+        background-color: props.get($theme, list.join($key, --static --bg-color)...);
+        border-color:     props.get($theme, list.join($key, --static --border-color)...);
         box-shadow:       none;
 
         &:link,
         &:visited,
         &:enabled {
-            color:            props.get($theme, list.join($key, --quiet --hover --label-color)...);
-            background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
-            border-color:     transparent;
+            color:            props.get($theme, list.join($key, --static --label-color)...);
+            background-color: props.get($theme, list.join($key, --static --bg-color)...);
+            border-color:     props.get($theme, list.join($key, --static --border-color)...);
             box-shadow:       none;
 
             &:hover,
             &:focus-visible {
-                color:            props.get($theme, list.join($key, --quiet --active --label-color)...);
-                background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
-                border-color:     transparent;
+                color:            props.get($theme, list.join($key, --static --hover --label-color)...);
+                background-color: props.get($theme, list.join($key, --static --hover --bg-color)...);
+                border-color:     props.get($theme, list.join($key, --static --hover --border-color)...);
             }
 
             &:active {
-                color:            props.get($theme, list.join($key, --quiet --active --label-color)...);
-                background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
-                border-color:     transparent;
+                color:            props.get($theme, list.join($key, --static --active --label-color)...);
+                background-color: props.get($theme, list.join($key, --static --active --bg-color)...);
+                border-color:     props.get($theme, list.join($key, --static --active --border-color)...);
             }
         }
     }
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
index 10d345b..3f09f35 100644
--- a/src/objects/_action-button.vars.scss
+++ b/src/objects/_action-button.vars.scss
@@ -102,6 +102,24 @@ $default-theme: map.deep-merge((
         ),
     ),
 
+    --static: (
+        --bg-color:     props.get(core.$theme, --border-mute),
+        --label-color:  props.get(core.$theme, --heading),
+        --border-color: props.get(core.$theme, --border),
+
+        --hover: (
+            --bg-color:     props.get(core.$theme, --border),
+            --label-color:  props.get(core.$theme, --heading),
+            --border-color: props.get(core.$theme, --border-strong),
+        ),
+
+        --active: (
+            --bg-color:     props.get(core.$theme, --border-strong),
+            --label-color:  props.get(core.$theme, --heading),
+            --border-color: props.get(core.$theme, --text-mute-more),
+        ),
+    ),
+
     --quiet: (
         --label-color:  props.get(core.$theme, --text),
 
@@ -200,6 +218,24 @@ $default-theme-dark: props.def(--o-action-button, $default-theme-dark, 'dark');
                 ),
             ),
 
+            --static: (
+                --bg-color:     props.get(core.$transparent-colors, $theme, --200),
+                --label-color:  props.get(core.$transparent-colors, $theme, --900),
+                --border-color: props.get(core.$transparent-colors, $theme, --300),
+        
+                --hover: (
+                    --bg-color:     props.get(core.$transparent-colors, $theme, --300),
+                    --label-color:  props.get(core.$transparent-colors, $theme, --900),
+                    --border-color: props.get(core.$transparent-colors, $theme, --400),
+                ),
+        
+                --active: (
+                    --bg-color:     props.get(core.$transparent-colors, $theme, --400),
+                    --label-color:  props.get(core.$transparent-colors, $theme, --900),
+                    --border-color: props.get(core.$transparent-colors, $theme, --500),
+                ),
+            ),
+
             --quiet: (
                 --label-color:  props.get(core.$transparent-colors, $theme, --900),
         
@@ -283,6 +319,24 @@ $themes-config: (
                 ),
             ),
 
+            --static: (
+                --bg-color:     props.get(core.$theme, $key, --100),
+                --label-color:  props.get(core.$theme, $key, --1000),
+                --border-color: props.get(core.$theme, $key, --300),
+        
+                --hover: (
+                    --bg-color:     props.get(core.$theme, $key, --200),
+                    --label-color:  props.get(core.$theme, $key, --1100),
+                    --border-color: props.get(core.$theme, $key, --400),
+                ),
+        
+                --active: (
+                    --bg-color:     props.get(core.$theme, $key, --300),
+                    --label-color:  props.get(core.$theme, $key, --1200),
+                    --border-color: props.get(core.$theme, $key, --500),
+                ),
+            ),
+
             --quiet: (
                 --label-color:  props.get(core.$theme, $key, --1100),