@mittwald/flow-design-tokens 0.2.0-alpha.27 → 0.2.0-alpha.271

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 (4) hide show
  1. package/dist/variables.css +108 -42
  2. package/dist/variables.json +1806 -628
  3. package/package.json +6 -6
  4. package/LICENSE +0 -21
package/dist/variables.css CHANGED
@@ -123,7 +123,20 @@
123
123
  --color--super-teal--900: #006b78;
124
124
  --color--super-teal--1000: #004f59;
125
125
  --color--super-teal--1100: #00424a;
126
+ --color--categorical--sea-green: #0fb5ae;
127
+ --color--categorical--palatinate-blue: #4046ca;
128
+ --color--categorical--tangerine: #f68511;
129
+ --color--categorical--magenta: #de3d82;
130
+ --color--categorical--tropical-indigo: #7e84fa;
131
+ --color--categorical--malachite: #72e06a;
132
+ --color--categorical--azure: #147af3;
133
+ --color--categorical--violet: #7326d3;
134
+ --color--categorical--yellow: #e8c600;
135
+ --color--categorical--alloy-orange: #cb5d00;
136
+ --color--categorical--green: #008f5d;
137
+ --color--categorical--lime: #bce931;
126
138
  --color--transparent: transparent;
139
+ --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%);
127
140
  --avatar--size--m: 2.5rem;
128
141
  --code--default-syntax-color-addition: #397300;
129
142
  --code--default-syntax-color-built-in: #397300;
@@ -223,6 +236,7 @@
223
236
  --contextual-help--max-width: 500px;
224
237
  --modal--size--s: 660px;
225
238
  --modal--size--m: 900px;
239
+ --modal--size--l: 1300px;
226
240
  --modal--content-min-height: 120px;
227
241
  --popover--min-width: 200px;
228
242
  --tooltip--max-width: 300px;
@@ -247,7 +261,9 @@
247
261
  --counter-badge--height-empty: 0.75rem;
248
262
  --loading-spinner--transition-duration: 2000ms;
249
263
  --notification--width: 355px;
250
- --progress-bar--height-s: 0.375rem;
264
+ --accent-box--background-color-green: #D8F5D6;
265
+ --accent-box--icon-color-green: #c4e3c1;
266
+ --accent-box--icon-color-gradient: #002b7b14;
251
267
  --transition--duration--default: 200ms;
252
268
  --transition--duration--slow: 300ms;
253
269
  --action-group--spacing--m: var(--size-px--m);
@@ -276,6 +292,17 @@
276
292
  --border-width--200: var(--size-px--xxs);
277
293
  --border-width--300: var(--size-px--xs);
278
294
  --border-width--400: var(--size-px--s);
295
+ --chat--spacing: var(--size-px--m);
296
+ --message-separator--font-size: var(--font-size-text--s);
297
+ --message-separator--padding: var(--size-px--m);
298
+ --message-thread--spacing: var(--size-rem--l);
299
+ --message-thread--indentation: var(--size-px--m);
300
+ --message--padding-y: var(--size-px--s);
301
+ --message--padding-x: var(--size-px--m);
302
+ --message--spacing-y: var(--size-rem--s);
303
+ --message--spacing-x: var(--size-rem--m);
304
+ --message--background-color-responder: var(--color--gray--400);
305
+ --message--background-color-sender: var(--color--hosting-blue--200);
279
306
  --primary--color--100: var(--color--hosting-blue--100);
280
307
  --primary--color--200: var(--color--hosting-blue--200);
281
308
  --primary--color--300: var(--color--hosting-blue--300);
@@ -405,6 +432,9 @@
405
432
  --light-outline-background-color--pressed: var(--light--color--200);
406
433
  --light-outline-border-color: var(--light--color--800);
407
434
  --light-outline-content-color: var(--light--color--800);
435
+ --color--violet: var(--color--soft-contrast-violet--800);
436
+ --color--teal: var(--color--super-teal--800);
437
+ --color--lilac: var(--color--bright-lilac--800);
408
438
  --avatar--size--xs: var(--size-rem--l);
409
439
  --avatar--size--s: var(--size-rem--xl);
410
440
  --avatar--size--l: var(--size-rem--xxl);
@@ -435,6 +465,7 @@
435
465
  --heading--font-weight: var(--font-weight--bold);
436
466
  --illustrated-message--padding: var(--size-px--m);
437
467
  --illustrated-message--spacing: var(--size-rem--m);
468
+ --image--border-style: var(--border-style--default);
438
469
  --initials--font-weight: var(--font-weight--bold);
439
470
  --label--font-size: var(--font-size-text--s);
440
471
  --label--font-weight: var(--font-weight--bold);
@@ -442,15 +473,25 @@
442
473
  --labeled-value--label-to-value-spacing: var(--size-rem--xxs);
443
474
  --labeled-value--value-to-action-spacing: var(--size-rem--xs);
444
475
  --markdown--spacing: var(--size-rem--m);
445
- --message--padding-y: var(--size-px--s);
446
- --message--padding-x: var(--size-px--m);
447
- --message--spacing-y: var(--size-rem--s);
448
- --message--spacing-x: var(--size-rem--m);
449
- --message--background-color-responder: var(--color--gray--400);
450
- --message--background-color-sender: var(--color--hosting-blue--200);
476
+ --rating--spacing--s: var(--size-rem--xs);
477
+ --rating--spacing--m: var(--size-rem--s);
451
478
  --text--blockquote-border-style: var(--border-style--default);
452
479
  --text--blockquote-padding: var(--size-rem--s);
453
480
  --text--list-padding: var(--size-rem--l);
481
+ --axis--spacing: var(--size-px--s);
482
+ --axis--font-size: var(--font-size-text--s);
483
+ --axis--color: var(--color--gray--700);
484
+ --axis--tick-size: var(--size-px--s);
485
+ --big-number--spacing: var(--size-rem--xs);
486
+ --big-number--top-font-size: var(--font-size-heading--xl);
487
+ --big-number--bottom-font-size: var(--font-size-text--m);
488
+ --big-number--font-weight: var(--font-weight--bold);
489
+ --cartesian-grid--color: var(--color--gray--700);
490
+ --chart-tooltip--spacing: var(--size-px--s);
491
+ --legend--spacing-x: var(--size-px--m);
492
+ --legend--spacing-y: var(--size-px--s);
493
+ --legend-item--spacing: var(--size-rem--s);
494
+ --legend-item--marker--size: var(--size-rem--m);
454
495
  --focus--outline-offset: var(--size-px--xxs);
455
496
  --line-height--m: calc(var(--font-size-text--m) * 1.5);
456
497
  --line-height--s: calc(var(--font-size-text--s) * 1.5);
@@ -471,16 +512,13 @@
471
512
  --form-control--padding-y: var(--size-px--s);
472
513
  --form-control--border-style: var(--border-style--default);
473
514
  --segmented-button--text-to-text-spacing: var(--size-rem--xs);
515
+ --slider--spacing-x: var(--size-rem--s);
516
+ --slider--spacing-y: var(--size-rem--m);
517
+ --slider--border-style: var(--border-style--default);
474
518
  --slider--value-font-weight: var(--font-weight--bold);
475
- --slider--value-to-label-spacing: var(--size-rem--xs);
476
- --slider--text-to-track-spacing: var(--size-rem--xs);
477
- --slider--track-height: var(--size-rem--xs);
478
- --slider--thumb-border-width: var(--size-rem--xs);
479
- --slider--thumb-border-style: var(--border-style--default);
480
- --slider--thumb-corner-radius: var(--corner-radius--round);
481
- --slider--thumb-size: var(--size-rem--l);
519
+ --slider--handle-corner-radius: var(--corner-radius--round);
520
+ --slider--handle-size: var(--size-rem--l);
482
521
  --slider--initial-marker-height: var(--size-rem--m);
483
- --slider--initial-marker-width: var(--size-rem--xs);
484
522
  --switch--label-to-track-spacing: var(--size-rem--s);
485
523
  --switch--track-padding: var(--size-rem--xxs);
486
524
  --time-field--date-segment-corner-radius: var(--size-px--xs);
@@ -497,7 +535,7 @@
497
535
  --header-navigation--spacing: var(--size-rem--m);
498
536
  --header-navigation--corner-radius-round: var(--corner-radius--round);
499
537
  --header-navigation--font-weight-current: var(--font-weight--bold);
500
- --link--font-size: var(--font-size-text--s);
538
+ --link--icon-height: calc(var(--font-size-text--m) * 1.25);
501
539
  --link--font-weight: var(--font-weight--bold);
502
540
  --link--spacing: var(--size-rem--xs);
503
541
  --link--color-dark--default: var(--dark--color--800);
@@ -509,7 +547,6 @@
509
547
  --tabs--padding: var(--size-px--m);
510
548
  --tabs--font-weight--selected: var(--font-weight--bold);
511
549
  --tabs--spacing: var(--size-rem--s);
512
- --tab-panel--padding: var(--size-px--xl);
513
550
  --light-box--overlay-background-color: var(--dark--color--600);
514
551
  --light-box--max-width: calc(100dvw - var(--size-px--l));
515
552
  --light-box--max-height: calc(100dvh - var(--size-px--l));
@@ -633,27 +670,38 @@
633
670
  --notification--heading-to-text-spacing: var(--size-rem--xs);
634
671
  --notification--spacing: var(--size-rem--s);
635
672
  --notification--font-size: var(--font-size-text--s);
673
+ --password-creation-field--rule-to-rule-spacing: var(--size-px--s);
636
674
  --progress-bar--font-size: var(--font-size-text--m);
637
675
  --progress-bar--font-size-s: var(--font-size-text--s);
638
676
  --progress-bar--value-font-weight: var(--font-weight--bold);
639
677
  --progress-bar--spacing-y: var(--size-rem--xs);
640
678
  --progress-bar--spacing-x: var(--size-rem--m);
641
- --progress-bar--height: var(--size-rem--s);
679
+ --progress-bar--spacing-bar-to-legend: var(--size-px--m);
680
+ --progress-bar--height--m: var(--size-rem--m);
681
+ --progress-bar--height--s: var(--size-rem--s);
682
+ --progress-bar--height--l: var(--size-rem--l);
642
683
  --progress-bar--corner-radius: var(--size-rem--xs);
684
+ --accent-box--background-color-gradient: var(--color--gradient);
685
+ --accent-box--background-color-blue: var(--color--hosting-blue--100);
686
+ --accent-box--icon-color-blue: var(--color--hosting-blue--200);
687
+ --accent-box--padding: var(--size-px--m);
643
688
  --accordion--spacing: var(--size-rem--s);
644
689
  --accordion--border-style: var(--border-style--default);
645
690
  --accordion--padding-x: var(--size-px--s);
646
691
  --accordion--padding-y: var(--size-px--xs);
647
692
  --align--avatar-text--spacing: var(--size-rem--s);
648
693
  --align--input-button--spacing: var(--size-px--m);
649
- --align--text-copyButton--spacing: var(--size-rem--xs);
694
+ --align--text-button--spacing: var(--size-rem--xs);
695
+ --align--icon-text--spacing: var(--size-rem--s);
650
696
  --column-layout--gap--s: var(--size-px--s);
651
697
  --column-layout--gap--m: var(--size-px--m);
652
698
  --column-layout--gap--l: var(--size-px--l);
653
699
  --column-layout--gap--xl: var(--size-px--xl);
654
- --layout-card--padding: var(--size-px--xl);
700
+ --layout-card--padding: var(--size-px--l);
701
+ --layout-card--padding-mobile: var(--size-px--m);
655
702
  --list--spacing: var(--size-px--s);
656
703
  --list--block-to-block-spacing: var(--size-px--m);
704
+ --list--filter-to-search-spacing: var(--size-px--xl);
657
705
  --list-item--padding: var(--size-px--s);
658
706
  --list-item--border-style: var(--border-style--default);
659
707
  --list-item--spacing: var(--size-px--m);
@@ -661,9 +709,11 @@
661
709
  --list-item--subtitle-font-size: var(--font-size-text--s);
662
710
  --section--section-to-section-spacing: var(--size-rem--xl);
663
711
  --section--spacing: var(--size-rem--m);
664
- --section--sub-heading-spacing: var(--size-rem--m);
712
+ --section--sub-heading-spacing-m: var(--size-rem--l);
713
+ --section--sub-heading-spacing-s: var(--size-rem--s);
665
714
  --section-header--action-to-action-spacing: var(--size-rem--s);
666
715
  --section-header--heading-to-action-spacing: var(--size-rem--m);
716
+ --separator--border-style: var(--border-style--default);
667
717
  --table--border-style: var(--border-style--default);
668
718
  --table--padding-x: var(--size-px--m);
669
719
  --table--padding-y: var(--size-px--s);
@@ -679,8 +729,6 @@
679
729
  --file-drop-zone--border-style--target: var(--border-style--default);
680
730
  --button--corner-radius: var(--corner-radius--default);
681
731
  --button--pending-icon-color: var(--neutral--color--1000);
682
- --button--succeeded-icon-color: var(--success--color--800);
683
- --button--failed-icon-color: var(--danger--color--800);
684
732
  --button--border-width: var(--border-width--100);
685
733
  --button--accent-plain-background-color--default: var(--success-plain-background-color--default);
686
734
  --button--accent-plain-background-color--disabled: var(--disabled-plain-background-color);
@@ -767,6 +815,9 @@
767
815
  --menu-item--icon-color--default: var(--neutral--color--800);
768
816
  --menu-item--icon-color--current: var(--primary--color--800);
769
817
  --menu-item--disabled-background-color: var(--disabled-plain-background-color);
818
+ --message-separator--background-color: var(--neutral--color--100);
819
+ --message-separator--color: var(--neutral--color--800);
820
+ --message--corner-radius: var(--corner-radius--default);
770
821
  --primary-solid-background-color--default: var(--primary--color--800);
771
822
  --primary-solid-background-color--hover: var(--primary--color--900);
772
823
  --primary-solid-background-color--pressed: var(--primary--color--1000);
@@ -872,6 +923,12 @@
872
923
  --disabled-outline-border-color: var(--neutral--color--400);
873
924
  --disabled-soft-background-color: var(--neutral--color--300);
874
925
  --disabled-soft-content-color: var(--neutral--color--500);
926
+ --color--blue: var(--primary--color--1000);
927
+ --avatar-stack--border-width: var(--border-width--200);
928
+ --avatar--info-status-background-color: var(--info--color--200);
929
+ --avatar--warning-status-background-color: var(--warning--color--200);
930
+ --avatar--danger-status-background-color: var(--danger--color--200);
931
+ --avatar--success-status-background-color: var(--success--color--200);
875
932
  --code--line-height: var(--line-height--m);
876
933
  --code--corner-radius: var(--corner-radius--default);
877
934
  --code--light-background-color: var(--light-soft-background-color--default);
@@ -887,14 +944,24 @@
887
944
  --illustrated-message--danger-heading-color: var(--danger--color--1000);
888
945
  --illustrated-message--dark-icon-color: var(--dark-plain-content-color);
889
946
  --illustrated-message--light-icon-color: var(--light-plain-content-color);
947
+ --image--corner-radius: var(--corner-radius--default);
948
+ --image--border-width: var(--border-width--100);
890
949
  --label--line-height: var(--line-height--m);
891
950
  --label--color--default: var(--neutral--color--800);
892
- --message--corner-radius: var(--corner-radius--default);
951
+ --rating--star-color: var(--neutral--color--700);
952
+ --rating--star-filled-color: var(--primary--color--1000);
893
953
  --text--color--default: var(--neutral--color--1000);
894
954
  --text--color--light: var(--light-plain-content-color);
895
955
  --text--color--dark: var(--dark-plain-content-color);
896
956
  --text--blockquote-border-width: var(--border-width--300);
957
+ --area--border-width: var(--border-width--200);
958
+ --area--border-color: var(--neutral--color--100);
959
+ --axis--text-color: var(--neutral--color--1000);
960
+ --axis--stroke-width: var(--border-width--100);
961
+ --cartesian-grid--stroke-width: var(--border-width--100);
962
+ --legend-item--marker--corner-radius: var(--corner-radius--default);
897
963
  --focus--outline-color: var(--primary--color--800);
964
+ --focus--secondary-outline-color: var(--neutral--color--100);
898
965
  --focus--outline-width: var(--border-width--200);
899
966
  --choice--icon-color--selected: var(--primary--color--800);
900
967
  --calendar--heading-font-size: var(--font-size-text--default);
@@ -912,9 +979,13 @@
912
979
  --form-control--background-color--focused: var(--neutral--color--300);
913
980
  --form-control--background-color--invalid: var(--danger--color--100);
914
981
  --form-control--background-color--selected: var(--primary--color--200);
915
- --slider--track-corner-radius: var(--corner-radius--default);
916
- --slider--thumb-background-color--default: var(--neutral--color--100);
917
- --slider--initial-marker-corner-radius: var(--corner-radius--default);
982
+ --slider--color--default: var(--primary--color--1000);
983
+ --slider--color--disabled: var(--neutral--color--600);
984
+ --slider--track-color--default: var(--neutral--color--700);
985
+ --slider--track-color--disabled: var(--neutral--color--400);
986
+ --slider--border-width: var(--border-width--300);
987
+ --slider--corner-radius: var(--corner-radius--default);
988
+ --slider--handle-fill-color: var(--neutral--color--100);
918
989
  --switch--handle-color--disabled: var(--neutral--color--500);
919
990
  --switch--handle-background-color--default: var(--neutral--color--100);
920
991
  --switch--handle-background-color--disabled: var(--neutral--color--300);
@@ -972,7 +1043,10 @@
972
1043
  --notification--danger-background-color--default: var(--neutral--color--100);
973
1044
  --notification--success-background-color--default: var(--neutral--color--100);
974
1045
  --progress-bar--border-width: var(--border-width--100);
975
- --progress-bar--background-color: var(--neutral-outline-background-color--default);
1046
+ --progress-bar--background-color: var(--neutral--color--300);
1047
+ --accent-box--background-color-neutral: var(--neutral--color--300);
1048
+ --accent-box--icon-color-neutral: var(--neutral--color--400);
1049
+ --accent-box--corner-radius: var(--corner-radius--default);
976
1050
  --accordion--corner-radius: var(--corner-radius--default);
977
1051
  --accordion--border-width: var(--border-width--100);
978
1052
  --accordion--background-color--hover: var(--primary--color--100);
@@ -1128,9 +1202,14 @@
1128
1202
  --menu-item--disabled-color: var(--disabled-plain-content-color);
1129
1203
  --code--default-background-color: var(--neutral-soft-background-color--default);
1130
1204
  --code--default-content-color: var(--neutral-soft-content-color--default);
1205
+ --icon--info-color: var(--info-outline-content-color);
1206
+ --icon--warning-color: var(--warning-outline-content-color);
1207
+ --icon--danger-color: var(--danger-outline-content-color);
1208
+ --icon--success-color: var(--success-outline-content-color);
1131
1209
  --illustrated-message--primary-heading-color: var(--heading--color);
1132
1210
  --illustrated-message--dark-heading-color: var(--heading--color-dark);
1133
1211
  --illustrated-message--light-heading-color: var(--heading--color-light);
1212
+ --image--border-color: var(--neutral-outline-border-color);
1134
1213
  --label--color--disabled: var(--disabled-plain-content-color);
1135
1214
  --text--color--disabled: var(--disabled-plain-content-color);
1136
1215
  --text--blockquote-border-color: var(--info-outline-border-color);
@@ -1149,16 +1228,6 @@
1149
1228
  --form-control--content-color--default: var(--neutral-outline-content-color);
1150
1229
  --form-control--content-color--disabled: var(--disabled-outline-content-color);
1151
1230
  --form-control--content-color--selected: var(--neutral-outline-content-color);
1152
- --slider--text-color--disabled: var(--disabled-plain-content-color);
1153
- --slider--track-background-color--default: var(--primary-soft-background-color--default);
1154
- --slider--track-background-color--disabled: var(--disabled-soft-background-color);
1155
- --slider--track-background-color-fill--default: var(--primary-solid-background-color--default);
1156
- --slider--track-background-color-fill--disabled: var(--disabled-solid-background-color);
1157
- --slider--thumb-border-color--default: var(--primary-solid-background-color--default);
1158
- --slider--thumb-border-color--disabled: var(--disabled-solid-background-color);
1159
- --slider--thumb-background-color--pressed: var(--primary-solid-background-color--default);
1160
- --slider--initial-marker-background-color--default: var(--primary-solid-background-color--default);
1161
- --slider--initial-marker-background-color--disabled: var(--disabled-solid-background-color);
1162
1231
  --switch--track-background-color--default: var(--neutral-solid-background-color--default);
1163
1232
  --switch--track-background-color--disabled: var(--disabled-solid-background-color);
1164
1233
  --switch--track-background-color--selected: var(--success-solid-background-color--default);
@@ -1187,10 +1256,6 @@
1187
1256
  --alert-badge--danger-background-color: var(--danger-soft-background-color--default);
1188
1257
  --alert-badge--danger-content-color: var(--danger-soft-content-color--default);
1189
1258
  --alert-badge--danger-border-color: var(--danger-outline-border-color);
1190
- --alert-icon--info-color: var(--info-outline-content-color);
1191
- --alert-icon--warning-color: var(--warning-outline-content-color);
1192
- --alert-icon--danger-color: var(--danger-outline-content-color);
1193
- --alert-icon--success-color: var(--success-outline-content-color);
1194
1259
  --alert--info-border-color: var(--info-outline-border-color);
1195
1260
  --alert--info-heading-color: var(--info-outline-content-color);
1196
1261
  --alert--warning-border-color: var(--warning-outline-border-color);
@@ -1238,6 +1303,7 @@
1238
1303
  --progress-bar--success-fill-background-color: var(--success-solid-background-color--default);
1239
1304
  --progress-bar--warning-fill-background-color: var(--warning-solid-background-color--default);
1240
1305
  --progress-bar--danger-fill-background-color: var(--danger-solid-background-color--default);
1306
+ --progress-bar--indeterminate-fill-background-color: var(--neutral-solid-background-color--default);
1241
1307
  --accordion--border-color: var(--neutral-outline-border-color);
1242
1308
  --list-item--border-color: var(--neutral-outline-border-color);
1243
1309
  --separator--color: var(--neutral-outline-border-color);