@mittwald/flow-design-tokens 0.1.0-alpha.53 → 0.1.0-alpha.56

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 (2) hide show
  1. package/dist/variables.css +63 -22
  2. package/package.json +3 -3
package/dist/variables.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 25 Mar 2024 09:23:45 GMT
3
+ * Generated on Thu, 04 Apr 2024 14:31:09 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -23,6 +23,7 @@
23
23
  --size-rem--xs: 0.25rem;
24
24
  --size-rem--xxs: 0.125rem;
25
25
  --size-rem--xxxs: 0.0625rem;
26
+ --menu-item--icon-to-text-spacing: 0.5em;
26
27
  --font-size--xxl: 2rem;
27
28
  --font-size--xl: 1.5rem;
28
29
  --font-size--l: 1.125rem;
@@ -105,7 +106,6 @@
105
106
  --switch--track-corner-radius: 0.75rem;
106
107
  --switch--track-width: 2.75rem;
107
108
  --switch--track-height: 1.5rem;
108
- --navigation-item--icon-to-text-spacing: 0.5em;
109
109
  --modal--size--l: 1050px;
110
110
  --modal--size--m: 900px;
111
111
  --modal--size--s: 660px;
@@ -114,6 +114,13 @@
114
114
  --icon--size--m: 1.5rem;
115
115
  --icon--size--s: 1rem;
116
116
  --avatar--size--m: 2.5rem;
117
+ --menu-item--background-color--default: var(--color--transparent);
118
+ --menu-item--padding-y: var(--size-px--xs);
119
+ --menu-item--padding-x: var(--size-px--s);
120
+ --menu-item--font-weight--current: var(--font-weight--bold);
121
+ --menu--heading-to-group-spacing: var(--size-px--s);
122
+ --menu--group-to-group-spacing: var(--size-px--m);
123
+ --menu--item-to-item-spacing: var(--size-px--s);
117
124
  --form-control--border-style: var(--border-style--default);
118
125
  --form-control--padding-y: var(--size-px--s);
119
126
  --form-control--padding-x: var(--size-px--m);
@@ -216,24 +223,29 @@
216
223
  --status-badge--padding-y: var(--size-rem--xs);
217
224
  --status-badge--font-weight: var(--font-weight--bold);
218
225
  --status-badge--font-size: var(--font-size--s);
226
+ --segmented-button--text-to-text-spacing: var(--size-rem--xs);
219
227
  --section--heading-to-header-content-spacing: var(--size-rem--m);
220
228
  --section--content-to-content-spacing: var(--size-rem--m);
221
229
  --section--section-to-section-spacing: var(--size-rem--xl);
222
230
  --section--border-style: var(--border-style--default);
223
- --radio-group--icon-size-without-content: var(--icon--size--l);
224
- --radio-group--label-font-weight-with-content-or-icon: var(--font-weight--bold);
225
- --radio-group--icon-to-text-spacing: var(--size-rem--m);
226
- --radio-group--text-to-text-spacing: var(--size-rem--xs);
227
- --radio-group--radio-to-radio-spacing: var(--size-px--m);
228
- --navigation-item--background-color--default: var(--color--transparent);
229
- --navigation-item--padding-y: var(--size-px--xs);
230
- --navigation-item--padding-x: var(--size-px--s);
231
- --navigation-item--font-weight--current: var(--font-weight--bold);
232
- --navigation--item-to-item-spacing: var(--size-px--s);
231
+ --radio-button--label-font-weight-with-content: var(--font-weight--bold);
232
+ --radio-button--icon-to-text-spacing: var(--size-rem--m);
233
+ --radio-button--text-to-text-spacing: var(--size-rem--xs);
234
+ --radio--icon-to-text-spacing: var(--size-rem--s);
235
+ --radio-group--radio-to-radio-spacing: var(--size-rem--s);
233
236
  --modal--button-group-border-style: var(--border-style--default);
234
237
  --modal--button-group-padding: var(--size-rem--l);
235
238
  --modal--padding-bottom: var(--size-px--xl);
236
239
  --modal--padding: var(--size-px--l);
240
+ --list-item--subtitle-font-size: var(--font-size--s);
241
+ --list-item--content-to-content-spacing: var(--size-px--m);
242
+ --list-item--border-style: var(--border-style--default);
243
+ --list-item--padding: var(--size-px--s);
244
+ --list--filter-to-list-spacing: var(--size-px--m);
245
+ --list--badge-to-badge-spacing: var(--size-px--xs);
246
+ --list--buttons-to-badges-spacing: var(--size-px--m);
247
+ --list--button-to-button-spacing: var(--size-px--s);
248
+ --link--text-to-icon-spacing: var(--size-rem--xs);
237
249
  --link--font-weight: var(--font-weight--bold);
238
250
  --link--font-size: var(--font-size--s);
239
251
  --layout-card--padding: var(--size-px--l);
@@ -273,8 +285,13 @@
273
285
  --field-error--icon-to-text-spacing: var(--size-rem--s);
274
286
  --field-error--font-size: var(--font-size--s);
275
287
  --field-description--font-size: var(--font-size--s);
288
+ --context-menu--padding: var(--size-px--s);
276
289
  --column-layout--content-to-content-spacing: var(--size-rem--m);
277
- --checkbox--checkmark-to-text-spacing: var(--size-rem--m);
290
+ --checkbox--icon-to-text-spacing: var(--size-rem--s);
291
+ --checkbox-group--checkbox-to-checkbox-spacing: var(--size-rem--s);
292
+ --checkbox-button--label-font-weight-with-content: var(--font-weight--bold);
293
+ --checkbox-button--icon-to-text-spacing: var(--size-rem--m);
294
+ --checkbox-button--text-to-text-spacing: var(--size-rem--xs);
278
295
  --button--font-size-s: var(--font-size--s);
279
296
  --button--text-to-icon-spacing-s: var(--size-rem--xs);
280
297
  --button--padding-s-squished-y: var(--size-px--xs);
@@ -285,9 +302,22 @@
285
302
  --button--padding-squished-y: var(--size-px--s);
286
303
  --button--padding-squished-x: var(--size-px--m);
287
304
  --button-group--button-to-button-spacing: var(--size-rem--m);
305
+ --breadcrumb-item--font-weight--current: var(--font-weight--bold);
306
+ --breadcrumb-item--font-weight--default: var(--font-weight--normal);
307
+ --breadcrumb-item--font-size: var(--font-size--s);
308
+ --breadcrumb-item--padding-x: var(--size-px--xs);
288
309
  --avatar--size--l: var(--size-rem--xxl);
289
310
  --avatar--size--s: var(--size-rem--xl);
290
311
  --avatar--size--xs: var(--size-rem--l);
312
+ --menu-item--disabled-color: var(--neutral--color--100);
313
+ --menu-item--disabled-background-color: var(--neutral--color--400);
314
+ --menu-item--background-color--current: var(--info--color--100);
315
+ --menu-item--background-color--hover: var(--info--color--100);
316
+ --menu-item--icon-color--current: var(--info--color--800);
317
+ --menu-item--icon-color--default: var(--neutral--color--800);
318
+ --menu-item--color--current: var(--info--color--800);
319
+ --menu-item--color--default: var(--neutral--color--1000);
320
+ --menu-item--corner-radius: var(--corner-radius--default);
291
321
  --form-control--background-color--invalid: var(--danger--color--100);
292
322
  --form-control--background-color--focused: var(--neutral--color--200);
293
323
  --form-control--background-color--default: var(--neutral--color--200);
@@ -317,6 +347,7 @@
317
347
  --neutral-outline-border-color--default: var(--neutral--color--700);
318
348
  --neutral-outline-content-color--selected: var(--primary--color--900);
319
349
  --neutral-outline-content-color--default: var(--neutral--color--1000);
350
+ --neutral-outline-background-color--pressed: var(--primary--color--200);
320
351
  --neutral-outline-background-color--selected: var(--primary--color--200);
321
352
  --neutral-outline-background-color--hover: var(--primary--color--100);
322
353
  --neutral-outline-background-color--default: var(--neutral--color--200);
@@ -416,20 +447,14 @@
416
447
  --status-badge--corner-radius: var(--corner-radius--default);
417
448
  --section--border-color: var(--neutral--color--500);
418
449
  --section--border-width: var(--border-width--100);
419
- --navigation-item--disabled-color: var(--neutral--color--100);
420
- --navigation-item--disabled-background-color: var(--neutral--color--400);
421
- --navigation-item--background-color--current: var(--info--color--100);
422
- --navigation-item--background-color--hover: var(--info--color--100);
423
- --navigation-item--icon-color--current: var(--info--color--800);
424
- --navigation-item--icon-color--default: var(--neutral--color--800);
425
- --navigation-item--color--current: var(--info--color--800);
426
- --navigation-item--color--default: var(--neutral--color--1000);
427
- --navigation-item--corner-radius: var(--corner-radius--default);
428
450
  --modal--button-group-border-top-width: var(--border-width--100);
429
451
  --modal--button-group-border-color: var(--neutral--color--400);
430
452
  --modal--button-group-background-color: var(--neutral--color--300);
431
453
  --modal--background-color: var(--neutral--color--100);
432
454
  --modal--corner-radius: var(--corner-radius--default);
455
+ --list-item--background-color--default: var(--neutral--color--200);
456
+ --list-item--border-width: var(--border-width--100);
457
+ --list-item--corner-radius: var(--corner-radius--default);
433
458
  --link--line-height: var(--line-height--m);
434
459
  --layout-card--box-shadow: var(--shadow--content);
435
460
  --layout-card--corner-radius: var(--corner-radius--default);
@@ -441,9 +466,13 @@
441
466
  --inline-alert--border-x-start-width: var(--border-width--400);
442
467
  --inline-alert--border-width: var(--border-width--100);
443
468
  --inline-alert--corner-radius: var(--corner-radius--default);
469
+ --icon--color--default: var(--neutral--color--900);
444
470
  --heading--color: var(--primary--color--1000);
445
471
  --field-error--color: var(--danger--color--700);
446
472
  --field-description--color: var(--neutral--color--800);
473
+ --context-menu--background-color: var(--neutral--color--100);
474
+ --context-menu--corner-radius: var(--corner-radius--default);
475
+ --context-menu--box-shadow: var(--shadow--overlay);
447
476
  --button--disabled-plain-background-color: var(--disabled-plain-background-color);
448
477
  --button--danger-plain-background-color--default: var(--danger-plain-background-color--default);
449
478
  --button--secondary-plain-background-color--default: var(--neutral-plain-background-color--default);
@@ -474,6 +503,13 @@
474
503
  --status-badge--success-background-color: var(--success-soft-background-color--default);
475
504
  --status-badge--info-content-color: var(--info-soft-content-color--default);
476
505
  --status-badge--info-background-color: var(--info-soft-background-color--default);
506
+ --radio--icon-color--disabled: var(--disabled-outline-content-color);
507
+ --radio--icon-color--selected: var(--neutral-outline-border-color--selected);
508
+ --radio--icon-color--default: var(--icon--color--default);
509
+ --radio--color--disabled: var(--disabled-outline-content-color);
510
+ --list-item--border-color: var(--neutral-outline-border-color--default);
511
+ --list-item--background-color--pressed: var(--neutral-outline-background-color--pressed);
512
+ --list-item--background-color--hover: var(--neutral-outline-background-color--hover);
477
513
  --link--danger-color--pressed: var(--danger-plain-content-color--pressed);
478
514
  --link--danger-color--hover: var(--danger-plain-content-color--hover);
479
515
  --link--danger-color--default: var(--danger-plain-content-color--default);
@@ -490,6 +526,10 @@
490
526
  --inline-alert--warning-border-color: var(--warning-outline-border-color);
491
527
  --inline-alert--info-heading-color: var(--info-outline-content-color);
492
528
  --inline-alert--info-border-color: var(--info-outline-border-color);
529
+ --checkbox--icon-color--disabled: var(--disabled-outline-content-color);
530
+ --checkbox--icon-color--selected: var(--neutral-outline-border-color--selected);
531
+ --checkbox--icon-color--default: var(--icon--color--default);
532
+ --checkbox--color--disabled: var(--disabled-outline-content-color);
493
533
  --button--disabled-soft-content-color: var(--disabled-soft-content-color);
494
534
  --button--disabled-soft-background-color: var(--disabled-soft-background-color);
495
535
  --button--disabled-plain-content-color: var(--disabled-plain-content-color);
@@ -564,4 +604,5 @@
564
604
  --button--accent-solid-background-color--hover: var(--success-solid-background-color--hover);
565
605
  --button--accent-solid-background-color--default: var(--success-solid-background-color--default);
566
606
  --button--pending-icon-color: var(--disabled-plain-content-accent-color);
607
+ --breadcrumb-item--color: var(--color--default);
567
608
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mittwald/flow-design-tokens",
3
- "version": "0.1.0-alpha.53",
3
+ "version": "0.1.0-alpha.56",
4
4
  "type": "module",
5
5
  "description": "The design tokens used in Flow, mittwald’s design system",
6
6
  "homepage": "https://mittwald.github.io/flow",
@@ -17,8 +17,8 @@
17
17
  "devDependencies": {
18
18
  "@types/js-yaml": "^4.0.9",
19
19
  "js-yaml": "^4.1.0",
20
- "nx": "^18.1.2",
20
+ "nx": "^18.2.1",
21
21
  "style-dictionary": "^3.9.2"
22
22
  },
23
- "gitHead": "ef8dc4182179aadf3a2462bc80164ab5be59b4bc"
23
+ "gitHead": "afc7a47e25fa101440ff55f8f642d70c2c48f685"
24
24
  }