From 9d3bdbc9ddb29a3fb8aeddbab31411c2c3cd4454 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 16 Oct 2023 20:42:06 +0200 Subject: Added primary badge --- src/objects/_badge.scss | 17 +++++++++++++++-- tpl/views/badge.pug | 4 ++++ 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index c359abc..7258cc0 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss @@ -32,6 +32,17 @@ --shadow: fn.global-color(--focus --shadow), ), + --primary: ( + --bg: fn.global-color(--fg-lo), + --label: fn.global-color(--bg), + --hover: ( + --bg: fn.global-color(--fg), + ), + --active: ( + --bg: fn.global-color(--fg), + ), + ), + --accent: ( --bg: fn.global-color(--accent --primary --solid --bg), --label: fn.global-color(--accent --primary --solid --fg), @@ -77,7 +88,7 @@ } } - @each $variant in 'accent' 'accent-quiet' { + @each $variant in 'primary' 'accent' 'accent-quiet' { @include iro.bem-modifier($variant) { background-color: fn.color(--#{$variant} --bg); color: fn.color(--#{$variant} --label); @@ -101,7 +112,9 @@ &:enabled { @include iro.bem-at-theme('keyboard') { &:focus { - box-shadow: inset 0 0 0 2px fn.color(--key-focus --border), fn.color(--key-focus --shadow); + background-color: transparent; + box-shadow: inset 0 0 0 2px fn.color(--key-focus --border), fn.color(--key-focus --shadow); + color: currentColor; } } } diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug index e81a723..9979049 100644 --- a/tpl/views/badge.pug +++ b/tpl/views/badge.pug @@ -3,12 +3,16 @@ mixin view-badge .c-box +badge= '100' = ' ' + +badge('primary')= 'new' + = ' ' +badge('accent')= 'new' = ' ' +badge('accent-quiet')= 'new' = ' ' +badge(size=200)= '100' = ' ' + +badge('primary')(size=200)= 'new' + = ' ' +badge('accent')(size=200)= 'new' = ' ' +badge('accent-quiet')(size=200)= 'new' -- cgit v1.2.3-70-g09d2