@mittwald/flow-design-tokens 0.2.0-alpha.102 → 0.2.0-alpha.1021

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/README.md +2 -2
  2. package/dist/css/all-dark.css +1542 -0
  3. package/dist/{variables.css → css/all-light.css} +759 -494
  4. package/dist/css/base.css +1385 -0
  5. package/dist/css/colors-dark-system.css +163 -0
  6. package/dist/css/colors-dark.css +163 -0
  7. package/dist/css/colors-light-system.css +163 -0
  8. package/dist/css/colors-light.css +163 -0
  9. package/dist/css-layered/all-dark.css +1544 -0
  10. package/dist/css-layered/all-light.css +1544 -0
  11. package/dist/css-layered/base.css +1387 -0
  12. package/dist/css-layered/colors-dark-system.css +165 -0
  13. package/dist/css-layered/colors-dark.css +165 -0
  14. package/dist/css-layered/colors-light-system.css +165 -0
  15. package/dist/css-layered/colors-light.css +165 -0
  16. package/dist/json/all-dark.json +31052 -0
  17. package/dist/json/all-light.json +31052 -0
  18. package/dist/{variables.json → json/base.json} +14349 -9829
  19. package/dist/json/colors-dark-system.json +3325 -0
  20. package/dist/json/colors-dark.json +3325 -0
  21. package/dist/json/colors-light-system.json +3325 -0
  22. package/dist/json/colors-light.json +3325 -0
  23. package/package.json +15 -10
package/dist/{variables.css → css/all-light.css} RENAMED
@@ -6,35 +6,22 @@
6
6
  --image-button--brightness--hover: 62.5%;
7
7
  --image-button--brightness--pressed: 50%;
8
8
  --corner-radius--round: 50%;
9
+ --border-width--50: 0.5px;
9
10
  --border-style--default: solid;
10
11
  --border-style--dashed: dashed;
11
- --dark--color--100: rgb(0 0 0 / 12.5%);
12
- --dark--color--200: rgb(0 0 0 / 25%);
13
- --dark--color--300: rgb(0 0 0 / 37.5%);
14
- --dark--color--400: rgb(0 0 0 / 50%);
15
- --dark--color--500: rgb(0 0 0 / 62.5%);
16
- --dark--color--600: rgb(0 0 0 / 75%);
17
- --dark--color--700: rgb(0 0 0 / 87.5%);
18
- --dark--color--800: rgb(0 0 0 / 100%);
19
- --light--color--100: rgb(255 255 255 / 12.5%);
20
- --light--color--200: rgb(255 255 255 / 25%);
21
- --light--color--300: rgb(255 255 255 / 37.5%);
22
- --light--color--400: rgb(255 255 255 / 50%);
23
- --light--color--500: rgb(255 255 255 / 62.5%);
24
- --light--color--600: rgb(255 255 255 / 75%);
25
- --light--color--700: rgb(255 255 255 / 87.5%);
26
- --light--color--800: rgb(255 255 255 / 100%);
12
+ --message--tip-size-y: 12px;
27
13
  --color--gray--100: #FFFFFF;
28
- --color--gray--200: #FDFDFD;
29
- --color--gray--300: #F8F8F8;
30
- --color--gray--400: #E6E6E6;
31
- --color--gray--500: #D5D5D5;
32
- --color--gray--600: #B1B1B1;
33
- --color--gray--700: #909090;
34
- --color--gray--800: #6D6D6D;
35
- --color--gray--900: #464646;
36
- --color--gray--1000: #222222;
37
- --color--gray--1100: #000000;
14
+ --color--gray--200: #F4F8FC;
15
+ --color--gray--300: #E5EFF8;
16
+ --color--gray--400: #DCE9F7;
17
+ --color--gray--500: #B7C9DB;
18
+ --color--gray--600: #8FA1B4;
19
+ --color--gray--700: #5E6C7A;
20
+ --color--gray--800: #3A434E;
21
+ --color--gray--900: #292F37;
22
+ --color--gray--1000: #1B1F24;
23
+ --color--gray--1100: #121518;
24
+ --color--gray--1200: #000000;
38
25
  --color--hosting-blue--100: #F0F5FF;
39
26
  --color--hosting-blue--200: #E0EBFF;
40
27
  --color--hosting-blue--300: #ABC6FF;
@@ -54,9 +41,9 @@
54
41
  --color--amaranth-red--600: #EA637F;
55
42
  --color--amaranth-red--700: #E54366;
56
43
  --color--amaranth-red--800: #E1244C;
57
- --color--amaranth-red--900: #B4193A;
58
- --color--amaranth-red--1000: #83122A;
59
- --color--amaranth-red--1100: #6A0F22;
44
+ --color--amaranth-red--900: #AB1737;
45
+ --color--amaranth-red--1000: #710F24;
46
+ --color--amaranth-red--1100: #540B1B;
60
47
  --color--royal-orange--100: #FFF4EB;
61
48
  --color--royal-orange--200: #FFEBDC;
62
49
  --color--royal-orange--300: #FFD9BD;
@@ -136,90 +123,63 @@
136
123
  --color--categorical--green: #008f5d;
137
124
  --color--categorical--lime: #bce931;
138
125
  --color--transparent: transparent;
126
+ --color--code-syntax--keyword: #cf222e;
127
+ --color--code-syntax--type: #6f42c1;
128
+ --color--code-syntax--variable: #005cc5;
129
+ --color--code-syntax--property: #6f42c1;
130
+ --color--code-syntax--string: #032f62;
131
+ --color--code-syntax--number: #005cc5;
132
+ --color--code-syntax--comment: #6a737d;
133
+ --color--code-syntax--function: #8250df;
134
+ --color--code-syntax--operator: #c12f3f;
135
+ --color--code-syntax--invalid: #cb2431;
136
+ --color--black-alpha--100: rgb(0 0 0 / 12.5%);
137
+ --color--black-alpha--200: rgb(0 0 0 / 25%);
138
+ --color--black-alpha--300: rgb(0 0 0 / 37.5%);
139
+ --color--black-alpha--400: rgb(0 0 0 / 50%);
140
+ --color--black-alpha--500: rgb(0 0 0 / 62.5%);
141
+ --color--black-alpha--600: rgb(0 0 0 / 75%);
142
+ --color--black-alpha--700: rgb(0 0 0 / 87.5%);
143
+ --color--black-alpha--800: rgb(0 0 0 / 100%);
144
+ --color--white-alpha--100: rgb(255 255 255 / 12.5%);
145
+ --color--white-alpha--200: rgb(255 255 255 / 25%);
146
+ --color--white-alpha--300: rgb(255 255 255 / 37.5%);
147
+ --color--white-alpha--400: rgb(255 255 255 / 50%);
148
+ --color--white-alpha--500: rgb(255 255 255 / 62.5%);
149
+ --color--white-alpha--600: rgb(255 255 255 / 75%);
150
+ --color--white-alpha--700: rgb(255 255 255 / 87.5%);
151
+ --color--white-alpha--800: rgb(255 255 255 / 100%);
152
+ --color--static-black-alpha--100: rgb(0 0 0 / 12.5%);
153
+ --color--static-black-alpha--200: rgb(0 0 0 / 25%);
154
+ --color--static-black-alpha--300: rgb(0 0 0 / 37.5%);
155
+ --color--static-black-alpha--400: rgb(0 0 0 / 50%);
156
+ --color--static-black-alpha--500: rgb(0 0 0 / 62.5%);
157
+ --color--static-black-alpha--600: rgb(0 0 0 / 75%);
158
+ --color--static-black-alpha--700: rgb(0 0 0 / 87.5%);
159
+ --color--static-black-alpha--800: rgb(0 0 0 / 100%);
160
+ --color--static-white-alpha--100: rgb(255 255 255 / 12.5%);
161
+ --color--static-white-alpha--200: rgb(255 255 255 / 25%);
162
+ --color--static-white-alpha--300: rgb(255 255 255 / 37.5%);
163
+ --color--static-white-alpha--400: rgb(255 255 255 / 50%);
164
+ --color--static-white-alpha--500: rgb(255 255 255 / 62.5%);
165
+ --color--static-white-alpha--600: rgb(255 255 255 / 75%);
166
+ --color--static-white-alpha--700: rgb(255 255 255 / 87.5%);
167
+ --color--static-white-alpha--800: rgb(255 255 255 / 100%);
139
168
  --color--gradient: radial-gradient(circle at 27.74% 38.09%,#d8e9f8,transparent 60%),radial-gradient(circle at 63.98% 99.4%,#e4b8ff,transparent 37%),radial-gradient(circle at 79.7% 64.93%,#d8e9f8,transparent 52%),radial-gradient(circle at 10.9% 91.41%,#d8e9f8,transparent 56%),radial-gradient(circle at 3.68% 3.26%,#0056ff,transparent 31%),radial-gradient(circle at 99.62% 17.78%,#48c7d8,transparent 26%),radial-gradient(circle at 58.65% 24.91%,#d8e9f8,transparent 55%),radial-gradient(circle at 53.23% 52.72%,#d8e9f8,transparent 100%),radial-gradient(circle at 50% 50%,#fff,#fff 100%);
169
+ --color--background-gradient: linear-gradient( 180deg, rgba(244, 248, 252, 1) 20%, rgba(208, 214, 243, 1) 100% );
140
170
  --avatar--size--m: 2.5rem;
141
- --code--default-syntax-color-addition: #397300;
142
- --code--default-syntax-color-built-in: #397300;
143
- --code--default-syntax-color-bullet: #397300;
144
- --code--default-syntax-color-code: #397300;
145
- --code--default-syntax-color-comment: #666666;
146
- --code--default-syntax-color-deletion: #880000;
147
- --code--default-syntax-color-link: #a94747;
148
- --code--default-syntax-color-literal: #4c6d3b;
149
- --code--default-syntax-color-meta: #1e6e94;
150
- --code--default-syntax-color-meta-string: #326d8b;
151
- --code--default-syntax-color-number: #880000;
152
- --code--default-syntax-color-quote: #880000;
153
- --code--default-syntax-color-regexp: #a94747;
154
- --code--default-syntax-color-section: #880000;
155
- --code--default-syntax-color-selector-attr: #a94747;
156
- --code--default-syntax-color-selector-class: #880000;
157
- --code--default-syntax-color-selector-id: #880000;
158
- --code--default-syntax-color-selector-pseudo: #a94747;
159
- --code--default-syntax-color-string: #880000;
160
- --code--default-syntax-color-symbol: #a94747;
161
- --code--default-syntax-color-template-tag: #880000;
162
- --code--default-syntax-color-template-variable: #a94747;
163
- --code--default-syntax-color-title: #880000;
164
- --code--default-syntax-color-type: #880000;
165
- --code--default-syntax-color-variable: #a94747;
166
- --code--light-syntax-color-addition: #68d100;
167
- --code--light-syntax-color-built-in: #68d100;
168
- --code--light-syntax-color-bullet: #68d100;
169
- --code--light-syntax-color-code: #68d100;
170
- --code--light-syntax-color-comment: #b8b8b8;
171
- --code--light-syntax-color-deletion: #ff9e9e;
172
- --code--light-syntax-color-link: #dcacac;
173
- --code--light-syntax-color-literal: #9fc28e;
174
- --code--light-syntax-color-meta: #77c0e4;
175
- --code--light-syntax-color-meta-string: #8ebfd7;
176
- --code--light-syntax-color-number: #ff9e9e;
177
- --code--light-syntax-color-pseudo: #dcacac;
178
- --code--light-syntax-color-quote: #ff9e9e;
179
- --code--light-syntax-color-regexp: #dcacac;
180
- --code--light-syntax-color-section: #ff9e9e;
181
- --code--light-syntax-color-selector-attr: #dcacac;
182
- --code--light-syntax-color-selector-class: #ff9e9e;
183
- --code--light-syntax-color-selector-id: #ff9e9e;
184
- --code--light-syntax-color-string: #ff9e9e;
185
- --code--light-syntax-color-symbol: #dcacac;
186
- --code--light-syntax-color-template-tag: #ff9e9e;
187
- --code--light-syntax-color-template-variable: #dcacac;
188
- --code--light-syntax-color-title: #ff9e9e;
189
- --code--light-syntax-color-type: #ff9e9e;
190
- --code--light-syntax-color-variable: #dcacac;
191
- --code--dark-syntax-color-addition: #306100;
192
- --code--dark-syntax-color-built-in: #306100;
193
- --code--dark-syntax-color-bullet: #306100;
194
- --code--dark-syntax-color-code: #306100;
195
- --code--dark-syntax-color-comment: #575757;
196
- --code--dark-syntax-color-deletion: #880000;
197
- --code--dark-syntax-color-link: #8c3b3b;
198
- --code--dark-syntax-color-literal: #405d32;
199
- --code--dark-syntax-color-meta: #195b7b;
200
- --code--dark-syntax-color-meta-string: #2a5b74;
201
- --code--dark-syntax-color-number: #880000;
202
- --code--dark-syntax-color-pseudo: #8c3b3b;
203
- --code--dark-syntax-color-quote: #880000;
204
- --code--dark-syntax-color-regexp: #8c3b3b;
205
- --code--dark-syntax-color-section: #880000;
206
- --code--dark-syntax-color-selector-attr: #8c3b3b;
207
- --code--dark-syntax-color-selector-class: #880000;
208
- --code--dark-syntax-color-selector-id: #880000;
209
- --code--dark-syntax-color-string: #880000;
210
- --code--dark-syntax-color-symbol: #8c3b3b;
211
- --code--dark-syntax-color-template-tag: #880000;
212
- --code--dark-syntax-color-template-variable: #8c3b3b;
213
- --code--dark-syntax-color-title: #880000;
214
- --code--dark-syntax-color-type: #880000;
215
- --code--dark-syntax-color-variable: #8c3b3b;
171
+ --code-block--font-family: FiraCode, monospace;
216
172
  --icon--size--s: 1rem;
217
173
  --icon--size--m: 1.5rem;
218
174
  --icon--size--l: 4rem;
219
- --text--max-width: 780px;
175
+ --blur: 3px;
176
+ --transition--duration--fast: 200ms;
177
+ --transition--duration--default: 300ms;
178
+ --transition--duration--slow: 400ms;
220
179
  --font-weight--normal: normal;
221
180
  --font-weight--bold: bold;
222
- --line-height--default: 1.5;
181
+ --line-height: 1.5;
182
+ --single-line-height: 1rem;
223
183
  --font-size-text--s: 0.875rem;
224
184
  --font-size-text--m: 1rem;
225
185
  --font-size-heading--xs: 1rem;
@@ -228,6 +188,8 @@
228
188
  --font-size-heading--l: 1.5rem;
229
189
  --font-size-heading--xl: 2rem;
230
190
  --font-size-heading--xxl: 2.625rem;
191
+ --max-text-width: 960px;
192
+ --code-editor--font-family: FiraCode, monospace;
231
193
  --calendar--cell-size: 2.25rem;
232
194
  --switch--track-height: 1.5rem;
233
195
  --switch--track-width: 2.75rem;
@@ -236,9 +198,11 @@
236
198
  --contextual-help--max-width: 500px;
237
199
  --modal--size--s: 660px;
238
200
  --modal--size--m: 900px;
201
+ --modal--size--l: 1300px;
239
202
  --modal--content-min-height: 120px;
240
203
  --popover--min-width: 200px;
241
204
  --tooltip--max-width: 300px;
205
+ --scrollbar--track-color: transparent;
242
206
  --size-rem--xxxs: 0.0625rem;
243
207
  --size-rem--xxs: 0.125rem;
244
208
  --size-rem--xs: 0.25rem;
@@ -259,10 +223,9 @@
259
223
  --counter-badge--height: 1.25rem;
260
224
  --counter-badge--height-empty: 0.75rem;
261
225
  --loading-spinner--transition-duration: 2000ms;
226
+ --loading-spinner--transition-duration-slow: 6000ms;
262
227
  --notification--width: 355px;
263
- --progress-bar--height-s: 0.375rem;
264
- --transition--duration--default: 200ms;
265
- --transition--duration--slow: 300ms;
228
+ --image-cropper--grid-width: 0.5px;
266
229
  --action-group--spacing--m: var(--size-px--m);
267
230
  --action-group--spacing--s: var(--size-px--s);
268
231
  --button--padding-x: var(--size-px--m);
@@ -275,8 +238,7 @@
275
238
  --button--padding-s-y: var(--size-px--xs);
276
239
  --button--spacing-s: var(--size-rem--xs);
277
240
  --button--font-size-s: var(--font-size-text--s);
278
- --button--line-height-s: var(--size-rem--m);
279
- --image-button--hover-icon-color: var(--color--gray--100);
241
+ --button--line-height-s: var(--single-line-height);
280
242
  --menu--item-to-item-spacing: var(--size-px--xs);
281
243
  --menu--group-to-group-spacing: var(--size-px--m);
282
244
  --menu-item--font-weight--current: var(--font-weight--bold);
@@ -284,12 +246,14 @@
284
246
  --menu-item--padding-y: var(--size-px--xs);
285
247
  --menu-item--spacing: var(--size-rem--s);
286
248
  --menu-item--background-color--default: var(--color--transparent);
287
- --corner-radius--default: var(--size-px--xs);
249
+ --corner-radius--s: var(--size-px--xs);
250
+ --corner-radius--m: var(--size-px--s);
251
+ --corner-radius--l: var(--size-px--m);
288
252
  --border-width--100: var(--size-px--xxxs);
289
253
  --border-width--200: var(--size-px--xxs);
290
254
  --border-width--300: var(--size-px--xs);
291
255
  --border-width--400: var(--size-px--s);
292
- --chat--spacing: var(--size-px--m);
256
+ --chat--spacing: var(--size-px--s);
293
257
  --message-separator--font-size: var(--font-size-text--s);
294
258
  --message-separator--padding: var(--size-px--m);
295
259
  --message-thread--spacing: var(--size-rem--l);
@@ -298,8 +262,9 @@
298
262
  --message--padding-x: var(--size-px--m);
299
263
  --message--spacing-y: var(--size-rem--s);
300
264
  --message--spacing-x: var(--size-rem--m);
301
- --message--background-color-responder: var(--color--gray--400);
302
265
  --message--background-color-sender: var(--color--hosting-blue--200);
266
+ --message--tip-size-x: var(--size-px--s);
267
+ --message--border-style: var(--border-style--default);
303
268
  --primary--color--100: var(--color--hosting-blue--100);
304
269
  --primary--color--200: var(--color--hosting-blue--200);
305
270
  --primary--color--300: var(--color--hosting-blue--300);
@@ -344,6 +309,19 @@
344
309
  --neutral--color--900: var(--color--gray--900);
345
310
  --neutral--color--1000: var(--color--gray--1000);
346
311
  --neutral--color--1100: var(--color--gray--1100);
312
+ --neutral--color--1200: var(--color--gray--1200);
313
+ --unavailable--color--100: var(--color--gray--100);
314
+ --unavailable--color--200: var(--color--gray--200);
315
+ --unavailable--color--300: var(--color--gray--300);
316
+ --unavailable--color--400: var(--color--gray--400);
317
+ --unavailable--color--500: var(--color--gray--500);
318
+ --unavailable--color--600: var(--color--gray--600);
319
+ --unavailable--color--700: var(--color--gray--700);
320
+ --unavailable--color--800: var(--color--gray--800);
321
+ --unavailable--color--900: var(--color--gray--900);
322
+ --unavailable--color--1000: var(--color--gray--1000);
323
+ --unavailable--color--1100: var(--color--gray--1100);
324
+ --unavailable--color--1200: var(--color--gray--1200);
347
325
  --danger--color--100: var(--color--amaranth-red--100);
348
326
  --danger--color--200: var(--color--amaranth-red--200);
349
327
  --danger--color--300: var(--color--amaranth-red--300);
@@ -366,6 +344,38 @@
366
344
  --warning--color--900: var(--color--royal-orange--900);
367
345
  --warning--color--1000: var(--color--royal-orange--1000);
368
346
  --warning--color--1100: var(--color--royal-orange--1100);
347
+ --dark--color--100: var(--color--black-alpha--100);
348
+ --dark--color--200: var(--color--black-alpha--200);
349
+ --dark--color--300: var(--color--black-alpha--300);
350
+ --dark--color--400: var(--color--black-alpha--400);
351
+ --dark--color--500: var(--color--black-alpha--500);
352
+ --dark--color--600: var(--color--black-alpha--600);
353
+ --dark--color--700: var(--color--black-alpha--700);
354
+ --dark--color--800: var(--color--black-alpha--800);
355
+ --light--color--100: var(--color--white-alpha--100);
356
+ --light--color--200: var(--color--white-alpha--200);
357
+ --light--color--300: var(--color--white-alpha--300);
358
+ --light--color--400: var(--color--white-alpha--400);
359
+ --light--color--500: var(--color--white-alpha--500);
360
+ --light--color--600: var(--color--white-alpha--600);
361
+ --light--color--700: var(--color--white-alpha--700);
362
+ --light--color--800: var(--color--white-alpha--800);
363
+ --dark-static--color--100: var(--color--static-black-alpha--100);
364
+ --dark-static--color--200: var(--color--static-black-alpha--200);
365
+ --dark-static--color--300: var(--color--static-black-alpha--300);
366
+ --dark-static--color--400: var(--color--static-black-alpha--400);
367
+ --dark-static--color--500: var(--color--static-black-alpha--500);
368
+ --dark-static--color--600: var(--color--static-black-alpha--600);
369
+ --dark-static--color--700: var(--color--static-black-alpha--700);
370
+ --dark-static--color--800: var(--color--static-black-alpha--800);
371
+ --light-static--color--100: var(--color--static-white-alpha--100);
372
+ --light-static--color--200: var(--color--static-white-alpha--200);
373
+ --light-static--color--300: var(--color--static-white-alpha--300);
374
+ --light-static--color--400: var(--color--static-white-alpha--400);
375
+ --light-static--color--500: var(--color--static-white-alpha--500);
376
+ --light-static--color--600: var(--color--static-white-alpha--600);
377
+ --light-static--color--700: var(--color--static-white-alpha--700);
378
+ --light-static--color--800: var(--color--static-white-alpha--800);
369
379
  --primary-plain-background-color--default: var(--color--transparent);
370
380
  --primary-outline-background-color--default: var(--color--transparent);
371
381
  --danger-plain-background-color--default: var(--color--transparent);
@@ -376,70 +386,30 @@
376
386
  --success-outline-background-color--default: var(--color--transparent);
377
387
  --warning-outline-background-color--default: var(--color--transparent);
378
388
  --warning-plain-background-color--default: var(--color--transparent);
389
+ --unavailable-plain-background-color--default: var(--color--transparent);
390
+ --unavailable-outline-background-color--default: var(--color--transparent);
379
391
  --neutral-plain-background-color--default: var(--color--transparent);
380
392
  --neutral-outline-background-color--default: var(--color--transparent);
381
- --disabled-solid-dark-background-color: var(--dark--color--300);
382
- --disabled-solid-dark-content-color: var(--light--color--300);
383
- --disabled-solid-light-background-color: var(--light--color--300);
384
- --disabled-solid-light-content-color: var(--dark--color--300);
385
393
  --disabled-plain-background-color: var(--color--transparent);
386
- --disabled-plain-dark-content-color: var(--dark--color--300);
387
- --disabled-plain-light-content-color: var(--light--color--300);
388
394
  --disabled-outline-dark-background-color: var(--color--transparent);
389
- --disabled-outline-dark-border-color: var(--dark--color--300);
390
- --disabled-outline-dark-content-color: var(--dark--color--300);
391
395
  --disabled-outline-light-background-color: var(--color--transparent);
392
- --disabled-outline-light-border-color: var(--light--color--300);
393
- --disabled-outline-light-content-color: var(--light--color--300);
394
- --disabled-soft-dark-background-color: var(--dark--color--100);
395
- --disabled-soft-dark-content-color: var(--dark--color--200);
396
- --disabled-soft-light-background-color: var(--light--color--100);
397
- --disabled-soft-light-content-color: var(--light--color--200);
398
- --dark-solid-background-color--default: var(--dark--color--800);
399
- --dark-solid-background-color--hover: var(--dark--color--700);
400
- --dark-solid-background-color--pressed: var(--dark--color--600);
401
- --dark-solid-content-color: var(--light--color--800);
402
- --dark-soft-background-color--default: var(--dark--color--100);
403
- --dark-soft-background-color--hover: var(--dark--color--200);
404
- --dark-soft-background-color--pressed: var(--dark--color--300);
405
- --dark-soft-content-color: var(--dark--color--800);
396
+ --disabled-outline-dark-static-background-color: var(--color--transparent);
397
+ --disabled-outline-light-static-background-color: var(--color--transparent);
406
398
  --dark-plain-background-color--default: var(--color--transparent);
407
- --dark-plain-background-color--hover: var(--dark--color--100);
408
- --dark-plain-background-color--pressed: var(--dark--color--200);
409
- --dark-plain-content-color: var(--dark--color--800);
410
399
  --dark-outline-background-color--default: var(--color--transparent);
411
- --dark-outline-background-color--hover: var(--dark--color--100);
412
- --dark-outline-background-color--pressed: var(--dark--color--200);
413
- --dark-outline-border-color: var(--dark--color--800);
414
- --dark-outline-content-color: var(--dark--color--800);
415
- --light-solid-background-color--default: var(--light--color--800);
416
- --light-solid-background-color--hover: var(--light--color--700);
417
- --light-solid-background-color--pressed: var(--light--color--600);
418
- --light-solid-content-color: var(--dark--color--800);
419
- --light-soft-background-color--default: var(--light--color--100);
420
- --light-soft-background-color--hover: var(--light--color--200);
421
- --light-soft-background-color--pressed: var(--light--color--300);
422
- --light-soft-content-color: var(--light--color--800);
423
400
  --light-plain-background-color--default: var(--color--transparent);
424
- --light-plain-background-color--hover: var(--light--color--100);
425
- --light-plain-background-color--pressed: var(--light--color--200);
426
- --light-plain-content-color: var(--light--color--800);
427
401
  --light-outline-background-color--default: var(--color--transparent);
428
- --light-outline-background-color--hover: var(--light--color--100);
429
- --light-outline-background-color--pressed: var(--light--color--200);
430
- --light-outline-border-color: var(--light--color--800);
431
- --light-outline-content-color: var(--light--color--800);
432
- --color--violet: var(--color--soft-contrast-violet--800);
433
- --color--teal: var(--color--super-teal--800);
434
- --color--lilac: var(--color--bright-lilac--800);
402
+ --dark-static-plain-background-color--default: var(--color--transparent);
403
+ --dark-static-outline-background-color--default: var(--color--transparent);
404
+ --light-static-plain-background-color--default: var(--color--transparent);
405
+ --light-static-outline-background-color--default: var(--color--transparent);
435
406
  --avatar--size--xs: var(--size-rem--l);
436
407
  --avatar--size--s: var(--size-rem--xl);
437
408
  --avatar--size--l: var(--size-rem--xxl);
438
- --code--font-size: var(--font-size-text--s);
439
- --code--padding-x: var(--size-px--xs);
440
- --code--padding-y: var(--size-px--xxs);
441
- --code--padding: var(--size-px--m);
442
- --code--spacing: var(--size-px--m);
409
+ --code-block--font-size: var(--font-size-text--s);
410
+ --code-block--padding: var(--size-px--m);
411
+ --code-block--border-style: var(--border-style--default);
412
+ --code-block--show-more-padding: var(--size-px--xs);
443
413
  --decorative--blue-background-color: var(--color--hosting-blue--200);
444
414
  --decorative--blue-content-accent-color: var(--color--hosting-blue--800);
445
415
  --decorative--blue-content-color: var(--color--hosting-blue--1000);
@@ -455,60 +425,81 @@
455
425
  --decorative--lilac-background-color: var(--color--bright-lilac--200);
456
426
  --decorative--lilac-content-accent-color: var(--color--bright-lilac--800);
457
427
  --decorative--lilac-content-color: var(--color--bright-lilac--1000);
458
- --decorative--disabled-background-color: var(--color--gray--300);
459
- --decorative--disabled-content-accent-color: var(--color--gray--500);
460
- --decorative--disabled-content-color: var(--color--gray--600);
461
428
  --heading--icon-to-text-spacing: var(--size-rem--s);
462
429
  --heading--font-weight: var(--font-weight--bold);
430
+ --icon--violet-color: var(--color--soft-contrast-violet--800);
431
+ --icon--teal-color: var(--color--super-teal--800);
432
+ --icon--lilac-color: var(--color--bright-lilac--800);
463
433
  --illustrated-message--padding: var(--size-px--m);
464
434
  --illustrated-message--spacing: var(--size-rem--m);
465
435
  --image--border-style: var(--border-style--default);
466
436
  --initials--font-weight: var(--font-weight--bold);
437
+ --inline-code--font-size: var(--font-size-text--s);
438
+ --inline-code--padding-x: var(--size-px--xs);
439
+ --inline-code--padding-y: var(--size-px--xxs);
440
+ --kbd--padding: var(--size-px--xs);
441
+ --kbd--padding-y-start: var(--size-px--xxs);
442
+ --kbd--inner-shadow-size-x: var(--size-px--xxs);
443
+ --kbd--inner-shadow-size-y-end: var(--size-px--xs);
467
444
  --label--font-size: var(--font-size-text--s);
468
445
  --label--font-weight: var(--font-weight--bold);
469
446
  --label--spacing: var(--size-rem--xs);
470
- --labeled-value--label-to-value-spacing: var(--size-rem--xxs);
447
+ --labeled-value--label-to-value-spacing: var(--size-rem--xs);
471
448
  --labeled-value--value-to-action-spacing: var(--size-rem--xs);
472
449
  --markdown--spacing: var(--size-rem--m);
473
450
  --text--blockquote-border-style: var(--border-style--default);
474
451
  --text--blockquote-padding: var(--size-rem--s);
475
452
  --text--list-padding: var(--size-rem--l);
453
+ --axis--spacing: var(--size-px--s);
454
+ --axis--font-size: var(--font-size-text--s);
455
+ --axis--tick-size: var(--size-px--s);
456
+ --big-number--spacing: var(--size-rem--xs);
457
+ --big-number--top-font-size: var(--font-size-heading--xl);
458
+ --big-number--bottom-font-size: var(--font-size-text--m);
459
+ --big-number--font-weight: var(--font-weight--bold);
460
+ --chart-tooltip--spacing: var(--size-px--s);
461
+ --donut-chart--spacing-y: var(--size-rem--s);
462
+ --donut-chart--spacing-x: var(--size-rem--m);
463
+ --donut-chart--padding--m: var(--size-px--l);
464
+ --donut-chart--padding--l: var(--size-px--xl);
465
+ --legend--spacing-x: var(--size-px--m);
466
+ --legend--spacing-y: var(--size-px--s);
467
+ --legend-item--spacing: var(--size-rem--s);
468
+ --legend-item--marker--size: var(--size-rem--m);
476
469
  --focus--outline-offset: var(--size-px--xxs);
477
- --line-height--m: calc(var(--font-size-text--m) * 1.5);
478
- --line-height--s: calc(var(--font-size-text--s) * 1.5);
479
- --font-size-text--default: var(--font-size-text--m);
480
- --date-picker--date-segment-corner-radius: var(--size-px--xs);
470
+ --line-height-m: calc(var(--font-size-text--m) * 1.5);
471
+ --line-height-s: calc(var(--font-size-text--s) * 1.5);
472
+ --code-editor--font-size: var(--font-size-text--s);
473
+ --code-editor--gutter-element-min-width: var(--size-rem--l);
481
474
  --calendar--spacing: var(--size-rem--xs);
475
+ --calendar--heading-font-size: var(--font-size-text--m);
482
476
  --calendar--cell-corner-radius: var(--corner-radius--round);
483
477
  --calendar--cell-font-size: var(--font-size-text--s);
478
+ --calendar--range-border-width: var(--border-width--50);
479
+ --calendar--range-border-style: var(--border-style--default);
484
480
  --calendar--header-cell-font-weight: var(--font-weight--bold);
485
481
  --field-description--font-size: var(--font-size-text--s);
486
482
  --field-error--font-size: var(--font-size-text--s);
487
- --field-error--spacing: var(--size-rem--xs);
488
- --form-control--label-to-control-spacing: var(--size-rem--xxs);
483
+ --form-control--label-to-control-spacing: var(--size-rem--xs);
489
484
  --form-control--control-to-info-spacing: var(--size-rem--xs);
490
485
  --form-control--spacing-x: var(--size-rem--s);
491
486
  --form-control--spacing-y: var(--size-rem--xs);
492
487
  --form-control--padding-x: var(--size-px--m);
493
488
  --form-control--padding-y: var(--size-px--s);
494
489
  --form-control--border-style: var(--border-style--default);
490
+ --rating--spacing--s: var(--size-rem--xxs);
491
+ --rating--spacing--m: var(--size-rem--xs);
495
492
  --segmented-button--text-to-text-spacing: var(--size-rem--xs);
496
493
  --slider--spacing-x: var(--size-rem--s);
497
494
  --slider--spacing-y: var(--size-rem--m);
498
- --slider--border-style: var(--border-style--default);
499
495
  --slider--value-font-weight: var(--font-weight--bold);
496
+ --slider--track-height: var(--size-px--s);
497
+ --slider--track-border-style: var(--border-style--default);
500
498
  --slider--handle-corner-radius: var(--corner-radius--round);
501
499
  --slider--handle-size: var(--size-rem--l);
502
500
  --slider--initial-marker-height: var(--size-rem--m);
503
501
  --switch--label-to-track-spacing: var(--size-rem--s);
504
502
  --switch--track-padding: var(--size-rem--xxs);
505
- --time-field--date-segment-corner-radius: var(--size-px--xs);
506
- --breadcrumb--color-light--default: var(--light--color--800);
507
- --breadcrumb--color-light--hover: var(--light--color--700);
508
- --breadcrumb--color-light--pressed: var(--light--color--600);
509
- --breadcrumb--color-dark--default: var(--dark--color--800);
510
- --breadcrumb--color-dark--hover: var(--dark--color--700);
511
- --breadcrumb--color-dark--pressed: var(--dark--color--600);
512
503
  --breadcrumb--spacing: var(--size-rem--s);
513
504
  --breadcrumb--font-weight--default: var(--font-weight--normal);
514
505
  --breadcrumb--font-weight--current: var(--font-weight--bold);
@@ -517,26 +508,33 @@
517
508
  --header-navigation--corner-radius-round: var(--corner-radius--round);
518
509
  --header-navigation--font-weight-current: var(--font-weight--bold);
519
510
  --link--icon-height: calc(var(--font-size-text--m) * 1.25);
511
+ --link--icon-height-s: calc(var(--font-size-text--s) * 1.25);
520
512
  --link--font-weight: var(--font-weight--bold);
521
513
  --link--spacing: var(--size-rem--xs);
522
- --link--color-dark--default: var(--dark--color--800);
523
- --link--color-dark--hover: var(--dark--color--700);
524
- --link--color-dark--pressed: var(--dark--color--600);
525
- --link--color-light--default: var(--light--color--800);
526
- --link--color-light--hover: var(--light--color--700);
527
- --link--color-light--pressed: var(--light--color--600);
528
- --tabs--padding: var(--size-px--m);
514
+ --tab-navigation--padding: var(--size-px--m);
515
+ --tab-navigation--font-weight--current: var(--font-weight--bold);
516
+ --tab-navigation--spacing: var(--size-rem--s);
517
+ --tabs--padding-y: var(--size-px--s);
518
+ --tabs--padding-x: var(--size-px--m);
519
+ --tabs--corner-radius: calc(var(--size-px--s) * 2 + var(--line-height-m));
520
+ --tabs--border-style: var(--border-style--default);
529
521
  --tabs--font-weight--selected: var(--font-weight--bold);
530
522
  --tabs--spacing: var(--size-rem--s);
531
- --light-box--overlay-background-color: var(--dark--color--600);
532
- --light-box--max-width: calc(100dvw - var(--size-px--l));
533
- --light-box--max-height: calc(100dvh - var(--size-px--l));
523
+ --light-box--max-width: calc(100dvw - var(--size-px--xxl));
524
+ --light-box--max-height: calc(100dvh - var(--size-px--xxl));
525
+ --light-box--max-width-mobile: calc(100dvw - var(--size-px--l));
526
+ --light-box--max-height-mobile: calc(100dvh - var(--size-px--l));
534
527
  --light-box--spacing: var(--size-px--m);
528
+ --light-box--indicator-spacing: var(--size-px--xs);
529
+ --light-box--indicator-size: var(--size-px--m);
530
+ --light-box--indicator-border-style: var(--border-style--default);
531
+ --light-box--indicator-corner-radius: var(--corner-radius--round);
535
532
  --modal--padding: var(--size-px--l);
533
+ --modal--padding-mobile: var(--size-px--m);
534
+ --modal--tray-top-spacing: var(--size-px--m);
536
535
  --modal--border-style: var(--border-style--default);
537
- --modal--header-padding-y: var(--size-px--s);
536
+ --modal--header-padding-top: var(--size-px--m);
538
537
  --modal--off-canvas-max-width: calc(100dvw - var(--size-px--m));
539
- --overlay--background-color: var(--dark--color--200);
540
538
  --popover--padding--m: var(--size-px--m);
541
539
  --popover--padding--s: var(--size-px--s);
542
540
  --popover--border-style: var(--border-style--default);
@@ -549,17 +547,17 @@
549
547
  --tooltip--font-size: var(--font-size-text--s);
550
548
  --tooltip--tooltip-to-trigger-spacing: var(--size-px--s);
551
549
  --tooltip--tip-size: var(--size-px--s);
552
- --shadow--content: rgba(0, 0, 0, 0.1) 0 var(--size-px--xs) var(--size-px--s);
553
- --shadow--overlay: rgba(0, 0, 0, 0.14) 0 var(--size-px--m) var(--size-px--l);
550
+ --scrollbar--size: var(--size-px--s);
551
+ --scrollbar--corner-radius: var(--corner-radius--round);
552
+ --alert-text--spacing: var(--size-rem--xs);
554
553
  --alert--padding: var(--size-px--m);
555
554
  --alert--border-style: var(--border-style--default);
556
555
  --alert--heading-to-content-spacing: var(--size-rem--s);
557
556
  --alert--spacing: var(--size-rem--m);
558
- --alert--font-size-heading: var(--font-size-text--m);
557
+ --alert--heading-size: var(--font-size-heading--xs);
559
558
  --badge--font-size: var(--font-size-text--s);
560
559
  --badge--font-weight: var(--font-weight--bold);
561
- --badge--line-height: var(--size-rem--m);
562
- --badge--corner-radius: var(--size-rem--m);
560
+ --badge--line-height: var(--single-line-height);
563
561
  --badge--border-style: var(--border-style--default);
564
562
  --badge--padding-y: var(--size-rem--xs);
565
563
  --badge--padding-x: var(--size-rem--s);
@@ -568,79 +566,56 @@
568
566
  --badge--neutral-background-color--default: var(--color--gray--300);
569
567
  --badge--neutral-background-color--hover: var(--color--gray--400);
570
568
  --badge--neutral-background-color--pressed: var(--color--gray--500);
571
- --badge--neutral-content-color--default: var(--color--gray--900);
572
- --badge--neutral-content-color--pressed: var(--color--gray--1000);
569
+ --badge--neutral-content-color: var(--color--gray--900);
573
570
  --badge--neutral-scope-background-color: var(--color--gray--800);
574
571
  --badge--blue-border-color: var(--color--hosting-blue--800);
575
572
  --badge--blue-background-color--default: var(--color--hosting-blue--100);
576
573
  --badge--blue-background-color--hover: var(--color--hosting-blue--200);
577
574
  --badge--blue-background-color--pressed: var(--color--hosting-blue--300);
578
- --badge--blue-content-color--default: var(--color--hosting-blue--900);
579
- --badge--blue-content-color--pressed: var(--color--hosting-blue--1000);
575
+ --badge--blue-content-color: var(--color--hosting-blue--900);
580
576
  --badge--blue-scope-background-color: var(--color--hosting-blue--800);
581
577
  --badge--navy-border-color: var(--color--mittwald-navy--800);
582
578
  --badge--navy-background-color--default: var(--color--mittwald-navy--100);
583
579
  --badge--navy-background-color--hover: var(--color--mittwald-navy--200);
584
580
  --badge--navy-background-color--pressed: var(--color--mittwald-navy--300);
585
- --badge--navy-content-color--default: var(--color--mittwald-navy--900);
586
- --badge--navy-content-color--pressed: var(--color--mittwald-navy--1000);
581
+ --badge--navy-content-color: var(--color--mittwald-navy--900);
587
582
  --badge--navy-scope-background-color: var(--color--mittwald-navy--800);
588
583
  --badge--violet-border-color: var(--color--soft-contrast-violet--800);
589
584
  --badge--violet-background-color--default: var(--color--soft-contrast-violet--100);
590
585
  --badge--violet-background-color--hover: var(--color--soft-contrast-violet--200);
591
586
  --badge--violet-background-color--pressed: var(--color--soft-contrast-violet--300);
592
- --badge--violet-content-color--default: var(--color--soft-contrast-violet--900);
593
- --badge--violet-content-color--pressed: var(--color--soft-contrast-violet--1000);
587
+ --badge--violet-content-color: var(--color--soft-contrast-violet--900);
594
588
  --badge--violet-scope-background-color: var(--color--soft-contrast-violet--800);
595
589
  --badge--teal-border-color: var(--color--super-teal--800);
596
590
  --badge--teal-background-color--default: var(--color--super-teal--100);
597
591
  --badge--teal-background-color--hover: var(--color--super-teal--200);
598
592
  --badge--teal-background-color--pressed: var(--color--super-teal--300);
599
- --badge--teal-content-color--default: var(--color--super-teal--900);
600
- --badge--teal-content-color--pressed: var(--color--super-teal--1000);
593
+ --badge--teal-content-color: var(--color--super-teal--900);
601
594
  --badge--teal-scope-background-color: var(--color--super-teal--800);
602
595
  --badge--lilac-border-color: var(--color--bright-lilac--800);
603
596
  --badge--lilac-background-color--default: var(--color--bright-lilac--100);
604
597
  --badge--lilac-background-color--hover: var(--color--bright-lilac--200);
605
598
  --badge--lilac-background-color--pressed: var(--color--bright-lilac--300);
606
- --badge--lilac-content-color--default: var(--color--bright-lilac--900);
607
- --badge--lilac-content-color--pressed: var(--color--bright-lilac--1000);
599
+ --badge--lilac-content-color: var(--color--bright-lilac--900);
608
600
  --badge--lilac-scope-background-color: var(--color--bright-lilac--800);
609
601
  --badge--red-border-color: var(--color--amaranth-red--800);
610
602
  --badge--red-background-color--default: var(--color--amaranth-red--100);
611
603
  --badge--red-background-color--hover: var(--color--amaranth-red--200);
612
604
  --badge--red-background-color--pressed: var(--color--amaranth-red--300);
613
- --badge--red-content-color--default: var(--color--amaranth-red--900);
614
- --badge--red-content-color--pressed: var(--color--amaranth-red--1000);
605
+ --badge--red-content-color: var(--color--amaranth-red--900);
615
606
  --badge--red-scope-background-color: var(--color--amaranth-red--800);
616
607
  --badge--green-border-color: var(--color--espelkamp-green--800);
617
608
  --badge--green-background-color--default: var(--color--espelkamp-green--100);
618
609
  --badge--green-background-color--hover: var(--color--espelkamp-green--200);
619
610
  --badge--green-background-color--pressed: var(--color--espelkamp-green--300);
620
- --badge--green-content-color--default: var(--color--espelkamp-green--900);
621
- --badge--green-content-color--pressed: var(--color--espelkamp-green--1000);
611
+ --badge--green-content-color: var(--color--espelkamp-green--900);
622
612
  --badge--green-scope-background-color: var(--color--espelkamp-green--800);
623
613
  --badge--orange-border-color: var(--color--royal-orange--900);
624
614
  --badge--orange-background-color--default: var(--color--royal-orange--100);
625
615
  --badge--orange-background-color--hover: var(--color--royal-orange--200);
626
616
  --badge--orange-background-color--pressed: var(--color--royal-orange--300);
627
- --badge--orange-content-color--default: var(--color--royal-orange--900);
628
- --badge--orange-content-color--pressed: var(--color--royal-orange--1000);
617
+ --badge--orange-content-color: var(--color--royal-orange--900);
629
618
  --badge--orange-scope-background-color: var(--color--royal-orange--900);
630
- --badge--dark-border-color: var(--dark--color--800);
631
- --badge--dark-background-color--default: var(--dark--color--100);
632
- --badge--dark-background-color--hover: var(--dark--color--200);
633
- --badge--dark-background-color--pressed: var(--dark--color--300);
634
- --badge--dark-content-color--default: var(--dark--color--800);
635
- --badge--dark-content-color--pressed: var(--dark--color--800);
636
- --badge--dark-scope-background-color: var(--dark--color--800);
637
- --badge--light-border-color: var(--light--color--800);
638
- --badge--light-background-color--default: var(--light--color--100);
639
- --badge--light-background-color--hover: var(--light--color--200);
640
- --badge--light-background-color--pressed: var(--light--color--300);
641
- --badge--light-content-color--default: var(--light--color--800);
642
- --badge--light-content-color--pressed: var(--light--color--800);
643
- --badge--light-scope-background-color: var(--light--color--800);
644
619
  --counter-badge--font-weight: var(--font-weight--bold);
645
620
  --counter-badge--padding-inline: var(--size-rem--xs);
646
621
  --counter-badge--border-style: var(--border-style--default);
@@ -651,15 +626,22 @@
651
626
  --notification--heading-to-text-spacing: var(--size-rem--xs);
652
627
  --notification--spacing: var(--size-rem--s);
653
628
  --notification--font-size: var(--font-size-text--s);
629
+ --password-creation-field--rule-to-rule-spacing: var(--size-px--s);
654
630
  --progress-bar--font-size: var(--font-size-text--m);
655
631
  --progress-bar--font-size-s: var(--font-size-text--s);
656
632
  --progress-bar--value-font-weight: var(--font-weight--bold);
657
633
  --progress-bar--spacing-y: var(--size-rem--xs);
658
634
  --progress-bar--spacing-x: var(--size-rem--m);
659
- --progress-bar--height: var(--size-rem--s);
660
- --progress-bar--corner-radius: var(--size-rem--xs);
661
- --accent-box--background-color-blue: var(--color--hosting-blue--100);
662
- --accent-box--icon-color-blue: var(--color--hosting-blue--200);
635
+ --progress-bar--spacing-bar-to-legend: var(--size-px--m);
636
+ --progress-bar--height--m: var(--size-rem--m);
637
+ --progress-bar--height--s: var(--size-rem--s);
638
+ --progress-bar--height--l: var(--size-rem--l);
639
+ --accent-box--background-color-blue: var(--color--hosting-blue--200);
640
+ --accent-box--background-color-teal: var(--color--super-teal--200);
641
+ --accent-box--background-color-lilac: var(--color--bright-lilac--200);
642
+ --accent-box--background-color-violet: var(--color--soft-contrast-violet--200);
643
+ --accent-box--background-color-green: var(--color--espelkamp-green--200);
644
+ --accent-box--background-color-navy: var(--color--mittwald-navy--200);
663
645
  --accent-box--background-color-gradient: var(--color--gradient);
664
646
  --accent-box--padding: var(--size-px--m);
665
647
  --accordion--spacing: var(--size-rem--s);
@@ -676,8 +658,10 @@
676
658
  --column-layout--gap--xl: var(--size-px--xl);
677
659
  --layout-card--padding: var(--size-px--l);
678
660
  --layout-card--padding-mobile: var(--size-px--m);
661
+ --layout-card--border-style: var(--border-style--default);
679
662
  --list--spacing: var(--size-px--s);
680
663
  --list--block-to-block-spacing: var(--size-px--m);
664
+ --list--filter-to-search-spacing: var(--size-px--xl);
681
665
  --list-item--padding: var(--size-px--s);
682
666
  --list-item--border-style: var(--border-style--default);
683
667
  --list-item--spacing: var(--size-px--m);
@@ -689,6 +673,7 @@
689
673
  --section--sub-heading-spacing-s: var(--size-rem--s);
690
674
  --section-header--action-to-action-spacing: var(--size-rem--s);
691
675
  --section-header--heading-to-action-spacing: var(--size-rem--m);
676
+ --separator--border-style: var(--border-style--default);
692
677
  --table--border-style: var(--border-style--default);
693
678
  --table--padding-x: var(--size-px--m);
694
679
  --table--padding-y: var(--size-px--s);
@@ -702,9 +687,12 @@
702
687
  --file-drop-zone--padding: var(--size-px--m);
703
688
  --file-drop-zone--border-style--default: var(--border-style--dashed);
704
689
  --file-drop-zone--border-style--target: var(--border-style--default);
705
- --button--corner-radius: var(--corner-radius--default);
690
+ --image-cropper--spacing: var(--size-px--m);
691
+ --image-cropper--border-style: var(--border-style--default);
692
+ --button--corner-radius: var(--corner-radius--m);
706
693
  --button--pending-icon-color: var(--neutral--color--1000);
707
694
  --button--border-width: var(--border-width--100);
695
+ --button--corner-radius-s: var(--corner-radius--s);
708
696
  --button--accent-plain-background-color--default: var(--success-plain-background-color--default);
709
697
  --button--accent-plain-background-color--disabled: var(--disabled-plain-background-color);
710
698
  --button--accent-outline-background-color--default: var(--success-outline-background-color--default);
@@ -717,82 +705,30 @@
717
705
  --button--danger-plain-background-color--default: var(--danger-plain-background-color--default);
718
706
  --button--danger-plain-background-color--disabled: var(--disabled-plain-background-color);
719
707
  --button--danger-outline-background-color--default: var(--danger-outline-background-color--default);
720
- --button--dark-solid-background-color--default: var(--dark-solid-background-color--default);
721
- --button--dark-solid-background-color--hover: var(--dark-solid-background-color--hover);
722
- --button--dark-solid-background-color--pressed: var(--dark-solid-background-color--pressed);
723
- --button--dark-solid-background-color--disabled: var(--disabled-solid-dark-background-color);
724
- --button--dark-solid-content-color--default: var(--dark-solid-content-color);
725
- --button--dark-solid-content-color--hover: var(--dark-solid-content-color);
726
- --button--dark-solid-content-color--pressed: var(--dark-solid-content-color);
727
- --button--dark-solid-content-color--disabled: var(--disabled-solid-dark-content-color);
728
708
  --button--dark-plain-background-color--default: var(--dark-plain-background-color--default);
729
- --button--dark-plain-background-color--hover: var(--dark-plain-background-color--hover);
730
- --button--dark-plain-background-color--pressed: var(--dark-plain-background-color--pressed);
731
709
  --button--dark-plain-background-color--disabled: var(--disabled-plain-background-color);
732
- --button--dark-plain-content-color--default: var(--dark-plain-content-color);
733
- --button--dark-plain-content-color--hover: var(--dark-plain-content-color);
734
- --button--dark-plain-content-color--pressed: var(--dark-plain-content-color);
735
- --button--dark-plain-content-color--disabled: var(--disabled-plain-dark-content-color);
736
- --button--dark-soft-background-color--default: var(--dark-soft-background-color--default);
737
- --button--dark-soft-background-color--hover: var(--dark-soft-background-color--hover);
738
- --button--dark-soft-background-color--pressed: var(--dark-soft-background-color--pressed);
739
- --button--dark-soft-background-color--disabled: var(--disabled-soft-dark-background-color);
740
- --button--dark-soft-content-color--default: var(--dark-soft-content-color);
741
- --button--dark-soft-content-color--hover: var(--dark-soft-content-color);
742
- --button--dark-soft-content-color--pressed: var(--dark-soft-content-color);
743
- --button--dark-soft-content-color--disabled: var(--disabled-soft-dark-content-color);
744
710
  --button--dark-outline-background-color--default: var(--dark-outline-background-color--default);
745
- --button--dark-outline-background-color--hover: var(--dark-outline-background-color--hover);
746
- --button--dark-outline-background-color--pressed: var(--dark-outline-background-color--pressed);
747
711
  --button--dark-outline-background-color--disabled: var(--disabled-outline-dark-background-color);
748
- --button--dark-outline-content-color--default: var(--dark-outline-content-color);
749
- --button--dark-outline-content-color--hover: var(--dark-outline-content-color);
750
- --button--dark-outline-content-color--pressed: var(--dark-outline-content-color);
751
- --button--dark-outline-content-color--disabled: var(--disabled-outline-dark-content-color);
752
- --button--dark-outline-border-color--default: var(--dark-outline-border-color);
753
- --button--dark-outline-border-color--disabled: var(--disabled-outline-dark-border-color);
754
- --button--light-solid-background-color--default: var(--light-solid-background-color--default);
755
- --button--light-solid-background-color--hover: var(--light-solid-background-color--hover);
756
- --button--light-solid-background-color--pressed: var(--light-solid-background-color--pressed);
757
- --button--light-solid-background-color--disabled: var(--disabled-solid-light-background-color);
758
- --button--light-solid-content-color--default: var(--light-solid-content-color);
759
- --button--light-solid-content-color--hover: var(--light-solid-content-color);
760
- --button--light-solid-content-color--pressed: var(--light-solid-content-color);
761
- --button--light-solid-content-color--disabled: var(--disabled-solid-light-content-color);
762
712
  --button--light-plain-background-color--default: var(--light-plain-background-color--default);
763
- --button--light-plain-background-color--hover: var(--light-plain-background-color--hover);
764
- --button--light-plain-background-color--pressed: var(--light-plain-background-color--pressed);
765
713
  --button--light-plain-background-color--disabled: var(--disabled-plain-background-color);
766
- --button--light-plain-content-color--default: var(--light-plain-content-color);
767
- --button--light-plain-content-color--hover: var(--light-plain-content-color);
768
- --button--light-plain-content-color--pressed: var(--light-plain-content-color);
769
- --button--light-plain-content-color--disabled: var(--disabled-plain-light-content-color);
770
- --button--light-soft-background-color--default: var(--light-soft-background-color--default);
771
- --button--light-soft-background-color--hover: var(--light-soft-background-color--hover);
772
- --button--light-soft-background-color--pressed: var(--light-soft-background-color--pressed);
773
- --button--light-soft-background-color--disabled: var(--disabled-soft-light-background-color);
774
- --button--light-soft-content-color--default: var(--light-soft-content-color);
775
- --button--light-soft-content-color--hover: var(--light-soft-content-color);
776
- --button--light-soft-content-color--pressed: var(--light-soft-content-color);
777
- --button--light-soft-content-color--disabled: var(--disabled-soft-light-content-color);
778
714
  --button--light-outline-background-color--default: var(--light-outline-background-color--default);
779
- --button--light-outline-background-color--hover: var(--light-outline-background-color--hover);
780
- --button--light-outline-background-color--pressed: var(--light-outline-background-color--pressed);
781
715
  --button--light-outline-background-color--disabled: var(--disabled-outline-light-background-color);
782
- --button--light-outline-content-color--default: var(--light-outline-content-color);
783
- --button--light-outline-content-color--hover: var(--light-outline-content-color);
784
- --button--light-outline-content-color--pressed: var(--light-outline-content-color);
785
- --button--light-outline-content-color--disabled: var(--disabled-outline-light-content-color);
786
- --button--light-outline-border-color--default: var(--light-outline-border-color);
787
- --button--light-outline-border-color--disabled: var(--disabled-outline-light-border-color);
788
- --menu-item--corner-radius: var(--corner-radius--default);
789
- --menu-item--color--current: var(--primary--color--800);
790
- --menu-item--icon-color--default: var(--neutral--color--800);
791
- --menu-item--icon-color--current: var(--primary--color--800);
716
+ --button--dark-static-plain-background-color--default: var(--dark-static-plain-background-color--default);
717
+ --button--dark-static-plain-background-color--disabled: var(--disabled-plain-background-color);
718
+ --button--dark-static-outline-background-color--default: var(--dark-static-outline-background-color--default);
719
+ --button--dark-static-outline-background-color--disabled: var(--disabled-outline-dark-static-background-color);
720
+ --button--light-static-plain-background-color--default: var(--light-static-plain-background-color--default);
721
+ --button--light-static-plain-background-color--disabled: var(--disabled-plain-background-color);
722
+ --button--light-static-outline-background-color--default: var(--light-static-outline-background-color--default);
723
+ --button--light-static-outline-background-color--disabled: var(--disabled-outline-light-static-background-color);
724
+ --menu-item--corner-radius: var(--corner-radius--m);
792
725
  --menu-item--disabled-background-color: var(--disabled-plain-background-color);
793
726
  --message-separator--background-color: var(--neutral--color--100);
794
727
  --message-separator--color: var(--neutral--color--800);
795
- --message--corner-radius: var(--corner-radius--default);
728
+ --message--corner-radius: var(--corner-radius--m);
729
+ --message--background-color-responder: var(--neutral--color--200);
730
+ --message--border-width: var(--border-width--100);
731
+ --message--border-color: var(--neutral--color--300);
796
732
  --primary-solid-background-color--default: var(--primary--color--800);
797
733
  --primary-solid-background-color--hover: var(--primary--color--900);
798
734
  --primary-solid-background-color--pressed: var(--primary--color--1000);
@@ -803,8 +739,7 @@
803
739
  --primary-soft-background-color--default: var(--primary--color--100);
804
740
  --primary-soft-background-color--hover: var(--primary--color--200);
805
741
  --primary-soft-background-color--pressed: var(--primary--color--300);
806
- --primary-soft-content-color--default: var(--primary--color--900);
807
- --primary-soft-content-color--pressed: var(--primary--color--1000);
742
+ --primary-soft-content-color: var(--primary--color--900);
808
743
  --primary-outline-background-color--hover: var(--primary--color--100);
809
744
  --primary-outline-background-color--pressed: var(--primary--color--200);
810
745
  --primary-outline-content-color: var(--primary--color--900);
@@ -823,8 +758,7 @@
823
758
  --danger-soft-background-color--default: var(--danger--color--100);
824
759
  --danger-soft-background-color--hover: var(--danger--color--200);
825
760
  --danger-soft-background-color--pressed: var(--danger--color--300);
826
- --danger-soft-content-color--default: var(--danger--color--900);
827
- --danger-soft-content-color--pressed: var(--danger--color--1000);
761
+ --danger-soft-content-color: var(--danger--color--900);
828
762
  --info-solid-background-color--default: var(--info--color--800);
829
763
  --info-solid-background-color--hover: var(--info--color--900);
830
764
  --info-solid-background-color--pressed: var(--info--color--1000);
@@ -836,8 +770,7 @@
836
770
  --info-soft-background-color--default: var(--info--color--100);
837
771
  --info-soft-background-color--hover: var(--info--color--200);
838
772
  --info-soft-background-color--pressed: var(--info--color--300);
839
- --info-soft-content-color--default: var(--info--color--900);
840
- --info-soft-content-color--pressed: var(--info--color--1000);
773
+ --info-soft-content-color: var(--info--color--900);
841
774
  --info-plain-background-color--hover: var(--info--color--100);
842
775
  --info-plain-background-color--pressed: var(--info--color--200);
843
776
  --info-plain-content-color: var(--info--color--800);
@@ -855,8 +788,7 @@
855
788
  --success-soft-background-color--default: var(--success--color--100);
856
789
  --success-soft-background-color--hover: var(--success--color--200);
857
790
  --success-soft-background-color--pressed: var(--success--color--300);
858
- --success-soft-content-color--default: var(--success--color--900);
859
- --success-soft-content-color--pressed: var(--success--color--1000);
791
+ --success-soft-content-color: var(--success--color--900);
860
792
  --warning-solid-background-color--default: var(--warning--color--800);
861
793
  --warning-solid-background-color--hover: var(--warning--color--900);
862
794
  --warning-solid-background-color--pressed: var(--warning--color--1000);
@@ -868,199 +800,341 @@
868
800
  --warning-soft-background-color--default: var(--warning--color--100);
869
801
  --warning-soft-background-color--hover: var(--warning--color--200);
870
802
  --warning-soft-background-color--pressed: var(--warning--color--300);
871
- --warning-soft-content-color--default: var(--warning--color--900);
872
- --warning-soft-content-color--pressed: var(--warning--color--1000);
873
- --warning-plain-background-color--hover: var(--info--color--100);
874
- --warning-plain-background-color--pressed: var(--info--color--200);
875
- --warning-plain-content-color: var(--info--color--800);
803
+ --warning-soft-content-color: var(--warning--color--900);
804
+ --warning-plain-background-color--hover: var(--warning--color--100);
805
+ --warning-plain-background-color--pressed: var(--warning--color--200);
806
+ --warning-plain-content-color: var(--warning--color--800);
807
+ --unavailable-solid-background-color--default: var(--unavailable--color--800);
808
+ --unavailable-solid-background-color--hover: var(--unavailable--color--900);
809
+ --unavailable-solid-background-color--pressed: var(--unavailable--color--1000);
810
+ --unavailable-solid-content-color: var(--neutral--color--100);
811
+ --unavailable-plain-background-color--hover: var(--unavailable--color--300);
812
+ --unavailable-plain-background-color--pressed: var(--unavailable--color--400);
813
+ --unavailable-plain-content-color: var(--unavailable--color--800);
814
+ --unavailable-outline-background-color--hover: var(--unavailable--color--300);
815
+ --unavailable-outline-background-color--pressed: var(--unavailable--color--400);
816
+ --unavailable-outline-content-color: var(--unavailable--color--800);
817
+ --unavailable-outline-border-color: var(--unavailable--color--800);
818
+ --unavailable-soft-background-color--default: var(--unavailable--color--300);
819
+ --unavailable-soft-background-color--hover: var(--unavailable--color--400);
820
+ --unavailable-soft-background-color--pressed: var(--unavailable--color--500);
821
+ --unavailable-soft-content-color: var(--unavailable--color--800);
876
822
  --neutral-solid-background-color--default: var(--neutral--color--800);
877
823
  --neutral-solid-background-color--hover: var(--neutral--color--900);
878
824
  --neutral-solid-background-color--pressed: var(--neutral--color--1000);
879
825
  --neutral-solid-content-color: var(--neutral--color--100);
880
- --neutral-plain-background-color--hover: var(--neutral--color--400);
881
- --neutral-plain-background-color--pressed: var(--neutral--color--500);
826
+ --neutral-plain-background-color--hover: var(--neutral--color--300);
827
+ --neutral-plain-background-color--pressed: var(--neutral--color--400);
882
828
  --neutral-plain-content-color: var(--neutral--color--1000);
883
- --neutral-outline-background-color--hover: var(--neutral--color--400);
884
- --neutral-outline-background-color--selected: var(--neutral--color--500);
885
- --neutral-outline-background-color--pressed: var(--neutral--color--500);
829
+ --neutral-outline-background-color--hover: var(--neutral--color--300);
830
+ --neutral-outline-background-color--selected: var(--neutral--color--400);
831
+ --neutral-outline-background-color--pressed: var(--neutral--color--400);
886
832
  --neutral-outline-content-color: var(--neutral--color--1000);
887
833
  --neutral-outline-border-color: var(--neutral--color--700);
888
834
  --neutral-soft-background-color--default: var(--neutral--color--400);
889
835
  --neutral-soft-background-color--hover: var(--neutral--color--500);
890
836
  --neutral-soft-background-color--pressed: var(--neutral--color--600);
891
- --neutral-soft-content-color--default: var(--neutral--color--1000);
892
- --neutral-soft-content-color--pressed: var(--neutral--color--1100);
893
- --disabled-solid-background-color: var(--neutral--color--400);
894
- --disabled-solid-content-color: var(--neutral--color--600);
837
+ --neutral-soft-content-color: var(--neutral--color--1000);
838
+ --disabled-solid-background-color: var(--neutral--color--300);
839
+ --disabled-solid-content-color: var(--neutral--color--500);
840
+ --disabled-solid-dark-background-color: var(--dark--color--300);
841
+ --disabled-solid-dark-content-color: var(--light--color--300);
842
+ --disabled-solid-light-background-color: var(--light--color--300);
843
+ --disabled-solid-light-content-color: var(--dark--color--300);
844
+ --disabled-solid-dark-static-background-color: var(--dark-static--color--300);
845
+ --disabled-solid-dark-static-content-color: var(--light-static--color--300);
846
+ --disabled-solid-light-static-background-color: var(--light-static--color--300);
847
+ --disabled-solid-light-static-content-color: var(--dark-static--color--300);
895
848
  --disabled-plain-content-color: var(--neutral--color--400);
896
- --disabled-outline-background-color: var(--neutral--color--300);
849
+ --disabled-plain-dark-content-color: var(--dark--color--200);
850
+ --disabled-plain-light-content-color: var(--light--color--200);
851
+ --disabled-plain-dark-static-content-color: var(--dark-static--color--200);
852
+ --disabled-plain-light-static-content-color: var(--light-static--color--200);
853
+ --disabled-outline-background-color: var(--neutral--color--200);
897
854
  --disabled-outline-content-color: var(--neutral--color--500);
898
855
  --disabled-outline-border-color: var(--neutral--color--400);
899
- --disabled-soft-background-color: var(--neutral--color--300);
856
+ --disabled-outline-dark-border-color: var(--dark--color--200);
857
+ --disabled-outline-dark-content-color: var(--dark--color--200);
858
+ --disabled-outline-light-border-color: var(--light--color--200);
859
+ --disabled-outline-light-content-color: var(--light--color--200);
860
+ --disabled-outline-dark-static-border-color: var(--dark-static--color--200);
861
+ --disabled-outline-dark-static-content-color: var(--dark-static--color--200);
862
+ --disabled-outline-light-static-border-color: var(--light-static--color--200);
863
+ --disabled-outline-light-static-content-color: var(--light-static--color--200);
864
+ --disabled-soft-background-color: var(--neutral--color--200);
900
865
  --disabled-soft-content-color: var(--neutral--color--500);
901
- --color--blue: var(--primary--color--1000);
866
+ --disabled-soft-dark-background-color: var(--dark--color--100);
867
+ --disabled-soft-dark-content-color: var(--dark--color--200);
868
+ --disabled-soft-light-background-color: var(--light--color--100);
869
+ --disabled-soft-light-content-color: var(--light--color--200);
870
+ --disabled-soft-dark-static-background-color: var(--dark-static--color--100);
871
+ --disabled-soft-dark-static-content-color: var(--dark-static--color--200);
872
+ --disabled-soft-light-static-background-color: var(--light-static--color--100);
873
+ --disabled-soft-light-static-content-color: var(--light-static--color--200);
874
+ --dark-solid-background-color--default: var(--dark--color--800);
875
+ --dark-solid-background-color--hover: var(--dark--color--700);
876
+ --dark-solid-background-color--pressed: var(--dark--color--600);
877
+ --dark-solid-content-color: var(--light--color--800);
878
+ --dark-soft-background-color--default: var(--dark--color--100);
879
+ --dark-soft-background-color--hover: var(--dark--color--200);
880
+ --dark-soft-background-color--pressed: var(--dark--color--300);
881
+ --dark-soft-content-color: var(--dark--color--800);
882
+ --dark-plain-background-color--hover: var(--dark--color--100);
883
+ --dark-plain-background-color--pressed: var(--dark--color--200);
884
+ --dark-plain-content-color: var(--dark--color--800);
885
+ --dark-outline-background-color--hover: var(--dark--color--100);
886
+ --dark-outline-background-color--pressed: var(--dark--color--200);
887
+ --dark-outline-border-color: var(--dark--color--800);
888
+ --dark-outline-content-color: var(--dark--color--800);
889
+ --light-solid-background-color--default: var(--light--color--800);
890
+ --light-solid-background-color--hover: var(--light--color--700);
891
+ --light-solid-background-color--pressed: var(--light--color--600);
892
+ --light-solid-content-color: var(--dark--color--800);
893
+ --light-soft-background-color--default: var(--light--color--100);
894
+ --light-soft-background-color--hover: var(--light--color--200);
895
+ --light-soft-background-color--pressed: var(--light--color--300);
896
+ --light-soft-content-color: var(--light--color--800);
897
+ --light-plain-background-color--hover: var(--light--color--100);
898
+ --light-plain-background-color--pressed: var(--light--color--200);
899
+ --light-plain-content-color: var(--light--color--800);
900
+ --light-outline-background-color--hover: var(--light--color--100);
901
+ --light-outline-background-color--pressed: var(--light--color--200);
902
+ --light-outline-border-color: var(--light--color--800);
903
+ --light-outline-content-color: var(--light--color--800);
904
+ --dark-static-solid-background-color--default: var(--dark-static--color--800);
905
+ --dark-static-solid-background-color--hover: var(--dark-static--color--700);
906
+ --dark-static-solid-background-color--pressed: var(--dark-static--color--600);
907
+ --dark-static-solid-content-color: var(--light-static--color--800);
908
+ --dark-static-soft-background-color--default: var(--dark-static--color--100);
909
+ --dark-static-soft-background-color--hover: var(--dark-static--color--200);
910
+ --dark-static-soft-background-color--pressed: var(--dark-static--color--300);
911
+ --dark-static-soft-content-color: var(--dark-static--color--800);
912
+ --dark-static-plain-background-color--hover: var(--dark-static--color--100);
913
+ --dark-static-plain-background-color--pressed: var(--dark-static--color--200);
914
+ --dark-static-plain-content-color: var(--dark-static--color--800);
915
+ --dark-static-outline-background-color--hover: var(--dark-static--color--100);
916
+ --dark-static-outline-background-color--pressed: var(--dark-static--color--200);
917
+ --dark-static-outline-border-color: var(--dark-static--color--800);
918
+ --dark-static-outline-content-color: var(--dark-static--color--800);
919
+ --light-static-solid-background-color--default: var(--light-static--color--800);
920
+ --light-static-solid-background-color--hover: var(--light-static--color--700);
921
+ --light-static-solid-background-color--pressed: var(--light-static--color--600);
922
+ --light-static-solid-content-color: var(--dark-static--color--800);
923
+ --light-static-soft-background-color--default: var(--light-static--color--100);
924
+ --light-static-soft-background-color--hover: var(--light-static--color--200);
925
+ --light-static-soft-background-color--pressed: var(--light-static--color--300);
926
+ --light-static-soft-content-color: var(--light-static--color--800);
927
+ --light-static-plain-background-color--hover: var(--light-static--color--100);
928
+ --light-static-plain-background-color--pressed: var(--light-static--color--200);
929
+ --light-static-plain-content-color: var(--light-static--color--800);
930
+ --light-static-outline-background-color--hover: var(--light-static--color--100);
931
+ --light-static-outline-background-color--pressed: var(--light-static--color--200);
932
+ --light-static-outline-border-color: var(--light-static--color--800);
933
+ --light-static-outline-content-color: var(--light-static--color--800);
902
934
  --avatar-stack--border-width: var(--border-width--200);
903
- --code--line-height: var(--line-height--m);
904
- --code--corner-radius: var(--corner-radius--default);
905
- --code--light-background-color: var(--light-soft-background-color--default);
906
- --code--light-content-color: var(--light-soft-content-color);
907
- --code--dark-background-color: var(--dark-soft-background-color--default);
908
- --code--dark-content-color: var(--dark-soft-content-color);
909
- --heading--color: var(--primary--color--1000);
910
- --heading--color-dark: var(--dark-plain-content-color);
911
- --heading--color-light: var(--light-plain-content-color);
912
- --icon--color: var(--neutral--color--800);
913
- --illustrated-message--primary-icon-color: var(--primary--color--900);
914
- --illustrated-message--danger-icon-color: var(--danger--color--900);
915
- --illustrated-message--danger-heading-color: var(--danger--color--1000);
916
- --illustrated-message--dark-icon-color: var(--dark-plain-content-color);
917
- --illustrated-message--light-icon-color: var(--light-plain-content-color);
918
- --image--corner-radius: var(--corner-radius--default);
935
+ --avatar--info-status-background-color: var(--info--color--200);
936
+ --avatar--warning-status-background-color: var(--warning--color--200);
937
+ --avatar--danger-status-background-color: var(--danger--color--200);
938
+ --avatar--success-status-background-color: var(--success--color--200);
939
+ --avatar--unavailable-status-background-color: var(--unavailable--color--400);
940
+ --code-block--corner-radius: var(--corner-radius--m);
941
+ --code-block--border-width: var(--border-width--100);
942
+ --heading--color: var(--neutral--color--1100);
943
+ --heading--color-danger: var(--danger--color--900);
944
+ --heading--color-unavailable: var(--unavailable--color--800);
945
+ --icon--color: var(--neutral--color--700);
946
+ --icon--info-color: var(--info--color--900);
947
+ --icon--warning-color: var(--warning--color--900);
948
+ --icon--danger-color: var(--danger--color--900);
949
+ --icon--success-color: var(--success--color--900);
950
+ --icon--unavailable-color: var(--unavailable--color--800);
951
+ --icon--blue-color: var(--primary--color--1000);
952
+ --illustrated-message--danger-content-color: var(--danger--color--900);
953
+ --illustrated-message--unavailable-content-color: var(--unavailable--color--800);
954
+ --image--corner-radius: var(--corner-radius--m);
919
955
  --image--border-width: var(--border-width--100);
920
- --label--line-height: var(--line-height--m);
956
+ --inline-code--corner-radius: var(--corner-radius--s);
957
+ --kbd--corner-radius: var(--corner-radius--s);
958
+ --kbd--inner-shadow-color--default: var(--dark--color--200);
921
959
  --label--color--default: var(--neutral--color--800);
922
- --text--color--default: var(--neutral--color--1000);
923
- --text--color--light: var(--light-plain-content-color);
924
- --text--color--dark: var(--dark-plain-content-color);
960
+ --text--color--default: var(--neutral--color--1100);
925
961
  --text--blockquote-border-width: var(--border-width--300);
962
+ --area--border-width: var(--border-width--200);
963
+ --area--border-color: var(--neutral--color--100);
964
+ --axis--color: var(--neutral--color--800);
965
+ --axis--stroke-width: var(--border-width--100);
966
+ --cartesian-grid--color: var(--neutral--color--800);
967
+ --cartesian-grid--stroke-width: var(--border-width--100);
968
+ --donut-chart--background-color: var(--neutral--color--200);
969
+ --legend-item--marker--corner-radius: var(--corner-radius--s);
970
+ --line--border-width: var(--border-width--200);
971
+ --shadow--content: var(--dark-static--color--100) 0 var(--size-px--xxs) var(--size-px--xs);
972
+ --shadow--overlay: var(--dark-static--color--100) 0 var(--size-px--s) var(--size-px--m);
926
973
  --focus--outline-color: var(--primary--color--800);
927
974
  --focus--secondary-outline-color: var(--neutral--color--100);
928
975
  --focus--outline-width: var(--border-width--200);
929
- --choice--icon-color--selected: var(--primary--color--800);
930
- --calendar--heading-font-size: var(--font-size-text--default);
976
+ --choice--icon-color--selected: var(--primary--color--900);
977
+ --date-picker--date-segment-corner-radius: var(--corner-radius--s);
931
978
  --calendar--cell-background-color--disabled: var(--disabled-plain-background-color);
932
- --calendar--cell-background-color--hover: var(--dark-plain-background-color--hover);
933
- --calendar--cell-background-color--pressed: var(--dark-plain-background-color--pressed);
934
- --calendar--cell-range-background-color: var(--primary--color--100);
935
- --field-error--color: var(--danger--color--800);
936
- --form-control--corner-radius: var(--corner-radius--default);
979
+ --calendar--range-background-color: var(--primary--color--100);
980
+ --form-control--corner-radius: var(--corner-radius--m);
937
981
  --form-control--border-width: var(--border-width--100);
938
- --form-control--placeholder-color--default: var(--neutral--color--900);
982
+ --form-control--placeholder-color--default: var(--neutral--color--700);
939
983
  --form-control--placeholder-color--disabled: var(--neutral--color--500);
940
- --form-control--background-color--default: var(--neutral--color--300);
941
- --form-control--background-color--hover: var(--primary--color--100);
942
- --form-control--background-color--focused: var(--neutral--color--300);
984
+ --form-control--background-color--default: var(--neutral--color--200);
985
+ --form-control--background-color--focused: var(--neutral--color--200);
943
986
  --form-control--background-color--invalid: var(--danger--color--100);
944
- --form-control--background-color--selected: var(--primary--color--200);
945
- --slider--color--default: var(--primary--color--1000);
987
+ --rating--star-color: var(--neutral--color--700);
988
+ --rating--star-filled-color: var(--primary--color--800);
989
+ --slider--color--default: var(--neutral--color--1000);
946
990
  --slider--color--disabled: var(--neutral--color--600);
947
- --slider--track-color--default: var(--neutral--color--700);
948
- --slider--track-color--disabled: var(--neutral--color--400);
949
- --slider--border-width: var(--border-width--300);
950
- --slider--corner-radius: var(--corner-radius--default);
991
+ --slider--track-border-width: var(--border-width--100);
992
+ --slider--corner-radius: var(--corner-radius--s);
951
993
  --slider--handle-fill-color: var(--neutral--color--100);
952
- --switch--handle-color--disabled: var(--neutral--color--500);
953
- --switch--handle-background-color--default: var(--neutral--color--100);
954
- --switch--handle-background-color--disabled: var(--neutral--color--300);
955
- --breadcrumb--color-primary--default: var(--primary--color--1000);
956
- --breadcrumb--color-primary--hover: var(--primary--color--900);
957
- --breadcrumb--color-primary--pressed: var(--primary--color--800);
958
- --header-navigation--corner-radius: var(--corner-radius--default);
959
- --header-navigation--color: var(--primary--color--1000);
960
- --header-navigation--color-dark: var(--dark-plain-content-color);
961
- --header-navigation--color-light: var(--light-plain-content-color);
962
- --header-navigation--background-color-dark--hover: var(--dark-plain-background-color--hover);
963
- --header-navigation--background-color-dark--pressed: var(--dark-plain-background-color--pressed);
964
- --header-navigation--background-color-light--hover: var(--light-plain-background-color--hover);
965
- --header-navigation--background-color-light--pressed: var(--light-plain-background-color--pressed);
994
+ --slider--handle-border-width: var(--border-width--300);
995
+ --slider--initial-marker-border-width: var(--border-width--300);
996
+ --switch--handle-background-color: var(--neutral--color--100);
997
+ --time-field--date-segment-corner-radius: var(--corner-radius--m);
998
+ --breadcrumb--color--hover: var(--neutral--color--900);
999
+ --breadcrumb--color--pressed: var(--neutral--color--800);
1000
+ --header-navigation--corner-radius: var(--corner-radius--m);
966
1001
  --header-navigation--underline-width-current: var(--border-width--200);
967
- --link--line-height: var(--line-height--m);
1002
+ --header-navigation--color: var(--neutral--color--1100);
968
1003
  --link--color--default: var(--primary--color--800);
969
1004
  --link--color--hover: var(--primary--color--900);
970
1005
  --link--color--pressed: var(--primary--color--1000);
971
- --link--color-dark--disabled: var(--disabled-plain-dark-content-color);
972
- --link--color-light--disabled: var(--disabled-plain-light-content-color);
1006
+ --link--color-dark--default: var(--dark--color--800);
1007
+ --link--color-dark--hover: var(--dark--color--700);
1008
+ --link--color-dark--pressed: var(--dark--color--600);
1009
+ --link--color-light--default: var(--light--color--800);
1010
+ --link--color-light--hover: var(--light--color--700);
1011
+ --link--color-light--pressed: var(--light--color--600);
1012
+ --link--color-dark-static--default: var(--dark-static--color--800);
1013
+ --link--color-dark-static--hover: var(--dark-static--color--700);
1014
+ --link--color-dark-static--pressed: var(--dark-static--color--600);
1015
+ --link--color-light-static--default: var(--light-static--color--800);
1016
+ --link--color-light-static--hover: var(--light-static--color--700);
1017
+ --link--color-light-static--pressed: var(--light-static--color--600);
1018
+ --tab-navigation--background-color--current: var(--neutral--color--100);
1019
+ --tabs--border-width: var(--border-width--100);
973
1020
  --tabs--background-color--selected: var(--neutral--color--100);
974
- --modal--corner-radius: var(--corner-radius--default);
1021
+ --light-box--indicator-border-width: var(--border-width--200);
1022
+ --light-box--content-color: var(--light-static--color--800);
1023
+ --modal--corner-radius: var(--corner-radius--l);
975
1024
  --modal--background-color: var(--neutral--color--100);
976
- --modal--footer-background-color: var(--neutral--color--300);
1025
+ --modal--footer-background-color: var(--neutral--color--200);
1026
+ --modal--border-color: var(--neutral--color--300);
977
1027
  --modal--border-width: var(--border-width--100);
978
- --popover--box-shadow: var(--shadow--overlay);
979
- --popover--corner-radius: var(--corner-radius--default);
1028
+ --overlay--backdrop-color: var(--dark-static--color--300);
1029
+ --popover--corner-radius: var(--corner-radius--m);
980
1030
  --popover--background-color: var(--neutral--color--100);
981
1031
  --popover--border-width: var(--border-width--100);
1032
+ --popover--border-color: var(--neutral--color--300);
982
1033
  --tooltip--background-color: var(--neutral--color--900);
983
- --tooltip--box-shadow: var(--shadow--overlay);
984
- --tooltip--header-corner-radius: var(--corner-radius--default);
985
- --alert--corner-radius: var(--corner-radius--default);
1034
+ --tooltip--corner-radius: var(--corner-radius--m);
1035
+ --scrollbar--thumb-color: var(--dark--color--200);
1036
+ --alert-text--info-color: var(--info--color--900);
1037
+ --alert-text--warning-color: var(--warning--color--900);
1038
+ --alert-text--danger-color: var(--danger--color--900);
1039
+ --alert-text--success-color: var(--success--color--900);
1040
+ --alert-text--unavailable-color: var(--unavailable--color--800);
1041
+ --alert--corner-radius: var(--corner-radius--m);
986
1042
  --alert--border-width: var(--border-width--100);
987
1043
  --alert--border-x-start-width: var(--border-width--400);
1044
+ --badge--corner-radius: var(--corner-radius--l);
988
1045
  --badge--border-width: var(--border-width--100);
989
- --badge--disabled-dark-border-color: var(--disabled-outline-dark-border-color);
990
- --badge--disabled-dark-background-color: var(--disabled-soft-dark-background-color);
991
- --badge--disabled-dark-content-color: var(--disabled-soft-dark-content-color);
992
- --badge--disabled-dark-scope-background-color: var(--disabled-solid-dark-background-color);
993
- --badge--disabled-dark-scope-content-color: var(--disabled-solid-dark-content-color);
994
- --badge--disabled-light-border-color: var(--disabled-outline-light-border-color);
995
- --badge--disabled-light-background-color: var(--disabled-soft-light-background-color);
996
- --badge--disabled-light-content-color: var(--disabled-soft-light-content-color);
997
- --badge--disabled-light-scope-background-color: var(--disabled-solid-light-background-color);
998
- --badge--disabled-light-scope-content-color: var(--disabled-solid-light-content-color);
1046
+ --badge--dark-border-color: var(--dark--color--800);
1047
+ --badge--dark-background-color--default: var(--dark--color--100);
1048
+ --badge--dark-background-color--hover: var(--dark--color--200);
1049
+ --badge--dark-background-color--pressed: var(--dark--color--300);
1050
+ --badge--dark-content-color: var(--dark--color--800);
1051
+ --badge--dark-scope-background-color: var(--dark--color--800);
1052
+ --badge--light-border-color: var(--light--color--800);
1053
+ --badge--light-background-color--default: var(--light--color--100);
1054
+ --badge--light-background-color--hover: var(--light--color--200);
1055
+ --badge--light-background-color--pressed: var(--light--color--300);
1056
+ --badge--light-content-color: var(--light--color--800);
1057
+ --badge--light-scope-background-color: var(--light--color--800);
1058
+ --badge--dark-static-border-color: var(--dark-static--color--800);
1059
+ --badge--dark-static-background-color--default: var(--dark-static--color--100);
1060
+ --badge--dark-static-background-color--hover: var(--dark-static--color--200);
1061
+ --badge--dark-static-background-color--pressed: var(--dark-static--color--300);
1062
+ --badge--dark-static-content-color: var(--dark-static--color--800);
1063
+ --badge--dark-static-scope-background-color: var(--dark-static--color--800);
1064
+ --badge--light-static-border-color: var(--light-static--color--800);
1065
+ --badge--light-static-background-color--default: var(--light-static--color--100);
1066
+ --badge--light-static-background-color--hover: var(--light-static--color--200);
1067
+ --badge--light-static-background-color--pressed: var(--light-static--color--300);
1068
+ --badge--light-static-content-color: var(--light-static--color--800);
1069
+ --badge--light-static-scope-background-color: var(--light-static--color--800);
999
1070
  --counter-badge--border-width: var(--border-width--200);
1000
1071
  --counter-badge--border-color: var(--neutral--color--100);
1001
- --notification--corner-radius: var(--corner-radius--default);
1072
+ --notification--corner-radius: var(--corner-radius--m);
1002
1073
  --notification--border-x-start-width: var(--border-width--300);
1003
- --notification--box-shadow: var(--shadow--overlay);
1074
+ --notification--border-width: var(--border-width--100);
1075
+ --notification--border-color: var(--neutral--color--300);
1004
1076
  --notification--info-background-color--default: var(--neutral--color--100);
1005
1077
  --notification--warning-background-color--default: var(--neutral--color--100);
1006
1078
  --notification--danger-background-color--default: var(--neutral--color--100);
1007
1079
  --notification--success-background-color--default: var(--neutral--color--100);
1080
+ --notification--unavailable-background-color--default: var(--neutral--color--100);
1081
+ --progress-bar--corner-radius: var(--corner-radius--l);
1008
1082
  --progress-bar--border-width: var(--border-width--100);
1009
- --progress-bar--background-color: var(--neutral-outline-background-color--default);
1010
- --accent-box--corner-radius: var(--corner-radius--default);
1011
- --accordion--corner-radius: var(--corner-radius--default);
1083
+ --progress-bar--background-color: var(--neutral--color--200);
1084
+ --accent-box--background-color-neutral: var(--neutral--color--300);
1085
+ --accent-box--corner-radius: var(--corner-radius--m);
1086
+ --accordion--corner-radius: var(--corner-radius--m);
1012
1087
  --accordion--border-width: var(--border-width--100);
1013
- --accordion--background-color--hover: var(--primary--color--100);
1014
- --accordion--background-color--pressed: var(--primary--color--100);
1015
1088
  --layout-card--background-color: var(--neutral--color--100);
1016
- --layout-card--corner-radius: var(--corner-radius--default);
1017
- --layout-card--box-shadow: var(--shadow--content);
1018
- --list-item--corner-radius: var(--corner-radius--default);
1089
+ --layout-card--corner-radius: var(--corner-radius--l);
1090
+ --layout-card--border-width: var(--border-width--100);
1091
+ --layout-card--border-color: var(--neutral--color--300);
1092
+ --list-item--corner-radius: var(--corner-radius--m);
1019
1093
  --list-item--border-width: var(--border-width--100);
1020
- --list-item--background-color--default: var(--neutral--color--200);
1021
- --list-item--background-color--hover: var(--primary--color--100);
1022
- --list-item--background-color--pressed: var(--primary--color--200);
1094
+ --list-item--background-color--default: var(--neutral-outline-background-color--default);
1095
+ --list-item--checkbox-color: var(--light-static--color--800);
1096
+ --list-item--checkbox-background-color: var(--dark-static--color--400);
1097
+ --list-item--checkbox-corner-radius: var(--corner-radius--s);
1098
+ --separator--color: var(--neutral--color--500);
1023
1099
  --separator--height: var(--border-width--100);
1024
- --table--corner-radius: var(--corner-radius--default);
1100
+ --table--corner-radius: var(--corner-radius--m);
1025
1101
  --table--border-width: var(--border-width--100);
1026
1102
  --table--header-border-width: var(--border-width--200);
1027
1103
  --table--footer-border-width: var(--border-width--200);
1028
1104
  --table--background-color: var(--neutral--color--100);
1029
- --table--background-color-accent: var(--neutral--color--300);
1030
- --file-card--corner-radius: var(--corner-radius--default);
1105
+ --table--background-color-accent: var(--neutral--color--200);
1106
+ --file-card--corner-radius: var(--corner-radius--m);
1031
1107
  --file-card--border-width: var(--border-width--100);
1032
1108
  --file-card--background-color--default: var(--neutral--color--100);
1033
- --file-drop-zone--corner-radius: var(--corner-radius--default);
1109
+ --file-card--background-color--error: var(--danger--color--100);
1110
+ --file-drop-zone--corner-radius: var(--corner-radius--m);
1034
1111
  --file-drop-zone--border-width: var(--border-width--100);
1035
1112
  --file-drop-zone--border-color--target: var(--primary--color--800);
1113
+ --image-cropper--border-width: var(--border-width--100);
1114
+ --image-cropper--corner-radius: var(--corner-radius--m);
1115
+ --image-cropper--grid-color: var(--light-static--color--400);
1116
+ --image-cropper--mask-border-color: var(--light-static--color--800);
1117
+ --image-cropper--mask-color: var(--dark-static--color--600);
1036
1118
  --button--accent-solid-background-color--default: var(--success-solid-background-color--default);
1037
1119
  --button--accent-solid-background-color--hover: var(--success-solid-background-color--hover);
1038
1120
  --button--accent-solid-background-color--pressed: var(--success-solid-background-color--pressed);
1039
1121
  --button--accent-solid-background-color--disabled: var(--disabled-solid-background-color);
1040
1122
  --button--accent-solid-content-color--default: var(--success-solid-content-color);
1041
- --button--accent-solid-content-color--hover: var(--success-solid-content-color);
1042
- --button--accent-solid-content-color--pressed: var(--success-solid-content-color);
1043
1123
  --button--accent-solid-content-color--disabled: var(--disabled-solid-content-color);
1044
1124
  --button--accent-plain-background-color--hover: var(--success-plain-background-color--hover);
1045
1125
  --button--accent-plain-background-color--pressed: var(--success-plain-background-color--pressed);
1046
1126
  --button--accent-plain-content-color--default: var(--success-plain-content-color);
1047
- --button--accent-plain-content-color--hover: var(--success-plain-content-color);
1048
- --button--accent-plain-content-color--pressed: var(--success-plain-content-color);
1049
1127
  --button--accent-plain-content-color--disabled: var(--disabled-plain-content-color);
1050
1128
  --button--accent-soft-background-color--default: var(--success-soft-background-color--default);
1051
1129
  --button--accent-soft-background-color--hover: var(--success-soft-background-color--hover);
1052
1130
  --button--accent-soft-background-color--pressed: var(--success-soft-background-color--pressed);
1053
1131
  --button--accent-soft-background-color--disabled: var(--disabled-soft-background-color);
1054
- --button--accent-soft-content-color--default: var(--success-soft-content-color--default);
1055
- --button--accent-soft-content-color--hover: var(--success-soft-content-color--default);
1056
- --button--accent-soft-content-color--pressed: var(--success-soft-content-color--pressed);
1132
+ --button--accent-soft-content-color--default: var(--success-soft-content-color);
1057
1133
  --button--accent-soft-content-color--disabled: var(--disabled-soft-content-color);
1058
1134
  --button--accent-outline-background-color--hover: var(--success-outline-background-color--hover);
1059
1135
  --button--accent-outline-background-color--pressed: var(--success-outline-background-color--pressed);
1060
1136
  --button--accent-outline-background-color--disabled: var(--disabled-outline-background-color);
1061
- --button--accent-outline-content-color--default: var(--success-outline-border-color);
1062
- --button--accent-outline-content-color--hover: var(--success-outline-border-color);
1063
- --button--accent-outline-content-color--pressed: var(--success-outline-border-color);
1137
+ --button--accent-outline-content-color--default: var(--success-outline-content-color);
1064
1138
  --button--accent-outline-content-color--disabled: var(--disabled-outline-content-color);
1065
1139
  --button--accent-outline-border-color--default: var(--success-outline-border-color);
1066
1140
  --button--accent-outline-border-color--disabled: var(--disabled-outline-border-color);
@@ -1069,29 +1143,21 @@
1069
1143
  --button--primary-solid-background-color--pressed: var(--primary-solid-background-color--pressed);
1070
1144
  --button--primary-solid-background-color--disabled: var(--disabled-solid-background-color);
1071
1145
  --button--primary-solid-content-color--default: var(--primary-solid-content-color);
1072
- --button--primary-solid-content-color--hover: var(--primary-solid-content-color);
1073
- --button--primary-solid-content-color--pressed: var(--primary-solid-content-color);
1074
1146
  --button--primary-solid-content-color--disabled: var(--disabled-solid-content-color);
1075
1147
  --button--primary-plain-background-color--hover: var(--primary-plain-background-color--hover);
1076
1148
  --button--primary-plain-background-color--pressed: var(--primary-plain-background-color--pressed);
1077
1149
  --button--primary-plain-content-color--default: var(--primary-plain-content-color);
1078
- --button--primary-plain-content-color--hover: var(--primary-plain-content-color);
1079
- --button--primary-plain-content-color--pressed: var(--primary-plain-content-color);
1080
1150
  --button--primary-plain-content-color--disabled: var(--disabled-plain-content-color);
1081
1151
  --button--primary-soft-background-color--default: var(--primary-soft-background-color--default);
1082
1152
  --button--primary-soft-background-color--hover: var(--primary-soft-background-color--hover);
1083
1153
  --button--primary-soft-background-color--pressed: var(--primary-soft-background-color--pressed);
1084
1154
  --button--primary-soft-background-color--disabled: var(--disabled-soft-background-color);
1085
- --button--primary-soft-content-color--default: var(--primary-soft-content-color--default);
1086
- --button--primary-soft-content-color--hover: var(--primary-soft-content-color--default);
1087
- --button--primary-soft-content-color--pressed: var(--primary-soft-content-color--pressed);
1155
+ --button--primary-soft-content-color--default: var(--primary-soft-content-color);
1088
1156
  --button--primary-soft-content-color--disabled: var(--disabled-soft-content-color);
1089
1157
  --button--primary-outline-background-color--hover: var(--primary-outline-background-color--hover);
1090
1158
  --button--primary-outline-background-color--pressed: var(--primary-outline-background-color--pressed);
1091
1159
  --button--primary-outline-background-color--disabled: var(--disabled-outline-background-color);
1092
- --button--primary-outline-content-color--default: var(--primary-outline-border-color);
1093
- --button--primary-outline-content-color--hover: var(--primary-outline-border-color);
1094
- --button--primary-outline-content-color--pressed: var(--primary-outline-border-color);
1160
+ --button--primary-outline-content-color--default: var(--primary-outline-content-color);
1095
1161
  --button--primary-outline-content-color--disabled: var(--disabled-outline-content-color);
1096
1162
  --button--primary-outline-border-color--default: var(--primary-outline-border-color);
1097
1163
  --button--primary-outline-border-color--disabled: var(--disabled-outline-border-color);
@@ -1100,29 +1166,21 @@
1100
1166
  --button--secondary-solid-background-color--pressed: var(--neutral-solid-background-color--pressed);
1101
1167
  --button--secondary-solid-background-color--disabled: var(--disabled-solid-background-color);
1102
1168
  --button--secondary-solid-content-color--default: var(--neutral-solid-content-color);
1103
- --button--secondary-solid-content-color--hover: var(--neutral-solid-content-color);
1104
- --button--secondary-solid-content-color--pressed: var(--neutral-solid-content-color);
1105
1169
  --button--secondary-solid-content-color--disabled: var(--disabled-solid-content-color);
1106
1170
  --button--secondary-plain-background-color--hover: var(--neutral-plain-background-color--hover);
1107
1171
  --button--secondary-plain-background-color--pressed: var(--neutral-plain-background-color--pressed);
1108
1172
  --button--secondary-plain-content-color--default: var(--neutral-plain-content-color);
1109
- --button--secondary-plain-content-color--hover: var(--neutral-plain-content-color);
1110
- --button--secondary-plain-content-color--pressed: var(--neutral-plain-content-color);
1111
1173
  --button--secondary-plain-content-color--disabled: var(--disabled-plain-content-color);
1112
1174
  --button--secondary-soft-background-color--default: var(--neutral-soft-background-color--default);
1113
1175
  --button--secondary-soft-background-color--hover: var(--neutral-soft-background-color--hover);
1114
1176
  --button--secondary-soft-background-color--pressed: var(--neutral-soft-background-color--pressed);
1115
1177
  --button--secondary-soft-background-color--disabled: var(--disabled-soft-background-color);
1116
- --button--secondary-soft-content-color--default: var(--neutral-soft-content-color--default);
1117
- --button--secondary-soft-content-color--hover: var(--neutral-soft-content-color--default);
1118
- --button--secondary-soft-content-color--pressed: var(--neutral-soft-content-color--pressed);
1178
+ --button--secondary-soft-content-color--default: var(--neutral-soft-content-color);
1119
1179
  --button--secondary-soft-content-color--disabled: var(--disabled-soft-content-color);
1120
1180
  --button--secondary-outline-background-color--hover: var(--neutral-outline-background-color--hover);
1121
1181
  --button--secondary-outline-background-color--pressed: var(--neutral-outline-background-color--pressed);
1122
1182
  --button--secondary-outline-background-color--disabled: var(--disabled-outline-background-color);
1123
1183
  --button--secondary-outline-content-color--default: var(--neutral-outline-content-color);
1124
- --button--secondary-outline-content-color--hover: var(--neutral-outline-content-color);
1125
- --button--secondary-outline-content-color--pressed: var(--neutral-outline-content-color);
1126
1184
  --button--secondary-outline-content-color--disabled: var(--disabled-outline-content-color);
1127
1185
  --button--secondary-outline-border-color--default: var(--neutral-outline-border-color);
1128
1186
  --button--secondary-outline-border-color--disabled: var(--disabled-outline-border-color);
@@ -1131,52 +1189,170 @@
1131
1189
  --button--danger-solid-background-color--pressed: var(--danger-solid-background-color--pressed);
1132
1190
  --button--danger-solid-background-color--disabled: var(--disabled-solid-background-color);
1133
1191
  --button--danger-solid-content-color--default: var(--danger-solid-content-color);
1134
- --button--danger-solid-content-color--hover: var(--danger-solid-content-color);
1135
- --button--danger-solid-content-color--pressed: var(--danger-solid-content-color);
1136
1192
  --button--danger-solid-content-color--disabled: var(--disabled-solid-content-color);
1137
1193
  --button--danger-plain-background-color--hover: var(--danger-plain-background-color--hover);
1138
1194
  --button--danger-plain-background-color--pressed: var(--danger-plain-background-color--pressed);
1139
1195
  --button--danger-plain-content-color--default: var(--danger-plain-content-color);
1140
- --button--danger-plain-content-color--hover: var(--danger-plain-content-color);
1141
- --button--danger-plain-content-color--pressed: var(--danger-plain-content-color);
1142
1196
  --button--danger-plain-content-color--disabled: var(--disabled-plain-content-color);
1143
1197
  --button--danger-soft-background-color--default: var(--danger-soft-background-color--default);
1144
1198
  --button--danger-soft-background-color--hover: var(--danger-soft-background-color--hover);
1145
1199
  --button--danger-soft-background-color--pressed: var(--danger-soft-background-color--pressed);
1146
1200
  --button--danger-soft-background-color--disabled: var(--disabled-soft-background-color);
1147
- --button--danger-soft-content-color--default: var(--danger-soft-content-color--default);
1148
- --button--danger-soft-content-color--hover: var(--danger-soft-content-color--default);
1149
- --button--danger-soft-content-color--pressed: var(--danger-soft-content-color--pressed);
1201
+ --button--danger-soft-content-color--default: var(--danger-soft-content-color);
1150
1202
  --button--danger-soft-content-color--disabled: var(--disabled-soft-content-color);
1151
1203
  --button--danger-outline-background-color--hover: var(--danger-outline-background-color--hover);
1152
1204
  --button--danger-outline-background-color--pressed: var(--danger-outline-background-color--pressed);
1153
1205
  --button--danger-outline-background-color--disabled: var(--disabled-outline-background-color);
1154
- --button--danger-outline-content-color--default: var(--danger-outline-border-color);
1155
- --button--danger-outline-content-color--hover: var(--danger-outline-border-color);
1156
- --button--danger-outline-content-color--pressed: var(--danger-outline-border-color);
1206
+ --button--danger-outline-content-color--default: var(--danger-outline-content-color);
1157
1207
  --button--danger-outline-content-color--disabled: var(--disabled-outline-content-color);
1158
1208
  --button--danger-outline-border-color--default: var(--danger-outline-border-color);
1159
1209
  --button--danger-outline-border-color--disabled: var(--disabled-outline-border-color);
1210
+ --button--dark-solid-background-color--default: var(--dark-solid-background-color--default);
1211
+ --button--dark-solid-background-color--hover: var(--dark-solid-background-color--hover);
1212
+ --button--dark-solid-background-color--pressed: var(--dark-solid-background-color--pressed);
1213
+ --button--dark-solid-background-color--disabled: var(--disabled-solid-dark-background-color);
1214
+ --button--dark-solid-content-color--default: var(--dark-solid-content-color);
1215
+ --button--dark-solid-content-color--disabled: var(--disabled-solid-dark-content-color);
1216
+ --button--dark-plain-background-color--hover: var(--dark-plain-background-color--hover);
1217
+ --button--dark-plain-background-color--pressed: var(--dark-plain-background-color--pressed);
1218
+ --button--dark-plain-content-color--default: var(--dark-plain-content-color);
1219
+ --button--dark-plain-content-color--disabled: var(--disabled-plain-dark-content-color);
1220
+ --button--dark-soft-background-color--default: var(--dark-soft-background-color--default);
1221
+ --button--dark-soft-background-color--hover: var(--dark-soft-background-color--hover);
1222
+ --button--dark-soft-background-color--pressed: var(--dark-soft-background-color--pressed);
1223
+ --button--dark-soft-background-color--disabled: var(--disabled-soft-dark-background-color);
1224
+ --button--dark-soft-content-color--default: var(--dark-soft-content-color);
1225
+ --button--dark-soft-content-color--disabled: var(--disabled-soft-dark-content-color);
1226
+ --button--dark-outline-background-color--hover: var(--dark-outline-background-color--hover);
1227
+ --button--dark-outline-background-color--pressed: var(--dark-outline-background-color--pressed);
1228
+ --button--dark-outline-content-color--default: var(--dark-outline-content-color);
1229
+ --button--dark-outline-content-color--disabled: var(--disabled-outline-dark-content-color);
1230
+ --button--dark-outline-border-color--default: var(--dark-outline-border-color);
1231
+ --button--dark-outline-border-color--disabled: var(--disabled-outline-dark-border-color);
1232
+ --button--light-solid-background-color--default: var(--light-solid-background-color--default);
1233
+ --button--light-solid-background-color--hover: var(--light-solid-background-color--hover);
1234
+ --button--light-solid-background-color--pressed: var(--light-solid-background-color--pressed);
1235
+ --button--light-solid-background-color--disabled: var(--disabled-solid-light-background-color);
1236
+ --button--light-solid-content-color--default: var(--light-solid-content-color);
1237
+ --button--light-solid-content-color--disabled: var(--disabled-solid-light-content-color);
1238
+ --button--light-plain-background-color--hover: var(--light-plain-background-color--hover);
1239
+ --button--light-plain-background-color--pressed: var(--light-plain-background-color--pressed);
1240
+ --button--light-plain-content-color--default: var(--light-plain-content-color);
1241
+ --button--light-plain-content-color--disabled: var(--disabled-plain-light-content-color);
1242
+ --button--light-soft-background-color--default: var(--light-soft-background-color--default);
1243
+ --button--light-soft-background-color--hover: var(--light-soft-background-color--hover);
1244
+ --button--light-soft-background-color--pressed: var(--light-soft-background-color--pressed);
1245
+ --button--light-soft-background-color--disabled: var(--disabled-soft-light-background-color);
1246
+ --button--light-soft-content-color--default: var(--light-soft-content-color);
1247
+ --button--light-soft-content-color--disabled: var(--disabled-soft-light-content-color);
1248
+ --button--light-outline-background-color--hover: var(--light-outline-background-color--hover);
1249
+ --button--light-outline-background-color--pressed: var(--light-outline-background-color--pressed);
1250
+ --button--light-outline-content-color--default: var(--light-outline-content-color);
1251
+ --button--light-outline-content-color--disabled: var(--disabled-outline-light-content-color);
1252
+ --button--light-outline-border-color--default: var(--light-outline-border-color);
1253
+ --button--light-outline-border-color--disabled: var(--disabled-outline-light-border-color);
1254
+ --button--dark-static-solid-background-color--default: var(--dark-static-solid-background-color--default);
1255
+ --button--dark-static-solid-background-color--hover: var(--dark-static-solid-background-color--hover);
1256
+ --button--dark-static-solid-background-color--pressed: var(--dark-static-solid-background-color--pressed);
1257
+ --button--dark-static-solid-background-color--disabled: var(--disabled-solid-dark-static-background-color);
1258
+ --button--dark-static-solid-content-color--default: var(--dark-static-solid-content-color);
1259
+ --button--dark-static-solid-content-color--disabled: var(--disabled-solid-dark-static-content-color);
1260
+ --button--dark-static-plain-background-color--hover: var(--dark-static-plain-background-color--hover);
1261
+ --button--dark-static-plain-background-color--pressed: var(--dark-static-plain-background-color--pressed);
1262
+ --button--dark-static-plain-content-color--default: var(--dark-static-plain-content-color);
1263
+ --button--dark-static-plain-content-color--disabled: var(--disabled-plain-dark-static-content-color);
1264
+ --button--dark-static-soft-background-color--default: var(--dark-static-soft-background-color--default);
1265
+ --button--dark-static-soft-background-color--hover: var(--dark-static-soft-background-color--hover);
1266
+ --button--dark-static-soft-background-color--pressed: var(--dark-static-soft-background-color--pressed);
1267
+ --button--dark-static-soft-background-color--disabled: var(--disabled-soft-dark-static-background-color);
1268
+ --button--dark-static-soft-content-color--default: var(--dark-static-soft-content-color);
1269
+ --button--dark-static-soft-content-color--disabled: var(--disabled-soft-dark-static-content-color);
1270
+ --button--dark-static-outline-background-color--hover: var(--dark-static-outline-background-color--hover);
1271
+ --button--dark-static-outline-background-color--pressed: var(--dark-static-outline-background-color--pressed);
1272
+ --button--dark-static-outline-content-color--default: var(--dark-static-outline-content-color);
1273
+ --button--dark-static-outline-content-color--disabled: var(--disabled-outline-dark-static-content-color);
1274
+ --button--dark-static-outline-border-color--default: var(--dark-static-outline-border-color);
1275
+ --button--dark-static-outline-border-color--disabled: var(--disabled-outline-dark-static-border-color);
1276
+ --button--light-static-solid-background-color--default: var(--light-static-solid-background-color--default);
1277
+ --button--light-static-solid-background-color--hover: var(--light-static-solid-background-color--hover);
1278
+ --button--light-static-solid-background-color--pressed: var(--light-static-solid-background-color--pressed);
1279
+ --button--light-static-solid-background-color--disabled: var(--disabled-solid-light-static-background-color);
1280
+ --button--light-static-solid-content-color--default: var(--light-static-solid-content-color);
1281
+ --button--light-static-solid-content-color--disabled: var(--disabled-solid-light-static-content-color);
1282
+ --button--light-static-plain-background-color--hover: var(--light-static-plain-background-color--hover);
1283
+ --button--light-static-plain-background-color--pressed: var(--light-static-plain-background-color--pressed);
1284
+ --button--light-static-plain-content-color--default: var(--light-static-plain-content-color);
1285
+ --button--light-static-plain-content-color--disabled: var(--disabled-plain-light-static-content-color);
1286
+ --button--light-static-soft-background-color--default: var(--light-static-soft-background-color--default);
1287
+ --button--light-static-soft-background-color--hover: var(--light-static-soft-background-color--hover);
1288
+ --button--light-static-soft-background-color--pressed: var(--light-static-soft-background-color--pressed);
1289
+ --button--light-static-soft-background-color--disabled: var(--disabled-soft-light-static-background-color);
1290
+ --button--light-static-soft-content-color--default: var(--light-static-soft-content-color);
1291
+ --button--light-static-soft-content-color--disabled: var(--disabled-soft-light-static-content-color);
1292
+ --button--light-static-outline-background-color--hover: var(--light-static-outline-background-color--hover);
1293
+ --button--light-static-outline-background-color--pressed: var(--light-static-outline-background-color--pressed);
1294
+ --button--light-static-outline-content-color--default: var(--light-static-outline-content-color);
1295
+ --button--light-static-outline-content-color--disabled: var(--disabled-outline-light-static-content-color);
1296
+ --button--light-static-outline-border-color--default: var(--light-static-outline-border-color);
1297
+ --button--light-static-outline-border-color--disabled: var(--disabled-outline-light-static-border-color);
1298
+ --image-button--hover-icon-color: var(--light-static-plain-content-color);
1299
+ --menu-item--icon-color--default: var(--icon--color);
1160
1300
  --menu-item--icon-color--disabled: var(--disabled-plain-content-color);
1161
- --menu-item--background-color--hover: var(--primary-plain-background-color--hover);
1162
- --menu-item--background-color--current: var(--primary-plain-background-color--pressed);
1301
+ --menu-item--icon-color--current: var(--text--color--default);
1302
+ --menu-item--background-color--hover: var(--neutral-plain-background-color--hover);
1303
+ --menu-item--background-color--current: var(--neutral-plain-background-color--pressed);
1163
1304
  --menu-item--disabled-color: var(--disabled-plain-content-color);
1164
- --code--default-background-color: var(--neutral-soft-background-color--default);
1165
- --code--default-content-color: var(--neutral-soft-content-color--default);
1166
- --icon--info-color: var(--info-outline-content-color);
1167
- --icon--warning-color: var(--warning-outline-content-color);
1168
- --icon--danger-color: var(--danger-outline-content-color);
1169
- --icon--success-color: var(--success-outline-content-color);
1170
- --illustrated-message--primary-heading-color: var(--heading--color);
1171
- --illustrated-message--dark-heading-color: var(--heading--color-dark);
1172
- --illustrated-message--light-heading-color: var(--heading--color-light);
1305
+ --code-block--border-color: var(--separator--color);
1306
+ --code-block--background-color: var(--form-control--background-color--default);
1307
+ --code-block--content-color: var(--neutral-soft-content-color);
1308
+ --heading--color-dark: var(--dark-plain-content-color);
1309
+ --heading--color-light: var(--light-plain-content-color);
1310
+ --heading--color-dark-static: var(--dark-static-plain-content-color);
1311
+ --heading--color-light-static: var(--light-static-plain-content-color);
1312
+ --icon--dark-color: var(--dark-plain-content-color);
1313
+ --icon--light-color: var(--light-plain-content-color);
1314
+ --icon--dark-static-color: var(--dark-static-plain-content-color);
1315
+ --icon--light-static-color: var(--light-static-plain-content-color);
1316
+ --illustrated-message--content-color: var(--heading--color);
1317
+ --illustrated-message--dark-content-color: var(--dark-plain-content-color);
1318
+ --illustrated-message--light-content-color: var(--light-plain-content-color);
1319
+ --illustrated-message--dark-static-content-color: var(--dark-static-plain-content-color);
1320
+ --illustrated-message--light-static-content-color: var(--light-static-plain-content-color);
1173
1321
  --image--border-color: var(--neutral-outline-border-color);
1322
+ --inline-code--background-color: var(--neutral-soft-background-color--default);
1323
+ --inline-code--content-color: var(--neutral-soft-content-color);
1324
+ --inline-code--dark-background-color: var(--dark-soft-background-color--default);
1325
+ --inline-code--dark-content-color: var(--dark-soft-content-color);
1326
+ --inline-code--light-background-color: var(--light-soft-background-color--default);
1327
+ --inline-code--light-content-color: var(--light-soft-content-color);
1328
+ --inline-code--dark-static-background-color: var(--dark-static-soft-background-color--default);
1329
+ --inline-code--dark-static-content-color: var(--dark-static-soft-content-color);
1330
+ --inline-code--light-static-background-color: var(--light-static-soft-background-color--default);
1331
+ --inline-code--light-static-content-color: var(--light-static-soft-content-color);
1332
+ --kbd--background-color--default: var(--neutral-soft-background-color--default);
1333
+ --kbd--background-color--disabled: var(--disabled-soft-background-color);
1334
+ --kbd--content-color--default: var(--neutral-soft-content-color);
1335
+ --kbd--content-color--disabled: var(--disabled-soft-content-color);
1336
+ --kbd--content-color-plain--default: var(--form-control--placeholder-color--default);
1337
+ --kbd--content-color-plain--disabled: var(--form-control--placeholder-color--disabled);
1338
+ --kbd--inner-shadow-color--disabled: var(--disabled-soft-dark-background-color);
1174
1339
  --label--color--disabled: var(--disabled-plain-content-color);
1340
+ --text--color--light: var(--light-plain-content-color);
1341
+ --text--color--dark: var(--dark-plain-content-color);
1342
+ --text--color--light-static: var(--light-static-plain-content-color);
1343
+ --text--color--dark-static: var(--dark-static-plain-content-color);
1175
1344
  --text--color--disabled: var(--disabled-plain-content-color);
1176
1345
  --text--blockquote-border-color: var(--info-outline-border-color);
1346
+ --donut-chart--border-color: var(--neutral-outline-border-color);
1347
+ --donut-chart--info-fill-background-color: var(--info-solid-background-color--default);
1348
+ --donut-chart--success-fill-background-color: var(--success-solid-background-color--default);
1349
+ --donut-chart--warning-fill-background-color: var(--warning-solid-background-color--default);
1350
+ --donut-chart--danger-fill-background-color: var(--danger-solid-background-color--default);
1177
1351
  --choice--icon-color--default: var(--icon--color);
1178
1352
  --choice--icon-color--disabled: var(--disabled-outline-content-color);
1179
1353
  --date-picker--date-segment-background-color--focused: var(--primary-plain-background-color--pressed);
1354
+ --calendar--cell-background-color--hover: var(--dark-plain-background-color--hover);
1355
+ --calendar--cell-background-color--pressed: var(--dark-plain-background-color--pressed);
1180
1356
  --calendar--cell-background-color--selected: var(--primary-solid-background-color--default);
1181
1357
  --calendar--cell-content-color--disabled: var(--disabled-plain-content-color);
1182
1358
  --calendar--cell-content-color--selected: var(--primary-solid-content-color);
@@ -1186,37 +1362,77 @@
1186
1362
  --form-control--border-color--focused: var(--focus--outline-color);
1187
1363
  --form-control--border-color--selected: var(--neutral-outline-border-color);
1188
1364
  --form-control--background-color--disabled: var(--disabled-outline-background-color);
1365
+ --form-control--background-color--hover: var(--neutral-outline-background-color--hover);
1366
+ --form-control--background-color--selected: var(--neutral-outline-background-color--pressed);
1189
1367
  --form-control--content-color--default: var(--neutral-outline-content-color);
1190
1368
  --form-control--content-color--disabled: var(--disabled-outline-content-color);
1191
1369
  --form-control--content-color--selected: var(--neutral-outline-content-color);
1370
+ --slider--track-color--default: var(--form-control--background-color--default);
1192
1371
  --switch--track-background-color--default: var(--neutral-solid-background-color--default);
1193
1372
  --switch--track-background-color--disabled: var(--disabled-solid-background-color);
1194
- --switch--track-background-color--selected: var(--success-solid-background-color--default);
1195
- --switch--handle-color--default: var(--neutral-solid-content-color);
1373
+ --switch--track-background-color--selected: var(--primary-solid-background-color--default);
1374
+ --switch--handle-content-color--default: var(--neutral-plain-content-color);
1375
+ --switch--handle-content-color--disabled: var(--disabled-plain-content-color);
1196
1376
  --time-field--date-segment-background-color--focused: var(--primary-plain-background-color--pressed);
1197
- --header-navigation--background-color--hover: var(--primary-plain-background-color--hover);
1198
- --header-navigation--background-color--pressed: var(--primary-plain-background-color--pressed);
1377
+ --breadcrumb--color--default: var(--text--color--default);
1378
+ --breadcrumb--color-dark--default: var(--link--color-dark--default);
1379
+ --breadcrumb--color-dark--hover: var(--link--color-dark--hover);
1380
+ --breadcrumb--color-dark--pressed: var(--link--color-dark--pressed);
1381
+ --breadcrumb--color-light--default: var(--link--color-light--default);
1382
+ --breadcrumb--color-light--hover: var(--link--color-light--hover);
1383
+ --breadcrumb--color-light--pressed: var(--link--color-light--pressed);
1384
+ --breadcrumb--color-dark-static--default: var(--link--color-dark-static--default);
1385
+ --breadcrumb--color-dark-static--hover: var(--link--color-dark-static--hover);
1386
+ --breadcrumb--color-dark-static--pressed: var(--link--color-dark-static--pressed);
1387
+ --breadcrumb--color-light-static--default: var(--link--color-light-static--default);
1388
+ --breadcrumb--color-light-static--hover: var(--link--color-light-static--hover);
1389
+ --breadcrumb--color-light-static--pressed: var(--link--color-light-static--pressed);
1390
+ --header-navigation--background-color--hover: var(--neutral-plain-background-color--hover);
1391
+ --header-navigation--background-color--pressed: var(--neutral-plain-background-color--pressed);
1392
+ --header-navigation--color-dark: var(--dark-plain-content-color);
1393
+ --header-navigation--background-color-dark--hover: var(--dark-plain-background-color--hover);
1394
+ --header-navigation--background-color-dark--pressed: var(--dark-plain-background-color--pressed);
1395
+ --header-navigation--color-light: var(--light-plain-content-color);
1396
+ --header-navigation--background-color-light--hover: var(--light-plain-background-color--hover);
1397
+ --header-navigation--background-color-light--pressed: var(--light-plain-background-color--pressed);
1398
+ --header-navigation--color-dark-static: var(--dark-static-plain-content-color);
1399
+ --header-navigation--background-color-dark-static--hover: var(--dark-static-plain-background-color--hover);
1400
+ --header-navigation--background-color-dark-static--pressed: var(--dark-static-plain-background-color--pressed);
1401
+ --header-navigation--color-light-static: var(--light-static-plain-content-color);
1402
+ --header-navigation--background-color-light-static--hover: var(--light-static-plain-background-color--hover);
1403
+ --header-navigation--background-color-light-static--pressed: var(--light-static-plain-background-color--pressed);
1199
1404
  --link--color--disabled: var(--disabled-plain-content-color);
1405
+ --link--color-dark--disabled: var(--disabled-plain-dark-content-color);
1406
+ --link--color-light--disabled: var(--disabled-plain-light-content-color);
1407
+ --link--color-dark-static--disabled: var(--disabled-plain-dark-static-content-color);
1408
+ --link--color-light-static--disabled: var(--disabled-plain-light-static-content-color);
1409
+ --tab-navigation--background-color--default: var(--neutral-soft-background-color--default);
1410
+ --tab-navigation--background-color--hover: var(--neutral-soft-background-color--hover);
1411
+ --tab-navigation--background-color--pressed: var(--neutral-soft-background-color--pressed);
1412
+ --tab-navigation--color: var(--neutral-soft-content-color);
1413
+ --tabs--border-color: var(--neutral-outline-border-color);
1200
1414
  --tabs--background-color--default: var(--neutral-soft-background-color--default);
1201
1415
  --tabs--background-color--hover: var(--neutral-soft-background-color--hover);
1202
1416
  --tabs--background-color--pressed: var(--neutral-soft-background-color--pressed);
1203
- --tabs--color: var(--neutral-soft-content-color--default);
1204
- --tabs--disabled-color: var(--disabled-soft-content-color);
1205
- --modal--border-color: var(--neutral-outline-border-color);
1206
- --popover--border-color: var(--neutral-outline-border-color);
1207
- --tooltip--color: var(--text--color--light);
1417
+ --tabs--color--default: var(--neutral-soft-content-color);
1418
+ --tabs--color--disabled: var(--disabled-soft-content-color);
1419
+ --popover--box-shadow: var(--shadow--overlay);
1420
+ --tooltip--box-shadow: var(--shadow--overlay);
1208
1421
  --alert-badge--info-background-color: var(--info-soft-background-color--default);
1209
- --alert-badge--info-content-color: var(--info-soft-content-color--default);
1422
+ --alert-badge--info-content-color: var(--info-soft-content-color);
1210
1423
  --alert-badge--info-border-color: var(--info-outline-border-color);
1211
1424
  --alert-badge--success-background-color: var(--success-soft-background-color--default);
1212
- --alert-badge--success-content-color: var(--success-soft-content-color--default);
1425
+ --alert-badge--success-content-color: var(--success-soft-content-color);
1213
1426
  --alert-badge--success-border-color: var(--success-outline-border-color);
1214
1427
  --alert-badge--warning-background-color: var(--warning-soft-background-color--default);
1215
- --alert-badge--warning-content-color: var(--warning-soft-content-color--default);
1428
+ --alert-badge--warning-content-color: var(--warning-soft-content-color);
1216
1429
  --alert-badge--warning-border-color: var(--warning-outline-border-color);
1217
1430
  --alert-badge--danger-background-color: var(--danger-soft-background-color--default);
1218
- --alert-badge--danger-content-color: var(--danger-soft-content-color--default);
1431
+ --alert-badge--danger-content-color: var(--danger-soft-content-color);
1219
1432
  --alert-badge--danger-border-color: var(--danger-outline-border-color);
1433
+ --alert-badge--unavailable-background-color: var(--unavailable-soft-background-color--default);
1434
+ --alert-badge--unavailable-content-color: var(--unavailable-soft-content-color);
1435
+ --alert-badge--unavailable-border-color: var(--unavailable-outline-border-color);
1220
1436
  --alert--info-border-color: var(--info-outline-border-color);
1221
1437
  --alert--info-heading-color: var(--info-outline-content-color);
1222
1438
  --alert--warning-border-color: var(--warning-outline-border-color);
@@ -1225,24 +1441,41 @@
1225
1441
  --alert--danger-heading-color: var(--danger-outline-content-color);
1226
1442
  --alert--success-border-color: var(--success-outline-border-color);
1227
1443
  --alert--success-heading-color: var(--success-outline-content-color);
1228
- --badge--neutral-scope-content-color: var(--text--color--light);
1229
- --badge--blue-scope-content-color: var(--text--color--light);
1230
- --badge--navy-scope-content-color: var(--text--color--light);
1231
- --badge--violet-scope-content-color: var(--text--color--light);
1232
- --badge--teal-scope-content-color: var(--text--color--light);
1233
- --badge--lilac-scope-content-color: var(--text--color--light);
1234
- --badge--red-scope-content-color: var(--text--color--light);
1235
- --badge--green-scope-content-color: var(--text--color--light);
1236
- --badge--orange-scope-content-color: var(--text--color--light);
1237
- --badge--dark-scope-content-color: var(--text--color--light);
1238
- --badge--light-scope-content-color: var(--text--color--dark);
1444
+ --alert--unavailable-border-color: var(--unavailable-outline-border-color);
1445
+ --alert--unavailable-heading-color: var(--unavailable-outline-content-color);
1239
1446
  --badge--disabled-border-color: var(--disabled-outline-border-color);
1240
1447
  --badge--disabled-background-color: var(--disabled-outline-background-color);
1241
1448
  --badge--disabled-content-color: var(--disabled-outline-content-color);
1242
1449
  --badge--disabled-scope-background-color: var(--disabled-solid-background-color);
1243
1450
  --badge--disabled-scope-content-color: var(--disabled-solid-content-color);
1244
- --counter-badge--background-color: var(--success-solid-background-color--default);
1245
- --counter-badge--content-color: var(--success-solid-content-color);
1451
+ --badge--disabled-dark-border-color: var(--disabled-outline-dark-border-color);
1452
+ --badge--disabled-dark-background-color: var(--disabled-soft-dark-background-color);
1453
+ --badge--disabled-dark-content-color: var(--disabled-soft-dark-content-color);
1454
+ --badge--disabled-dark-scope-background-color: var(--disabled-solid-dark-background-color);
1455
+ --badge--disabled-dark-scope-content-color: var(--disabled-solid-dark-content-color);
1456
+ --badge--disabled-light-border-color: var(--disabled-outline-light-border-color);
1457
+ --badge--disabled-light-background-color: var(--disabled-soft-light-background-color);
1458
+ --badge--disabled-light-content-color: var(--disabled-soft-light-content-color);
1459
+ --badge--disabled-light-scope-background-color: var(--disabled-solid-light-background-color);
1460
+ --badge--disabled-light-scope-content-color: var(--disabled-solid-light-content-color);
1461
+ --badge--disabled-dark-static-border-color: var(--disabled-outline-dark-static-border-color);
1462
+ --badge--disabled-dark-static-background-color: var(--disabled-soft-dark-static-background-color);
1463
+ --badge--disabled-dark-static-content-color: var(--disabled-soft-dark-static-content-color);
1464
+ --badge--disabled-dark-static-scope-background-color: var(--disabled-solid-dark-static-background-color);
1465
+ --badge--disabled-dark-static-scope-content-color: var(--disabled-solid-dark-static-content-color);
1466
+ --badge--disabled-light-static-border-color: var(--disabled-outline-light-static-border-color);
1467
+ --badge--disabled-light-static-background-color: var(--disabled-soft-light-static-background-color);
1468
+ --badge--disabled-light-static-content-color: var(--disabled-soft-light-static-content-color);
1469
+ --badge--disabled-light-static-scope-background-color: var(--disabled-solid-light-static-background-color);
1470
+ --badge--disabled-light-static-scope-content-color: var(--disabled-solid-light-static-content-color);
1471
+ --counter-badge--background-color: var(--primary-solid-background-color--default);
1472
+ --counter-badge--content-color: var(--primary-solid-content-color);
1473
+ --loading-spinner--color: var(--icon--color);
1474
+ --loading-spinner--color-light: var(--light-plain-content-color);
1475
+ --loading-spinner--color-dark: var(--dark-plain-content-color);
1476
+ --loading-spinner--color-light-static: var(--light-static-plain-content-color);
1477
+ --loading-spinner--color-dark-static: var(--dark-static-plain-content-color);
1478
+ --notification--box-shadow: var(--shadow--overlay);
1246
1479
  --notification--info-border-color: var(--info-outline-border-color);
1247
1480
  --notification--info-heading-color: var(--info-outline-content-color);
1248
1481
  --notification--info-background-color--hover: var(--info-outline-background-color--hover);
@@ -1259,19 +1492,51 @@
1259
1492
  --notification--success-heading-color: var(--success-outline-content-color);
1260
1493
  --notification--success-background-color--hover: var(--success-outline-background-color--hover);
1261
1494
  --notification--success-background-color--pressed: var(--success-outline-background-color--pressed);
1495
+ --notification--unavailable-border-color: var(--unavailable-outline-border-color);
1496
+ --notification--unavailable-heading-color: var(--unavailable-outline-content-color);
1497
+ --notification--unavailable-background-color--hover: var(--unavailable-outline-background-color--hover);
1498
+ --notification--unavailable-background-color--pressed: var(--unavailable-outline-background-color--pressed);
1262
1499
  --progress-bar--border-color: var(--neutral-outline-border-color);
1263
1500
  --progress-bar--info-fill-background-color: var(--info-solid-background-color--default);
1264
1501
  --progress-bar--success-fill-background-color: var(--success-solid-background-color--default);
1265
1502
  --progress-bar--warning-fill-background-color: var(--warning-solid-background-color--default);
1266
1503
  --progress-bar--danger-fill-background-color: var(--danger-solid-background-color--default);
1504
+ --progress-bar--indeterminate-fill-background-color: var(--neutral-solid-background-color--default);
1267
1505
  --accordion--border-color: var(--neutral-outline-border-color);
1506
+ --accordion--background-color--hover: var(--neutral-outline-background-color--hover);
1507
+ --accordion--background-color--pressed: var(--neutral-outline-background-color--pressed);
1508
+ --layout-card--box-shadow: var(--shadow--content);
1509
+ --list-item--background-color--hover: var(--neutral-outline-background-color--hover);
1510
+ --list-item--background-color--pressed: var(--neutral-outline-background-color--pressed);
1268
1511
  --list-item--border-color: var(--neutral-outline-border-color);
1269
- --separator--color: var(--neutral-outline-border-color);
1270
1512
  --table--border-color: var(--neutral-outline-border-color);
1271
- --file-card--border-color: var(--neutral-outline-border-color);
1513
+ --file-card--border-color--default: var(--neutral-outline-border-color);
1514
+ --file-card--border-color--error: var(--danger-outline-border-color);
1272
1515
  --file-card--background-color--hover: var(--neutral-outline-background-color--hover);
1273
1516
  --file-card--background-color--pressed: var(--neutral-outline-background-color--pressed);
1517
+ --file-drop-zone--content-color--disabled: var(--disabled-outline-content-color);
1274
1518
  --file-drop-zone--background-color--default: var(--form-control--background-color--default);
1519
+ --file-drop-zone--background-color--disabled: var(--disabled-outline-background-color);
1520
+ --file-drop-zone--border-color--disabled: var(--disabled-outline-border-color);
1521
+ --image-cropper--border-color: var(--neutral-outline-border-color);
1522
+ --calendar--range-border-color: var(--form-control--border-color--default);
1523
+ --slider--track-color--disabled: var(--form-control--background-color--disabled);
1524
+ --slider--track-border-color--default: var(--form-control--border-color--default);
1525
+ --slider--track-border-color--disabled: var(--form-control--border-color--disabled);
1526
+ --tooltip--color: var(--text--color--light);
1527
+ --badge--neutral-scope-content-color: var(--text--color--light);
1528
+ --badge--blue-scope-content-color: var(--text--color--light);
1529
+ --badge--navy-scope-content-color: var(--text--color--light);
1530
+ --badge--violet-scope-content-color: var(--text--color--light);
1531
+ --badge--teal-scope-content-color: var(--text--color--light);
1532
+ --badge--lilac-scope-content-color: var(--text--color--light);
1533
+ --badge--red-scope-content-color: var(--text--color--light);
1534
+ --badge--green-scope-content-color: var(--text--color--light);
1535
+ --badge--orange-scope-content-color: var(--text--color--light);
1536
+ --badge--dark-scope-content-color: var(--text--color--light);
1537
+ --badge--light-scope-content-color: var(--text--color--dark);
1538
+ --badge--dark-static-scope-content-color: var(--text--color--light-static);
1539
+ --badge--light-static-scope-content-color: var(--text--color--dark-static);
1275
1540
  --file-drop-zone--background-color--target: var(--form-control--background-color--hover);
1276
1541
  --file-drop-zone--border-color--default: var(--form-control--border-color--default);
1277
1542
  }