diff options
author | Volpeon <git@volpeon.ink> | 2024-10-25 19:37:52 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-10-25 19:37:52 +0200 |
commit | e0815613914e16d73a30efe709a74b994cc31963 (patch) | |
tree | 9876cb3b6937173fd4dd62958d5c9d1ba6feea87 | |
parent | New palette generation (diff) | |
download | iro-design-e0815613914e16d73a30efe709a74b994cc31963.tar.gz iro-design-e0815613914e16d73a30efe709a74b994cc31963.tar.bz2 iro-design-e0815613914e16d73a30efe709a74b994cc31963.zip |
More efficient theming
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 | ||