Update

1 files changed, 173 insertions, 0 deletions

diff --git a/src/objects/_button.scss b/src/objects/_button.scss
new file mode 100644
index 0000000..d3588f6
--- /dev/null
+++ b/src/objects/_button.scss
@@ -0,0 +1,173 @@
+@use 'sass:list';
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+$themes: primary accent positive negative warning;
+
+@mixin button-variant($theme: null) {
+    $key: if($theme == null, (), --#{$theme});
+
+    &:link,
+    &:visited,
+    &:enabled {
+        border-color:     fn.color(list.join($key, --bg));
+        background-color: fn.color(list.join($key, --bg));
+        color:            fn.color(list.join($key, --label));
+    }
+    
+    @include iro.bem-modifier('outline') {
+        &:link,
+        &:visited,
+        &:enabled {
+            background-color: transparent;
+            color:            fn.color(list.join($key, --outline-label));
+        }
+    }
+
+    &:link,
+    &:visited,
+    &:enabled {
+        &:hover {
+            border-color:     fn.color(list.join($key, --hover --bg));
+            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));
+            background-color: fn.color(list.join($key, --active --bg));
+            color:            fn.color(list.join($key, --active --label));
+        }
+    }
+}
+
+@include iro.props-namespace('button') {
+    @include iro.props-store((
+        --dims: (
+            --line-height: 1.4,
+            --pad-i:       fn.global-dim(--size --225),
+            --pad-b:       fn.global-dim(--size --65),
+            --rounding:    10em,
+
+            --lg: (
+                --pad-i: fn.global-dim(--size --300),
+                --pad-b: fn.global-dim(--size --100),
+            ),
+        ),
+        --colors: (
+            --bg:            fn.global-color(--border-mute),
+            --label:         fn.global-color(--text),
+            --outline-label: fn.global-color(--text),
+
+            --hover: (
+                --bg:     fn.global-color(--border),
+                --label:  fn.global-color(--heading),
+            ),
+            --active: (
+                --bg:     fn.global-color(--border-strong),
+                --label:  fn.global-color(--heading),
+            ),
+            --disabled: (
+                --bg:     fn.global-color(--border-mute),
+                --label:  fn.global-color(--text-disabled),
+            ),
+            --key-focus: (
+                --bg:     fn.global-color(--base --50),
+                --label:  fn.global-color(--heading),
+                --border: fn.global-color(--yellow-static --400),
+            ),
+            
+            --primary: (
+                --bg:            fn.global-color(--base --800),
+                --label:         fn.global-color(--base --800-text),
+                --outline-label: fn.global-color(--text),
+
+                --hover: (
+                    --bg:     fn.global-color(--base --900),
+                    --label:  fn.global-color(--base --900-text),
+                ),
+                --active: (
+                    --bg:     fn.global-color(--base --900),
+                    --label:  fn.global-color(--base --900-text),
+                ),
+            ),
+        ),
+    ));
+
+    @each $theme in $themes {
+        @if $theme != primary {
+            @include iro.props-store((
+                --colors: (
+                    --#{$theme}: (
+                        --bg:            fn.global-color(--#{$theme} --900),
+                        --label:         fn.global-color(--#{$theme} --900-text),
+                        --outline-label: fn.global-color(--#{$theme} --1000),
+
+                        --hover: (
+                            --bg:     fn.global-color(--#{$theme} --1000),
+                            --label:  fn.global-color(--#{$theme} --1000-text),
+                        ),
+                        --active: (
+                            --bg:     fn.global-color(--#{$theme} --1100),
+                            --label:  fn.global-color(--#{$theme} --1100-text),
+                        ),
+                    ),
+                ),
+            ));
+        }
+    }
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:          inline-block;
+        padding-block:    fn.dim(--pad-b);
+        padding-inline:   fn.dim(--pad-i);
+        border:           2px solid transparent;
+        border-radius:    fn.dim(--rounding);
+        border-color:     fn.color(--disabled --bg);
+        background-color: fn.color(--disabled --bg);
+        color:            fn.color(--disabled --label);
+        font-weight:      500;
+        line-height:      fn.dim(--line-height);
+        text-align:       center;
+        text-decoration:  none;
+        vertical-align:   top;
+    
+        @include iro.bem-modifier('block') {
+            display: block;
+        }
+    
+        @include iro.bem-modifier('outline') {
+            background-color: transparent;
+            box-shadow:       none;
+        }
+
+        @include iro.bem-modifier('lg') {
+            padding-block:  fn.dim(--lg --pad-b);
+            padding-inline: fn.dim(--lg --pad-i);
+        }
+
+        @include button-variant();
+    
+        @each $theme in $themes {
+            @include iro.bem-modifier($theme) {
+                @include button-variant($theme);
+            }
+        }
+
+        &:link,
+        &:visited,
+        &:enabled {
+            &:focus-visible {
+                border-color:     fn.color(--key-focus --border);
+                background-color: fn.color(--key-focus --bg);
+                color:            fn.color(--key-focus --label);
+            }
+        }
+    
+        @include iro.bem-modifier('round') {
+            inline-size:    calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b));
+            padding-inline: 0;
+            border-radius:  100em;
+        }
+    }
+}