From e0815613914e16d73a30efe709a74b994cc31963 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Fri, 25 Oct 2024 19:37:52 +0200
Subject: More efficient theming

---
 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 +++++++++++++++---------------
 20 files changed, 127 insertions(+), 127 deletions(-)

(limited to 'src/objects')

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;
-- 
cgit v1.2.3-70-g09d2