Button: Rename static variant to badge

2 files changed, 18 insertions, 22 deletions

diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 0467f24..8fbec78 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -36,7 +36,7 @@
             props.get(vars.$shadow-blur)
             props.get(vars.$shadow-grow)
             props.get($theme, list.join($key, --shadow-color)...);
-
+            
         &:hover,
         &:focus-visible {
             color:            props.get($theme, list.join($key, --hover --label-color)...);
@@ -52,31 +52,31 @@
         }
     }
 
-    @include bem.modifier('static') {
-        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)...);
+    @include bem.modifier('badge') {
+        color:            props.get($theme, list.join($key, --badge --label-color)...);
+        background-color: props.get($theme, list.join($key, --badge --bg-color)...);
+        border-color:     props.get($theme, list.join($key, --badge --border-color)...);
         box-shadow:       none;
 
         &:link,
         &:visited,
         &:enabled {
-            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)...);
+            color:            props.get($theme, list.join($key, --badge --label-color)...);
+            background-color: props.get($theme, list.join($key, --badge --bg-color)...);
+            border-color:     props.get($theme, list.join($key, --badge --border-color)...);
             box-shadow:       none;
 
             &:hover,
             &:focus-visible {
-                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)...);
+                color:            props.get($theme, list.join($key, --badge --hover --label-color)...);
+                background-color: props.get($theme, list.join($key, --badge --hover --bg-color)...);
+                border-color:     props.get($theme, list.join($key, --badge --hover --border-color)...);
             }
 
             &:active {
-                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)...);
+                color:            props.get($theme, list.join($key, --badge --active --label-color)...);
+                background-color: props.get($theme, list.join($key, --badge --active --bg-color)...);
+                border-color:     props.get($theme, list.join($key, --badge --active --border-color)...);
             }
         }
     }
@@ -114,7 +114,7 @@
         background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
         border-color:     props.get($theme, list.join($key, --selected --disabled --border-color)...);
 
-        @include bem.modifier('static') {
+        @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'badge') {
             color:            props.get($theme, list.join($key, --selected --label-color)...);
             background-color: props.get($theme, list.join($key, --selected --bg-color)...);
             border-color:     props.get($theme, list.join($key, --selected --border-color)...);
@@ -123,10 +123,6 @@
         &:link,
         &:visited,
         &:enabled {
-            color:            props.get($theme, list.join($key, --selected --label-color)...);
-            background-color: props.get($theme, list.join($key, --selected --bg-color)...);
-            border-color:     props.get($theme, list.join($key, --selected --border-color)...);
-    
             &:hover,
             &:focus-visible {
                 color:            props.get($theme, list.join($key, --selected --hover --label-color)...);
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index 1ab7e5a..94d55b1 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -102,7 +102,7 @@ $default-theme: map.deep-merge((
         ),
     ),
 
-    --static: (
+    --badge: (
         --bg-color:     props.get(core.$theme, --border-mute),
         --label-color:  props.get(core.$theme, --heading),
         --border-color: props.get(core.$theme, --border-mute),
@@ -218,7 +218,7 @@ $default-theme-dark: props.def(--o-button, $default-theme-dark, 'dark');
                 ),
             ),
 
-            --static: (
+            --badge: (
                 --bg-color:     props.get(core.$transparent-colors, $theme, --200),
                 --label-color:  props.get(core.$transparent-colors, $theme, --900),
                 --border-color: transparent,
@@ -319,7 +319,7 @@ $themes-config: (
                 ),
             ),
 
-            --static: (
+            --badge: (
                 --bg-color:     props.get(core.$theme, $key, --100),
                 --label-color:  props.get(core.$theme, $key, --1100),
                 --border-color: props.get(core.$theme, $key, --300),