Pill version for action button

5 files changed, 125 insertions, 47 deletions

diff --git a/src/_config.scss b/src/_config.scss
index 56a74e1..f4f43fd 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -82,6 +82,9 @@ $semantic-colors-common: (
     --focus-raw:       --accent,
     --focus-static:    --accent-static,
 
+    --light:           --white-transparent,
+    --shadow:          --black-transparent,
+
     --border-mute:     --base --200,
     --border:          --base --300,
     --border-strong:   --base --400,
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 6286f4e..6dbdc2f 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -1,14 +1,37 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
 
+$sizes: 'sm' 'lg' 'xl' !default;
+
 @include iro.props-namespace('action-button') {
     @include iro.props-store((
         --dims: (
             --line-height: 1.4,
-            --pad-i:       fn.global-dim(--size --100),
+            --pad-i:       fn.global-dim(--size --150),
+            --pad-i-pill:  fn.global-dim(--size --200),
             --pad-b:       fn.global-dim(--size --85),
             --border:      fn.global-dim(--border --thin),
             --rounding:    fn.global-dim(--rounding),
+            --font-size:   fn.global-dim(--font-size --100),
+
+            --sm: (
+                --pad-i:      fn.global-dim(--size --100),
+                --pad-i-pill: fn.global-dim(--size --150),
+                --pad-b:      fn.global-dim(--size --40),
+                --font-size:  fn.global-dim(--font-size --75),
+            ),
+            --lg: (
+                --pad-i:      fn.global-dim(--size --175),
+                --pad-i-pill: fn.global-dim(--size --225),
+                --pad-b:      fn.global-dim(--size --115),
+                --font-size:  fn.global-dim(--font-size --150),
+            ),
+            --xl: (
+                --pad-i:      fn.global-dim(--size --225),
+                --pad-i-pill: fn.global-dim(--size --300),
+                --pad-b:      fn.global-dim(--size --150),
+                --font-size:  fn.global-dim(--font-size --200),
+            ),
             
             --key-focus: (
                 --border:        fn.global-dim(--key-focus --border),
@@ -27,14 +50,14 @@
                 --border: fn.global-color(--text-mute-more),
             ),
             --active: (
-                --bg:     fn.global-color(--border-mute),
+                --bg:     fn.global-color(--border),
                 --label:  fn.global-color(--heading),
-                --border: fn.global-color(--text-mute-more),
+                --border: fn.global-color(--text-mute),
             ),
             --disabled: (
                 --bg:     fn.global-color(--bg-l1),
                 --label:  fn.global-color(--border-strong),
-                --border: fn.global-color(--border-mute),
+                --border: fn.global-color(--border),
             ),
             --selected: (
                 --bg:     fn.global-color(--text-mute),
@@ -73,7 +96,7 @@
                     --label: fn.global-color(--heading),
                 ),
                 --disabled: (
-                    --label: fn.global-color(--text-disabled),
+                    --label: fn.global-color(--border-strong),
                 ),
             ),
         ),
@@ -92,7 +115,6 @@
         text-align:       center;
         text-decoration:  none;
         text-overflow:    ellipsis;
-        vertical-align:   top;
         white-space:      nowrap;
 
         &::after {
@@ -137,7 +159,6 @@
         @include iro.bem-modifier('quiet') {
             border-color:     transparent;
             background-color: transparent;
-            box-shadow:       none;
             color:            fn.color(--quiet --disabled --label);
     
             &:link,
@@ -145,21 +166,18 @@
             &:enabled {
                 border-color:     transparent;
                 background-color: transparent;
-                box-shadow:       none;
                 color:            fn.color(--quiet --label);
 
                 &:hover,
                 &:focus-visible {
                     border-color:     transparent;
                     background-color: fn.color(--quiet --hover --bg);
-                    box-shadow:       none;
                     color:            fn.color(--quiet --hover --label);
                 }
     
                 &:active {
                     border-color:     transparent;
                     background-color: fn.color(--quiet --active --bg);
-                    box-shadow:       none;
                     color:            fn.color(--quiet --active --label);
                 }
             }
@@ -192,10 +210,37 @@
             }
         }
 
-        @include iro.bem-modifier('round') {
+        @include iro.bem-modifier('pill') {
+            padding-inline: fn.dim(--pad-i-pill);
+            border-radius:  100em;
+
+            &::after {
+                border-radius:  100em;
+            }
+        }
+
+        @each $size in $sizes {
+            @include iro.bem-modifier($size) {
+                padding-block:  fn.dim(--#{$size} --pad-b);
+                padding-inline: fn.dim(--#{$size} --pad-i);
+                font-size:      fn.dim(--#{$size} --font-size);
+
+                @include iro.bem-modifier('pill') {
+                    padding-inline: fn.dim(--#{$size} --pad-i-pill);
+                }
+            }
+        }
+
+        @include iro.bem-modifier('icon') {
             inline-size:    calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b));
             padding-inline: 0;
-            border-radius:  100em;
+
+            @each $size in $sizes {
+                @include iro.bem-modifier($size) {
+                    inline-size:    calc(1em * fn.dim(--line-height) + 2 * fn.dim(--#{$size} --pad-b));
+                    padding-inline: 0;
+                }
+            }
         }
     }
 }
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 1c907c0..27d3726 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -2,6 +2,7 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
 
+$sizes:         'sm' 'lg' 'xl' !default;
 $themes:        'accent' 'negative' !default;
 $static-themes: 'black' 'white' !default;
 
@@ -54,7 +55,6 @@ $static-themes: 'black' 'white' !default;
     @include iro.bem-modifier('outline') {
         border-color:     fn.color(list.join($key, --disabled --outline-border));
         background-color: transparent;
-        box-shadow:       none;
     }
 
     @include theme(static-#{$theme});
@@ -255,10 +255,9 @@ $static-themes: 'black' 'white' !default;
         @include iro.bem-modifier('outline') {
             border-color:     fn.color(--disabled --outline-border);
             background-color: transparent;
-            box-shadow:       none;
         }
 
-        @each $size in sm lg xl {
+        @each $size in $sizes {
             @include iro.bem-modifier($size) {
                 padding-block:  fn.dim(--#{$size} --pad-b);
                 padding-inline: fn.dim(--#{$size} --pad-i);
diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug
index c0d7582..976a646 100644
--- a/tpl/objects/action-button.pug
+++ b/tpl/objects/action-button.pug
@@ -6,9 +6,13 @@ mixin action-button
             'o-action-button':        true,
             'u-d-block':              attributes.block,
             'o-action-button--quiet': attributes.quiet,
-            'o-action-button--round': attributes.round,
+            'o-action-button--pill':  attributes.pill,
+            'o-action-button--icon':  !!attributes.icon && !block,
             'is-selected':            attributes.selected
         }
+        if (attributes.size) {
+            classes['o-action-button--' + attributes.size] = true
+        }
         if (attributes.class) {
             classes[attributes.class] = true;
         }
diff --git a/tpl/views/action-button.pug b/tpl/views/action-button.pug
index 8fb4e58..2c94c68 100644
--- a/tpl/views/action-button.pug
+++ b/tpl/views/action-button.pug
@@ -1,31 +1,63 @@
 mixin view-action-button 
     +view('action-button', 'Action button')
         .c-box
+            +action-button(size='sm')= 'Idle'
+            = ' '
             +action-button= 'Idle'
             = ' '
-            +action-button(selected=true)= 'Selected'
+            +action-button(size='lg')= 'Idle'
             = ' '
-            +action-button(disabled=true)= 'Disabled'
+            +action-button(size='xl')= 'Idle'
+
+        .c-box
+            +action-button(icon='trash' size='sm')
             = ' '
-            +action-button(selected=true disabled=true)= 'Selected + disabled'
-            br
-            br
-            +action-button(icon='trash')= 'Idle'
+            +action-button(icon='trash')
+            = ' '
+            +action-button(icon='trash' size='lg')
+            = ' '
+            +action-button(icon='trash' size='xl')
+
+        .c-box
+            +action-button(pill=true size='sm')= 'Idle'
             = ' '
-            +action-button(icon='trash' selected=true)= 'Selected'
+            +action-button(pill=true)= 'Idle'
             = ' '
-            +action-button(icon='trash' disabled=true)= 'Disabled'
+            +action-button(pill=true size='lg')= 'Idle'
+            = ' '
+            +action-button(pill=true size='xl')= 'Idle'
+
+        .c-box
+            +action-button(pill=true icon='trash' size='sm')
+            = ' '
+            +action-button(pill=true icon='trash')
+            = ' '
+            +action-button(pill=true icon='trash' size='lg')
+            = ' '
+            +action-button(pill=true icon='trash' size='xl')
+
+        .c-box
+            +action-button= 'Label'
+            = ' '
+            +action-button(icon='trash')= 'Label'
             = ' '
-            +action-button(icon='trash' selected=true disabled=true)= 'Selected + disabled'
-            br
-            br
             +action-button(icon='trash')
+
+        .c-box
+            +action-button(quiet=true)= 'Label'
+            = ' '
+            +action-button(quiet=true icon='trash')= 'Label'
+            = ' '
+            +action-button(quiet=true icon='trash')
+
+        .c-box
+            +action-button= 'Idle'
             = ' '
-            +action-button(icon='trash' selected=true)
+            +action-button(selected=true)= 'Selected'
             = ' '
-            +action-button(icon='trash' disabled=true)
+            +action-button(disabled=true)= 'Disabled'
             = ' '
-            +action-button(icon='trash' selected=true disabled=true)
+            +action-button(selected=true disabled=true)= 'Selected + disabled'
 
         .c-box
             +action-button(quiet=true )= 'Idle'
@@ -35,26 +67,21 @@ mixin view-action-button
             +action-button(quiet=true disabled=true)= 'Disabled'
             = ' '
             +action-button(quiet=true selected=true disabled=true)= 'Selected + disabled'
-            br
-            br
-            +action-button(quiet=true icon='trash')= 'Idle'
-            = ' '
-            +action-button(quiet=true icon='trash' selected=true)= 'Selected'
-            = ' '
-            +action-button(quiet=true icon='trash' disabled=true)= 'Disabled'
-            = ' '
-            +action-button(quiet=true icon='trash' selected=true disabled=true)= 'Selected + disabled'
-            br
-            br
-            +action-button(quiet=true icon='trash')
+
+        .c-box
+            +action-button(pill=true)= 'Idle'
             = ' '
-            +action-button(quiet=true icon='trash' selected=true)
+            +action-button(pill=true selected=true)= 'Selected'
             = ' '
-            +action-button(quiet=true icon='trash' disabled=true)
+            +action-button(pill=true disabled=true)= 'Disabled'
             = ' '
-            +action-button(quiet=true icon='trash' selected=true disabled=true)
+            +action-button(pill=true selected=true disabled=true)= 'Selected + disabled'
 
         .c-box
-            +action-button= 'Idle'
+            +action-button(pill=true quiet=true)= 'Idle'
             = ' '
-            +action-button(icon='trash')
+            +action-button(pill=true quiet=true selected=true)= 'Selected'
+            = ' '
+            +action-button(pill=true quiet=true disabled=true)= 'Disabled'
+            = ' '
+            +action-button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled'