From 3799950b0a869aee0e2725a8aafbb53c26723942 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 19 Oct 2024 14:46:06 +0200 Subject: Update --- src/objects/_status-indicator.scss | 42 ++++++++++++++------------------------ 1 file changed, 15 insertions(+), 27 deletions(-) (limited to 'src/objects/_status-indicator.scss') 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); } } } -- cgit v1.3.1