From 231b45ea9fe01ee0d8a7fcda0d7f9a2f4e435466 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 25 Jun 2024 22:29:57 +0200 Subject: Action button styling --- src/_config.scss | 80 ++++++++++++++------------- src/_declare-vars.scss | 2 +- src/objects/_action-button.scss | 116 ++++++++++++++++------------------------ 3 files changed, 90 insertions(+), 108 deletions(-) (limited to 'src') diff --git a/src/_config.scss b/src/_config.scss index da97476..56a74e1 100644 --- a/src/_config.scss +++ b/src/_config.scss @@ -69,6 +69,39 @@ $static-colors: ( ), ) !default; +$semantic-colors-common: ( + --accent: --blue, + --accent-static: --blue-static, + --positive: --green, + --positive-static: --green-static, + --negative: --red, + --negative-static: --red-static, + --warning: --yellow, + --warning-static: --yellow-static, + + --focus-raw: --accent, + --focus-static: --accent-static, + + --border-mute: --base --200, + --border: --base --300, + --border-strong: --base --400, + + --text-disabled: --base --500, + --text-mute-more: --base --600, + --text-mute: --base --700, + --text: --base --800, + --heading: --base --900, + + --focus: ( + --outline: --focus-raw --400, + --border-mute: --focus-raw --900, + --border: --focus-raw --1000, + --border-text: --focus-raw --1000-text, + --border-strong: --focus-raw --1100, + --text: --focus-raw --1100, + ), +) !default; + $theme-light: ( --contrasts: ( --grays: ( @@ -117,6 +150,12 @@ $theme-light: ( --green: oklch(56% 0.16 150.48) --colors --muted, --yellow: oklch(56% 0.16 84.08) --colors --muted, ), + + --semantic: map.merge($semantic-colors-common, ( + --bg-l2: --base --50, + --bg-l1: --base --100, + --bg-base: --base --200, + )), ) !default; $theme-dark: ( @@ -167,43 +206,12 @@ $theme-dark: ( --green: oklch(56% 0.16 150.48) --colors --muted, --yellow: oklch(56% 0.16 84.08) --colors --muted, ), -) !default; - -$semantic-colors: ( - --accent: --blue, - --accent-static: --blue-static, - --positive: --green, - --positive-static: --green-static, - --negative: --red, - --negative-static: --red-static, - --warning: --yellow, - --warning-static: --yellow-static, - - --focus-raw: --accent, - --focus-static: --accent-static, - - --bg-l2: --base --50, - --bg-l1: --base --100, - --bg-base: --base --200, - - --border-mute: --base --200, - --border: --base --300, - --border-strong: --base --400, - - --text-disabled: --base --500, - --text-mute-more: --base --600, - --text-mute: --base --700, - --text: --base --800, - --heading: --base --900, - --focus: ( - --outline: --focus-raw --400, - --border-mute: --focus-raw --900, - --border: --focus-raw --1000, - --border-text: --focus-raw --1000-text, - --border-strong: --focus-raw --1100, - --text: --focus-raw --1100, - ), + --semantic: map.merge($semantic-colors-common, ( + --bg-base: --base --50, + --bg-l1: --base --75, + --bg-l2: --base --100, + )), ) !default; $themes: ( diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss index f657057..a38fb8c 100644 --- a/src/_declare-vars.scss +++ b/src/_declare-vars.scss @@ -227,7 +227,7 @@ ), $tree); } - @each $color, $ref in config.$semantic-colors { + @each $color, $ref in map.get($theme, --semantic) { $res: (); @if meta.type-of($ref) == 'map' { diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index 6f0288d..6286f4e 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss @@ -22,7 +22,7 @@ --border: fn.global-color(--border-strong), --hover: ( - --bg: fn.global-color(--base --50), + --bg: fn.global-color(--border-mute), --label: fn.global-color(--heading), --border: fn.global-color(--text-mute-more), ), @@ -31,20 +31,31 @@ --label: fn.global-color(--heading), --border: fn.global-color(--text-mute-more), ), + --disabled: ( + --bg: fn.global-color(--bg-l1), + --label: fn.global-color(--border-strong), + --border: fn.global-color(--border-mute), + ), --selected: ( - --bg: fn.global-color(--border-mute), - --label: fn.global-color(--text), - --border: fn.global-color(--text-disabled), + --bg: fn.global-color(--text-mute), + --label: fn.global-color(--base --50), + --border: fn.global-color(--text-mute), --hover: ( - --label: fn.global-color(--heading), - --border: fn.global-color(--text-mute-more), + --bg: fn.global-color(--text), + --label: fn.global-color(--base --50), + --border: fn.global-color(--text), + ), + --active: ( + --bg: fn.global-color(--heading), + --label: fn.global-color(--base --50), + --border: fn.global-color(--heading), + ), + --disabled: ( + --bg: fn.global-color(--border-mute), + --label: fn.global-color(--border-strong), + --border: fn.global-color(--border-mute), ), - ), - --disabled: ( - --bg: fn.global-color(--bg-base), - --label: fn.global-color(--text-disabled), - --border: fn.global-color(--border-mute), ), --key-focus: ( --border: fn.global-color(--focus --border), @@ -61,15 +72,6 @@ --bg: fn.global-color(--border), --label: fn.global-color(--heading), ), - --selected: ( - --bg: fn.global-color(--border-mute), - --label: fn.global-color(--text), - - --hover: ( - --bg: fn.global-color(--border), - --label: fn.global-color(--heading), - ), - ), --disabled: ( --label: fn.global-color(--text-disabled), ), @@ -132,31 +134,6 @@ } } - @include iro.bem-is('selected') { - &:link, - &:visited, - &:enabled { - border-color: fn.color(--selected --border); - background-color: fn.color(--selected --bg); - color: fn.color(--selected --label); - - &:hover, - &:active, - &:focus-visible { - border-color: fn.color(--selected --hover --border); - background-color: fn.color(--selected --bg); - color: fn.color(--selected --hover --label); - } - - @include iro.bem-at-theme('keyboard') { - &:focus { - background-color: fn.color(--selected --bg); - color: fn.color(--selected --hover --label); - } - } - } - } - @include iro.bem-modifier('quiet') { border-color: transparent; background-color: transparent; @@ -185,35 +162,32 @@ box-shadow: none; color: fn.color(--quiet --active --label); } - - @include iro.bem-at-theme('keyboard') { - &:focus { - background-color: fn.color(--quiet --hover --bg); - color: fn.color(--quiet --hover --label); - } - } } + } - @include iro.bem-is('selected') { - background-color: fn.color(--quiet --selected --bg); - color: fn.color(--quiet --disabled --label); - - &:link, - &:visited, - &:enabled { - border-color: transparent; - background-color: fn.color(--quiet --selected --bg); - box-shadow: none; - color: fn.color(--quiet --selected --label); + @include iro.bem-is('selected') { + border-color: fn.color(--selected --disabled --border); + background-color: fn.color(--selected --disabled --bg); + color: fn.color(--selected --disabled --label); - &:hover, - &:active, - &:focus-visible { - border-color: transparent; - background-color: fn.color(--quiet --selected --hover --bg); - box-shadow: none; - color: fn.color(--quiet --selected --hover --label); - } + &:link, + &:visited, + &:enabled { + border-color: fn.color(--selected --border); + background-color: fn.color(--selected --bg); + color: fn.color(--selected --label); + + &:hover, + &:focus-visible { + border-color: fn.color(--selected --hover --border); + background-color: fn.color(--selected --hover --bg); + color: fn.color(--selected --hover --label); + } + + &:active { + border-color: fn.color(--selected --active --border); + background-color: fn.color(--selected --active --bg); + color: fn.color(--selected --active --label); } } } -- cgit v1.2.3-70-g09d2