From 757d0c3155507debf424b71ca97b144613f2d65c Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 22 Jul 2025 21:54:56 +0200 Subject: Adjusted action button variants --- src/objects/_action-button.scss | 24 ++++++++-------- src/objects/_action-button.vars.scss | 54 ++++++++++++++++++++++++++++++++++++ 2 files changed, 66 insertions(+), 12 deletions(-) diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index f4a9a46..c997679 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss @@ -53,30 +53,30 @@ } @include bem.modifier('static') { - color: props.get($theme, list.join($key, --quiet --hover --label-color)...); - background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...); - border-color: transparent; + color: props.get($theme, list.join($key, --static --label-color)...); + background-color: props.get($theme, list.join($key, --static --bg-color)...); + border-color: props.get($theme, list.join($key, --static --border-color)...); box-shadow: none; &:link, &:visited, &:enabled { - color: props.get($theme, list.join($key, --quiet --hover --label-color)...); - background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...); - border-color: transparent; + color: props.get($theme, list.join($key, --static --label-color)...); + background-color: props.get($theme, list.join($key, --static --bg-color)...); + border-color: props.get($theme, list.join($key, --static --border-color)...); box-shadow: none; &:hover, &:focus-visible { - color: props.get($theme, list.join($key, --quiet --active --label-color)...); - background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...); - border-color: transparent; + color: props.get($theme, list.join($key, --static --hover --label-color)...); + background-color: props.get($theme, list.join($key, --static --hover --bg-color)...); + border-color: props.get($theme, list.join($key, --static --hover --border-color)...); } &:active { - color: props.get($theme, list.join($key, --quiet --active --label-color)...); - background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...); - border-color: transparent; + color: props.get($theme, list.join($key, --static --active --label-color)...); + background-color: props.get($theme, list.join($key, --static --active --bg-color)...); + border-color: props.get($theme, list.join($key, --static --active --border-color)...); } } } diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss index 10d345b..3f09f35 100644 --- a/src/objects/_action-button.vars.scss +++ b/src/objects/_action-button.vars.scss @@ -102,6 +102,24 @@ $default-theme: map.deep-merge(( ), ), + --static: ( + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --border), + + --hover: ( + --bg-color: props.get(core.$theme, --border), + --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --border-strong), + ), + + --active: ( + --bg-color: props.get(core.$theme, --border-strong), + --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --text-mute-more), + ), + ), + --quiet: ( --label-color: props.get(core.$theme, --text), @@ -200,6 +218,24 @@ $default-theme-dark: props.def(--o-action-button, $default-theme-dark, 'dark'); ), ), + --static: ( + --bg-color: props.get(core.$transparent-colors, $theme, --200), + --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: props.get(core.$transparent-colors, $theme, --300), + + --hover: ( + --bg-color: props.get(core.$transparent-colors, $theme, --300), + --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: props.get(core.$transparent-colors, $theme, --400), + ), + + --active: ( + --bg-color: props.get(core.$transparent-colors, $theme, --400), + --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: props.get(core.$transparent-colors, $theme, --500), + ), + ), + --quiet: ( --label-color: props.get(core.$transparent-colors, $theme, --900), @@ -283,6 +319,24 @@ $themes-config: ( ), ), + --static: ( + --bg-color: props.get(core.$theme, $key, --100), + --label-color: props.get(core.$theme, $key, --1000), + --border-color: props.get(core.$theme, $key, --300), + + --hover: ( + --bg-color: props.get(core.$theme, $key, --200), + --label-color: props.get(core.$theme, $key, --1100), + --border-color: props.get(core.$theme, $key, --400), + ), + + --active: ( + --bg-color: props.get(core.$theme, $key, --300), + --label-color: props.get(core.$theme, $key, --1200), + --border-color: props.get(core.$theme, $key, --500), + ), + ), + --quiet: ( --label-color: props.get(core.$theme, $key, --1100), -- cgit v1.2.3-70-g09d2