@lmvz-ds/design-tokens 0.24.0 → 0.25.0

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 (6) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/css/custom-media.css +11 -4
  3. package/dist/css/variables.base.css +24 -19
  4. package/dist/css/variables.light.global.css +5 -4
  5. package/dist/css/variables.light.themed.css +5 -4
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @lmvz-ds/design-tokens
2
2
 
3
+ ## 0.25.0
4
+
5
+ ### Patch Changes
6
+
7
+ - 64bffb7: Design Tokens aktualisiert
8
+ - 1dcb478: Design Tokens aktualisiert
9
+
3
10
  ## 0.24.0
4
11
 
5
12
  ## 0.23.0
package/dist/css/custom-media.css CHANGED
@@ -5,7 +5,14 @@
5
5
  * Skipped tokens:
6
6
  * --lmvz-bp-largest (value "TV" is non-numeric)
7
7
  */
8
- @custom-media --lmvz-bp-large (min-width: 1920px);
9
- @custom-media --lmvz-bp-medium (min-width: 1440px);
10
- @custom-media --lmvz-bp-small (min-width: 768px);
11
- @custom-media --lmvz-bp-smallest (min-width: 402px);
8
+ /* stylelint-disable custom-media-pattern */
9
+ /* ... due to double--hyphen separator */
10
+
11
+ @custom-media --lmvz-bp--from-large (min-width: 1921px);
12
+ @custom-media --lmvz-bp--up-to-large (max-width: 1920px);
13
+ @custom-media --lmvz-bp--from-medium (min-width: 1441px);
14
+ @custom-media --lmvz-bp--up-to-medium (max-width: 1440px);
15
+ @custom-media --lmvz-bp--from-small (min-width: 769px);
16
+ @custom-media --lmvz-bp--up-to-small (max-width: 768px);
17
+ @custom-media --lmvz-bp--from-smallest (min-width: 403px);
18
+ @custom-media --lmvz-bp--up-to-smallest (max-width: 402px);
package/dist/css/variables.base.css CHANGED
@@ -11,7 +11,7 @@
11
11
  --lmvz-component-heading-4xl-letter-spacing: 0;
12
12
  --lmvz-component-heading-2xl-letter-spacing: 0;
13
13
  --lmvz-component-heading-xl-letter-spacing: 0;
14
- --lmvz-component-heading-lg-letter-spacing: -0.5px;
14
+ --lmvz-component-heading-lg-letter-spacing: 0;
15
15
  --lmvz-component-heading-md-letter-spacing: 0;
16
16
  --lmvz-component-body-xl-letter-spacing: 0;
17
17
  --lmvz-component-body-lg-letter-spacing: 0;
@@ -19,6 +19,7 @@
19
19
  --lmvz-component-body-sm-letter-spacing: 0;
20
20
  --lmvz-component-body-xs-letter-spacing: 0;
21
21
  --lmvz-component-body-2xs-letter-spacing: 0;
22
+ --lmvz-component-card-lg-overlay-blur: 0.5rem;
22
23
  --lmvz-semantic-semantic-digital-layout-col-4: 36.8125rem;
23
24
  --lmvz-semantic-semantic-digital-layout-col-6: 45rem;
24
25
  --lmvz-semantic-semantic-digital-layout-col-8: 74.9375rem;
@@ -42,6 +43,7 @@
42
43
  --lmvz-semantic-shadow-l3-1-blur: 34px;
43
44
  --lmvz-semantic-shadow-l3-2-position-y: 16px;
44
45
  --lmvz-semantic-shadow-l3-2-blur: 62px;
46
+ --lmvz-semantic-shadow-overlay: rgba(0, 0, 0, 0.29);
45
47
  --lmvz-semantic-border-radius-round: 999px;
46
48
  --lmvz-semantic-border-radius-none: 0px;
47
49
  --lmvz-semantic-color-int-primary-hover-shadow: rgba(0, 0, 0, 0);
@@ -325,7 +327,7 @@
325
327
  --lmvz-semantic-color-int-tertiary: var(--lmvz-global-color-neutral-white);
326
328
  --lmvz-semantic-color-int-tertiary-hover: var(--lmvz-global-color-grey-neutral-200);
327
329
  --lmvz-semantic-color-int-tertiary-active: var(--lmvz-global-color-grey-neutral-300);
328
- --lmvz-semantic-color-int-on-tertiary: var(--lmvz-global-color-grey-neutral-800);
330
+ --lmvz-semantic-color-int-on-tertiary: var(--lmvz-global-color-neutral-black);
329
331
  --lmvz-semantic-color-int-on-primary-hover: var(--lmvz-global-color-neutral-white);
330
332
  --lmvz-semantic-color-int-on-primary-active: var(--lmvz-global-color-neutral-white);
331
333
  --lmvz-semantic-color-int-on-secondary-hover: var(--lmvz-global-color-neutral-black);
@@ -336,7 +338,7 @@
336
338
  --lmvz-semantic-color-surface-secondary: var(--lmvz-global-color-grey-neutral-100);
337
339
  --lmvz-semantic-color-surface-tertiary: var(--lmvz-global-color-grey-neutral-200);
338
340
  --lmvz-semantic-color-on-surface-primary: var(--lmvz-global-color-neutral-black);
339
- --lmvz-semantic-color-on-surface-secondary: var(--lmvz-global-color-grey-neutral-700);
341
+ --lmvz-semantic-color-on-surface-secondary: var(--lmvz-global-color-grey-neutral-800);
340
342
  --lmvz-semantic-color-on-surface-tertiary: var(--lmvz-global-color-grey-neutral-500);
341
343
  --lmvz-semantic-color-status-on-neutral: var(--lmvz-global-color-grey-neutral-800);
342
344
  --lmvz-semantic-color-status-on-active: var(--lmvz-global-color-brand-blue-950);
@@ -344,7 +346,7 @@
344
346
  --lmvz-semantic-color-status-on-warning: var(--lmvz-global-color-brand-yellow-900);
345
347
  --lmvz-semantic-color-status-on-danger: var(--lmvz-global-color-brand-red-700);
346
348
  --lmvz-semantic-color-status-neutral: var(--lmvz-global-color-grey-neutral-50);
347
- --lmvz-semantic-color-status-active: var(--lmvz-global-color-brand-blue-100);
349
+ --lmvz-semantic-color-status-active: var(--lmvz-global-color-brand-blue-50);
348
350
  --lmvz-semantic-color-status-success: var(--lmvz-global-color-brand-green-50);
349
351
  --lmvz-semantic-color-status-warning: var(--lmvz-global-color-brand-yellow-50);
350
352
  --lmvz-semantic-color-status-danger: var(--lmvz-global-color-brand-red-50);
@@ -360,7 +362,7 @@
360
362
  --lmvz-semantic-color-border-subtle: var(--lmvz-global-color-grey-neutral-200);
361
363
  --lmvz-semantic-color-border-subtle-hover: var(--lmvz-global-color-grey-neutral-400);
362
364
  --lmvz-semantic-color-on-surface-input-primary: var(--lmvz-global-color-neutral-black);
363
- --lmvz-semantic-color-on-surface-input-secondary: var(--lmvz-global-color-grey-neutral-700);
365
+ --lmvz-semantic-color-on-surface-input-secondary: var(--lmvz-global-color-grey-neutral-800);
364
366
  --lmvz-semantic-color-brand-media1: var(--lmvz-global-color-brand-blue-400);
365
367
  --lmvz-semantic-color-brand-media2: var(--lmvz-global-color-brand-green-400);
366
368
  --lmvz-semantic-color-brand-media3: var(--lmvz-global-color-brand-yellow-300);
@@ -381,6 +383,7 @@
381
383
  --lmvz-component-icon-size-lg: var(--lmvz-dimension-24-28);
382
384
  --lmvz-component-icon-size-2xs: var(--lmvz-dimension-10-12);
383
385
  --lmvz-component-icon-size-xl: var(--lmvz-dimension-28-36);
386
+ --lmvz-component-icon-size-4xs: var(--lmvz-dimension-8-10);
384
387
  --lmvz-component-heading-4xl-font-size: var(--lmvz-dimension-48-64);
385
388
  --lmvz-component-heading-4xl-line-height: var(--lmvz-component-line-height-default);
386
389
  --lmvz-component-heading-4xl-padding-bottom: var(--lmvz-dimension-28-40);
@@ -407,14 +410,20 @@
407
410
  --lmvz-component-body-md-font-size: var(--lmvz-dimension-14-16);
408
411
  --lmvz-component-body-md-line-height: var(--lmvz-component-line-height-default);
409
412
  --lmvz-component-body-md-padding-bottom: var(--lmvz-dimension-4-10);
410
- --lmvz-component-body-sm-font-size: var(--lmvz-dimension-12-13);
413
+ --lmvz-component-body-sm-font-size: var(--lmvz-dimension-11-12);
411
414
  --lmvz-component-body-sm-line-height: var(--lmvz-component-line-height-default);
412
415
  --lmvz-component-body-sm-padding-bottom: var(--lmvz-dimension-4-10);
413
- --lmvz-component-body-xs-font-size: var(--lmvz-dimension-11-12);
416
+ --lmvz-component-body-xs-font-size: var(--lmvz-dimension-10-11);
414
417
  --lmvz-component-body-xs-line-height: var(--lmvz-component-line-height-default);
415
418
  --lmvz-component-body-xs-padding-bottom: var(--lmvz-dimension-4-10);
416
- --lmvz-component-body-2xs-font-size: var(--lmvz-dimension-10-11);
419
+ --lmvz-component-body-2xs-font-size: var(--lmvz-dimension-8-10);
417
420
  --lmvz-component-body-2xs-line-height: var(--lmvz-component-line-height-default);
421
+ --lmvz-component-card-lg-padding-x: var(--lmvz-dimension-24-48);
422
+ --lmvz-component-card-lg-padding-y: var(--lmvz-dimension-36-40);
423
+ --lmvz-component-card-sm-gap: var(--lmvz-dimension-16-24);
424
+ --lmvz-component-card-sm-padding-x: var(--lmvz-dimension-24-28);
425
+ --lmvz-component-card-sm-margin-bottom: var(--lmvz-dimension-24-32);
426
+ --lmvz-component-card-sm-margin-top: var(--lmvz-dimension-24-28);
418
427
  --lmvz-component-component-typography-display-padding-bottom: var(--lmvz-dimension-10-13);
419
428
  --lmvz-component-component-typography-heading-xl-padding-bottom: var(--lmvz-dimension-10-13);
420
429
  --lmvz-component-component-typography-heading-lg-padding-top: var(--lmvz-dimension-12-16);
@@ -425,8 +434,6 @@
425
434
  --lmvz-component-component-typography-body-lg-padding-bottom: var(--lmvz-dimension-10-13);
426
435
  --lmvz-component-component-typography-body-md-padding-bottom: var(--lmvz-dimension-4-10);
427
436
  --lmvz-component-component-typography-body-sm-padding-bottom: var(--lmvz-dimension-2-8);
428
- --lmvz-component-modal-padding-x: var(--lmvz-dimension-24-48);
429
- --lmvz-component-modal-padding-y: var(--lmvz-dimension-36-40);
430
437
  --lmvz-component-table-cell-padding-y: var(--lmvz-dimension-4-10);
431
438
  --lmvz-component-table-cell-padding-x: var(--lmvz-dimension-4-10);
432
439
  --lmvz-component-table-row-height: var(--lmvz-dimension-4-10);
@@ -454,14 +461,12 @@
454
461
  --lmvz-component-input-padding-sm: var(--lmvz-dimension-12-14);
455
462
  --lmvz-component-input-padding-md: var(--lmvz-dimension-14-16);
456
463
  --lmvz-component-input-padding-lg: var(--lmvz-dimension-16-20);
457
- --lmvz-component-input-gap-sm: var(--lmvz-dimension-6-8);
458
- --lmvz-component-input-gap-md: var(--lmvz-dimension-8-12);
459
- --lmvz-component-input-gap-lg: var(--lmvz-dimension-12-14);
464
+ --lmvz-component-input-gap-sm: var(--lmvz-dimension-8-12);
465
+ --lmvz-component-input-gap-md: var(--lmvz-dimension-12-16);
466
+ --lmvz-component-input-gap-lg: var(--lmvz-dimension-16-20);
467
+ --lmvz-component-input-wrapper-padding-y-sm: var(--lmvz-dimension-10-12);
468
+ --lmvz-component-input-wrapper-padding-y-md: var(--lmvz-dimension-16-20);
460
469
  --lmvz-component-input-bg: var(--lmvz-semantic-color-surface-primary);
461
- --lmvz-component-card-gap-xy: var(--lmvz-dimension-16-24);
462
- --lmvz-component-card-padding-x: var(--lmvz-dimension-24-28);
463
- --lmvz-component-card-margin-bottom: var(--lmvz-dimension-24-32);
464
- --lmvz-component-card-margin-top: var(--lmvz-dimension-24-28);
465
470
  --lmvz-semantic-border-radius-xl: var(--lmvz-dimension-18-24);
466
471
  --lmvz-semantic-border-radius-lg: var(--lmvz-dimension-14-16);
467
472
  --lmvz-semantic-border-radius-md: var(--lmvz-dimension-6-8);
@@ -470,8 +475,8 @@
470
475
  --lmvz-semantic-color-surface-input-primary: var(--lmvz-semantic-color-surface-primary);
471
476
  --lmvz-semantic-color-gradient-main-1: var(--lmvz-semantic-color-status-on-active);
472
477
  --lmvz-semantic-color-gradient-main-2: var(--lmvz-semantic-color-status-on-active);
473
- --lmvz-component-modal-border-radius: var(--lmvz-semantic-border-radius-xl);
474
- --lmvz-component-card-border-radius: var(--lmvz-semantic-border-radius-xl);
478
+ --lmvz-component-card-lg-border-radius: var(--lmvz-semantic-border-radius-xl);
479
+ --lmvz-component-card-sm-border-radius: var(--lmvz-semantic-border-radius-xl);
475
480
  }
476
481
  /**
477
482
  * Fluid ramp tokens generated from our global dimension scale tokens.
package/dist/css/variables.light.global.css CHANGED
@@ -13,6 +13,7 @@
13
13
  --lmvz-semantic-shadow-l3-1-blur: 34px;
14
14
  --lmvz-semantic-shadow-l3-2-position-y: 16px;
15
15
  --lmvz-semantic-shadow-l3-2-blur: 62px;
16
+ --lmvz-semantic-shadow-overlay: rgba(0, 0, 0, 0.29);
16
17
  --lmvz-semantic-border-radius-round: 999px;
17
18
  --lmvz-semantic-border-radius-none: 0px;
18
19
  --lmvz-semantic-color-int-primary-hover-shadow: rgba(0, 0, 0, 0);
@@ -44,7 +45,7 @@
44
45
  --lmvz-semantic-color-int-tertiary: var(--lmvz-global-color-neutral-white);
45
46
  --lmvz-semantic-color-int-tertiary-hover: var(--lmvz-global-color-grey-neutral-200);
46
47
  --lmvz-semantic-color-int-tertiary-active: var(--lmvz-global-color-grey-neutral-300);
47
- --lmvz-semantic-color-int-on-tertiary: var(--lmvz-global-color-grey-neutral-800);
48
+ --lmvz-semantic-color-int-on-tertiary: var(--lmvz-global-color-neutral-black);
48
49
  --lmvz-semantic-color-int-on-primary-hover: var(--lmvz-global-color-neutral-white);
49
50
  --lmvz-semantic-color-int-on-primary-active: var(--lmvz-global-color-neutral-white);
50
51
  --lmvz-semantic-color-int-on-secondary-hover: var(--lmvz-global-color-neutral-black);
@@ -55,7 +56,7 @@
55
56
  --lmvz-semantic-color-surface-secondary: var(--lmvz-global-color-grey-neutral-100);
56
57
  --lmvz-semantic-color-surface-tertiary: var(--lmvz-global-color-grey-neutral-200);
57
58
  --lmvz-semantic-color-on-surface-primary: var(--lmvz-global-color-neutral-black);
58
- --lmvz-semantic-color-on-surface-secondary: var(--lmvz-global-color-grey-neutral-700);
59
+ --lmvz-semantic-color-on-surface-secondary: var(--lmvz-global-color-grey-neutral-800);
59
60
  --lmvz-semantic-color-on-surface-tertiary: var(--lmvz-global-color-grey-neutral-500);
60
61
  --lmvz-semantic-color-status-on-neutral: var(--lmvz-global-color-grey-neutral-800);
61
62
  --lmvz-semantic-color-status-on-active: var(--lmvz-global-color-brand-blue-950);
@@ -63,7 +64,7 @@
63
64
  --lmvz-semantic-color-status-on-warning: var(--lmvz-global-color-brand-yellow-900);
64
65
  --lmvz-semantic-color-status-on-danger: var(--lmvz-global-color-brand-red-700);
65
66
  --lmvz-semantic-color-status-neutral: var(--lmvz-global-color-grey-neutral-50);
66
- --lmvz-semantic-color-status-active: var(--lmvz-global-color-brand-blue-100);
67
+ --lmvz-semantic-color-status-active: var(--lmvz-global-color-brand-blue-50);
67
68
  --lmvz-semantic-color-status-success: var(--lmvz-global-color-brand-green-50);
68
69
  --lmvz-semantic-color-status-warning: var(--lmvz-global-color-brand-yellow-50);
69
70
  --lmvz-semantic-color-status-danger: var(--lmvz-global-color-brand-red-50);
@@ -79,7 +80,7 @@
79
80
  --lmvz-semantic-color-border-subtle: var(--lmvz-global-color-grey-neutral-200);
80
81
  --lmvz-semantic-color-border-subtle-hover: var(--lmvz-global-color-grey-neutral-400);
81
82
  --lmvz-semantic-color-on-surface-input-primary: var(--lmvz-global-color-neutral-black);
82
- --lmvz-semantic-color-on-surface-input-secondary: var(--lmvz-global-color-grey-neutral-700);
83
+ --lmvz-semantic-color-on-surface-input-secondary: var(--lmvz-global-color-grey-neutral-800);
83
84
  --lmvz-semantic-color-brand-media1: var(--lmvz-global-color-brand-blue-400);
84
85
  --lmvz-semantic-color-brand-media2: var(--lmvz-global-color-brand-green-400);
85
86
  --lmvz-semantic-color-brand-media3: var(--lmvz-global-color-brand-yellow-300);
package/dist/css/variables.light.themed.css CHANGED
@@ -13,6 +13,7 @@
13
13
  --lmvz-semantic-shadow-l3-1-blur: 34px;
14
14
  --lmvz-semantic-shadow-l3-2-position-y: 16px;
15
15
  --lmvz-semantic-shadow-l3-2-blur: 62px;
16
+ --lmvz-semantic-shadow-overlay: rgba(0, 0, 0, 0.29);
16
17
  --lmvz-semantic-border-radius-round: 999px;
17
18
  --lmvz-semantic-border-radius-none: 0px;
18
19
  --lmvz-semantic-color-int-primary-hover-shadow: rgba(0, 0, 0, 0);
@@ -44,7 +45,7 @@
44
45
  --lmvz-semantic-color-int-tertiary: var(--lmvz-global-color-neutral-white);
45
46
  --lmvz-semantic-color-int-tertiary-hover: var(--lmvz-global-color-grey-neutral-200);
46
47
  --lmvz-semantic-color-int-tertiary-active: var(--lmvz-global-color-grey-neutral-300);
47
- --lmvz-semantic-color-int-on-tertiary: var(--lmvz-global-color-grey-neutral-800);
48
+ --lmvz-semantic-color-int-on-tertiary: var(--lmvz-global-color-neutral-black);
48
49
  --lmvz-semantic-color-int-on-primary-hover: var(--lmvz-global-color-neutral-white);
49
50
  --lmvz-semantic-color-int-on-primary-active: var(--lmvz-global-color-neutral-white);
50
51
  --lmvz-semantic-color-int-on-secondary-hover: var(--lmvz-global-color-neutral-black);
@@ -55,7 +56,7 @@
55
56
  --lmvz-semantic-color-surface-secondary: var(--lmvz-global-color-grey-neutral-100);
56
57
  --lmvz-semantic-color-surface-tertiary: var(--lmvz-global-color-grey-neutral-200);
57
58
  --lmvz-semantic-color-on-surface-primary: var(--lmvz-global-color-neutral-black);
58
- --lmvz-semantic-color-on-surface-secondary: var(--lmvz-global-color-grey-neutral-700);
59
+ --lmvz-semantic-color-on-surface-secondary: var(--lmvz-global-color-grey-neutral-800);
59
60
  --lmvz-semantic-color-on-surface-tertiary: var(--lmvz-global-color-grey-neutral-500);
60
61
  --lmvz-semantic-color-status-on-neutral: var(--lmvz-global-color-grey-neutral-800);
61
62
  --lmvz-semantic-color-status-on-active: var(--lmvz-global-color-brand-blue-950);
@@ -63,7 +64,7 @@
63
64
  --lmvz-semantic-color-status-on-warning: var(--lmvz-global-color-brand-yellow-900);
64
65
  --lmvz-semantic-color-status-on-danger: var(--lmvz-global-color-brand-red-700);
65
66
  --lmvz-semantic-color-status-neutral: var(--lmvz-global-color-grey-neutral-50);
66
- --lmvz-semantic-color-status-active: var(--lmvz-global-color-brand-blue-100);
67
+ --lmvz-semantic-color-status-active: var(--lmvz-global-color-brand-blue-50);
67
68
  --lmvz-semantic-color-status-success: var(--lmvz-global-color-brand-green-50);
68
69
  --lmvz-semantic-color-status-warning: var(--lmvz-global-color-brand-yellow-50);
69
70
  --lmvz-semantic-color-status-danger: var(--lmvz-global-color-brand-red-50);
@@ -79,7 +80,7 @@
79
80
  --lmvz-semantic-color-border-subtle: var(--lmvz-global-color-grey-neutral-200);
80
81
  --lmvz-semantic-color-border-subtle-hover: var(--lmvz-global-color-grey-neutral-400);
81
82
  --lmvz-semantic-color-on-surface-input-primary: var(--lmvz-global-color-neutral-black);
82
- --lmvz-semantic-color-on-surface-input-secondary: var(--lmvz-global-color-grey-neutral-700);
83
+ --lmvz-semantic-color-on-surface-input-secondary: var(--lmvz-global-color-grey-neutral-800);
83
84
  --lmvz-semantic-color-brand-media1: var(--lmvz-global-color-brand-blue-400);
84
85
  --lmvz-semantic-color-brand-media2: var(--lmvz-global-color-brand-green-400);
85
86
  --lmvz-semantic-color-brand-media3: var(--lmvz-global-color-brand-yellow-300);
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@lmvz-ds/design-tokens",
3
3
  "private": false,
4
4
  "type": "module",
5
- "version": "0.24.0",
5
+ "version": "0.25.0",
6
6
  "author": "Patrick Nemenz <patrick.nemenz@adesso.at>",
7
7
  "license": "UNLICENSED",
8
8
  "publishConfig": {