1 files changed, 33 insertions, 43 deletions

diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss
index 1518ea6..564ab2b 100644
--- a/src/objects/_field-label.scss
+++ b/src/objects/_field-label.scss
@@ -1,84 +1,74 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
 
-@include iro.props-namespace('field-label') {
-    @include iro.props-store((
-        --dims: (
-            --spacing-i:       fn.global-dim(--size --150),
-            --spacing-b:       fn.global-dim(--size --85),
-            --label-font-size: fn.global-dim(--font-size --75),
-            --hint-font-size:  fn.global-dim(--font-size --75),
-        ),
-        --colors: (
-            --label:      fn.global-color(--text-mute),
-            --hint:       fn.global-color(--text-mute),
-            --error-hint: fn.global-color(--negative --900),
-            --disabled:   fn.global-color(--text-disabled),
-        ),
-    ));
+@forward 'field-label.vars';
+@use 'field-label.vars' as vars;
 
-    @include iro.bem-object(iro.props-namespace()) {
-        display: block;
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
 
-        @include iro.bem-elem('label') {
+    @include bem.object('field-label') {
+        @include bem.elem('label') {
             display:            block;
             flex:               0 0 auto;
-            padding-inline-end: fn.dim(--spacing-i);
-            color:              fn.color(--label);
-            font-size:          fn.dim(--label-font-size);
+            padding-inline-end: props.get(vars.$spacing-i);
+            font-size:          props.get(vars.$label-font-size);
             font-weight:        400;
             line-height:        1.3;
+            color:              props.get(vars.$label-color);
     
-            @include iro.bem-next-elem('content') {
-                margin-block-start: fn.dim(--spacing-b);
+            @include bem.next-elem('content') {
+                margin-block-start: props.get(vars.$spacing-b);
             }
         }
     
-        @include iro.bem-elem('content') {
+        @include bem.elem('content') {
             display: block;
             flex:    1 1 auto;
         }
     
-        @include iro.bem-elem('hint') {
+        @include bem.elem('hint') {
             display:            block;
-            margin-block-start: fn.dim(--spacing-b);
-            color:              fn.color(--hint);
-            font-size:          fn.dim(--hint-font-size);
+            margin-block-start: props.get(vars.$spacing-b);
+            font-size:          props.get(vars.$hint-font-size);
+            color:              props.get(vars.$hint-color);
         }
     
-        @include iro.bem-is('invalid') {
-            @include iro.bem-elem('hint') {
-                color: fn.color(--error-hint);
+        @include bem.is('invalid') {
+            @include bem.elem('hint') {
+                color: props.get(vars.$error-hint-color);
             }
         }
     
-        @include iro.bem-is('disabled') {
-            @include iro.bem-elem('label', 'hint') {
-                color: fn.color(--disabled);
+        @include bem.is('disabled') {
+            @include bem.elem('label', 'hint') {
+                color: props.get(vars.$disabled-color);
             }
         }
     
-        @include iro.bem-modifier('align-start', 'align-end') {
+        @include bem.modifier('align-start', 'align-end') {
             display:     flex;
             align-items: baseline;
     
-            @include iro.bem-elem('label') {
+            @include bem.elem('label') {
                 display: inline-block;
     
-                @include iro.bem-next-elem('content') {
+                @include bem.next-elem('content') {
                     margin-block-start: 0;
                 }
             }
         }
     
-        @include iro.bem-modifier('align-start') {
-            @include iro.bem-elem('label') {
+        @include bem.modifier('align-start') {
+            @include bem.elem('label') {
                 text-align: start;
             }
         }
     
-        @include iro.bem-modifier('align-end') {
-            @include iro.bem-elem('label') {
+        @include bem.modifier('align-end') {
+            @include bem.elem('label') {
                 text-align: end;
             }
         }