1 files changed, 58 insertions, 216 deletions

diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 72d85ff..3f68873 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -1,298 +1,140 @@
-@use 'sass:string';
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
+@use '../props';
+@use '../core.vars' as core;
 
-$sizes:         'sm' 'lg' 'xl' !default;
-$themes:        'accent' 'positive' 'negative' 'warning' !default;
-$static-themes: 'black' 'white' !default;
+@forward 'badge.vars';
+@use 'badge.vars' as vars;
 
-@mixin theme($theme) {
-    color:            fn.color(--#{$theme} --label);
-    background-color: fn.color(--#{$theme} --bg);
+@mixin -apply-theme($theme, $key: (), $static: false) {
+    color:            props.get($theme, list.join($key, --label)...);
+    background-color: props.get($theme, list.join($key, --bg)...);
 
     &:link,
     &:visited,
     &:enabled {
         &:hover,
         &:focus-visible {
-            color:            fn.color(--#{$theme} --hover --label);
-            background-color: fn.color(--#{$theme} --hover --bg);
+            color:            props.get($theme, list.join($key, --hover --label)...);
+            background-color: props.get($theme, list.join($key, --hover --bg)...);
         }
 
         &:active {
-            color:            fn.color(--#{$theme} --active --label);
-            background-color: fn.color(--#{$theme} --active --bg);
+            color:            props.get($theme, list.join($key, --active --label)...);
+            background-color: props.get($theme, list.join($key, --active --bg)...);
         }
     }
 
     @include iro.bem-modifier('quiet') {
-        color:            fn.color(--#{$theme}-quiet --label);
-        background-color: fn.color(--#{$theme}-quiet --bg);
+        color:            props.get($theme, list.join($key, --quiet --label)...);
+        background-color: props.get($theme, list.join($key, --quiet --bg)...);
 
         &:link,
         &:visited,
         &:enabled {
             &:hover,
             &:focus-visible {
-                color:            fn.color(--#{$theme}-quiet --hover --label);
-                background-color: fn.color(--#{$theme}-quiet --hover --bg);
+                color:            props.get($theme, list.join($key, --quiet --hover --label)...);
+                background-color: props.get($theme, list.join($key, --quiet --hover --bg)...);
             }
 
             &:active {
-                color:            fn.color(--#{$theme}-quiet --active --label);
-                background-color: fn.color(--#{$theme}-quiet --active --bg);
+                color:            props.get($theme, list.join($key, --quiet --active --label)...);
+                background-color: props.get($theme, list.join($key, --quiet --active --bg)...);
             }
         }
     }
 
-    @if string.slice($theme, 1, 7) == 'static-' {
+    @if $static {
         &::after {
-            outline:    fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border);
-            box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--#{$theme} --key-focus --outline);
+            outline:    props.get($theme, list.join($key, --key-focus --border)...) solid props.get(vars.$key-focus--border-width);
+            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)...);
         }
     }
 }
 
-@include iro.props-namespace('badge') {
-    @include iro.props-store((
-        --dims: (
-            --pad-b:       fn.global-dim(--size --50),
-            --pad-i:       fn.global-dim(--size --100),
-            --pad-i-pill:  fn.global-dim(--size --150),
-            --pad-i-label: fn.global-dim(--size --50),
-            --rounding:    fn.global-dim(--rounding),
-            --font-size:   fn.global-dim(--font-size --75),
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
 
-            --sm: (
-                --pad-b:       fn.global-dim(--size --25),
-                --pad-i:       fn.global-dim(--size --75),
-                --pad-i-pill:  fn.global-dim(--size --125),
-                --pad-i-label: fn.global-dim(--size --25),
-                --font-size:   fn.global-dim(--font-size --50),
-            ),
-            --lg: (
-                --pad-b:       fn.global-dim(--size --75),
-                --pad-i:       fn.global-dim(--size --125),
-                --pad-i-pill:  fn.global-dim(--size --175),
-                --pad-i-label: fn.global-dim(--size --50),
-                --font-size:   fn.global-dim(--font-size --100),
-            ), 
-            --xl: ( 
-                --pad-b:       fn.global-dim(--size --100),
-                --pad-i:       fn.global-dim(--size --150),
-                --pad-i-pill:  fn.global-dim(--size --225),
-                --pad-i-label: fn.global-dim(--size --75),
-                --font-size:   fn.global-dim(--font-size --150),
-            ),
-            
-            --key-focus: (
-                --border:        fn.global-dim(--key-focus --border),
-                --border-offset: fn.global-dim(--key-focus --border-offset),
-                --outline:       fn.global-dim(--key-focus --outline),
-            ),
-        ),
-        --colors: (
-            --bg:    fn.global-color(--text-mute),
-            --label: fn.global-color(--bg-l2),
-            --hover: (
-                --bg: fn.global-color(--text),
-            ),
-            --active: (
-                --bg: fn.global-color(--heading),
-            ),
-            --key-focus: (
-                --label:   fn.global-color(--focus --text),
-                --border:  fn.global-color(--focus --border),
-                --outline: fn.global-color(--focus --outline),
-            ),
-
-            --quiet: (
-                --bg:    fn.global-color(--border-mute),
-                --label: fn.global-color(--heading),
-                --hover: (
-                    --bg: fn.global-color(--border),
-                ),
-                --active: (
-                    --bg: fn.global-color(--border-strong),
-                ),
-            ),
-        ),
-    ));
-
-    @each $theme in $themes {
-        @include iro.props-store((
-            --colors: (
-                --#{$theme}: (
-                    --bg:    fn.global-color(--#{$theme}-static --900),
-                    --label: fn.global-color(--#{$theme}-static --900-text),
-                    --hover: (
-                        --bg:    fn.global-color(--#{$theme}-static --1000),
-                        --label: fn.global-color(--#{$theme}-static --1000-text),
-                    ),
-                    --active: (
-                        --bg:    fn.global-color(--#{$theme}-static --1100),
-                        --label: fn.global-color(--#{$theme}-static --1000-text),
-                    ),
-                ),
-
-                --#{$theme}-quiet: (
-                    --bg:    fn.global-color(--#{$theme} --200),
-                    --label: fn.global-color(--#{$theme} --1100),
-                    --hover: (
-                        --bg:    fn.global-color(--#{$theme} --300),
-                        --label: fn.global-color(--#{$theme} --1200),
-                    ),
-                    --active: (
-                        --bg:    fn.global-color(--#{$theme} --400),
-                        --label: fn.global-color(--#{$theme} --1300),
-                    ),
-                )
-            ),
-        ));
-    }
-
-    @each $theme in $static-themes {
-        @include iro.props-store((
-            --colors: (
-                --static-#{$theme}: (
-                    --bg:    fn.global-color(--#{$theme}-transparent --800),
-                    --label: fn.global-color(--#{$theme}-transparent --text),
-                    --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),
-                    ),
-                    --key-focus: (
-                        --bg:      fn.global-color(--#{$theme}-transparent --100),
-                        --label:   fn.global-color(--#{$theme}-transparent --900),
-                        --border:  fn.global-color(--#{$theme}-transparent --900),
-                        --outline: fn.global-color(--#{$theme}-transparent --300),
-                    ),
-                ),
-
-                --static-#{$theme}-quiet: (
-                    --bg:    fn.global-color(--#{$theme}-transparent --200),
-                    --label: fn.global-color(--#{$theme}-transparent --900),
-                    --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),
-                    ),
-                )
-            )
-        ));
-    }
-
-    @include iro.bem-object(iro.props-namespace()) {
+    @include iro.bem-object('badge') {
         position:         relative;
         display:          inline-block;
-        padding-block:    fn.dim(--pad-b);
-        padding-inline:   fn.dim(--pad-i);
-        font-size:        fn.dim(--font-size);
-        line-height:      fn.global-dim(--font --standard --line-height);
-        color:            fn.color(--label);
+        padding-block:    props.get(vars.$pad-b);
+        padding-inline:   props.get(vars.$pad-i);
+        font-size:        props.get(vars.$font-size);
+        line-height:      props.get(core.$font--standard--line-height);
         text-align:       center;
         text-decoration:  none;
-        background-color: fn.color(--bg);
         background-clip:  padding-box;
-        border-radius:    fn.dim(--rounding);
+        border-radius:    props.get(vars.$rounding);
 
         &::after {
             position:       absolute;
-            inset:          calc(-1 * fn.dim(--key-focus --border-offset));
+            inset:          calc(-1 * props.get(vars.$key-focus--border-offset));
             z-index:        1;
             display:        none;
             pointer-events: none;
             content:        '';
-            border-radius:  calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
-            outline:        fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
-            box-shadow:     0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+            border-radius:  calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+            outline:        transparent solid props.get(vars.$key-focus--border-width);
         }
 
         &:link,
         &:visited,
         &:enabled {
-            &:hover,
             &:focus-visible {
-                background-color: fn.color(--hover --bg);
-            }
-
-            &:active {
-                background-color: fn.color(--active --bg);
+                &::after {
+                    display: block;
+                }
             }
         }
 
         @include iro.bem-elem('label') {
-            margin-inline: fn.dim(--pad-i-label);
+            margin-inline: props.get(vars.$pad-i-label);
         }
 
-        @include iro.bem-modifier('quiet') {
-            color:            fn.color(--quiet --label);
-            background-color: fn.color(--quiet --bg);
-
-            &:link,
-            &:visited,
-            &:enabled {
-                &:hover,
-                &:focus-visible {
-                    background-color: fn.color(--quiet --hover --bg);
-                }
+        @include -apply-theme(vars.$default-theme);
 
-                &:active {
-                    background-color: fn.color(--quiet --active --bg);
-                }
-            }
-        }
-    
-        @each $theme in $themes {
+        @each $theme in map.keys(props.get(vars.$themes)) {
             @include iro.bem-modifier($theme) {
-                @include theme($theme);
+                @include -apply-theme(vars.$themes, $theme);
             }
         }
 
-        &:link,
-        &:visited,
-        &:enabled {
-            &:focus-visible {
-                &::after {
-                    display: block;
-                }
-            }
-        }
-    
-        @each $theme in $static-themes {
-            @include iro.bem-modifier(static-#{$theme}) {
-                @include theme(static-#{$theme});
+        @each $theme in map.keys(props.get(vars.$static-themes)) {
+            @include iro.bem-modifier($theme) {
+                @include -apply-theme(vars.$static-themes, $theme, true);
             }
         }
     
         @include iro.bem-modifier('pill') {
-            padding-inline: fn.dim(--pad-i-pill);
+            padding-inline: props.get(vars.$pad-i-pill);
             border-radius:  10em;
 
             &::after {
                 border-radius: 10em;
             }
         }
-    
-        @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);
+
+        @each $mod, $pad-b, $pad-i, $pad-i-pill, $pad-i-label, $font-size in vars.$sizes {
+            @include iro.bem-modifier($mod) {
+                padding-block:  props.get($pad-b);
+                padding-inline: props.get($pad-i);
+                font-size:      props.get($font-size);
 
                 @include iro.bem-elem('label') {
-                    margin-inline: fn.dim(--#{$size} --pad-i-label);
+                    margin-inline: props.get($pad-i-label);
                 }
         
                 @include iro.bem-modifier('pill') {
-                    padding-inline: fn.dim(--#{$size} --pad-i-pill);
+                    padding-inline: props.get($pad-i-pill);
                 }
             }
         }