1 files changed, 18 insertions, 35 deletions

diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
index 067c00c..825f7ce 100644
--- a/src/objects/_alert.scss
+++ b/src/objects/_alert.scss
@@ -1,42 +1,25 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@use 'sass:map';
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
 
-$themes: 'accent' 'positive' 'negative' 'warning' !default;
+@forward 'alert.vars';
+@use 'alert.vars' as vars;
 
-@include iro.props-namespace('alert') {
-    @include iro.props-store((
-        --dims: (
-            --border:   fn.global-dim(--border --medium),
-            --pad-i:    fn.global-dim(--size --250),
-            --pad-b:    fn.global-dim(--size --200),
-            --rounding: fn.global-dim(--rounding),
-        ),
-        --colors: (
-            --bg:     fn.global-color(--bg-l2),
-            --border: fn.global-color(--text-mute-more),
-        ),
-    ));
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
 
-    @each $theme in $themes {
-        @include iro.props-store((
-            --colors: (
-                --#{$theme}: (
-                    --border: fn.global-color(--#{$theme} --700),
-                ),
-            ),
-        ));
-    }
-
-    @include iro.bem-object(iro.props-namespace()) {
-        padding-block:    fn.dim(--pad-b);
-        padding-inline:   fn.dim(--pad-i);
-        border:           fn.dim(--border) solid fn.color(--border);
-        border-radius:    fn.dim(--rounding);
-        background-color: fn.color(--bg);
+    @include bem.object('alert') {
+        padding-block:    props.get(vars.$pad-b);
+        padding-inline:   props.get(vars.$pad-i);
+        background-color: props.get(vars.$bg-color);
+        border:           props.get(vars.$border-width) solid props.get(vars.$border-color);
+        border-radius:    props.get(vars.$rounding);
 
-        @each $theme in $themes {
-            @include iro.bem-modifier($theme) {
-                border-color: fn.color(--#{$theme} --border);
+        @each $mod, $theme in vars.$themes-config {
+            @include bem.modifier($mod) {
+                border-color: props.get(vars.$themes, $theme, --border-color);
             }
         }
     }