@mittwald/flow-design-tokens 0.2.0-alpha.7 → 0.2.0-alpha.70

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 +65 -32
  2. package/dist/variables.json +1064 -463
  3. package/package.json +8 -6
package/dist/variables.css CHANGED
@@ -7,6 +7,7 @@
7
7
  --image-button--brightness--pressed: 50%;
8
8
  --corner-radius--round: 50%;
9
9
  --border-style--default: solid;
10
+ --border-style--dashed: dashed;
10
11
  --dark--color--100: rgb(0 0 0 / 12.5%);
11
12
  --dark--color--200: rgb(0 0 0 / 25%);
12
13
  --dark--color--300: rgb(0 0 0 / 37.5%);
@@ -122,6 +123,18 @@
122
123
  --color--super-teal--900: #006b78;
123
124
  --color--super-teal--1000: #004f59;
124
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;
125
138
  --color--transparent: transparent;
126
139
  --avatar--size--m: 2.5rem;
127
140
  --code--default-syntax-color-addition: #397300;
@@ -275,6 +288,17 @@
275
288
  --border-width--200: var(--size-px--xxs);
276
289
  --border-width--300: var(--size-px--xs);
277
290
  --border-width--400: var(--size-px--s);
291
+ --chat--spacing: var(--size-px--m);
292
+ --message-separator--font-size: var(--font-size-text--s);
293
+ --message-separator--padding: var(--size-px--m);
294
+ --message-thread--spacing: var(--size-rem--l);
295
+ --message-thread--indentation: var(--size-px--m);
296
+ --message--padding-y: var(--size-px--s);
297
+ --message--padding-x: var(--size-px--m);
298
+ --message--spacing-y: var(--size-rem--s);
299
+ --message--spacing-x: var(--size-rem--m);
300
+ --message--background-color-responder: var(--color--gray--400);
301
+ --message--background-color-sender: var(--color--hosting-blue--200);
278
302
  --primary--color--100: var(--color--hosting-blue--100);
279
303
  --primary--color--200: var(--color--hosting-blue--200);
280
304
  --primary--color--300: var(--color--hosting-blue--300);
@@ -434,6 +458,7 @@
434
458
  --heading--font-weight: var(--font-weight--bold);
435
459
  --illustrated-message--padding: var(--size-px--m);
436
460
  --illustrated-message--spacing: var(--size-rem--m);
461
+ --image--border-style: var(--border-style--default);
437
462
  --initials--font-weight: var(--font-weight--bold);
438
463
  --label--font-size: var(--font-size-text--s);
439
464
  --label--font-weight: var(--font-weight--bold);
@@ -441,12 +466,9 @@
441
466
  --labeled-value--label-to-value-spacing: var(--size-rem--xxs);
442
467
  --labeled-value--value-to-action-spacing: var(--size-rem--xs);
443
468
  --markdown--spacing: var(--size-rem--m);
444
- --message--padding-y: var(--size-px--s);
445
- --message--padding-x: var(--size-px--m);
446
- --message--spacing-y: var(--size-rem--s);
447
- --message--spacing-x: var(--size-rem--m);
448
- --message--background-color-responder: var(--color--gray--400);
449
- --message--background-color-sender: var(--color--hosting-blue--200);
469
+ --text--blockquote-border-style: var(--border-style--default);
470
+ --text--blockquote-padding: var(--size-rem--s);
471
+ --text--list-padding: var(--size-rem--l);
450
472
  --focus--outline-offset: var(--size-px--xxs);
451
473
  --line-height--m: calc(var(--font-size-text--m) * 1.5);
452
474
  --line-height--s: calc(var(--font-size-text--s) * 1.5);
@@ -467,16 +489,13 @@
467
489
  --form-control--padding-y: var(--size-px--s);
468
490
  --form-control--border-style: var(--border-style--default);
469
491
  --segmented-button--text-to-text-spacing: var(--size-rem--xs);
492
+ --slider--spacing-x: var(--size-rem--s);
493
+ --slider--spacing-y: var(--size-rem--m);
494
+ --slider--border-style: var(--border-style--default);
470
495
  --slider--value-font-weight: var(--font-weight--bold);
471
- --slider--value-to-label-spacing: var(--size-rem--xs);
472
- --slider--text-to-track-spacing: var(--size-rem--xs);
473
- --slider--track-height: var(--size-rem--xs);
474
- --slider--thumb-border-width: var(--size-rem--xs);
475
- --slider--thumb-border-style: var(--border-style--default);
476
- --slider--thumb-corner-radius: var(--corner-radius--round);
477
- --slider--thumb-size: var(--size-rem--l);
496
+ --slider--handle-corner-radius: var(--corner-radius--round);
497
+ --slider--handle-size: var(--size-rem--l);
478
498
  --slider--initial-marker-height: var(--size-rem--m);
479
- --slider--initial-marker-width: var(--size-rem--xs);
480
499
  --switch--label-to-track-spacing: var(--size-rem--s);
481
500
  --switch--track-padding: var(--size-rem--xxs);
482
501
  --time-field--date-segment-corner-radius: var(--size-px--xs);
@@ -493,7 +512,7 @@
493
512
  --header-navigation--spacing: var(--size-rem--m);
494
513
  --header-navigation--corner-radius-round: var(--corner-radius--round);
495
514
  --header-navigation--font-weight-current: var(--font-weight--bold);
496
- --link--font-size: var(--font-size-text--s);
515
+ --link--icon-height: calc(var(--font-size-text--m) * 1.25);
497
516
  --link--font-weight: var(--font-weight--bold);
498
517
  --link--spacing: var(--size-rem--xs);
499
518
  --link--color-dark--default: var(--dark--color--800);
@@ -505,7 +524,6 @@
505
524
  --tabs--padding: var(--size-px--m);
506
525
  --tabs--font-weight--selected: var(--font-weight--bold);
507
526
  --tabs--spacing: var(--size-rem--s);
508
- --tab-panel--padding: var(--size-px--xl);
509
527
  --light-box--overlay-background-color: var(--dark--color--600);
510
528
  --light-box--max-width: calc(100dvw - var(--size-px--l));
511
529
  --light-box--max-height: calc(100dvh - var(--size-px--l));
@@ -643,11 +661,14 @@
643
661
  --align--avatar-text--spacing: var(--size-rem--s);
644
662
  --align--input-button--spacing: var(--size-px--m);
645
663
  --align--text-copyButton--spacing: var(--size-rem--xs);
664
+ --align--icon-text--spacing: var(--size-rem--s);
665
+ --align--text-contextualHelp--spacing: var(--size-rem--xs);
646
666
  --column-layout--gap--s: var(--size-px--s);
647
667
  --column-layout--gap--m: var(--size-px--m);
648
668
  --column-layout--gap--l: var(--size-px--l);
649
669
  --column-layout--gap--xl: var(--size-px--xl);
650
- --layout-card--padding: var(--size-px--xl);
670
+ --layout-card--padding: var(--size-px--l);
671
+ --layout-card--padding-mobile: var(--size-px--m);
651
672
  --list--spacing: var(--size-px--s);
652
673
  --list--block-to-block-spacing: var(--size-px--m);
653
674
  --list-item--padding: var(--size-px--s);
@@ -657,7 +678,8 @@
657
678
  --list-item--subtitle-font-size: var(--font-size-text--s);
658
679
  --section--section-to-section-spacing: var(--size-rem--xl);
659
680
  --section--spacing: var(--size-rem--m);
660
- --section--sub-heading-spacing: var(--size-rem--m);
681
+ --section--sub-heading-spacing-m: var(--size-rem--l);
682
+ --section--sub-heading-spacing-s: var(--size-rem--s);
661
683
  --section-header--action-to-action-spacing: var(--size-rem--s);
662
684
  --section-header--heading-to-action-spacing: var(--size-rem--m);
663
685
  --table--border-style: var(--border-style--default);
@@ -670,6 +692,9 @@
670
692
  --file-card--spacing: var(--size-rem--s);
671
693
  --file-card--border-style: var(--border-style--default);
672
694
  --file-card--sub-title-font-size: var(--font-size-text--s);
695
+ --file-drop-zone--padding: var(--size-px--m);
696
+ --file-drop-zone--border-style--default: var(--border-style--dashed);
697
+ --file-drop-zone--border-style--target: var(--border-style--default);
673
698
  --button--corner-radius: var(--corner-radius--default);
674
699
  --button--pending-icon-color: var(--neutral--color--1000);
675
700
  --button--succeeded-icon-color: var(--success--color--800);
@@ -760,6 +785,9 @@
760
785
  --menu-item--icon-color--default: var(--neutral--color--800);
761
786
  --menu-item--icon-color--current: var(--primary--color--800);
762
787
  --menu-item--disabled-background-color: var(--disabled-plain-background-color);
788
+ --message-separator--background-color: var(--neutral--color--100);
789
+ --message-separator--color: var(--neutral--color--800);
790
+ --message--corner-radius: var(--corner-radius--default);
763
791
  --primary-solid-background-color--default: var(--primary--color--800);
764
792
  --primary-solid-background-color--hover: var(--primary--color--900);
765
793
  --primary-solid-background-color--pressed: var(--primary--color--1000);
@@ -865,6 +893,7 @@
865
893
  --disabled-outline-border-color: var(--neutral--color--400);
866
894
  --disabled-soft-background-color: var(--neutral--color--300);
867
895
  --disabled-soft-content-color: var(--neutral--color--500);
896
+ --avatar-stack--border-width: var(--border-width--200);
868
897
  --code--line-height: var(--line-height--m);
869
898
  --code--corner-radius: var(--corner-radius--default);
870
899
  --code--light-background-color: var(--light-soft-background-color--default);
@@ -880,12 +909,14 @@
880
909
  --illustrated-message--danger-heading-color: var(--danger--color--1000);
881
910
  --illustrated-message--dark-icon-color: var(--dark-plain-content-color);
882
911
  --illustrated-message--light-icon-color: var(--light-plain-content-color);
912
+ --image--corner-radius: var(--corner-radius--default);
913
+ --image--border-width: var(--border-width--100);
883
914
  --label--line-height: var(--line-height--m);
884
915
  --label--color--default: var(--neutral--color--800);
885
- --message--corner-radius: var(--corner-radius--default);
886
916
  --text--color--default: var(--neutral--color--1000);
887
917
  --text--color--light: var(--light-plain-content-color);
888
918
  --text--color--dark: var(--dark-plain-content-color);
919
+ --text--blockquote-border-width: var(--border-width--300);
889
920
  --focus--outline-color: var(--primary--color--800);
890
921
  --focus--outline-width: var(--border-width--200);
891
922
  --choice--icon-color--selected: var(--primary--color--800);
@@ -904,9 +935,13 @@
904
935
  --form-control--background-color--focused: var(--neutral--color--300);
905
936
  --form-control--background-color--invalid: var(--danger--color--100);
906
937
  --form-control--background-color--selected: var(--primary--color--200);
907
- --slider--track-corner-radius: var(--corner-radius--default);
908
- --slider--thumb-background-color--default: var(--neutral--color--100);
909
- --slider--initial-marker-corner-radius: var(--corner-radius--default);
938
+ --slider--color--default: var(--primary--color--1000);
939
+ --slider--color--disabled: var(--neutral--color--600);
940
+ --slider--track-color--default: var(--neutral--color--700);
941
+ --slider--track-color--disabled: var(--neutral--color--400);
942
+ --slider--border-width: var(--border-width--300);
943
+ --slider--corner-radius: var(--corner-radius--default);
944
+ --slider--handle-fill-color: var(--neutral--color--100);
910
945
  --switch--handle-color--disabled: var(--neutral--color--500);
911
946
  --switch--handle-background-color--default: var(--neutral--color--100);
912
947
  --switch--handle-background-color--disabled: var(--neutral--color--300);
@@ -987,6 +1022,9 @@
987
1022
  --file-card--corner-radius: var(--corner-radius--default);
988
1023
  --file-card--border-width: var(--border-width--100);
989
1024
  --file-card--background-color--default: var(--neutral--color--100);
1025
+ --file-drop-zone--corner-radius: var(--corner-radius--default);
1026
+ --file-drop-zone--border-width: var(--border-width--100);
1027
+ --file-drop-zone--border-color--target: var(--primary--color--800);
990
1028
  --button--accent-solid-background-color--default: var(--success-solid-background-color--default);
991
1029
  --button--accent-solid-background-color--hover: var(--success-solid-background-color--hover);
992
1030
  --button--accent-solid-background-color--pressed: var(--success-solid-background-color--pressed);
@@ -1120,8 +1158,10 @@
1120
1158
  --illustrated-message--primary-heading-color: var(--heading--color);
1121
1159
  --illustrated-message--dark-heading-color: var(--heading--color-dark);
1122
1160
  --illustrated-message--light-heading-color: var(--heading--color-light);
1161
+ --image--border-color: var(--neutral-outline-border-color);
1123
1162
  --label--color--disabled: var(--disabled-plain-content-color);
1124
1163
  --text--color--disabled: var(--disabled-plain-content-color);
1164
+ --text--blockquote-border-color: var(--info-outline-border-color);
1125
1165
  --choice--icon-color--default: var(--icon--color);
1126
1166
  --choice--icon-color--disabled: var(--disabled-outline-content-color);
1127
1167
  --date-picker--date-segment-background-color--focused: var(--primary-plain-background-color--pressed);
@@ -1137,16 +1177,6 @@
1137
1177
  --form-control--content-color--default: var(--neutral-outline-content-color);
1138
1178
  --form-control--content-color--disabled: var(--disabled-outline-content-color);
1139
1179
  --form-control--content-color--selected: var(--neutral-outline-content-color);
1140
- --slider--text-color--disabled: var(--disabled-plain-content-color);
1141
- --slider--track-background-color--default: var(--primary-soft-background-color--default);
1142
- --slider--track-background-color--disabled: var(--disabled-soft-background-color);
1143
- --slider--track-background-color-fill--default: var(--primary-solid-background-color--default);
1144
- --slider--track-background-color-fill--disabled: var(--disabled-solid-background-color);
1145
- --slider--thumb-border-color--default: var(--primary-solid-background-color--default);
1146
- --slider--thumb-border-color--disabled: var(--disabled-solid-background-color);
1147
- --slider--thumb-background-color--pressed: var(--primary-solid-background-color--default);
1148
- --slider--initial-marker-background-color--default: var(--primary-solid-background-color--default);
1149
- --slider--initial-marker-background-color--disabled: var(--disabled-solid-background-color);
1150
1180
  --switch--track-background-color--default: var(--neutral-solid-background-color--default);
1151
1181
  --switch--track-background-color--disabled: var(--disabled-solid-background-color);
1152
1182
  --switch--track-background-color--selected: var(--success-solid-background-color--default);
@@ -1233,4 +1263,7 @@
1233
1263
  --file-card--border-color: var(--neutral-outline-border-color);
1234
1264
  --file-card--background-color--hover: var(--neutral-outline-background-color--hover);
1235
1265
  --file-card--background-color--pressed: var(--neutral-outline-background-color--pressed);
1266
+ --file-drop-zone--background-color--default: var(--form-control--background-color--default);
1267
+ --file-drop-zone--background-color--target: var(--form-control--background-color--hover);
1268
+ --file-drop-zone--border-color--default: var(--form-control--border-color--default);
1236
1269
  }