From 0936b9e3ccf24671f259f97c3527f14812a04949 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 19 Oct 2024 19:18:17 +0200 Subject: Fix --- src/objects/_badge.vars.scss | 33 +++++++++++++++++++-------------- src/objects/_button.vars.scss | 29 ++++++++++++++++------------- src/objects/_card.scss | 2 +- src/objects/_card.vars.scss | 2 +- src/objects/_divider.vars.scss | 11 +++++++---- src/objects/_menu.vars.scss | 2 +- src/objects/_side-nav.vars.scss | 2 +- src/objects/_status-indicator.vars.scss | 11 ++++++++--- 8 files changed, 54 insertions(+), 38 deletions(-) (limited to 'src/objects') diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss index 4941ccf..5629a9c 100644 --- a/src/objects/_badge.vars.scss +++ b/src/objects/_badge.vars.scss @@ -119,36 +119,41 @@ $static-themes: props.def(--o-badge); )); } -$themes-config: accent positive negative warning !default; +$themes-config: ( + accent: --accent, + positive: --positive, + negative: --negative, + warning: --warning, +) !default; $themes: props.def(--o-badge); -@each $theme in $themes-config { +@each $theme, $key in $themes-config { $themes: props.merge($themes, ( --#{$theme}: ( - --bg: props.get(core.$theme, --#{$theme}-static, --900), - --label: props.get(core.$theme, --#{$theme}-static, --900-text), + --bg: props.get(core.$theme, #{$key}-static, --900), + --label: props.get(core.$theme, #{$key}-static, --900-text), --hover: ( - --bg: props.get(core.$theme, --#{$theme}-static, --1000), - --label: props.get(core.$theme, --#{$theme}-static, --1000-text), + --bg: props.get(core.$theme, #{$key}-static, --1000), + --label: props.get(core.$theme, #{$key}-static, --1000-text), ), --active: ( - --bg: props.get(core.$theme, --#{$theme}-static, --1100), - --label: props.get(core.$theme, --#{$theme}-static, --1000-text), + --bg: props.get(core.$theme, #{$key}-static, --1100), + --label: props.get(core.$theme, #{$key}-static, --1000-text), ), --quiet: ( - --bg: props.get(core.$theme, --#{$theme}, --200), - --label: props.get(core.$theme, --#{$theme}, --1100), + --bg: props.get(core.$theme, $key, --200), + --label: props.get(core.$theme, $key, --1100), --hover: ( - --bg: props.get(core.$theme, --#{$theme}, --300), - --label: props.get(core.$theme, --#{$theme}, --1200), + --bg: props.get(core.$theme, $key, --300), + --label: props.get(core.$theme, $key, --1200), ), --active: ( - --bg: props.get(core.$theme, --#{$theme}, --400), - --label: props.get(core.$theme, --#{$theme}, --1300), + --bg: props.get(core.$theme, $key, --400), + --label: props.get(core.$theme, $key, --1300), ), ) ) diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss index cc82d46..b3eb2b5 100644 --- a/src/objects/_button.vars.scss +++ b/src/objects/_button.vars.scss @@ -60,9 +60,9 @@ $default-theme: props.def(--o-button, ( ), --key-focus: ( - --label: props.get(core.$theme, --focus --text), - --border: props.get(core.$theme, --focus --border), - --outline: props.get(core.$theme, --focus --outline), + --label: props.get(core.$theme, --focus, --text), + --border: props.get(core.$theme, --focus, --border), + --outline: props.get(core.$theme, --focus, --outline), ), --primary: ( @@ -139,26 +139,29 @@ $static-themes: props.def(--o-button); )); } -$themes-config: accent negative !default; +$themes-config: ( + accent: --accent, + negative: --negative, +) !default; $themes: props.def(--o-button); -@each $theme in $themes-config { +@each $theme, $key in $themes-config { $themes: props.merge($themes, ( --#{$theme}: ( - --bg: props.get(core.$theme, --#{$theme}-static, --900), - --label: props.get(core.$theme, --#{$theme}-static, --900-text), - --outline-border: props.get(core.$theme, --#{$theme}, --900), - --outline-label: props.get(core.$theme, --#{$theme}, --1000), + --bg: props.get(core.$theme, #{$key}-static, --900), + --label: props.get(core.$theme, #{$key}-static, --900-text), + --outline-border: props.get(core.$theme, $key, --900), + --outline-label: props.get(core.$theme, $key, --1000), --hover: ( - --bg: props.get(core.$theme, --#{$theme}-static, --1000), - --label: props.get(core.$theme, --#{$theme}-static, --1000-text), + --bg: props.get(core.$theme, #{$key}-static, --1000), + --label: props.get(core.$theme, #{$key}-static, --1000-text), ), --active: ( - --bg: props.get(core.$theme, --#{$theme}-static, --1100), - --label: props.get(core.$theme, --#{$theme}-static, --1100-text), + --bg: props.get(core.$theme, #{$key}-static, --1100), + --label: props.get(core.$theme, #{$key}-static, --1100-text), ), ) )); diff --git a/src/objects/_card.scss b/src/objects/_card.scss index 25e68d2..205bb33 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss @@ -121,7 +121,7 @@ 0 0 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) - props.get(vars.$key-focus--outline-width); + props.get(vars.$key-focus--outline-color); opacity: 1; } } diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss index bf5f6db..c0f10b7 100644 --- a/src/objects/_card.vars.scss +++ b/src/objects/_card.vars.scss @@ -8,7 +8,7 @@ $pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default; $spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default; $rounding: props.def(--o-card--rounding, props.get(core.$rounding)) !default; -$hover--offset-b: props.def(--o-card--rounding, calc(-1 * props.get(core.$size--65))) !default; +$hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default; $key-focus--border-width: props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; $key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss index 4a55f36..9927a41 100644 --- a/src/objects/_divider.vars.scss +++ b/src/objects/_divider.vars.scss @@ -46,15 +46,18 @@ $static-themes: props.def(--o-divider); )); } -$themes-config: accent negative !default; +$themes-config: ( + accent: --accent, + negative: --negative, +) !default; $themes: props.def(--o-divider); -@each $theme in $themes-config { +@each $theme, $key in $themes-config { $themes: props.merge($themes, ( --#{$theme}: ( - --bg: props.get(core.$theme, --#{$theme}, --800), - --label: props.get(core.$theme, --#{$theme}, --1000), + --bg: props.get(core.$theme, $key, --800), + --label: props.get(core.$theme, $key, --1000), ) )); } diff --git a/src/objects/_menu.vars.scss b/src/objects/_menu.vars.scss index 74a9f8a..95cf4f3 100644 --- a/src/objects/_menu.vars.scss +++ b/src/objects/_menu.vars.scss @@ -8,7 +8,7 @@ $separator-width: props.def(--o-menu--separator-width, props.get(core.$size--1 $item--pad-i: props.def(--o-menu--item--pad-i, props.get(core.$size--150)) !default; $item--pad-b: props.def(--o-menu--item--pad-b, props.get(core.$size--100)) !default; -$item--rounding: props.def(--o-menu--item--pad-b, props.get(core.$rounding)) !default; +$item--rounding: props.def(--o-menu--item--rounding, 0em) !default; $item--key-focus--border-width: props.def(--o-menu--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; $item--key-focus--border-offset: props.def(--o-menu--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; diff --git a/src/objects/_side-nav.vars.scss b/src/objects/_side-nav.vars.scss index 08516a6..f7dda4c 100644 --- a/src/objects/_side-nav.vars.scss +++ b/src/objects/_side-nav.vars.scss @@ -3,7 +3,7 @@ @use '../core.vars' as core; $spacing: props.def(--o-side-nav--spacing, props.get(core.$size--50)) !default; -$header--font-size: props.def(--o-side-nav--header--font-size, props.get(core.$size--50)) !default; +$header--font-size: props.def(--o-side-nav--header--font-size, props.get(core.$font-size--50)) !default; $separator: props.def(--o-side-nav--separator, props.get(core.$size--200)) !default; $item--pad-i: props.def(--o-side-nav--item--pad-i, props.get(core.$size--150)) !default; diff --git a/src/objects/_status-indicator.vars.scss b/src/objects/_status-indicator.vars.scss index d83194f..9f828b4 100644 --- a/src/objects/_status-indicator.vars.scss +++ b/src/objects/_status-indicator.vars.scss @@ -8,14 +8,19 @@ $size: props.def(--o-status-indicator--size, props.get(core.$size--125)) !defaul $default: props.def(--o-status-indicator--default, props.get(core.$theme, --border-strong)) !default; $primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text)) !default; -$themes-config: map.keys(map.get(config.$themes, config.$theme-default, light, --palettes)) !default; +$themes-config: ( + accent: --accent, + positive: --positive, + negative: --negative, + warning: --warning, +) !default; $themes: props.def(--o-status-indicator); -@each $theme in $themes-config { +@each $theme, $key in $themes-config { @if $theme != --base { $themes: props.merge($themes, ( - $theme: props.get(core.$theme, $theme, --700), + --#{$theme}: props.get(core.$theme, $key, --700), )); } } -- cgit v1.2.3-70-g09d2