Commit merge of button and badge into action-button (and rename it to button)

1 files changed, 162 insertions, 64 deletions

diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index aaf55b5..0467f24 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -5,72 +5,141 @@
 @use 'iro-sass/src/bem';
 @use 'iro-sass/src/props';
 @use '../props' as *;
-@use '../core.vars' as core;
 
 @forward 'button.vars';
 @use 'button.vars' as vars;
 
 @mixin -apply-theme($theme, $key: ()) {
-    &:link,
-    &:visited,
-    &:enabled {
-        color:            props.get($theme, list.join($key, --label)...);
-        background-color: props.get($theme, list.join($key, --bg)...);
-        border-color:     transparent;
-    }
-    
-    @include bem.modifier('outline') {
-        &:link,
-        &:visited,
-        &:enabled {
-            color:            props.get($theme, list.join($key, --outline-label)...);
-            background-color: transparent;
-            border-color:     props.get($theme, list.join($key, --outline-border)...);
-        }
+    color:            props.get($theme, list.join($key, --disabled --label-color)...);
+    background-color: props.get($theme, list.join($key, --disabled --bg-color)...);
+    border-color:     props.get($theme, list.join($key, --disabled --border-color)...);
+
+    &::after {
+        outline-color: props.get($theme, list.join($key, --key-focus --border-color)...);
+        box-shadow:
+            0
+            0
+            0
+            calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+            props.get($theme, list.join($key, --key-focus --outline-color)...);
     }
 
     &:link,
     &:visited,
     &:enabled {
+        color:            props.get($theme, list.join($key, --label-color)...);
+        background-color: props.get($theme, list.join($key, --bg-color)...);
+        border-color:     props.get($theme, list.join($key, --border-color)...);
+        box-shadow:
+            props.get(vars.$shadow-x)
+            props.get(vars.$shadow-y)
+            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)...);
-            background-color: props.get($theme, list.join($key, --hover --bg)...);
-            border-color:     transparent;
+            color:            props.get($theme, list.join($key, --hover --label-color)...);
+            background-color: props.get($theme, list.join($key, --hover --bg-color)...);
+            border-color:     props.get($theme, list.join($key, --hover --border-color)...);
         }
 
         &:active {
-            color:            props.get($theme, list.join($key, --active --label)...);
-            background-color: props.get($theme, list.join($key, --active --bg)...);
-            border-color:     transparent;
+            color:            props.get($theme, list.join($key, --active --label-color)...);
+            background-color: props.get($theme, list.join($key, --active --bg-color)...);
+            border-color:     props.get($theme, list.join($key, --active --border-color)...);
+            box-shadow:       none;
         }
     }
-}
 
-@mixin -apply-static-theme($theme, $key: ()) {
-    color:            props.get($theme, list.join($key, --disabled --label)...);
-    background-color: props.get($theme, list.join($key, --disabled --bg)...);
-    border-color:     transparent;
+    @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)...);
+        box-shadow:       none;
 
-    &::after {
-        outline-color: props.get($theme, list.join($key, --key-focus --border)...);
-        box-shadow:
-            0
-            0
-            0
-            calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-            props.get($theme, list.join($key, --key-focus --outline)...);
+        &: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)...);
+            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)...);
+            }
+
+            &: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)...);
+            }
+        }
     }
-    
-    @include bem.modifier('outline') {
+
+    @include bem.modifier('quiet') {
+        color:            props.get($theme, list.join($key, --quiet --disabled --label-color)...);
         background-color: transparent;
-        border-color:     props.get($theme, list.join($key, --disabled --outline-border)...);
+        border-color:     transparent;
+
+        &:link,
+        &:visited,
+        &:enabled {
+            color:            props.get($theme, list.join($key, --quiet --label-color)...);
+            background-color: transparent;
+            border-color:     transparent;
+            box-shadow:       none;
+
+            &:hover,
+            &:focus-visible {
+                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;
+            }
+
+            &: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;
+            }
+        }
     }
 
-    @include -apply-theme($theme, $key);
+    @include bem.is('selected') {
+        color:            props.get($theme, list.join($key, --selected --disabled --label-color)...);
+        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('primary') {
-        @include -apply-theme($theme, list.join($key, --primary));
+        @include bem.modifier('static') {
+            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)...);
+        }
+
+        &: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)...);
+                background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...);
+                border-color:     props.get($theme, list.join($key, --selected --hover --border-color)...);
+            }
+    
+            &:active {
+                color:            props.get($theme, list.join($key, --selected --active --label-color)...);
+                background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
+                border-color:     props.get($theme, list.join($key, --selected --active --border-color)...);
+            }
+        }
     }
 }
 
@@ -82,11 +151,11 @@
         display:          inline-block;
         padding-block:    props.get(vars.$pad-b);
         padding-inline:   props.get(vars.$pad-i);
-        font-size:        props.get(vars.$font-size);
-        font-weight:      500;
         line-height:      props.get(vars.$line-height);
         text-align:       center;
         text-decoration:  none;
+        text-overflow:    ellipsis;
+        white-space:      nowrap;
         border:           props.get(vars.$border-width) solid transparent;
         border-radius:    props.get(vars.$rounding);
 
@@ -114,16 +183,30 @@
         @include bem.elem('label') {
             margin-inline: props.get(vars.$pad-i-label);
         }
-    
-        @include bem.modifier('block') {
-            display: block;
+
+        @include -apply-theme(vars.$default-theme);
+
+        @each $theme in map.keys(props.get(vars.$themes)) {
+            @include bem.modifier(string.slice($theme, 3)) {
+                @include -apply-theme(vars.$themes, $theme);
+            }
         }
-    
-        @include bem.modifier('outline') {
-            background-color: transparent;
+
+        @include bem.modifier('pill') {
+            padding-inline: props.get(vars.$pad-i-pill);
+            border-radius:  100em;
+
+            &::after {
+                border-radius:  100em;
+            }
+        }
+
+        @include bem.modifier('icon') {
+            inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
+            padding-inline: 0;
         }
 
-        @each $mod, $pad-i, $pad-i-label, $pad-b, $font-size in vars.$sizes {
+        @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
             @include bem.modifier($mod) {
                 padding-block:  props.get($pad-b);
                 padding-inline: props.get($pad-i);
@@ -132,27 +215,42 @@
                 @include bem.elem('label') {
                     margin-inline: props.get($pad-i-label);
                 }
+
+                @include bem.modifier('pill') {
+                    padding-inline: props.get($pad-i-pill);
+                }
+
+                @include bem.modifier('icon') {
+                    inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
+                    padding-inline: 0;
+                }
             }
         }
 
-        @include -apply-static-theme(vars.$default-theme);
+        @include bem.modifier('align-block') {
+            margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width));
 
-        @each $theme in map.keys(props.get(vars.$themes)) {
-            @include bem.modifier(string.slice($theme, 3)) {
-                @include -apply-theme(vars.$themes, $theme);
+            @include bem.modifier('pill') {
+                margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width));
             }
-        }
 
-        @each $theme in map.keys(props.get(vars.$static-themes)) {
-            @include bem.modifier(string.slice($theme, 3)) {
-                @include -apply-static-theme(vars.$static-themes, $theme);
+            @include bem.modifier('icon') {
+                margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
             }
-        }
+
+            @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
+                @include bem.modifier($mod) {
+                    margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width));
     
-        @include bem.modifier('round') {
-            inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
-            padding-inline: 0;
-            border-radius:  100em;
+                    @include bem.modifier('pill') {
+                        margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width));
+                    }
+
+                    @include bem.modifier('icon') {
+                        margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
+                    }
+                }
+            }
         }
     }
 }