@mittwald/flow-design-tokens 0.2.0-alpha.75 → 0.2.0-alpha.751

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 (3) hide show
  1. package/dist/variables.css +145 -111
  2. package/dist/variables.json +6299 -3009
  3. package/package.json +7 -7
package/dist/variables.css CHANGED
@@ -8,6 +8,7 @@
8
8
  --corner-radius--round: 50%;
9
9
  --border-style--default: solid;
10
10
  --border-style--dashed: dashed;
11
+ --message--tip-size-y: 12px;
11
12
  --dark--color--100: rgb(0 0 0 / 12.5%);
12
13
  --dark--color--200: rgb(0 0 0 / 25%);
13
14
  --dark--color--300: rgb(0 0 0 / 37.5%);
@@ -136,82 +137,19 @@
136
137
  --color--categorical--green: #008f5d;
137
138
  --color--categorical--lime: #bce931;
138
139
  --color--transparent: transparent;
140
+ --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%);
141
+ --color--code-syntax--keyword: #cf222e;
142
+ --color--code-syntax--type: #6f42c1;
143
+ --color--code-syntax--variable: #005cc5;
144
+ --color--code-syntax--property: #6f42c1;
145
+ --color--code-syntax--string: #032f62;
146
+ --color--code-syntax--number: #005cc5;
147
+ --color--code-syntax--comment: #6a737d;
148
+ --color--code-syntax--function: #8250df;
149
+ --color--code-syntax--operator: #C12F3F;
150
+ --color--code-syntax--invalid: #cb2431;
139
151
  --avatar--size--m: 2.5rem;
140
- --code--default-syntax-color-addition: #397300;
141
- --code--default-syntax-color-built-in: #397300;
142
- --code--default-syntax-color-bullet: #397300;
143
- --code--default-syntax-color-code: #397300;
144
- --code--default-syntax-color-comment: #666666;
145
- --code--default-syntax-color-deletion: #880000;
146
- --code--default-syntax-color-link: #a94747;
147
- --code--default-syntax-color-literal: #4c6d3b;
148
- --code--default-syntax-color-meta: #1e6e94;
149
- --code--default-syntax-color-meta-string: #326d8b;
150
- --code--default-syntax-color-number: #880000;
151
- --code--default-syntax-color-quote: #880000;
152
- --code--default-syntax-color-regexp: #a94747;
153
- --code--default-syntax-color-section: #880000;
154
- --code--default-syntax-color-selector-attr: #a94747;
155
- --code--default-syntax-color-selector-class: #880000;
156
- --code--default-syntax-color-selector-id: #880000;
157
- --code--default-syntax-color-selector-pseudo: #a94747;
158
- --code--default-syntax-color-string: #880000;
159
- --code--default-syntax-color-symbol: #a94747;
160
- --code--default-syntax-color-template-tag: #880000;
161
- --code--default-syntax-color-template-variable: #a94747;
162
- --code--default-syntax-color-title: #880000;
163
- --code--default-syntax-color-type: #880000;
164
- --code--default-syntax-color-variable: #a94747;
165
- --code--light-syntax-color-addition: #68d100;
166
- --code--light-syntax-color-built-in: #68d100;
167
- --code--light-syntax-color-bullet: #68d100;
168
- --code--light-syntax-color-code: #68d100;
169
- --code--light-syntax-color-comment: #b8b8b8;
170
- --code--light-syntax-color-deletion: #ff9e9e;
171
- --code--light-syntax-color-link: #dcacac;
172
- --code--light-syntax-color-literal: #9fc28e;
173
- --code--light-syntax-color-meta: #77c0e4;
174
- --code--light-syntax-color-meta-string: #8ebfd7;
175
- --code--light-syntax-color-number: #ff9e9e;
176
- --code--light-syntax-color-pseudo: #dcacac;
177
- --code--light-syntax-color-quote: #ff9e9e;
178
- --code--light-syntax-color-regexp: #dcacac;
179
- --code--light-syntax-color-section: #ff9e9e;
180
- --code--light-syntax-color-selector-attr: #dcacac;
181
- --code--light-syntax-color-selector-class: #ff9e9e;
182
- --code--light-syntax-color-selector-id: #ff9e9e;
183
- --code--light-syntax-color-string: #ff9e9e;
184
- --code--light-syntax-color-symbol: #dcacac;
185
- --code--light-syntax-color-template-tag: #ff9e9e;
186
- --code--light-syntax-color-template-variable: #dcacac;
187
- --code--light-syntax-color-title: #ff9e9e;
188
- --code--light-syntax-color-type: #ff9e9e;
189
- --code--light-syntax-color-variable: #dcacac;
190
- --code--dark-syntax-color-addition: #306100;
191
- --code--dark-syntax-color-built-in: #306100;
192
- --code--dark-syntax-color-bullet: #306100;
193
- --code--dark-syntax-color-code: #306100;
194
- --code--dark-syntax-color-comment: #575757;
195
- --code--dark-syntax-color-deletion: #880000;
196
- --code--dark-syntax-color-link: #8c3b3b;
197
- --code--dark-syntax-color-literal: #405d32;
198
- --code--dark-syntax-color-meta: #195b7b;
199
- --code--dark-syntax-color-meta-string: #2a5b74;
200
- --code--dark-syntax-color-number: #880000;
201
- --code--dark-syntax-color-pseudo: #8c3b3b;
202
- --code--dark-syntax-color-quote: #880000;
203
- --code--dark-syntax-color-regexp: #8c3b3b;
204
- --code--dark-syntax-color-section: #880000;
205
- --code--dark-syntax-color-selector-attr: #8c3b3b;
206
- --code--dark-syntax-color-selector-class: #880000;
207
- --code--dark-syntax-color-selector-id: #880000;
208
- --code--dark-syntax-color-string: #880000;
209
- --code--dark-syntax-color-symbol: #8c3b3b;
210
- --code--dark-syntax-color-template-tag: #880000;
211
- --code--dark-syntax-color-template-variable: #8c3b3b;
212
- --code--dark-syntax-color-title: #880000;
213
- --code--dark-syntax-color-type: #880000;
214
- --code--dark-syntax-color-variable: #8c3b3b;
152
+ --code-block--font-family: FiraCode, monospace;
215
153
  --icon--size--s: 1rem;
216
154
  --icon--size--m: 1.5rem;
217
155
  --icon--size--l: 4rem;
@@ -227,6 +165,7 @@
227
165
  --font-size-heading--l: 1.5rem;
228
166
  --font-size-heading--xl: 2rem;
229
167
  --font-size-heading--xxl: 2.625rem;
168
+ --code-editor--font-family: FiraCode, monospace;
230
169
  --calendar--cell-size: 2.25rem;
231
170
  --switch--track-height: 1.5rem;
232
171
  --switch--track-width: 2.75rem;
@@ -235,6 +174,7 @@
235
174
  --contextual-help--max-width: 500px;
236
175
  --modal--size--s: 660px;
237
176
  --modal--size--m: 900px;
177
+ --modal--size--l: 1300px;
238
178
  --modal--content-min-height: 120px;
239
179
  --popover--min-width: 200px;
240
180
  --tooltip--max-width: 300px;
@@ -258,10 +198,14 @@
258
198
  --counter-badge--height: 1.25rem;
259
199
  --counter-badge--height-empty: 0.75rem;
260
200
  --loading-spinner--transition-duration: 2000ms;
201
+ --loading-spinner--transition-duration-slow: 6000ms;
261
202
  --notification--width: 355px;
262
- --progress-bar--height-s: 0.375rem;
263
- --transition--duration--default: 200ms;
264
- --transition--duration--slow: 300ms;
203
+ --accent-box--background-color-green: #D8F5D6;
204
+ --accent-box--icon-color-green: #c4e3c1;
205
+ --accent-box--icon-color-gradient: #002b7b14;
206
+ --transition--duration--fast: 200ms;
207
+ --transition--duration--default: 300ms;
208
+ --transition--duration--slow: 400ms;
265
209
  --action-group--spacing--m: var(--size-px--m);
266
210
  --action-group--spacing--s: var(--size-px--s);
267
211
  --button--padding-x: var(--size-px--m);
@@ -288,7 +232,7 @@
288
232
  --border-width--200: var(--size-px--xxs);
289
233
  --border-width--300: var(--size-px--xs);
290
234
  --border-width--400: var(--size-px--s);
291
- --chat--spacing: var(--size-px--m);
235
+ --chat--spacing: var(--size-px--s);
292
236
  --message-separator--font-size: var(--font-size-text--s);
293
237
  --message-separator--padding: var(--size-px--m);
294
238
  --message-thread--spacing: var(--size-rem--l);
@@ -299,6 +243,7 @@
299
243
  --message--spacing-x: var(--size-rem--m);
300
244
  --message--background-color-responder: var(--color--gray--400);
301
245
  --message--background-color-sender: var(--color--hosting-blue--200);
246
+ --message--tip-size-x: var(--size-px--s);
302
247
  --primary--color--100: var(--color--hosting-blue--100);
303
248
  --primary--color--200: var(--color--hosting-blue--200);
304
249
  --primary--color--300: var(--color--hosting-blue--300);
@@ -428,14 +373,15 @@
428
373
  --light-outline-background-color--pressed: var(--light--color--200);
429
374
  --light-outline-border-color: var(--light--color--800);
430
375
  --light-outline-content-color: var(--light--color--800);
376
+ --color--violet: var(--color--soft-contrast-violet--800);
377
+ --color--teal: var(--color--super-teal--800);
378
+ --color--lilac: var(--color--bright-lilac--800);
431
379
  --avatar--size--xs: var(--size-rem--l);
432
380
  --avatar--size--s: var(--size-rem--xl);
433
381
  --avatar--size--l: var(--size-rem--xxl);
434
- --code--font-size: var(--font-size-text--s);
435
- --code--padding-x: var(--size-px--xs);
436
- --code--padding-y: var(--size-px--xxs);
437
- --code--padding: var(--size-px--m);
438
- --code--spacing: var(--size-px--m);
382
+ --code-block--font-size: var(--font-size-text--s);
383
+ --code-block--padding: var(--size-px--m);
384
+ --code-block--border-style: var(--border-style--default);
439
385
  --decorative--blue-background-color: var(--color--hosting-blue--200);
440
386
  --decorative--blue-content-accent-color: var(--color--hosting-blue--800);
441
387
  --decorative--blue-content-color: var(--color--hosting-blue--1000);
@@ -460,6 +406,14 @@
460
406
  --illustrated-message--spacing: var(--size-rem--m);
461
407
  --image--border-style: var(--border-style--default);
462
408
  --initials--font-weight: var(--font-weight--bold);
409
+ --inline-code--font-size: var(--font-size-text--s);
410
+ --inline-code--padding-x: var(--size-px--xs);
411
+ --inline-code--padding-y: var(--size-px--xxs);
412
+ --kbd--padding: var(--size-px--xs);
413
+ --kbd--padding-y-start: var(--size-px--xxs);
414
+ --kbd--inner-shadow-color--default: var(--dark--color--200);
415
+ --kbd--inner-shadow-size-x: var(--size-px--xxs);
416
+ --kbd--inner-shadow-size-y-end: var(--size-px--xs);
463
417
  --label--font-size: var(--font-size-text--s);
464
418
  --label--font-weight: var(--font-weight--bold);
465
419
  --label--spacing: var(--size-rem--xs);
@@ -469,10 +423,30 @@
469
423
  --text--blockquote-border-style: var(--border-style--default);
470
424
  --text--blockquote-padding: var(--size-rem--s);
471
425
  --text--list-padding: var(--size-rem--l);
426
+ --axis--spacing: var(--size-px--s);
427
+ --axis--font-size: var(--font-size-text--s);
428
+ --axis--color: var(--color--gray--700);
429
+ --axis--tick-size: var(--size-px--s);
430
+ --big-number--spacing: var(--size-rem--xs);
431
+ --big-number--top-font-size: var(--font-size-heading--xl);
432
+ --big-number--bottom-font-size: var(--font-size-text--m);
433
+ --big-number--font-weight: var(--font-weight--bold);
434
+ --cartesian-grid--color: var(--color--gray--700);
435
+ --chart-tooltip--spacing: var(--size-px--s);
436
+ --donut-chart--spacing-y: var(--size-rem--s);
437
+ --donut-chart--spacing-x: var(--size-rem--m);
438
+ --donut-chart--padding--m: var(--size-px--l);
439
+ --donut-chart--padding--l: var(--size-px--xl);
440
+ --legend--spacing-x: var(--size-px--m);
441
+ --legend--spacing-y: var(--size-px--s);
442
+ --legend-item--spacing: var(--size-rem--s);
443
+ --legend-item--marker--size: var(--size-rem--m);
472
444
  --focus--outline-offset: var(--size-px--xxs);
473
445
  --line-height--m: calc(var(--font-size-text--m) * 1.5);
474
446
  --line-height--s: calc(var(--font-size-text--s) * 1.5);
475
447
  --font-size-text--default: var(--font-size-text--m);
448
+ --code-editor--font-size: var(--font-size-text--s);
449
+ --code-editor--gutter-element-min-width: var(--size-rem--l);
476
450
  --date-picker--date-segment-corner-radius: var(--size-px--xs);
477
451
  --calendar--spacing: var(--size-rem--xs);
478
452
  --calendar--cell-corner-radius: var(--corner-radius--round);
@@ -480,7 +454,6 @@
480
454
  --calendar--header-cell-font-weight: var(--font-weight--bold);
481
455
  --field-description--font-size: var(--font-size-text--s);
482
456
  --field-error--font-size: var(--font-size-text--s);
483
- --field-error--spacing: var(--size-rem--xs);
484
457
  --form-control--label-to-control-spacing: var(--size-rem--xxs);
485
458
  --form-control--control-to-info-spacing: var(--size-rem--xs);
486
459
  --form-control--spacing-x: var(--size-rem--s);
@@ -488,6 +461,8 @@
488
461
  --form-control--padding-x: var(--size-px--m);
489
462
  --form-control--padding-y: var(--size-px--s);
490
463
  --form-control--border-style: var(--border-style--default);
464
+ --rating--spacing--s: var(--size-rem--xxs);
465
+ --rating--spacing--m: var(--size-rem--xs);
491
466
  --segmented-button--text-to-text-spacing: var(--size-rem--xs);
492
467
  --slider--spacing-x: var(--size-rem--s);
493
468
  --slider--spacing-y: var(--size-rem--m);
@@ -513,6 +488,7 @@
513
488
  --header-navigation--corner-radius-round: var(--corner-radius--round);
514
489
  --header-navigation--font-weight-current: var(--font-weight--bold);
515
490
  --link--icon-height: calc(var(--font-size-text--m) * 1.25);
491
+ --link--icon-height-s: calc(var(--font-size-text--s) * 1.25);
516
492
  --link--font-weight: var(--font-weight--bold);
517
493
  --link--spacing: var(--size-rem--xs);
518
494
  --link--color-dark--default: var(--dark--color--800);
@@ -529,6 +505,7 @@
529
505
  --light-box--max-height: calc(100dvh - var(--size-px--l));
530
506
  --light-box--spacing: var(--size-px--m);
531
507
  --modal--padding: var(--size-px--l);
508
+ --modal--padding-mobile: var(--size-px--m);
532
509
  --modal--border-style: var(--border-style--default);
533
510
  --modal--header-padding-y: var(--size-px--s);
534
511
  --modal--off-canvas-max-width: calc(100dvw - var(--size-px--m));
@@ -547,6 +524,7 @@
547
524
  --tooltip--tip-size: var(--size-px--s);
548
525
  --shadow--content: rgba(0, 0, 0, 0.1) 0 var(--size-px--xs) var(--size-px--s);
549
526
  --shadow--overlay: rgba(0, 0, 0, 0.14) 0 var(--size-px--m) var(--size-px--l);
527
+ --alert-text--spacing: var(--size-rem--xs);
550
528
  --alert--padding: var(--size-px--m);
551
529
  --alert--border-style: var(--border-style--default);
552
530
  --alert--heading-to-content-spacing: var(--size-rem--s);
@@ -647,22 +625,29 @@
647
625
  --notification--heading-to-text-spacing: var(--size-rem--xs);
648
626
  --notification--spacing: var(--size-rem--s);
649
627
  --notification--font-size: var(--font-size-text--s);
628
+ --password-creation-field--rule-to-rule-spacing: var(--size-px--s);
650
629
  --progress-bar--font-size: var(--font-size-text--m);
651
630
  --progress-bar--font-size-s: var(--font-size-text--s);
652
631
  --progress-bar--value-font-weight: var(--font-weight--bold);
653
632
  --progress-bar--spacing-y: var(--size-rem--xs);
654
633
  --progress-bar--spacing-x: var(--size-rem--m);
655
- --progress-bar--height: var(--size-rem--s);
634
+ --progress-bar--spacing-bar-to-legend: var(--size-px--m);
635
+ --progress-bar--height--m: var(--size-rem--m);
636
+ --progress-bar--height--s: var(--size-rem--s);
637
+ --progress-bar--height--l: var(--size-rem--l);
656
638
  --progress-bar--corner-radius: var(--size-rem--xs);
639
+ --accent-box--background-color-gradient: var(--color--gradient);
640
+ --accent-box--background-color-blue: var(--color--hosting-blue--100);
641
+ --accent-box--icon-color-blue: var(--color--hosting-blue--200);
642
+ --accent-box--padding: var(--size-px--m);
657
643
  --accordion--spacing: var(--size-rem--s);
658
644
  --accordion--border-style: var(--border-style--default);
659
645
  --accordion--padding-x: var(--size-px--s);
660
646
  --accordion--padding-y: var(--size-px--xs);
661
647
  --align--avatar-text--spacing: var(--size-rem--s);
662
648
  --align--input-button--spacing: var(--size-px--m);
663
- --align--text-copyButton--spacing: var(--size-rem--xs);
649
+ --align--text-button--spacing: var(--size-rem--xs);
664
650
  --align--icon-text--spacing: var(--size-rem--s);
665
- --align--text-contextualHelp--spacing: var(--size-rem--xs);
666
651
  --column-layout--gap--s: var(--size-px--s);
667
652
  --column-layout--gap--m: var(--size-px--m);
668
653
  --column-layout--gap--l: var(--size-px--l);
@@ -671,6 +656,7 @@
671
656
  --layout-card--padding-mobile: var(--size-px--m);
672
657
  --list--spacing: var(--size-px--s);
673
658
  --list--block-to-block-spacing: var(--size-px--m);
659
+ --list--filter-to-search-spacing: var(--size-px--xl);
674
660
  --list-item--padding: var(--size-px--s);
675
661
  --list-item--border-style: var(--border-style--default);
676
662
  --list-item--spacing: var(--size-px--m);
@@ -682,6 +668,7 @@
682
668
  --section--sub-heading-spacing-s: var(--size-rem--s);
683
669
  --section-header--action-to-action-spacing: var(--size-rem--s);
684
670
  --section-header--heading-to-action-spacing: var(--size-rem--m);
671
+ --separator--border-style: var(--border-style--default);
685
672
  --table--border-style: var(--border-style--default);
686
673
  --table--padding-x: var(--size-px--m);
687
674
  --table--padding-y: var(--size-px--s);
@@ -863,9 +850,9 @@
863
850
  --warning-soft-background-color--pressed: var(--warning--color--300);
864
851
  --warning-soft-content-color--default: var(--warning--color--900);
865
852
  --warning-soft-content-color--pressed: var(--warning--color--1000);
866
- --warning-plain-background-color--hover: var(--info--color--100);
867
- --warning-plain-background-color--pressed: var(--info--color--200);
868
- --warning-plain-content-color: var(--info--color--800);
853
+ --warning-plain-background-color--hover: var(--warning--color--100);
854
+ --warning-plain-background-color--pressed: var(--warning--color--200);
855
+ --warning-plain-content-color: var(--warning--color--800);
869
856
  --neutral-solid-background-color--default: var(--neutral--color--800);
870
857
  --neutral-solid-background-color--hover: var(--neutral--color--900);
871
858
  --neutral-solid-background-color--pressed: var(--neutral--color--1000);
@@ -891,30 +878,50 @@
891
878
  --disabled-outline-border-color: var(--neutral--color--400);
892
879
  --disabled-soft-background-color: var(--neutral--color--300);
893
880
  --disabled-soft-content-color: var(--neutral--color--500);
881
+ --color--blue: var(--primary--color--1000);
894
882
  --avatar-stack--border-width: var(--border-width--200);
895
- --code--line-height: var(--line-height--m);
896
- --code--corner-radius: var(--corner-radius--default);
897
- --code--light-background-color: var(--light-soft-background-color--default);
898
- --code--light-content-color: var(--light-soft-content-color);
899
- --code--dark-background-color: var(--dark-soft-background-color--default);
900
- --code--dark-content-color: var(--dark-soft-content-color);
883
+ --avatar--info-status-background-color: var(--info--color--200);
884
+ --avatar--warning-status-background-color: var(--warning--color--200);
885
+ --avatar--danger-status-background-color: var(--danger--color--200);
886
+ --avatar--success-status-background-color: var(--success--color--200);
887
+ --code-block--corner-radius: var(--corner-radius--default);
888
+ --code-block--border-width: var(--border-width--100);
889
+ --code-block--background-color: var(--neutral--color--200);
901
890
  --heading--color: var(--primary--color--1000);
902
891
  --heading--color-dark: var(--dark-plain-content-color);
903
892
  --heading--color-light: var(--light-plain-content-color);
893
+ --heading--color-danger: var(--danger--color--900);
894
+ --heading--color-unavailable: var(--neutral--color--900);
904
895
  --icon--color: var(--neutral--color--800);
905
- --illustrated-message--primary-icon-color: var(--primary--color--900);
906
- --illustrated-message--danger-icon-color: var(--danger--color--900);
907
- --illustrated-message--danger-heading-color: var(--danger--color--1000);
908
- --illustrated-message--dark-icon-color: var(--dark-plain-content-color);
909
- --illustrated-message--light-icon-color: var(--light-plain-content-color);
896
+ --icon--unavailable-color: var(--neutral--color--900);
897
+ --illustrated-message--primary-content-color: var(--primary--color--1000);
898
+ --illustrated-message--danger-content-color: var(--danger--color--900);
899
+ --illustrated-message--unavailable-content-color: var(--neutral--color--900);
900
+ --illustrated-message--dark-content-color: var(--dark-plain-content-color);
901
+ --illustrated-message--light-content-color: var(--light-plain-content-color);
910
902
  --image--corner-radius: var(--corner-radius--default);
911
903
  --image--border-width: var(--border-width--100);
904
+ --inline-code--corner-radius: var(--corner-radius--default);
905
+ --inline-code--light-background-color: var(--light-soft-background-color--default);
906
+ --inline-code--light-content-color: var(--light-soft-content-color);
907
+ --inline-code--dark-background-color: var(--dark-soft-background-color--default);
908
+ --inline-code--dark-content-color: var(--dark-soft-content-color);
909
+ --kbd--corner-radius: var(--corner-radius--default);
910
+ --kbd--inner-shadow-color--disabled: var(--disabled-soft-dark-background-color);
912
911
  --label--line-height: var(--line-height--m);
913
912
  --label--color--default: var(--neutral--color--800);
914
913
  --text--color--default: var(--neutral--color--1000);
915
914
  --text--color--light: var(--light-plain-content-color);
916
915
  --text--color--dark: var(--dark-plain-content-color);
917
916
  --text--blockquote-border-width: var(--border-width--300);
917
+ --area--border-width: var(--border-width--200);
918
+ --area--border-color: var(--neutral--color--100);
919
+ --axis--text-color: var(--neutral--color--1000);
920
+ --axis--stroke-width: var(--border-width--100);
921
+ --cartesian-grid--stroke-width: var(--border-width--100);
922
+ --donut-chart--background-color: var(--neutral--color--300);
923
+ --legend-item--marker--corner-radius: var(--corner-radius--default);
924
+ --line--border-width: var(--border-width--200);
918
925
  --focus--outline-color: var(--primary--color--800);
919
926
  --focus--secondary-outline-color: var(--neutral--color--100);
920
927
  --focus--outline-width: var(--border-width--200);
@@ -924,7 +931,6 @@
924
931
  --calendar--cell-background-color--hover: var(--dark-plain-background-color--hover);
925
932
  --calendar--cell-background-color--pressed: var(--dark-plain-background-color--pressed);
926
933
  --calendar--cell-range-background-color: var(--primary--color--100);
927
- --field-error--color: var(--danger--color--800);
928
934
  --form-control--corner-radius: var(--corner-radius--default);
929
935
  --form-control--border-width: var(--border-width--100);
930
936
  --form-control--placeholder-color--default: var(--neutral--color--900);
@@ -934,6 +940,8 @@
934
940
  --form-control--background-color--focused: var(--neutral--color--300);
935
941
  --form-control--background-color--invalid: var(--danger--color--100);
936
942
  --form-control--background-color--selected: var(--primary--color--200);
943
+ --rating--star-color: var(--neutral--color--700);
944
+ --rating--star-filled-color: var(--primary--color--1000);
937
945
  --slider--color--default: var(--primary--color--1000);
938
946
  --slider--color--disabled: var(--neutral--color--600);
939
947
  --slider--track-color--default: var(--neutral--color--700);
@@ -956,7 +964,6 @@
956
964
  --header-navigation--background-color-light--hover: var(--light-plain-background-color--hover);
957
965
  --header-navigation--background-color-light--pressed: var(--light-plain-background-color--pressed);
958
966
  --header-navigation--underline-width-current: var(--border-width--200);
959
- --link--line-height: var(--line-height--m);
960
967
  --link--color--default: var(--primary--color--800);
961
968
  --link--color--hover: var(--primary--color--900);
962
969
  --link--color--pressed: var(--primary--color--1000);
@@ -974,6 +981,7 @@
974
981
  --tooltip--background-color: var(--neutral--color--900);
975
982
  --tooltip--box-shadow: var(--shadow--overlay);
976
983
  --tooltip--header-corner-radius: var(--corner-radius--default);
984
+ --alert-text--unavailable-color: var(--neutral--color--900);
977
985
  --alert--corner-radius: var(--corner-radius--default);
978
986
  --alert--border-width: var(--border-width--100);
979
987
  --alert--border-x-start-width: var(--border-width--400);
@@ -990,6 +998,8 @@
990
998
  --badge--disabled-light-scope-content-color: var(--disabled-solid-light-content-color);
991
999
  --counter-badge--border-width: var(--border-width--200);
992
1000
  --counter-badge--border-color: var(--neutral--color--100);
1001
+ --loading-spinner--color-light: var(--light-plain-content-color);
1002
+ --loading-spinner--color-dark: var(--dark-plain-content-color);
993
1003
  --notification--corner-radius: var(--corner-radius--default);
994
1004
  --notification--border-x-start-width: var(--border-width--300);
995
1005
  --notification--box-shadow: var(--shadow--overlay);
@@ -998,7 +1008,10 @@
998
1008
  --notification--danger-background-color--default: var(--neutral--color--100);
999
1009
  --notification--success-background-color--default: var(--neutral--color--100);
1000
1010
  --progress-bar--border-width: var(--border-width--100);
1001
- --progress-bar--background-color: var(--neutral-outline-background-color--default);
1011
+ --progress-bar--background-color: var(--neutral--color--300);
1012
+ --accent-box--background-color-neutral: var(--neutral--color--300);
1013
+ --accent-box--icon-color-neutral: var(--neutral--color--400);
1014
+ --accent-box--corner-radius: var(--corner-radius--default);
1002
1015
  --accordion--corner-radius: var(--corner-radius--default);
1003
1016
  --accordion--border-width: var(--border-width--100);
1004
1017
  --accordion--background-color--hover: var(--primary--color--100);
@@ -1021,6 +1034,7 @@
1021
1034
  --file-card--corner-radius: var(--corner-radius--default);
1022
1035
  --file-card--border-width: var(--border-width--100);
1023
1036
  --file-card--background-color--default: var(--neutral--color--100);
1037
+ --file-card--background-color--error: var(--danger--color--100);
1024
1038
  --file-drop-zone--corner-radius: var(--corner-radius--default);
1025
1039
  --file-drop-zone--border-width: var(--border-width--100);
1026
1040
  --file-drop-zone--border-color--target: var(--primary--color--800);
@@ -1152,19 +1166,28 @@
1152
1166
  --menu-item--background-color--hover: var(--primary-plain-background-color--hover);
1153
1167
  --menu-item--background-color--current: var(--primary-plain-background-color--pressed);
1154
1168
  --menu-item--disabled-color: var(--disabled-plain-content-color);
1155
- --code--default-background-color: var(--neutral-soft-background-color--default);
1156
- --code--default-content-color: var(--neutral-soft-content-color--default);
1169
+ --code-block--content-color: var(--neutral-soft-content-color--default);
1157
1170
  --icon--info-color: var(--info-outline-content-color);
1158
1171
  --icon--warning-color: var(--warning-outline-content-color);
1159
1172
  --icon--danger-color: var(--danger-outline-content-color);
1160
1173
  --icon--success-color: var(--success-outline-content-color);
1161
- --illustrated-message--primary-heading-color: var(--heading--color);
1162
- --illustrated-message--dark-heading-color: var(--heading--color-dark);
1163
- --illustrated-message--light-heading-color: var(--heading--color-light);
1164
1174
  --image--border-color: var(--neutral-outline-border-color);
1175
+ --inline-code--default-background-color: var(--neutral-soft-background-color--default);
1176
+ --inline-code--default-content-color: var(--neutral-soft-content-color--default);
1177
+ --kbd--background-color--default: var(--neutral-soft-background-color--default);
1178
+ --kbd--background-color--disabled: var(--disabled-soft-background-color);
1179
+ --kbd--content-color--default: var(--neutral-soft-content-color--default);
1180
+ --kbd--content-color--disabled: var(--disabled-soft-content-color);
1181
+ --kbd--content-color-plain--default: var(--form-control--placeholder-color--default);
1182
+ --kbd--content-color-plain--disabled: var(--form-control--placeholder-color--disabled);
1165
1183
  --label--color--disabled: var(--disabled-plain-content-color);
1166
1184
  --text--color--disabled: var(--disabled-plain-content-color);
1167
1185
  --text--blockquote-border-color: var(--info-outline-border-color);
1186
+ --donut-chart--border-color: var(--neutral-outline-border-color);
1187
+ --donut-chart--info-fill-background-color: var(--info-solid-background-color--default);
1188
+ --donut-chart--success-fill-background-color: var(--success-solid-background-color--default);
1189
+ --donut-chart--warning-fill-background-color: var(--warning-solid-background-color--default);
1190
+ --donut-chart--danger-fill-background-color: var(--danger-solid-background-color--default);
1168
1191
  --choice--icon-color--default: var(--icon--color);
1169
1192
  --choice--icon-color--disabled: var(--disabled-outline-content-color);
1170
1193
  --date-picker--date-segment-background-color--focused: var(--primary-plain-background-color--pressed);
@@ -1208,6 +1231,10 @@
1208
1231
  --alert-badge--danger-background-color: var(--danger-soft-background-color--default);
1209
1232
  --alert-badge--danger-content-color: var(--danger-soft-content-color--default);
1210
1233
  --alert-badge--danger-border-color: var(--danger-outline-border-color);
1234
+ --alert-text--info-color: var(--info-outline-content-color);
1235
+ --alert-text--warning-color: var(--warning-outline-content-color);
1236
+ --alert-text--danger-color: var(--danger-outline-content-color);
1237
+ --alert-text--success-color: var(--success-outline-content-color);
1211
1238
  --alert--info-border-color: var(--info-outline-border-color);
1212
1239
  --alert--info-heading-color: var(--info-outline-content-color);
1213
1240
  --alert--warning-border-color: var(--warning-outline-border-color);
@@ -1234,6 +1261,7 @@
1234
1261
  --badge--disabled-scope-content-color: var(--disabled-solid-content-color);
1235
1262
  --counter-badge--background-color: var(--success-solid-background-color--default);
1236
1263
  --counter-badge--content-color: var(--success-solid-content-color);
1264
+ --loading-spinner--color: var(--icon--color);
1237
1265
  --notification--info-border-color: var(--info-outline-border-color);
1238
1266
  --notification--info-heading-color: var(--info-outline-content-color);
1239
1267
  --notification--info-background-color--hover: var(--info-outline-background-color--hover);
@@ -1255,14 +1283,20 @@
1255
1283
  --progress-bar--success-fill-background-color: var(--success-solid-background-color--default);
1256
1284
  --progress-bar--warning-fill-background-color: var(--warning-solid-background-color--default);
1257
1285
  --progress-bar--danger-fill-background-color: var(--danger-solid-background-color--default);
1286
+ --progress-bar--indeterminate-fill-background-color: var(--neutral-solid-background-color--default);
1258
1287
  --accordion--border-color: var(--neutral-outline-border-color);
1259
1288
  --list-item--border-color: var(--neutral-outline-border-color);
1260
1289
  --separator--color: var(--neutral-outline-border-color);
1261
1290
  --table--border-color: var(--neutral-outline-border-color);
1262
- --file-card--border-color: var(--neutral-outline-border-color);
1291
+ --file-card--border-color--default: var(--neutral-outline-border-color);
1292
+ --file-card--border-color--error: var(--danger-outline-border-color);
1263
1293
  --file-card--background-color--hover: var(--neutral-outline-background-color--hover);
1264
1294
  --file-card--background-color--pressed: var(--neutral-outline-background-color--pressed);
1295
+ --file-drop-zone--content-color--disabled: var(--disabled-outline-content-color);
1265
1296
  --file-drop-zone--background-color--default: var(--form-control--background-color--default);
1266
1297
  --file-drop-zone--background-color--target: var(--form-control--background-color--hover);
1298
+ --file-drop-zone--background-color--disabled: var(--disabled-outline-background-color);
1299
+ --file-drop-zone--border-color--disabled: var(--disabled-outline-border-color);
1300
+ --code-block--border-color: var(--separator--color);
1267
1301
  --file-drop-zone--border-color--default: var(--form-control--border-color--default);
1268
1302
  }