1 files changed, 35 insertions, 97 deletions

diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 7d96206..122da78 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -1,89 +1,27 @@
 @use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
-@use '../config';
+@use '../props';
+@use '../core.vars' as core;
 
-$static-themes: 'black' 'white' !default;
+@forward 'divider.vars';
+@use 'divider.vars' as vars;
 
-@include iro.props-namespace('divider') {
-    @include iro.props-store((
-        --dims: (
-            --margin-b: fn.global-dim(--size --85),
-    
-            --strong: (
-                --border:          fn.global-dim(--border --thick),
-                --label-font-size: fn.global-dim(--font-size --100),
-            ),
-            --medium: (
-                --border:          fn.global-dim(--border --medium),
-                --label-font-size: fn.global-dim(--font-size --75),
-            ),
-            --faint: (
-                --border:          fn.global-dim(--border --thin),
-                --label-font-size: fn.global-dim(--font-size --50),
-            ),
-        ),
-        --colors: (
-            --strong: (
-                --bg:    fn.global-color(--text),
-                --label: fn.global-color(--text),
-            ),
-            --medium: (
-                --bg:    fn.global-color(--border),
-                --label: fn.global-color(--text-mute),
-            ),
-            --faint: (
-                --bg:    fn.global-color(--border),
-                --label: fn.global-color(--text-mute-more),
-            ),
-        ),
-    ));
-
-    @each $color in map.keys(map.get(config.$themes, config.$theme-default, --palettes)) {
-        @if $color != '--base' {
-            @include iro.props-store((
-                --colors: (
-                    $color: (
-                        --bg:    fn.global-color($color --800),
-                        --label: fn.global-color($color --1000),
-                    )
-                ),
-            ));
-        }
-    }
-
-    @each $theme in $static-themes {
-        @include iro.props-store((
-            --colors: (
-                --static-#{$theme}: (
-                    --strong: (
-                        --bg:    fn.global-color(--#{$theme}-transparent --800),
-                        --label: fn.global-color(--#{$theme}-transparent --900),
-                    ),
-                    --medium: (
-                        --bg:    fn.global-color(--#{$theme}-transparent --300),
-                        --label: fn.global-color(--#{$theme}-transparent --500),
-                    ),
-                    --faint: (
-                        --bg:    fn.global-color(--#{$theme}-transparent --300),
-                        --label: fn.global-color(--#{$theme}-transparent --500),
-                    ),
-                )
-            ),
-        ));
-    }
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
 
-    @include iro.bem-object(iro.props-namespace()) {
+    @include iro.bem-object('divider') {
         display:        flex;
         flex:           0 0 auto;
         flex-direction: row;
         align-items:    center;
         block-size:     1em;
-        margin-block:   fn.dim(--margin-b);
-        font-size:      fn.dim(--strong --label-font-size);
+        margin-block:   props.get(vars.$margin-b);
+        font-size:      props.get(vars.$strong--label-font-size);
         font-weight:    700;
         line-height:    1;
-        color:          fn.color(--strong --label);
+        color:          props.get(vars.$strong--label-color);
         text-transform: uppercase;
         letter-spacing: .5px;
 
@@ -91,9 +29,9 @@ $static-themes: 'black' 'white' !default;
         &::after {
             flex:             1 1 auto;
             inline-size:      100%;
-            block-size:       fn.dim(--strong --border);
+            block-size:       props.get(vars.$strong--border-width);
             content:          '';
-            background-color: fn.color(--strong --bg);
+            background-color: props.get(vars.$strong--bg-color);
         }
 
         &::before {
@@ -109,7 +47,7 @@ $static-themes: 'black' 'white' !default;
             inline-size:      1px;
             block-size:       auto;
             margin-block:     0;
-            background-color: fn.color(--faint --bg);
+            background-color: props.get(vars.$faint--bg-color);
 
             &::before,
             &::after {
@@ -118,26 +56,26 @@ $static-themes: 'black' 'white' !default;
         }
 
         @include iro.bem-modifier('medium') {
-            font-size:   fn.dim(--medium --label-font-size);
+            font-size:   props.get(vars.$medium--label-font-size);
             font-weight: 500;
-            color:       fn.color(--medium --label);
+            color:       props.get(vars.$medium--label-color);
 
             &::before,
             &::after {
-                block-size:       fn.dim(--medium --border);
-                background-color: fn.color(--medium --bg);
+                block-size:       props.get(vars.$medium--border-width);
+                background-color: props.get(vars.$medium--bg-color);
             }
         }
 
         @include iro.bem-modifier('faint') {
-            font-size:   fn.dim(--faint --label-font-size);
+            font-size:   props.get(vars.$faint--label-font-size);
             font-weight: 500;
-            color:       fn.color(--faint --label);
+            color:       props.get(vars.$faint--label-color);
 
             &::before,
             &::after {
-                block-size:       fn.dim(--faint --border);
-                background-color: fn.color(--faint --bg);
+                block-size:       props.get(vars.$faint--border-width);
+                background-color: props.get(vars.$faint--bg-color);
             }
         }
 
@@ -152,49 +90,49 @@ $static-themes: 'black' 'white' !default;
             }
         }
 
-        @each $color in 'blue' 'purple' 'red' 'green' 'yellow' {
-            @include iro.bem-modifier($color) {
+        @each $theme in map.keys(props.get(vars.$themes)) {
+            @include iro.bem-modifier(string.slice($theme, 3)) {
                 &::before,
                 &::after {
-                    background-color: fn.color(--#{$color} --bg);
+                    background-color: props.get(vars.$themes, $theme, --bg);
                 }
 
                 @include iro.bem-elem('label') {
-                    color: fn.color(--#{$color} --label);
+                    color: props.get(vars.$themes, $theme, --label);
                 }
             }
         }
 
-        @each $theme in $static-themes {
-            @include iro.bem-modifier(static-#{$theme}) {
+        @each $theme in map.keys(props.get(vars.$static-themes)) {
+            @include iro.bem-modifier(string.slice($theme, 3)) {
                 &::before,
                 &::after {
-                    background-color: fn.color(--static-#{$theme} --strong --bg);
+                    background-color: props.get(vars.$static-themes, $theme, --strong, --bg);
                 }
 
                 @include iro.bem-elem('label') {
-                    color: fn.color(--static-#{$theme} --strong --label);
+                    color: props.get(vars.$static-themes, $theme, --strong, --label);
                 }
 
                 @include iro.bem-modifier('medium') {
                     &::before,
                     &::after {
-                        background-color: fn.color(--static-#{$theme} --medium --bg);
+                        background-color: props.get(vars.$static-themes, $theme, --medium, --bg);
                     }
     
                     @include iro.bem-elem('label') {
-                        color: fn.color(--static-#{$theme} --medium --label);
+                        color: props.get(vars.$static-themes, $theme, --medium, --label);
                     }
                 }
     
                 @include iro.bem-modifier('faint') {
                     &::before,
                     &::after {
-                        background-color: fn.color(--static-#{$theme} --faint --bg);
+                        background-color: props.get(vars.$static-themes, $theme, --faint, --bg);
                     }
     
                     @include iro.bem-elem('label') {
-                        color: fn.color(--static-#{$theme} --faint --label);
+                        color: props.get(vars.$static-themes, $theme, --faint, --label);
                     }
                 }
             }