From d94b62be5d36acecbd9f8e50ba4a8011856b28cd Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 24 Jun 2024 22:05:17 +0200 Subject: Add static divider styles --- src/objects/_divider.scss | 58 ++++++++++++++++++++++++++++++++++++++++++++++ tpl/views/divider.pug | 59 ++++++++++++++++------------------------------- 2 files changed, 78 insertions(+), 39 deletions(-) diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss index 5e80de4..29ab537 100644 --- a/src/objects/_divider.scss +++ b/src/objects/_divider.scss @@ -3,6 +3,8 @@ @use '../functions' as fn; @use '../config'; +$static-themes: 'black' 'white'; + @include iro.props-namespace('divider') { @include iro.props-store(( --dims: ( @@ -50,6 +52,27 @@ } } + @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), + ), + ) + ), + )); + } + @include iro.bem-object(iro.props-namespace()) { display: flex; flex-direction: row; @@ -140,5 +163,40 @@ } } } + + @each $theme in $static-themes { + @include iro.bem-modifier(static-#{$theme}) { + &::before, + &::after { + background-color: fn.color(--static-#{$theme} --strong --bg); + } + + @include iro.bem-elem('label') { + color: fn.color(--static-#{$theme} --strong --label); + } + + @include iro.bem-modifier('medium') { + &::before, + &::after { + background-color: fn.color(--static-#{$theme} --medium --bg); + } + + @include iro.bem-elem('label') { + color: fn.color(--static-#{$theme} --medium --label); + } + } + + @include iro.bem-modifier('faint') { + &::before, + &::after { + background-color: fn.color(--static-#{$theme} --faint --bg); + } + + @include iro.bem-elem('label') { + color: fn.color(--static-#{$theme} --faint --label); + } + } + } + } } } diff --git a/tpl/views/divider.pug b/tpl/views/divider.pug index 43a538c..ee7b372 100644 --- a/tpl/views/divider.pug +++ b/tpl/views/divider.pug @@ -23,42 +23,23 @@ mixin view-divider +divider('medium') +divider('faint') - .c-box - +divider('strong')(color='blue')= 'Strong' - +divider('medium')(color='blue')= 'Medium' - +divider('faint')(color='blue')= 'Faint' - +divider('strong')(color='blue') - +divider('medium')(color='blue') - +divider('faint')(color='blue') - - .c-box - +divider('strong')(color='purple')= 'Strong' - +divider('medium')(color='purple')= 'Medium' - +divider('faint')(color='purple')= 'Faint' - +divider('strong')(color='purple') - +divider('medium')(color='purple') - +divider('faint')(color='purple') - - .c-box - +divider('strong')(color='red')= 'Strong' - +divider('medium')(color='red')= 'Medium' - +divider('faint')(color='red')= 'Faint' - +divider('strong')(color='red') - +divider('medium')(color='red') - +divider('faint')(color='red') - - .c-box - +divider('strong')(color='green')= 'Strong' - +divider('medium')(color='green')= 'Medium' - +divider('faint')(color='green')= 'Faint' - +divider('strong')(color='green') - +divider('medium')(color='green') - +divider('faint')(color='green') - - .c-box - +divider('strong')(color='yellow')= 'Strong' - +divider('medium')(color='yellow')= 'Medium' - +divider('faint')(color='yellow')= 'Faint' - +divider('strong')(color='yellow') - +divider('medium')(color='yellow') - +divider('faint')(color='yellow') + each theme in ['blue', 'purple', 'red', 'green', 'yellow'] + .c-box + +divider('strong')(color=theme)= 'Strong' + +divider('medium')(color=theme)= 'Medium' + +divider('faint')(color=theme)= 'Faint' + +divider('strong')(color=theme) + +divider('medium')(color=theme) + +divider('faint')(color=theme) + + each theme in ['static-black', 'static-white'] + - + const bg = theme.startsWith('static-black') ? 500 : 1000; + + .c-box(style=`background-color: var(--colors--blue-static--${bg});`) + +divider('strong')(color=theme)= 'Strong' + +divider('medium')(color=theme)= 'Medium' + +divider('faint')(color=theme)= 'Faint' + +divider('strong')(color=theme) + +divider('medium')(color=theme) + +divider('faint')(color=theme) -- cgit v1.2.3-70-g09d2