1 files changed, 40 insertions, 37 deletions

diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
index 067c00c..e6abc62 100644
--- a/src/objects/_alert.scss
+++ b/src/objects/_alert.scss
@@ -1,43 +1,46 @@
-@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 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 transparent;
+                border-color:     props.get(vars.$border-color);
+                border-radius:    props.get(vars.$rounding);
+                box-shadow:
+                        props.get(vars.$shadow-x)
+                        props.get(vars.$shadow-y)
+                        props.get(vars.$shadow-blur)
+                        props.get(vars.$shadow-grow)
+                        props.get(vars.$shadow-color);
 
-    @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);
+                &::before {
+                        display:       block;
+                        margin-block:  -100em 100em;
+                        content:       '';
+                }
 
-        @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) {
+                                background-color: props.get(vars.$themes, $theme, --bg-color);
+                                border-color: props.get(vars.$themes, $theme, --border-color);
+                                box-shadow:
+                                        props.get(vars.$shadow-x)
+                                        props.get(vars.$shadow-y)
+                                        props.get(vars.$shadow-blur)
+                                        props.get(vars.$shadow-grow)
+                                        props.get(vars.$themes, $theme, --shadow-color);
+                        }
+                }
+        }
 }