Add static button themes

5 files changed, 126 insertions, 9 deletions

diff --git a/src/_config.scss b/src/_config.scss
index eb52b5a..ce72c8e 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -55,6 +55,18 @@ $static-colors: (
         --green:  oklch(56% 0.14 150.48),
         --yellow: oklch(56% 0.14 84.08),
     ),
+
+    --transparents: (
+        --100: 0,
+        --200: .1,
+        --300: .25,
+        --400: .4,
+        --500: .55,
+        --600: .7,
+        --700: .8,
+        --800: .9,
+        --900: 1,
+    ),
 ) !default;
 
 $theme-light: (
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 2c845fa..91c4bea 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -189,6 +189,21 @@
     ));
 }
 
+@each $palette-name, $palette in (--black: #000 #fff, --white: #fff #000) {
+    $color: list.nth($palette, 1);
+    $text:  list.nth($palette, 2);
+
+    @include iro.props-store((
+        --colors: (
+            #{$palette-name}-transparent: fn.transparent-palette(
+                $color,
+                $text,
+                map.get(config.$static-colors, --transparents),
+            ),
+        ),
+    ));
+}
+
 @each $theme-name, $theme in config.$themes {
     $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name);
 
diff --git a/src/_functions.scss b/src/_functions.scss
index 0c04f1d..d615614 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -135,6 +135,18 @@
     @return $palette;
 }
 
+@function transparent-palette($color, $text, $alphas) {
+    $palette: (
+        --text: $text,
+    );
+
+    @each $key, $alpha in $alphas {
+        $palette: map.set($palette, $key, rgba($color, $alpha));
+    }
+
+    @return $palette;
+}
+
 @function px-to-em($size, $base: iro.$vars-root-size) {
     @return math.div($size, $base) * 1em;
 }
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 1a0e52c..771efbf 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -2,15 +2,16 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
 
-$themes: accent negative;
+$themes:        'accent' 'negative';
+$static-themes: 'black' 'white';
 
-@mixin button-variant($theme: null) {
+@mixin theme($theme: null) {
     $key: if($theme == null, (), --#{$theme});
 
     &:link,
     &:visited,
     &:enabled {
-        border-color:     fn.color(list.join($key, --bg));
+        border-color:     transparent;
         background-color: fn.color(list.join($key, --bg));
         color:            fn.color(list.join($key, --label));
     }
@@ -29,19 +30,29 @@ $themes: accent negative;
     &:visited,
     &:enabled {
         &:hover {
-            border-color:     fn.color(list.join($key, --hover --bg));
+            border-color:     transparent;
             background-color: fn.color(list.join($key, --hover --bg));
             color:            fn.color(list.join($key, --hover --label));
         }
 
         &:active {
-            border-color:     fn.color(list.join($key, --active --bg));
+            border-color:     transparent;
             background-color: fn.color(list.join($key, --active --bg));
             color:            fn.color(list.join($key, --active --label));
         }
     }
 }
 
+@mixin static-theme($theme, $disabled-theme: $theme) {
+    $key: --static-#{$disabled-theme};
+
+    border-color:     transparent;
+    background-color: fn.color(list.join($key, --disabled --bg));
+    color:            fn.color(list.join($key, --disabled --label));
+
+    @include theme(static-#{$theme});
+}
+
 @include iro.props-namespace('button') {
     @include iro.props-store((
         --dims: (
@@ -137,6 +148,48 @@ $themes: accent negative;
         ));
     }
 
+    @each $theme in $static-themes {
+        @include iro.props-store((
+            --colors: (
+                --static-#{$theme}: (
+                    --bg:             fn.global-color(--#{$theme}-transparent --200),
+                    --label:          fn.global-color(--#{$theme}-transparent --900),
+                    --outline-border: fn.global-color(--#{$theme}-transparent --300),
+                    --outline-label:  fn.global-color(--#{$theme}-transparent --900),
+
+                    --disabled: (
+                        --bg:             fn.global-color(--#{$theme}-transparent --200),
+                        --outline-border: fn.global-color(--#{$theme}-transparent --100),
+                        --label:          fn.global-color(--#{$theme}-transparent --500),
+                    ),
+                    --hover: (
+                        --bg:     fn.global-color(--#{$theme}-transparent --300),
+                        --label:  fn.global-color(--#{$theme}-transparent --900),
+                    ),
+                    --active: (
+                        --bg:     fn.global-color(--#{$theme}-transparent --400),
+                        --label:  fn.global-color(--#{$theme}-transparent --900),
+                    ),
+                ),
+                --static-#{$theme}-primary: (
+                    --bg:             fn.global-color(--#{$theme}-transparent --800),
+                    --label:          fn.global-color(--#{$theme}-transparent --text),
+                    --outline-border: fn.global-color(--#{$theme}-transparent --800),
+                    --outline-label:  fn.global-color(--#{$theme}-transparent --900),
+
+                    --hover: (
+                        --bg:     fn.global-color(--#{$theme}-transparent --900),
+                        --label:  fn.global-color(--#{$theme}-transparent --text),
+                    ),
+                    --active: (
+                        --bg:     fn.global-color(--#{$theme}-transparent --900),
+                        --label:  fn.global-color(--#{$theme}-transparent --text),
+                    ),
+                ),
+            ),
+        ));
+    }
+
     @include iro.bem-object(iro.props-namespace()) {
         display:          inline-block;
         padding-block:    fn.dim(--pad-b);
@@ -151,7 +204,6 @@ $themes: accent negative;
         line-height:      fn.dim(--line-height);
         text-align:       center;
         text-decoration:  none;
-        vertical-align:   top;
     
         @include iro.bem-modifier('block') {
             display: block;
@@ -171,15 +223,25 @@ $themes: accent negative;
             }
         }
 
-        @include button-variant();
+        @include theme();
 
         @include iro.bem-modifier('primary') {
-            @include button-variant('primary');
+            @include theme('primary');
         }
     
         @each $theme in $themes {
             @include iro.bem-modifier($theme) {
-                @include button-variant($theme);
+                @include theme($theme);
+            }
+        }
+    
+        @each $theme in $static-themes {
+            @include iro.bem-modifier(static-#{$theme}) {
+                @include static-theme($theme);
+            }
+
+            @include iro.bem-modifier(static-#{$theme}-primary) {
+                @include static-theme(#{$theme}-primary, $theme);
             }
         }
 
diff --git a/tpl/views/button.pug b/tpl/views/button.pug
index 7e8f572..221219c 100644
--- a/tpl/views/button.pug
+++ b/tpl/views/button.pug
@@ -60,3 +60,19 @@ mixin view-button
                     +a-button(variant=theme outline=true icon='trash')
                     +a-button(variant=theme outline=true disabled=true icon='trash')
 
+        each theme in ['static-black', 'static-black-primary', 'static-white', 'static-white-primary']
+            -
+                const bg = theme.startsWith('static-black') ? 500 : 1000;
+
+            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
+                .l-button-group
+                    +a-button(variant=theme)= 'Button'
+                    +a-button(variant=theme disabled=true)= 'Button'
+                    +a-button(variant=theme outline=true)= 'Button'
+                    +a-button(variant=theme outline=true disabled=true)= 'Button'
+                br
+                .l-button-group
+                    +a-button(variant=theme icon='trash')
+                    +a-button(variant=theme disabled=true icon='trash')
+                    +a-button(variant=theme outline=true icon='trash')
+                    +a-button(variant=theme outline=true disabled=true icon='trash')