1 files changed, 52 insertions, 87 deletions

diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index fa903b1..5383432 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -1,90 +1,50 @@
+@use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
+@use '../props';
+@use '../core.vars' as core;
 
-@include iro.props-namespace('switch') {
-    @include iro.props-store((
-        --dims: (
-            --width:           fn.global-dim(--size --350),
-            --height:          fn.global-dim(--size --200),
-            --label-gap:       fn.global-dim(--size --125),
-            --border:          fn.global-dim(--border --medium),
-            --pad-i:           fn.global-dim(--size --65),
-            --pad-b:           fn.global-dim(--size --65),
-            --rounding:        fn.global-dim(--rounding),
-            --spacing-sibling: fn.global-dim(--size --300),
+@forward 'switch.vars';
+@use 'switch.vars' as vars;
 
-            --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: (
-            --track-bg:      fn.global-color(--border),
-            --handle-border: fn.global-color(--text-mute-more),
-            --handle-bg:     fn.global-color(--base --50),
-    
-            --hover: (
-                --label:         fn.global-color(--heading),
-                --handle-border: fn.global-color(--text-mute),
-            ),
-            --accent: (
-                --handle-border: fn.global-color(--accent --900),
-    
-                --hover: (
-                    --handle-border: fn.global-color(--accent --1000),
-                ),
-            ),
-            --disabled: (
-                --label:         fn.global-color(--text-disabled),
-                --track-bg:      fn.global-color(--border),
-                --handle-border: fn.global-color(--border-strong),
-                --handle-bg:     fn.global-color(--base --50),
-            ),
-            --key-focus: (
-                --label:   fn.global-color(--focus --text),
-                --border:  fn.global-color(--focus --border),
-                --outline: fn.global-color(--focus --outline),
-            ),
-        ),
-    ));
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
 
-    @include iro.bem-object(iro.props-namespace()) {
+    @include iro.bem-object('switch') {
         position:       relative;
         display:        inline-block;
-        padding-block:  fn.dim(--pad-b);
-        padding-inline: fn.dim(--pad-i);
+        padding-block:  props.get(vars.$pad-b);
+        padding-inline: props.get(vars.$pad-i);
         margin-inline:
-            calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset))
-            calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i) - fn.dim(--key-focus --border-offset));
+            calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
+            calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset));
     
         @include iro.bem-elem('indicator') {
             display:            inline-block;
             flex:               0 0 auto;
-            inline-size:        fn.dim(--width);
-            block-size:         fn.dim(--height);
-            margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--height) - fn.dim(--key-focus --border-offset));
+            inline-size:        props.get(vars.$inline-size);
+            block-size:         props.get(vars.$block-size);
+            margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset));
             vertical-align:     top;
-            background-color:   fn.color(--track-bg);
+            background-color:   props.get(vars.$track-bg-color);
             background-clip:    padding-box;
-            border:             fn.dim(--key-focus --border-offset) solid transparent;
+            border:             props.get(vars.$key-focus--border-offset) solid transparent;
             border-radius:      2em;
             transition:         background-color .2s ease;
     
             &::after {
                 display:          block;
-                inline-size:      calc(fn.dim(--height) - 2 * fn.dim(--border));
-                block-size:       calc(fn.dim(--height) - 2 * fn.dim(--border));
+                inline-size:      calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
+                block-size:       calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
                 content:          '';
-                background-color: fn.color(--handle-bg);
-                border:           fn.dim(--border) solid fn.color(--handle-border);
-                border-radius:    fn.dim(--width);
+                background-color: props.get(vars.$handle-bg-color);
+                border:           props.get(vars.$border-width) solid props.get(vars.$handle-border-color);
+                border-radius:    props.get(vars.$inline-size);
                 transition:       transform .2s ease;
             }
         }
     
         @include iro.bem-elem('label') {
-            margin-inline-start: fn.dim(--label-gap);
+            margin-inline-start: props.get(vars.$label-gap);
         }
     
         @include iro.bem-elem('native') {
@@ -98,38 +58,38 @@
             margin:             0;
             overflow:           hidden;
             appearance:         none;
-            border-radius:      fn.dim(--rounding);
+            border-radius:      props.get(vars.$rounding);
     
             &:hover,
             &:focus-visible {
                 @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--hover --label);
+                    color: props.get(vars.$hover--label-color);
                 }
     
                 @include iro.bem-sibling-elem('indicator') {
                     &::after {
-                        border-color: fn.color(--hover --handle-border);
+                        border-color: props.get(vars.$hover--handle-border-color);
                     }
                 }
             }
     
             &:checked {
                 @include iro.bem-sibling-elem('indicator') {
-                    background-color: fn.color(--handle-border);
+                    background-color: props.get(vars.$handle-border-color);
     
                     &::after {
-                        border-color: fn.color(--handle-border);
-                        transform:    translate(calc(fn.dim(--width) - fn.dim(--height) + .5px), 0);
+                        border-color: props.get(vars.$handle-border-color);
+                        transform:    translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0);
                     }
                 }
     
                 &:hover,
                 &:focus-visible {
                     @include iro.bem-sibling-elem('indicator') {
-                        background-color: fn.color(--hover --handle-border);
+                        background-color: props.get(vars.$hover--handle-border-color);
 
                         &::after {
-                            border-color: fn.color(--hover --handle-border);
+                            border-color: props.get(vars.$hover--handle-border-color);
                         }
                     }
                 }
@@ -137,24 +97,24 @@
     
             &:disabled {
                 @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--disabled --label);
+                    color: props.get(vars.$disabled--label-color);
                 }
     
                 @include iro.bem-sibling-elem('indicator') {
-                    background-color: fn.color(--disabled --track-bg);
+                    background-color: props.get(vars.$disabled--track-bg-color);
     
                     &::after {
-                        background-color: fn.color(--disabled --handle-bg);
-                        border-color:     fn.color(--disabled --handle-border);
+                        background-color: props.get(vars.$disabled--handle-bg-color);
+                        border-color:     props.get(vars.$disabled--handle-border-color);
                     }
                 }
     
                 &:checked {
                     @include iro.bem-sibling-elem('indicator') {
-                        background-color: fn.color(--disabled --handle-border);
+                        background-color: props.get(vars.$disabled--handle-border-color);
     
                         &::after {
-                            border-color: fn.color(--disabled --handle-border);
+                            border-color: props.get(vars.$disabled--handle-border-color);
                         }
                     }
                 }
@@ -162,12 +122,17 @@
     
             &:focus-visible {
                 @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--key-focus --label);
+                    color: props.get(vars.$key-focus--label-color);
                 }
 
                 @include iro.bem-sibling-elem('indicator') {
-                    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);
+                    outline:    props.get(vars.$key-focus--border-color) 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(vars.$key-focus--outline-color);
                 }
             }
         }
@@ -182,20 +147,20 @@
             @include iro.bem-elem('native') {
                 &:checked {
                     @include iro.bem-sibling-elem('indicator') {
-                        background-color: fn.color(--accent --handle-border);
+                        background-color: props.get(vars.$accent--handle-border-color);
         
                         &::after {
-                            border-color: fn.color(--accent --handle-border);
+                            border-color: props.get(vars.$accent--handle-border-color);
                         }
                     }
         
                     &:hover,
                     &:focus-visible {
                         @include iro.bem-sibling-elem('indicator') {
-                            background-color: fn.color(--accent --hover --handle-border);
+                            background-color: props.get(vars.$accent--hover--handle-border-color);
     
                             &::after {
-                                border-color: fn.color(--accent --hover --handle-border);
+                                border-color: props.get(vars.$accent--hover--handle-border-color);
                             }
                         }
                     }
@@ -203,15 +168,15 @@
         
                 &:disabled {
                     @include iro.bem-sibling-elem('label') {
-                        color: fn.color(--disabled --label);
+                        color: props.get(vars.$disabled--label-color);
                     }
 
                     &:checked {
                         @include iro.bem-sibling-elem('indicator') {
-                            background-color: fn.color(--disabled --handle-border);
+                            background-color: props.get(vars.$disabled--handle-border-color);
 
                             &::after {
-                                border-color: fn.color(--disabled --handle-border);
+                                border-color: props.get(vars.$disabled--handle-border-color);
                             }
                         }
                     }