From 41b0d0497988274057fc2512c822a6bc9d2d3ebd Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 6 Aug 2025 16:40:56 +0200 Subject: Switch to tab indentation --- src/objects/_button.vars.scss | 598 +++++++++++++++++++++--------------------- 1 file changed, 299 insertions(+), 299 deletions(-) (limited to 'src/objects/_button.vars.scss') diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss index 00a11c3..6e2298f 100644 --- a/src/objects/_button.vars.scss +++ b/src/objects/_button.vars.scss @@ -41,334 +41,334 @@ $key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props $key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; $fixed-sizes: ( - 'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm, - 'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg, - 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl, + 'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm, + 'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg, + 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl, ) !default; $themes: props.def(--o-button, (), 'color'); $default-theme-override: () !default; $default-theme: map.deep-merge(( - --bg-color: props.get(core.$theme, --bg-l2), - --label-color: props.get(core.$theme, --text), - --border-color: props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong), - --shadow-color: props.get(core.$theme, --shadow), - - --hover: ( - --bg-color: props.get(core.$theme, --bg-l1), - --label-color: props.get(core.$theme, --heading), - --border-color: props.get(core.$theme, --border), - ), - - --active: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --heading), - --border-color: props.get(core.$theme, --border-strong), - ), - - --disabled: ( - --bg-color: transparent, - --label-color: props.get(core.$theme, --border-strong), - --border-color: props.get(core.$theme, --text-disabled), - ), - - --key-focus: ( - --border-color: props.get(core.$theme, --focus, --border), - --outline-color: props.get(core.$theme, --focus, --outline), - ), - - --highlighted: ( - --border-color: props.get(core.$theme, --focus, --border), - --shadow-color: props.get(core.$theme, --focus, --outline), - ), - - --selected: ( - --bg-color: props.get(core.$theme, --text), - --label-color: props.get(core.$theme, --base, --50), - --border-color: props.get(core.$theme, --text) props.get(core.$theme, --text) props.get(core.$theme, --heading), - - --hover: ( - --bg-color: props.get(core.$theme, --heading), - --label-color: props.get(core.$theme, --base, --50), - --border-color: props.get(core.$theme, --heading), - ), - - --active: ( - --bg-color: props.get(core.$theme, --heading), - --label-color: props.get(core.$theme, --base, --50), - --border-color: props.get(core.$theme, --heading), - ), - - --disabled: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --border-strong), - --border-color: props.get(core.$theme, --border-mute), - ), - ), - - --badge: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --heading), - --border-color: props.get(core.$theme, --border-mute), - - --hover: ( - --bg-color: props.get(core.$theme, --border), - --label-color: props.get(core.$theme, --heading), - --border-color: props.get(core.$theme, --border), - ), - - --active: ( - --bg-color: props.get(core.$theme, --border-strong), - --label-color: props.get(core.$theme, --heading), - --border-color: props.get(core.$theme, --border-strong), - ), - ), - - --quiet: ( - --label-color: props.get(core.$theme, --text), - - --hover: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --heading), - ), - - --active: ( - --bg-color: props.get(core.$theme, --border), - --label-color: props.get(core.$theme, --heading), - ), - - --disabled: ( - --label-color: props.get(core.$theme, --border-strong), - ), - ), + --bg-color: props.get(core.$theme, --bg-l2), + --label-color: props.get(core.$theme, --text), + --border-color: props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong), + --shadow-color: props.get(core.$theme, --shadow), + + --hover: ( + --bg-color: props.get(core.$theme, --bg-l1), + --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --border), + ), + + --active: ( + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --border-strong), + ), + + --disabled: ( + --bg-color: transparent, + --label-color: props.get(core.$theme, --border-strong), + --border-color: props.get(core.$theme, --text-disabled), + ), + + --key-focus: ( + --border-color: props.get(core.$theme, --focus, --border), + --outline-color: props.get(core.$theme, --focus, --outline), + ), + + --highlighted: ( + --border-color: props.get(core.$theme, --focus, --border), + --shadow-color: props.get(core.$theme, --focus, --outline), + ), + + --selected: ( + --bg-color: props.get(core.$theme, --text), + --label-color: props.get(core.$theme, --base, --50), + --border-color: props.get(core.$theme, --text) props.get(core.$theme, --text) props.get(core.$theme, --heading), + + --hover: ( + --bg-color: props.get(core.$theme, --heading), + --label-color: props.get(core.$theme, --base, --50), + --border-color: props.get(core.$theme, --heading), + ), + + --active: ( + --bg-color: props.get(core.$theme, --heading), + --label-color: props.get(core.$theme, --base, --50), + --border-color: props.get(core.$theme, --heading), + ), + + --disabled: ( + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --border-strong), + --border-color: props.get(core.$theme, --border-mute), + ), + ), + + --badge: ( + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --border-mute), + + --hover: ( + --bg-color: props.get(core.$theme, --border), + --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --border), + ), + + --active: ( + --bg-color: props.get(core.$theme, --border-strong), + --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --border-strong), + ), + ), + + --quiet: ( + --label-color: props.get(core.$theme, --text), + + --hover: ( + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --heading), + ), + + --active: ( + --bg-color: props.get(core.$theme, --border), + --label-color: props.get(core.$theme, --heading), + ), + + --disabled: ( + --label-color: props.get(core.$theme, --border-strong), + ), + ), ), $default-theme-override) !default; $default-theme: props.def(--o-button, $default-theme, 'color'); $default-theme-dark-override: () !default; $default-theme-dark: map.deep-merge(( - --bg-color: props.get(core.$theme, --border-mute), - --border-color: props.get(core.$theme, --border-mute), - - --hover: ( - --bg-color: props.get(core.$theme, --border), - --border-color: props.get(core.$theme, --border), - ), - - --active: ( - --bg-color: props.get(core.$theme, --border-strong), - --border-color: props.get(core.$theme, --border-strong), - ), - - --selected: ( - --border-color: props.get(core.$theme, --text), - ), + --bg-color: props.get(core.$theme, --border-mute), + --border-color: props.get(core.$theme, --border-mute), + + --hover: ( + --bg-color: props.get(core.$theme, --border), + --border-color: props.get(core.$theme, --border), + ), + + --active: ( + --bg-color: props.get(core.$theme, --border-strong), + --border-color: props.get(core.$theme, --border-strong), + ), + + --selected: ( + --border-color: props.get(core.$theme, --text), + ), ), $default-theme-override) !default; $default-theme-dark: props.def(--o-button, $default-theme-dark, 'dark'); @each $theme in map.keys(props.get(core.$transparent-colors)) { - $button-theme: --static-#{string.slice($theme, 3)}; - - $themes: props.merge($themes, ( - $button-theme: ( - --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) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400), - --shadow-color: props.get(core.$transparent-colors, --black, --200), - - --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), - ), - - --disabled: ( - --bg-color: props.get(core.$transparent-colors, $theme, --100), - --label-color: props.get(core.$transparent-colors, $theme, --500), - --border-color: props.get(core.$transparent-colors, $theme, --300), - ), - - --key-focus: ( - --border-color: props.get(core.$transparent-colors, $theme, --900), - --outline-color: props.get(core.$transparent-colors, $theme, --300), - ), - - --highlighted: ( - --border-color: props.get(core.$transparent-colors, $theme, --900), - --shadow-color: props.get(core.$transparent-colors, --black, --200), - ), - - --selected: ( - --bg-color: props.get(core.$transparent-colors, $theme, --800), - --label-color: props.get(core.$transparent-colors, $theme, --text), - --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200), - - --hover: ( - --bg-color: props.get(core.$transparent-colors, $theme, --900), - --label-color: props.get(core.$transparent-colors, $theme, --text), - --border-color: props.get(core.$transparent-colors, $theme, --100), - ), - - --active: ( - --bg-color: props.get(core.$transparent-colors, $theme, --900), - --label-color: props.get(core.$transparent-colors, $theme, --text), - --border-color: props.get(core.$transparent-colors, $theme, --100), - ), - - --disabled: ( - --bg-color: props.get(core.$transparent-colors, $theme, --200), - --label-color: props.get(core.$transparent-colors, $theme, --500), - --border-color: props.get(core.$transparent-colors, $theme, --100), - ), - ), - - --badge: ( - --bg-color: props.get(core.$transparent-colors, $theme, --200), - --label-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: transparent, + $button-theme: --static-#{string.slice($theme, 3)}; + + $themes: props.merge($themes, ( + $button-theme: ( + --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) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400), + --shadow-color: props.get(core.$transparent-colors, --black, --200), + + --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), + ), + + --disabled: ( + --bg-color: props.get(core.$transparent-colors, $theme, --100), + --label-color: props.get(core.$transparent-colors, $theme, --500), + --border-color: props.get(core.$transparent-colors, $theme, --300), + ), + + --key-focus: ( + --border-color: props.get(core.$transparent-colors, $theme, --900), + --outline-color: props.get(core.$transparent-colors, $theme, --300), + ), + + --highlighted: ( + --border-color: props.get(core.$transparent-colors, $theme, --900), + --shadow-color: props.get(core.$transparent-colors, --black, --200), + ), + + --selected: ( + --bg-color: props.get(core.$transparent-colors, $theme, --800), + --label-color: props.get(core.$transparent-colors, $theme, --text), + --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200), + + --hover: ( + --bg-color: props.get(core.$transparent-colors, $theme, --900), + --label-color: props.get(core.$transparent-colors, $theme, --text), + --border-color: props.get(core.$transparent-colors, $theme, --100), + ), + + --active: ( + --bg-color: props.get(core.$transparent-colors, $theme, --900), + --label-color: props.get(core.$transparent-colors, $theme, --text), + --border-color: props.get(core.$transparent-colors, $theme, --100), + ), + + --disabled: ( + --bg-color: props.get(core.$transparent-colors, $theme, --200), + --label-color: props.get(core.$transparent-colors, $theme, --500), + --border-color: props.get(core.$transparent-colors, $theme, --100), + ), + ), + + --badge: ( + --bg-color: props.get(core.$transparent-colors, $theme, --200), + --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: transparent, - --hover: ( - --bg-color: props.get(core.$transparent-colors, $theme, --300), - --label-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: transparent, - ), + --hover: ( + --bg-color: props.get(core.$transparent-colors, $theme, --300), + --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: transparent, + ), - --active: ( - --bg-color: props.get(core.$transparent-colors, $theme, --400), - --label-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: transparent, - ), - ), - - --quiet: ( - --label-color: props.get(core.$transparent-colors, $theme, --900), + --active: ( + --bg-color: props.get(core.$transparent-colors, $theme, --400), + --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: transparent, + ), + ), + + --quiet: ( + --label-color: props.get(core.$transparent-colors, $theme, --900), - --hover: ( - --bg-color: props.get(core.$transparent-colors, $theme, --200), - --label-color: props.get(core.$transparent-colors, $theme, --900), - ), + --hover: ( + --bg-color: props.get(core.$transparent-colors, $theme, --200), + --label-color: props.get(core.$transparent-colors, $theme, --900), + ), - --active: ( - --bg-color: props.get(core.$transparent-colors, $theme, --300), - --label-color: props.get(core.$transparent-colors, $theme, --900), - ), + --active: ( + --bg-color: props.get(core.$transparent-colors, $theme, --300), + --label-color: props.get(core.$transparent-colors, $theme, --900), + ), - --disabled: ( - --label-color: props.get(core.$transparent-colors, $theme, --500), - ), - ), - ) - )); + --disabled: ( + --label-color: props.get(core.$transparent-colors, $theme, --500), + ), + ), + ) + )); } $themes-config: ( - accent: --accent, - positive: --positive, - negative: --negative, - warning: --warning, + accent: --accent, + positive: --positive, + negative: --negative, + warning: --warning, ) !default; @each $theme, $key in $themes-config { - $themes: props.merge($themes, ( - --#{$theme}: ( - --bg-color: props.get(core.$theme, $key, --100), - --label-color: props.get(core.$theme, $key, --1100), - --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600), - --shadow-color: props.get(core.$theme, $key, --200), - - --hover: ( - --bg-color: props.get(core.$theme, $key, --200), - --label-color: props.get(core.$theme, $key, --1200), - --border-color: props.get(core.$theme, $key, --600), - ), - - --active: ( - --bg-color: props.get(core.$theme, $key, --300), - --label-color: props.get(core.$theme, $key, --1300), - --border-color: props.get(core.$theme, $key, --800), - ), - - --disabled: ( - --bg-color: props.get(core.$theme, --bg-l1), - --label-color: props.get(core.$theme, --border-strong), - --border-color: props.get(core.$theme, --border), - ), - - --key-focus: ( - --border-color: props.get(core.$theme, --focus, --border), - --outline-color: props.get(core.$theme, --focus, --outline), - ), - - --highlighted: ( - --border-color: props.get(core.$theme, $key, --900), - --shadow-color: props.get(core.$theme, $key, --200), - ), - - --selected: ( - --bg-color: props.get(core.$theme, #{$key}-static, --900), - --label-color: props.get(core.$theme, #{$key}-static, --900-text), - --border-color: props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --1000), - - --hover: ( - --bg-color: props.get(core.$theme, #{$key}-static, --1000), - --label-color: props.get(core.$theme, #{$key}-static, --1000-text), - --border-color: props.get(core.$theme, #{$key}-static, --1000), - ), - - --active: ( - --bg-color: props.get(core.$theme, #{$key}-static, --1100), - --label-color: props.get(core.$theme, #{$key}-static, --1100-text), - --border-color: props.get(core.$theme, #{$key}-static, --1100), - ), - - --disabled: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --border-strong), - --border-color: props.get(core.$theme, --border-mute), - ), - ), - - --badge: ( - --bg-color: props.get(core.$theme, $key, --100), - --label-color: props.get(core.$theme, $key, --1100), - --border-color: props.get(core.$theme, $key, --300), + $themes: props.merge($themes, ( + --#{$theme}: ( + --bg-color: props.get(core.$theme, $key, --100), + --label-color: props.get(core.$theme, $key, --1100), + --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600), + --shadow-color: props.get(core.$theme, $key, --200), + + --hover: ( + --bg-color: props.get(core.$theme, $key, --200), + --label-color: props.get(core.$theme, $key, --1200), + --border-color: props.get(core.$theme, $key, --600), + ), + + --active: ( + --bg-color: props.get(core.$theme, $key, --300), + --label-color: props.get(core.$theme, $key, --1300), + --border-color: props.get(core.$theme, $key, --800), + ), + + --disabled: ( + --bg-color: props.get(core.$theme, --bg-l1), + --label-color: props.get(core.$theme, --border-strong), + --border-color: props.get(core.$theme, --border), + ), + + --key-focus: ( + --border-color: props.get(core.$theme, --focus, --border), + --outline-color: props.get(core.$theme, --focus, --outline), + ), + + --highlighted: ( + --border-color: props.get(core.$theme, $key, --900), + --shadow-color: props.get(core.$theme, $key, --200), + ), + + --selected: ( + --bg-color: props.get(core.$theme, #{$key}-static, --900), + --label-color: props.get(core.$theme, #{$key}-static, --900-text), + --border-color: props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --1000), + + --hover: ( + --bg-color: props.get(core.$theme, #{$key}-static, --1000), + --label-color: props.get(core.$theme, #{$key}-static, --1000-text), + --border-color: props.get(core.$theme, #{$key}-static, --1000), + ), + + --active: ( + --bg-color: props.get(core.$theme, #{$key}-static, --1100), + --label-color: props.get(core.$theme, #{$key}-static, --1100-text), + --border-color: props.get(core.$theme, #{$key}-static, --1100), + ), + + --disabled: ( + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --border-strong), + --border-color: props.get(core.$theme, --border-mute), + ), + ), + + --badge: ( + --bg-color: props.get(core.$theme, $key, --100), + --label-color: props.get(core.$theme, $key, --1100), + --border-color: props.get(core.$theme, $key, --300), - --hover: ( - --bg-color: props.get(core.$theme, $key, --200), - --label-color: props.get(core.$theme, $key, --1200), - --border-color: props.get(core.$theme, $key, --400), - ), + --hover: ( + --bg-color: props.get(core.$theme, $key, --200), + --label-color: props.get(core.$theme, $key, --1200), + --border-color: props.get(core.$theme, $key, --400), + ), - --active: ( - --bg-color: props.get(core.$theme, $key, --300), - --label-color: props.get(core.$theme, $key, --1300), - --border-color: props.get(core.$theme, $key, --500), - ), - ), - - --quiet: ( - --label-color: props.get(core.$theme, $key, --1100), + --active: ( + --bg-color: props.get(core.$theme, $key, --300), + --label-color: props.get(core.$theme, $key, --1300), + --border-color: props.get(core.$theme, $key, --500), + ), + ), + + --quiet: ( + --label-color: props.get(core.$theme, $key, --1100), - --hover: ( - --bg-color: props.get(core.$theme, $key, --200), - --label-color: props.get(core.$theme, $key, --1200), - ), + --hover: ( + --bg-color: props.get(core.$theme, $key, --200), + --label-color: props.get(core.$theme, $key, --1200), + ), - --active: ( - --bg-color: props.get(core.$theme, $key, --300), - --label-color: props.get(core.$theme, $key, --1300), - ), + --active: ( + --bg-color: props.get(core.$theme, $key, --300), + --label-color: props.get(core.$theme, $key, --1300), + ), - --disabled: ( - --label-color: props.get(core.$theme, --border-strong), - ), - ), - ) - )); + --disabled: ( + --label-color: props.get(core.$theme, --border-strong), + ), + ), + ) + )); } -- cgit v1.2.3-70-g09d2