From 015a5d5f009c270d82cd4a32f1faa64120a04723 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 1 Mar 2023 09:43:44 +0100 Subject: Badge again --- src/objects/_badge.scss | 39 ++++++++++++++++++++++++++------------- 1 file changed, 26 insertions(+), 13 deletions(-) (limited to 'src') diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index fd0fdc7..4ecde17 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss @@ -42,6 +42,17 @@ --bg: fn.global-color(--accent --primary --solid --obj-lo), ), ), + + --accent-quiet: ( + --bg: fn.global-color(--accent --primary --quiet --bg), + --label: fn.global-color(--accent --primary --quiet --fg), + --hover: ( + --bg: fn.global-color(--accent --primary --quiet --obj), + ), + --active: ( + --bg: fn.global-color(--accent --primary --quiet --obj-lo), + ), + ) ), ), 'colors'); @@ -66,19 +77,21 @@ } } - @include iro.bem-modifier('accent') { - background-color: fn.color(--accent --bg); - color: fn.color(--accent --label); - - &:link, - &:visited, - &:enabled { - &:hover { - background-color: fn.color(--accent --hover --bg); - } - - &:active { - background-color: fn.color(--accent --active --bg); + @each $variant in 'accent' 'accent-quiet' { + @include iro.bem-modifier($variant) { + background-color: fn.color(--#{$variant} --bg); + color: fn.color(--#{$variant} --label); + + &:link, + &:visited, + &:enabled { + &:hover { + background-color: fn.color(--#{$variant} --hover --bg); + } + + &:active { + background-color: fn.color(--#{$variant} --active --bg); + } } } } -- cgit v1.2.3-54-g00ecf