@mittwald/flow-design-tokens 0.1.0-alpha.359 → 0.1.0-alpha.361

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 +67 -70
  2. package/dist/variables.json +800 -833
  3. package/package.json +3 -3
package/dist/variables.css CHANGED
@@ -261,17 +261,7 @@
261
261
  --button--spacing-s: var(--size-rem--xs);
262
262
  --button--font-size-s: var(--font-size-text--s);
263
263
  --button--line-height-s: var(--size-rem--m);
264
- --context-menu--padding: var(--size-px--s);
265
264
  --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--label-to-group-spacing: var(--size-px--xs);
269
- --menu--separator-to-item-spacing: var(--size-px--s);
270
- --menu-item--font-weight--current: var(--font-weight--bold);
271
- --menu-item--padding-x: var(--size-px--s);
272
- --menu-item--padding-y: var(--size-px--xs);
273
- --menu-item--icon-to-text-spacing: var(--size-rem--s);
274
- --menu-item--background-color--default: var(--color--transparent);
275
265
  --corner-radius--default: var(--size-px--xs);
276
266
  --border-width--100: var(--size-px--xxxs);
277
267
  --border-width--200: var(--size-px--xxs);
@@ -481,49 +471,60 @@
481
471
  --switch--label-to-track-spacing: var(--size-rem--s);
482
472
  --switch--track-padding: var(--size-rem--xxs);
483
473
  --time-field--date-segment-corner-radius: var(--size-px--xs);
484
- --breadcrumb-item--padding-x: var(--size-px--xs);
485
- --breadcrumb-item--font-size: var(--font-size-text--s);
486
- --breadcrumb-item--font-weight--default: var(--font-weight--normal);
487
- --breadcrumb-item--font-weight--current: var(--font-weight--bold);
488
- --header-navigation--item-to-item-spacing: var(--size-rem--m);
489
- --header-navigation--item-padding: var(--size-px--s);
490
- --header-navigation--item-font-weight-current: var(--font-weight--bold);
474
+ --breadcrumb--color-light--default: var(--light--color--800);
475
+ --breadcrumb--color-light--hover: var(--light--color--700);
476
+ --breadcrumb--color-light--pressed: var(--light--color--600);
477
+ --breadcrumb--color-dark--default: var(--dark--color--800);
478
+ --breadcrumb--color-dark--hover: var(--dark--color--700);
479
+ --breadcrumb--color-dark--pressed: var(--dark--color--600);
480
+ --breadcrumb--spacing: var(--size-rem--s);
481
+ --breadcrumb--font-weight--default: var(--font-weight--normal);
482
+ --breadcrumb--font-weight--current: var(--font-weight--bold);
483
+ --header-navigation--padding: var(--size-px--s);
484
+ --header-navigation--spacing: var(--size-rem--m);
485
+ --header-navigation--corner-radius-round: var(--corner-radius--round);
486
+ --header-navigation--font-weight-current: var(--font-weight--bold);
491
487
  --link--font-size: var(--font-size-text--s);
492
488
  --link--font-weight: var(--font-weight--bold);
493
- --link--text-to-icon-spacing: var(--size-rem--xs);
489
+ --link--spacing: var(--size-rem--xs);
494
490
  --link--color-dark--default: var(--dark--color--800);
495
491
  --link--color-dark--hover: var(--dark--color--700);
496
492
  --link--color-dark--pressed: var(--dark--color--600);
497
493
  --link--color-light--default: var(--light--color--800);
498
494
  --link--color-light--hover: var(--light--color--700);
499
495
  --link--color-light--pressed: var(--light--color--600);
500
- --tab--padding-y: var(--size-px--m);
501
- --tab--padding-x: var(--size-px--l);
502
- --tab--font-weight--selected: var(--font-weight--bold);
503
- --tab--text-to-status-spacing: var(--size-rem--s);
496
+ --menu--item-to-item-spacing: var(--size-px--xs);
497
+ --menu--group-to-group-spacing: var(--size-px--m);
498
+ --menu-item--font-weight--current: var(--font-weight--bold);
499
+ --menu-item--padding-x: var(--size-px--s);
500
+ --menu-item--padding-y: var(--size-px--xs);
501
+ --menu-item--spacing: var(--size-rem--s);
502
+ --menu-item--background-color--default: var(--color--transparent);
503
+ --tabs--padding: var(--size-px--m);
504
+ --tabs--font-weight--selected: var(--font-weight--bold);
505
+ --tabs--spacing: var(--size-rem--s);
504
506
  --tab-panel--padding: var(--size-px--xl);
505
- --contextual-help--content-to-content-spacing: var(--size-rem--s);
506
507
  --light-box--overlay-background-color: var(--dark--color--600);
507
508
  --light-box--max-width: calc(100dvw - var(--size-px--l));
508
509
  --light-box--max-height: calc(100dvh - var(--size-px--l));
509
- --light-box--spacing: var(--size-px--s);
510
+ --light-box--spacing: var(--size-px--m);
510
511
  --modal--padding: var(--size-px--l);
511
- --modal--padding-bottom: var(--size-px--xl);
512
- --modal--action-group-padding: var(--size-rem--l);
513
- --modal--action-group-border-style: var(--border-style--default);
514
- --modal--off-canvas-padding-y: var(--size-px--s);
515
- --modal--off-canvas-max-width: calc(100vw - var(--size-px--m));
512
+ --modal--border-style: var(--border-style--default);
513
+ --modal--header-padding-y: var(--size-px--s);
514
+ --modal--off-canvas-max-width: calc(100dvw - var(--size-px--m));
516
515
  --overlay--background-color: var(--dark--color--200);
517
- --popover--padding: var(--size-px--m);
516
+ --popover--padding--m: var(--size-px--m);
517
+ --popover--padding--s: var(--size-px--s);
518
518
  --popover--border-style: var(--border-style--default);
519
+ --popover--spacing: var(--size-px--s);
519
520
  --popover--popover-to-trigger-spacing: var(--size-px--m);
520
521
  --popover--tip-height: var(--size-px--s);
521
522
  --popover--tip-width: var(--size-px--m);
522
523
  --tooltip--padding-x: var(--size-px--s);
523
524
  --tooltip--padding-y: var(--size-px--xs);
524
525
  --tooltip--font-size: var(--font-size-text--s);
525
- --tooltip--tooltip-to-content-spacing: var(--size-px--s);
526
- --tooltip--arrow-size: var(--size-px--s);
526
+ --tooltip--tooltip-to-trigger-spacing: var(--size-px--s);
527
+ --tooltip--tip-size: var(--size-px--s);
527
528
  --shadow--content: rgba(0, 0, 0, 0.1) 0 var(--size-px--xs) var(--size-px--s);
528
529
  --shadow--overlay: rgba(0, 0, 0, 0.14) 0 var(--size-px--m) var(--size-px--l);
529
530
  --alert-badge--icon-to-text-spacing: var(--size-rem--xs);
@@ -761,11 +762,6 @@
761
762
  --button--light-outline-content-color--disabled: var(--disabled-outline-light-content-color);
762
763
  --button--light-outline-border-color--default: var(--light-outline-border-color);
763
764
  --button--light-outline-border-color--disabled: var(--disabled-outline-light-border-color);
764
- --menu-item--corner-radius: var(--corner-radius--default);
765
- --menu-item--color--current: var(--primary--color--800);
766
- --menu-item--icon-color--default: var(--neutral--color--800);
767
- --menu-item--icon-color--current: var(--primary--color--800);
768
- --menu-item--disabled-background-color: var(--disabled-plain-background-color);
769
765
  --primary-solid-background-color--default: var(--primary--color--800);
770
766
  --primary-solid-background-color--hover: var(--primary--color--900);
771
767
  --primary-solid-background-color--pressed: var(--primary--color--1000);
@@ -916,38 +912,41 @@
916
912
  --switch--handle-color--disabled: var(--neutral--color--500);
917
913
  --switch--handle-background-color--default: var(--neutral--color--100);
918
914
  --switch--handle-background-color--disabled: var(--neutral--color--300);
919
- --breadcrumb-item--color-light: var(--light-plain-content-color);
920
- --breadcrumb-item--color-dark: var(--dark-plain-content-color);
921
- --header-navigation--item-color-dark: var(--dark-plain-content-color);
922
- --header-navigation--item-color-light: var(--light-plain-content-color);
923
- --header-navigation--item-background-color-dark--hover: var(--dark-plain-background-color--hover);
924
- --header-navigation--item-background-color-dark--pressed: var(--dark-plain-background-color--pressed);
925
- --header-navigation--item-background-color-light--hover: var(--light-plain-background-color--hover);
926
- --header-navigation--item-background-color-light--pressed: var(--light-plain-background-color--pressed);
927
- --header-navigation--item-corner-radius: var(--corner-radius--default);
928
- --header-navigation--item-underline-width-current: var(--border-width--200);
915
+ --breadcrumb--color-primary--default: var(--primary--color--1000);
916
+ --breadcrumb--color-primary--hover: var(--primary--color--900);
917
+ --breadcrumb--color-primary--pressed: var(--primary--color--800);
918
+ --header-navigation--corner-radius: var(--corner-radius--default);
919
+ --header-navigation--color: var(--primary--color--1000);
920
+ --header-navigation--color-dark: var(--dark-plain-content-color);
921
+ --header-navigation--color-light: var(--light-plain-content-color);
922
+ --header-navigation--background-color-dark--hover: var(--dark-plain-background-color--hover);
923
+ --header-navigation--background-color-dark--pressed: var(--dark-plain-background-color--pressed);
924
+ --header-navigation--background-color-light--hover: var(--light-plain-background-color--hover);
925
+ --header-navigation--background-color-light--pressed: var(--light-plain-background-color--pressed);
926
+ --header-navigation--underline-width-current: var(--border-width--200);
929
927
  --link--line-height: var(--line-height--m);
930
928
  --link--color--default: var(--primary--color--800);
931
929
  --link--color--hover: var(--primary--color--900);
932
930
  --link--color--pressed: var(--primary--color--1000);
933
931
  --link--color-dark--disabled: var(--disabled-plain-dark-content-color);
934
932
  --link--color-light--disabled: var(--disabled-plain-light-content-color);
935
- --tab-list--background-color: var(--neutral--color--400);
936
- --tab--background-color--selected: var(--neutral--color--100);
937
- --tab--disabled-color: var(--neutral--color--600);
933
+ --menu-item--corner-radius: var(--corner-radius--default);
934
+ --menu-item--color--current: var(--primary--color--800);
935
+ --menu-item--icon-color--default: var(--neutral--color--800);
936
+ --menu-item--icon-color--current: var(--primary--color--800);
937
+ --menu-item--disabled-background-color: var(--disabled-plain-background-color);
938
+ --tabs--background-color--selected: var(--neutral--color--100);
938
939
  --modal--corner-radius: var(--corner-radius--default);
939
940
  --modal--background-color: var(--neutral--color--100);
940
- --modal--action-group-background-color: var(--neutral--color--300);
941
- --modal--action-group-border-color: var(--neutral--color--400);
942
- --modal--action-group-border-top-width: var(--border-width--100);
943
- --modal--off-canvas-header-background-color: var(--neutral--color--200);
941
+ --modal--footer-background-color: var(--neutral--color--300);
942
+ --modal--border-width: var(--border-width--100);
944
943
  --popover--box-shadow: var(--shadow--overlay);
945
944
  --popover--corner-radius: var(--corner-radius--default);
946
945
  --popover--background-color: var(--neutral--color--100);
947
946
  --popover--border-width: var(--border-width--100);
948
947
  --tooltip--background-color: var(--neutral--color--900);
949
- --tooltip--color: var(--neutral--color--100);
950
948
  --tooltip--box-shadow: var(--shadow--overlay);
949
+ --tooltip--header-corner-radius: var(--corner-radius--default);
951
950
  --alert--corner-radius: var(--corner-radius--default);
952
951
  --alert--border-width: var(--border-width--100);
953
952
  --alert--border-x-start-width: var(--border-width--400);
@@ -1118,10 +1117,6 @@
1118
1117
  --button--danger-outline-content-color--disabled: var(--disabled-outline-content-color);
1119
1118
  --button--danger-outline-border-color--default: var(--danger-outline-border-color);
1120
1119
  --button--danger-outline-border-color--disabled: var(--disabled-outline-border-color);
1121
- --menu-item--icon-color--disabled: var(--disabled-plain-content-color);
1122
- --menu-item--background-color--hover: var(--primary-plain-background-color--hover);
1123
- --menu-item--background-color--current: var(--primary-plain-background-color--pressed);
1124
- --menu-item--disabled-color: var(--disabled-plain-content-color);
1125
1120
  --code--default-background-color: var(--neutral-soft-background-color--default);
1126
1121
  --code--default-content-color: var(--neutral-soft-content-color--default);
1127
1122
  --illustrated-message--primary-heading-color: var(--heading--color);
@@ -1159,19 +1154,21 @@
1159
1154
  --switch--track-background-color--selected: var(--success-solid-background-color--default);
1160
1155
  --switch--handle-color--default: var(--neutral-solid-content-color);
1161
1156
  --time-field--date-segment-background-color--focused: var(--primary-plain-background-color--pressed);
1162
- --breadcrumb-item--color: var(--heading--color);
1163
- --header-navigation--item-color: var(--heading--color);
1164
- --header-navigation--item-background-color--hover: var(--primary-plain-background-color--hover);
1165
- --header-navigation--item-background-color--pressed: var(--primary-plain-background-color--pressed);
1157
+ --header-navigation--background-color--hover: var(--primary-plain-background-color--hover);
1158
+ --header-navigation--background-color--pressed: var(--primary-plain-background-color--pressed);
1166
1159
  --link--color--disabled: var(--disabled-plain-content-color);
1167
- --tab--background-color--default: var(--neutral-soft-background-color--default);
1168
- --tab--background-color--hover: var(--neutral-soft-background-color--hover);
1169
- --tab--background-color--pressed: var(--neutral-soft-background-color--pressed);
1170
- --tab--color--default: var(--neutral-soft-content-color--default);
1171
- --tab--color--hover: var(--neutral-soft-content-color--default);
1172
- --tab--color--pressed: var(--neutral-soft-content-color--pressed);
1173
- --tab--disabled-background-color: var(--neutral-soft-background-color--default);
1160
+ --menu-item--icon-color--disabled: var(--disabled-plain-content-color);
1161
+ --menu-item--background-color--hover: var(--primary-plain-background-color--hover);
1162
+ --menu-item--background-color--current: var(--primary-plain-background-color--pressed);
1163
+ --menu-item--disabled-color: var(--disabled-plain-content-color);
1164
+ --tabs--background-color--default: var(--neutral-soft-background-color--default);
1165
+ --tabs--background-color--hover: var(--neutral-soft-background-color--hover);
1166
+ --tabs--background-color--pressed: var(--neutral-soft-background-color--pressed);
1167
+ --tabs--color: var(--neutral-soft-content-color--default);
1168
+ --tabs--disabled-color: var(--disabled-soft-content-color);
1169
+ --modal--border-color: var(--neutral-outline-border-color);
1174
1170
  --popover--border-color: var(--neutral-outline-border-color);
1171
+ --tooltip--color: var(--text--color--light);
1175
1172
  --alert-badge--info-background-color: var(--info-soft-background-color--default);
1176
1173
  --alert-badge--info-content-color: var(--info-soft-content-color--default);
1177
1174
  --alert-badge--info-border-color: var(--info-outline-border-color);