Add static button themes

1 files changed, 71 insertions, 9 deletions

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);
             }
         }