From 27222cb91c390a42055a7123b5a9409c928e8b26 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 19 Oct 2024 18:23:02 +0200 Subject: Fixes --- src/_config.scss | 66 ++++++++++++++++++------------------ src/_core.vars.scss | 42 ++++++++--------------- src/objects/_action-button.scss | 64 +++++++++++++++++----------------- src/objects/_action-button.vars.scss | 28 +++++++-------- src/objects/_badge.scss | 2 +- src/objects/_badge.vars.scss | 38 +++++++++++---------- src/objects/_button.vars.scss | 20 +++++------ src/objects/_divider.vars.scss | 8 ++--- src/objects/_field-label.vars.scss | 2 +- src/objects/_palette.scss | 2 +- src/objects/_text-field.vars.scss | 4 +-- src/scopes/_blockquotes.vars.scss | 2 +- src/scopes/_implicit.scss | 1 + src/scopes/_implicit.vars.scss | 2 ++ 14 files changed, 137 insertions(+), 144 deletions(-) (limited to 'src') diff --git a/src/_config.scss b/src/_config.scss index ced2aa5..81c6ff2 100644 --- a/src/_config.scss +++ b/src/_config.scss @@ -49,35 +49,35 @@ $static-colors: map.deep-merge(( $semantic-colors-common-override: () !default; $semantic-colors-common: map.deep-merge(( - --accent: --theme --blue, - --accent-static: --static --blue, - --positive: --theme --green, - --positive-static: --static --green, - --negative: --theme --red, - --negative-static: --static --red, - --warning: --theme --yellow, - --warning-static: --static --yellow, - - --focus-raw: --theme --accent, - --focus-static: --theme --accent-static, - - --border-mute: --theme --base --200, - --border: --theme --base --300, - --border-strong: --theme --base --400, - - --text-disabled: --theme --base --500, - --text-mute-more: --theme --base --600, - --text-mute: --theme --base --700, - --text: --theme --base --800, - --heading: --theme --base --900, + --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: --theme --focus-raw --400, - --border-mute: --theme --focus-raw --900, - --border: --theme --focus-raw --1000, - --border-text: --theme --focus-raw --1000-text, - --border-strong: --theme --focus-raw --1100, - --text: --theme --focus-raw --1100, + --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-colors-common-override) !default; @@ -132,9 +132,9 @@ $theme-light: map.deep-merge(( ), --semantic: map.merge($semantic-colors-common, ( - --bg-l2: --theme --base --50, - --bg-l1: --theme --base --100, - --bg-base: --theme --base --200, + --bg-l2: --base --50, + --bg-l1: --base --100, + --bg-base: --base --200, )), --constants: ( @@ -193,9 +193,9 @@ $theme-dark: map.deep-merge(( ), --semantic: map.merge($semantic-colors-common, ( - --bg-base: --theme --base --50, - --bg-l1: --theme --base --75, - --bg-l2: --theme --base --100, + --bg-base: --base --50, + --bg-l1: --base --75, + --bg-l2: --base --100, )), --constants: ( diff --git a/src/_core.vars.scss b/src/_core.vars.scss index 3b23c32..83d3a6a 100644 --- a/src/_core.vars.scss +++ b/src/_core.vars.scss @@ -1,3 +1,5 @@ +// stylelint-disable scss/dollar-variable-pattern + @use 'sass:map'; @use 'sass:meta'; @use 'sass:list'; @@ -98,15 +100,15 @@ $key-focus--border-width: props.def(--key-focus--border-width, props.get($borde $key-focus--border-offset: props.def(--key-focus--border-offset, props.get($border-width--medium)) !default; $list--indent: props.def(--list--indent, props.get($size--400)) !default; -$list--compact-indent: props.def(--list--indent, props.get($size--250)) !default; +$list--compact-indent: props.def(--list--compact-indent, props.get($size--250)) !default; // -$static-colors: props.def(--static-colors); +$-static-colors: (); @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { $palette: fn.palette($palette, map.get(config.$static-colors, --contrasts), 1, map.get(config.$static-colors, --base)); - $static-colors: props.merge($static-colors, ( $palette-name: $palette )); + $-static-colors: map.merge($-static-colors, ( $palette-name: $palette )); } // @@ -129,6 +131,10 @@ $themes: (); @each $variant-name, $variant in $theme { $compiled: props.def(--colors); + @each $palette-name, $palette in $-static-colors { + $compiled: props.merge($compiled, ( #{$palette-name}-static: $palette )); + } + @each $palette-name, $palette in map.get($variant, --palettes) { $base-color: list.nth($palette, 1); $contrasts: list.nth($palette, 2); @@ -147,32 +153,14 @@ $themes: (); @if meta.type-of($ref) == 'map' { @each $key, $r in $ref { - $repo-name: list.nth($r, 1); - $re1: list.nth($r, 2); - $re2: iro.fn-list-slice($r, 3); - - $res2: null; - - @if $repo-name == --static { - $res2: props.get($static-colors, $re1, $re2...); - } @else { - $res2: props.get($compiled, $re1, $re2...); - } - - $res: map.merge($res, ($key: $res2)); + $re1: list.nth($r, 1); + $re2: iro.fn-list-slice($r, 2); + $res: map.merge($res, ($key: props.get($compiled, $re1, $re2...))); } } @else { - $repo-name: list.nth($ref, 1); - $ref1: list.nth($ref, 2); - $ref2: iro.fn-list-slice($ref, 3); - - $res: null; - - @if $repo-name == --static { - $res: props.get($static-colors, $ref1, $ref2...); - } @else { - $res: props.get($compiled, $ref1, $ref2...); - } + $ref1: list.nth($ref, 1); + $ref2: iro.fn-list-slice($ref, 2); + $res: props.get($compiled, $ref1, $ref2...); } $compiled: props.merge($compiled, ( $color: $res )); diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index 48149b1..8efdad9 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss @@ -9,91 +9,91 @@ @use 'action-button.vars' as vars; @mixin -apply-theme($theme, $key: ()) { - color: props.get($theme, list.join($key, --disabled --label)...); - background-color: props.get($theme, list.join($key, --disabled --bg)...); - border-color: props.get($theme, list.join($key, --disabled --border)...); + color: props.get($theme, list.join($key, --disabled --label-color)...); + background-color: props.get($theme, list.join($key, --disabled --bg-color)...); + border-color: props.get($theme, list.join($key, --disabled --border-color)...); &::after { - outline-color: props.get($theme, list.join($key, --key-focus --border)...); + outline-color: props.get($theme, list.join($key, --key-focus --border-color)...); box-shadow: 0 0 0 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) - props.get($theme, list.join($key, --key-focus --outline-width)...); + props.get($theme, list.join($key, --key-focus --outline-color)...); } &:link, &:visited, &:enabled { - color: props.get($theme, list.join($key, --label)...); - background-color: props.get($theme, list.join($key, --bg)...); - border-color: props.get($theme, list.join($key, --border)...); + color: props.get($theme, list.join($key, --label-color)...); + background-color: props.get($theme, list.join($key, --bg-color)...); + border-color: props.get($theme, list.join($key, --border-color)...); &:hover, &:focus-visible { - color: props.get($theme, list.join($key, --hover --label)...); - background-color: props.get($theme, list.join($key, --hover --bg)...); - border-color: props.get($theme, list.join($key, --hover --border)...); + color: props.get($theme, list.join($key, --hover --label-color)...); + background-color: props.get($theme, list.join($key, --hover --bg-color)...); + border-color: props.get($theme, list.join($key, --hover --border-color)...); } &:active { - color: props.get($theme, list.join($key, --active --label)...); - background-color: props.get($theme, list.join($key, --active --bg)...); - border-color: props.get($theme, list.join($key, --active --border)...); + color: props.get($theme, list.join($key, --active --label-color)...); + background-color: props.get($theme, list.join($key, --active --bg-color)...); + border-color: props.get($theme, list.join($key, --active --border-color)...); } } @include iro.bem-modifier('quiet') { - color: props.get($theme, list.join($key, --quiet --disabled --label)...); + color: props.get($theme, list.join($key, --quiet --disabled --label-color)...); background-color: transparent; border-color: transparent; &:link, &:visited, &:enabled { - color: props.get($theme, list.join($key, --quiet --label)...); + color: props.get($theme, list.join($key, --quiet --label-color)...); background-color: transparent; border-color: transparent; &:hover, &:focus-visible { - color: props.get($theme, list.join($key, --quiet --hover --label)...); - background-color: props.get($theme, list.join($key, --quiet --hover --bg)...); + 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; } &:active { - color: props.get($theme, list.join($key, --quiet --active --label)...); - background-color: props.get($theme, list.join($key, --quiet --active --bg)...); + 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; } } } @include iro.bem-is('selected') { - color: props.get($theme, list.join($key, --selected --disabled --label)...); - background-color: props.get($theme, list.join($key, --selected --disabled --bg)...); - border-color: props.get($theme, list.join($key, --selected --disabled --border)...); + color: props.get($theme, list.join($key, --selected --disabled --label-color)...); + background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...); + border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...); &:link, &:visited, &:enabled { - color: props.get($theme, list.join($key, --selected --label)...); - background-color: props.get($theme, list.join($key, --selected --bg)...); - border-color: props.get($theme, list.join($key, --selected --border)...); + color: props.get($theme, list.join($key, --selected --label-color)...); + background-color: props.get($theme, list.join($key, --selected --bg-color)...); + border-color: props.get($theme, list.join($key, --selected --border-color)...); &:hover, &:focus-visible { - color: props.get($theme, list.join($key, --selected --hover --label)...); - background-color: props.get($theme, list.join($key, --selected --hover --bg)...); - border-color: props.get($theme, list.join($key, --selected --hover --border)...); + color: props.get($theme, list.join($key, --selected --hover --label-color)...); + background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...); + border-color: props.get($theme, list.join($key, --selected --hover --border-color)...); } &:active { - color: props.get($theme, list.join($key, --selected --active --label)...); - background-color: props.get($theme, list.join($key, --selected --active --bg)...); - border-color: props.get($theme, list.join($key, --selected --active --border)...); + color: props.get($theme, list.join($key, --selected --active --label-color)...); + background-color: props.get($theme, list.join($key, --selected --active --bg-color)...); + border-color: props.get($theme, list.join($key, --selected --active --border-color)...); } } } diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss index 9049a8f..ec312b4 100644 --- a/src/objects/_action-button.vars.scss +++ b/src/objects/_action-button.vars.scss @@ -11,20 +11,20 @@ $border-width: props.def(--o-action-button--border-width, props.get(core.$border $rounding: props.def(--o-action-button--rounding, props.get(core.$rounding)) !default; $font-size: props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default; -$pad-i--sm: props.def(--o-action-button--pad-i, props.get(core.$size--100), 'sm') !default; -$pad-i-pill--sm: props.def(--o-action-button--pad-i-pill, props.get(core.$size--150), 'sm') !default; -$pad-b--sm: props.def(--o-action-button--pad-b, props.get(core.$size--40), 'sm') !default; -$font-size--sm: props.def(--o-action-button--font-size, props.get(core.$font-size--75), 'sm') !default; - -$pad-i--lg: props.def(--o-action-button--pad-i, props.get(core.$size--175), 'lg') !default; -$pad-i-pill--lg: props.def(--o-action-button--pad-i-pill, props.get(core.$size--225), 'lg') !default; -$pad-b--lg: props.def(--o-action-button--pad-b, props.get(core.$size--115), 'lg') !default; -$font-size--lg: props.def(--o-action-button--font-size, props.get(core.$font-size--150), 'lg') !default; - -$pad-i--xl: props.def(--o-action-button--pad-i, props.get(core.$size--225), 'xl') !default; -$pad-i-pill--xl: props.def(--o-action-button--pad-i-pill, props.get(core.$size--300), 'xl') !default; -$pad-b--xl: props.def(--o-action-button--pad-b, props.get(core.$size--150), 'xl') !default; -$font-size--xl: props.def(--o-action-button--font-size, props.get(core.$font-size--200), 'xl') !default; +$pad-i--sm: props.def(--o-action-button--sm--pad-i, props.get(core.$size--100)) !default; +$pad-i-pill--sm: props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--150)) !default; +$pad-b--sm: props.def(--o-action-button--sm--pad-b, props.get(core.$size--40)) !default; +$font-size--sm: props.def(--o-action-button--sm--font-size, props.get(core.$font-size--75)) !default; + +$pad-i--lg: props.def(--o-action-button--lg--pad-i, props.get(core.$size--175)) !default; +$pad-i-pill--lg: props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--225)) !default; +$pad-b--lg: props.def(--o-action-button--lg--pad-b, props.get(core.$size--115)) !default; +$font-size--lg: props.def(--o-action-button--lg--font-size, props.get(core.$font-size--150)) !default; + +$pad-i--xl: props.def(--o-action-button--xl--pad-i, props.get(core.$size--225)) !default; +$pad-i-pill--xl: props.def(--o-action-button--xl--pad-i-pill, props.get(core.$size--300)) !default; +$pad-b--xl: props.def(--o-action-button--xl--pad-b, props.get(core.$size--150)) !default; +$font-size--xl: props.def(--o-action-button--xl--font-size, props.get(core.$font-size--200)) !default; $key-focus--border-width: props.def(--o-action-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; $key-focus--border-offset: props.def(--o-action-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index 41b2fbb..55a2051 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss @@ -101,7 +101,7 @@ margin-inline: props.get(vars.$pad-i-label); } - @include -apply-theme(vars.$default-theme); + @include -apply-theme(vars.$default-theme, $static: true); @each $theme in map.keys(props.get(vars.$themes)) { @include iro.bem-modifier(string.slice($theme, 3)) { diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss index f9a4ed5..4941ccf 100644 --- a/src/objects/_badge.vars.scss +++ b/src/objects/_badge.vars.scss @@ -38,10 +38,6 @@ $sizes: ( 'xl' $pad-b--xl $pad-i--xl $pad-i-pill--xl $pad-i-label--xl $font-size--xl, ) !default; -$key-focus--label-color: props.def(--o-badge--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default; -$key-focus--border-color: props.def(--o-badge--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; -$key-focus--outline-color: props.def(--o-badge--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; - $default-theme-override: () !default; $default-theme: props.def(--o-badge, ( --bg: props.get(core.$theme, --text-mute), @@ -57,6 +53,12 @@ $default-theme: props.def(--o-badge, ( --label: props.get(core.$theme, --bg-l2), ), + --key-focus: ( + --label: props.get(core.$theme, --focus, --text), + --border: props.get(core.$theme, --focus, --border), + --outline: props.get(core.$theme, --focus, --outline), + ), + --quiet: ( --bg: props.get(core.$theme, --border-mute), --label: props.get(core.$theme, --heading), @@ -117,36 +119,36 @@ $static-themes: props.def(--o-badge); )); } -$themes-config: --accent --positive --negative --warning !default; +$themes-config: accent positive negative warning !default; $themes: props.def(--o-badge); @each $theme in $themes-config { $themes: props.merge($themes, ( - $theme: ( - --bg: props.get(core.$static-colors, $theme, --900), - --label: props.get(core.$static-colors, $theme, --900-text), + --#{$theme}: ( + --bg: props.get(core.$theme, --#{$theme}-static, --900), + --label: props.get(core.$theme, --#{$theme}-static, --900-text), --hover: ( - --bg: props.get(core.$static-colors, $theme, --1000), - --label: props.get(core.$static-colors, $theme, --1000-text), + --bg: props.get(core.$theme, --#{$theme}-static, --1000), + --label: props.get(core.$theme, --#{$theme}-static, --1000-text), ), --active: ( - --bg: props.get(core.$static-colors, $theme, --1100), - --label: props.get(core.$static-colors, $theme, --1000-text), + --bg: props.get(core.$theme, --#{$theme}-static, --1100), + --label: props.get(core.$theme, --#{$theme}-static, --1000-text), ), --quiet: ( - --bg: props.get(core.$theme, $theme, --200), - --label: props.get(core.$theme, $theme, --1100), + --bg: props.get(core.$theme, --#{$theme}, --200), + --label: props.get(core.$theme, --#{$theme}, --1100), --hover: ( - --bg: props.get(core.$theme, $theme, --300), - --label: props.get(core.$theme, $theme, --1200), + --bg: props.get(core.$theme, --#{$theme}, --300), + --label: props.get(core.$theme, --#{$theme}, --1200), ), --active: ( - --bg: props.get(core.$theme, $theme, --400), - --label: props.get(core.$theme, $theme, --1300), + --bg: props.get(core.$theme, --#{$theme}, --400), + --label: props.get(core.$theme, --#{$theme}, --1300), ), ) ) diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss index 7640e57..cc82d46 100644 --- a/src/objects/_button.vars.scss +++ b/src/objects/_button.vars.scss @@ -139,26 +139,26 @@ $static-themes: props.def(--o-button); )); } -$themes-config: --accent --negative !default; +$themes-config: accent negative !default; $themes: props.def(--o-button); @each $theme in $themes-config { $themes: props.merge($themes, ( - $theme: ( - --bg: props.get(core.$static-colors, $theme, --900), - --label: props.get(core.$static-colors, $theme, --900-text), - --outline-border: props.get(core.$theme, $theme, --900), - --outline-label: props.get(core.$theme, $theme, --1000), + --#{$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), --hover: ( - --bg: props.get(core.$static-colors, $theme, --1000), - --label: props.get(core.$static-colors, $theme, --1000-text), + --bg: props.get(core.$theme, --#{$theme}-static, --1000), + --label: props.get(core.$theme, --#{$theme}-static, --1000-text), ), --active: ( - --bg: props.get(core.$static-colors, $theme, --1100), - --label: props.get(core.$static-colors, $theme, --1100-text), + --bg: props.get(core.$theme, --#{$theme}-static, --1100), + --label: props.get(core.$theme, --#{$theme}-static, --1100-text), ), ) )); diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss index 01c4b92..4a55f36 100644 --- a/src/objects/_divider.vars.scss +++ b/src/objects/_divider.vars.scss @@ -46,15 +46,15 @@ $static-themes: props.def(--o-divider); )); } -$themes-config: --accent --negative !default; +$themes-config: accent negative !default; $themes: props.def(--o-divider); @each $theme in $themes-config { $themes: props.merge($themes, ( - $theme: ( - --bg: props.get(core.$theme, $theme, --800), - --label: props.get(core.$theme, $theme, --1000), + --#{$theme}: ( + --bg: props.get(core.$theme, --#{$theme}, --800), + --label: props.get(core.$theme, --#{$theme}, --1000), ) )); } diff --git a/src/objects/_field-label.vars.scss b/src/objects/_field-label.vars.scss index 699836e..d39aa2d 100644 --- a/src/objects/_field-label.vars.scss +++ b/src/objects/_field-label.vars.scss @@ -8,5 +8,5 @@ $hint-font-size: props.def(--o-field-label--hint-font-size, props.get(core.$fon $label-color: props.def(--o-field-label--label-color, props.get(core.$theme, --text-mute)) !default; $hint-color: props.def(--o-field-label--hint-color, props.get(core.$theme, --text-mute)) !default; -$error-hint-color: props.def(--o-field-label--hint-color, props.get(core.$theme, --negative, --900)) !default; +$error-hint-color: props.def(--o-field-label--error-hint-color, props.get(core.$theme, --negative, --900)) !default; $disabled-color: props.def(--o-field-label--disabled-color, props.get(core.$theme, --text-disabled)) !default; diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss index d83b297..00c0881 100644 --- a/src/objects/_palette.scss +++ b/src/objects/_palette.scss @@ -52,7 +52,7 @@ $key: list.nth(map.keys($contrasts), $i); &:nth-child(#{$i}) { - background-color: props.get(core.$static-colors, $palette-name, $key); + background-color: props.get(core.$theme, #{$palette-name}-static, $key); } } } diff --git a/src/objects/_text-field.vars.scss b/src/objects/_text-field.vars.scss index 3d0ef2d..6d8abdd 100644 --- a/src/objects/_text-field.vars.scss +++ b/src/objects/_text-field.vars.scss @@ -12,9 +12,9 @@ $extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--5 $focus--border-width: props.def(--o-text-field--focus--border-width, props.get(core.$border-width--medium)) !default; -$key-focus--border-width: props.def(--o-text-field--focus--border-width, props.get(core.$key-focus--outline-width)) !default; +$key-focus--border-width: props.def(--o-text-field--key-focus--border-width, props.get(core.$key-focus--outline-width)) !default; -$bg-color: props.def(--o-text-field--bg-color, props.get(core.$theme, --bg)) !default; +$bg-color: props.def(--o-text-field--bg-color, props.get(core.$theme, --base, --50)) !default; $placeholder-color: props.def(--o-text-field--placeholder-color, props.get(core.$theme, --text-mute-more)) !default; $text-color: props.def(--o-text-field--text-color, props.get(core.$theme, --text)) !default; $border-color: props.def(--o-text-field--border-color, props.get(core.$theme, --border-strong)) !default; diff --git a/src/scopes/_blockquotes.vars.scss b/src/scopes/_blockquotes.vars.scss index 39d90bd..f2cf935 100644 --- a/src/scopes/_blockquotes.vars.scss +++ b/src/scopes/_blockquotes.vars.scss @@ -8,4 +8,4 @@ $border-width: props.def(--s-blockquotes--border-width, props.get(core.$border-w $compact--indent: props.def(--s-blockquotes--compact--indent, props.get(core.$list--compact-indent)) !default; -$border-color: props.def(--s-blockquotes--border-width, props.get(core.$theme, --border)) !default; +$border-color: props.def(--s-blockquotes--border-color, props.get(core.$theme, --border)) !default; diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss index 4bb3482..d66950a 100644 --- a/src/scopes/_implicit.scss +++ b/src/scopes/_implicit.scss @@ -61,6 +61,7 @@ font-weight: props.get(vars.$heading--font-weight); font-feature-settings: props.get(vars.$heading--feature-settings); line-height: props.get(vars.$heading--line-height); + color: props.get(vars.$heading--color); & + & { margin-block-start: props.get(vars.$heading--margin-bs-sibling); diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss index f0eb45d..7390672 100644 --- a/src/scopes/_implicit.vars.scss +++ b/src/scopes/_implicit.vars.scss @@ -22,3 +22,5 @@ $heading--line-height: props.def(--s-implicit--heading--line-height, props $heading--font-weight: props.def(--s-implicit--heading--font-weight, props.get(core.$font--headline--weight)) !default; $heading--font-size: props.def(--s-implicit--heading--font-size, props.get(core.$font-size--100)); $heading--feature-settings: props.def(--s-implicit--heading--feature-settings, props.get(core.$font--headline--feature-settings)) !default; + +$heading--color: props.def(--s-implicit--heading--color, props.get(core.$theme, --heading)); -- cgit v1.2.3-70-g09d2