Adjusted action button variants

1 files changed, 54 insertions, 0 deletions

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),