@mittwald/flow-design-tokens 0.1.0-alpha.388 → 0.1.0-alpha.389

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 +40 -51
  2. package/dist/variables.json +495 -702
  3. package/package.json +2 -2
package/dist/variables.css CHANGED
@@ -263,6 +263,13 @@
263
263
  --button--font-size-s: var(--font-size-text--s);
264
264
  --button--line-height-s: var(--size-rem--m);
265
265
  --image-button--hover-icon-color: var(--color--gray--100);
266
+ --menu--item-to-item-spacing: var(--size-px--xs);
267
+ --menu--group-to-group-spacing: var(--size-px--m);
268
+ --menu-item--font-weight--current: var(--font-weight--bold);
269
+ --menu-item--padding-x: var(--size-px--s);
270
+ --menu-item--padding-y: var(--size-px--xs);
271
+ --menu-item--spacing: var(--size-rem--s);
272
+ --menu-item--background-color--default: var(--color--transparent);
266
273
  --corner-radius--default: var(--size-px--xs);
267
274
  --border-width--100: var(--size-px--xxxs);
268
275
  --border-width--200: var(--size-px--xxs);
@@ -378,7 +385,7 @@
378
385
  --dark-outline-background-color--default: var(--color--transparent);
379
386
  --dark-outline-background-color--hover: var(--dark--color--100);
380
387
  --dark-outline-background-color--pressed: var(--dark--color--200);
381
- --dark-outline-border-color: var(--dark--color--700);
388
+ --dark-outline-border-color: var(--dark--color--800);
382
389
  --dark-outline-content-color: var(--dark--color--800);
383
390
  --light-solid-background-color--default: var(--light--color--800);
384
391
  --light-solid-background-color--hover: var(--light--color--700);
@@ -396,7 +403,7 @@
396
403
  --light-outline-background-color--hover: var(--light--color--100);
397
404
  --light-outline-background-color--pressed: var(--light--color--200);
398
405
  --light-outline-border-color: var(--light--color--800);
399
- --light-outline-content-color: var(--light--color--700);
406
+ --light-outline-content-color: var(--light--color--800);
400
407
  --avatar--size--xs: var(--size-rem--l);
401
408
  --avatar--size--s: var(--size-rem--xl);
402
409
  --avatar--size--l: var(--size-rem--xxl);
@@ -495,13 +502,6 @@
495
502
  --link--color-light--default: var(--light--color--800);
496
503
  --link--color-light--hover: var(--light--color--700);
497
504
  --link--color-light--pressed: var(--light--color--600);
498
- --menu--item-to-item-spacing: var(--size-px--xs);
499
- --menu--group-to-group-spacing: var(--size-px--m);
500
- --menu-item--font-weight--current: var(--font-weight--bold);
501
- --menu-item--padding-x: var(--size-px--s);
502
- --menu-item--padding-y: var(--size-px--xs);
503
- --menu-item--spacing: var(--size-rem--s);
504
- --menu-item--background-color--default: var(--color--transparent);
505
505
  --tabs--padding: var(--size-px--m);
506
506
  --tabs--font-weight--selected: var(--font-weight--bold);
507
507
  --tabs--spacing: var(--size-rem--s);
@@ -529,11 +529,10 @@
529
529
  --tooltip--tip-size: var(--size-px--s);
530
530
  --shadow--content: rgba(0, 0, 0, 0.1) 0 var(--size-px--xs) var(--size-px--s);
531
531
  --shadow--overlay: rgba(0, 0, 0, 0.14) 0 var(--size-px--m) var(--size-px--l);
532
- --alert-badge--icon-to-text-spacing: var(--size-rem--xs);
533
532
  --alert--padding: var(--size-px--m);
534
533
  --alert--border-style: var(--border-style--default);
535
- --alert--heading-to-content-spacing: var(--size-rem--xs);
536
- --alert--content-to-content-spacing: var(--size-rem--s);
534
+ --alert--heading-to-content-spacing: var(--size-rem--s);
535
+ --alert--spacing: var(--size-rem--m);
537
536
  --alert--font-size-heading: var(--font-size-text--m);
538
537
  --badge--font-size: var(--font-size-text--s);
539
538
  --badge--font-weight: var(--font-weight--bold);
@@ -542,13 +541,12 @@
542
541
  --badge--border-style: var(--border-style--default);
543
542
  --badge--padding-y: var(--size-rem--xs);
544
543
  --badge--padding-x: var(--size-rem--s);
545
- --badge--content-to-content-spacing: var(--size-rem--xs);
544
+ --badge--spacing: var(--size-rem--xs);
546
545
  --badge--neutral-border-color: var(--color--gray--800);
547
546
  --badge--neutral-background-color--default: var(--color--gray--300);
548
547
  --badge--neutral-background-color--hover: var(--color--gray--400);
549
548
  --badge--neutral-background-color--pressed: var(--color--gray--500);
550
549
  --badge--neutral-content-color--default: var(--color--gray--900);
551
- --badge--neutral-content-color--hover: var(--color--gray--900);
552
550
  --badge--neutral-content-color--pressed: var(--color--gray--1000);
553
551
  --badge--neutral-scope-background-color: var(--color--gray--800);
554
552
  --badge--blue-border-color: var(--color--hosting-blue--800);
@@ -556,7 +554,6 @@
556
554
  --badge--blue-background-color--hover: var(--color--hosting-blue--200);
557
555
  --badge--blue-background-color--pressed: var(--color--hosting-blue--300);
558
556
  --badge--blue-content-color--default: var(--color--hosting-blue--900);
559
- --badge--blue-content-color--hover: var(--color--hosting-blue--900);
560
557
  --badge--blue-content-color--pressed: var(--color--hosting-blue--1000);
561
558
  --badge--blue-scope-background-color: var(--color--hosting-blue--800);
562
559
  --badge--navy-border-color: var(--color--mittwald-navy--800);
@@ -564,7 +561,6 @@
564
561
  --badge--navy-background-color--hover: var(--color--mittwald-navy--200);
565
562
  --badge--navy-background-color--pressed: var(--color--mittwald-navy--300);
566
563
  --badge--navy-content-color--default: var(--color--mittwald-navy--900);
567
- --badge--navy-content-color--hover: var(--color--mittwald-navy--900);
568
564
  --badge--navy-content-color--pressed: var(--color--mittwald-navy--1000);
569
565
  --badge--navy-scope-background-color: var(--color--mittwald-navy--800);
570
566
  --badge--violet-border-color: var(--color--soft-contrast-violet--800);
@@ -572,7 +568,6 @@
572
568
  --badge--violet-background-color--hover: var(--color--soft-contrast-violet--200);
573
569
  --badge--violet-background-color--pressed: var(--color--soft-contrast-violet--300);
574
570
  --badge--violet-content-color--default: var(--color--soft-contrast-violet--900);
575
- --badge--violet-content-color--hover: var(--color--soft-contrast-violet--900);
576
571
  --badge--violet-content-color--pressed: var(--color--soft-contrast-violet--1000);
577
572
  --badge--violet-scope-background-color: var(--color--soft-contrast-violet--800);
578
573
  --badge--teal-border-color: var(--color--super-teal--800);
@@ -580,7 +575,6 @@
580
575
  --badge--teal-background-color--hover: var(--color--super-teal--200);
581
576
  --badge--teal-background-color--pressed: var(--color--super-teal--300);
582
577
  --badge--teal-content-color--default: var(--color--super-teal--900);
583
- --badge--teal-content-color--hover: var(--color--super-teal--900);
584
578
  --badge--teal-content-color--pressed: var(--color--super-teal--1000);
585
579
  --badge--teal-scope-background-color: var(--color--super-teal--800);
586
580
  --badge--lilac-border-color: var(--color--bright-lilac--800);
@@ -588,7 +582,6 @@
588
582
  --badge--lilac-background-color--hover: var(--color--bright-lilac--200);
589
583
  --badge--lilac-background-color--pressed: var(--color--bright-lilac--300);
590
584
  --badge--lilac-content-color--default: var(--color--bright-lilac--900);
591
- --badge--lilac-content-color--hover: var(--color--bright-lilac--900);
592
585
  --badge--lilac-content-color--pressed: var(--color--bright-lilac--1000);
593
586
  --badge--lilac-scope-background-color: var(--color--bright-lilac--800);
594
587
  --badge--red-border-color: var(--color--amaranth-red--800);
@@ -596,7 +589,6 @@
596
589
  --badge--red-background-color--hover: var(--color--amaranth-red--200);
597
590
  --badge--red-background-color--pressed: var(--color--amaranth-red--300);
598
591
  --badge--red-content-color--default: var(--color--amaranth-red--900);
599
- --badge--red-content-color--hover: var(--color--amaranth-red--900);
600
592
  --badge--red-content-color--pressed: var(--color--amaranth-red--1000);
601
593
  --badge--red-scope-background-color: var(--color--amaranth-red--800);
602
594
  --badge--green-border-color: var(--color--espelkamp-green--800);
@@ -604,7 +596,6 @@
604
596
  --badge--green-background-color--hover: var(--color--espelkamp-green--200);
605
597
  --badge--green-background-color--pressed: var(--color--espelkamp-green--300);
606
598
  --badge--green-content-color--default: var(--color--espelkamp-green--900);
607
- --badge--green-content-color--hover: var(--color--espelkamp-green--900);
608
599
  --badge--green-content-color--pressed: var(--color--espelkamp-green--1000);
609
600
  --badge--green-scope-background-color: var(--color--espelkamp-green--800);
610
601
  --badge--orange-border-color: var(--color--royal-orange--900);
@@ -612,7 +603,6 @@
612
603
  --badge--orange-background-color--hover: var(--color--royal-orange--200);
613
604
  --badge--orange-background-color--pressed: var(--color--royal-orange--300);
614
605
  --badge--orange-content-color--default: var(--color--royal-orange--900);
615
- --badge--orange-content-color--hover: var(--color--royal-orange--900);
616
606
  --badge--orange-content-color--pressed: var(--color--royal-orange--1000);
617
607
  --badge--orange-scope-background-color: var(--color--royal-orange--900);
618
608
  --badge--dark-border-color: var(--dark--color--800);
@@ -620,7 +610,6 @@
620
610
  --badge--dark-background-color--hover: var(--dark--color--200);
621
611
  --badge--dark-background-color--pressed: var(--dark--color--300);
622
612
  --badge--dark-content-color--default: var(--dark--color--800);
623
- --badge--dark-content-color--hover: var(--dark--color--800);
624
613
  --badge--dark-content-color--pressed: var(--dark--color--800);
625
614
  --badge--dark-scope-background-color: var(--dark--color--800);
626
615
  --badge--light-border-color: var(--light--color--800);
@@ -628,7 +617,6 @@
628
617
  --badge--light-background-color--hover: var(--light--color--200);
629
618
  --badge--light-background-color--pressed: var(--light--color--300);
630
619
  --badge--light-content-color--default: var(--light--color--800);
631
- --badge--light-content-color--hover: var(--light--color--800);
632
620
  --badge--light-content-color--pressed: var(--light--color--800);
633
621
  --badge--light-scope-background-color: var(--light--color--800);
634
622
  --counter-badge--font-weight: var(--font-weight--bold);
@@ -639,6 +627,7 @@
639
627
  --notification--padding: var(--size-px--s);
640
628
  --notification--border-style: var(--border-style--default);
641
629
  --notification--heading-to-text-spacing: var(--size-rem--xs);
630
+ --notification--spacing: var(--size-rem--s);
642
631
  --notification--font-size: var(--font-size-text--s);
643
632
  --progress-bar--font-size: var(--font-size-text--m);
644
633
  --progress-bar--font-size-s: var(--font-size-text--s);
@@ -647,31 +636,30 @@
647
636
  --progress-bar--spacing-x: var(--size-rem--m);
648
637
  --progress-bar--height: var(--size-rem--s);
649
638
  --progress-bar--corner-radius: var(--size-rem--xs);
650
- --accordion--heading-to-chevron-spacing: var(--size-rem--s);
651
- --accordion--header-padding-x: var(--size-px--s);
652
- --accordion--header-padding-y: var(--size-px--xs);
653
- --accordion--content-padding: var(--size-px--s);
639
+ --accordion--spacing: var(--size-rem--s);
640
+ --accordion--border-style: var(--border-style--default);
641
+ --accordion--padding-x: var(--size-px--s);
642
+ --accordion--padding-y: var(--size-px--xs);
654
643
  --align--avatar-text--spacing: var(--size-rem--s);
655
644
  --align--input-button--spacing: var(--size-px--m);
656
645
  --align--text-copyButton--spacing: var(--size-rem--xs);
657
- --column-layout--content-to-content-spacing: var(--size-rem--m);
658
646
  --column-layout--gap--s: var(--size-px--s);
659
647
  --column-layout--gap--m: var(--size-px--m);
660
648
  --column-layout--gap--l: var(--size-px--l);
661
649
  --column-layout--gap--xl: var(--size-px--xl);
662
650
  --layout-card--padding: var(--size-px--xl);
663
- --list--content-to-content-spacing: var(--size-px--s);
651
+ --list--spacing: var(--size-px--s);
664
652
  --list--block-to-block-spacing: var(--size-px--m);
665
653
  --list-item--padding: var(--size-px--s);
666
654
  --list-item--border-style: var(--border-style--default);
667
- --list-item--content-to-content-spacing: var(--size-px--m);
655
+ --list-item--spacing: var(--size-px--m);
656
+ --list-item--avatar-to-title-spacing: var(--size-px--s);
668
657
  --list-item--subtitle-font-size: var(--font-size-text--s);
669
- --section--border-style: var(--border-style--default);
670
658
  --section--section-to-section-spacing: var(--size-rem--xl);
671
- --section--content-to-content-spacing: var(--size-rem--m);
659
+ --section--spacing: var(--size-rem--m);
672
660
  --section--sub-heading-spacing: var(--size-rem--m);
673
661
  --section-header--action-to-action-spacing: var(--size-rem--s);
674
- --section-header--heading-to-actions-spacing: var(--size-rem--m);
662
+ --section-header--heading-to-action-spacing: var(--size-rem--m);
675
663
  --table--border-style: var(--border-style--default);
676
664
  --table--padding-x: var(--size-px--m);
677
665
  --table--padding-y: var(--size-px--s);
@@ -767,6 +755,11 @@
767
755
  --button--light-outline-content-color--disabled: var(--disabled-outline-light-content-color);
768
756
  --button--light-outline-border-color--default: var(--light-outline-border-color);
769
757
  --button--light-outline-border-color--disabled: var(--disabled-outline-light-border-color);
758
+ --menu-item--corner-radius: var(--corner-radius--default);
759
+ --menu-item--color--current: var(--primary--color--800);
760
+ --menu-item--icon-color--default: var(--neutral--color--800);
761
+ --menu-item--icon-color--current: var(--primary--color--800);
762
+ --menu-item--disabled-background-color: var(--disabled-plain-background-color);
770
763
  --primary-solid-background-color--default: var(--primary--color--800);
771
764
  --primary-solid-background-color--hover: var(--primary--color--900);
772
765
  --primary-solid-background-color--pressed: var(--primary--color--1000);
@@ -935,11 +928,6 @@
935
928
  --link--color--pressed: var(--primary--color--1000);
936
929
  --link--color-dark--disabled: var(--disabled-plain-dark-content-color);
937
930
  --link--color-light--disabled: var(--disabled-plain-light-content-color);
938
- --menu-item--corner-radius: var(--corner-radius--default);
939
- --menu-item--color--current: var(--primary--color--800);
940
- --menu-item--icon-color--default: var(--neutral--color--800);
941
- --menu-item--icon-color--current: var(--primary--color--800);
942
- --menu-item--disabled-background-color: var(--disabled-plain-background-color);
943
931
  --tabs--background-color--selected: var(--neutral--color--100);
944
932
  --modal--corner-radius: var(--corner-radius--default);
945
933
  --modal--background-color: var(--neutral--color--100);
@@ -977,7 +965,10 @@
977
965
  --notification--success-background-color--default: var(--neutral--color--100);
978
966
  --progress-bar--border-width: var(--border-width--100);
979
967
  --progress-bar--background-color: var(--neutral-outline-background-color--default);
980
- --accordion--header-corner-radius: var(--corner-radius--default);
968
+ --accordion--corner-radius: var(--corner-radius--default);
969
+ --accordion--border-width: var(--border-width--100);
970
+ --accordion--background-color--hover: var(--primary--color--100);
971
+ --accordion--background-color--pressed: var(--primary--color--100);
981
972
  --layout-card--background-color: var(--neutral--color--100);
982
973
  --layout-card--corner-radius: var(--corner-radius--default);
983
974
  --layout-card--box-shadow: var(--shadow--content);
@@ -986,7 +977,6 @@
986
977
  --list-item--background-color--default: var(--neutral--color--200);
987
978
  --list-item--background-color--hover: var(--primary--color--100);
988
979
  --list-item--background-color--pressed: var(--primary--color--200);
989
- --separator--color: var(--neutral--color--700);
990
980
  --separator--height: var(--border-width--100);
991
981
  --table--corner-radius: var(--corner-radius--default);
992
982
  --table--border-width: var(--border-width--100);
@@ -1121,6 +1111,10 @@
1121
1111
  --button--danger-outline-content-color--disabled: var(--disabled-outline-content-color);
1122
1112
  --button--danger-outline-border-color--default: var(--danger-outline-border-color);
1123
1113
  --button--danger-outline-border-color--disabled: var(--disabled-outline-border-color);
1114
+ --menu-item--icon-color--disabled: var(--disabled-plain-content-color);
1115
+ --menu-item--background-color--hover: var(--primary-plain-background-color--hover);
1116
+ --menu-item--background-color--current: var(--primary-plain-background-color--pressed);
1117
+ --menu-item--disabled-color: var(--disabled-plain-content-color);
1124
1118
  --code--default-background-color: var(--neutral-soft-background-color--default);
1125
1119
  --code--default-content-color: var(--neutral-soft-content-color--default);
1126
1120
  --illustrated-message--primary-heading-color: var(--heading--color);
@@ -1161,10 +1155,6 @@
1161
1155
  --header-navigation--background-color--hover: var(--primary-plain-background-color--hover);
1162
1156
  --header-navigation--background-color--pressed: var(--primary-plain-background-color--pressed);
1163
1157
  --link--color--disabled: var(--disabled-plain-content-color);
1164
- --menu-item--icon-color--disabled: var(--disabled-plain-content-color);
1165
- --menu-item--background-color--hover: var(--primary-plain-background-color--hover);
1166
- --menu-item--background-color--current: var(--primary-plain-background-color--pressed);
1167
- --menu-item--disabled-color: var(--disabled-plain-content-color);
1168
1158
  --tabs--background-color--default: var(--neutral-soft-background-color--default);
1169
1159
  --tabs--background-color--hover: var(--neutral-soft-background-color--hover);
1170
1160
  --tabs--background-color--pressed: var(--neutral-soft-background-color--pressed);
@@ -1209,12 +1199,12 @@
1209
1199
  --badge--dark-scope-content-color: var(--text--color--light);
1210
1200
  --badge--light-scope-content-color: var(--text--color--dark);
1211
1201
  --badge--disabled-border-color: var(--disabled-outline-border-color);
1212
- --badge--disabled-background-color: var(--disabled-soft-background-color);
1213
- --badge--disabled-content-color: var(--disabled-soft-content-color);
1202
+ --badge--disabled-background-color: var(--disabled-outline-background-color);
1203
+ --badge--disabled-content-color: var(--disabled-outline-content-color);
1214
1204
  --badge--disabled-scope-background-color: var(--disabled-solid-background-color);
1215
1205
  --badge--disabled-scope-content-color: var(--disabled-solid-content-color);
1216
1206
  --counter-badge--background-color: var(--success-solid-background-color--default);
1217
- --counter-badge--color: var(--success-solid-content-color);
1207
+ --counter-badge--content-color: var(--success-solid-content-color);
1218
1208
  --notification--info-border-color: var(--info-outline-border-color);
1219
1209
  --notification--info-heading-color: var(--info-outline-content-color);
1220
1210
  --notification--info-background-color--hover: var(--info-outline-background-color--hover);
@@ -1236,10 +1226,9 @@
1236
1226
  --progress-bar--success-fill-background-color: var(--success-solid-background-color--default);
1237
1227
  --progress-bar--warning-fill-background-color: var(--warning-solid-background-color--default);
1238
1228
  --progress-bar--danger-fill-background-color: var(--danger-solid-background-color--default);
1239
- --accordion--header-background-color--hover: var(--primary-plain-background-color--hover);
1229
+ --accordion--border-color: var(--neutral-outline-border-color);
1240
1230
  --list-item--border-color: var(--neutral-outline-border-color);
1241
- --section--border-width: var(--separator--height);
1242
- --section--border-color: var(--separator--color);
1231
+ --separator--color: var(--neutral-outline-border-color);
1243
1232
  --table--border-color: var(--neutral-outline-border-color);
1244
1233
  --file-card--border-color: var(--neutral-outline-border-color);
1245
1234
  --file-card--background-color--hover: var(--neutral-outline-background-color--hover);