@mittwald/flow-design-tokens 0.2.0-alpha.97 → 0.2.0-alpha.970

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 +1521 -0
  3. package/dist/{variables.css → css/all-light.css} +736 -488
  4. package/dist/css/base.css +1364 -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 +1523 -0
  10. package/dist/css-layered/all-light.css +1523 -0
  11. package/dist/css-layered/base.css +1366 -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 +30631 -0
  17. package/dist/json/all-light.json +30631 -0
  18. package/dist/{variables.json → json/base.json} +14011 -9844
  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,67 +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);
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);
432
406
  --avatar--size--xs: var(--size-rem--l);
433
407
  --avatar--size--s: var(--size-rem--xl);
434
408
  --avatar--size--l: var(--size-rem--xxl);
435
- --code--font-size: var(--font-size-text--s);
436
- --code--padding-x: var(--size-px--xs);
437
- --code--padding-y: var(--size-px--xxs);
438
- --code--padding: var(--size-px--m);
439
- --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);
440
413
  --decorative--blue-background-color: var(--color--hosting-blue--200);
441
414
  --decorative--blue-content-accent-color: var(--color--hosting-blue--800);
442
415
  --decorative--blue-content-color: var(--color--hosting-blue--1000);
@@ -452,60 +425,78 @@
452
425
  --decorative--lilac-background-color: var(--color--bright-lilac--200);
453
426
  --decorative--lilac-content-accent-color: var(--color--bright-lilac--800);
454
427
  --decorative--lilac-content-color: var(--color--bright-lilac--1000);
455
- --decorative--disabled-background-color: var(--color--gray--300);
456
- --decorative--disabled-content-accent-color: var(--color--gray--500);
457
- --decorative--disabled-content-color: var(--color--gray--600);
458
428
  --heading--icon-to-text-spacing: var(--size-rem--s);
459
429
  --heading--font-weight: var(--font-weight--bold);
460
430
  --illustrated-message--padding: var(--size-px--m);
461
431
  --illustrated-message--spacing: var(--size-rem--m);
462
432
  --image--border-style: var(--border-style--default);
463
433
  --initials--font-weight: var(--font-weight--bold);
434
+ --inline-code--font-size: var(--font-size-text--s);
435
+ --inline-code--padding-x: var(--size-px--xs);
436
+ --inline-code--padding-y: var(--size-px--xxs);
437
+ --kbd--padding: var(--size-px--xs);
438
+ --kbd--padding-y-start: var(--size-px--xxs);
439
+ --kbd--inner-shadow-size-x: var(--size-px--xxs);
440
+ --kbd--inner-shadow-size-y-end: var(--size-px--xs);
464
441
  --label--font-size: var(--font-size-text--s);
465
442
  --label--font-weight: var(--font-weight--bold);
466
443
  --label--spacing: var(--size-rem--xs);
467
- --labeled-value--label-to-value-spacing: var(--size-rem--xxs);
444
+ --labeled-value--label-to-value-spacing: var(--size-rem--xs);
468
445
  --labeled-value--value-to-action-spacing: var(--size-rem--xs);
469
446
  --markdown--spacing: var(--size-rem--m);
470
447
  --text--blockquote-border-style: var(--border-style--default);
471
448
  --text--blockquote-padding: var(--size-rem--s);
472
449
  --text--list-padding: var(--size-rem--l);
450
+ --axis--spacing: var(--size-px--s);
451
+ --axis--font-size: var(--font-size-text--s);
452
+ --axis--tick-size: var(--size-px--s);
453
+ --big-number--spacing: var(--size-rem--xs);
454
+ --big-number--top-font-size: var(--font-size-heading--xl);
455
+ --big-number--bottom-font-size: var(--font-size-text--m);
456
+ --big-number--font-weight: var(--font-weight--bold);
457
+ --chart-tooltip--spacing: var(--size-px--s);
458
+ --donut-chart--spacing-y: var(--size-rem--s);
459
+ --donut-chart--spacing-x: var(--size-rem--m);
460
+ --donut-chart--padding--m: var(--size-px--l);
461
+ --donut-chart--padding--l: var(--size-px--xl);
462
+ --legend--spacing-x: var(--size-px--m);
463
+ --legend--spacing-y: var(--size-px--s);
464
+ --legend-item--spacing: var(--size-rem--s);
465
+ --legend-item--marker--size: var(--size-rem--m);
473
466
  --focus--outline-offset: var(--size-px--xxs);
474
- --line-height--m: calc(var(--font-size-text--m) * 1.5);
475
- --line-height--s: calc(var(--font-size-text--s) * 1.5);
476
- --font-size-text--default: var(--font-size-text--m);
477
- --date-picker--date-segment-corner-radius: var(--size-px--xs);
467
+ --line-height-m: calc(var(--font-size-text--m) * 1.5);
468
+ --line-height-s: calc(var(--font-size-text--s) * 1.5);
469
+ --code-editor--font-size: var(--font-size-text--s);
470
+ --code-editor--gutter-element-min-width: var(--size-rem--l);
478
471
  --calendar--spacing: var(--size-rem--xs);
472
+ --calendar--heading-font-size: var(--font-size-text--m);
479
473
  --calendar--cell-corner-radius: var(--corner-radius--round);
480
474
  --calendar--cell-font-size: var(--font-size-text--s);
475
+ --calendar--range-border-width: var(--border-width--50);
476
+ --calendar--range-border-style: var(--border-style--default);
481
477
  --calendar--header-cell-font-weight: var(--font-weight--bold);
482
478
  --field-description--font-size: var(--font-size-text--s);
483
479
  --field-error--font-size: var(--font-size-text--s);
484
- --field-error--spacing: var(--size-rem--xs);
485
- --form-control--label-to-control-spacing: var(--size-rem--xxs);
480
+ --form-control--label-to-control-spacing: var(--size-rem--xs);
486
481
  --form-control--control-to-info-spacing: var(--size-rem--xs);
487
482
  --form-control--spacing-x: var(--size-rem--s);
488
483
  --form-control--spacing-y: var(--size-rem--xs);
489
484
  --form-control--padding-x: var(--size-px--m);
490
485
  --form-control--padding-y: var(--size-px--s);
491
486
  --form-control--border-style: var(--border-style--default);
487
+ --rating--spacing--s: var(--size-rem--xxs);
488
+ --rating--spacing--m: var(--size-rem--xs);
492
489
  --segmented-button--text-to-text-spacing: var(--size-rem--xs);
493
490
  --slider--spacing-x: var(--size-rem--s);
494
491
  --slider--spacing-y: var(--size-rem--m);
495
- --slider--border-style: var(--border-style--default);
496
492
  --slider--value-font-weight: var(--font-weight--bold);
493
+ --slider--track-height: var(--size-px--s);
494
+ --slider--track-border-style: var(--border-style--default);
497
495
  --slider--handle-corner-radius: var(--corner-radius--round);
498
496
  --slider--handle-size: var(--size-rem--l);
499
497
  --slider--initial-marker-height: var(--size-rem--m);
500
498
  --switch--label-to-track-spacing: var(--size-rem--s);
501
499
  --switch--track-padding: var(--size-rem--xxs);
502
- --time-field--date-segment-corner-radius: var(--size-px--xs);
503
- --breadcrumb--color-light--default: var(--light--color--800);
504
- --breadcrumb--color-light--hover: var(--light--color--700);
505
- --breadcrumb--color-light--pressed: var(--light--color--600);
506
- --breadcrumb--color-dark--default: var(--dark--color--800);
507
- --breadcrumb--color-dark--hover: var(--dark--color--700);
508
- --breadcrumb--color-dark--pressed: var(--dark--color--600);
509
500
  --breadcrumb--spacing: var(--size-rem--s);
510
501
  --breadcrumb--font-weight--default: var(--font-weight--normal);
511
502
  --breadcrumb--font-weight--current: var(--font-weight--bold);
@@ -514,26 +505,27 @@
514
505
  --header-navigation--corner-radius-round: var(--corner-radius--round);
515
506
  --header-navigation--font-weight-current: var(--font-weight--bold);
516
507
  --link--icon-height: calc(var(--font-size-text--m) * 1.25);
508
+ --link--icon-height-s: calc(var(--font-size-text--s) * 1.25);
517
509
  --link--font-weight: var(--font-weight--bold);
518
510
  --link--spacing: var(--size-rem--xs);
519
- --link--color-dark--default: var(--dark--color--800);
520
- --link--color-dark--hover: var(--dark--color--700);
521
- --link--color-dark--pressed: var(--dark--color--600);
522
- --link--color-light--default: var(--light--color--800);
523
- --link--color-light--hover: var(--light--color--700);
524
- --link--color-light--pressed: var(--light--color--600);
525
511
  --tabs--padding: var(--size-px--m);
526
512
  --tabs--font-weight--selected: var(--font-weight--bold);
527
513
  --tabs--spacing: var(--size-rem--s);
528
- --light-box--overlay-background-color: var(--dark--color--600);
529
- --light-box--max-width: calc(100dvw - var(--size-px--l));
530
- --light-box--max-height: calc(100dvh - var(--size-px--l));
514
+ --light-box--max-width: calc(100dvw - var(--size-px--xxl));
515
+ --light-box--max-height: calc(100dvh - var(--size-px--xxl));
516
+ --light-box--max-width-mobile: calc(100dvw - var(--size-px--l));
517
+ --light-box--max-height-mobile: calc(100dvh - var(--size-px--l));
531
518
  --light-box--spacing: var(--size-px--m);
519
+ --light-box--indicator-spacing: var(--size-px--xs);
520
+ --light-box--indicator-size: var(--size-px--m);
521
+ --light-box--indicator-border-style: var(--border-style--default);
522
+ --light-box--indicator-corner-radius: var(--corner-radius--round);
532
523
  --modal--padding: var(--size-px--l);
524
+ --modal--padding-mobile: var(--size-px--m);
525
+ --modal--tray-top-spacing: var(--size-px--m);
533
526
  --modal--border-style: var(--border-style--default);
534
- --modal--header-padding-y: var(--size-px--s);
527
+ --modal--header-padding-top: var(--size-px--m);
535
528
  --modal--off-canvas-max-width: calc(100dvw - var(--size-px--m));
536
- --overlay--background-color: var(--dark--color--200);
537
529
  --popover--padding--m: var(--size-px--m);
538
530
  --popover--padding--s: var(--size-px--s);
539
531
  --popover--border-style: var(--border-style--default);
@@ -546,17 +538,17 @@
546
538
  --tooltip--font-size: var(--font-size-text--s);
547
539
  --tooltip--tooltip-to-trigger-spacing: var(--size-px--s);
548
540
  --tooltip--tip-size: var(--size-px--s);
549
- --shadow--content: rgba(0, 0, 0, 0.1) 0 var(--size-px--xs) var(--size-px--s);
550
- --shadow--overlay: rgba(0, 0, 0, 0.14) 0 var(--size-px--m) var(--size-px--l);
541
+ --scrollbar--size: var(--size-px--s);
542
+ --scrollbar--corner-radius: var(--corner-radius--round);
543
+ --alert-text--spacing: var(--size-rem--xs);
551
544
  --alert--padding: var(--size-px--m);
552
545
  --alert--border-style: var(--border-style--default);
553
546
  --alert--heading-to-content-spacing: var(--size-rem--s);
554
547
  --alert--spacing: var(--size-rem--m);
555
- --alert--font-size-heading: var(--font-size-text--m);
548
+ --alert--heading-size: var(--font-size-heading--xs);
556
549
  --badge--font-size: var(--font-size-text--s);
557
550
  --badge--font-weight: var(--font-weight--bold);
558
- --badge--line-height: var(--size-rem--m);
559
- --badge--corner-radius: var(--size-rem--m);
551
+ --badge--line-height: var(--single-line-height);
560
552
  --badge--border-style: var(--border-style--default);
561
553
  --badge--padding-y: var(--size-rem--xs);
562
554
  --badge--padding-x: var(--size-rem--s);
@@ -565,79 +557,56 @@
565
557
  --badge--neutral-background-color--default: var(--color--gray--300);
566
558
  --badge--neutral-background-color--hover: var(--color--gray--400);
567
559
  --badge--neutral-background-color--pressed: var(--color--gray--500);
568
- --badge--neutral-content-color--default: var(--color--gray--900);
569
- --badge--neutral-content-color--pressed: var(--color--gray--1000);
560
+ --badge--neutral-content-color: var(--color--gray--900);
570
561
  --badge--neutral-scope-background-color: var(--color--gray--800);
571
562
  --badge--blue-border-color: var(--color--hosting-blue--800);
572
563
  --badge--blue-background-color--default: var(--color--hosting-blue--100);
573
564
  --badge--blue-background-color--hover: var(--color--hosting-blue--200);
574
565
  --badge--blue-background-color--pressed: var(--color--hosting-blue--300);
575
- --badge--blue-content-color--default: var(--color--hosting-blue--900);
576
- --badge--blue-content-color--pressed: var(--color--hosting-blue--1000);
566
+ --badge--blue-content-color: var(--color--hosting-blue--900);
577
567
  --badge--blue-scope-background-color: var(--color--hosting-blue--800);
578
568
  --badge--navy-border-color: var(--color--mittwald-navy--800);
579
569
  --badge--navy-background-color--default: var(--color--mittwald-navy--100);
580
570
  --badge--navy-background-color--hover: var(--color--mittwald-navy--200);
581
571
  --badge--navy-background-color--pressed: var(--color--mittwald-navy--300);
582
- --badge--navy-content-color--default: var(--color--mittwald-navy--900);
583
- --badge--navy-content-color--pressed: var(--color--mittwald-navy--1000);
572
+ --badge--navy-content-color: var(--color--mittwald-navy--900);
584
573
  --badge--navy-scope-background-color: var(--color--mittwald-navy--800);
585
574
  --badge--violet-border-color: var(--color--soft-contrast-violet--800);
586
575
  --badge--violet-background-color--default: var(--color--soft-contrast-violet--100);
587
576
  --badge--violet-background-color--hover: var(--color--soft-contrast-violet--200);
588
577
  --badge--violet-background-color--pressed: var(--color--soft-contrast-violet--300);
589
- --badge--violet-content-color--default: var(--color--soft-contrast-violet--900);
590
- --badge--violet-content-color--pressed: var(--color--soft-contrast-violet--1000);
578
+ --badge--violet-content-color: var(--color--soft-contrast-violet--900);
591
579
  --badge--violet-scope-background-color: var(--color--soft-contrast-violet--800);
592
580
  --badge--teal-border-color: var(--color--super-teal--800);
593
581
  --badge--teal-background-color--default: var(--color--super-teal--100);
594
582
  --badge--teal-background-color--hover: var(--color--super-teal--200);
595
583
  --badge--teal-background-color--pressed: var(--color--super-teal--300);
596
- --badge--teal-content-color--default: var(--color--super-teal--900);
597
- --badge--teal-content-color--pressed: var(--color--super-teal--1000);
584
+ --badge--teal-content-color: var(--color--super-teal--900);
598
585
  --badge--teal-scope-background-color: var(--color--super-teal--800);
599
586
  --badge--lilac-border-color: var(--color--bright-lilac--800);
600
587
  --badge--lilac-background-color--default: var(--color--bright-lilac--100);
601
588
  --badge--lilac-background-color--hover: var(--color--bright-lilac--200);
602
589
  --badge--lilac-background-color--pressed: var(--color--bright-lilac--300);
603
- --badge--lilac-content-color--default: var(--color--bright-lilac--900);
604
- --badge--lilac-content-color--pressed: var(--color--bright-lilac--1000);
590
+ --badge--lilac-content-color: var(--color--bright-lilac--900);
605
591
  --badge--lilac-scope-background-color: var(--color--bright-lilac--800);
606
592
  --badge--red-border-color: var(--color--amaranth-red--800);
607
593
  --badge--red-background-color--default: var(--color--amaranth-red--100);
608
594
  --badge--red-background-color--hover: var(--color--amaranth-red--200);
609
595
  --badge--red-background-color--pressed: var(--color--amaranth-red--300);
610
- --badge--red-content-color--default: var(--color--amaranth-red--900);
611
- --badge--red-content-color--pressed: var(--color--amaranth-red--1000);
596
+ --badge--red-content-color: var(--color--amaranth-red--900);
612
597
  --badge--red-scope-background-color: var(--color--amaranth-red--800);
613
598
  --badge--green-border-color: var(--color--espelkamp-green--800);
614
599
  --badge--green-background-color--default: var(--color--espelkamp-green--100);
615
600
  --badge--green-background-color--hover: var(--color--espelkamp-green--200);
616
601
  --badge--green-background-color--pressed: var(--color--espelkamp-green--300);
617
- --badge--green-content-color--default: var(--color--espelkamp-green--900);
618
- --badge--green-content-color--pressed: var(--color--espelkamp-green--1000);
602
+ --badge--green-content-color: var(--color--espelkamp-green--900);
619
603
  --badge--green-scope-background-color: var(--color--espelkamp-green--800);
620
604
  --badge--orange-border-color: var(--color--royal-orange--900);
621
605
  --badge--orange-background-color--default: var(--color--royal-orange--100);
622
606
  --badge--orange-background-color--hover: var(--color--royal-orange--200);
623
607
  --badge--orange-background-color--pressed: var(--color--royal-orange--300);
624
- --badge--orange-content-color--default: var(--color--royal-orange--900);
625
- --badge--orange-content-color--pressed: var(--color--royal-orange--1000);
608
+ --badge--orange-content-color: var(--color--royal-orange--900);
626
609
  --badge--orange-scope-background-color: var(--color--royal-orange--900);
627
- --badge--dark-border-color: var(--dark--color--800);
628
- --badge--dark-background-color--default: var(--dark--color--100);
629
- --badge--dark-background-color--hover: var(--dark--color--200);
630
- --badge--dark-background-color--pressed: var(--dark--color--300);
631
- --badge--dark-content-color--default: var(--dark--color--800);
632
- --badge--dark-content-color--pressed: var(--dark--color--800);
633
- --badge--dark-scope-background-color: var(--dark--color--800);
634
- --badge--light-border-color: var(--light--color--800);
635
- --badge--light-background-color--default: var(--light--color--100);
636
- --badge--light-background-color--hover: var(--light--color--200);
637
- --badge--light-background-color--pressed: var(--light--color--300);
638
- --badge--light-content-color--default: var(--light--color--800);
639
- --badge--light-content-color--pressed: var(--light--color--800);
640
- --badge--light-scope-background-color: var(--light--color--800);
641
610
  --counter-badge--font-weight: var(--font-weight--bold);
642
611
  --counter-badge--padding-inline: var(--size-rem--xs);
643
612
  --counter-badge--border-style: var(--border-style--default);
@@ -648,15 +617,22 @@
648
617
  --notification--heading-to-text-spacing: var(--size-rem--xs);
649
618
  --notification--spacing: var(--size-rem--s);
650
619
  --notification--font-size: var(--font-size-text--s);
620
+ --password-creation-field--rule-to-rule-spacing: var(--size-px--s);
651
621
  --progress-bar--font-size: var(--font-size-text--m);
652
622
  --progress-bar--font-size-s: var(--font-size-text--s);
653
623
  --progress-bar--value-font-weight: var(--font-weight--bold);
654
624
  --progress-bar--spacing-y: var(--size-rem--xs);
655
625
  --progress-bar--spacing-x: var(--size-rem--m);
656
- --progress-bar--height: var(--size-rem--s);
657
- --progress-bar--corner-radius: var(--size-rem--xs);
658
- --accent-box--background-color-blue: var(--color--hosting-blue--100);
659
- --accent-box--icon-color-blue: var(--color--hosting-blue--200);
626
+ --progress-bar--spacing-bar-to-legend: var(--size-px--m);
627
+ --progress-bar--height--m: var(--size-rem--m);
628
+ --progress-bar--height--s: var(--size-rem--s);
629
+ --progress-bar--height--l: var(--size-rem--l);
630
+ --accent-box--background-color-blue: var(--color--hosting-blue--200);
631
+ --accent-box--background-color-teal: var(--color--super-teal--200);
632
+ --accent-box--background-color-lilac: var(--color--bright-lilac--200);
633
+ --accent-box--background-color-violet: var(--color--soft-contrast-violet--200);
634
+ --accent-box--background-color-green: var(--color--espelkamp-green--200);
635
+ --accent-box--background-color-navy: var(--color--mittwald-navy--200);
660
636
  --accent-box--background-color-gradient: var(--color--gradient);
661
637
  --accent-box--padding: var(--size-px--m);
662
638
  --accordion--spacing: var(--size-rem--s);
@@ -673,8 +649,10 @@
673
649
  --column-layout--gap--xl: var(--size-px--xl);
674
650
  --layout-card--padding: var(--size-px--l);
675
651
  --layout-card--padding-mobile: var(--size-px--m);
652
+ --layout-card--border-style: var(--border-style--default);
676
653
  --list--spacing: var(--size-px--s);
677
654
  --list--block-to-block-spacing: var(--size-px--m);
655
+ --list--filter-to-search-spacing: var(--size-px--xl);
678
656
  --list-item--padding: var(--size-px--s);
679
657
  --list-item--border-style: var(--border-style--default);
680
658
  --list-item--spacing: var(--size-px--m);
@@ -686,6 +664,7 @@
686
664
  --section--sub-heading-spacing-s: var(--size-rem--s);
687
665
  --section-header--action-to-action-spacing: var(--size-rem--s);
688
666
  --section-header--heading-to-action-spacing: var(--size-rem--m);
667
+ --separator--border-style: var(--border-style--default);
689
668
  --table--border-style: var(--border-style--default);
690
669
  --table--padding-x: var(--size-px--m);
691
670
  --table--padding-y: var(--size-px--s);
@@ -699,9 +678,12 @@
699
678
  --file-drop-zone--padding: var(--size-px--m);
700
679
  --file-drop-zone--border-style--default: var(--border-style--dashed);
701
680
  --file-drop-zone--border-style--target: var(--border-style--default);
702
- --button--corner-radius: var(--corner-radius--default);
681
+ --image-cropper--spacing: var(--size-px--m);
682
+ --image-cropper--border-style: var(--border-style--default);
683
+ --button--corner-radius: var(--corner-radius--m);
703
684
  --button--pending-icon-color: var(--neutral--color--1000);
704
685
  --button--border-width: var(--border-width--100);
686
+ --button--corner-radius-s: var(--corner-radius--s);
705
687
  --button--accent-plain-background-color--default: var(--success-plain-background-color--default);
706
688
  --button--accent-plain-background-color--disabled: var(--disabled-plain-background-color);
707
689
  --button--accent-outline-background-color--default: var(--success-outline-background-color--default);
@@ -714,82 +696,30 @@
714
696
  --button--danger-plain-background-color--default: var(--danger-plain-background-color--default);
715
697
  --button--danger-plain-background-color--disabled: var(--disabled-plain-background-color);
716
698
  --button--danger-outline-background-color--default: var(--danger-outline-background-color--default);
717
- --button--dark-solid-background-color--default: var(--dark-solid-background-color--default);
718
- --button--dark-solid-background-color--hover: var(--dark-solid-background-color--hover);
719
- --button--dark-solid-background-color--pressed: var(--dark-solid-background-color--pressed);
720
- --button--dark-solid-background-color--disabled: var(--disabled-solid-dark-background-color);
721
- --button--dark-solid-content-color--default: var(--dark-solid-content-color);
722
- --button--dark-solid-content-color--hover: var(--dark-solid-content-color);
723
- --button--dark-solid-content-color--pressed: var(--dark-solid-content-color);
724
- --button--dark-solid-content-color--disabled: var(--disabled-solid-dark-content-color);
725
699
  --button--dark-plain-background-color--default: var(--dark-plain-background-color--default);
726
- --button--dark-plain-background-color--hover: var(--dark-plain-background-color--hover);
727
- --button--dark-plain-background-color--pressed: var(--dark-plain-background-color--pressed);
728
700
  --button--dark-plain-background-color--disabled: var(--disabled-plain-background-color);
729
- --button--dark-plain-content-color--default: var(--dark-plain-content-color);
730
- --button--dark-plain-content-color--hover: var(--dark-plain-content-color);
731
- --button--dark-plain-content-color--pressed: var(--dark-plain-content-color);
732
- --button--dark-plain-content-color--disabled: var(--disabled-plain-dark-content-color);
733
- --button--dark-soft-background-color--default: var(--dark-soft-background-color--default);
734
- --button--dark-soft-background-color--hover: var(--dark-soft-background-color--hover);
735
- --button--dark-soft-background-color--pressed: var(--dark-soft-background-color--pressed);
736
- --button--dark-soft-background-color--disabled: var(--disabled-soft-dark-background-color);
737
- --button--dark-soft-content-color--default: var(--dark-soft-content-color);
738
- --button--dark-soft-content-color--hover: var(--dark-soft-content-color);
739
- --button--dark-soft-content-color--pressed: var(--dark-soft-content-color);
740
- --button--dark-soft-content-color--disabled: var(--disabled-soft-dark-content-color);
741
701
  --button--dark-outline-background-color--default: var(--dark-outline-background-color--default);
742
- --button--dark-outline-background-color--hover: var(--dark-outline-background-color--hover);
743
- --button--dark-outline-background-color--pressed: var(--dark-outline-background-color--pressed);
744
702
  --button--dark-outline-background-color--disabled: var(--disabled-outline-dark-background-color);
745
- --button--dark-outline-content-color--default: var(--dark-outline-content-color);
746
- --button--dark-outline-content-color--hover: var(--dark-outline-content-color);
747
- --button--dark-outline-content-color--pressed: var(--dark-outline-content-color);
748
- --button--dark-outline-content-color--disabled: var(--disabled-outline-dark-content-color);
749
- --button--dark-outline-border-color--default: var(--dark-outline-border-color);
750
- --button--dark-outline-border-color--disabled: var(--disabled-outline-dark-border-color);
751
- --button--light-solid-background-color--default: var(--light-solid-background-color--default);
752
- --button--light-solid-background-color--hover: var(--light-solid-background-color--hover);
753
- --button--light-solid-background-color--pressed: var(--light-solid-background-color--pressed);
754
- --button--light-solid-background-color--disabled: var(--disabled-solid-light-background-color);
755
- --button--light-solid-content-color--default: var(--light-solid-content-color);
756
- --button--light-solid-content-color--hover: var(--light-solid-content-color);
757
- --button--light-solid-content-color--pressed: var(--light-solid-content-color);
758
- --button--light-solid-content-color--disabled: var(--disabled-solid-light-content-color);
759
703
  --button--light-plain-background-color--default: var(--light-plain-background-color--default);
760
- --button--light-plain-background-color--hover: var(--light-plain-background-color--hover);
761
- --button--light-plain-background-color--pressed: var(--light-plain-background-color--pressed);
762
704
  --button--light-plain-background-color--disabled: var(--disabled-plain-background-color);
763
- --button--light-plain-content-color--default: var(--light-plain-content-color);
764
- --button--light-plain-content-color--hover: var(--light-plain-content-color);
765
- --button--light-plain-content-color--pressed: var(--light-plain-content-color);
766
- --button--light-plain-content-color--disabled: var(--disabled-plain-light-content-color);
767
- --button--light-soft-background-color--default: var(--light-soft-background-color--default);
768
- --button--light-soft-background-color--hover: var(--light-soft-background-color--hover);
769
- --button--light-soft-background-color--pressed: var(--light-soft-background-color--pressed);
770
- --button--light-soft-background-color--disabled: var(--disabled-soft-light-background-color);
771
- --button--light-soft-content-color--default: var(--light-soft-content-color);
772
- --button--light-soft-content-color--hover: var(--light-soft-content-color);
773
- --button--light-soft-content-color--pressed: var(--light-soft-content-color);
774
- --button--light-soft-content-color--disabled: var(--disabled-soft-light-content-color);
775
705
  --button--light-outline-background-color--default: var(--light-outline-background-color--default);
776
- --button--light-outline-background-color--hover: var(--light-outline-background-color--hover);
777
- --button--light-outline-background-color--pressed: var(--light-outline-background-color--pressed);
778
706
  --button--light-outline-background-color--disabled: var(--disabled-outline-light-background-color);
779
- --button--light-outline-content-color--default: var(--light-outline-content-color);
780
- --button--light-outline-content-color--hover: var(--light-outline-content-color);
781
- --button--light-outline-content-color--pressed: var(--light-outline-content-color);
782
- --button--light-outline-content-color--disabled: var(--disabled-outline-light-content-color);
783
- --button--light-outline-border-color--default: var(--light-outline-border-color);
784
- --button--light-outline-border-color--disabled: var(--disabled-outline-light-border-color);
785
- --menu-item--corner-radius: var(--corner-radius--default);
786
- --menu-item--color--current: var(--primary--color--800);
787
- --menu-item--icon-color--default: var(--neutral--color--800);
788
- --menu-item--icon-color--current: var(--primary--color--800);
707
+ --button--dark-static-plain-background-color--default: var(--dark-static-plain-background-color--default);
708
+ --button--dark-static-plain-background-color--disabled: var(--disabled-plain-background-color);
709
+ --button--dark-static-outline-background-color--default: var(--dark-static-outline-background-color--default);
710
+ --button--dark-static-outline-background-color--disabled: var(--disabled-outline-dark-static-background-color);
711
+ --button--light-static-plain-background-color--default: var(--light-static-plain-background-color--default);
712
+ --button--light-static-plain-background-color--disabled: var(--disabled-plain-background-color);
713
+ --button--light-static-outline-background-color--default: var(--light-static-outline-background-color--default);
714
+ --button--light-static-outline-background-color--disabled: var(--disabled-outline-light-static-background-color);
715
+ --menu-item--corner-radius: var(--corner-radius--m);
789
716
  --menu-item--disabled-background-color: var(--disabled-plain-background-color);
790
717
  --message-separator--background-color: var(--neutral--color--100);
791
718
  --message-separator--color: var(--neutral--color--800);
792
- --message--corner-radius: var(--corner-radius--default);
719
+ --message--corner-radius: var(--corner-radius--m);
720
+ --message--background-color-responder: var(--neutral--color--200);
721
+ --message--border-width: var(--border-width--100);
722
+ --message--border-color: var(--neutral--color--300);
793
723
  --primary-solid-background-color--default: var(--primary--color--800);
794
724
  --primary-solid-background-color--hover: var(--primary--color--900);
795
725
  --primary-solid-background-color--pressed: var(--primary--color--1000);
@@ -800,8 +730,7 @@
800
730
  --primary-soft-background-color--default: var(--primary--color--100);
801
731
  --primary-soft-background-color--hover: var(--primary--color--200);
802
732
  --primary-soft-background-color--pressed: var(--primary--color--300);
803
- --primary-soft-content-color--default: var(--primary--color--900);
804
- --primary-soft-content-color--pressed: var(--primary--color--1000);
733
+ --primary-soft-content-color: var(--primary--color--900);
805
734
  --primary-outline-background-color--hover: var(--primary--color--100);
806
735
  --primary-outline-background-color--pressed: var(--primary--color--200);
807
736
  --primary-outline-content-color: var(--primary--color--900);
@@ -820,8 +749,7 @@
820
749
  --danger-soft-background-color--default: var(--danger--color--100);
821
750
  --danger-soft-background-color--hover: var(--danger--color--200);
822
751
  --danger-soft-background-color--pressed: var(--danger--color--300);
823
- --danger-soft-content-color--default: var(--danger--color--900);
824
- --danger-soft-content-color--pressed: var(--danger--color--1000);
752
+ --danger-soft-content-color: var(--danger--color--900);
825
753
  --info-solid-background-color--default: var(--info--color--800);
826
754
  --info-solid-background-color--hover: var(--info--color--900);
827
755
  --info-solid-background-color--pressed: var(--info--color--1000);
@@ -833,8 +761,7 @@
833
761
  --info-soft-background-color--default: var(--info--color--100);
834
762
  --info-soft-background-color--hover: var(--info--color--200);
835
763
  --info-soft-background-color--pressed: var(--info--color--300);
836
- --info-soft-content-color--default: var(--info--color--900);
837
- --info-soft-content-color--pressed: var(--info--color--1000);
764
+ --info-soft-content-color: var(--info--color--900);
838
765
  --info-plain-background-color--hover: var(--info--color--100);
839
766
  --info-plain-background-color--pressed: var(--info--color--200);
840
767
  --info-plain-content-color: var(--info--color--800);
@@ -852,8 +779,7 @@
852
779
  --success-soft-background-color--default: var(--success--color--100);
853
780
  --success-soft-background-color--hover: var(--success--color--200);
854
781
  --success-soft-background-color--pressed: var(--success--color--300);
855
- --success-soft-content-color--default: var(--success--color--900);
856
- --success-soft-content-color--pressed: var(--success--color--1000);
782
+ --success-soft-content-color: var(--success--color--900);
857
783
  --warning-solid-background-color--default: var(--warning--color--800);
858
784
  --warning-solid-background-color--hover: var(--warning--color--900);
859
785
  --warning-solid-background-color--pressed: var(--warning--color--1000);
@@ -865,198 +791,338 @@
865
791
  --warning-soft-background-color--default: var(--warning--color--100);
866
792
  --warning-soft-background-color--hover: var(--warning--color--200);
867
793
  --warning-soft-background-color--pressed: var(--warning--color--300);
868
- --warning-soft-content-color--default: var(--warning--color--900);
869
- --warning-soft-content-color--pressed: var(--warning--color--1000);
870
- --warning-plain-background-color--hover: var(--info--color--100);
871
- --warning-plain-background-color--pressed: var(--info--color--200);
872
- --warning-plain-content-color: var(--info--color--800);
794
+ --warning-soft-content-color: var(--warning--color--900);
795
+ --warning-plain-background-color--hover: var(--warning--color--100);
796
+ --warning-plain-background-color--pressed: var(--warning--color--200);
797
+ --warning-plain-content-color: var(--warning--color--800);
798
+ --unavailable-solid-background-color--default: var(--unavailable--color--800);
799
+ --unavailable-solid-background-color--hover: var(--unavailable--color--900);
800
+ --unavailable-solid-background-color--pressed: var(--unavailable--color--1000);
801
+ --unavailable-solid-content-color: var(--neutral--color--100);
802
+ --unavailable-plain-background-color--hover: var(--unavailable--color--300);
803
+ --unavailable-plain-background-color--pressed: var(--unavailable--color--400);
804
+ --unavailable-plain-content-color: var(--unavailable--color--800);
805
+ --unavailable-outline-background-color--hover: var(--unavailable--color--300);
806
+ --unavailable-outline-background-color--pressed: var(--unavailable--color--400);
807
+ --unavailable-outline-content-color: var(--unavailable--color--800);
808
+ --unavailable-outline-border-color: var(--unavailable--color--800);
809
+ --unavailable-soft-background-color--default: var(--unavailable--color--300);
810
+ --unavailable-soft-background-color--hover: var(--unavailable--color--400);
811
+ --unavailable-soft-background-color--pressed: var(--unavailable--color--500);
812
+ --unavailable-soft-content-color: var(--unavailable--color--800);
873
813
  --neutral-solid-background-color--default: var(--neutral--color--800);
874
814
  --neutral-solid-background-color--hover: var(--neutral--color--900);
875
815
  --neutral-solid-background-color--pressed: var(--neutral--color--1000);
876
816
  --neutral-solid-content-color: var(--neutral--color--100);
877
- --neutral-plain-background-color--hover: var(--neutral--color--400);
878
- --neutral-plain-background-color--pressed: var(--neutral--color--500);
817
+ --neutral-plain-background-color--hover: var(--neutral--color--300);
818
+ --neutral-plain-background-color--pressed: var(--neutral--color--400);
879
819
  --neutral-plain-content-color: var(--neutral--color--1000);
880
- --neutral-outline-background-color--hover: var(--neutral--color--400);
881
- --neutral-outline-background-color--selected: var(--neutral--color--500);
882
- --neutral-outline-background-color--pressed: var(--neutral--color--500);
820
+ --neutral-outline-background-color--hover: var(--neutral--color--300);
821
+ --neutral-outline-background-color--selected: var(--neutral--color--400);
822
+ --neutral-outline-background-color--pressed: var(--neutral--color--400);
883
823
  --neutral-outline-content-color: var(--neutral--color--1000);
884
824
  --neutral-outline-border-color: var(--neutral--color--700);
885
825
  --neutral-soft-background-color--default: var(--neutral--color--400);
886
826
  --neutral-soft-background-color--hover: var(--neutral--color--500);
887
827
  --neutral-soft-background-color--pressed: var(--neutral--color--600);
888
- --neutral-soft-content-color--default: var(--neutral--color--1000);
889
- --neutral-soft-content-color--pressed: var(--neutral--color--1100);
890
- --disabled-solid-background-color: var(--neutral--color--400);
891
- --disabled-solid-content-color: var(--neutral--color--600);
828
+ --neutral-soft-content-color: var(--neutral--color--1000);
829
+ --disabled-solid-background-color: var(--neutral--color--300);
830
+ --disabled-solid-content-color: var(--neutral--color--500);
831
+ --disabled-solid-dark-background-color: var(--dark--color--300);
832
+ --disabled-solid-dark-content-color: var(--light--color--300);
833
+ --disabled-solid-light-background-color: var(--light--color--300);
834
+ --disabled-solid-light-content-color: var(--dark--color--300);
835
+ --disabled-solid-dark-static-background-color: var(--dark-static--color--300);
836
+ --disabled-solid-dark-static-content-color: var(--light-static--color--300);
837
+ --disabled-solid-light-static-background-color: var(--light-static--color--300);
838
+ --disabled-solid-light-static-content-color: var(--dark-static--color--300);
892
839
  --disabled-plain-content-color: var(--neutral--color--400);
893
- --disabled-outline-background-color: var(--neutral--color--300);
840
+ --disabled-plain-dark-content-color: var(--dark--color--200);
841
+ --disabled-plain-light-content-color: var(--light--color--200);
842
+ --disabled-plain-dark-static-content-color: var(--dark-static--color--200);
843
+ --disabled-plain-light-static-content-color: var(--light-static--color--200);
844
+ --disabled-outline-background-color: var(--neutral--color--200);
894
845
  --disabled-outline-content-color: var(--neutral--color--500);
895
846
  --disabled-outline-border-color: var(--neutral--color--400);
896
- --disabled-soft-background-color: var(--neutral--color--300);
847
+ --disabled-outline-dark-border-color: var(--dark--color--200);
848
+ --disabled-outline-dark-content-color: var(--dark--color--200);
849
+ --disabled-outline-light-border-color: var(--light--color--200);
850
+ --disabled-outline-light-content-color: var(--light--color--200);
851
+ --disabled-outline-dark-static-border-color: var(--dark-static--color--200);
852
+ --disabled-outline-dark-static-content-color: var(--dark-static--color--200);
853
+ --disabled-outline-light-static-border-color: var(--light-static--color--200);
854
+ --disabled-outline-light-static-content-color: var(--light-static--color--200);
855
+ --disabled-soft-background-color: var(--neutral--color--200);
897
856
  --disabled-soft-content-color: var(--neutral--color--500);
857
+ --disabled-soft-dark-background-color: var(--dark--color--100);
858
+ --disabled-soft-dark-content-color: var(--dark--color--200);
859
+ --disabled-soft-light-background-color: var(--light--color--100);
860
+ --disabled-soft-light-content-color: var(--light--color--200);
861
+ --disabled-soft-dark-static-background-color: var(--dark-static--color--100);
862
+ --disabled-soft-dark-static-content-color: var(--dark-static--color--200);
863
+ --disabled-soft-light-static-background-color: var(--light-static--color--100);
864
+ --disabled-soft-light-static-content-color: var(--light-static--color--200);
865
+ --dark-solid-background-color--default: var(--dark--color--800);
866
+ --dark-solid-background-color--hover: var(--dark--color--700);
867
+ --dark-solid-background-color--pressed: var(--dark--color--600);
868
+ --dark-solid-content-color: var(--light--color--800);
869
+ --dark-soft-background-color--default: var(--dark--color--100);
870
+ --dark-soft-background-color--hover: var(--dark--color--200);
871
+ --dark-soft-background-color--pressed: var(--dark--color--300);
872
+ --dark-soft-content-color: var(--dark--color--800);
873
+ --dark-plain-background-color--hover: var(--dark--color--100);
874
+ --dark-plain-background-color--pressed: var(--dark--color--200);
875
+ --dark-plain-content-color: var(--dark--color--800);
876
+ --dark-outline-background-color--hover: var(--dark--color--100);
877
+ --dark-outline-background-color--pressed: var(--dark--color--200);
878
+ --dark-outline-border-color: var(--dark--color--800);
879
+ --dark-outline-content-color: var(--dark--color--800);
880
+ --light-solid-background-color--default: var(--light--color--800);
881
+ --light-solid-background-color--hover: var(--light--color--700);
882
+ --light-solid-background-color--pressed: var(--light--color--600);
883
+ --light-solid-content-color: var(--dark--color--800);
884
+ --light-soft-background-color--default: var(--light--color--100);
885
+ --light-soft-background-color--hover: var(--light--color--200);
886
+ --light-soft-background-color--pressed: var(--light--color--300);
887
+ --light-soft-content-color: var(--light--color--800);
888
+ --light-plain-background-color--hover: var(--light--color--100);
889
+ --light-plain-background-color--pressed: var(--light--color--200);
890
+ --light-plain-content-color: var(--light--color--800);
891
+ --light-outline-background-color--hover: var(--light--color--100);
892
+ --light-outline-background-color--pressed: var(--light--color--200);
893
+ --light-outline-border-color: var(--light--color--800);
894
+ --light-outline-content-color: var(--light--color--800);
895
+ --dark-static-solid-background-color--default: var(--dark-static--color--800);
896
+ --dark-static-solid-background-color--hover: var(--dark-static--color--700);
897
+ --dark-static-solid-background-color--pressed: var(--dark-static--color--600);
898
+ --dark-static-solid-content-color: var(--light-static--color--800);
899
+ --dark-static-soft-background-color--default: var(--dark-static--color--100);
900
+ --dark-static-soft-background-color--hover: var(--dark-static--color--200);
901
+ --dark-static-soft-background-color--pressed: var(--dark-static--color--300);
902
+ --dark-static-soft-content-color: var(--dark-static--color--800);
903
+ --dark-static-plain-background-color--hover: var(--dark-static--color--100);
904
+ --dark-static-plain-background-color--pressed: var(--dark-static--color--200);
905
+ --dark-static-plain-content-color: var(--dark-static--color--800);
906
+ --dark-static-outline-background-color--hover: var(--dark-static--color--100);
907
+ --dark-static-outline-background-color--pressed: var(--dark-static--color--200);
908
+ --dark-static-outline-border-color: var(--dark-static--color--800);
909
+ --dark-static-outline-content-color: var(--dark-static--color--800);
910
+ --light-static-solid-background-color--default: var(--light-static--color--800);
911
+ --light-static-solid-background-color--hover: var(--light-static--color--700);
912
+ --light-static-solid-background-color--pressed: var(--light-static--color--600);
913
+ --light-static-solid-content-color: var(--dark-static--color--800);
914
+ --light-static-soft-background-color--default: var(--light-static--color--100);
915
+ --light-static-soft-background-color--hover: var(--light-static--color--200);
916
+ --light-static-soft-background-color--pressed: var(--light-static--color--300);
917
+ --light-static-soft-content-color: var(--light-static--color--800);
918
+ --light-static-plain-background-color--hover: var(--light-static--color--100);
919
+ --light-static-plain-background-color--pressed: var(--light-static--color--200);
920
+ --light-static-plain-content-color: var(--light-static--color--800);
921
+ --light-static-outline-background-color--hover: var(--light-static--color--100);
922
+ --light-static-outline-background-color--pressed: var(--light-static--color--200);
923
+ --light-static-outline-border-color: var(--light-static--color--800);
924
+ --light-static-outline-content-color: var(--light-static--color--800);
898
925
  --avatar-stack--border-width: var(--border-width--200);
899
- --code--line-height: var(--line-height--m);
900
- --code--corner-radius: var(--corner-radius--default);
901
- --code--light-background-color: var(--light-soft-background-color--default);
902
- --code--light-content-color: var(--light-soft-content-color);
903
- --code--dark-background-color: var(--dark-soft-background-color--default);
904
- --code--dark-content-color: var(--dark-soft-content-color);
905
- --heading--color: var(--primary--color--1000);
906
- --heading--color-dark: var(--dark-plain-content-color);
907
- --heading--color-light: var(--light-plain-content-color);
908
- --icon--color: var(--neutral--color--800);
909
- --illustrated-message--primary-icon-color: var(--primary--color--900);
910
- --illustrated-message--danger-icon-color: var(--danger--color--900);
911
- --illustrated-message--danger-heading-color: var(--danger--color--1000);
912
- --illustrated-message--dark-icon-color: var(--dark-plain-content-color);
913
- --illustrated-message--light-icon-color: var(--light-plain-content-color);
914
- --image--corner-radius: var(--corner-radius--default);
926
+ --avatar--info-status-background-color: var(--info--color--200);
927
+ --avatar--warning-status-background-color: var(--warning--color--200);
928
+ --avatar--danger-status-background-color: var(--danger--color--200);
929
+ --avatar--success-status-background-color: var(--success--color--200);
930
+ --avatar--unavailable-status-background-color: var(--unavailable--color--400);
931
+ --code-block--corner-radius: var(--corner-radius--m);
932
+ --code-block--border-width: var(--border-width--100);
933
+ --heading--color: var(--neutral--color--1100);
934
+ --heading--color-danger: var(--danger--color--900);
935
+ --heading--color-unavailable: var(--unavailable--color--800);
936
+ --icon--color: var(--neutral--color--700);
937
+ --icon--info-color: var(--info--color--900);
938
+ --icon--warning-color: var(--warning--color--900);
939
+ --icon--danger-color: var(--danger--color--900);
940
+ --icon--success-color: var(--success--color--900);
941
+ --icon--unavailable-color: var(--unavailable--color--800);
942
+ --illustrated-message--danger-content-color: var(--danger--color--900);
943
+ --illustrated-message--unavailable-content-color: var(--unavailable--color--800);
944
+ --image--corner-radius: var(--corner-radius--m);
915
945
  --image--border-width: var(--border-width--100);
916
- --label--line-height: var(--line-height--m);
946
+ --inline-code--corner-radius: var(--corner-radius--s);
947
+ --kbd--corner-radius: var(--corner-radius--s);
948
+ --kbd--inner-shadow-color--default: var(--dark--color--200);
917
949
  --label--color--default: var(--neutral--color--800);
918
- --text--color--default: var(--neutral--color--1000);
919
- --text--color--light: var(--light-plain-content-color);
920
- --text--color--dark: var(--dark-plain-content-color);
950
+ --text--color--default: var(--neutral--color--1100);
921
951
  --text--blockquote-border-width: var(--border-width--300);
952
+ --area--border-width: var(--border-width--200);
953
+ --area--border-color: var(--neutral--color--100);
954
+ --axis--color: var(--neutral--color--800);
955
+ --axis--stroke-width: var(--border-width--100);
956
+ --cartesian-grid--color: var(--neutral--color--800);
957
+ --cartesian-grid--stroke-width: var(--border-width--100);
958
+ --donut-chart--background-color: var(--neutral--color--200);
959
+ --legend-item--marker--corner-radius: var(--corner-radius--s);
960
+ --line--border-width: var(--border-width--200);
961
+ --shadow--content: var(--dark-static--color--100) 0 var(--size-px--xxs) var(--size-px--xs);
962
+ --shadow--overlay: var(--dark-static--color--100) 0 var(--size-px--s) var(--size-px--m);
922
963
  --focus--outline-color: var(--primary--color--800);
923
964
  --focus--secondary-outline-color: var(--neutral--color--100);
924
965
  --focus--outline-width: var(--border-width--200);
925
- --choice--icon-color--selected: var(--primary--color--800);
926
- --calendar--heading-font-size: var(--font-size-text--default);
966
+ --choice--icon-color--selected: var(--primary--color--900);
967
+ --date-picker--date-segment-corner-radius: var(--corner-radius--s);
927
968
  --calendar--cell-background-color--disabled: var(--disabled-plain-background-color);
928
- --calendar--cell-background-color--hover: var(--dark-plain-background-color--hover);
929
- --calendar--cell-background-color--pressed: var(--dark-plain-background-color--pressed);
930
- --calendar--cell-range-background-color: var(--primary--color--100);
931
- --field-error--color: var(--danger--color--800);
932
- --form-control--corner-radius: var(--corner-radius--default);
969
+ --calendar--range-background-color: var(--primary--color--100);
970
+ --form-control--corner-radius: var(--corner-radius--m);
933
971
  --form-control--border-width: var(--border-width--100);
934
- --form-control--placeholder-color--default: var(--neutral--color--900);
972
+ --form-control--placeholder-color--default: var(--neutral--color--700);
935
973
  --form-control--placeholder-color--disabled: var(--neutral--color--500);
936
- --form-control--background-color--default: var(--neutral--color--300);
937
- --form-control--background-color--hover: var(--primary--color--100);
938
- --form-control--background-color--focused: var(--neutral--color--300);
974
+ --form-control--background-color--default: var(--neutral--color--200);
975
+ --form-control--background-color--focused: var(--neutral--color--200);
939
976
  --form-control--background-color--invalid: var(--danger--color--100);
940
- --form-control--background-color--selected: var(--primary--color--200);
941
- --slider--color--default: var(--primary--color--1000);
977
+ --rating--star-color: var(--neutral--color--700);
978
+ --rating--star-filled-color: var(--primary--color--800);
979
+ --slider--color--default: var(--neutral--color--1000);
942
980
  --slider--color--disabled: var(--neutral--color--600);
943
- --slider--track-color--default: var(--neutral--color--700);
944
- --slider--track-color--disabled: var(--neutral--color--400);
945
- --slider--border-width: var(--border-width--300);
946
- --slider--corner-radius: var(--corner-radius--default);
981
+ --slider--track-border-width: var(--border-width--100);
982
+ --slider--corner-radius: var(--corner-radius--s);
947
983
  --slider--handle-fill-color: var(--neutral--color--100);
948
- --switch--handle-color--disabled: var(--neutral--color--500);
949
- --switch--handle-background-color--default: var(--neutral--color--100);
950
- --switch--handle-background-color--disabled: var(--neutral--color--300);
951
- --breadcrumb--color-primary--default: var(--primary--color--1000);
952
- --breadcrumb--color-primary--hover: var(--primary--color--900);
953
- --breadcrumb--color-primary--pressed: var(--primary--color--800);
954
- --header-navigation--corner-radius: var(--corner-radius--default);
955
- --header-navigation--color: var(--primary--color--1000);
956
- --header-navigation--color-dark: var(--dark-plain-content-color);
957
- --header-navigation--color-light: var(--light-plain-content-color);
958
- --header-navigation--background-color-dark--hover: var(--dark-plain-background-color--hover);
959
- --header-navigation--background-color-dark--pressed: var(--dark-plain-background-color--pressed);
960
- --header-navigation--background-color-light--hover: var(--light-plain-background-color--hover);
961
- --header-navigation--background-color-light--pressed: var(--light-plain-background-color--pressed);
984
+ --slider--handle-border-width: var(--border-width--300);
985
+ --slider--initial-marker-border-width: var(--border-width--300);
986
+ --switch--handle-background-color: var(--neutral--color--100);
987
+ --time-field--date-segment-corner-radius: var(--corner-radius--m);
988
+ --breadcrumb--color--hover: var(--neutral--color--900);
989
+ --breadcrumb--color--pressed: var(--neutral--color--800);
990
+ --header-navigation--corner-radius: var(--corner-radius--m);
962
991
  --header-navigation--underline-width-current: var(--border-width--200);
963
- --link--line-height: var(--line-height--m);
992
+ --header-navigation--color: var(--neutral--color--1100);
964
993
  --link--color--default: var(--primary--color--800);
965
994
  --link--color--hover: var(--primary--color--900);
966
995
  --link--color--pressed: var(--primary--color--1000);
967
- --link--color-dark--disabled: var(--disabled-plain-dark-content-color);
968
- --link--color-light--disabled: var(--disabled-plain-light-content-color);
996
+ --link--color-dark--default: var(--dark--color--800);
997
+ --link--color-dark--hover: var(--dark--color--700);
998
+ --link--color-dark--pressed: var(--dark--color--600);
999
+ --link--color-light--default: var(--light--color--800);
1000
+ --link--color-light--hover: var(--light--color--700);
1001
+ --link--color-light--pressed: var(--light--color--600);
1002
+ --link--color-dark-static--default: var(--dark-static--color--800);
1003
+ --link--color-dark-static--hover: var(--dark-static--color--700);
1004
+ --link--color-dark-static--pressed: var(--dark-static--color--600);
1005
+ --link--color-light-static--default: var(--light-static--color--800);
1006
+ --link--color-light-static--hover: var(--light-static--color--700);
1007
+ --link--color-light-static--pressed: var(--light-static--color--600);
969
1008
  --tabs--background-color--selected: var(--neutral--color--100);
970
- --modal--corner-radius: var(--corner-radius--default);
1009
+ --light-box--indicator-border-width: var(--border-width--200);
1010
+ --light-box--content-color: var(--light-static--color--800);
1011
+ --modal--corner-radius: var(--corner-radius--l);
971
1012
  --modal--background-color: var(--neutral--color--100);
972
- --modal--footer-background-color: var(--neutral--color--300);
1013
+ --modal--footer-background-color: var(--neutral--color--200);
1014
+ --modal--border-color: var(--neutral--color--300);
973
1015
  --modal--border-width: var(--border-width--100);
974
- --popover--box-shadow: var(--shadow--overlay);
975
- --popover--corner-radius: var(--corner-radius--default);
1016
+ --overlay--backdrop-color: var(--dark-static--color--300);
1017
+ --popover--corner-radius: var(--corner-radius--m);
976
1018
  --popover--background-color: var(--neutral--color--100);
977
1019
  --popover--border-width: var(--border-width--100);
1020
+ --popover--border-color: var(--neutral--color--300);
978
1021
  --tooltip--background-color: var(--neutral--color--900);
979
- --tooltip--box-shadow: var(--shadow--overlay);
980
- --tooltip--header-corner-radius: var(--corner-radius--default);
981
- --alert--corner-radius: var(--corner-radius--default);
1022
+ --tooltip--corner-radius: var(--corner-radius--m);
1023
+ --scrollbar--thumb-color: var(--dark--color--200);
1024
+ --alert-text--info-color: var(--info--color--900);
1025
+ --alert-text--warning-color: var(--warning--color--900);
1026
+ --alert-text--danger-color: var(--danger--color--900);
1027
+ --alert-text--success-color: var(--success--color--900);
1028
+ --alert-text--unavailable-color: var(--unavailable--color--800);
1029
+ --alert--corner-radius: var(--corner-radius--m);
982
1030
  --alert--border-width: var(--border-width--100);
983
1031
  --alert--border-x-start-width: var(--border-width--400);
1032
+ --badge--corner-radius: var(--corner-radius--l);
984
1033
  --badge--border-width: var(--border-width--100);
985
- --badge--disabled-dark-border-color: var(--disabled-outline-dark-border-color);
986
- --badge--disabled-dark-background-color: var(--disabled-soft-dark-background-color);
987
- --badge--disabled-dark-content-color: var(--disabled-soft-dark-content-color);
988
- --badge--disabled-dark-scope-background-color: var(--disabled-solid-dark-background-color);
989
- --badge--disabled-dark-scope-content-color: var(--disabled-solid-dark-content-color);
990
- --badge--disabled-light-border-color: var(--disabled-outline-light-border-color);
991
- --badge--disabled-light-background-color: var(--disabled-soft-light-background-color);
992
- --badge--disabled-light-content-color: var(--disabled-soft-light-content-color);
993
- --badge--disabled-light-scope-background-color: var(--disabled-solid-light-background-color);
994
- --badge--disabled-light-scope-content-color: var(--disabled-solid-light-content-color);
1034
+ --badge--dark-border-color: var(--dark--color--800);
1035
+ --badge--dark-background-color--default: var(--dark--color--100);
1036
+ --badge--dark-background-color--hover: var(--dark--color--200);
1037
+ --badge--dark-background-color--pressed: var(--dark--color--300);
1038
+ --badge--dark-content-color: var(--dark--color--800);
1039
+ --badge--dark-scope-background-color: var(--dark--color--800);
1040
+ --badge--light-border-color: var(--light--color--800);
1041
+ --badge--light-background-color--default: var(--light--color--100);
1042
+ --badge--light-background-color--hover: var(--light--color--200);
1043
+ --badge--light-background-color--pressed: var(--light--color--300);
1044
+ --badge--light-content-color: var(--light--color--800);
1045
+ --badge--light-scope-background-color: var(--light--color--800);
1046
+ --badge--dark-static-border-color: var(--dark-static--color--800);
1047
+ --badge--dark-static-background-color--default: var(--dark-static--color--100);
1048
+ --badge--dark-static-background-color--hover: var(--dark-static--color--200);
1049
+ --badge--dark-static-background-color--pressed: var(--dark-static--color--300);
1050
+ --badge--dark-static-content-color: var(--dark-static--color--800);
1051
+ --badge--dark-static-scope-background-color: var(--dark-static--color--800);
1052
+ --badge--light-static-border-color: var(--light-static--color--800);
1053
+ --badge--light-static-background-color--default: var(--light-static--color--100);
1054
+ --badge--light-static-background-color--hover: var(--light-static--color--200);
1055
+ --badge--light-static-background-color--pressed: var(--light-static--color--300);
1056
+ --badge--light-static-content-color: var(--light-static--color--800);
1057
+ --badge--light-static-scope-background-color: var(--light-static--color--800);
995
1058
  --counter-badge--border-width: var(--border-width--200);
996
1059
  --counter-badge--border-color: var(--neutral--color--100);
997
- --notification--corner-radius: var(--corner-radius--default);
1060
+ --notification--corner-radius: var(--corner-radius--m);
998
1061
  --notification--border-x-start-width: var(--border-width--300);
999
- --notification--box-shadow: var(--shadow--overlay);
1062
+ --notification--border-width: var(--border-width--100);
1063
+ --notification--border-color: var(--neutral--color--300);
1000
1064
  --notification--info-background-color--default: var(--neutral--color--100);
1001
1065
  --notification--warning-background-color--default: var(--neutral--color--100);
1002
1066
  --notification--danger-background-color--default: var(--neutral--color--100);
1003
1067
  --notification--success-background-color--default: var(--neutral--color--100);
1068
+ --notification--unavailable-background-color--default: var(--neutral--color--100);
1069
+ --progress-bar--corner-radius: var(--corner-radius--l);
1004
1070
  --progress-bar--border-width: var(--border-width--100);
1005
- --progress-bar--background-color: var(--neutral-outline-background-color--default);
1006
- --accent-box--corner-radius: var(--corner-radius--default);
1007
- --accordion--corner-radius: var(--corner-radius--default);
1071
+ --progress-bar--background-color: var(--neutral--color--200);
1072
+ --accent-box--background-color-neutral: var(--neutral--color--300);
1073
+ --accent-box--corner-radius: var(--corner-radius--m);
1074
+ --accordion--corner-radius: var(--corner-radius--m);
1008
1075
  --accordion--border-width: var(--border-width--100);
1009
- --accordion--background-color--hover: var(--primary--color--100);
1010
- --accordion--background-color--pressed: var(--primary--color--100);
1011
1076
  --layout-card--background-color: var(--neutral--color--100);
1012
- --layout-card--corner-radius: var(--corner-radius--default);
1013
- --layout-card--box-shadow: var(--shadow--content);
1014
- --list-item--corner-radius: var(--corner-radius--default);
1077
+ --layout-card--corner-radius: var(--corner-radius--l);
1078
+ --layout-card--border-width: var(--border-width--100);
1079
+ --layout-card--border-color: var(--neutral--color--300);
1080
+ --list-item--corner-radius: var(--corner-radius--m);
1015
1081
  --list-item--border-width: var(--border-width--100);
1016
- --list-item--background-color--default: var(--neutral--color--200);
1017
- --list-item--background-color--hover: var(--primary--color--100);
1018
- --list-item--background-color--pressed: var(--primary--color--200);
1082
+ --list-item--background-color--default: var(--neutral-outline-background-color--default);
1083
+ --list-item--checkbox-color: var(--light-static--color--800);
1084
+ --list-item--checkbox-background-color: var(--dark-static--color--400);
1085
+ --list-item--checkbox-corner-radius: var(--corner-radius--s);
1086
+ --separator--color: var(--neutral--color--500);
1019
1087
  --separator--height: var(--border-width--100);
1020
- --table--corner-radius: var(--corner-radius--default);
1088
+ --table--corner-radius: var(--corner-radius--m);
1021
1089
  --table--border-width: var(--border-width--100);
1022
1090
  --table--header-border-width: var(--border-width--200);
1023
1091
  --table--footer-border-width: var(--border-width--200);
1024
1092
  --table--background-color: var(--neutral--color--100);
1025
- --table--background-color-accent: var(--neutral--color--300);
1026
- --file-card--corner-radius: var(--corner-radius--default);
1093
+ --table--background-color-accent: var(--neutral--color--200);
1094
+ --file-card--corner-radius: var(--corner-radius--m);
1027
1095
  --file-card--border-width: var(--border-width--100);
1028
1096
  --file-card--background-color--default: var(--neutral--color--100);
1029
- --file-drop-zone--corner-radius: var(--corner-radius--default);
1097
+ --file-card--background-color--error: var(--danger--color--100);
1098
+ --file-drop-zone--corner-radius: var(--corner-radius--m);
1030
1099
  --file-drop-zone--border-width: var(--border-width--100);
1031
1100
  --file-drop-zone--border-color--target: var(--primary--color--800);
1101
+ --image-cropper--border-width: var(--border-width--100);
1102
+ --image-cropper--corner-radius: var(--corner-radius--m);
1103
+ --image-cropper--grid-color: var(--light-static--color--400);
1104
+ --image-cropper--mask-border-color: var(--light-static--color--800);
1105
+ --image-cropper--mask-color: var(--dark-static--color--600);
1032
1106
  --button--accent-solid-background-color--default: var(--success-solid-background-color--default);
1033
1107
  --button--accent-solid-background-color--hover: var(--success-solid-background-color--hover);
1034
1108
  --button--accent-solid-background-color--pressed: var(--success-solid-background-color--pressed);
1035
1109
  --button--accent-solid-background-color--disabled: var(--disabled-solid-background-color);
1036
1110
  --button--accent-solid-content-color--default: var(--success-solid-content-color);
1037
- --button--accent-solid-content-color--hover: var(--success-solid-content-color);
1038
- --button--accent-solid-content-color--pressed: var(--success-solid-content-color);
1039
1111
  --button--accent-solid-content-color--disabled: var(--disabled-solid-content-color);
1040
1112
  --button--accent-plain-background-color--hover: var(--success-plain-background-color--hover);
1041
1113
  --button--accent-plain-background-color--pressed: var(--success-plain-background-color--pressed);
1042
1114
  --button--accent-plain-content-color--default: var(--success-plain-content-color);
1043
- --button--accent-plain-content-color--hover: var(--success-plain-content-color);
1044
- --button--accent-plain-content-color--pressed: var(--success-plain-content-color);
1045
1115
  --button--accent-plain-content-color--disabled: var(--disabled-plain-content-color);
1046
1116
  --button--accent-soft-background-color--default: var(--success-soft-background-color--default);
1047
1117
  --button--accent-soft-background-color--hover: var(--success-soft-background-color--hover);
1048
1118
  --button--accent-soft-background-color--pressed: var(--success-soft-background-color--pressed);
1049
1119
  --button--accent-soft-background-color--disabled: var(--disabled-soft-background-color);
1050
- --button--accent-soft-content-color--default: var(--success-soft-content-color--default);
1051
- --button--accent-soft-content-color--hover: var(--success-soft-content-color--default);
1052
- --button--accent-soft-content-color--pressed: var(--success-soft-content-color--pressed);
1120
+ --button--accent-soft-content-color--default: var(--success-soft-content-color);
1053
1121
  --button--accent-soft-content-color--disabled: var(--disabled-soft-content-color);
1054
1122
  --button--accent-outline-background-color--hover: var(--success-outline-background-color--hover);
1055
1123
  --button--accent-outline-background-color--pressed: var(--success-outline-background-color--pressed);
1056
1124
  --button--accent-outline-background-color--disabled: var(--disabled-outline-background-color);
1057
- --button--accent-outline-content-color--default: var(--success-outline-border-color);
1058
- --button--accent-outline-content-color--hover: var(--success-outline-border-color);
1059
- --button--accent-outline-content-color--pressed: var(--success-outline-border-color);
1125
+ --button--accent-outline-content-color--default: var(--success-outline-content-color);
1060
1126
  --button--accent-outline-content-color--disabled: var(--disabled-outline-content-color);
1061
1127
  --button--accent-outline-border-color--default: var(--success-outline-border-color);
1062
1128
  --button--accent-outline-border-color--disabled: var(--disabled-outline-border-color);
@@ -1065,29 +1131,21 @@
1065
1131
  --button--primary-solid-background-color--pressed: var(--primary-solid-background-color--pressed);
1066
1132
  --button--primary-solid-background-color--disabled: var(--disabled-solid-background-color);
1067
1133
  --button--primary-solid-content-color--default: var(--primary-solid-content-color);
1068
- --button--primary-solid-content-color--hover: var(--primary-solid-content-color);
1069
- --button--primary-solid-content-color--pressed: var(--primary-solid-content-color);
1070
1134
  --button--primary-solid-content-color--disabled: var(--disabled-solid-content-color);
1071
1135
  --button--primary-plain-background-color--hover: var(--primary-plain-background-color--hover);
1072
1136
  --button--primary-plain-background-color--pressed: var(--primary-plain-background-color--pressed);
1073
1137
  --button--primary-plain-content-color--default: var(--primary-plain-content-color);
1074
- --button--primary-plain-content-color--hover: var(--primary-plain-content-color);
1075
- --button--primary-plain-content-color--pressed: var(--primary-plain-content-color);
1076
1138
  --button--primary-plain-content-color--disabled: var(--disabled-plain-content-color);
1077
1139
  --button--primary-soft-background-color--default: var(--primary-soft-background-color--default);
1078
1140
  --button--primary-soft-background-color--hover: var(--primary-soft-background-color--hover);
1079
1141
  --button--primary-soft-background-color--pressed: var(--primary-soft-background-color--pressed);
1080
1142
  --button--primary-soft-background-color--disabled: var(--disabled-soft-background-color);
1081
- --button--primary-soft-content-color--default: var(--primary-soft-content-color--default);
1082
- --button--primary-soft-content-color--hover: var(--primary-soft-content-color--default);
1083
- --button--primary-soft-content-color--pressed: var(--primary-soft-content-color--pressed);
1143
+ --button--primary-soft-content-color--default: var(--primary-soft-content-color);
1084
1144
  --button--primary-soft-content-color--disabled: var(--disabled-soft-content-color);
1085
1145
  --button--primary-outline-background-color--hover: var(--primary-outline-background-color--hover);
1086
1146
  --button--primary-outline-background-color--pressed: var(--primary-outline-background-color--pressed);
1087
1147
  --button--primary-outline-background-color--disabled: var(--disabled-outline-background-color);
1088
- --button--primary-outline-content-color--default: var(--primary-outline-border-color);
1089
- --button--primary-outline-content-color--hover: var(--primary-outline-border-color);
1090
- --button--primary-outline-content-color--pressed: var(--primary-outline-border-color);
1148
+ --button--primary-outline-content-color--default: var(--primary-outline-content-color);
1091
1149
  --button--primary-outline-content-color--disabled: var(--disabled-outline-content-color);
1092
1150
  --button--primary-outline-border-color--default: var(--primary-outline-border-color);
1093
1151
  --button--primary-outline-border-color--disabled: var(--disabled-outline-border-color);
@@ -1096,29 +1154,21 @@
1096
1154
  --button--secondary-solid-background-color--pressed: var(--neutral-solid-background-color--pressed);
1097
1155
  --button--secondary-solid-background-color--disabled: var(--disabled-solid-background-color);
1098
1156
  --button--secondary-solid-content-color--default: var(--neutral-solid-content-color);
1099
- --button--secondary-solid-content-color--hover: var(--neutral-solid-content-color);
1100
- --button--secondary-solid-content-color--pressed: var(--neutral-solid-content-color);
1101
1157
  --button--secondary-solid-content-color--disabled: var(--disabled-solid-content-color);
1102
1158
  --button--secondary-plain-background-color--hover: var(--neutral-plain-background-color--hover);
1103
1159
  --button--secondary-plain-background-color--pressed: var(--neutral-plain-background-color--pressed);
1104
1160
  --button--secondary-plain-content-color--default: var(--neutral-plain-content-color);
1105
- --button--secondary-plain-content-color--hover: var(--neutral-plain-content-color);
1106
- --button--secondary-plain-content-color--pressed: var(--neutral-plain-content-color);
1107
1161
  --button--secondary-plain-content-color--disabled: var(--disabled-plain-content-color);
1108
1162
  --button--secondary-soft-background-color--default: var(--neutral-soft-background-color--default);
1109
1163
  --button--secondary-soft-background-color--hover: var(--neutral-soft-background-color--hover);
1110
1164
  --button--secondary-soft-background-color--pressed: var(--neutral-soft-background-color--pressed);
1111
1165
  --button--secondary-soft-background-color--disabled: var(--disabled-soft-background-color);
1112
- --button--secondary-soft-content-color--default: var(--neutral-soft-content-color--default);
1113
- --button--secondary-soft-content-color--hover: var(--neutral-soft-content-color--default);
1114
- --button--secondary-soft-content-color--pressed: var(--neutral-soft-content-color--pressed);
1166
+ --button--secondary-soft-content-color--default: var(--neutral-soft-content-color);
1115
1167
  --button--secondary-soft-content-color--disabled: var(--disabled-soft-content-color);
1116
1168
  --button--secondary-outline-background-color--hover: var(--neutral-outline-background-color--hover);
1117
1169
  --button--secondary-outline-background-color--pressed: var(--neutral-outline-background-color--pressed);
1118
1170
  --button--secondary-outline-background-color--disabled: var(--disabled-outline-background-color);
1119
1171
  --button--secondary-outline-content-color--default: var(--neutral-outline-content-color);
1120
- --button--secondary-outline-content-color--hover: var(--neutral-outline-content-color);
1121
- --button--secondary-outline-content-color--pressed: var(--neutral-outline-content-color);
1122
1172
  --button--secondary-outline-content-color--disabled: var(--disabled-outline-content-color);
1123
1173
  --button--secondary-outline-border-color--default: var(--neutral-outline-border-color);
1124
1174
  --button--secondary-outline-border-color--disabled: var(--disabled-outline-border-color);
@@ -1127,52 +1177,166 @@
1127
1177
  --button--danger-solid-background-color--pressed: var(--danger-solid-background-color--pressed);
1128
1178
  --button--danger-solid-background-color--disabled: var(--disabled-solid-background-color);
1129
1179
  --button--danger-solid-content-color--default: var(--danger-solid-content-color);
1130
- --button--danger-solid-content-color--hover: var(--danger-solid-content-color);
1131
- --button--danger-solid-content-color--pressed: var(--danger-solid-content-color);
1132
1180
  --button--danger-solid-content-color--disabled: var(--disabled-solid-content-color);
1133
1181
  --button--danger-plain-background-color--hover: var(--danger-plain-background-color--hover);
1134
1182
  --button--danger-plain-background-color--pressed: var(--danger-plain-background-color--pressed);
1135
1183
  --button--danger-plain-content-color--default: var(--danger-plain-content-color);
1136
- --button--danger-plain-content-color--hover: var(--danger-plain-content-color);
1137
- --button--danger-plain-content-color--pressed: var(--danger-plain-content-color);
1138
1184
  --button--danger-plain-content-color--disabled: var(--disabled-plain-content-color);
1139
1185
  --button--danger-soft-background-color--default: var(--danger-soft-background-color--default);
1140
1186
  --button--danger-soft-background-color--hover: var(--danger-soft-background-color--hover);
1141
1187
  --button--danger-soft-background-color--pressed: var(--danger-soft-background-color--pressed);
1142
1188
  --button--danger-soft-background-color--disabled: var(--disabled-soft-background-color);
1143
- --button--danger-soft-content-color--default: var(--danger-soft-content-color--default);
1144
- --button--danger-soft-content-color--hover: var(--danger-soft-content-color--default);
1145
- --button--danger-soft-content-color--pressed: var(--danger-soft-content-color--pressed);
1189
+ --button--danger-soft-content-color--default: var(--danger-soft-content-color);
1146
1190
  --button--danger-soft-content-color--disabled: var(--disabled-soft-content-color);
1147
1191
  --button--danger-outline-background-color--hover: var(--danger-outline-background-color--hover);
1148
1192
  --button--danger-outline-background-color--pressed: var(--danger-outline-background-color--pressed);
1149
1193
  --button--danger-outline-background-color--disabled: var(--disabled-outline-background-color);
1150
- --button--danger-outline-content-color--default: var(--danger-outline-border-color);
1151
- --button--danger-outline-content-color--hover: var(--danger-outline-border-color);
1152
- --button--danger-outline-content-color--pressed: var(--danger-outline-border-color);
1194
+ --button--danger-outline-content-color--default: var(--danger-outline-content-color);
1153
1195
  --button--danger-outline-content-color--disabled: var(--disabled-outline-content-color);
1154
1196
  --button--danger-outline-border-color--default: var(--danger-outline-border-color);
1155
1197
  --button--danger-outline-border-color--disabled: var(--disabled-outline-border-color);
1198
+ --button--dark-solid-background-color--default: var(--dark-solid-background-color--default);
1199
+ --button--dark-solid-background-color--hover: var(--dark-solid-background-color--hover);
1200
+ --button--dark-solid-background-color--pressed: var(--dark-solid-background-color--pressed);
1201
+ --button--dark-solid-background-color--disabled: var(--disabled-solid-dark-background-color);
1202
+ --button--dark-solid-content-color--default: var(--dark-solid-content-color);
1203
+ --button--dark-solid-content-color--disabled: var(--disabled-solid-dark-content-color);
1204
+ --button--dark-plain-background-color--hover: var(--dark-plain-background-color--hover);
1205
+ --button--dark-plain-background-color--pressed: var(--dark-plain-background-color--pressed);
1206
+ --button--dark-plain-content-color--default: var(--dark-plain-content-color);
1207
+ --button--dark-plain-content-color--disabled: var(--disabled-plain-dark-content-color);
1208
+ --button--dark-soft-background-color--default: var(--dark-soft-background-color--default);
1209
+ --button--dark-soft-background-color--hover: var(--dark-soft-background-color--hover);
1210
+ --button--dark-soft-background-color--pressed: var(--dark-soft-background-color--pressed);
1211
+ --button--dark-soft-background-color--disabled: var(--disabled-soft-dark-background-color);
1212
+ --button--dark-soft-content-color--default: var(--dark-soft-content-color);
1213
+ --button--dark-soft-content-color--disabled: var(--disabled-soft-dark-content-color);
1214
+ --button--dark-outline-background-color--hover: var(--dark-outline-background-color--hover);
1215
+ --button--dark-outline-background-color--pressed: var(--dark-outline-background-color--pressed);
1216
+ --button--dark-outline-content-color--default: var(--dark-outline-content-color);
1217
+ --button--dark-outline-content-color--disabled: var(--disabled-outline-dark-content-color);
1218
+ --button--dark-outline-border-color--default: var(--dark-outline-border-color);
1219
+ --button--dark-outline-border-color--disabled: var(--disabled-outline-dark-border-color);
1220
+ --button--light-solid-background-color--default: var(--light-solid-background-color--default);
1221
+ --button--light-solid-background-color--hover: var(--light-solid-background-color--hover);
1222
+ --button--light-solid-background-color--pressed: var(--light-solid-background-color--pressed);
1223
+ --button--light-solid-background-color--disabled: var(--disabled-solid-light-background-color);
1224
+ --button--light-solid-content-color--default: var(--light-solid-content-color);
1225
+ --button--light-solid-content-color--disabled: var(--disabled-solid-light-content-color);
1226
+ --button--light-plain-background-color--hover: var(--light-plain-background-color--hover);
1227
+ --button--light-plain-background-color--pressed: var(--light-plain-background-color--pressed);
1228
+ --button--light-plain-content-color--default: var(--light-plain-content-color);
1229
+ --button--light-plain-content-color--disabled: var(--disabled-plain-light-content-color);
1230
+ --button--light-soft-background-color--default: var(--light-soft-background-color--default);
1231
+ --button--light-soft-background-color--hover: var(--light-soft-background-color--hover);
1232
+ --button--light-soft-background-color--pressed: var(--light-soft-background-color--pressed);
1233
+ --button--light-soft-background-color--disabled: var(--disabled-soft-light-background-color);
1234
+ --button--light-soft-content-color--default: var(--light-soft-content-color);
1235
+ --button--light-soft-content-color--disabled: var(--disabled-soft-light-content-color);
1236
+ --button--light-outline-background-color--hover: var(--light-outline-background-color--hover);
1237
+ --button--light-outline-background-color--pressed: var(--light-outline-background-color--pressed);
1238
+ --button--light-outline-content-color--default: var(--light-outline-content-color);
1239
+ --button--light-outline-content-color--disabled: var(--disabled-outline-light-content-color);
1240
+ --button--light-outline-border-color--default: var(--light-outline-border-color);
1241
+ --button--light-outline-border-color--disabled: var(--disabled-outline-light-border-color);
1242
+ --button--dark-static-solid-background-color--default: var(--dark-static-solid-background-color--default);
1243
+ --button--dark-static-solid-background-color--hover: var(--dark-static-solid-background-color--hover);
1244
+ --button--dark-static-solid-background-color--pressed: var(--dark-static-solid-background-color--pressed);
1245
+ --button--dark-static-solid-background-color--disabled: var(--disabled-solid-dark-static-background-color);
1246
+ --button--dark-static-solid-content-color--default: var(--dark-static-solid-content-color);
1247
+ --button--dark-static-solid-content-color--disabled: var(--disabled-solid-dark-static-content-color);
1248
+ --button--dark-static-plain-background-color--hover: var(--dark-static-plain-background-color--hover);
1249
+ --button--dark-static-plain-background-color--pressed: var(--dark-static-plain-background-color--pressed);
1250
+ --button--dark-static-plain-content-color--default: var(--dark-static-plain-content-color);
1251
+ --button--dark-static-plain-content-color--disabled: var(--disabled-plain-dark-static-content-color);
1252
+ --button--dark-static-soft-background-color--default: var(--dark-static-soft-background-color--default);
1253
+ --button--dark-static-soft-background-color--hover: var(--dark-static-soft-background-color--hover);
1254
+ --button--dark-static-soft-background-color--pressed: var(--dark-static-soft-background-color--pressed);
1255
+ --button--dark-static-soft-background-color--disabled: var(--disabled-soft-dark-static-background-color);
1256
+ --button--dark-static-soft-content-color--default: var(--dark-static-soft-content-color);
1257
+ --button--dark-static-soft-content-color--disabled: var(--disabled-soft-dark-static-content-color);
1258
+ --button--dark-static-outline-background-color--hover: var(--dark-static-outline-background-color--hover);
1259
+ --button--dark-static-outline-background-color--pressed: var(--dark-static-outline-background-color--pressed);
1260
+ --button--dark-static-outline-content-color--default: var(--dark-static-outline-content-color);
1261
+ --button--dark-static-outline-content-color--disabled: var(--disabled-outline-dark-static-content-color);
1262
+ --button--dark-static-outline-border-color--default: var(--dark-static-outline-border-color);
1263
+ --button--dark-static-outline-border-color--disabled: var(--disabled-outline-dark-static-border-color);
1264
+ --button--light-static-solid-background-color--default: var(--light-static-solid-background-color--default);
1265
+ --button--light-static-solid-background-color--hover: var(--light-static-solid-background-color--hover);
1266
+ --button--light-static-solid-background-color--pressed: var(--light-static-solid-background-color--pressed);
1267
+ --button--light-static-solid-background-color--disabled: var(--disabled-solid-light-static-background-color);
1268
+ --button--light-static-solid-content-color--default: var(--light-static-solid-content-color);
1269
+ --button--light-static-solid-content-color--disabled: var(--disabled-solid-light-static-content-color);
1270
+ --button--light-static-plain-background-color--hover: var(--light-static-plain-background-color--hover);
1271
+ --button--light-static-plain-background-color--pressed: var(--light-static-plain-background-color--pressed);
1272
+ --button--light-static-plain-content-color--default: var(--light-static-plain-content-color);
1273
+ --button--light-static-plain-content-color--disabled: var(--disabled-plain-light-static-content-color);
1274
+ --button--light-static-soft-background-color--default: var(--light-static-soft-background-color--default);
1275
+ --button--light-static-soft-background-color--hover: var(--light-static-soft-background-color--hover);
1276
+ --button--light-static-soft-background-color--pressed: var(--light-static-soft-background-color--pressed);
1277
+ --button--light-static-soft-background-color--disabled: var(--disabled-soft-light-static-background-color);
1278
+ --button--light-static-soft-content-color--default: var(--light-static-soft-content-color);
1279
+ --button--light-static-soft-content-color--disabled: var(--disabled-soft-light-static-content-color);
1280
+ --button--light-static-outline-background-color--hover: var(--light-static-outline-background-color--hover);
1281
+ --button--light-static-outline-background-color--pressed: var(--light-static-outline-background-color--pressed);
1282
+ --button--light-static-outline-content-color--default: var(--light-static-outline-content-color);
1283
+ --button--light-static-outline-content-color--disabled: var(--disabled-outline-light-static-content-color);
1284
+ --button--light-static-outline-border-color--default: var(--light-static-outline-border-color);
1285
+ --button--light-static-outline-border-color--disabled: var(--disabled-outline-light-static-border-color);
1286
+ --image-button--hover-icon-color: var(--light-static-plain-content-color);
1287
+ --menu-item--icon-color--default: var(--icon--color);
1156
1288
  --menu-item--icon-color--disabled: var(--disabled-plain-content-color);
1157
- --menu-item--background-color--hover: var(--primary-plain-background-color--hover);
1158
- --menu-item--background-color--current: var(--primary-plain-background-color--pressed);
1289
+ --menu-item--icon-color--current: var(--text--color--default);
1290
+ --menu-item--background-color--hover: var(--neutral-plain-background-color--hover);
1291
+ --menu-item--background-color--current: var(--neutral-plain-background-color--pressed);
1159
1292
  --menu-item--disabled-color: var(--disabled-plain-content-color);
1160
- --code--default-background-color: var(--neutral-soft-background-color--default);
1161
- --code--default-content-color: var(--neutral-soft-content-color--default);
1162
- --icon--info-color: var(--info-outline-content-color);
1163
- --icon--warning-color: var(--warning-outline-content-color);
1164
- --icon--danger-color: var(--danger-outline-content-color);
1165
- --icon--success-color: var(--success-outline-content-color);
1166
- --illustrated-message--primary-heading-color: var(--heading--color);
1167
- --illustrated-message--dark-heading-color: var(--heading--color-dark);
1168
- --illustrated-message--light-heading-color: var(--heading--color-light);
1293
+ --code-block--border-color: var(--separator--color);
1294
+ --code-block--background-color: var(--form-control--background-color--default);
1295
+ --code-block--content-color: var(--neutral-soft-content-color);
1296
+ --heading--color-dark: var(--dark-plain-content-color);
1297
+ --heading--color-light: var(--light-plain-content-color);
1298
+ --heading--color-dark-static: var(--dark-static-plain-content-color);
1299
+ --heading--color-light-static: var(--light-static-plain-content-color);
1300
+ --illustrated-message--content-color: var(--heading--color);
1301
+ --illustrated-message--dark-content-color: var(--dark-plain-content-color);
1302
+ --illustrated-message--light-content-color: var(--light-plain-content-color);
1303
+ --illustrated-message--dark-static-content-color: var(--dark-static-plain-content-color);
1304
+ --illustrated-message--light-static-content-color: var(--light-static-plain-content-color);
1169
1305
  --image--border-color: var(--neutral-outline-border-color);
1306
+ --inline-code--background-color: var(--neutral-soft-background-color--default);
1307
+ --inline-code--content-color: var(--neutral-soft-content-color);
1308
+ --inline-code--dark-background-color: var(--dark-soft-background-color--default);
1309
+ --inline-code--dark-content-color: var(--dark-soft-content-color);
1310
+ --inline-code--light-background-color: var(--light-soft-background-color--default);
1311
+ --inline-code--light-content-color: var(--light-soft-content-color);
1312
+ --inline-code--dark-static-background-color: var(--dark-static-soft-background-color--default);
1313
+ --inline-code--dark-static-content-color: var(--dark-static-soft-content-color);
1314
+ --inline-code--light-static-background-color: var(--light-static-soft-background-color--default);
1315
+ --inline-code--light-static-content-color: var(--light-static-soft-content-color);
1316
+ --kbd--background-color--default: var(--neutral-soft-background-color--default);
1317
+ --kbd--background-color--disabled: var(--disabled-soft-background-color);
1318
+ --kbd--content-color--default: var(--neutral-soft-content-color);
1319
+ --kbd--content-color--disabled: var(--disabled-soft-content-color);
1320
+ --kbd--content-color-plain--default: var(--form-control--placeholder-color--default);
1321
+ --kbd--content-color-plain--disabled: var(--form-control--placeholder-color--disabled);
1322
+ --kbd--inner-shadow-color--disabled: var(--disabled-soft-dark-background-color);
1170
1323
  --label--color--disabled: var(--disabled-plain-content-color);
1324
+ --text--color--light: var(--light-plain-content-color);
1325
+ --text--color--dark: var(--dark-plain-content-color);
1326
+ --text--color--light-static: var(--light-static-plain-content-color);
1327
+ --text--color--dark-static: var(--dark-static-plain-content-color);
1171
1328
  --text--color--disabled: var(--disabled-plain-content-color);
1172
1329
  --text--blockquote-border-color: var(--info-outline-border-color);
1330
+ --donut-chart--border-color: var(--neutral-outline-border-color);
1331
+ --donut-chart--info-fill-background-color: var(--info-solid-background-color--default);
1332
+ --donut-chart--success-fill-background-color: var(--success-solid-background-color--default);
1333
+ --donut-chart--warning-fill-background-color: var(--warning-solid-background-color--default);
1334
+ --donut-chart--danger-fill-background-color: var(--danger-solid-background-color--default);
1173
1335
  --choice--icon-color--default: var(--icon--color);
1174
1336
  --choice--icon-color--disabled: var(--disabled-outline-content-color);
1175
1337
  --date-picker--date-segment-background-color--focused: var(--primary-plain-background-color--pressed);
1338
+ --calendar--cell-background-color--hover: var(--dark-plain-background-color--hover);
1339
+ --calendar--cell-background-color--pressed: var(--dark-plain-background-color--pressed);
1176
1340
  --calendar--cell-background-color--selected: var(--primary-solid-background-color--default);
1177
1341
  --calendar--cell-content-color--disabled: var(--disabled-plain-content-color);
1178
1342
  --calendar--cell-content-color--selected: var(--primary-solid-content-color);
@@ -1182,37 +1346,72 @@
1182
1346
  --form-control--border-color--focused: var(--focus--outline-color);
1183
1347
  --form-control--border-color--selected: var(--neutral-outline-border-color);
1184
1348
  --form-control--background-color--disabled: var(--disabled-outline-background-color);
1349
+ --form-control--background-color--hover: var(--neutral-outline-background-color--hover);
1350
+ --form-control--background-color--selected: var(--neutral-outline-background-color--pressed);
1185
1351
  --form-control--content-color--default: var(--neutral-outline-content-color);
1186
1352
  --form-control--content-color--disabled: var(--disabled-outline-content-color);
1187
1353
  --form-control--content-color--selected: var(--neutral-outline-content-color);
1354
+ --slider--track-color--default: var(--form-control--background-color--default);
1188
1355
  --switch--track-background-color--default: var(--neutral-solid-background-color--default);
1189
1356
  --switch--track-background-color--disabled: var(--disabled-solid-background-color);
1190
- --switch--track-background-color--selected: var(--success-solid-background-color--default);
1191
- --switch--handle-color--default: var(--neutral-solid-content-color);
1357
+ --switch--track-background-color--selected: var(--primary-solid-background-color--default);
1358
+ --switch--handle-content-color--default: var(--neutral-plain-content-color);
1359
+ --switch--handle-content-color--disabled: var(--disabled-plain-content-color);
1192
1360
  --time-field--date-segment-background-color--focused: var(--primary-plain-background-color--pressed);
1193
- --header-navigation--background-color--hover: var(--primary-plain-background-color--hover);
1194
- --header-navigation--background-color--pressed: var(--primary-plain-background-color--pressed);
1361
+ --breadcrumb--color--default: var(--text--color--default);
1362
+ --breadcrumb--color-dark--default: var(--link--color-dark--default);
1363
+ --breadcrumb--color-dark--hover: var(--link--color-dark--hover);
1364
+ --breadcrumb--color-dark--pressed: var(--link--color-dark--pressed);
1365
+ --breadcrumb--color-light--default: var(--link--color-light--default);
1366
+ --breadcrumb--color-light--hover: var(--link--color-light--hover);
1367
+ --breadcrumb--color-light--pressed: var(--link--color-light--pressed);
1368
+ --breadcrumb--color-dark-static--default: var(--link--color-dark-static--default);
1369
+ --breadcrumb--color-dark-static--hover: var(--link--color-dark-static--hover);
1370
+ --breadcrumb--color-dark-static--pressed: var(--link--color-dark-static--pressed);
1371
+ --breadcrumb--color-light-static--default: var(--link--color-light-static--default);
1372
+ --breadcrumb--color-light-static--hover: var(--link--color-light-static--hover);
1373
+ --breadcrumb--color-light-static--pressed: var(--link--color-light-static--pressed);
1374
+ --header-navigation--background-color--hover: var(--neutral-plain-background-color--hover);
1375
+ --header-navigation--background-color--pressed: var(--neutral-plain-background-color--pressed);
1376
+ --header-navigation--color-dark: var(--dark-plain-content-color);
1377
+ --header-navigation--background-color-dark--hover: var(--dark-plain-background-color--hover);
1378
+ --header-navigation--background-color-dark--pressed: var(--dark-plain-background-color--pressed);
1379
+ --header-navigation--color-light: var(--light-plain-content-color);
1380
+ --header-navigation--background-color-light--hover: var(--light-plain-background-color--hover);
1381
+ --header-navigation--background-color-light--pressed: var(--light-plain-background-color--pressed);
1382
+ --header-navigation--color-dark-static: var(--dark-static-plain-content-color);
1383
+ --header-navigation--background-color-dark-static--hover: var(--dark-static-plain-background-color--hover);
1384
+ --header-navigation--background-color-dark-static--pressed: var(--dark-static-plain-background-color--pressed);
1385
+ --header-navigation--color-light-static: var(--light-static-plain-content-color);
1386
+ --header-navigation--background-color-light-static--hover: var(--light-static-plain-background-color--hover);
1387
+ --header-navigation--background-color-light-static--pressed: var(--light-static-plain-background-color--pressed);
1195
1388
  --link--color--disabled: var(--disabled-plain-content-color);
1389
+ --link--color-dark--disabled: var(--disabled-plain-dark-content-color);
1390
+ --link--color-light--disabled: var(--disabled-plain-light-content-color);
1391
+ --link--color-dark-static--disabled: var(--disabled-plain-dark-static-content-color);
1392
+ --link--color-light-static--disabled: var(--disabled-plain-light-static-content-color);
1196
1393
  --tabs--background-color--default: var(--neutral-soft-background-color--default);
1197
1394
  --tabs--background-color--hover: var(--neutral-soft-background-color--hover);
1198
1395
  --tabs--background-color--pressed: var(--neutral-soft-background-color--pressed);
1199
- --tabs--color: var(--neutral-soft-content-color--default);
1396
+ --tabs--color: var(--neutral-soft-content-color);
1200
1397
  --tabs--disabled-color: var(--disabled-soft-content-color);
1201
- --modal--border-color: var(--neutral-outline-border-color);
1202
- --popover--border-color: var(--neutral-outline-border-color);
1203
- --tooltip--color: var(--text--color--light);
1398
+ --popover--box-shadow: var(--shadow--overlay);
1399
+ --tooltip--box-shadow: var(--shadow--overlay);
1204
1400
  --alert-badge--info-background-color: var(--info-soft-background-color--default);
1205
- --alert-badge--info-content-color: var(--info-soft-content-color--default);
1401
+ --alert-badge--info-content-color: var(--info-soft-content-color);
1206
1402
  --alert-badge--info-border-color: var(--info-outline-border-color);
1207
1403
  --alert-badge--success-background-color: var(--success-soft-background-color--default);
1208
- --alert-badge--success-content-color: var(--success-soft-content-color--default);
1404
+ --alert-badge--success-content-color: var(--success-soft-content-color);
1209
1405
  --alert-badge--success-border-color: var(--success-outline-border-color);
1210
1406
  --alert-badge--warning-background-color: var(--warning-soft-background-color--default);
1211
- --alert-badge--warning-content-color: var(--warning-soft-content-color--default);
1407
+ --alert-badge--warning-content-color: var(--warning-soft-content-color);
1212
1408
  --alert-badge--warning-border-color: var(--warning-outline-border-color);
1213
1409
  --alert-badge--danger-background-color: var(--danger-soft-background-color--default);
1214
- --alert-badge--danger-content-color: var(--danger-soft-content-color--default);
1410
+ --alert-badge--danger-content-color: var(--danger-soft-content-color);
1215
1411
  --alert-badge--danger-border-color: var(--danger-outline-border-color);
1412
+ --alert-badge--unavailable-background-color: var(--unavailable-soft-background-color--default);
1413
+ --alert-badge--unavailable-content-color: var(--unavailable-soft-content-color);
1414
+ --alert-badge--unavailable-border-color: var(--unavailable-outline-border-color);
1216
1415
  --alert--info-border-color: var(--info-outline-border-color);
1217
1416
  --alert--info-heading-color: var(--info-outline-content-color);
1218
1417
  --alert--warning-border-color: var(--warning-outline-border-color);
@@ -1221,24 +1420,41 @@
1221
1420
  --alert--danger-heading-color: var(--danger-outline-content-color);
1222
1421
  --alert--success-border-color: var(--success-outline-border-color);
1223
1422
  --alert--success-heading-color: var(--success-outline-content-color);
1224
- --badge--neutral-scope-content-color: var(--text--color--light);
1225
- --badge--blue-scope-content-color: var(--text--color--light);
1226
- --badge--navy-scope-content-color: var(--text--color--light);
1227
- --badge--violet-scope-content-color: var(--text--color--light);
1228
- --badge--teal-scope-content-color: var(--text--color--light);
1229
- --badge--lilac-scope-content-color: var(--text--color--light);
1230
- --badge--red-scope-content-color: var(--text--color--light);
1231
- --badge--green-scope-content-color: var(--text--color--light);
1232
- --badge--orange-scope-content-color: var(--text--color--light);
1233
- --badge--dark-scope-content-color: var(--text--color--light);
1234
- --badge--light-scope-content-color: var(--text--color--dark);
1423
+ --alert--unavailable-border-color: var(--unavailable-outline-border-color);
1424
+ --alert--unavailable-heading-color: var(--unavailable-outline-content-color);
1235
1425
  --badge--disabled-border-color: var(--disabled-outline-border-color);
1236
1426
  --badge--disabled-background-color: var(--disabled-outline-background-color);
1237
1427
  --badge--disabled-content-color: var(--disabled-outline-content-color);
1238
1428
  --badge--disabled-scope-background-color: var(--disabled-solid-background-color);
1239
1429
  --badge--disabled-scope-content-color: var(--disabled-solid-content-color);
1240
- --counter-badge--background-color: var(--success-solid-background-color--default);
1241
- --counter-badge--content-color: var(--success-solid-content-color);
1430
+ --badge--disabled-dark-border-color: var(--disabled-outline-dark-border-color);
1431
+ --badge--disabled-dark-background-color: var(--disabled-soft-dark-background-color);
1432
+ --badge--disabled-dark-content-color: var(--disabled-soft-dark-content-color);
1433
+ --badge--disabled-dark-scope-background-color: var(--disabled-solid-dark-background-color);
1434
+ --badge--disabled-dark-scope-content-color: var(--disabled-solid-dark-content-color);
1435
+ --badge--disabled-light-border-color: var(--disabled-outline-light-border-color);
1436
+ --badge--disabled-light-background-color: var(--disabled-soft-light-background-color);
1437
+ --badge--disabled-light-content-color: var(--disabled-soft-light-content-color);
1438
+ --badge--disabled-light-scope-background-color: var(--disabled-solid-light-background-color);
1439
+ --badge--disabled-light-scope-content-color: var(--disabled-solid-light-content-color);
1440
+ --badge--disabled-dark-static-border-color: var(--disabled-outline-dark-static-border-color);
1441
+ --badge--disabled-dark-static-background-color: var(--disabled-soft-dark-static-background-color);
1442
+ --badge--disabled-dark-static-content-color: var(--disabled-soft-dark-static-content-color);
1443
+ --badge--disabled-dark-static-scope-background-color: var(--disabled-solid-dark-static-background-color);
1444
+ --badge--disabled-dark-static-scope-content-color: var(--disabled-solid-dark-static-content-color);
1445
+ --badge--disabled-light-static-border-color: var(--disabled-outline-light-static-border-color);
1446
+ --badge--disabled-light-static-background-color: var(--disabled-soft-light-static-background-color);
1447
+ --badge--disabled-light-static-content-color: var(--disabled-soft-light-static-content-color);
1448
+ --badge--disabled-light-static-scope-background-color: var(--disabled-solid-light-static-background-color);
1449
+ --badge--disabled-light-static-scope-content-color: var(--disabled-solid-light-static-content-color);
1450
+ --counter-badge--background-color: var(--primary-solid-background-color--default);
1451
+ --counter-badge--content-color: var(--primary-solid-content-color);
1452
+ --loading-spinner--color: var(--icon--color);
1453
+ --loading-spinner--color-light: var(--light-plain-content-color);
1454
+ --loading-spinner--color-dark: var(--dark-plain-content-color);
1455
+ --loading-spinner--color-light-static: var(--light-static-plain-content-color);
1456
+ --loading-spinner--color-dark-static: var(--dark-static-plain-content-color);
1457
+ --notification--box-shadow: var(--shadow--overlay);
1242
1458
  --notification--info-border-color: var(--info-outline-border-color);
1243
1459
  --notification--info-heading-color: var(--info-outline-content-color);
1244
1460
  --notification--info-background-color--hover: var(--info-outline-background-color--hover);
@@ -1255,19 +1471,51 @@
1255
1471
  --notification--success-heading-color: var(--success-outline-content-color);
1256
1472
  --notification--success-background-color--hover: var(--success-outline-background-color--hover);
1257
1473
  --notification--success-background-color--pressed: var(--success-outline-background-color--pressed);
1474
+ --notification--unavailable-border-color: var(--unavailable-outline-border-color);
1475
+ --notification--unavailable-heading-color: var(--unavailable-outline-content-color);
1476
+ --notification--unavailable-background-color--hover: var(--unavailable-outline-background-color--hover);
1477
+ --notification--unavailable-background-color--pressed: var(--unavailable-outline-background-color--pressed);
1258
1478
  --progress-bar--border-color: var(--neutral-outline-border-color);
1259
1479
  --progress-bar--info-fill-background-color: var(--info-solid-background-color--default);
1260
1480
  --progress-bar--success-fill-background-color: var(--success-solid-background-color--default);
1261
1481
  --progress-bar--warning-fill-background-color: var(--warning-solid-background-color--default);
1262
1482
  --progress-bar--danger-fill-background-color: var(--danger-solid-background-color--default);
1483
+ --progress-bar--indeterminate-fill-background-color: var(--neutral-solid-background-color--default);
1263
1484
  --accordion--border-color: var(--neutral-outline-border-color);
1485
+ --accordion--background-color--hover: var(--neutral-outline-background-color--hover);
1486
+ --accordion--background-color--pressed: var(--neutral-outline-background-color--pressed);
1487
+ --layout-card--box-shadow: var(--shadow--content);
1488
+ --list-item--background-color--hover: var(--neutral-outline-background-color--hover);
1489
+ --list-item--background-color--pressed: var(--neutral-outline-background-color--pressed);
1264
1490
  --list-item--border-color: var(--neutral-outline-border-color);
1265
- --separator--color: var(--neutral-outline-border-color);
1266
1491
  --table--border-color: var(--neutral-outline-border-color);
1267
- --file-card--border-color: var(--neutral-outline-border-color);
1492
+ --file-card--border-color--default: var(--neutral-outline-border-color);
1493
+ --file-card--border-color--error: var(--danger-outline-border-color);
1268
1494
  --file-card--background-color--hover: var(--neutral-outline-background-color--hover);
1269
1495
  --file-card--background-color--pressed: var(--neutral-outline-background-color--pressed);
1496
+ --file-drop-zone--content-color--disabled: var(--disabled-outline-content-color);
1270
1497
  --file-drop-zone--background-color--default: var(--form-control--background-color--default);
1498
+ --file-drop-zone--background-color--disabled: var(--disabled-outline-background-color);
1499
+ --file-drop-zone--border-color--disabled: var(--disabled-outline-border-color);
1500
+ --image-cropper--border-color: var(--neutral-outline-border-color);
1501
+ --calendar--range-border-color: var(--form-control--border-color--default);
1502
+ --slider--track-color--disabled: var(--form-control--background-color--disabled);
1503
+ --slider--track-border-color--default: var(--form-control--border-color--default);
1504
+ --slider--track-border-color--disabled: var(--form-control--border-color--disabled);
1505
+ --tooltip--color: var(--text--color--light);
1506
+ --badge--neutral-scope-content-color: var(--text--color--light);
1507
+ --badge--blue-scope-content-color: var(--text--color--light);
1508
+ --badge--navy-scope-content-color: var(--text--color--light);
1509
+ --badge--violet-scope-content-color: var(--text--color--light);
1510
+ --badge--teal-scope-content-color: var(--text--color--light);
1511
+ --badge--lilac-scope-content-color: var(--text--color--light);
1512
+ --badge--red-scope-content-color: var(--text--color--light);
1513
+ --badge--green-scope-content-color: var(--text--color--light);
1514
+ --badge--orange-scope-content-color: var(--text--color--light);
1515
+ --badge--dark-scope-content-color: var(--text--color--light);
1516
+ --badge--light-scope-content-color: var(--text--color--dark);
1517
+ --badge--dark-static-scope-content-color: var(--text--color--light-static);
1518
+ --badge--light-static-scope-content-color: var(--text--color--dark-static);
1271
1519
  --file-drop-zone--background-color--target: var(--form-control--background-color--hover);
1272
1520
  --file-drop-zone--border-color--default: var(--form-control--border-color--default);
1273
1521
  }