summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-10-19 18:23:02 +0200
committerVolpeon <git@volpeon.ink>2024-10-19 18:23:02 +0200
commit27222cb91c390a42055a7123b5a9409c928e8b26 (patch)
tree650b5614c4aae0056127038a4ab204198aae7f4d /src
parentUpdate (diff)
downloadiro-design-27222cb91c390a42055a7123b5a9409c928e8b26.tar.gz
iro-design-27222cb91c390a42055a7123b5a9409c928e8b26.tar.bz2
iro-design-27222cb91c390a42055a7123b5a9409c928e8b26.zip
Fixes
Diffstat (limited to 'src')
-rw-r--r--src/_config.scss66
-rw-r--r--src/_core.vars.scss42
-rw-r--r--src/objects/_action-button.scss64
-rw-r--r--src/objects/_action-button.vars.scss28
-rw-r--r--src/objects/_badge.scss2
-rw-r--r--src/objects/_badge.vars.scss38
-rw-r--r--src/objects/_button.vars.scss20
-rw-r--r--src/objects/_divider.vars.scss8
-rw-r--r--src/objects/_field-label.vars.scss2
-rw-r--r--src/objects/_palette.scss2
-rw-r--r--src/objects/_text-field.vars.scss4
-rw-r--r--src/scopes/_blockquotes.vars.scss2
-rw-r--r--src/scopes/_implicit.scss1
-rw-r--r--src/scopes/_implicit.vars.scss2
14 files changed, 137 insertions, 144 deletions
diff --git a/src/_config.scss b/src/_config.scss
index ced2aa5..81c6ff2 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -49,35 +49,35 @@ $static-colors: map.deep-merge((
49 49
50$semantic-colors-common-override: () !default; 50$semantic-colors-common-override: () !default;
51$semantic-colors-common: map.deep-merge(( 51$semantic-colors-common: map.deep-merge((
52 --accent: --theme --blue, 52 --accent: --blue,
53 --accent-static: --static --blue, 53 --accent-static: --blue-static,
54 --positive: --theme --green, 54 --positive: --green,
55 --positive-static: --static --green, 55 --positive-static: --green-static,
56 --negative: --theme --red, 56 --negative: --red,
57 --negative-static: --static --red, 57 --negative-static: --red-static,
58 --warning: --theme --yellow, 58 --warning: --yellow,
59 --warning-static: --static --yellow, 59 --warning-static: --yellow-static,
60 60
61 --focus-raw: --theme --accent, 61 --focus-raw: --accent,
62 --focus-static: --theme --accent-static, 62 --focus-static: --accent-static,
63 63
64 --border-mute: --theme --base --200, 64 --border-mute: --base --200,
65 --border: --theme --base --300, 65 --border: --base --300,
66 --border-strong: --theme --base --400, 66 --border-strong: --base --400,
67 67
68 --text-disabled: --theme --base --500, 68 --text-disabled: --base --500,
69 --text-mute-more: --theme --base --600, 69 --text-mute-more: --base --600,
70 --text-mute: --theme --base --700, 70 --text-mute: --base --700,
71 --text: --theme --base --800, 71 --text: --base --800,
72 --heading: --theme --base --900, 72 --heading: --base --900,
73 73
74 --focus: ( 74 --focus: (
75 --outline: --theme --focus-raw --400, 75 --outline: --focus-raw --400,
76 --border-mute: --theme --focus-raw --900, 76 --border-mute: --focus-raw --900,
77 --border: --theme --focus-raw --1000, 77 --border: --focus-raw --1000,
78 --border-text: --theme --focus-raw --1000-text, 78 --border-text: --focus-raw --1000-text,
79 --border-strong: --theme --focus-raw --1100, 79 --border-strong: --focus-raw --1100,
80 --text: --theme --focus-raw --1100, 80 --text: --focus-raw --1100,
81 ), 81 ),
82), $semantic-colors-common-override) !default; 82), $semantic-colors-common-override) !default;
83 83
@@ -132,9 +132,9 @@ $theme-light: map.deep-merge((
132 ), 132 ),
133 133
134 --semantic: map.merge($semantic-colors-common, ( 134 --semantic: map.merge($semantic-colors-common, (
135 --bg-l2: --theme --base --50, 135 --bg-l2: --base --50,
136 --bg-l1: --theme --base --100, 136 --bg-l1: --base --100,
137 --bg-base: --theme --base --200, 137 --bg-base: --base --200,
138 )), 138 )),
139 139
140 --constants: ( 140 --constants: (
@@ -193,9 +193,9 @@ $theme-dark: map.deep-merge((
193 ), 193 ),
194 194
195 --semantic: map.merge($semantic-colors-common, ( 195 --semantic: map.merge($semantic-colors-common, (
196 --bg-base: --theme --base --50, 196 --bg-base: --base --50,
197 --bg-l1: --theme --base --75, 197 --bg-l1: --base --75,
198 --bg-l2: --theme --base --100, 198 --bg-l2: --base --100,
199 )), 199 )),
200 200
201 --constants: ( 201 --constants: (
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index 3b23c32..83d3a6a 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -1,3 +1,5 @@
1// stylelint-disable scss/dollar-variable-pattern
2
1@use 'sass:map'; 3@use 'sass:map';
2@use 'sass:meta'; 4@use 'sass:meta';
3@use 'sass:list'; 5@use 'sass:list';
@@ -98,15 +100,15 @@ $key-focus--border-width: props.def(--key-focus--border-width, props.get($borde
98$key-focus--border-offset: props.def(--key-focus--border-offset, props.get($border-width--medium)) !default; 100$key-focus--border-offset: props.def(--key-focus--border-offset, props.get($border-width--medium)) !default;
99 101
100$list--indent: props.def(--list--indent, props.get($size--400)) !default; 102$list--indent: props.def(--list--indent, props.get($size--400)) !default;
101$list--compact-indent: props.def(--list--indent, props.get($size--250)) !default; 103$list--compact-indent: props.def(--list--compact-indent, props.get($size--250)) !default;
102 104
103// 105//
104 106
105$static-colors: props.def(--static-colors); 107$-static-colors: ();
106 108
107@each $palette-name, $palette in map.get(config.$static-colors, --palettes) { 109@each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
108 $palette: fn.palette($palette, map.get(config.$static-colors, --contrasts), 1, map.get(config.$static-colors, --base)); 110 $palette: fn.palette($palette, map.get(config.$static-colors, --contrasts), 1, map.get(config.$static-colors, --base));
109 $static-colors: props.merge($static-colors, ( $palette-name: $palette )); 111 $-static-colors: map.merge($-static-colors, ( $palette-name: $palette ));
110} 112}
111 113
112// 114//
@@ -129,6 +131,10 @@ $themes: ();
129 @each $variant-name, $variant in $theme { 131 @each $variant-name, $variant in $theme {
130 $compiled: props.def(--colors); 132 $compiled: props.def(--colors);
131 133
134 @each $palette-name, $palette in $-static-colors {
135 $compiled: props.merge($compiled, ( #{$palette-name}-static: $palette ));
136 }
137
132 @each $palette-name, $palette in map.get($variant, --palettes) { 138 @each $palette-name, $palette in map.get($variant, --palettes) {
133 $base-color: list.nth($palette, 1); 139 $base-color: list.nth($palette, 1);
134 $contrasts: list.nth($palette, 2); 140 $contrasts: list.nth($palette, 2);
@@ -147,32 +153,14 @@ $themes: ();
147 153
148 @if meta.type-of($ref) == 'map' { 154 @if meta.type-of($ref) == 'map' {
149 @each $key, $r in $ref { 155 @each $key, $r in $ref {
150 $repo-name: list.nth($r, 1); 156 $re1: list.nth($r, 1);
151 $re1: list.nth($r, 2); 157 $re2: iro.fn-list-slice($r, 2);
152 $re2: iro.fn-list-slice($r, 3); 158 $res: map.merge($res, ($key: props.get($compiled, $re1, $re2...)));
153
154 $res2: null;
155
156 @if $repo-name == --static {
157 $res2: props.get($static-colors, $re1, $re2...);
158 } @else {
159 $res2: props.get($compiled, $re1, $re2...);
160 }
161
162 $res: map.merge($res, ($key: $res2));
163 } 159 }
164 } @else { 160 } @else {
165 $repo-name: list.nth($ref, 1); 161 $ref1: list.nth($ref, 1);
166 $ref1: list.nth($ref, 2); 162 $ref2: iro.fn-list-slice($ref, 2);
167 $ref2: iro.fn-list-slice($ref, 3); 163 $res: props.get($compiled, $ref1, $ref2...);
168
169 $res: null;
170
171 @if $repo-name == --static {
172 $res: props.get($static-colors, $ref1, $ref2...);
173 } @else {
174 $res: props.get($compiled, $ref1, $ref2...);
175 }
176 } 164 }
177 165
178 $compiled: props.merge($compiled, ( $color: $res )); 166 $compiled: props.merge($compiled, ( $color: $res ));
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 48149b1..8efdad9 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -9,91 +9,91 @@
9@use 'action-button.vars' as vars; 9@use 'action-button.vars' as vars;
10 10
11@mixin -apply-theme($theme, $key: ()) { 11@mixin -apply-theme($theme, $key: ()) {
12 color: props.get($theme, list.join($key, --disabled --label)...); 12 color: props.get($theme, list.join($key, --disabled --label-color)...);
13 background-color: props.get($theme, list.join($key, --disabled --bg)...); 13 background-color: props.get($theme, list.join($key, --disabled --bg-color)...);
14 border-color: props.get($theme, list.join($key, --disabled --border)...); 14 border-color: props.get($theme, list.join($key, --disabled --border-color)...);
15 15
16 &::after { 16 &::after {
17 outline-color: props.get($theme, list.join($key, --key-focus --border)...); 17 outline-color: props.get($theme, list.join($key, --key-focus --border-color)...);
18 box-shadow: 18 box-shadow:
19 0 19 0
20 0 20 0
21 0 21 0
22 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 22 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
23 props.get($theme, list.join($key, --key-focus --outline-width)...); 23 props.get($theme, list.join($key, --key-focus --outline-color)...);
24 } 24 }
25 25
26 &:link, 26 &:link,
27 &:visited, 27 &:visited,
28 &:enabled { 28 &:enabled {
29 color: props.get($theme, list.join($key, --label)...); 29 color: props.get($theme, list.join($key, --label-color)...);
30 background-color: props.get($theme, list.join($key, --bg)...); 30 background-color: props.get($theme, list.join($key, --bg-color)...);
31 border-color: props.get($theme, list.join($key, --border)...); 31 border-color: props.get($theme, list.join($key, --border-color)...);
32 32
33 &:hover, 33 &:hover,
34 &:focus-visible { 34 &:focus-visible {
35 color: props.get($theme, list.join($key, --hover --label)...); 35 color: props.get($theme, list.join($key, --hover --label-color)...);
36 background-color: props.get($theme, list.join($key, --hover --bg)...); 36 background-color: props.get($theme, list.join($key, --hover --bg-color)...);
37 border-color: props.get($theme, list.join($key, --hover --border)...); 37 border-color: props.get($theme, list.join($key, --hover --border-color)...);
38 } 38 }
39 39
40 &:active { 40 &:active {
41 color: props.get($theme, list.join($key, --active --label)...); 41 color: props.get($theme, list.join($key, --active --label-color)...);
42 background-color: props.get($theme, list.join($key, --active --bg)...); 42 background-color: props.get($theme, list.join($key, --active --bg-color)...);
43 border-color: props.get($theme, list.join($key, --active --border)...); 43 border-color: props.get($theme, list.join($key, --active --border-color)...);
44 } 44 }
45 } 45 }
46 46
47 @include iro.bem-modifier('quiet') { 47 @include iro.bem-modifier('quiet') {
48 color: props.get($theme, list.join($key, --quiet --disabled --label)...); 48 color: props.get($theme, list.join($key, --quiet --disabled --label-color)...);
49 background-color: transparent; 49 background-color: transparent;
50 border-color: transparent; 50 border-color: transparent;
51 51
52 &:link, 52 &:link,
53 &:visited, 53 &:visited,
54 &:enabled { 54 &:enabled {
55 color: props.get($theme, list.join($key, --quiet --label)...); 55 color: props.get($theme, list.join($key, --quiet --label-color)...);
56 background-color: transparent; 56 background-color: transparent;
57 border-color: transparent; 57 border-color: transparent;
58 58
59 &:hover, 59 &:hover,
60 &:focus-visible { 60 &:focus-visible {
61 color: props.get($theme, list.join($key, --quiet --hover --label)...); 61 color: props.get($theme, list.join($key, --quiet --hover --label-color)...);
62 background-color: props.get($theme, list.join($key, --quiet --hover --bg)...); 62 background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
63 border-color: transparent; 63 border-color: transparent;
64 } 64 }
65 65
66 &:active { 66 &:active {
67 color: props.get($theme, list.join($key, --quiet --active --label)...); 67 color: props.get($theme, list.join($key, --quiet --active --label-color)...);
68 background-color: props.get($theme, list.join($key, --quiet --active --bg)...); 68 background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
69 border-color: transparent; 69 border-color: transparent;
70 } 70 }
71 } 71 }
72 } 72 }
73 73
74 @include iro.bem-is('selected') { 74 @include iro.bem-is('selected') {
75 color: props.get($theme, list.join($key, --selected --disabled --label)...); 75 color: props.get($theme, list.join($key, --selected --disabled --label-color)...);
76 background-color: props.get($theme, list.join($key, --selected --disabled --bg)...); 76 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
77 border-color: props.get($theme, list.join($key, --selected --disabled --border)...); 77 border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...);
78 78
79 &:link, 79 &:link,
80 &:visited, 80 &:visited,
81 &:enabled { 81 &:enabled {
82 color: props.get($theme, list.join($key, --selected --label)...); 82 color: props.get($theme, list.join($key, --selected --label-color)...);
83 background-color: props.get($theme, list.join($key, --selected --bg)...); 83 background-color: props.get($theme, list.join($key, --selected --bg-color)...);
84 border-color: props.get($theme, list.join($key, --selected --border)...); 84 border-color: props.get($theme, list.join($key, --selected --border-color)...);
85 85
86 &:hover, 86 &:hover,
87 &:focus-visible { 87 &:focus-visible {
88 color: props.get($theme, list.join($key, --selected --hover --label)...); 88 color: props.get($theme, list.join($key, --selected --hover --label-color)...);
89 background-color: props.get($theme, list.join($key, --selected --hover --bg)...); 89 background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...);
90 border-color: props.get($theme, list.join($key, --selected --hover --border)...); 90 border-color: props.get($theme, list.join($key, --selected --hover --border-color)...);
91 } 91 }
92 92
93 &:active { 93 &:active {
94 color: props.get($theme, list.join($key, --selected --active --label)...); 94 color: props.get($theme, list.join($key, --selected --active --label-color)...);
95 background-color: props.get($theme, list.join($key, --selected --active --bg)...); 95 background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
96 border-color: props.get($theme, list.join($key, --selected --active --border)...); 96 border-color: props.get($theme, list.join($key, --selected --active --border-color)...);
97 } 97 }
98 } 98 }
99 } 99 }
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
index 9049a8f..ec312b4 100644
--- a/src/objects/_action-button.vars.scss
+++ b/src/objects/_action-button.vars.scss
@@ -11,20 +11,20 @@ $border-width: props.def(--o-action-button--border-width, props.get(core.$border
11$rounding: props.def(--o-action-button--rounding, props.get(core.$rounding)) !default; 11$rounding: props.def(--o-action-button--rounding, props.get(core.$rounding)) !default;
12$font-size: props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default; 12$font-size: props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default;
13 13
14$pad-i--sm: props.def(--o-action-button--pad-i, props.get(core.$size--100), 'sm') !default; 14$pad-i--sm: props.def(--o-action-button--sm--pad-i, props.get(core.$size--100)) !default;
15$pad-i-pill--sm: props.def(--o-action-button--pad-i-pill, props.get(core.$size--150), 'sm') !default; 15$pad-i-pill--sm: props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--150)) !default;
16$pad-b--sm: props.def(--o-action-button--pad-b, props.get(core.$size--40), 'sm') !default; 16$pad-b--sm: props.def(--o-action-button--sm--pad-b, props.get(core.$size--40)) !default;
17$font-size--sm: props.def(--o-action-button--font-size, props.get(core.$font-size--75), 'sm') !default; 17$font-size--sm: props.def(--o-action-button--sm--font-size, props.get(core.$font-size--75)) !default;
18 18
19$pad-i--lg: props.def(--o-action-button--pad-i, props.get(core.$size--175), 'lg') !default; 19$pad-i--lg: props.def(--o-action-button--lg--pad-i, props.get(core.$size--175)) !default;
20$pad-i-pill--lg: props.def(--o-action-button--pad-i-pill, props.get(core.$size--225), 'lg') !default; 20$pad-i-pill--lg: props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--225)) !default;
21$pad-b--lg: props.def(--o-action-button--pad-b, props.get(core.$size--115), 'lg') !default; 21$pad-b--lg: props.def(--o-action-button--lg--pad-b, props.get(core.$size--115)) !default;
22$font-size--lg: props.def(--o-action-button--font-size, props.get(core.$font-size--150), 'lg') !default; 22$font-size--lg: props.def(--o-action-button--lg--font-size, props.get(core.$font-size--150)) !default;
23 23
24$pad-i--xl: props.def(--o-action-button--pad-i, props.get(core.$size--225), 'xl') !default; 24$pad-i--xl: props.def(--o-action-button--xl--pad-i, props.get(core.$size--225)) !default;
25$pad-i-pill--xl: props.def(--o-action-button--pad-i-pill, props.get(core.$size--300), 'xl') !default; 25$pad-i-pill--xl: props.def(--o-action-button--xl--pad-i-pill, props.get(core.$size--300)) !default;
26$pad-b--xl: props.def(--o-action-button--pad-b, props.get(core.$size--150), 'xl') !default; 26$pad-b--xl: props.def(--o-action-button--xl--pad-b, props.get(core.$size--150)) !default;
27$font-size--xl: props.def(--o-action-button--font-size, props.get(core.$font-size--200), 'xl') !default; 27$font-size--xl: props.def(--o-action-button--xl--font-size, props.get(core.$font-size--200)) !default;
28 28
29$key-focus--border-width: props.def(--o-action-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 29$key-focus--border-width: props.def(--o-action-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
30$key-focus--border-offset: props.def(--o-action-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 30$key-focus--border-offset: props.def(--o-action-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 41b2fbb..55a2051 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -101,7 +101,7 @@
101 margin-inline: props.get(vars.$pad-i-label); 101 margin-inline: props.get(vars.$pad-i-label);
102 } 102 }
103 103
104 @include -apply-theme(vars.$default-theme); 104 @include -apply-theme(vars.$default-theme, $static: true);
105 105
106 @each $theme in map.keys(props.get(vars.$themes)) { 106 @each $theme in map.keys(props.get(vars.$themes)) {
107 @include iro.bem-modifier(string.slice($theme, 3)) { 107 @include iro.bem-modifier(string.slice($theme, 3)) {
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss
index f9a4ed5..4941ccf 100644
--- a/src/objects/_badge.vars.scss
+++ b/src/objects/_badge.vars.scss
@@ -38,10 +38,6 @@ $sizes: (
38 'xl' $pad-b--xl $pad-i--xl $pad-i-pill--xl $pad-i-label--xl $font-size--xl, 38 'xl' $pad-b--xl $pad-i--xl $pad-i-pill--xl $pad-i-label--xl $font-size--xl,
39) !default; 39) !default;
40 40
41$key-focus--label-color: props.def(--o-badge--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default;
42$key-focus--border-color: props.def(--o-badge--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default;
43$key-focus--outline-color: props.def(--o-badge--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default;
44
45$default-theme-override: () !default; 41$default-theme-override: () !default;
46$default-theme: props.def(--o-badge, ( 42$default-theme: props.def(--o-badge, (
47 --bg: props.get(core.$theme, --text-mute), 43 --bg: props.get(core.$theme, --text-mute),
@@ -57,6 +53,12 @@ $default-theme: props.def(--o-badge, (
57 --label: props.get(core.$theme, --bg-l2), 53 --label: props.get(core.$theme, --bg-l2),
58 ), 54 ),
59 55
56 --key-focus: (
57 --label: props.get(core.$theme, --focus, --text),
58 --border: props.get(core.$theme, --focus, --border),
59 --outline: props.get(core.$theme, --focus, --outline),
60 ),
61
60 --quiet: ( 62 --quiet: (
61 --bg: props.get(core.$theme, --border-mute), 63 --bg: props.get(core.$theme, --border-mute),
62 --label: props.get(core.$theme, --heading), 64 --label: props.get(core.$theme, --heading),
@@ -117,36 +119,36 @@ $static-themes: props.def(--o-badge);
117 )); 119 ));
118} 120}
119 121
120$themes-config: --accent --positive --negative --warning !default; 122$themes-config: accent positive negative warning !default;
121 123
122$themes: props.def(--o-badge); 124$themes: props.def(--o-badge);
123 125
124@each $theme in $themes-config { 126@each $theme in $themes-config {
125 $themes: props.merge($themes, ( 127 $themes: props.merge($themes, (
126 $theme: ( 128 --#{$theme}: (
127 --bg: props.get(core.$static-colors, $theme, --900), 129 --bg: props.get(core.$theme, --#{$theme}-static, --900),
128 --label: props.get(core.$static-colors, $theme, --900-text), 130 --label: props.get(core.$theme, --#{$theme}-static, --900-text),
129 131
130 --hover: ( 132 --hover: (
131 --bg: props.get(core.$static-colors, $theme, --1000), 133 --bg: props.get(core.$theme, --#{$theme}-static, --1000),
132 --label: props.get(core.$static-colors, $theme, --1000-text), 134 --label: props.get(core.$theme, --#{$theme}-static, --1000-text),
133 ), 135 ),
134 136
135 --active: ( 137 --active: (
136 --bg: props.get(core.$static-colors, $theme, --1100), 138 --bg: props.get(core.$theme, --#{$theme}-static, --1100),
137 --label: props.get(core.$static-colors, $theme, --1000-text), 139 --label: props.get(core.$theme, --#{$theme}-static, --1000-text),
138 ), 140 ),
139 141
140 --quiet: ( 142 --quiet: (
141 --bg: props.get(core.$theme, $theme, --200), 143 --bg: props.get(core.$theme, --#{$theme}, --200),
142 --label: props.get(core.$theme, $theme, --1100), 144 --label: props.get(core.$theme, --#{$theme}, --1100),
143 --hover: ( 145 --hover: (
144 --bg: props.get(core.$theme, $theme, --300), 146 --bg: props.get(core.$theme, --#{$theme}, --300),
145 --label: props.get(core.$theme, $theme, --1200), 147 --label: props.get(core.$theme, --#{$theme}, --1200),
146 ), 148 ),
147 --active: ( 149 --active: (
148 --bg: props.get(core.$theme, $theme, --400), 150 --bg: props.get(core.$theme, --#{$theme}, --400),
149 --label: props.get(core.$theme, $theme, --1300), 151 --label: props.get(core.$theme, --#{$theme}, --1300),
150 ), 152 ),
151 ) 153 )
152 ) 154 )
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index 7640e57..cc82d46 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -139,26 +139,26 @@ $static-themes: props.def(--o-button);
139 )); 139 ));
140} 140}
141 141
142$themes-config: --accent --negative !default; 142$themes-config: accent negative !default;
143 143
144$themes: props.def(--o-button); 144$themes: props.def(--o-button);
145 145
146@each $theme in $themes-config { 146@each $theme in $themes-config {
147 $themes: props.merge($themes, ( 147 $themes: props.merge($themes, (
148 $theme: ( 148 --#{$theme}: (
149 --bg: props.get(core.$static-colors, $theme, --900), 149 --bg: props.get(core.$theme, --#{$theme}-static, --900),
150 --label: props.get(core.$static-colors, $theme, --900-text), 150 --label: props.get(core.$theme, --#{$theme}-static, --900-text),
151 --outline-border: props.get(core.$theme, $theme, --900), 151 --outline-border: props.get(core.$theme, --#{$theme}, --900),
152 --outline-label: props.get(core.$theme, $theme, --1000), 152 --outline-label: props.get(core.$theme, --#{$theme}, --1000),
153 153
154 --hover: ( 154 --hover: (
155 --bg: props.get(core.$static-colors, $theme, --1000), 155 --bg: props.get(core.$theme, --#{$theme}-static, --1000),
156 --label: props.get(core.$static-colors, $theme, --1000-text), 156 --label: props.get(core.$theme, --#{$theme}-static, --1000-text),
157 ), 157 ),
158 158
159 --active: ( 159 --active: (
160 --bg: props.get(core.$static-colors, $theme, --1100), 160 --bg: props.get(core.$theme, --#{$theme}-static, --1100),
161 --label: props.get(core.$static-colors, $theme, --1100-text), 161 --label: props.get(core.$theme, --#{$theme}-static, --1100-text),
162 ), 162 ),
163 ) 163 )
164 )); 164 ));
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss
index 01c4b92..4a55f36 100644
--- a/src/objects/_divider.vars.scss
+++ b/src/objects/_divider.vars.scss
@@ -46,15 +46,15 @@ $static-themes: props.def(--o-divider);
46 )); 46 ));
47} 47}
48 48
49$themes-config: --accent --negative !default; 49$themes-config: accent negative !default;
50 50
51$themes: props.def(--o-divider); 51$themes: props.def(--o-divider);
52 52
53@each $theme in $themes-config { 53@each $theme in $themes-config {
54 $themes: props.merge($themes, ( 54 $themes: props.merge($themes, (
55 $theme: ( 55 --#{$theme}: (
56 --bg: props.get(core.$theme, $theme, --800), 56 --bg: props.get(core.$theme, --#{$theme}, --800),
57 --label: props.get(core.$theme, $theme, --1000), 57 --label: props.get(core.$theme, --#{$theme}, --1000),
58 ) 58 )
59 )); 59 ));
60} 60}
diff --git a/src/objects/_field-label.vars.scss b/src/objects/_field-label.vars.scss
index 699836e..d39aa2d 100644
--- a/src/objects/_field-label.vars.scss
+++ b/src/objects/_field-label.vars.scss
@@ -8,5 +8,5 @@ $hint-font-size: props.def(--o-field-label--hint-font-size, props.get(core.$fon
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)) !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)) !default;
11$error-hint-color: props.def(--o-field-label--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)) !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)) !default;
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
index d83b297..00c0881 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -52,7 +52,7 @@
52 $key: list.nth(map.keys($contrasts), $i); 52 $key: list.nth(map.keys($contrasts), $i);
53 53
54 &:nth-child(#{$i}) { 54 &:nth-child(#{$i}) {
55 background-color: props.get(core.$static-colors, $palette-name, $key); 55 background-color: props.get(core.$theme, #{$palette-name}-static, $key);
56 } 56 }
57 } 57 }
58 } 58 }
diff --git a/src/objects/_text-field.vars.scss b/src/objects/_text-field.vars.scss
index 3d0ef2d..6d8abdd 100644
--- a/src/objects/_text-field.vars.scss
+++ b/src/objects/_text-field.vars.scss
@@ -12,9 +12,9 @@ $extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--5
12 12
13$focus--border-width: props.def(--o-text-field--focus--border-width, props.get(core.$border-width--medium)) !default; 13$focus--border-width: props.def(--o-text-field--focus--border-width, props.get(core.$border-width--medium)) !default;
14 14
15$key-focus--border-width: props.def(--o-text-field--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, --bg)) !default; 17$bg-color: props.def(--o-text-field--bg-color, props.get(core.$theme, --base, --50)) !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)) !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)) !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)) !default;
diff --git a/src/scopes/_blockquotes.vars.scss b/src/scopes/_blockquotes.vars.scss
index 39d90bd..f2cf935 100644
--- a/src/scopes/_blockquotes.vars.scss
+++ b/src/scopes/_blockquotes.vars.scss
@@ -8,4 +8,4 @@ $border-width: props.def(--s-blockquotes--border-width, props.get(core.$border-w
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-width, props.get(core.$theme, --border)) !default; 11$border-color: props.def(--s-blockquotes--border-color, props.get(core.$theme, --border)) !default;
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
index 4bb3482..d66950a 100644
--- a/src/scopes/_implicit.scss
+++ b/src/scopes/_implicit.scss
@@ -61,6 +61,7 @@
61 font-weight: props.get(vars.$heading--font-weight); 61 font-weight: props.get(vars.$heading--font-weight);
62 font-feature-settings: props.get(vars.$heading--feature-settings); 62 font-feature-settings: props.get(vars.$heading--feature-settings);
63 line-height: props.get(vars.$heading--line-height); 63 line-height: props.get(vars.$heading--line-height);
64 color: props.get(vars.$heading--color);
64 65
65 & + & { 66 & + & {
66 margin-block-start: props.get(vars.$heading--margin-bs-sibling); 67 margin-block-start: props.get(vars.$heading--margin-bs-sibling);
diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss
index f0eb45d..7390672 100644
--- a/src/scopes/_implicit.vars.scss
+++ b/src/scopes/_implicit.vars.scss
@@ -22,3 +22,5 @@ $heading--line-height: props.def(--s-implicit--heading--line-height, props
22$heading--font-weight: props.def(--s-implicit--heading--font-weight, props.get(core.$font--headline--weight)) !default; 22$heading--font-weight: props.def(--s-implicit--heading--font-weight, props.get(core.$font--headline--weight)) !default;
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
26$heading--color: props.def(--s-implicit--heading--color, props.get(core.$theme, --heading));
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-06 05:54:02 +0000