From e3d34a6d6ce2db04c3c898ad6a4687a0c59df996 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 18 Oct 2024 19:07:42 +0200 Subject: Update --- src/objects/_alert.scss | 50 ++++++++++++++++--------------------------------- 1 file changed, 16 insertions(+), 34 deletions(-) (limited to 'src/objects/_alert.scss') diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss index 774b443..651ad23 100644 --- a/src/objects/_alert.scss +++ b/src/objects/_alert.scss @@ -1,42 +1,24 @@ +@use 'sass:map'; +@use 'sass:meta'; @use 'iro-sass/src/iro-sass' as iro; -@use '../functions' as fn; +@use '../props'; -$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 props.materialize(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); - background-color: fn.color(--bg); - border: fn.dim(--border) solid fn.color(--border); - border-radius: fn.dim(--rounding); + @include iro.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 { + @include iro.bem-modifier($mod) { + border-color: props.get(vars.$populated-themes, $theme, --border-color); } } } -- cgit v1.2.3-70-g09d2