From 6448b40f6224b271acb6010cac0672dec4755341 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 19 Oct 2024 08:51:30 +0200 Subject: Update --- src/objects/_divider.scss | 132 ++++++++++++---------------------------------- 1 file changed, 35 insertions(+), 97 deletions(-) (limited to 'src/objects/_divider.scss') diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss index 7d96206..122da78 100644 --- a/src/objects/_divider.scss +++ b/src/objects/_divider.scss @@ -1,89 +1,27 @@ @use 'sass:map'; +@use 'sass:meta'; +@use 'sass:string'; @use 'iro-sass/src/iro-sass' as iro; -@use '../functions' as fn; -@use '../config'; +@use '../props'; +@use '../core.vars' as core; -$static-themes: 'black' 'white' !default; +@forward 'divider.vars'; +@use 'divider.vars' as vars; -@include iro.props-namespace('divider') { - @include iro.props-store(( - --dims: ( - --margin-b: fn.global-dim(--size --85), - - --strong: ( - --border: fn.global-dim(--border --thick), - --label-font-size: fn.global-dim(--font-size --100), - ), - --medium: ( - --border: fn.global-dim(--border --medium), - --label-font-size: fn.global-dim(--font-size --75), - ), - --faint: ( - --border: fn.global-dim(--border --thin), - --label-font-size: fn.global-dim(--font-size --50), - ), - ), - --colors: ( - --strong: ( - --bg: fn.global-color(--text), - --label: fn.global-color(--text), - ), - --medium: ( - --bg: fn.global-color(--border), - --label: fn.global-color(--text-mute), - ), - --faint: ( - --bg: fn.global-color(--border), - --label: fn.global-color(--text-mute-more), - ), - ), - )); - - @each $color in map.keys(map.get(config.$themes, config.$theme-default, --palettes)) { - @if $color != '--base' { - @include iro.props-store(( - --colors: ( - $color: ( - --bg: fn.global-color($color --800), - --label: fn.global-color($color --1000), - ) - ), - )); - } - } - - @each $theme in $static-themes { - @include iro.props-store(( - --colors: ( - --static-#{$theme}: ( - --strong: ( - --bg: fn.global-color(--#{$theme}-transparent --800), - --label: fn.global-color(--#{$theme}-transparent --900), - ), - --medium: ( - --bg: fn.global-color(--#{$theme}-transparent --300), - --label: fn.global-color(--#{$theme}-transparent --500), - ), - --faint: ( - --bg: fn.global-color(--#{$theme}-transparent --300), - --label: fn.global-color(--#{$theme}-transparent --500), - ), - ) - ), - )); - } +@mixin styles { + @include props.materialize(meta.module-variables('vars')); - @include iro.bem-object(iro.props-namespace()) { + @include iro.bem-object('divider') { display: flex; flex: 0 0 auto; flex-direction: row; align-items: center; block-size: 1em; - margin-block: fn.dim(--margin-b); - font-size: fn.dim(--strong --label-font-size); + margin-block: props.get(vars.$margin-b); + font-size: props.get(vars.$strong--label-font-size); font-weight: 700; line-height: 1; - color: fn.color(--strong --label); + color: props.get(vars.$strong--label-color); text-transform: uppercase; letter-spacing: .5px; @@ -91,9 +29,9 @@ $static-themes: 'black' 'white' !default; &::after { flex: 1 1 auto; inline-size: 100%; - block-size: fn.dim(--strong --border); + block-size: props.get(vars.$strong--border-width); content: ''; - background-color: fn.color(--strong --bg); + background-color: props.get(vars.$strong--bg-color); } &::before { @@ -109,7 +47,7 @@ $static-themes: 'black' 'white' !default; inline-size: 1px; block-size: auto; margin-block: 0; - background-color: fn.color(--faint --bg); + background-color: props.get(vars.$faint--bg-color); &::before, &::after { @@ -118,26 +56,26 @@ $static-themes: 'black' 'white' !default; } @include iro.bem-modifier('medium') { - font-size: fn.dim(--medium --label-font-size); + font-size: props.get(vars.$medium--label-font-size); font-weight: 500; - color: fn.color(--medium --label); + color: props.get(vars.$medium--label-color); &::before, &::after { - block-size: fn.dim(--medium --border); - background-color: fn.color(--medium --bg); + block-size: props.get(vars.$medium--border-width); + background-color: props.get(vars.$medium--bg-color); } } @include iro.bem-modifier('faint') { - font-size: fn.dim(--faint --label-font-size); + font-size: props.get(vars.$faint--label-font-size); font-weight: 500; - color: fn.color(--faint --label); + color: props.get(vars.$faint--label-color); &::before, &::after { - block-size: fn.dim(--faint --border); - background-color: fn.color(--faint --bg); + block-size: props.get(vars.$faint--border-width); + background-color: props.get(vars.$faint--bg-color); } } @@ -152,49 +90,49 @@ $static-themes: 'black' 'white' !default; } } - @each $color in 'blue' 'purple' 'red' 'green' 'yellow' { - @include iro.bem-modifier($color) { + @each $theme in map.keys(props.get(vars.$themes)) { + @include iro.bem-modifier(string.slice($theme, 3)) { &::before, &::after { - background-color: fn.color(--#{$color} --bg); + background-color: props.get(vars.$themes, $theme, --bg); } @include iro.bem-elem('label') { - color: fn.color(--#{$color} --label); + color: props.get(vars.$themes, $theme, --label); } } } - @each $theme in $static-themes { - @include iro.bem-modifier(static-#{$theme}) { + @each $theme in map.keys(props.get(vars.$static-themes)) { + @include iro.bem-modifier(string.slice($theme, 3)) { &::before, &::after { - background-color: fn.color(--static-#{$theme} --strong --bg); + background-color: props.get(vars.$static-themes, $theme, --strong, --bg); } @include iro.bem-elem('label') { - color: fn.color(--static-#{$theme} --strong --label); + color: props.get(vars.$static-themes, $theme, --strong, --label); } @include iro.bem-modifier('medium') { &::before, &::after { - background-color: fn.color(--static-#{$theme} --medium --bg); + background-color: props.get(vars.$static-themes, $theme, --medium, --bg); } @include iro.bem-elem('label') { - color: fn.color(--static-#{$theme} --medium --label); + color: props.get(vars.$static-themes, $theme, --medium, --label); } } @include iro.bem-modifier('faint') { &::before, &::after { - background-color: fn.color(--static-#{$theme} --faint --bg); + background-color: props.get(vars.$static-themes, $theme, --faint, --bg); } @include iro.bem-elem('label') { - color: fn.color(--static-#{$theme} --faint --label); + color: props.get(vars.$static-themes, $theme, --faint, --label); } } } -- cgit v1.3.1