Update

1 files changed, 44 insertions, 93 deletions

diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index cfb5a6d..793d23a 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -1,100 +1,51 @@
+@use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
+@use '../props';
 
-@mixin invalid {
-    $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border));
+@forward 'text-field.vars';
+@use 'text-field.vars' as vars;
+
+@mixin -invalid {
+    $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
     
     @include iro.bem-sibling-elem('bg') {
         inset-block:   $focus-border-offset;
         inset-inline:  $focus-border-offset;
-        border:        fn.dim(--focus --border) solid fn.color(--error --border);
-        border-radius: calc(fn.dim(--rounding) - $focus-border-offset);
+        border:        props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color);
+        border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
     }
 
     &:hover {
         @include iro.bem-sibling-elem('bg') {
-            border-color: fn.color(--error --hover --border);
+            border-color: props.get(vars.$error--hover--border-color);
         }
     }
 
     &:focus {
         @include iro.bem-sibling-elem('bg') {
-            border-color: fn.color(--error --focus --border);
+            border-color: props.get(vars.$error--focus--border-color);
         }
     }
 }
 
-@mixin keyboard-focus {
+@mixin -keyboard-focus {
     @include iro.bem-sibling-elem('bg') {
-        border-color:   fn.color(--key-focus --border);
-        outline:        fn.color(--key-focus --outline) solid fn.dim(--key-focus --border);
-        //outline-offset: fn.dim(--focus --border);
+        border-color:   props.get(vars.$key-focus--border-color);
+        outline:        props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width);
+        //outline-offset: props.get(vars.$focus --border);
     }
 }
 
-@include iro.props-namespace('text-field') {
-    @include iro.props-store((
-        --dims: (
-            --line-height: 1.4,
-            --pad-i:       fn.global-dim(--size --125),
-            --pad-b:       fn.global-dim(--size --125),
-            --border:      fn.global-dim(--border --thin),
-            --rounding:    fn.global-dim(--rounding),
-
-            --extended: (
-                --pad:     fn.global-dim(--size --50),
-            ),
-
-            --focus: (
-                --border:  fn.global-dim(--border --medium),
-            ),
-            
-            --key-focus: (
-                --border: fn.global-dim(--key-focus --outline),
-            ),
-        ),
-        --colors: (
-            --bg:          fn.global-color(--base --50),
-            --placeholder: fn.global-color(--text-mute-more),
-            --text:        fn.global-color(--text),
-            --border:      fn.global-color(--border-strong),
-    
-            --hover: (
-                --border: fn.global-color(--text-mute-more),
-            ),
-            --focus: (
-                --border: fn.global-color(--focus --border),
-            ),
-            --key-focus: (
-                --border:  fn.global-color(--focus --border),
-                --outline: fn.global-color(--focus --outline),
-            ),
-            --error: (
-                --border: fn.global-color(--negative --700),
-    
-                --hover: (
-                    --border: fn.global-color(--negative --900),
-                ),
-                --focus: (
-                    --border: fn.global-color(--negative --900),
-                ),
-            ),
-            --disabled: (
-                --bg:          fn.global-color(--border-mute),
-                --placeholder: fn.global-color(--text-disabled),
-                --text:        fn.global-color(--text-disabled),
-                --border:      fn.global-color(--border-mute),
-            ),
-        ),
-    ));
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
 
-    @include iro.bem-object(iro.props-namespace()) {
-        $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border));
+    @include iro.bem-object('text-field') {
+        $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
         
         position:         relative;
         min-inline-size:  0;
-        background-color: fn.color(--bg);
-        border-radius:    fn.dim(--rounding);
+        background-color: props.get(vars.$bg-color);
+        border-radius:    props.get(vars.$rounding);
 
         @include iro.bem-elem('bg') {
             position:       absolute;
@@ -102,18 +53,18 @@
             inset-inline:   0;
             display:        block;
             pointer-events: none;
-            border:         fn.dim(--border) solid fn.color(--border);
-            border-radius:  fn.dim(--rounding);
+            border:         props.get(vars.$border-width) solid props.get(vars.$border-color);
+            border-radius:  props.get(vars.$rounding);
         }
 
         @include iro.bem-elem('native') {
             box-sizing:       border-box;
             inline-size:      100%;
-            padding-block:    calc(fn.dim(--pad-b) - .5em * (fn.dim(--line-height) - 1));
-            padding-inline:   fn.dim(--pad-i);
+            padding-block:    calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1));
+            padding-inline:   props.get(vars.$pad-i);
             font:             inherit;
-            line-height:      fn.dim(--line-height);
-            color:            fn.color(--text);
+            line-height:      props.get(vars.$line-height);
+            color:            props.get(vars.$text-color);
             appearance:       none;
             resize:           none;
             background-color: transparent;
@@ -121,13 +72,13 @@
 
             &::placeholder {
                 font-style: italic;
-                color:      fn.color(--placeholder);
+                color:      props.get(vars.$placeholder-color);
                 opacity:    1;
             }
 
             &:hover {
                 @include iro.bem-sibling-elem('bg') {
-                    border-color: fn.color(--hover --border);
+                    border-color: props.get(vars.$hover--border-color);
                 }
             }
 
@@ -137,32 +88,32 @@
                 @include iro.bem-sibling-elem('bg') {
                     inset-block:   $focus-border-offset;
                     inset-inline:  $focus-border-offset;
-                    border:        fn.dim(--focus --border) solid fn.color(--focus --border);
-                    border-radius: calc(fn.dim(--rounding) - $focus-border-offset);
+                    border:        props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color);
+                    border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
                 }
             }
 
             &:invalid {
-                @include invalid;
+                @include -invalid;
             }
 
             &:focus-visible,
             &:invalid:focus-visible {
-                @include keyboard-focus;
+                @include -keyboard-focus;
             }
         }
 
         @include iro.bem-modifier('extended') {
-            padding: fn.dim(--extended --pad);
+            padding: props.get(vars.$extended--pad);
 
             @include iro.bem-multi('&', 'elem' 'bg') {
-                border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad));
+                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad));
             }
 
             @include iro.bem-elem('native') {
                 &:focus {
                     @include iro.bem-sibling-elem('bg') {
-                        border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad) - $focus-border-offset);
+                        border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset);
                     }
                 }
             }
@@ -170,33 +121,33 @@
 
         @include iro.bem-is('invalid') {
             @include iro.bem-elem('native') {
-                @include invalid;
+                @include -invalid;
 
                 &:focus-visible {
-                    @include keyboard-focus;
+                    @include -keyboard-focus;
                 }
             }
         }
 
         @include iro.bem-is('disabled') {
-            background-color: fn.color(--disabled --bg);
+            background-color: props.get(vars.$disabled--bg-color);
 
             @include iro.bem-elem('native') {
-                color: fn.color(--disabled --text);
+                color: props.get(vars.$disabled--text-color);
 
                 &::placeholder {
-                    color: fn.color(--disabled --placeholder);
+                    color: props.get(vars.$disabled--placeholder-color);
                 }
             }
 
             @include iro.bem-elem('bg') {
-                border-color: fn.color(--disabled --border);
+                border-color: props.get(vars.$disabled--border-color);
             }
 
             @include iro.bem-is('invalid') {
                 @include iro.bem-elem('native') {
                     @include iro.bem-sibling-elem('bg') {
-                        border-color: fn.color(--disabled --border);
+                        border-color: props.get(vars.$disabled--border-color);
                     }
                 }
             }
@@ -204,7 +155,7 @@
             @include iro.bem-elem('native') {
                 &:invalid {
                     @include iro.bem-sibling-elem('bg') {
-                        border-color: fn.color(--disabled --border);
+                        border-color: props.get(vars.$disabled--border-color);
                     }
                 }
             }