From e0815613914e16d73a30efe709a74b994cc31963 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 25 Oct 2024 19:37:52 +0200 Subject: More efficient theming --- src/_core.vars.scss | 4 ++-- src/_props.scss | 10 ++-------- src/layouts/_card-list.vars.scss | 2 +- src/objects/_action-button.vars.scss | 4 ++-- src/objects/_alert.vars.scss | 6 +++--- src/objects/_avatar.vars.scss | 10 +++++----- src/objects/_backdrop.vars.scss | 2 +- src/objects/_badge.vars.scss | 6 +++--- src/objects/_button.vars.scss | 6 +++--- src/objects/_card.vars.scss | 14 +++++++------- src/objects/_checkbox.vars.scss | 24 ++++++++++++------------ src/objects/_divider.vars.scss | 18 +++++++++--------- src/objects/_emoji.vars.scss | 2 +- src/objects/_field-label.vars.scss | 8 ++++---- src/objects/_lightbox.vars.scss | 12 ++++++------ src/objects/_menu.vars.scss | 18 +++++++++--------- src/objects/_popover.vars.scss | 6 +++--- src/objects/_radio.vars.scss | 24 ++++++++++++------------ src/objects/_side-nav.vars.scss | 16 ++++++++-------- src/objects/_status-indicator.vars.scss | 6 +++--- src/objects/_switch.vars.scss | 28 ++++++++++++++-------------- src/objects/_table.vars.scss | 14 +++++++------- src/objects/_text-field.vars.scss | 30 +++++++++++++++--------------- src/scopes/_blockquotes.vars.scss | 2 +- src/scopes/_code.vars.scss | 8 ++++---- src/scopes/_implicit.vars.scss | 2 +- src/scopes/_links.vars.scss | 22 +++++++++++----------- 27 files changed, 149 insertions(+), 155 deletions(-) (limited to 'src') diff --git a/src/_core.vars.scss b/src/_core.vars.scss index 60565c7..53c7067 100644 --- a/src/_core.vars.scss +++ b/src/_core.vars.scss @@ -113,7 +113,7 @@ $-static-colors: (); // -$transparent-colors: props.def(--transparent-colors); +$transparent-colors: props.def(--transparent-colors, (), 'color'); @each $palette-name, $palette in (--black: #000 #fff, --white: #fff #000) { $color: list.nth($palette, 1); @@ -130,7 +130,7 @@ $themes: (); @each $theme-name, $theme in config.$themes { @each $variant-name, $variant in $theme { @if $variant != null { - $compiled: props.def(--colors); + $compiled: props.def(--colors, (), 'color'); @each $palette-name, $palette in $-static-colors { $compiled: props.merge($compiled, ( #{$palette-name}-static: $palette )); diff --git a/src/_props.scss b/src/_props.scss index c18bf76..8b17af0 100644 --- a/src/_props.scss +++ b/src/_props.scss @@ -29,16 +29,10 @@ @each $theme-name in map.keys(config.$themes) { @if $theme-name != config.$theme-default { @include bem.theme(string.slice($theme-name, 3)) { - @include props.materialize($ref, null); + @include props.materialize($ref, 'color'); - @each $breakpoint in map.keys(media.$breakpoints) { - @include media.media('<=#{$breakpoint}') { - @include props.materialize($ref, $breakpoint); - } - } - @media (prefers-color-scheme: dark) { - @include props.materialize($ref, 'dark'); + @include props.materialize($ref, 'color' 'dark'); } } } diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss index da1441c..f77bfbf 100644 --- a/src/layouts/_card-list.vars.scss +++ b/src/layouts/_card-list.vars.scss @@ -19,4 +19,4 @@ $masonry-h--col-gap: props.def(--l-card-list--masonry-h--col-gap, props.g $masonry-h--row-height: props.def(--l-card-list--masonry-h--row-height, props.get(core.$size--3200)) !default; $masonry-h--quiet--row-gap: props.def(--l-card-list--masonry-h--quiet--row-gap, props.get(core.$size--800)) !default; -$border-color: props.def(--l-card-list--border-color, props.get(core.$theme, --border)) !default; +$border-color: props.def(--l-card-list--border-color, props.get(core.$theme, --border), 'color') !default; diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss index 80ef9c8..9afd5d7 100644 --- a/src/objects/_action-button.vars.scss +++ b/src/objects/_action-button.vars.scss @@ -36,7 +36,7 @@ $fixed-sizes: ( 'xl' $pad-i--xl $pad-i-pill--xl $pad-b--xl $font-size--xl, ) !default; -$themes: props.def(--o-action-button); +$themes: props.def(--o-action-button, (), 'color'); $default-theme-override: () !default; $default-theme: map.deep-merge(( @@ -109,7 +109,7 @@ $default-theme: map.deep-merge(( ), ), ), $default-theme-override) !default; -$default-theme: props.def(--o-action-button, $default-theme); +$default-theme: props.def(--o-action-button, $default-theme, 'color'); @each $theme in map.keys(props.get(core.$transparent-colors)) { $button-theme: --static-#{string.slice($theme, 3)}; diff --git a/src/objects/_alert.vars.scss b/src/objects/_alert.vars.scss index 0c140b1..53c9e68 100644 --- a/src/objects/_alert.vars.scss +++ b/src/objects/_alert.vars.scss @@ -6,8 +6,8 @@ $pad-i: props.def(--o-alert--pad-i, props.get(core.$size--250)) !default; $pad-b: props.def(--o-alert--pad-b, props.get(core.$size--200)) !default; $rounding: props.def(--o-alert--rounding, props.get(core.$rounding)) !default; -$bg-color: props.def(--o-alert--bg-color, props.get(core.$theme, --bg-l2)) !default; -$border-color: props.def(--o-alert--border-color, props.get(core.$theme, --text-mute-more)) !default; +$bg-color: props.def(--o-alert--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; +$border-color: props.def(--o-alert--border-color, props.get(core.$theme, --text-mute-more), 'color') !default; $themes-config: ( accent: --accent, @@ -16,7 +16,7 @@ $themes-config: ( warning: --warning, ) !default; -$themes: props.def(--o-alert); +$themes: props.def(--o-alert, (), 'color'); @each $theme, $key in $themes-config { $themes: props.merge($themes, ( diff --git a/src/objects/_avatar.vars.scss b/src/objects/_avatar.vars.scss index a9bb532..72fb397 100644 --- a/src/objects/_avatar.vars.scss +++ b/src/objects/_avatar.vars.scss @@ -35,12 +35,12 @@ $key-focus--border-width: props.def(--o-avatar--key-focus--border-width, props. $key-focus--border-offset: props.def(--o-avatar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; $key-focus--outline-width: props.def(--o-avatar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; -$bg-color--h: props.def(--o-avatar--bg-color--h, 354) !default; -$bg-color--s: props.def(--o-avatar--bg-color--s, 44%) !default; -$bg-color--l: props.def(--o-avatar--bg-color--l, 45%) !default; +$bg-color--h: props.def(--o-avatar--bg-color--h, 354, 'color') !default; +$bg-color--s: props.def(--o-avatar--bg-color--s, 44%, 'color') !default; +$bg-color--l: props.def(--o-avatar--bg-color--l, 45%, 'color') !default; -$key-focus--border-color: props.def(--o-avatar--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; -$key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; +$key-focus--border-color: props.def(--o-avatar--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; +$key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; $sizes: ( 'xs' $size--xs $font-size--xs $indicator-size--xs, diff --git a/src/objects/_backdrop.vars.scss b/src/objects/_backdrop.vars.scss index 6e57652..8bae733 100644 --- a/src/objects/_backdrop.vars.scss +++ b/src/objects/_backdrop.vars.scss @@ -3,4 +3,4 @@ $z-index: props.def(--o-backdrop--z-index, 10000) !default; $blur: props.def(--o-backdrop--blur, 2em) !default; -$bg-color: props.def(--o-backdrop--bg-color, props.get(core.$transparent-colors, --black, --600)) !default; +$bg-color: props.def(--o-backdrop--bg-color, props.get(core.$transparent-colors, --black, --600), 'color') !default; diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss index 4b9bf6d..d96d6c4 100644 --- a/src/objects/_badge.vars.scss +++ b/src/objects/_badge.vars.scss @@ -73,10 +73,10 @@ $default-theme: props.def(--o-badge, ( --label: props.get(core.$theme, --heading), ), ) -)); +), 'color'); $default-theme: props.merge($default-theme, $default-theme-override); -$static-themes: props.def(--o-badge); +$static-themes: props.def(--o-badge, (), 'color'); @each $theme in map.keys(props.get(core.$transparent-colors)) { $badge-theme: --static-#{string.slice($theme, 3)}; @@ -126,7 +126,7 @@ $themes-config: ( warning: --warning, ) !default; -$themes: props.def(--o-badge); +$themes: props.def(--o-badge, (), 'color'); @each $theme, $key in $themes-config { $themes: props.merge($themes, ( diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss index b5e55d9..bd3de91 100644 --- a/src/objects/_button.vars.scss +++ b/src/objects/_button.vars.scss @@ -81,10 +81,10 @@ $default-theme: props.def(--o-button, ( --label: props.get(core.$theme, --base, --900-text), ), ), -)); +), 'color'); $default-theme: props.merge($default-theme, $default-theme-override); -$static-themes: props.def(--o-button); +$static-themes: props.def(--o-button, (), 'color'); @each $theme in map.keys(props.get(core.$transparent-colors)) { $button-theme: --static-#{string.slice($theme, 3)}; @@ -144,7 +144,7 @@ $themes-config: ( negative: --negative, ) !default; -$themes: props.def(--o-button); +$themes: props.def(--o-button, (), 'color'); @each $theme, $key in $themes-config { $themes: props.merge($themes, ( diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss index 256938e..8ee7158 100644 --- a/src/objects/_card.vars.scss +++ b/src/objects/_card.vars.scss @@ -14,12 +14,12 @@ $key-focus--border-width: props.def(--o-card--key-focus--border-width, props.ge $key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; $key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; -$bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2)) !default; -$divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute)) !default; +$bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; +$divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default; -$key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default; -$key-focus--border-color: props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; -$key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; +$key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; +$key-focus--border-color: props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; +$key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; -$quiet--image-color: props.def(--o-card--quiet--image-color, props.get(core.$theme, --bg-base)) !default; -$quiet--hover--image-color: props.def(--o-card--quiet--hover--image-color, props.get(core.$theme, --border)) !default; +$quiet--image-color: props.def(--o-card--quiet--image-color, props.get(core.$theme, --bg-base), 'color') !default; +$quiet--hover--image-color: props.def(--o-card--quiet--hover--image-color, props.get(core.$theme, --border), 'color') !default; diff --git a/src/objects/_checkbox.vars.scss b/src/objects/_checkbox.vars.scss index faad2ba..aee26e6 100644 --- a/src/objects/_checkbox.vars.scss +++ b/src/objects/_checkbox.vars.scss @@ -14,19 +14,19 @@ $key-focus--border-width: props.def(--o-checkbox--key-focus--border-width, prop $key-focus--border-offset: props.def(--o-checkbox--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; $key-focus--outline-width: props.def(--o-checkbox--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; -$box-border-color: props.def(--o-checkbox--box-border-color, props.get(core.$theme, --text-mute-more)) !default; -$box-bg-color: props.def(--o-checkbox--box-bg-color, props.get(core.$theme, --base, --75)) !default; +$box-border-color: props.def(--o-checkbox--box-border-color, props.get(core.$theme, --text-mute-more), 'color') !default; +$box-bg-color: props.def(--o-checkbox--box-bg-color, props.get(core.$theme, --base, --75), 'color') !default; -$hover--label-color: props.def(--o-checkbox--hover--label-color, props.get(core.$theme, --heading)) !default; -$hover--box-border-color: props.def(--o-checkbox--hover--box-border-color, props.get(core.$theme, --text-mute)) !default; +$hover--label-color: props.def(--o-checkbox--hover--label-color, props.get(core.$theme, --heading), 'color') !default; +$hover--box-border-color: props.def(--o-checkbox--hover--box-border-color, props.get(core.$theme, --text-mute), 'color') !default; -$accent--box-border-color: props.def(--o-checkbox--accent--box-border-color, props.get(core.$theme, --accent, --900)) !default; -$accent--hover--box-border-color: props.def(--o-checkbox--accent--hover--box-border-color, props.get(core.$theme, --accent, --1000)) !default; +$accent--box-border-color: props.def(--o-checkbox--accent--box-border-color, props.get(core.$theme, --accent, --900), 'color') !default; +$accent--hover--box-border-color: props.def(--o-checkbox--accent--hover--box-border-color, props.get(core.$theme, --accent, --1000), 'color') !default; -$disabled--label-color: props.def(--o-checkbox--disabled--label-color, props.get(core.$theme, --text-disabled)) !default; -$disabled--box-border-color: props.def(--o-checkbox--disabled--box-border-color, props.get(core.$theme, --border-strong)) !default; -$disabled--box-bg-color: props.def(--o-checkbox--disabled--box-bg-color, props.get(core.$theme, --base, --75)) !default; +$disabled--label-color: props.def(--o-checkbox--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default; +$disabled--box-border-color: props.def(--o-checkbox--disabled--box-border-color, props.get(core.$theme, --border-strong), 'color') !default; +$disabled--box-bg-color: props.def(--o-checkbox--disabled--box-bg-color, props.get(core.$theme, --base, --75), 'color') !default; -$key-focus--label-color: props.def(--o-checkbox--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default; -$key-focus--border-color: props.def(--o-checkbox--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; -$key-focus--outline-color: props.def(--o-checkbox--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; +$key-focus--label-color: props.def(--o-checkbox--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; +$key-focus--border-color: props.def(--o-checkbox--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; +$key-focus--outline-color: props.def(--o-checkbox--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss index 7d50798..1117fd5 100644 --- a/src/objects/_divider.vars.scss +++ b/src/objects/_divider.vars.scss @@ -14,18 +14,18 @@ $medium--label-font-size: props.def(--o-divider--medium--label-font-size, props. $faint--border-width: props.def(--o-divider--faint--border-width, props.get(core.$border-width--thin)) !default; $faint--label-font-size: props.def(--o-divider--faint--label-font-size, props.get(core.$font-size--50)) !default; -$strong--bg-color: props.def(--o-divider--strong--bg-color, props.get(core.$theme, --text)) !default; -$strong--label-color: props.def(--o-divider--strong--label-color, props.get(core.$theme, --text)) !default; +$strong--bg-color: props.def(--o-divider--strong--bg-color, props.get(core.$theme, --text), 'color') !default; +$strong--label-color: props.def(--o-divider--strong--label-color, props.get(core.$theme, --text), 'color') !default; -$medium--bg-color: props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border)) !default; -$medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute)) !default; +$medium--bg-color: props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border), 'color') !default; +$medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute), 'color') !default; -$faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border)) !default; -$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-mute-more)) !default; +$faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border), 'color') !default; +$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-mute-more), 'color') !default; -$vertical--faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute)) !default; +$vertical--faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default; -$static-themes: props.def(--o-divider); +$static-themes: props.def(--o-divider, (), 'color'); @each $theme in map.keys(props.get(core.$transparent-colors)) { $button-theme: --static-#{string.slice($theme, 3)}; @@ -53,7 +53,7 @@ $themes-config: ( negative: --negative, ) !default; -$themes: props.def(--o-divider); +$themes: props.def(--o-divider, (), 'color'); @each $theme, $key in $themes-config { $themes: props.merge($themes, ( diff --git a/src/objects/_emoji.vars.scss b/src/objects/_emoji.vars.scss index 70f838a..fbfb935 100644 --- a/src/objects/_emoji.vars.scss +++ b/src/objects/_emoji.vars.scss @@ -23,4 +23,4 @@ $sizes: ( '200' $size--200 $valign--200, ) !default; -$bg-color: props.def(--o-emoji--bg-color, props.get(core.$theme, --border-mute)) !default; +$bg-color: props.def(--o-emoji--bg-color, props.get(core.$theme, --border-mute), 'color') !default; diff --git a/src/objects/_field-label.vars.scss b/src/objects/_field-label.vars.scss index 1e420c3..844a10b 100644 --- a/src/objects/_field-label.vars.scss +++ b/src/objects/_field-label.vars.scss @@ -6,7 +6,7 @@ $spacing-b: props.def(--o-field-label--spacing-b, props.get(core.$size--85 $label-font-size: props.def(--o-field-label--label-font-size, props.get(core.$font-size--75)) !default; $hint-font-size: props.def(--o-field-label--hint-font-size, props.get(core.$font-size--75)) !default; -$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--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; +$label-color: props.def(--o-field-label--label-color, props.get(core.$theme, --text-mute), 'color') !default; +$hint-color: props.def(--o-field-label--hint-color, props.get(core.$theme, --text-mute), 'color') !default; +$error-hint-color: props.def(--o-field-label--error-hint-color, props.get(core.$theme, --negative, --900), 'color') !default; +$disabled-color: props.def(--o-field-label--disabled-color, props.get(core.$theme, --text-disabled), 'color') !default; diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss index d30068b..969bd44 100644 --- a/src/objects/_lightbox.vars.scss +++ b/src/objects/_lightbox.vars.scss @@ -22,20 +22,20 @@ $nav-button--inline-size: props.def(--o-lightbox--nav-button--inline-size, props $nav-button--block-size: props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--3800)) !default; $nav-button--font-size: props.def(--o-lightbox--nav-button--font-size, props.get(core.$font-size--200)) !default; -$thumbnail--border-color: props.def(--o-lightbox--thumbnail--border-color, props.get(core.$theme, --border-strong)) !default; +$thumbnail--border-color: props.def(--o-lightbox--thumbnail--border-color, props.get(core.$theme, --border-strong), 'color') !default; -$thumbnail--hover--border-color: props.def(--o-lightbox--thumbnail--hover--border-color, props.get(core.$theme, --text-mute-more)) !default; +$thumbnail--hover--border-color: props.def(--o-lightbox--thumbnail--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default; -$thumbnail--selected--border-color: props.def(--o-lightbox--thumbnail--selected--border-color, props.get(core.$theme, --heading)) !default; +$thumbnail--selected--border-color: props.def(--o-lightbox--thumbnail--selected--border-color, props.get(core.$theme, --heading), 'color') !default; -$thumbnail--key-focus--border-color: props.def(--o-lightbox--thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; -$thumbnail--key-focus--outline-color: props.def(--o-lightbox--thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; +$thumbnail--key-focus--border-color: props.def(--o-lightbox--thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; +$thumbnail--key-focus--outline-color: props.def(--o-lightbox--thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; $thumbnail--size--md: props.def(--o-lightbox--thumbnail--size, props.get(core.$size--600), 'md') !default; $nav-button--inline-size--md: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2500), 'md') !default; $nav-button--block-size--md: props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--2500), 'md') !default; -$static-themes: props.def(--o-lightbox); +$static-themes: props.def(--o-lightbox, (), 'color'); @each $theme in map.keys(props.get(core.$transparent-colors)) { $lightbox-theme: --static-#{string.slice($theme, 3)}; diff --git a/src/objects/_menu.vars.scss b/src/objects/_menu.vars.scss index 999f2d3..d242a1f 100644 --- a/src/objects/_menu.vars.scss +++ b/src/objects/_menu.vars.scss @@ -14,16 +14,16 @@ $item--key-focus--border-width: props.def(--o-menu--item--key-focus--border-wid $item--key-focus--border-offset: props.def(--o-menu--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; $item--key-focus--outline-width: props.def(--o-menu--item--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; -$separator-color: props.def(--o-menu--separator-color, props.get(core.$theme, --border)) !default; -$header--label-color: props.def(--o-menu--header--label-color, props.get(core.$theme, --heading)) !default; +$separator-color: props.def(--o-menu--separator-color, props.get(core.$theme, --border), 'color') !default; +$header--label-color: props.def(--o-menu--header--label-color, props.get(core.$theme, --heading), 'color') !default; -$item--hover--bg-color: props.def(--o-menu--item--hover--bg-color, props.get(core.$theme, --border-mute)) !default; -$item--hover--label-color: props.def(--o-menu--item--hover--label-color, props.get(core.$theme, --heading)) !default; +$item--hover--bg-color: props.def(--o-menu--item--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default; +$item--hover--label-color: props.def(--o-menu--item--hover--label-color, props.get(core.$theme, --heading), 'color') !default; -$item--active--bg-color: props.def(--o-menu--item--active--bg-color, props.get(core.$theme, --border)) !default; -$item--active--label-color: props.def(--o-menu--item--active--label-color, props.get(core.$theme, --heading)) !default; +$item--active--bg-color: props.def(--o-menu--item--active--bg-color, props.get(core.$theme, --border), 'color') !default; +$item--active--label-color: props.def(--o-menu--item--active--label-color, props.get(core.$theme, --heading), 'color') !default; -$item--disabled--label-color: props.def(--o-menu--item--disabled--label-color, props.get(core.$theme, --text-disabled)) !default; +$item--disabled--label-color: props.def(--o-menu--item--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default; -$item--key-focus--border-color: props.def(--o-menu--item--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; -$item--key-focus--outline-color: props.def(--o-menu--item--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; +$item--key-focus--border-color: props.def(--o-menu--item--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; +$item--key-focus--outline-color: props.def(--o-menu--item--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; diff --git a/src/objects/_popover.vars.scss b/src/objects/_popover.vars.scss index d0d0ab3..b76112e 100644 --- a/src/objects/_popover.vars.scss +++ b/src/objects/_popover.vars.scss @@ -9,6 +9,6 @@ $separator-width: props.def(--o-popover--separator-width, props.get(core.$size-- $rounding: props.def(--o-popover--rounding, props.get(core.$rounding)) !default; $border-width: props.def(--o-popover--border-width, props.get(core.$border-width--thin)) !default; -$bg-color: props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2)) !default; -$border-color: props.def(--o-popover--border-color, props.get(core.$theme, --border)) !default; -$filter: props.def(--o-popover--filter, drop-shadow(props.get(core.$shadow--x) props.get(core.$shadow--y) props.get(core.$shadow--blur) props.get(core.$theme, --shadow))) !default; +$bg-color: props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; +$border-color: props.def(--o-popover--border-color, props.get(core.$theme, --border), 'color') !default; +$filter: props.def(--o-popover--filter, drop-shadow(props.get(core.$shadow--x) props.get(core.$shadow--y) props.get(core.$shadow--blur) props.get(core.$theme, --shadow)), 'color') !default; diff --git a/src/objects/_radio.vars.scss b/src/objects/_radio.vars.scss index d4e4905..51ea581 100644 --- a/src/objects/_radio.vars.scss +++ b/src/objects/_radio.vars.scss @@ -14,20 +14,20 @@ $key-focus--border-width: props.def(--o-radio--key-focus--border-width, props.g $key-focus--border-offset: props.def(--o-radio--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; $key-focus--outline-width: props.def(--o-radio--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; -$circle-border-color: props.def(--o-radio--circle-border-color, props.get(core.$theme, --text-mute-more)) !default; -$circle-bg-color: props.def(--o-radio--circle-bg-color, props.get(core.$theme, --base, --75)) !default; +$circle-border-color: props.def(--o-radio--circle-border-color, props.get(core.$theme, --text-mute-more), 'color') !default; +$circle-bg-color: props.def(--o-radio--circle-bg-color, props.get(core.$theme, --base, --75), 'color') !default; -$hover--label-color: props.def(--o-radio--hover--label-color, props.get(core.$theme, --heading)) !default; -$hover--circle-border-color: props.def(--o-radio--hover--circle-border-color, props.get(core.$theme, --text-mute)) !default; +$hover--label-color: props.def(--o-radio--hover--label-color, props.get(core.$theme, --heading), 'color') !default; +$hover--circle-border-color: props.def(--o-radio--hover--circle-border-color, props.get(core.$theme, --text-mute), 'color') !default; -$accent--circle-border-color: props.def(--o-radio--accent--circle-border-color, props.get(core.$theme, --accent, --900)) !default; +$accent--circle-border-color: props.def(--o-radio--accent--circle-border-color, props.get(core.$theme, --accent, --900), 'color') !default; -$accent--hover--circle-border-color: props.def(--o-radio--accent--hover--circle-border-color, props.get(core.$theme, --accent, --1000)) !default; +$accent--hover--circle-border-color: props.def(--o-radio--accent--hover--circle-border-color, props.get(core.$theme, --accent, --1000), 'color') !default; -$disabled--label-color: props.def(--o-radio--disabled--label-color, props.get(core.$theme, --text-disabled)) !default; -$disabled--circle-border-color: props.def(--o-radio--disabled--circle-border-color, props.get(core.$theme, --border-strong)) !default; -$disabled--circle-bg-color: props.def(--o-radio--disabled--circle-bg-color, props.get(core.$theme, --base, --75)) !default; +$disabled--label-color: props.def(--o-radio--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default; +$disabled--circle-border-color: props.def(--o-radio--disabled--circle-border-color, props.get(core.$theme, --border-strong), 'color') !default; +$disabled--circle-bg-color: props.def(--o-radio--disabled--circle-bg-color, props.get(core.$theme, --base, --75), 'color') !default; -$key-focus--label-color: props.def(--o-radio--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default; -$key-focus--border-color: props.def(--o-radio--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; -$key-focus--outline-color: props.def(--o-radio--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; +$key-focus--label-color: props.def(--o-radio--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; +$key-focus--border-color: props.def(--o-radio--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; +$key-focus--outline-color: props.def(--o-radio--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; diff --git a/src/objects/_side-nav.vars.scss b/src/objects/_side-nav.vars.scss index 649fec7..122dba6 100644 --- a/src/objects/_side-nav.vars.scss +++ b/src/objects/_side-nav.vars.scss @@ -14,15 +14,15 @@ $item--key-focus--border-width: props.def(--o-side-nav--item--key-focus--border $item--key-focus--border-offset: props.def(--o-side-nav--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; $item--key-focus--outline-width: props.def(--o-side-nav--item--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; -$header--label-color: props.def(--o-side-nav--header--label-color, props.get(core.$theme, --text-mute-more)) !default; +$header--label-color: props.def(--o-side-nav--header--label-color, props.get(core.$theme, --text-mute-more), 'color') !default; -$item--hover--bg-color: props.def(--o-side-nav--item--hover--bg-color, props.get(core.$theme, --border-mute)) !default; -$item--hover--label-color: props.def(--o-side-nav--item--hover--label-color, props.get(core.$theme, --heading)) !default; +$item--hover--bg-color: props.def(--o-side-nav--item--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default; +$item--hover--label-color: props.def(--o-side-nav--item--hover--label-color, props.get(core.$theme, --heading), 'color') !default; -$item--active--bg-color: props.def(--o-side-nav--item--active--bg-color, props.get(core.$theme, --border)) !default; -$item--active--label-color: props.def(--o-side-nav--item--active--label-color, props.get(core.$theme, --heading)) !default; +$item--active--bg-color: props.def(--o-side-nav--item--active--bg-color, props.get(core.$theme, --border), 'color') !default; +$item--active--label-color: props.def(--o-side-nav--item--active--label-color, props.get(core.$theme, --heading), 'color') !default; -$item--disabled--label-color: props.def(--o-side-nav--item--disabled--label-color, props.get(core.$theme, --text-disabled)) !default; +$item--disabled--label-color: props.def(--o-side-nav--item--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default; -$item--key-focus--border-color: props.def(--o-side-nav--item--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; -$item--key-focus--outline-color: props.def(--o-side-nav--item--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; +$item--key-focus--border-color: props.def(--o-side-nav--item--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; +$item--key-focus--outline-color: props.def(--o-side-nav--item--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; diff --git a/src/objects/_status-indicator.vars.scss b/src/objects/_status-indicator.vars.scss index d8465d7..6289145 100644 --- a/src/objects/_status-indicator.vars.scss +++ b/src/objects/_status-indicator.vars.scss @@ -5,8 +5,8 @@ $size: props.def(--o-status-indicator--size, props.get(core.$size--125)) !default; -$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; +$default: props.def(--o-status-indicator--default, props.get(core.$theme, --border-strong), 'color') !default; +$primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text), 'color') !default; $themes-config: ( accent: --accent, @@ -15,7 +15,7 @@ $themes-config: ( warning: --warning, ) !default; -$themes: props.def(--o-status-indicator); +$themes: props.def(--o-status-indicator, (), 'color'); @each $theme, $key in $themes-config { @if $theme != --base { diff --git a/src/objects/_switch.vars.scss b/src/objects/_switch.vars.scss index 6f9a23f..85596af 100644 --- a/src/objects/_switch.vars.scss +++ b/src/objects/_switch.vars.scss @@ -15,23 +15,23 @@ $key-focus--border-width: props.def(--o-switch--key-focus--border-width, props. $key-focus--border-offset: props.def(--o-switch--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; $key-focus--outline-width: props.def(--o-switch--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; -$track-bg-color: props.def(--o-switch--track-bg-color, props.get(core.$theme, --border)) !default; -$handle-border-color: props.def(--o-switch--handle-border-color, props.get(core.$theme, --text-mute-more)) !default; -$handle-bg-color: props.def(--o-switch--handle-bg-color, props.get(core.$theme, --base, --50)) !default; +$track-bg-color: props.def(--o-switch--track-bg-color, props.get(core.$theme, --border), 'color') !default; +$handle-border-color: props.def(--o-switch--handle-border-color, props.get(core.$theme, --text-mute-more), 'color') !default; +$handle-bg-color: props.def(--o-switch--handle-bg-color, props.get(core.$theme, --base, --50), 'color') !default; -$hover--label-color: props.def(--o-switch--hover--label-color, props.get(core.$theme, --heading)) !default; -$hover--handle-border-color: props.def(--o-switch--hover--handle-border-color, props.get(core.$theme, --text-mute)) !default; +$hover--label-color: props.def(--o-switch--hover--label-color, props.get(core.$theme, --heading), 'color') !default; +$hover--handle-border-color: props.def(--o-switch--hover--handle-border-color, props.get(core.$theme, --text-mute), 'color') !default; -$accent--handle-border-color: props.def(--o-switch--accent--handle-border-color, props.get(core.$theme, --accent, --900)) !default; +$accent--handle-border-color: props.def(--o-switch--accent--handle-border-color, props.get(core.$theme, --accent, --900), 'color') !default; -$accent--hover--handle-border-color: props.def(--o-switch--accent--hover--handle-border-color, props.get(core.$theme, --accent, --1000)) !default; +$accent--hover--handle-border-color: props.def(--o-switch--accent--hover--handle-border-color, props.get(core.$theme, --accent, --1000), 'color') !default; -$disabled--label-color: props.def(--o-switch--disabled--label-color, props.get(core.$theme, --text-disabled)) !default; -$disabled--track-bg-color: props.def(--o-switch--disabled--track-bg-color, props.get(core.$theme, --border)) !default; -$disabled--handle-border-color: props.def(--o-switch--disabled--handle-border-color, props.get(core.$theme, --border-strong)) !default; -$disabled--handle-bg-color: props.def(--o-switch--disabled--handle-bg-color, props.get(core.$theme, --base, --50)) !default; +$disabled--label-color: props.def(--o-switch--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default; +$disabled--track-bg-color: props.def(--o-switch--disabled--track-bg-color, props.get(core.$theme, --border), 'color') !default; +$disabled--handle-border-color: props.def(--o-switch--disabled--handle-border-color, props.get(core.$theme, --border-strong), 'color') !default; +$disabled--handle-bg-color: props.def(--o-switch--disabled--handle-bg-color, props.get(core.$theme, --base, --50), 'color') !default; -$key-focus--label-color: props.def(--o-switch--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default; -$key-focus--border-color: props.def(--o-switch--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; -$key-focus--outline-color: props.def(--o-switch--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; +$key-focus--label-color: props.def(--o-switch--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; +$key-focus--border-color: props.def(--o-switch--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; +$key-focus--outline-color: props.def(--o-switch--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; diff --git a/src/objects/_table.vars.scss b/src/objects/_table.vars.scss index 6acbe88..d1d53d7 100644 --- a/src/objects/_table.vars.scss +++ b/src/objects/_table.vars.scss @@ -15,11 +15,11 @@ $heading--letter-spacing: props.def(--o-table--heading--letter-spacing, .5px) !d $pad-b--sm: props.def(--o-table--sm--pad-b, props.get(core.$size--75)) !default; -$border-color: props.def(--o-table--border-color, props.get(core.$theme, --border)) !default; -$heading-color: props.def(--o-table--heading-color, props.get(core.$theme, --heading)) !default; -$hover--bg-color: props.def(--o-table--hover--bg-color, props.get(core.$theme, --border-mute)) !default; -$active--bg-color: props.def(--o-table--active--bg-color, props.get(core.$theme, --border)) !default; +$border-color: props.def(--o-table--border-color, props.get(core.$theme, --border), 'color') !default; +$heading-color: props.def(--o-table--heading-color, props.get(core.$theme, --heading), 'color') !default; +$hover--bg-color: props.def(--o-table--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default; +$active--bg-color: props.def(--o-table--active--bg-color, props.get(core.$theme, --border), 'color') !default; -$box--bg-color: props.def(--o-table--box--bg-color, props.get(core.$theme, --base, --50)) !default; -$box--hover--bg-color: props.def(--o-table--box--hover--bg-color, props.get(core.$theme, --bg-base)) !default; -$box--active--bg-color: props.def(--o-table--box--active--bg-color, props.get(core.$theme, --border-mute)) !default; +$box--bg-color: props.def(--o-table--box--bg-color, props.get(core.$theme, --base, --50), 'color') !default; +$box--hover--bg-color: props.def(--o-table--box--hover--bg-color, props.get(core.$theme, --bg-base), 'color') !default; +$box--active--bg-color: props.def(--o-table--box--active--bg-color, props.get(core.$theme, --border-mute), 'color') !default; diff --git a/src/objects/_text-field.vars.scss b/src/objects/_text-field.vars.scss index d119629..833eacb 100644 --- a/src/objects/_text-field.vars.scss +++ b/src/objects/_text-field.vars.scss @@ -14,25 +14,25 @@ $focus--border-width: props.def(--o-text-field--focus--border-width, props.get(c $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, --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; +$bg-color: props.def(--o-text-field--bg-color, props.get(core.$theme, --base, --50), 'color') !default; +$placeholder-color: props.def(--o-text-field--placeholder-color, props.get(core.$theme, --text-mute-more), 'color') !default; +$text-color: props.def(--o-text-field--text-color, props.get(core.$theme, --text), 'color') !default; +$border-color: props.def(--o-text-field--border-color, props.get(core.$theme, --border-strong), 'color') !default; -$hover--border-color: props.def(--o-text-field--hover--border-color, props.get(core.$theme, --text-mute-more)) !default; +$hover--border-color: props.def(--o-text-field--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default; -$focus--border-color: props.def(--o-text-field--focus--border-color, props.get(core.$theme, --focus, --border)) !default; +$focus--border-color: props.def(--o-text-field--focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; -$key-focus--border-color: props.def(--o-text-field--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; -$key-focus--outline-color: props.def(--o-text-field--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; +$key-focus--border-color: props.def(--o-text-field--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; +$key-focus--outline-color: props.def(--o-text-field--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; -$error--border-color: props.def(--o-text-field--error--border-color, props.get(core.$theme, --negative, --700)) !default; +$error--border-color: props.def(--o-text-field--error--border-color, props.get(core.$theme, --negative, --700), 'color') !default; -$error--hover--border-color: props.def(--o-text-field--error--hover--border-color, props.get(core.$theme, --negative, --900)) !default; +$error--hover--border-color: props.def(--o-text-field--error--hover--border-color, props.get(core.$theme, --negative, --900), 'color') !default; -$error--focus--border-color: props.def(--o-text-field--error--focus--border-color, props.get(core.$theme, --negative, --900)) !default; +$error--focus--border-color: props.def(--o-text-field--error--focus--border-color, props.get(core.$theme, --negative, --900), 'color') !default; -$disabled--bg-color: props.def(--o-text-field--disabled--bg-color, props.get(core.$theme, --border-mute)) !default; -$disabled--placeholder-color: props.def(--o-text-field--disabled--placeholder-color, props.get(core.$theme, --text-disabled)) !default; -$disabled--text-color: props.def(--o-text-field--disabled--text-color, props.get(core.$theme, --text-disabled)) !default; -$disabled--border-color: props.def(--o-text-field--disabled--border-color, props.get(core.$theme, --border-mute)) !default; +$disabled--bg-color: props.def(--o-text-field--disabled--bg-color, props.get(core.$theme, --border-mute), 'color') !default; +$disabled--placeholder-color: props.def(--o-text-field--disabled--placeholder-color, props.get(core.$theme, --text-disabled), 'color') !default; +$disabled--text-color: props.def(--o-text-field--disabled--text-color, props.get(core.$theme, --text-disabled), 'color') !default; +$disabled--border-color: props.def(--o-text-field--disabled--border-color, props.get(core.$theme, --border-mute), 'color') !default; diff --git a/src/scopes/_blockquotes.vars.scss b/src/scopes/_blockquotes.vars.scss index f0b0484..9db1271 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-color, props.get(core.$theme, --border)) !default; +$border-color: props.def(--s-blockquotes--border-color, props.get(core.$theme, --border), 'color') !default; diff --git a/src/scopes/_code.vars.scss b/src/scopes/_code.vars.scss index 581347c..c1bf27c 100644 --- a/src/scopes/_code.vars.scss +++ b/src/scopes/_code.vars.scss @@ -11,8 +11,8 @@ $block--pad-b: props.def(--s-code--block--pad-b, props.get(core.$size--85)) $block--margin-bs: props.def(--s-code--block--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; $block--rounding: props.def(--s-code--block--rounding, props.get(core.$rounding)) !default; -$inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --red, --1200)) !default; -$inline--bg: props.def(--s-code--inline--bg, props.get(core.$theme, --red, --200)) !default; +$inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --red, --1200), 'color') !default; +$inline--bg: props.def(--s-code--inline--bg, props.get(core.$theme, --red, --200), 'color') !default; -$block--fg: props.def(--s-code--block--fg, props.get(core.$theme, --text)) !default; -$block--bg: props.def(--s-code--block--bg, props.get(core.$theme, --base, --50)) !default; +$block--fg: props.def(--s-code--block--fg, props.get(core.$theme, --text), 'color') !default; +$block--bg: props.def(--s-code--block--bg, props.get(core.$theme, --base, --50), 'color') !default; diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss index 0b0f326..0002591 100644 --- a/src/scopes/_implicit.vars.scss +++ b/src/scopes/_implicit.vars.scss @@ -23,4 +23,4 @@ $heading--font-weight: props.def(--s-implicit--heading--font-weight, props $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)); +$heading--color: props.def(--s-implicit--heading--color, props.get(core.$theme, --heading), 'color'); diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss index 7fae0c9..91a73ab 100644 --- a/src/scopes/_links.vars.scss +++ b/src/scopes/_links.vars.scss @@ -11,21 +11,21 @@ $key-focus--border-width: props.def(--s-links--key-focus--border-width, props.g $key-focus--border-offset: props.def(--s-links--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; $key-focus--outline-width: props.def(--s-links--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; -$underline-color: props.def(--s-links--underline-color, props.get(core.$theme, --text-mute-more)) !default; +$underline-color: props.def(--s-links--underline-color, props.get(core.$theme, --text-mute-more), 'color') !default; -$colored--text-color: props.def(--s-links--colored--text-color, props.get(core.$theme, --accent, --1100)) !default; -$colored--underline-color: props.def(--s-links--colored--underline-color, props.get(core.$theme, --accent, --600)) !default; -$colored--hover--text-color: props.def(--s-links--colored--hover--text-color, props.get(core.$theme, --accent, --1300)) !default; +$colored--text-color: props.def(--s-links--colored--text-color, props.get(core.$theme, --accent, --1100), 'color') !default; +$colored--underline-color: props.def(--s-links--colored--underline-color, props.get(core.$theme, --accent, --600), 'color') !default; +$colored--hover--text-color: props.def(--s-links--colored--hover--text-color, props.get(core.$theme, --accent, --1300), 'color') !default; -$colored--visited--text-color: props.def(--s-links--colored--visited--text-color, props.get(core.$theme, --purple, --1100)) !default; -$colored--visited--underline-color: props.def(--s-links--colored--visited--underline-color, props.get(core.$theme, --purple, --600)) !default; -$colored--visited--hover--text-color: props.def(--s-links--colored--visited--hover--text-color, props.get(core.$theme, --purple, --1300)) !default; +$colored--visited--text-color: props.def(--s-links--colored--visited--text-color, props.get(core.$theme, --purple, --1100), 'color') !default; +$colored--visited--underline-color: props.def(--s-links--colored--visited--underline-color, props.get(core.$theme, --purple, --600), 'color') !default; +$colored--visited--hover--text-color: props.def(--s-links--colored--visited--hover--text-color, props.get(core.$theme, --purple, --1300), 'color') !default; -$key-focus--text-color: props.def(--s-links--key-focus--text-color, props.get(core.$theme, --focus, --text)) !default; -$key-focus--border-color: props.def(--s-links--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; -$key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; +$key-focus--text-color: props.def(--s-links--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default; +$key-focus--border-color: props.def(--s-links--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; +$key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; -$static-themes: props.def(--s-links); +$static-themes: props.def(--s-links, (), 'color'); @each $theme in map.keys(props.get(core.$transparent-colors)) { $link-theme: --static-#{string.slice($theme, 3)}; -- cgit v1.2.3-70-g09d2