From b566769679473b91d2f63406fba7cc3b44c4fcc1 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 25 Jun 2024 11:11:05 +0200 Subject: Update --- src/objects/_badge.scss | 165 +++++++++++++++++++++++++++++++++++------------- 1 file changed, 120 insertions(+), 45 deletions(-) (limited to 'src/objects/_badge.scss') diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index 6a984bf..b9020b6 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss @@ -1,7 +1,60 @@ +@use 'sass:string'; @use 'iro-sass/src/index' as iro; @use '../functions' as fn; -$themes: accent positive negative warning; +$themes: 'accent' 'positive' 'negative' 'warning' !default; +$static-themes: 'black' 'white' !default; + +@mixin theme($theme) { + background-color: fn.color(--#{$theme} --bg); + color: fn.color(--#{$theme} --label); + + &:link, + &:visited, + &:enabled { + &:hover { + background-color: fn.color(--#{$theme} --hover --bg); + color: fn.color(--#{$theme} --hover --label); + } + + &:active { + background-color: fn.color(--#{$theme} --active --bg); + color: fn.color(--#{$theme} --active --label); + } + } + + @include iro.bem-modifier('quiet') { + background-color: fn.color(--#{$theme}-quiet --bg); + color: fn.color(--#{$theme}-quiet --label); + + &:link, + &:visited, + &:enabled { + &:hover { + background-color: fn.color(--#{$theme}-quiet --hover --bg); + color: fn.color(--#{$theme}-quiet --hover --label); + } + + &:active { + background-color: fn.color(--#{$theme}-quiet --active --bg); + color: fn.color(--#{$theme}-quiet --active --label); + } + } + } + + @if string.slice($theme, 1, 7) == 'static-' { + &:link, + &:visited, + &:enabled { + &:focus-visible { + border-color: fn.color(--#{$theme} --key-focus --border); + outline: fn.color(--#{$theme} --key-focus --outline) solid fn.dim(--key-focus --outline); + background-color: fn.color(--#{$theme} --key-focus --bg); + color: fn.color(--#{$theme} --key-focus --label); + } + } + } +} @include iro.props-namespace('badge') { @include iro.props-store(( @@ -32,7 +85,8 @@ $themes: accent positive negative warning; ), --key-focus: ( - --border: fn.global-dim(--key-focus --border), + --border: fn.global-dim(--border --medium), + --outline: fn.global-dim(--key-focus --border), ), ), --colors: ( @@ -45,9 +99,10 @@ $themes: accent positive negative warning; --bg: fn.global-color(--heading), ), --key-focus: ( - --bg: fn.global-color(--base --50), - --label: fn.global-color(--heading), - --border: fn.global-color(--focus-static --400), + --bg: fn.global-color(--base --50), + --label: fn.global-color(--heading), + --border: fn.global-color(--focus --1100), + --outline: fn.global-color(--focus --400), ), --quiet: ( @@ -70,10 +125,12 @@ $themes: accent positive negative warning; --bg: fn.global-color(--#{$theme}-static --900), --label: fn.global-color(--#{$theme}-static --900-text), --hover: ( - --bg: fn.global-color(--#{$theme}-static --1000), + --bg: fn.global-color(--#{$theme}-static --1000), + --label: fn.global-color(--#{$theme}-static --1000-text), ), --active: ( - --bg: fn.global-color(--#{$theme}-static --1100), + --bg: fn.global-color(--#{$theme}-static --1100), + --label: fn.global-color(--#{$theme}-static --1000-text), ), ), @@ -81,20 +138,61 @@ $themes: accent positive negative warning; --bg: fn.global-color(--#{$theme} --200), --label: fn.global-color(--#{$theme} --1100), --hover: ( - --bg: fn.global-color(--#{$theme} --300), + --bg: fn.global-color(--#{$theme} --300), + --label: fn.global-color(--#{$theme} --1200), ), --active: ( - --bg: fn.global-color(--#{$theme} --400), + --bg: fn.global-color(--#{$theme} --400), + --label: fn.global-color(--#{$theme} --1300), ), ) ), )); } + @each $theme in $static-themes { + @include iro.props-store(( + --colors: ( + --static-#{$theme}: ( + --bg: fn.global-color(--#{$theme}-transparent --800), + --label: fn.global-color(--#{$theme}-transparent --text), + --hover: ( + --bg: fn.global-color(--#{$theme}-transparent --900), + --label: fn.global-color(--#{$theme}-transparent --text), + ), + --active: ( + --bg: fn.global-color(--#{$theme}-transparent --900), + --label: fn.global-color(--#{$theme}-transparent --text), + ), + --key-focus: ( + --bg: fn.global-color(--#{$theme}-transparent --100), + --label: fn.global-color(--#{$theme}-transparent --900), + --border: fn.global-color(--#{$theme}-transparent --900), + --outline: fn.global-color(--#{$theme}-transparent --300), + ), + ), + + --static-#{$theme}-quiet: ( + --bg: fn.global-color(--#{$theme}-transparent --200), + --label: fn.global-color(--#{$theme}-transparent --900), + --hover: ( + --bg: fn.global-color(--#{$theme}-transparent --300), + --label: fn.global-color(--#{$theme}-transparent --900), + ), + --active: ( + --bg: fn.global-color(--#{$theme}-transparent --400), + --label: fn.global-color(--#{$theme}-transparent --900), + ), + ) + ) + )); + } + @include iro.bem-object(iro.props-namespace()) { display: inline-block; - padding-block: fn.dim(--pad-b); - padding-inline: fn.dim(--pad-i); + padding-block: calc(fn.dim(--pad-b) - fn.dim(--key-focus --border)); + padding-inline: calc(fn.dim(--pad-i) - fn.dim(--key-focus --border)); + border: fn.dim(--key-focus --border) solid transparent; border-radius: fn.dim(--rounding); background-color: fn.color(--bg); color: fn.color(--label); @@ -134,37 +232,7 @@ $themes: accent positive negative warning; @each $theme in $themes { @include iro.bem-modifier($theme) { - background-color: fn.color(--#{$theme} --bg); - color: fn.color(--#{$theme} --label); - - &:link, - &:visited, - &:enabled { - &:hover { - background-color: fn.color(--#{$theme} --hover --bg); - } - - &:active { - background-color: fn.color(--#{$theme} --active --bg); - } - } - - @include iro.bem-modifier('quiet') { - background-color: fn.color(--#{$theme}-quiet --bg); - color: fn.color(--#{$theme}-quiet --label); - - &:link, - &:visited, - &:enabled { - &:hover { - background-color: fn.color(--#{$theme}-quiet --hover --bg); - } - - &:active { - background-color: fn.color(--#{$theme}-quiet --active --bg); - } - } - } + @include theme($theme); } } @@ -172,12 +240,19 @@ $themes: accent positive negative warning; &:visited, &:enabled { &:focus-visible { + border-color: fn.color(--key-focus --border); + outline: fn.color(--key-focus --outline) solid fn.dim(--key-focus --outline); background-color: fn.color(--key-focus --bg); - box-shadow: 0 0 0 fn.dim(--key-focus --border) fn.color(--key-focus --border); color: fn.color(--key-focus --label); } } + @each $theme in $static-themes { + @include iro.bem-modifier(static-#{$theme}) { + @include theme(static-#{$theme}); + } + } + @include iro.bem-modifier('pill') { padding-inline: fn.dim(--pad-i-pill); border-radius: 10em; @@ -185,8 +260,8 @@ $themes: accent positive negative warning; @each $size in sm lg xl { @include iro.bem-modifier($size) { - padding-block: fn.dim(--#{$size} --pad-b); - padding-inline: fn.dim(--#{$size} --pad-i); + padding-block: calc(fn.dim(--#{$size} --pad-b) - fn.dim(--key-focus --border)); + padding-inline: calc(fn.dim(--#{$size} --pad-i) - fn.dim(--key-focus --border)); font-size: fn.dim(--#{$size} --font-size); @include iro.bem-modifier('pill') { -- cgit v1.2.3-70-g09d2