summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-10-25 19:37:52 +0200
committerVolpeon <git@volpeon.ink>2024-10-25 19:37:52 +0200
commite0815613914e16d73a30efe709a74b994cc31963 (patch)
tree9876cb3b6937173fd4dd62958d5c9d1ba6feea87
parentNew palette generation (diff)
downloadiro-design-e0815613914e16d73a30efe709a74b994cc31963.tar.gz
iro-design-e0815613914e16d73a30efe709a74b994cc31963.tar.bz2
iro-design-e0815613914e16d73a30efe709a74b994cc31963.zip
More efficient theming
Diffstat
-rw-r--r--package.json2
-rw-r--r--pnpm-lock.yaml10
-rw-r--r--src/_core.vars.scss4
-rw-r--r--src/_props.scss10
-rw-r--r--src/layouts/_card-list.vars.scss2
-rw-r--r--src/objects/_action-button.vars.scss4
-rw-r--r--src/objects/_alert.vars.scss6
-rw-r--r--src/objects/_avatar.vars.scss10
-rw-r--r--src/objects/_backdrop.vars.scss2
-rw-r--r--src/objects/_badge.vars.scss6
-rw-r--r--src/objects/_button.vars.scss6
-rw-r--r--src/objects/_card.vars.scss14
-rw-r--r--src/objects/_checkbox.vars.scss24
-rw-r--r--src/objects/_divider.vars.scss18
-rw-r--r--src/objects/_emoji.vars.scss2
-rw-r--r--src/objects/_field-label.vars.scss8
-rw-r--r--src/objects/_lightbox.vars.scss12
-rw-r--r--src/objects/_menu.vars.scss18
-rw-r--r--src/objects/_popover.vars.scss6
-rw-r--r--src/objects/_radio.vars.scss24
-rw-r--r--src/objects/_side-nav.vars.scss16
-rw-r--r--src/objects/_status-indicator.vars.scss6
-rw-r--r--src/objects/_switch.vars.scss28
-rw-r--r--src/objects/_table.vars.scss14
-rw-r--r--src/objects/_text-field.vars.scss30
-rw-r--r--src/scopes/_blockquotes.vars.scss2
-rw-r--r--src/scopes/_code.vars.scss8
-rw-r--r--src/scopes/_implicit.vars.scss2
-rw-r--r--src/scopes/_links.vars.scss22
29 files changed, 155 insertions, 161 deletions
diff --git a/package.json b/package.json
index 6b07c26..cca47a5 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
20 }, 20 },
21 "dependencies": { 21 "dependencies": {
22 "include-media": "^2.0.0", 22 "include-media": "^2.0.0",
23 "iro-sass": "git+https://git.vulpes.one/git/iro-sass.git#a9efa537b7ecd99caebb92cc3912a03d2bb7bdaf" 23 "iro-sass": "git+https://git.vulpes.one/git/iro-sass.git#5f45b25eb0a677138081b5fb72394a395934cc84"
24 }, 24 },
25 "devDependencies": { 25 "devDependencies": {
26 "iro-icons": "git+https://git.vulpes.one/git/iro-icons.git#8b921f634a565fd9bb8f6e0ddb1b4d7ba207c0a0", 26 "iro-icons": "git+https://git.vulpes.one/git/iro-icons.git#8b921f634a565fd9bb8f6e0ddb1b4d7ba207c0a0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 08ad701..4fce88d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,8 +12,8 @@ importers:
12 specifier: ^2.0.0 12 specifier: ^2.0.0
13 version: 2.0.0 13 version: 2.0.0
14 iro-sass: 14 iro-sass:
15 specifier: git+https://git.vulpes.one/git/iro-sass.git#a9efa537b7ecd99caebb92cc3912a03d2bb7bdaf 15 specifier: git+https://git.vulpes.one/git/iro-sass.git#5f45b25eb0a677138081b5fb72394a395934cc84
16 version: git+https://git.vulpes.one/git/iro-sass.git#a9efa537b7ecd99caebb92cc3912a03d2bb7bdaf 16 version: git+https://git.vulpes.one/git/iro-sass.git#5f45b25eb0a677138081b5fb72394a395934cc84
17 devDependencies: 17 devDependencies:
18 iro-icons: 18 iro-icons:
19 specifier: git+https://git.vulpes.one/git/iro-icons.git#8b921f634a565fd9bb8f6e0ddb1b4d7ba207c0a0 19 specifier: git+https://git.vulpes.one/git/iro-icons.git#8b921f634a565fd9bb8f6e0ddb1b4d7ba207c0a0
@@ -688,8 +688,8 @@ packages:
688 peerDependencies: 688 peerDependencies:
689 svg-sprite: ^2.0.2 689 svg-sprite: ^2.0.2
690 690
691 iro-sass@git+https://git.vulpes.one/git/iro-sass.git#a9efa537b7ecd99caebb92cc3912a03d2bb7bdaf: 691 iro-sass@git+https://git.vulpes.one/git/iro-sass.git#5f45b25eb0a677138081b5fb72394a395934cc84:
692 resolution: {commit: a9efa537b7ecd99caebb92cc3912a03d2bb7bdaf, repo: https://git.vulpes.one/git/iro-sass.git, type: git} 692 resolution: {commit: 5f45b25eb0a677138081b5fb72394a395934cc84, repo: https://git.vulpes.one/git/iro-sass.git, type: git}
693 version: 1.0.2 693 version: 1.0.2
694 694
695 is-arrayish@0.2.1: 695 is-arrayish@0.2.1:
@@ -1916,7 +1916,7 @@ snapshots:
1916 dependencies: 1916 dependencies:
1917 svg-sprite: 2.0.4 1917 svg-sprite: 2.0.4
1918 1918
1919 iro-sass@git+https://git.vulpes.one/git/iro-sass.git#a9efa537b7ecd99caebb92cc3912a03d2bb7bdaf: {} 1919 iro-sass@git+https://git.vulpes.one/git/iro-sass.git#5f45b25eb0a677138081b5fb72394a395934cc84: {}
1920 1920
1921 is-arrayish@0.2.1: {} 1921 is-arrayish@0.2.1: {}
1922 1922
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: ();
113 113
114// 114//
115 115
116$transparent-colors: props.def(--transparent-colors); 116$transparent-colors: props.def(--transparent-colors, (), 'color');
117 117
118@each $palette-name, $palette in (--black: #000 #fff, --white: #fff #000) { 118@each $palette-name, $palette in (--black: #000 #fff, --white: #fff #000) {
119 $color: list.nth($palette, 1); 119 $color: list.nth($palette, 1);
@@ -130,7 +130,7 @@ $themes: ();
130@each $theme-name, $theme in config.$themes { 130@each $theme-name, $theme in config.$themes {
131 @each $variant-name, $variant in $theme { 131 @each $variant-name, $variant in $theme {
132 @if $variant != null { 132 @if $variant != null {
133 $compiled: props.def(--colors); 133 $compiled: props.def(--colors, (), 'color');
134 134
135 @each $palette-name, $palette in $-static-colors { 135 @each $palette-name, $palette in $-static-colors {
136 $compiled: props.merge($compiled, ( #{$palette-name}-static: $palette )); 136 $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 @@
29 @each $theme-name in map.keys(config.$themes) { 29 @each $theme-name in map.keys(config.$themes) {
30 @if $theme-name != config.$theme-default { 30 @if $theme-name != config.$theme-default {
31 @include bem.theme(string.slice($theme-name, 3)) { 31 @include bem.theme(string.slice($theme-name, 3)) {
32 @include props.materialize($ref, null); 32 @include props.materialize($ref, 'color');
33 33
34 @each $breakpoint in map.keys(media.$breakpoints) {
35 @include media.media('<=#{$breakpoint}') {
36 @include props.materialize($ref, $breakpoint);
37 }
38 }
39
40 @media (prefers-color-scheme: dark) { 34 @media (prefers-color-scheme: dark) {
41 @include props.materialize($ref, 'dark'); 35 @include props.materialize($ref, 'color' 'dark');
42 } 36 }
43 } 37 }
44 } 38 }
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
19$masonry-h--row-height: props.def(--l-card-list--masonry-h--row-height, props.get(core.$size--3200)) !default; 19$masonry-h--row-height: props.def(--l-card-list--masonry-h--row-height, props.get(core.$size--3200)) !default;
20$masonry-h--quiet--row-gap: props.def(--l-card-list--masonry-h--quiet--row-gap, props.get(core.$size--800)) !default; 20$masonry-h--quiet--row-gap: props.def(--l-card-list--masonry-h--quiet--row-gap, props.get(core.$size--800)) !default;
21 21
22$border-color: props.def(--l-card-list--border-color, props.get(core.$theme, --border)) !default; 22$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: (
36 'xl' $pad-i--xl $pad-i-pill--xl $pad-b--xl $font-size--xl, 36 'xl' $pad-i--xl $pad-i-pill--xl $pad-b--xl $font-size--xl,
37) !default; 37) !default;
38 38
39$themes: props.def(--o-action-button); 39$themes: props.def(--o-action-button, (), 'color');
40 40
41$default-theme-override: () !default; 41$default-theme-override: () !default;
42$default-theme: map.deep-merge(( 42$default-theme: map.deep-merge((
@@ -109,7 +109,7 @@ $default-theme: map.deep-merge((
109 ), 109 ),
110 ), 110 ),
111), $default-theme-override) !default; 111), $default-theme-override) !default;
112$default-theme: props.def(--o-action-button, $default-theme); 112$default-theme: props.def(--o-action-button, $default-theme, 'color');
113 113
114@each $theme in map.keys(props.get(core.$transparent-colors)) { 114@each $theme in map.keys(props.get(core.$transparent-colors)) {
115 $button-theme: --static-#{string.slice($theme, 3)}; 115 $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;
6$pad-b: props.def(--o-alert--pad-b, props.get(core.$size--200)) !default; 6$pad-b: props.def(--o-alert--pad-b, props.get(core.$size--200)) !default;
7$rounding: props.def(--o-alert--rounding, props.get(core.$rounding)) !default; 7$rounding: props.def(--o-alert--rounding, props.get(core.$rounding)) !default;
8 8
9$bg-color: props.def(--o-alert--bg-color, props.get(core.$theme, --bg-l2)) !default; 9$bg-color: props.def(--o-alert--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
10$border-color: props.def(--o-alert--border-color, props.get(core.$theme, --text-mute-more)) !default; 10$border-color: props.def(--o-alert--border-color, props.get(core.$theme, --text-mute-more), 'color') !default;
11 11
12$themes-config: ( 12$themes-config: (
13 accent: --accent, 13 accent: --accent,
@@ -16,7 +16,7 @@ $themes-config: (
16 warning: --warning, 16 warning: --warning,
17) !default; 17) !default;
18 18
19$themes: props.def(--o-alert); 19$themes: props.def(--o-alert, (), 'color');
20 20
21@each $theme, $key in $themes-config { 21@each $theme, $key in $themes-config {
22 $themes: props.merge($themes, ( 22 $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.
35$key-focus--border-offset: props.def(--o-avatar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 35$key-focus--border-offset: props.def(--o-avatar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
36$key-focus--outline-width: props.def(--o-avatar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; 36$key-focus--outline-width: props.def(--o-avatar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
37 37
38$bg-color--h: props.def(--o-avatar--bg-color--h, 354) !default; 38$bg-color--h: props.def(--o-avatar--bg-color--h, 354, 'color') !default;
39$bg-color--s: props.def(--o-avatar--bg-color--s, 44%) !default; 39$bg-color--s: props.def(--o-avatar--bg-color--s, 44%, 'color') !default;
40$bg-color--l: props.def(--o-avatar--bg-color--l, 45%) !default; 40$bg-color--l: props.def(--o-avatar--bg-color--l, 45%, 'color') !default;
41 41
42$key-focus--border-color: props.def(--o-avatar--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; 42$key-focus--border-color: props.def(--o-avatar--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
43$key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; 43$key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
44 44
45$sizes: ( 45$sizes: (
46 'xs' $size--xs $font-size--xs $indicator-size--xs, 46 '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 @@
3 3
4$z-index: props.def(--o-backdrop--z-index, 10000) !default; 4$z-index: props.def(--o-backdrop--z-index, 10000) !default;
5$blur: props.def(--o-backdrop--blur, 2em) !default; 5$blur: props.def(--o-backdrop--blur, 2em) !default;
6$bg-color: props.def(--o-backdrop--bg-color, props.get(core.$transparent-colors, --black, --600)) !default; 6$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, (
73 --label: props.get(core.$theme, --heading), 73 --label: props.get(core.$theme, --heading),
74 ), 74 ),
75 ) 75 )
76)); 76), 'color');
77$default-theme: props.merge($default-theme, $default-theme-override); 77$default-theme: props.merge($default-theme, $default-theme-override);
78 78
79$static-themes: props.def(--o-badge); 79$static-themes: props.def(--o-badge, (), 'color');
80 80
81@each $theme in map.keys(props.get(core.$transparent-colors)) { 81@each $theme in map.keys(props.get(core.$transparent-colors)) {
82 $badge-theme: --static-#{string.slice($theme, 3)}; 82 $badge-theme: --static-#{string.slice($theme, 3)};
@@ -126,7 +126,7 @@ $themes-config: (
126 warning: --warning, 126 warning: --warning,
127) !default; 127) !default;
128 128
129$themes: props.def(--o-badge); 129$themes: props.def(--o-badge, (), 'color');
130 130
131@each $theme, $key in $themes-config { 131@each $theme, $key in $themes-config {
132 $themes: props.merge($themes, ( 132 $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, (
81 --label: props.get(core.$theme, --base, --900-text), 81 --label: props.get(core.$theme, --base, --900-text),
82 ), 82 ),
83 ), 83 ),
84)); 84), 'color');
85$default-theme: props.merge($default-theme, $default-theme-override); 85$default-theme: props.merge($default-theme, $default-theme-override);
86 86
87$static-themes: props.def(--o-button); 87$static-themes: props.def(--o-button, (), 'color');
88 88
89@each $theme in map.keys(props.get(core.$transparent-colors)) { 89@each $theme in map.keys(props.get(core.$transparent-colors)) {
90 $button-theme: --static-#{string.slice($theme, 3)}; 90 $button-theme: --static-#{string.slice($theme, 3)};
@@ -144,7 +144,7 @@ $themes-config: (
144 negative: --negative, 144 negative: --negative,
145) !default; 145) !default;
146 146
147$themes: props.def(--o-button); 147$themes: props.def(--o-button, (), 'color');
148 148
149@each $theme, $key in $themes-config { 149@each $theme, $key in $themes-config {
150 $themes: props.merge($themes, ( 150 $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
14$key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 14$key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
15$key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; 15$key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
16 16
17$bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2)) !default; 17$bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
18$divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute)) !default; 18$divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default;
19 19
20$key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default; 20$key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
21$key-focus--border-color: props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; 21$key-focus--border-color: props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
22$key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; 22$key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
23 23
24$quiet--image-color: props.def(--o-card--quiet--image-color, props.get(core.$theme, --bg-base)) !default; 24$quiet--image-color: props.def(--o-card--quiet--image-color, props.get(core.$theme, --bg-base), 'color') !default;
25$quiet--hover--image-color: props.def(--o-card--quiet--hover--image-color, props.get(core.$theme, --border)) !default; 25$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
14$key-focus--border-offset: props.def(--o-checkbox--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 14$key-focus--border-offset: props.def(--o-checkbox--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
15$key-focus--outline-width: props.def(--o-checkbox--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; 15$key-focus--outline-width: props.def(--o-checkbox--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
16 16
17$box-border-color: props.def(--o-checkbox--box-border-color, props.get(core.$theme, --text-mute-more)) !default; 17$box-border-color: props.def(--o-checkbox--box-border-color, props.get(core.$theme, --text-mute-more), 'color') !default;
18$box-bg-color: props.def(--o-checkbox--box-bg-color, props.get(core.$theme, --base, --75)) !default; 18$box-bg-color: props.def(--o-checkbox--box-bg-color, props.get(core.$theme, --base, --75), 'color') !default;
19 19
20$hover--label-color: props.def(--o-checkbox--hover--label-color, props.get(core.$theme, --heading)) !default; 20$hover--label-color: props.def(--o-checkbox--hover--label-color, props.get(core.$theme, --heading), 'color') !default;
21$hover--box-border-color: props.def(--o-checkbox--hover--box-border-color, props.get(core.$theme, --text-mute)) !default; 21$hover--box-border-color: props.def(--o-checkbox--hover--box-border-color, props.get(core.$theme, --text-mute), 'color') !default;
22 22
23$accent--box-border-color: props.def(--o-checkbox--accent--box-border-color, props.get(core.$theme, --accent, --900)) !default; 23$accent--box-border-color: props.def(--o-checkbox--accent--box-border-color, props.get(core.$theme, --accent, --900), 'color') !default;
24$accent--hover--box-border-color: props.def(--o-checkbox--accent--hover--box-border-color, props.get(core.$theme, --accent, --1000)) !default; 24$accent--hover--box-border-color: props.def(--o-checkbox--accent--hover--box-border-color, props.get(core.$theme, --accent, --1000), 'color') !default;
25 25
26$disabled--label-color: props.def(--o-checkbox--disabled--label-color, props.get(core.$theme, --text-disabled)) !default; 26$disabled--label-color: props.def(--o-checkbox--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
27$disabled--box-border-color: props.def(--o-checkbox--disabled--box-border-color, props.get(core.$theme, --border-strong)) !default; 27$disabled--box-border-color: props.def(--o-checkbox--disabled--box-border-color, props.get(core.$theme, --border-strong), 'color') !default;
28$disabled--box-bg-color: props.def(--o-checkbox--disabled--box-bg-color, props.get(core.$theme, --base, --75)) !default; 28$disabled--box-bg-color: props.def(--o-checkbox--disabled--box-bg-color, props.get(core.$theme, --base, --75), 'color') !default;
29 29
30$key-focus--label-color: props.def(--o-checkbox--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default; 30$key-focus--label-color: props.def(--o-checkbox--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
31$key-focus--border-color: props.def(--o-checkbox--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; 31$key-focus--border-color: props.def(--o-checkbox--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
32$key-focus--outline-color: props.def(--o-checkbox--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; 32$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.
14$faint--border-width: props.def(--o-divider--faint--border-width, props.get(core.$border-width--thin)) !default; 14$faint--border-width: props.def(--o-divider--faint--border-width, props.get(core.$border-width--thin)) !default;
15$faint--label-font-size: props.def(--o-divider--faint--label-font-size, props.get(core.$font-size--50)) !default; 15$faint--label-font-size: props.def(--o-divider--faint--label-font-size, props.get(core.$font-size--50)) !default;
16 16
17$strong--bg-color: props.def(--o-divider--strong--bg-color, props.get(core.$theme, --text)) !default; 17$strong--bg-color: props.def(--o-divider--strong--bg-color, props.get(core.$theme, --text), 'color') !default;
18$strong--label-color: props.def(--o-divider--strong--label-color, props.get(core.$theme, --text)) !default; 18$strong--label-color: props.def(--o-divider--strong--label-color, props.get(core.$theme, --text), 'color') !default;
19 19
20$medium--bg-color: props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border)) !default; 20$medium--bg-color: props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border), 'color') !default;
21$medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute)) !default; 21$medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute), 'color') !default;
22 22
23$faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border)) !default; 23$faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border), 'color') !default;
24$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-mute-more)) !default; 24$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-mute-more), 'color') !default;
25 25
26$vertical--faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute)) !default; 26$vertical--faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
27 27
28$static-themes: props.def(--o-divider); 28$static-themes: props.def(--o-divider, (), 'color');
29 29
30@each $theme in map.keys(props.get(core.$transparent-colors)) { 30@each $theme in map.keys(props.get(core.$transparent-colors)) {
31 $button-theme: --static-#{string.slice($theme, 3)}; 31 $button-theme: --static-#{string.slice($theme, 3)};
@@ -53,7 +53,7 @@ $themes-config: (
53 negative: --negative, 53 negative: --negative,
54) !default; 54) !default;
55 55
56$themes: props.def(--o-divider); 56$themes: props.def(--o-divider, (), 'color');
57 57
58@each $theme, $key in $themes-config { 58@each $theme, $key in $themes-config {
59 $themes: props.merge($themes, ( 59 $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: (
23 '200' $size--200 $valign--200, 23 '200' $size--200 $valign--200,
24) !default; 24) !default;
25 25
26$bg-color: props.def(--o-emoji--bg-color, props.get(core.$theme, --border-mute)) !default; 26$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
6$label-font-size: props.def(--o-field-label--label-font-size, props.get(core.$font-size--75)) !default; 6$label-font-size: props.def(--o-field-label--label-font-size, props.get(core.$font-size--75)) !default;
7$hint-font-size: props.def(--o-field-label--hint-font-size, props.get(core.$font-size--75)) !default; 7$hint-font-size: props.def(--o-field-label--hint-font-size, props.get(core.$font-size--75)) !default;
8 8
9$label-color: props.def(--o-field-label--label-color, props.get(core.$theme, --text-mute)) !default; 9$label-color: props.def(--o-field-label--label-color, props.get(core.$theme, --text-mute), 'color') !default;
10$hint-color: props.def(--o-field-label--hint-color, props.get(core.$theme, --text-mute)) !default; 10$hint-color: props.def(--o-field-label--hint-color, props.get(core.$theme, --text-mute), 'color') !default;
11$error-hint-color: props.def(--o-field-label--error-hint-color, props.get(core.$theme, --negative, --900)) !default; 11$error-hint-color: props.def(--o-field-label--error-hint-color, props.get(core.$theme, --negative, --900), 'color') !default;
12$disabled-color: props.def(--o-field-label--disabled-color, props.get(core.$theme, --text-disabled)) !default; 12$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
22$nav-button--block-size: props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--3800)) !default; 22$nav-button--block-size: props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--3800)) !default;
23$nav-button--font-size: props.def(--o-lightbox--nav-button--font-size, props.get(core.$font-size--200)) !default; 23$nav-button--font-size: props.def(--o-lightbox--nav-button--font-size, props.get(core.$font-size--200)) !default;
24 24
25$thumbnail--border-color: props.def(--o-lightbox--thumbnail--border-color, props.get(core.$theme, --border-strong)) !default; 25$thumbnail--border-color: props.def(--o-lightbox--thumbnail--border-color, props.get(core.$theme, --border-strong), 'color') !default;
26 26
27$thumbnail--hover--border-color: props.def(--o-lightbox--thumbnail--hover--border-color, props.get(core.$theme, --text-mute-more)) !default; 27$thumbnail--hover--border-color: props.def(--o-lightbox--thumbnail--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default;
28 28
29$thumbnail--selected--border-color: props.def(--o-lightbox--thumbnail--selected--border-color, props.get(core.$theme, --heading)) !default; 29$thumbnail--selected--border-color: props.def(--o-lightbox--thumbnail--selected--border-color, props.get(core.$theme, --heading), 'color') !default;
30 30
31$thumbnail--key-focus--border-color: props.def(--o-lightbox--thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; 31$thumbnail--key-focus--border-color: props.def(--o-lightbox--thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
32$thumbnail--key-focus--outline-color: props.def(--o-lightbox--thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; 32$thumbnail--key-focus--outline-color: props.def(--o-lightbox--thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
33 33
34$thumbnail--size--md: props.def(--o-lightbox--thumbnail--size, props.get(core.$size--600), 'md') !default; 34$thumbnail--size--md: props.def(--o-lightbox--thumbnail--size, props.get(core.$size--600), 'md') !default;
35$nav-button--inline-size--md: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2500), 'md') !default; 35$nav-button--inline-size--md: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2500), 'md') !default;
36$nav-button--block-size--md: props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--2500), 'md') !default; 36$nav-button--block-size--md: props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--2500), 'md') !default;
37 37
38$static-themes: props.def(--o-lightbox); 38$static-themes: props.def(--o-lightbox, (), 'color');
39 39
40@each $theme in map.keys(props.get(core.$transparent-colors)) { 40@each $theme in map.keys(props.get(core.$transparent-colors)) {
41 $lightbox-theme: --static-#{string.slice($theme, 3)}; 41 $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
14$item--key-focus--border-offset: props.def(--o-menu--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 14$item--key-focus--border-offset: props.def(--o-menu--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
15$item--key-focus--outline-width: props.def(--o-menu--item--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; 15$item--key-focus--outline-width: props.def(--o-menu--item--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
16 16
17$separator-color: props.def(--o-menu--separator-color, props.get(core.$theme, --border)) !default; 17$separator-color: props.def(--o-menu--separator-color, props.get(core.$theme, --border), 'color') !default;
18$header--label-color: props.def(--o-menu--header--label-color, props.get(core.$theme, --heading)) !default; 18$header--label-color: props.def(--o-menu--header--label-color, props.get(core.$theme, --heading), 'color') !default;
19 19
20$item--hover--bg-color: props.def(--o-menu--item--hover--bg-color, props.get(core.$theme, --border-mute)) !default; 20$item--hover--bg-color: props.def(--o-menu--item--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
21$item--hover--label-color: props.def(--o-menu--item--hover--label-color, props.get(core.$theme, --heading)) !default; 21$item--hover--label-color: props.def(--o-menu--item--hover--label-color, props.get(core.$theme, --heading), 'color') !default;
22 22
23$item--active--bg-color: props.def(--o-menu--item--active--bg-color, props.get(core.$theme, --border)) !default; 23$item--active--bg-color: props.def(--o-menu--item--active--bg-color, props.get(core.$theme, --border), 'color') !default;
24$item--active--label-color: props.def(--o-menu--item--active--label-color, props.get(core.$theme, --heading)) !default; 24$item--active--label-color: props.def(--o-menu--item--active--label-color, props.get(core.$theme, --heading), 'color') !default;
25 25
26$item--disabled--label-color: props.def(--o-menu--item--disabled--label-color, props.get(core.$theme, --text-disabled)) !default; 26$item--disabled--label-color: props.def(--o-menu--item--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
27 27
28$item--key-focus--border-color: props.def(--o-menu--item--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; 28$item--key-focus--border-color: props.def(--o-menu--item--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
29$item--key-focus--outline-color: props.def(--o-menu--item--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; 29$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--
9$rounding: props.def(--o-popover--rounding, props.get(core.$rounding)) !default; 9$rounding: props.def(--o-popover--rounding, props.get(core.$rounding)) !default;
10$border-width: props.def(--o-popover--border-width, props.get(core.$border-width--thin)) !default; 10$border-width: props.def(--o-popover--border-width, props.get(core.$border-width--thin)) !default;
11 11
12$bg-color: props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2)) !default; 12$bg-color: props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
13$border-color: props.def(--o-popover--border-color, props.get(core.$theme, --border)) !default; 13$border-color: props.def(--o-popover--border-color, props.get(core.$theme, --border), 'color') !default;
14$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; 14$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
14$key-focus--border-offset: props.def(--o-radio--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 14$key-focus--border-offset: props.def(--o-radio--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
15$key-focus--outline-width: props.def(--o-radio--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; 15$key-focus--outline-width: props.def(--o-radio--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
16 16
17$circle-border-color: props.def(--o-radio--circle-border-color, props.get(core.$theme, --text-mute-more)) !default; 17$circle-border-color: props.def(--o-radio--circle-border-color, props.get(core.$theme, --text-mute-more), 'color') !default;
18$circle-bg-color: props.def(--o-radio--circle-bg-color, props.get(core.$theme, --base, --75)) !default; 18$circle-bg-color: props.def(--o-radio--circle-bg-color, props.get(core.$theme, --base, --75), 'color') !default;
19 19
20$hover--label-color: props.def(--o-radio--hover--label-color, props.get(core.$theme, --heading)) !default; 20$hover--label-color: props.def(--o-radio--hover--label-color, props.get(core.$theme, --heading), 'color') !default;
21$hover--circle-border-color: props.def(--o-radio--hover--circle-border-color, props.get(core.$theme, --text-mute)) !default; 21$hover--circle-border-color: props.def(--o-radio--hover--circle-border-color, props.get(core.$theme, --text-mute), 'color') !default;
22 22
23$accent--circle-border-color: props.def(--o-radio--accent--circle-border-color, props.get(core.$theme, --accent, --900)) !default; 23$accent--circle-border-color: props.def(--o-radio--accent--circle-border-color, props.get(core.$theme, --accent, --900), 'color') !default;
24 24
25$accent--hover--circle-border-color: props.def(--o-radio--accent--hover--circle-border-color, props.get(core.$theme, --accent, --1000)) !default; 25$accent--hover--circle-border-color: props.def(--o-radio--accent--hover--circle-border-color, props.get(core.$theme, --accent, --1000), 'color') !default;
26 26
27$disabled--label-color: props.def(--o-radio--disabled--label-color, props.get(core.$theme, --text-disabled)) !default; 27$disabled--label-color: props.def(--o-radio--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
28$disabled--circle-border-color: props.def(--o-radio--disabled--circle-border-color, props.get(core.$theme, --border-strong)) !default; 28$disabled--circle-border-color: props.def(--o-radio--disabled--circle-border-color, props.get(core.$theme, --border-strong), 'color') !default;
29$disabled--circle-bg-color: props.def(--o-radio--disabled--circle-bg-color, props.get(core.$theme, --base, --75)) !default; 29$disabled--circle-bg-color: props.def(--o-radio--disabled--circle-bg-color, props.get(core.$theme, --base, --75), 'color') !default;
30 30
31$key-focus--label-color: props.def(--o-radio--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default; 31$key-focus--label-color: props.def(--o-radio--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
32$key-focus--border-color: props.def(--o-radio--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; 32$key-focus--border-color: props.def(--o-radio--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
33$key-focus--outline-color: props.def(--o-radio--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; 33$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
14$item--key-focus--border-offset: props.def(--o-side-nav--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 14$item--key-focus--border-offset: props.def(--o-side-nav--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
15$item--key-focus--outline-width: props.def(--o-side-nav--item--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; 15$item--key-focus--outline-width: props.def(--o-side-nav--item--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
16 16
17$header--label-color: props.def(--o-side-nav--header--label-color, props.get(core.$theme, --text-mute-more)) !default; 17$header--label-color: props.def(--o-side-nav--header--label-color, props.get(core.$theme, --text-mute-more), 'color') !default;
18 18
19$item--hover--bg-color: props.def(--o-side-nav--item--hover--bg-color, props.get(core.$theme, --border-mute)) !default; 19$item--hover--bg-color: props.def(--o-side-nav--item--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
20$item--hover--label-color: props.def(--o-side-nav--item--hover--label-color, props.get(core.$theme, --heading)) !default; 20$item--hover--label-color: props.def(--o-side-nav--item--hover--label-color, props.get(core.$theme, --heading), 'color') !default;
21 21
22$item--active--bg-color: props.def(--o-side-nav--item--active--bg-color, props.get(core.$theme, --border)) !default; 22$item--active--bg-color: props.def(--o-side-nav--item--active--bg-color, props.get(core.$theme, --border), 'color') !default;
23$item--active--label-color: props.def(--o-side-nav--item--active--label-color, props.get(core.$theme, --heading)) !default; 23$item--active--label-color: props.def(--o-side-nav--item--active--label-color, props.get(core.$theme, --heading), 'color') !default;
24 24
25$item--disabled--label-color: props.def(--o-side-nav--item--disabled--label-color, props.get(core.$theme, --text-disabled)) !default; 25$item--disabled--label-color: props.def(--o-side-nav--item--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
26 26
27$item--key-focus--border-color: props.def(--o-side-nav--item--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; 27$item--key-focus--border-color: props.def(--o-side-nav--item--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
28$item--key-focus--outline-color: props.def(--o-side-nav--item--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; 28$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 @@
5 5
6$size: props.def(--o-status-indicator--size, props.get(core.$size--125)) !default; 6$size: props.def(--o-status-indicator--size, props.get(core.$size--125)) !default;
7 7
8$default: props.def(--o-status-indicator--default, props.get(core.$theme, --border-strong)) !default; 8$default: props.def(--o-status-indicator--default, props.get(core.$theme, --border-strong), 'color') !default;
9$primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text)) !default; 9$primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text), 'color') !default;
10 10
11$themes-config: ( 11$themes-config: (
12 accent: --accent, 12 accent: --accent,
@@ -15,7 +15,7 @@ $themes-config: (
15 warning: --warning, 15 warning: --warning,
16) !default; 16) !default;
17 17
18$themes: props.def(--o-status-indicator); 18$themes: props.def(--o-status-indicator, (), 'color');
19 19
20@each $theme, $key in $themes-config { 20@each $theme, $key in $themes-config {
21 @if $theme != --base { 21 @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.
15$key-focus--border-offset: props.def(--o-switch--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 15$key-focus--border-offset: props.def(--o-switch--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
16$key-focus--outline-width: props.def(--o-switch--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; 16$key-focus--outline-width: props.def(--o-switch--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
17 17
18$track-bg-color: props.def(--o-switch--track-bg-color, props.get(core.$theme, --border)) !default; 18$track-bg-color: props.def(--o-switch--track-bg-color, props.get(core.$theme, --border), 'color') !default;
19$handle-border-color: props.def(--o-switch--handle-border-color, props.get(core.$theme, --text-mute-more)) !default; 19$handle-border-color: props.def(--o-switch--handle-border-color, props.get(core.$theme, --text-mute-more), 'color') !default;
20$handle-bg-color: props.def(--o-switch--handle-bg-color, props.get(core.$theme, --base, --50)) !default; 20$handle-bg-color: props.def(--o-switch--handle-bg-color, props.get(core.$theme, --base, --50), 'color') !default;
21 21
22$hover--label-color: props.def(--o-switch--hover--label-color, props.get(core.$theme, --heading)) !default; 22$hover--label-color: props.def(--o-switch--hover--label-color, props.get(core.$theme, --heading), 'color') !default;
23$hover--handle-border-color: props.def(--o-switch--hover--handle-border-color, props.get(core.$theme, --text-mute)) !default; 23$hover--handle-border-color: props.def(--o-switch--hover--handle-border-color, props.get(core.$theme, --text-mute), 'color') !default;
24 24
25$accent--handle-border-color: props.def(--o-switch--accent--handle-border-color, props.get(core.$theme, --accent, --900)) !default; 25$accent--handle-border-color: props.def(--o-switch--accent--handle-border-color, props.get(core.$theme, --accent, --900), 'color') !default;
26 26
27$accent--hover--handle-border-color: props.def(--o-switch--accent--hover--handle-border-color, props.get(core.$theme, --accent, --1000)) !default; 27$accent--hover--handle-border-color: props.def(--o-switch--accent--hover--handle-border-color, props.get(core.$theme, --accent, --1000), 'color') !default;
28 28
29$disabled--label-color: props.def(--o-switch--disabled--label-color, props.get(core.$theme, --text-disabled)) !default; 29$disabled--label-color: props.def(--o-switch--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
30$disabled--track-bg-color: props.def(--o-switch--disabled--track-bg-color, props.get(core.$theme, --border)) !default; 30$disabled--track-bg-color: props.def(--o-switch--disabled--track-bg-color, props.get(core.$theme, --border), 'color') !default;
31$disabled--handle-border-color: props.def(--o-switch--disabled--handle-border-color, props.get(core.$theme, --border-strong)) !default; 31$disabled--handle-border-color: props.def(--o-switch--disabled--handle-border-color, props.get(core.$theme, --border-strong), 'color') !default;
32$disabled--handle-bg-color: props.def(--o-switch--disabled--handle-bg-color, props.get(core.$theme, --base, --50)) !default; 32$disabled--handle-bg-color: props.def(--o-switch--disabled--handle-bg-color, props.get(core.$theme, --base, --50), 'color') !default;
33 33
34$key-focus--label-color: props.def(--o-switch--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default; 34$key-focus--label-color: props.def(--o-switch--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
35$key-focus--border-color: props.def(--o-switch--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; 35$key-focus--border-color: props.def(--o-switch--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
36$key-focus--outline-color: props.def(--o-switch--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; 36$key-focus--outline-color: props.def(--o-switch--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
37 37
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
15 15
16$pad-b--sm: props.def(--o-table--sm--pad-b, props.get(core.$size--75)) !default; 16$pad-b--sm: props.def(--o-table--sm--pad-b, props.get(core.$size--75)) !default;
17 17
18$border-color: props.def(--o-table--border-color, props.get(core.$theme, --border)) !default; 18$border-color: props.def(--o-table--border-color, props.get(core.$theme, --border), 'color') !default;
19$heading-color: props.def(--o-table--heading-color, props.get(core.$theme, --heading)) !default; 19$heading-color: props.def(--o-table--heading-color, props.get(core.$theme, --heading), 'color') !default;
20$hover--bg-color: props.def(--o-table--hover--bg-color, props.get(core.$theme, --border-mute)) !default; 20$hover--bg-color: props.def(--o-table--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
21$active--bg-color: props.def(--o-table--active--bg-color, props.get(core.$theme, --border)) !default; 21$active--bg-color: props.def(--o-table--active--bg-color, props.get(core.$theme, --border), 'color') !default;
22 22
23$box--bg-color: props.def(--o-table--box--bg-color, props.get(core.$theme, --base, --50)) !default; 23$box--bg-color: props.def(--o-table--box--bg-color, props.get(core.$theme, --base, --50), 'color') !default;
24$box--hover--bg-color: props.def(--o-table--box--hover--bg-color, props.get(core.$theme, --bg-base)) !default; 24$box--hover--bg-color: props.def(--o-table--box--hover--bg-color, props.get(core.$theme, --bg-base), 'color') !default;
25$box--active--bg-color: props.def(--o-table--box--active--bg-color, props.get(core.$theme, --border-mute)) !default; 25$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
14 14
15$key-focus--border-width: props.def(--o-text-field--key-focus--border-width, props.get(core.$key-focus--outline-width)) !default; 15$key-focus--border-width: props.def(--o-text-field--key-focus--border-width, props.get(core.$key-focus--outline-width)) !default;
16 16
17$bg-color: props.def(--o-text-field--bg-color, props.get(core.$theme, --base, --50)) !default; 17$bg-color: props.def(--o-text-field--bg-color, props.get(core.$theme, --base, --50), 'color') !default;
18$placeholder-color: props.def(--o-text-field--placeholder-color, props.get(core.$theme, --text-mute-more)) !default; 18$placeholder-color: props.def(--o-text-field--placeholder-color, props.get(core.$theme, --text-mute-more), 'color') !default;
19$text-color: props.def(--o-text-field--text-color, props.get(core.$theme, --text)) !default; 19$text-color: props.def(--o-text-field--text-color, props.get(core.$theme, --text), 'color') !default;
20$border-color: props.def(--o-text-field--border-color, props.get(core.$theme, --border-strong)) !default; 20$border-color: props.def(--o-text-field--border-color, props.get(core.$theme, --border-strong), 'color') !default;
21 21
22$hover--border-color: props.def(--o-text-field--hover--border-color, props.get(core.$theme, --text-mute-more)) !default; 22$hover--border-color: props.def(--o-text-field--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default;
23 23
24$focus--border-color: props.def(--o-text-field--focus--border-color, props.get(core.$theme, --focus, --border)) !default; 24$focus--border-color: props.def(--o-text-field--focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
25 25
26$key-focus--border-color: props.def(--o-text-field--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; 26$key-focus--border-color: props.def(--o-text-field--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
27$key-focus--outline-color: props.def(--o-text-field--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; 27$key-focus--outline-color: props.def(--o-text-field--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
28 28
29$error--border-color: props.def(--o-text-field--error--border-color, props.get(core.$theme, --negative, --700)) !default; 29$error--border-color: props.def(--o-text-field--error--border-color, props.get(core.$theme, --negative, --700), 'color') !default;
30 30
31$error--hover--border-color: props.def(--o-text-field--error--hover--border-color, props.get(core.$theme, --negative, --900)) !default; 31$error--hover--border-color: props.def(--o-text-field--error--hover--border-color, props.get(core.$theme, --negative, --900), 'color') !default;
32 32
33$error--focus--border-color: props.def(--o-text-field--error--focus--border-color, props.get(core.$theme, --negative, --900)) !default; 33$error--focus--border-color: props.def(--o-text-field--error--focus--border-color, props.get(core.$theme, --negative, --900), 'color') !default;
34 34
35$disabled--bg-color: props.def(--o-text-field--disabled--bg-color, props.get(core.$theme, --border-mute)) !default; 35$disabled--bg-color: props.def(--o-text-field--disabled--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
36$disabled--placeholder-color: props.def(--o-text-field--disabled--placeholder-color, props.get(core.$theme, --text-disabled)) !default; 36$disabled--placeholder-color: props.def(--o-text-field--disabled--placeholder-color, props.get(core.$theme, --text-disabled), 'color') !default;
37$disabled--text-color: props.def(--o-text-field--disabled--text-color, props.get(core.$theme, --text-disabled)) !default; 37$disabled--text-color: props.def(--o-text-field--disabled--text-color, props.get(core.$theme, --text-disabled), 'color') !default;
38$disabled--border-color: props.def(--o-text-field--disabled--border-color, props.get(core.$theme, --border-mute)) !default; 38$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
8 8
9$compact--indent: props.def(--s-blockquotes--compact--indent, props.get(core.$list--compact-indent)) !default; 9$compact--indent: props.def(--s-blockquotes--compact--indent, props.get(core.$list--compact-indent)) !default;
10 10
11$border-color: props.def(--s-blockquotes--border-color, props.get(core.$theme, --border)) !default; 11$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))
11$block--margin-bs: props.def(--s-code--block--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; 11$block--margin-bs: props.def(--s-code--block--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
12$block--rounding: props.def(--s-code--block--rounding, props.get(core.$rounding)) !default; 12$block--rounding: props.def(--s-code--block--rounding, props.get(core.$rounding)) !default;
13 13
14$inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --red, --1200)) !default; 14$inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --red, --1200), 'color') !default;
15$inline--bg: props.def(--s-code--inline--bg, props.get(core.$theme, --red, --200)) !default; 15$inline--bg: props.def(--s-code--inline--bg, props.get(core.$theme, --red, --200), 'color') !default;
16 16
17$block--fg: props.def(--s-code--block--fg, props.get(core.$theme, --text)) !default; 17$block--fg: props.def(--s-code--block--fg, props.get(core.$theme, --text), 'color') !default;
18$block--bg: props.def(--s-code--block--bg, props.get(core.$theme, --base, --50)) !default; 18$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
23$heading--font-size: props.def(--s-implicit--heading--font-size, props.get(core.$font-size--100)); 23$heading--font-size: props.def(--s-implicit--heading--font-size, props.get(core.$font-size--100));
24$heading--feature-settings: props.def(--s-implicit--heading--feature-settings, props.get(core.$font--headline--feature-settings)) !default; 24$heading--feature-settings: props.def(--s-implicit--heading--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
25 25
26$heading--color: props.def(--s-implicit--heading--color, props.get(core.$theme, --heading)); 26$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
11$key-focus--border-offset: props.def(--s-links--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 11$key-focus--border-offset: props.def(--s-links--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
12$key-focus--outline-width: props.def(--s-links--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; 12$key-focus--outline-width: props.def(--s-links--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
13 13
14$underline-color: props.def(--s-links--underline-color, props.get(core.$theme, --text-mute-more)) !default; 14$underline-color: props.def(--s-links--underline-color, props.get(core.$theme, --text-mute-more), 'color') !default;
15 15
16$colored--text-color: props.def(--s-links--colored--text-color, props.get(core.$theme, --accent, --1100)) !default; 16$colored--text-color: props.def(--s-links--colored--text-color, props.get(core.$theme, --accent, --1100), 'color') !default;
17$colored--underline-color: props.def(--s-links--colored--underline-color, props.get(core.$theme, --accent, --600)) !default; 17$colored--underline-color: props.def(--s-links--colored--underline-color, props.get(core.$theme, --accent, --600), 'color') !default;
18$colored--hover--text-color: props.def(--s-links--colored--hover--text-color, props.get(core.$theme, --accent, --1300)) !default; 18$colored--hover--text-color: props.def(--s-links--colored--hover--text-color, props.get(core.$theme, --accent, --1300), 'color') !default;
19 19
20$colored--visited--text-color: props.def(--s-links--colored--visited--text-color, props.get(core.$theme, --purple, --1100)) !default; 20$colored--visited--text-color: props.def(--s-links--colored--visited--text-color, props.get(core.$theme, --purple, --1100), 'color') !default;
21$colored--visited--underline-color: props.def(--s-links--colored--visited--underline-color, props.get(core.$theme, --purple, --600)) !default; 21$colored--visited--underline-color: props.def(--s-links--colored--visited--underline-color, props.get(core.$theme, --purple, --600), 'color') !default;
22$colored--visited--hover--text-color: props.def(--s-links--colored--visited--hover--text-color, props.get(core.$theme, --purple, --1300)) !default; 22$colored--visited--hover--text-color: props.def(--s-links--colored--visited--hover--text-color, props.get(core.$theme, --purple, --1300), 'color') !default;
23 23
24$key-focus--text-color: props.def(--s-links--key-focus--text-color, props.get(core.$theme, --focus, --text)) !default; 24$key-focus--text-color: props.def(--s-links--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default;
25$key-focus--border-color: props.def(--s-links--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; 25$key-focus--border-color: props.def(--s-links--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
26$key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; 26$key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
27 27
28$static-themes: props.def(--s-links); 28$static-themes: props.def(--s-links, (), 'color');
29@each $theme in map.keys(props.get(core.$transparent-colors)) { 29@each $theme in map.keys(props.get(core.$transparent-colors)) {
30 $link-theme: --static-#{string.slice($theme, 3)}; 30 $link-theme: --static-#{string.slice($theme, 3)};
31 31
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-23 22:13:50 +0000