Update

1 files changed, 33 insertions, 55 deletions

diff --git a/src/objects/_table.scss b/src/objects/_table.scss
index 5b16d66..d5b5545 100644
--- a/src/objects/_table.scss
+++ b/src/objects/_table.scss
@@ -1,33 +1,14 @@
+@use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
-@use '../mixins' as mx;
+@use '../props';
 
-@include iro.props-namespace('table') {
-    @include iro.props-store((
-        --dims: (
-            --pad-i:    fn.global-dim(--size --175),
-            --pad-b:    fn.global-dim(--size --125),
-            --rounding: fn.global-dim(--rounding),
-            --border:   fn.global-dim(--border --thin),
+@forward 'table.vars';
+@use 'table.vars' as vars;
 
-            --sm: (
-                --pad-b: fn.global-dim(--size --75),
-            )
-        ),
-        --colors: (
-            --border:   fn.global-color(--border),
-            --heading:  fn.global-color(--heading),
-            --hover:    fn.global-color(--border-mute),
-            --active:   fn.global-color(--border),
-            --box: (
-                --bg:     fn.global-color(--base --50),
-                --hover:  fn.global-color(--bg-base),
-                --active: fn.global-color(--border-mute),
-            )
-        )
-    ));
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
 
-    @include iro.bem-object(iro.props-namespace()) {
+    @include iro.bem-object('table') {
         border-spacing:  0;
         border-collapse: separate;
 
@@ -36,37 +17,34 @@
         }
 
         @include iro.bem-elem('head-cell') {
-            @include mx.set-font(--standard, (
-                --line-height: null,
-                --size:        fn.global-dim(--font-size --50),
-                --weight:      bold,
-                --transform:   uppercase,
-                --spacing:     .5px
-            ));
-            padding-block:  fn.dim(--pad-b);
-
-            padding-inline: fn.dim(--pad-i);
-            color:          fn.color(--heading);
+            padding-block:  props.get(vars.$pad-b);
+            padding-inline: props.get(vars.$pad-i);
+            font-family:    props.get(vars.$heading--font-family);
+            font-size:      props.get(vars.$heading--font-size);
+            font-weight:    props.get(vars.$heading--font-weight);
+            color:          props.get(vars.$heading-color);
             text-align:     start;
+            text-transform: props.get(vars.$heading--text-transform);
+            letter-spacing: props.get(vars.$heading--letter-spacing);
         }
 
         @include iro.bem-elem('cell') {
-            padding-block:            fn.dim(--pad-b);
-            padding-inline:           fn.dim(--pad-i);
-            border-color:             fn.color(--border);
+            padding-block:            props.get(vars.$pad-b);
+            padding-inline:           props.get(vars.$pad-i);
+            border-color:             props.get(vars.$border-color);
             border-style:             solid;
             border-width:             0;
-            border-block-start-width: fn.dim(--border);
+            border-block-start-width: props.get(vars.$border-width);
 
             @include iro.bem-modifier('divider') {
-                border-inline-end-width: fn.dim(--border);
+                border-inline-end-width: props.get(vars.$border-width);
             }
         }
 
         @include iro.bem-elem('row') {
             &:last-child {
                 @include iro.bem-elem('cell') {
-                    border-block-end-width: fn.dim(--border);
+                    border-block-end-width: props.get(vars.$border-width);
                 }
             }
         }
@@ -85,14 +63,14 @@
 
         @include iro.bem-modifier('box') {
             @include iro.bem-elem('cell') {
-                background-color: fn.color(--box --bg);
+                background-color: props.get(vars.$box--bg-color);
             
                 &:first-child {
-                    border-inline-start-width: fn.dim(--border);
+                    border-inline-start-width: props.get(vars.$border-width);
                 }
             
                 &:last-child {
-                    border-inline-end-width: fn.dim(--border);
+                    border-inline-end-width: props.get(vars.$border-width);
                 }
             }
     
@@ -100,11 +78,11 @@
                 &:first-child {
                     @include iro.bem-elem('cell') {
                         &:first-child {
-                            border-start-start-radius: fn.dim(--rounding);
+                            border-start-start-radius: props.get(vars.$rounding);
                         }
             
                         &:last-child {
-                            border-start-end-radius: fn.dim(--rounding);
+                            border-start-end-radius: props.get(vars.$rounding);
                         }
                     }
                 }
@@ -112,11 +90,11 @@
                 &:last-child {
                     @include iro.bem-elem('cell') {
                         &:first-child {
-                            border-end-start-radius: fn.dim(--rounding);
+                            border-end-start-radius: props.get(vars.$rounding);
                         }
             
                         &:last-child {
-                            border-end-end-radius: fn.dim(--rounding);
+                            border-end-end-radius: props.get(vars.$rounding);
                         }
                     }
                 }
@@ -131,13 +109,13 @@
 
                 &:hover {
                     @include iro.bem-elem('cell') {
-                        background-color: fn.color(--hover);
+                        background-color: props.get(vars.$hover--bg-color);
                     }
                 }
     
                 &:active {
                     @include iro.bem-elem('cell') {
-                        background-color: fn.color(--active);
+                        background-color: props.get(vars.$active--bg-color);
                     }
                 }
             }
@@ -146,13 +124,13 @@
                 @include iro.bem-elem('row') {
                     &:hover {
                         @include iro.bem-elem('cell') {
-                            background-color: fn.color(--box --hover);
+                            background-color: props.get(vars.$box--hover--bg-color);
                         }
                     }
         
                     &:active {
                         @include iro.bem-elem('cell') {
-                            background-color: fn.color(--box --active);
+                            background-color: props.get(vars.$box--active--bg-color);
                         }
                     }
                 }
@@ -161,7 +139,7 @@
 
         @include iro.bem-modifier('sm') {
             @include iro.bem-elem('head-cell', 'cell') {
-                padding-block: fn.dim(--sm --pad-b);
+                padding-block: props.get(vars.$pad-b--sm);
             }
         }
     }