@mittwald/flow-design-tokens 0.2.0-alpha.73 → 0.2.0-alpha.731

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 +142 -111
  2. package/dist/variables.json +6251 -3020
  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,18 @@
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;
215
152
  --icon--size--s: 1rem;
216
153
  --icon--size--m: 1.5rem;
217
154
  --icon--size--l: 4rem;
@@ -235,6 +172,7 @@
235
172
  --contextual-help--max-width: 500px;
236
173
  --modal--size--s: 660px;
237
174
  --modal--size--m: 900px;
175
+ --modal--size--l: 1300px;
238
176
  --modal--content-min-height: 120px;
239
177
  --popover--min-width: 200px;
240
178
  --tooltip--max-width: 300px;
@@ -258,10 +196,14 @@
258
196
  --counter-badge--height: 1.25rem;
259
197
  --counter-badge--height-empty: 0.75rem;
260
198
  --loading-spinner--transition-duration: 2000ms;
199
+ --loading-spinner--transition-duration-slow: 6000ms;
261
200
  --notification--width: 355px;
262
- --progress-bar--height-s: 0.375rem;
263
- --transition--duration--default: 200ms;
264
- --transition--duration--slow: 300ms;
201
+ --accent-box--background-color-green: #D8F5D6;
202
+ --accent-box--icon-color-green: #c4e3c1;
203
+ --accent-box--icon-color-gradient: #002b7b14;
204
+ --transition--duration--fast: 200ms;
205
+ --transition--duration--default: 300ms;
206
+ --transition--duration--slow: 400ms;
265
207
  --action-group--spacing--m: var(--size-px--m);
266
208
  --action-group--spacing--s: var(--size-px--s);
267
209
  --button--padding-x: var(--size-px--m);
@@ -288,7 +230,7 @@
288
230
  --border-width--200: var(--size-px--xxs);
289
231
  --border-width--300: var(--size-px--xs);
290
232
  --border-width--400: var(--size-px--s);
291
- --chat--spacing: var(--size-px--m);
233
+ --chat--spacing: var(--size-px--s);
292
234
  --message-separator--font-size: var(--font-size-text--s);
293
235
  --message-separator--padding: var(--size-px--m);
294
236
  --message-thread--spacing: var(--size-rem--l);
@@ -299,6 +241,7 @@
299
241
  --message--spacing-x: var(--size-rem--m);
300
242
  --message--background-color-responder: var(--color--gray--400);
301
243
  --message--background-color-sender: var(--color--hosting-blue--200);
244
+ --message--tip-size-x: var(--size-px--s);
302
245
  --primary--color--100: var(--color--hosting-blue--100);
303
246
  --primary--color--200: var(--color--hosting-blue--200);
304
247
  --primary--color--300: var(--color--hosting-blue--300);
@@ -428,14 +371,16 @@
428
371
  --light-outline-background-color--pressed: var(--light--color--200);
429
372
  --light-outline-border-color: var(--light--color--800);
430
373
  --light-outline-content-color: var(--light--color--800);
374
+ --color--violet: var(--color--soft-contrast-violet--800);
375
+ --color--teal: var(--color--super-teal--800);
376
+ --color--lilac: var(--color--bright-lilac--800);
431
377
  --avatar--size--xs: var(--size-rem--l);
432
378
  --avatar--size--s: var(--size-rem--xl);
433
379
  --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);
380
+ --code-block--font-size: var(--font-size-text--s);
381
+ --code-block--padding: var(--size-px--m);
382
+ --code-block--spacing: var(--size-px--s);
383
+ --code-block--border-style: var(--border-style--default);
439
384
  --decorative--blue-background-color: var(--color--hosting-blue--200);
440
385
  --decorative--blue-content-accent-color: var(--color--hosting-blue--800);
441
386
  --decorative--blue-content-color: var(--color--hosting-blue--1000);
@@ -460,6 +405,14 @@
460
405
  --illustrated-message--spacing: var(--size-rem--m);
461
406
  --image--border-style: var(--border-style--default);
462
407
  --initials--font-weight: var(--font-weight--bold);
408
+ --inline-code--font-size: var(--font-size-text--s);
409
+ --inline-code--padding-x: var(--size-px--xs);
410
+ --inline-code--padding-y: var(--size-px--xxs);
411
+ --kbd--padding: var(--size-px--xs);
412
+ --kbd--padding-y-start: var(--size-px--xxs);
413
+ --kbd--inner-shadow-color--default: var(--dark--color--200);
414
+ --kbd--inner-shadow-size-x: var(--size-px--xxs);
415
+ --kbd--inner-shadow-size-y-end: var(--size-px--xs);
463
416
  --label--font-size: var(--font-size-text--s);
464
417
  --label--font-weight: var(--font-weight--bold);
465
418
  --label--spacing: var(--size-rem--xs);
@@ -469,6 +422,24 @@
469
422
  --text--blockquote-border-style: var(--border-style--default);
470
423
  --text--blockquote-padding: var(--size-rem--s);
471
424
  --text--list-padding: var(--size-rem--l);
425
+ --axis--spacing: var(--size-px--s);
426
+ --axis--font-size: var(--font-size-text--s);
427
+ --axis--color: var(--color--gray--700);
428
+ --axis--tick-size: var(--size-px--s);
429
+ --big-number--spacing: var(--size-rem--xs);
430
+ --big-number--top-font-size: var(--font-size-heading--xl);
431
+ --big-number--bottom-font-size: var(--font-size-text--m);
432
+ --big-number--font-weight: var(--font-weight--bold);
433
+ --cartesian-grid--color: var(--color--gray--700);
434
+ --chart-tooltip--spacing: var(--size-px--s);
435
+ --donut-chart--spacing-y: var(--size-rem--s);
436
+ --donut-chart--spacing-x: var(--size-rem--m);
437
+ --donut-chart--padding--m: var(--size-px--l);
438
+ --donut-chart--padding--l: var(--size-px--xl);
439
+ --legend--spacing-x: var(--size-px--m);
440
+ --legend--spacing-y: var(--size-px--s);
441
+ --legend-item--spacing: var(--size-rem--s);
442
+ --legend-item--marker--size: var(--size-rem--m);
472
443
  --focus--outline-offset: var(--size-px--xxs);
473
444
  --line-height--m: calc(var(--font-size-text--m) * 1.5);
474
445
  --line-height--s: calc(var(--font-size-text--s) * 1.5);
@@ -480,7 +451,6 @@
480
451
  --calendar--header-cell-font-weight: var(--font-weight--bold);
481
452
  --field-description--font-size: var(--font-size-text--s);
482
453
  --field-error--font-size: var(--font-size-text--s);
483
- --field-error--spacing: var(--size-rem--xs);
484
454
  --form-control--label-to-control-spacing: var(--size-rem--xxs);
485
455
  --form-control--control-to-info-spacing: var(--size-rem--xs);
486
456
  --form-control--spacing-x: var(--size-rem--s);
@@ -488,6 +458,8 @@
488
458
  --form-control--padding-x: var(--size-px--m);
489
459
  --form-control--padding-y: var(--size-px--s);
490
460
  --form-control--border-style: var(--border-style--default);
461
+ --rating--spacing--s: var(--size-rem--xxs);
462
+ --rating--spacing--m: var(--size-rem--xs);
491
463
  --segmented-button--text-to-text-spacing: var(--size-rem--xs);
492
464
  --slider--spacing-x: var(--size-rem--s);
493
465
  --slider--spacing-y: var(--size-rem--m);
@@ -513,6 +485,7 @@
513
485
  --header-navigation--corner-radius-round: var(--corner-radius--round);
514
486
  --header-navigation--font-weight-current: var(--font-weight--bold);
515
487
  --link--icon-height: calc(var(--font-size-text--m) * 1.25);
488
+ --link--icon-height-s: calc(var(--font-size-text--s) * 1.25);
516
489
  --link--font-weight: var(--font-weight--bold);
517
490
  --link--spacing: var(--size-rem--xs);
518
491
  --link--color-dark--default: var(--dark--color--800);
@@ -529,6 +502,7 @@
529
502
  --light-box--max-height: calc(100dvh - var(--size-px--l));
530
503
  --light-box--spacing: var(--size-px--m);
531
504
  --modal--padding: var(--size-px--l);
505
+ --modal--padding-mobile: var(--size-px--m);
532
506
  --modal--border-style: var(--border-style--default);
533
507
  --modal--header-padding-y: var(--size-px--s);
534
508
  --modal--off-canvas-max-width: calc(100dvw - var(--size-px--m));
@@ -547,6 +521,7 @@
547
521
  --tooltip--tip-size: var(--size-px--s);
548
522
  --shadow--content: rgba(0, 0, 0, 0.1) 0 var(--size-px--xs) var(--size-px--s);
549
523
  --shadow--overlay: rgba(0, 0, 0, 0.14) 0 var(--size-px--m) var(--size-px--l);
524
+ --alert-text--spacing: var(--size-rem--xs);
550
525
  --alert--padding: var(--size-px--m);
551
526
  --alert--border-style: var(--border-style--default);
552
527
  --alert--heading-to-content-spacing: var(--size-rem--s);
@@ -647,22 +622,29 @@
647
622
  --notification--heading-to-text-spacing: var(--size-rem--xs);
648
623
  --notification--spacing: var(--size-rem--s);
649
624
  --notification--font-size: var(--font-size-text--s);
625
+ --password-creation-field--rule-to-rule-spacing: var(--size-px--s);
650
626
  --progress-bar--font-size: var(--font-size-text--m);
651
627
  --progress-bar--font-size-s: var(--font-size-text--s);
652
628
  --progress-bar--value-font-weight: var(--font-weight--bold);
653
629
  --progress-bar--spacing-y: var(--size-rem--xs);
654
630
  --progress-bar--spacing-x: var(--size-rem--m);
655
- --progress-bar--height: var(--size-rem--s);
631
+ --progress-bar--spacing-bar-to-legend: var(--size-px--m);
632
+ --progress-bar--height--m: var(--size-rem--m);
633
+ --progress-bar--height--s: var(--size-rem--s);
634
+ --progress-bar--height--l: var(--size-rem--l);
656
635
  --progress-bar--corner-radius: var(--size-rem--xs);
636
+ --accent-box--background-color-gradient: var(--color--gradient);
637
+ --accent-box--background-color-blue: var(--color--hosting-blue--100);
638
+ --accent-box--icon-color-blue: var(--color--hosting-blue--200);
639
+ --accent-box--padding: var(--size-px--m);
657
640
  --accordion--spacing: var(--size-rem--s);
658
641
  --accordion--border-style: var(--border-style--default);
659
642
  --accordion--padding-x: var(--size-px--s);
660
643
  --accordion--padding-y: var(--size-px--xs);
661
644
  --align--avatar-text--spacing: var(--size-rem--s);
662
645
  --align--input-button--spacing: var(--size-px--m);
663
- --align--text-copyButton--spacing: var(--size-rem--xs);
646
+ --align--text-button--spacing: var(--size-rem--xs);
664
647
  --align--icon-text--spacing: var(--size-rem--s);
665
- --align--text-contextualHelp--spacing: var(--size-rem--xs);
666
648
  --column-layout--gap--s: var(--size-px--s);
667
649
  --column-layout--gap--m: var(--size-px--m);
668
650
  --column-layout--gap--l: var(--size-px--l);
@@ -671,6 +653,7 @@
671
653
  --layout-card--padding-mobile: var(--size-px--m);
672
654
  --list--spacing: var(--size-px--s);
673
655
  --list--block-to-block-spacing: var(--size-px--m);
656
+ --list--filter-to-search-spacing: var(--size-px--xl);
674
657
  --list-item--padding: var(--size-px--s);
675
658
  --list-item--border-style: var(--border-style--default);
676
659
  --list-item--spacing: var(--size-px--m);
@@ -682,6 +665,7 @@
682
665
  --section--sub-heading-spacing-s: var(--size-rem--s);
683
666
  --section-header--action-to-action-spacing: var(--size-rem--s);
684
667
  --section-header--heading-to-action-spacing: var(--size-rem--m);
668
+ --separator--border-style: var(--border-style--default);
685
669
  --table--border-style: var(--border-style--default);
686
670
  --table--padding-x: var(--size-px--m);
687
671
  --table--padding-y: var(--size-px--s);
@@ -863,9 +847,9 @@
863
847
  --warning-soft-background-color--pressed: var(--warning--color--300);
864
848
  --warning-soft-content-color--default: var(--warning--color--900);
865
849
  --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);
850
+ --warning-plain-background-color--hover: var(--warning--color--100);
851
+ --warning-plain-background-color--pressed: var(--warning--color--200);
852
+ --warning-plain-content-color: var(--warning--color--800);
869
853
  --neutral-solid-background-color--default: var(--neutral--color--800);
870
854
  --neutral-solid-background-color--hover: var(--neutral--color--900);
871
855
  --neutral-solid-background-color--pressed: var(--neutral--color--1000);
@@ -891,30 +875,50 @@
891
875
  --disabled-outline-border-color: var(--neutral--color--400);
892
876
  --disabled-soft-background-color: var(--neutral--color--300);
893
877
  --disabled-soft-content-color: var(--neutral--color--500);
878
+ --color--blue: var(--primary--color--1000);
894
879
  --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);
880
+ --avatar--info-status-background-color: var(--info--color--200);
881
+ --avatar--warning-status-background-color: var(--warning--color--200);
882
+ --avatar--danger-status-background-color: var(--danger--color--200);
883
+ --avatar--success-status-background-color: var(--success--color--200);
884
+ --code-block--corner-radius: var(--corner-radius--default);
885
+ --code-block--border-width: var(--border-width--100);
886
+ --code-block--background-color: var(--neutral--color--200);
901
887
  --heading--color: var(--primary--color--1000);
902
888
  --heading--color-dark: var(--dark-plain-content-color);
903
889
  --heading--color-light: var(--light-plain-content-color);
890
+ --heading--color-danger: var(--danger--color--900);
891
+ --heading--color-unavailable: var(--neutral--color--900);
904
892
  --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);
893
+ --icon--unavailable-color: var(--neutral--color--900);
894
+ --illustrated-message--primary-content-color: var(--primary--color--1000);
895
+ --illustrated-message--danger-content-color: var(--danger--color--900);
896
+ --illustrated-message--unavailable-content-color: var(--neutral--color--900);
897
+ --illustrated-message--dark-content-color: var(--dark-plain-content-color);
898
+ --illustrated-message--light-content-color: var(--light-plain-content-color);
910
899
  --image--corner-radius: var(--corner-radius--default);
911
900
  --image--border-width: var(--border-width--100);
901
+ --inline-code--corner-radius: var(--corner-radius--default);
902
+ --inline-code--light-background-color: var(--light-soft-background-color--default);
903
+ --inline-code--light-content-color: var(--light-soft-content-color);
904
+ --inline-code--dark-background-color: var(--dark-soft-background-color--default);
905
+ --inline-code--dark-content-color: var(--dark-soft-content-color);
906
+ --kbd--corner-radius: var(--corner-radius--default);
907
+ --kbd--inner-shadow-color--disabled: var(--disabled-soft-dark-background-color);
912
908
  --label--line-height: var(--line-height--m);
913
909
  --label--color--default: var(--neutral--color--800);
914
910
  --text--color--default: var(--neutral--color--1000);
915
911
  --text--color--light: var(--light-plain-content-color);
916
912
  --text--color--dark: var(--dark-plain-content-color);
917
913
  --text--blockquote-border-width: var(--border-width--300);
914
+ --area--border-width: var(--border-width--200);
915
+ --area--border-color: var(--neutral--color--100);
916
+ --axis--text-color: var(--neutral--color--1000);
917
+ --axis--stroke-width: var(--border-width--100);
918
+ --cartesian-grid--stroke-width: var(--border-width--100);
919
+ --donut-chart--background-color: var(--neutral--color--300);
920
+ --legend-item--marker--corner-radius: var(--corner-radius--default);
921
+ --line--border-width: var(--border-width--200);
918
922
  --focus--outline-color: var(--primary--color--800);
919
923
  --focus--secondary-outline-color: var(--neutral--color--100);
920
924
  --focus--outline-width: var(--border-width--200);
@@ -924,7 +928,6 @@
924
928
  --calendar--cell-background-color--hover: var(--dark-plain-background-color--hover);
925
929
  --calendar--cell-background-color--pressed: var(--dark-plain-background-color--pressed);
926
930
  --calendar--cell-range-background-color: var(--primary--color--100);
927
- --field-error--color: var(--danger--color--800);
928
931
  --form-control--corner-radius: var(--corner-radius--default);
929
932
  --form-control--border-width: var(--border-width--100);
930
933
  --form-control--placeholder-color--default: var(--neutral--color--900);
@@ -934,6 +937,8 @@
934
937
  --form-control--background-color--focused: var(--neutral--color--300);
935
938
  --form-control--background-color--invalid: var(--danger--color--100);
936
939
  --form-control--background-color--selected: var(--primary--color--200);
940
+ --rating--star-color: var(--neutral--color--700);
941
+ --rating--star-filled-color: var(--primary--color--1000);
937
942
  --slider--color--default: var(--primary--color--1000);
938
943
  --slider--color--disabled: var(--neutral--color--600);
939
944
  --slider--track-color--default: var(--neutral--color--700);
@@ -956,7 +961,6 @@
956
961
  --header-navigation--background-color-light--hover: var(--light-plain-background-color--hover);
957
962
  --header-navigation--background-color-light--pressed: var(--light-plain-background-color--pressed);
958
963
  --header-navigation--underline-width-current: var(--border-width--200);
959
- --link--line-height: var(--line-height--m);
960
964
  --link--color--default: var(--primary--color--800);
961
965
  --link--color--hover: var(--primary--color--900);
962
966
  --link--color--pressed: var(--primary--color--1000);
@@ -974,6 +978,7 @@
974
978
  --tooltip--background-color: var(--neutral--color--900);
975
979
  --tooltip--box-shadow: var(--shadow--overlay);
976
980
  --tooltip--header-corner-radius: var(--corner-radius--default);
981
+ --alert-text--unavailable-color: var(--neutral--color--900);
977
982
  --alert--corner-radius: var(--corner-radius--default);
978
983
  --alert--border-width: var(--border-width--100);
979
984
  --alert--border-x-start-width: var(--border-width--400);
@@ -990,6 +995,8 @@
990
995
  --badge--disabled-light-scope-content-color: var(--disabled-solid-light-content-color);
991
996
  --counter-badge--border-width: var(--border-width--200);
992
997
  --counter-badge--border-color: var(--neutral--color--100);
998
+ --loading-spinner--color-light: var(--light-plain-content-color);
999
+ --loading-spinner--color-dark: var(--dark-plain-content-color);
993
1000
  --notification--corner-radius: var(--corner-radius--default);
994
1001
  --notification--border-x-start-width: var(--border-width--300);
995
1002
  --notification--box-shadow: var(--shadow--overlay);
@@ -998,7 +1005,10 @@
998
1005
  --notification--danger-background-color--default: var(--neutral--color--100);
999
1006
  --notification--success-background-color--default: var(--neutral--color--100);
1000
1007
  --progress-bar--border-width: var(--border-width--100);
1001
- --progress-bar--background-color: var(--neutral-outline-background-color--default);
1008
+ --progress-bar--background-color: var(--neutral--color--300);
1009
+ --accent-box--background-color-neutral: var(--neutral--color--300);
1010
+ --accent-box--icon-color-neutral: var(--neutral--color--400);
1011
+ --accent-box--corner-radius: var(--corner-radius--default);
1002
1012
  --accordion--corner-radius: var(--corner-radius--default);
1003
1013
  --accordion--border-width: var(--border-width--100);
1004
1014
  --accordion--background-color--hover: var(--primary--color--100);
@@ -1021,6 +1031,7 @@
1021
1031
  --file-card--corner-radius: var(--corner-radius--default);
1022
1032
  --file-card--border-width: var(--border-width--100);
1023
1033
  --file-card--background-color--default: var(--neutral--color--100);
1034
+ --file-card--background-color--error: var(--danger--color--100);
1024
1035
  --file-drop-zone--corner-radius: var(--corner-radius--default);
1025
1036
  --file-drop-zone--border-width: var(--border-width--100);
1026
1037
  --file-drop-zone--border-color--target: var(--primary--color--800);
@@ -1152,19 +1163,28 @@
1152
1163
  --menu-item--background-color--hover: var(--primary-plain-background-color--hover);
1153
1164
  --menu-item--background-color--current: var(--primary-plain-background-color--pressed);
1154
1165
  --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);
1166
+ --code-block--content-color: var(--neutral-soft-content-color--default);
1157
1167
  --icon--info-color: var(--info-outline-content-color);
1158
1168
  --icon--warning-color: var(--warning-outline-content-color);
1159
1169
  --icon--danger-color: var(--danger-outline-content-color);
1160
1170
  --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
1171
  --image--border-color: var(--neutral-outline-border-color);
1172
+ --inline-code--default-background-color: var(--neutral-soft-background-color--default);
1173
+ --inline-code--default-content-color: var(--neutral-soft-content-color--default);
1174
+ --kbd--background-color--default: var(--neutral-soft-background-color--default);
1175
+ --kbd--background-color--disabled: var(--disabled-soft-background-color);
1176
+ --kbd--content-color--default: var(--neutral-soft-content-color--default);
1177
+ --kbd--content-color--disabled: var(--disabled-soft-content-color);
1178
+ --kbd--content-color-plain--default: var(--form-control--placeholder-color--default);
1179
+ --kbd--content-color-plain--disabled: var(--form-control--placeholder-color--disabled);
1165
1180
  --label--color--disabled: var(--disabled-plain-content-color);
1166
1181
  --text--color--disabled: var(--disabled-plain-content-color);
1167
1182
  --text--blockquote-border-color: var(--info-outline-border-color);
1183
+ --donut-chart--border-color: var(--neutral-outline-border-color);
1184
+ --donut-chart--info-fill-background-color: var(--info-solid-background-color--default);
1185
+ --donut-chart--success-fill-background-color: var(--success-solid-background-color--default);
1186
+ --donut-chart--warning-fill-background-color: var(--warning-solid-background-color--default);
1187
+ --donut-chart--danger-fill-background-color: var(--danger-solid-background-color--default);
1168
1188
  --choice--icon-color--default: var(--icon--color);
1169
1189
  --choice--icon-color--disabled: var(--disabled-outline-content-color);
1170
1190
  --date-picker--date-segment-background-color--focused: var(--primary-plain-background-color--pressed);
@@ -1208,6 +1228,10 @@
1208
1228
  --alert-badge--danger-background-color: var(--danger-soft-background-color--default);
1209
1229
  --alert-badge--danger-content-color: var(--danger-soft-content-color--default);
1210
1230
  --alert-badge--danger-border-color: var(--danger-outline-border-color);
1231
+ --alert-text--info-color: var(--info-outline-content-color);
1232
+ --alert-text--warning-color: var(--warning-outline-content-color);
1233
+ --alert-text--danger-color: var(--danger-outline-content-color);
1234
+ --alert-text--success-color: var(--success-outline-content-color);
1211
1235
  --alert--info-border-color: var(--info-outline-border-color);
1212
1236
  --alert--info-heading-color: var(--info-outline-content-color);
1213
1237
  --alert--warning-border-color: var(--warning-outline-border-color);
@@ -1234,6 +1258,7 @@
1234
1258
  --badge--disabled-scope-content-color: var(--disabled-solid-content-color);
1235
1259
  --counter-badge--background-color: var(--success-solid-background-color--default);
1236
1260
  --counter-badge--content-color: var(--success-solid-content-color);
1261
+ --loading-spinner--color: var(--icon--color);
1237
1262
  --notification--info-border-color: var(--info-outline-border-color);
1238
1263
  --notification--info-heading-color: var(--info-outline-content-color);
1239
1264
  --notification--info-background-color--hover: var(--info-outline-background-color--hover);
@@ -1255,14 +1280,20 @@
1255
1280
  --progress-bar--success-fill-background-color: var(--success-solid-background-color--default);
1256
1281
  --progress-bar--warning-fill-background-color: var(--warning-solid-background-color--default);
1257
1282
  --progress-bar--danger-fill-background-color: var(--danger-solid-background-color--default);
1283
+ --progress-bar--indeterminate-fill-background-color: var(--neutral-solid-background-color--default);
1258
1284
  --accordion--border-color: var(--neutral-outline-border-color);
1259
1285
  --list-item--border-color: var(--neutral-outline-border-color);
1260
1286
  --separator--color: var(--neutral-outline-border-color);
1261
1287
  --table--border-color: var(--neutral-outline-border-color);
1262
- --file-card--border-color: var(--neutral-outline-border-color);
1288
+ --file-card--border-color--default: var(--neutral-outline-border-color);
1289
+ --file-card--border-color--error: var(--danger-outline-border-color);
1263
1290
  --file-card--background-color--hover: var(--neutral-outline-background-color--hover);
1264
1291
  --file-card--background-color--pressed: var(--neutral-outline-background-color--pressed);
1292
+ --file-drop-zone--content-color--disabled: var(--disabled-outline-content-color);
1265
1293
  --file-drop-zone--background-color--default: var(--form-control--background-color--default);
1266
1294
  --file-drop-zone--background-color--target: var(--form-control--background-color--hover);
1295
+ --file-drop-zone--background-color--disabled: var(--disabled-outline-background-color);
1296
+ --file-drop-zone--border-color--disabled: var(--disabled-outline-border-color);
1297
+ --code-block--border-color: var(--separator--color);
1267
1298
  --file-drop-zone--border-color--default: var(--form-control--border-color--default);
1268
1299
  }