1 files changed, 59 insertions, 55 deletions

diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index 7d5d16d..0fb95f1 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -1,4 +1,5 @@
 @use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
 
 @include iro.props-namespace('switch') {
     @include iro.props-store((
@@ -6,61 +7,64 @@
             --width:        iro.fn-px-to-rem(26px),
             --height:       iro.fn-px-to-rem(15px),
             --label-gap:    .6rem,
-            --border-width: iro.props-get(--dims --border-width --medium, $global: true),
+            --border-width: fn.dim(--border-width --medium, $global: true),
             --padding-x:    .3rem,
             --padding-y:    .3rem,
-            --margin-right: iro.props-get(--dims --spacing --x --md, $global: true),
+            --margin-right: fn.dim(--spacing --x --md, $global: true),
         ),
+    ), 'dims');
+
+    @include iro.props-store((
         --colors: (
-            --track-bg:      iro.props-get(--colors --obj, $global: true),
-            --handle-border: iro.props-get(--colors --fg-hi, $global: true),
-            --handle-bg:     iro.props-get(--colors --bg-hi, $global: true),
+            --track-bg:      fn.color(--obj, $global: true),
+            --handle-border: fn.color(--fg-hi, $global: true),
+            --handle-bg:     fn.color(--bg-hi, $global: true),
     
             --hover: (
-                --label:         iro.props-get(--colors --fg-lo, $global: true),
-                --handle-border: iro.props-get(--colors --fg, $global: true),
+                --label:         fn.color(--fg-lo, $global: true),
+                --handle-border: fn.color(--fg, $global: true),
             ),
             --accent: (
-                --handle-border: iro.props-get(--colors --accent --primary, $global: true),
+                --handle-border: fn.color(--accent --primary, $global: true),
     
                 --hover: (
-                    --handle-border: iro.props-get(--colors --accent --primary-lo, $global: true),
+                    --handle-border: fn.color(--accent --primary-lo, $global: true),
                 ),
             ),
             --key-focus: (
-                --label:         iro.props-get(--colors --focus --text, $global: true),
-                --track-bg:      iro.props-get(--colors --focus --fill, $global: true),
-                --handle-border: iro.props-get(--colors --focus --fill, $global: true),
-                --shadow:        iro.props-get(--colors --focus --shadow, $global: true),
+                --label:         fn.color(--focus --text, $global: true),
+                --track-bg:      fn.color(--focus --fill, $global: true),
+                --handle-border: fn.color(--focus --fill, $global: true),
+                --shadow:        fn.color(--focus --shadow, $global: true),
             ),
             --disabled: (
-                --label:         iro.props-get(--colors --fg-hi3, $global: true),
-                --track-bg:      iro.props-get(--colors --obj, $global: true),
-                --handle-border: iro.props-get(--colors --obj-lo, $global: true),
-                --handle-bg:     iro.props-get(--colors --bg-hi, $global: true),
+                --label:         fn.color(--fg-hi3, $global: true),
+                --track-bg:      fn.color(--obj, $global: true),
+                --handle-border: fn.color(--obj-lo, $global: true),
+                --handle-bg:     fn.color(--bg-hi, $global: true),
             )
         ),
-    ));
+    ), 'colors');
 
     @include iro.bem-object(iro.props-namespace()) {
         display:      inline-flex;
         position:     relative;
         align-items:  flex-start;
-        margin-right: calc(-1 * iro.props-get(--dims --padding-x) + iro.props-get(--dims --margin-right));
-        margin-left:  calc(-1 * iro.props-get(--dims --padding-x));
-        padding:      iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); // sass-lint:disable-line shorthand-values
+        margin-right: calc(-1 * fn.dim(--padding-x) + fn.dim(--margin-right));
+        margin-left:  calc(-1 * fn.dim(--padding-x));
+        padding:      fn.dim(--padding-y) fn.dim(--padding-x); // sass-lint:disable-line shorthand-values
     
         @include iro.bem-elem('indicator') {
             display:          block;
             position:         relative;
             box-sizing:       border-box;
             flex:             0 0 auto;
-            width:            iro.props-get(--dims --width);
-            height:           iro.props-get(--dims --height);
-            margin-top:       calc(.5 * ($line-height * 1em - iro.props-get(--dims --height)));
+            width:            fn.dim(--width);
+            height:           fn.dim(--height);
+            margin-top:       calc(.5 * ($line-height * 1em - fn.dim(--height)));
             transition:       background-color .2s ease;
             border-radius:    2em;
-            background-color: iro.props-get(--colors --track-bg);
+            background-color: fn.color(--track-bg);
     
             &::after {
                 content:          '';
@@ -69,19 +73,19 @@
                 z-index:          10;
                 top:              50%;
                 left:             0;
-                width:            calc(iro.props-get(--dims --height) - 2 * iro.props-get(--dims --border-width));
-                height:           calc(iro.props-get(--dims --height) - 2 * iro.props-get(--dims --border-width));
+                width:            calc(fn.dim(--height) - 2 * fn.dim(--border-width));
+                height:           calc(fn.dim(--height) - 2 * fn.dim(--border-width));
                 transform:        translateY(-50%);
                 transition:       left .2s ease;
-                border:           iro.props-get(--dims --border-width) solid iro.props-get(--colors --handle-border);
-                border-radius:    iro.props-get(--dims --width);
-                background-color: iro.props-get(--colors --handle-bg);
+                border:           fn.dim(--border-width) solid fn.color(--handle-border);
+                border-radius:    fn.dim(--width);
+                background-color: fn.color(--handle-bg);
             }
         }
     
         @include iro.bem-elem('label') {
             align-self:  baseline;
-            margin-left: iro.props-get(--dims --label-gap);
+            margin-left: fn.dim(--label-gap);
         }
     
         @include iro.bem-elem('native') {
@@ -97,32 +101,32 @@
     
             &:hover {
                 @include iro.bem-sibling-elem('label') {
-                    color: iro.props-get(--colors --hover --label);
+                    color: fn.color(--hover --label);
                 }
     
                 @include iro.bem-sibling-elem('indicator') {
                     &::after {
-                        border-color: iro.props-get(--colors --hover --handle-border);
+                        border-color: fn.color(--hover --handle-border);
                     }
                 }
             }
     
             &:checked {
                 @include iro.bem-sibling-elem('indicator') {
-                    background-color: iro.props-get(--colors --handle-border);
+                    background-color: fn.color(--handle-border);
     
                     &::after {
-                        left:         calc(#{iro.props-get(--dims --width)} - #{iro.props-get(--dims --height)} + .5px);
-                        border-color: iro.props-get(--colors --handle-border);
+                        left:         calc(#{fn.dim(--width)} - #{fn.dim(--height)} + .5px);
+                        border-color: fn.color(--handle-border);
                     }
                 }
     
                 &:hover {
                     @include iro.bem-sibling-elem('indicator') {
-                        background-color: iro.props-get(--colors --hover --handle-border);
+                        background-color: fn.color(--hover --handle-border);
 
                         &::after {
-                            border-color: iro.props-get(--colors --hover --handle-border);
+                            border-color: fn.color(--hover --handle-border);
                         }
                     }
                 }
@@ -130,24 +134,24 @@
     
             &:disabled {
                 @include iro.bem-sibling-elem('label') {
-                    color: iro.props-get(--colors --disabled --label);
+                    color: fn.color(--disabled --label);
                 }
     
                 @include iro.bem-sibling-elem('indicator') {
-                    background-color: iro.props-get(--colors --disabled --track-bg);
+                    background-color: fn.color(--disabled --track-bg);
     
                     &::after {
-                        border-color:     iro.props-get(--colors --disabled --handle-border);
-                        background-color: iro.props-get(--colors --disabled --handle-bg);
+                        border-color:     fn.color(--disabled --handle-border);
+                        background-color: fn.color(--disabled --handle-bg);
                     }
                 }
     
                 &:checked {
                     @include iro.bem-sibling-elem('indicator') {
-                        background-color: iro.props-get(--colors --disabled --handle-border);
+                        background-color: fn.color(--disabled --handle-border);
     
                         &::after {
-                            border-color: iro.props-get(--colors --disabled --handle-border);
+                            border-color: fn.color(--disabled --handle-border);
                         }
                     }
                 }
@@ -156,19 +160,19 @@
             @include iro.bem-at-theme('keyboard') {
                 &:focus {
                     @include iro.bem-sibling-elem('label') {
-                        color: iro.props-get(--colors --key-focus --label);
+                        color: fn.color(--key-focus --label);
                     }
     
                     @include iro.bem-sibling-elem('indicator') {
                         &::after {
-                            border-color: iro.props-get(--colors --key-focus --handle-border);
-                            box-shadow:   iro.props-get(--colors --key-focus --shadow);
+                            border-color: fn.color(--key-focus --handle-border);
+                            box-shadow:   fn.color(--key-focus --shadow);
                         }
                     }
     
                     &:checked {
                         @include iro.bem-sibling-elem('indicator') {
-                            background-color: iro.props-get(--colors --key-focus --track-bg);
+                            background-color: fn.color(--key-focus --track-bg);
                         }
                     }
                 }
@@ -179,19 +183,19 @@
             @include iro.bem-elem('native') {
                 &:checked {
                     @include iro.bem-sibling-elem('indicator') {
-                        background-color: iro.props-get(--colors --accent --handle-border);
+                        background-color: fn.color(--accent --handle-border);
         
                         &::after {
-                            border-color: iro.props-get(--colors --accent --handle-border);
+                            border-color: fn.color(--accent --handle-border);
                         }
                     }
         
                     &:hover {
                         @include iro.bem-sibling-elem('indicator') {
-                            background-color: iro.props-get(--colors --accent --hover --handle-border);
+                            background-color: fn.color(--accent --hover --handle-border);
     
                             &::after {
-                                border-color: iro.props-get(--colors --accent --hover --handle-border);
+                                border-color: fn.color(--accent --hover --handle-border);
                             }
                         }
                     }
@@ -199,15 +203,15 @@
         
                 &:disabled {
                     @include iro.bem-sibling-elem('label') {
-                        color: iro.props-get(--colors --disabled --label);
+                        color: fn.color(--disabled --label);
                     }
 
                     &:checked {
                         @include iro.bem-sibling-elem('indicator') {
-                            background-color: iro.props-get(--colors --disabled --handle-border);
+                            background-color: fn.color(--disabled --handle-border);
 
                             &::after {
-                                border-color: iro.props-get(--colors --disabled --handle-border);
+                                border-color: fn.color(--disabled --handle-border);
                             }
                         }
                     }