1 files changed, 15 insertions, 27 deletions

diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index ce1794a..2555894 100644
--- a/src/objects/_status-indicator.scss
+++ b/src/objects/_status-indicator.scss
@@ -1,38 +1,26 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
+@use '../props';
 
-$themes: 'accent' 'positive' 'negative' 'warning' !default;
+@forward 'status-indicator.vars';
+@use 'status-indicator.vars' as vars;
 
-@include iro.props-namespace('status-indicator') {
-    @include iro.props-store((
-        --dims: (
-            --size: fn.global-dim(--size --125),
-        ),
-        --colors: (
-            --default: fn.global-color(--border-strong),
-            --primary: fn.global-color(--text),
-        ),
-    ));
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
 
-    @each $theme in $themes {
-        @include iro.props-store((
-            --colors: (
-                --#{$theme}: fn.global-color(--#{$theme} --700),
-            ),
-        ));
-    }
-
-    @include iro.bem-object(iro.props-namespace()) {
+    @include iro.bem-object('status-indicator') {
         display:          inline-block;
-        inline-size:      fn.dim(--size);
-        block-size:       fn.dim(--size);
+        inline-size:      props.get(vars.$size);
+        block-size:       props.get(vars.$size);
         vertical-align:   middle;
-        background-color: fn.color(--default);
+        background-color: props.get(vars.$default);
         border-radius:    10em;
 
-        @each $theme in $themes {
-            @include iro.bem-is($theme) {
-                background-color: fn.color(--#{$theme});
+        @each $theme in map.keys(props.get(vars.$themes)) {
+            @include iro.bem-is(string.slice($theme, 3)) {
+                background-color: props.get(vars.$themes, $theme);
             }
         }
     }