Improved variable structure

1 files changed, 50 insertions, 46 deletions

diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index 51b8c5a..aef79d7 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -1,32 +1,33 @@
 @use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
 @use '../vars';
 @use '../mixins/typography';
 
 @mixin invalid {
     @include iro.bem-sibling-elem('bg') {
-        border-color: iro.props-get(--colors --error --border);
-        box-shadow:   iro.props-get(--colors --error --shadow);
+        border-color: fn.color(--error --border);
+        box-shadow:   fn.color(--error --shadow);
     }
 
     &:hover {
         @include iro.bem-sibling-elem('bg') {
-            border-color: iro.props-get(--colors --error --hover --border);
-            box-shadow:   iro.props-get(--colors --error --hover --shadow);
+            border-color: fn.color(--error --hover --border);
+            box-shadow:   fn.color(--error --hover --shadow);
         }
     }
 
     &:focus {
         @include iro.bem-sibling-elem('bg') {
-            border-color: iro.props-get(--colors --error --focus --border);
-            box-shadow:   iro.props-get(--colors --error --focus --shadow);
+            border-color: fn.color(--error --focus --border);
+            box-shadow:   fn.color(--error --focus --shadow);
         }
     }
 }
 
 @mixin keyboard-focus {
     @include iro.bem-sibling-elem('bg') {
-        border-color: iro.props-get(--colors --key-focus --border);
-        box-shadow:   iro.props-get(--colors --key-focus --shadow);
+        border-color: fn.color(--key-focus --border);
+        box-shadow:   fn.color(--key-focus --shadow);
     }
 }
 
@@ -35,60 +36,63 @@
         --dims: (
             --padding-x:     .6rem,
             --padding-y:     .5rem,
-            --border-width:  iro.props-get(--dims --border-width --thin, $global: true),
+            --border-width:  fn.dim(--border-width --thin, $global: true),
             --border-radius: 2px,
 
             --focus: (
-                --border-width:  iro.props-get(--dims --border-width --medium, $global: true),
+                --border-width:  fn.dim(--border-width --medium, $global: true),
             )
         ),
+    ), 'dims');
+
+    @include iro.props-store((
         --colors: (
-            --bg:          iro.props-get(--colors --bg-hi2, $global: true),
-            --placeholder: iro.props-get(--colors --fg-hi2, $global: true),
-            --text:        iro.props-get(--colors --fg, $global: true),
-            --border:      iro.props-get(--colors --obj-lo, $global: true),
+            --bg:          fn.color(--bg-hi2, $global: true),
+            --placeholder: fn.color(--fg-hi2, $global: true),
+            --text:        fn.color(--fg, $global: true),
+            --border:      fn.color(--obj-lo, $global: true),
             --shadow:      0 0 0 0 transparent,
     
             --hover: (
-                --border: iro.props-get(--colors --fg-hi2, $global: true),
+                --border: fn.color(--fg-hi2, $global: true),
                 --shadow: 0 0 0 0 transparent,
             ),
             --focus: (
-                --border: iro.props-get(--colors --accent --primary, $global: true),
+                --border: fn.color(--accent --primary, $global: true),
                 --shadow: 0 0 0 0 transparent,
             ),
             --key-focus: (
-                --border: iro.props-get(--colors --focus --fill, $global: true),
-                --shadow: iro.props-get(--colors --focus --shadow, $global: true),
+                --border: fn.color(--focus --fill, $global: true),
+                --shadow: fn.color(--focus --shadow, $global: true),
             ),
             --error: (
-                --border: iro.props-get(--colors --accent --error-hi, $global: true),
+                --border: fn.color(--accent --error-hi, $global: true),
                 --shadow: 0 0 0 0 transparent,
     
                 --hover: (
-                    --border: iro.props-get(--colors --accent --error, $global: true),
+                    --border: fn.color(--accent --error, $global: true),
                     --shadow: 0 0 0 0 transparent,
                 ),
                 --focus: (
-                    --border: iro.props-get(--colors --accent --error, $global: true),
+                    --border: fn.color(--accent --error, $global: true),
                     --shadow: 0 0 0 0 transparent,
                 ),
             ),
             --disabled: (
-                --bg:          iro.props-get(--colors --obj-hi, $global: true),
-                --placeholder: iro.props-get(--colors --fg-hi3, $global: true),
-                --text:        iro.props-get(--colors --fg-hi3, $global: true),
-                --border:      iro.props-get(--colors --obj-hi, $global: true),
+                --bg:          fn.color(--obj-hi, $global: true),
+                --placeholder: fn.color(--fg-hi3, $global: true),
+                --text:        fn.color(--fg-hi3, $global: true),
+                --border:      fn.color(--obj-hi, $global: true),
                 --shadow:      0 0 0 0 transparent,
             ),
         ),
-    ));
+    ), 'colors');
 
     @include iro.bem-object(iro.props-namespace()) {
         position:         relative;
         min-width:        0;
-        padding:          iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x);
-        background-color: iro.props-get(--colors --bg);
+        padding:          fn.dim(--padding-y) fn.dim(--padding-x);
+        background-color: fn.color(--bg);
 
         @include iro.bem-elem('bg') {
             display:          block;
@@ -97,9 +101,9 @@
             right:            0;
             bottom:           0;
             left:             0;
-            border:           iro.props-get(--dims --border-width) solid iro.props-get(--colors --border);
-            border-radius:    iro.props-get(--dims --border-radius);
-            box-shadow:       iro.props-get(--colors --shadow);
+            border:           fn.dim(--border-width) solid fn.color(--border);
+            border-radius:    fn.dim(--border-radius);
+            box-shadow:       fn.color(--shadow);
             pointer-events:   none;
         }
 
@@ -107,19 +111,19 @@
             @include typography.set-font(vars.$font--main, (size: 1em, line-height: vars.$line-height));
     
             width:  100%;
-            color:  iro.props-get(--colors --text);
+            color:  fn.color(--text);
             resize: none;
 
             &::placeholder {
                 opacity:    1;
-                color:      iro.props-get(--colors --placeholder);
+                color:      fn.color(--placeholder);
                 font-style: italic;
             }
 
             &:hover {
                 @include iro.bem-sibling-elem('bg') {
-                    border-color: iro.props-get(--colors --hover --border);
-                    box-shadow:   iro.props-get(--colors --hover --shadow);
+                    border-color: fn.color(--hover --border);
+                    box-shadow:   fn.color(--hover --shadow);
                 }
             }
 
@@ -127,15 +131,15 @@
                 outline: 0;
 
                 @include iro.bem-sibling-elem('bg') {
-                    $offset: calc(iro.props-get(--dims --border-width) - iro.props-get(--dims --focus --border-width));
+                    $offset: calc(fn.dim(--border-width) - fn.dim(--focus --border-width));
 
                     top:           $offset;
                     right:         $offset;
                     bottom:        $offset;
                     left:          $offset;
-                    border:        iro.props-get(--dims --focus --border-width) solid iro.props-get(--colors --focus --border);
-                    border-radius: calc(iro.props-get(--dims --border-radius) - $offset);
-                    box-shadow:    iro.props-get(--colors --focus --shadow);
+                    border:        fn.dim(--focus --border-width) solid fn.color(--focus --border);
+                    border-radius: calc(fn.dim(--border-radius) - $offset);
+                    box-shadow:    fn.color(--focus --shadow);
                 }
             }
 
@@ -172,29 +176,29 @@
 
             @include iro.bem-elem('native') {
                 box-sizing: border-box;
-                padding:    iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x);
+                padding:    fn.dim(--padding-y) fn.dim(--padding-x);
             }
         }
 
         @include iro.bem-is('disabled') {
-            background-color: iro.props-get(--colors --disabled --bg);
+            background-color: fn.color(--disabled --bg);
 
             @include iro.bem-elem('native') {
-                color: iro.props-get(--colors --disabled --text);
+                color: fn.color(--disabled --text);
 
                 &::placeholder {
-                    color: iro.props-get(--colors --disabled --placeholder);
+                    color: fn.color(--disabled --placeholder);
                 }
             }
 
             @include iro.bem-elem('bg') {
-                border-color: iro.props-get(--colors --disabled --border);
+                border-color: fn.color(--disabled --border);
             }
 
             @include iro.bem-is('invalid') {
                 @include iro.bem-elem('native') {
                     @include iro.bem-sibling-elem('bg') {
-                        border-color: iro.props-get(--colors --disabled --border);
+                        border-color: fn.color(--disabled --border);
                     }
                 }
             }
@@ -202,7 +206,7 @@
             @include iro.bem-elem('native') {
                 &:invalid {
                     @include iro.bem-sibling-elem('bg') {
-                        border-color: iro.props-get(--colors --disabled --border);
+                        border-color: fn.color(--disabled --border);
                     }
                 }
             }