@lmvz-ds/design-tokens 0.18.0 → 0.18.2

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 (7) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/css/variables.base.css +78 -35
  3. package/dist/css/variables.dark.global.css +6 -6
  4. package/dist/css/variables.dark.themed.css +6 -6
  5. package/dist/css/variables.light.global.css +22 -11
  6. package/dist/css/variables.light.themed.css +22 -11
  7. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @lmvz-ds/design-tokens
2
2
 
3
+ ## 0.18.2
4
+
5
+ ### Patch Changes
6
+
7
+ - 15d241d: Design Tokens aktualisiert
8
+
9
+ ## 0.18.1
10
+
11
+ ### Patch Changes
12
+
13
+ - b34b9fe: Design Tokens aktualisiert
14
+
3
15
  ## 0.18.0
4
16
 
5
17
  ### Patch Changes
package/dist/css/variables.base.css CHANGED
@@ -57,9 +57,9 @@
57
57
  --lmvz-semantic-color-shadow-l3-default-strong: rgba(120, 120, 128, 0.11);
58
58
  --lmvz-semantic-color-shadow-l3-colored: rgba(175, 223, 249, 0.42);
59
59
  --lmvz-semantic-color-shadow-l3-colored-strong: rgba(175, 223, 249, 0.72);
60
- --lmvz-other-component-image-width: 6.6875rem;
61
- --lmvz-other-component-card-minwidth: 20.4375rem;
62
- --lmvz-other-component-card-maxwidth: 21.6875rem;
60
+ --lmvz-card-component-image-width: 6.6875rem;
61
+ --lmvz-card-component-card-minwidth: 20.4375rem;
62
+ --lmvz-card-component-card-maxwidth: 21.6875rem;
63
63
  --lmvz-global-font-family-default: Router;
64
64
  --lmvz-global-font-family-alternate: Inter;
65
65
  --lmvz-global-font-family-accessible: Lexend;
@@ -138,6 +138,7 @@
138
138
  --lmvz-global-s13: 13px;
139
139
  --lmvz-global-s11: 11px;
140
140
  --lmvz-global-s6: 6px;
141
+ --lmvz-global-s44: 44px;
141
142
  --lmvz-global-border-radius-24: 24px;
142
143
  --lmvz-global-border-radius-16: 16px;
143
144
  --lmvz-global-border-radius-8: 8px;
@@ -192,11 +193,11 @@
192
193
  --lmvz-global-color-brand-yellow-300: #ffe799;
193
194
  --lmvz-global-color-brand-yellow-400: #ffdf75;
194
195
  --lmvz-global-color-brand-yellow-500: #ffd752;
195
- --lmvz-global-color-brand-yellow-600: #ffcf2e;
196
- --lmvz-global-color-brand-yellow-700: #ffc80f;
197
- --lmvz-global-color-brand-yellow-800: #ebb400;
198
- --lmvz-global-color-brand-yellow-900: #cc9d00;
199
- --lmvz-global-color-brand-yellow-950: #b88d00;
196
+ --lmvz-global-color-brand-yellow-600: #ffcb1f;
197
+ --lmvz-global-color-brand-yellow-700: #e6b000;
198
+ --lmvz-global-color-brand-yellow-800: #b38900;
199
+ --lmvz-global-color-brand-yellow-900: #7a5e00;
200
+ --lmvz-global-color-brand-yellow-950: #614a00;
200
201
  --lmvz-global-color-brand-blue-50: #f6fbfe;
201
202
  --lmvz-global-color-brand-blue-100: #f1f9fe;
202
203
  --lmvz-global-color-brand-blue-200: #def2fd;
@@ -283,15 +284,12 @@
283
284
  --lmvz-spacing-spec-margin-m: 3.75rem;
284
285
  --lmvz-spacing-spec-margin-s: 2.625rem;
285
286
  --lmvz-spacing-spec-margin-xs: 1.5rem;
286
- --lmvz-component-icon-border-width-default: var(--lmvz-global-border-width-3);
287
- --lmvz-component-icon-border-width-strong: var(--lmvz-global-border-width-5);
287
+ --lmvz-spacing-spec-margin-xxl: 30rem;
288
+ --lmvz-component-icon-border-width-default: var(--lmvz-global-border-width-2);
289
+ --lmvz-component-icon-border-width-strong: var(--lmvz-global-border-width-4);
288
290
  --lmvz-component-line-height-narrow: var(--lmvz-global-line-height-120);
289
291
  --lmvz-component-line-height-default: var(--lmvz-global-line-height-140);
290
292
  --lmvz-component-line-height-wide: var(--lmvz-global-line-height-160);
291
- --lmvz-component-h1: var(--lmvz-digital-cols-8);
292
- --lmvz-component-h2: var(--lmvz-digital-cols-8);
293
- --lmvz-component-h3: var(--lmvz-digital-cols-6);
294
- --lmvz-component-p: var(--lmvz-digital-cols-6);
295
293
  --lmvz-component-component-spacing-0-default: var(--lmvz-global-s4);
296
294
  --lmvz-component-component-spacing-0-elevated: var(--lmvz-global-s8);
297
295
  --lmvz-component-component-typography-display-font-size: var(--lmvz-global-global-font-size-44);
@@ -341,41 +339,52 @@
341
339
  --lmvz-semantic-color-on-surface-secondary: var(--lmvz-global-color-grey-neutral-700);
342
340
  --lmvz-semantic-color-on-surface-tertiary: var(--lmvz-global-color-grey-neutral-500);
343
341
  --lmvz-semantic-color-status-on-neutral: var(--lmvz-global-color-grey-neutral-800);
344
- --lmvz-semantic-color-status-on-selected: var(--lmvz-global-color-brand-blue-950);
345
- --lmvz-semantic-color-status-on-success: var(--lmvz-global-color-brand-green-500);
346
- --lmvz-semantic-color-status-on-warning: var(--lmvz-global-color-brand-yellow-800);
342
+ --lmvz-semantic-color-status-on-active: var(--lmvz-global-color-brand-blue-950);
343
+ --lmvz-semantic-color-status-on-success: var(--lmvz-global-color-brand-green-800);
344
+ --lmvz-semantic-color-status-on-warning: var(--lmvz-global-color-brand-yellow-900);
347
345
  --lmvz-semantic-color-status-on-danger: var(--lmvz-global-color-brand-red-700);
348
346
  --lmvz-semantic-color-status-neutral: var(--lmvz-global-color-grey-neutral-50);
349
- --lmvz-semantic-color-status-selected: var(--lmvz-global-color-brand-blue-100);
347
+ --lmvz-semantic-color-status-active: var(--lmvz-global-color-brand-blue-100);
350
348
  --lmvz-semantic-color-status-success: var(--lmvz-global-color-brand-green-50);
351
349
  --lmvz-semantic-color-status-warning: var(--lmvz-global-color-brand-yellow-50);
352
350
  --lmvz-semantic-color-status-danger: var(--lmvz-global-color-brand-red-50);
351
+ --lmvz-semantic-color-status-active-alternate: var(--lmvz-global-color-brand-blue-900);
352
+ --lmvz-semantic-color-status-on-neutral-subtle: var(--lmvz-global-color-grey-neutral-400);
353
+ --lmvz-semantic-color-status-on-active-subtle: var(--lmvz-global-color-brand-blue-400);
354
+ --lmvz-semantic-color-status-on-active-alternate: var(--lmvz-global-color-neutral-white);
355
+ --lmvz-semantic-color-status-on-success-subtle: var(--lmvz-global-color-brand-green-300);
356
+ --lmvz-semantic-color-status-on-warning-subtle: var(--lmvz-global-color-brand-yellow-400);
357
+ --lmvz-semantic-color-status-on-danger-subtle: var(--lmvz-global-color-brand-red-200);
353
358
  --lmvz-semantic-color-border-default: var(--lmvz-global-color-grey-neutral-300);
354
359
  --lmvz-semantic-color-border-hover: var(--lmvz-global-color-grey-neutral-500);
355
- --lmvz-semantic-color-border-active: var(--lmvz-global-color-grey-neutral-400);
356
360
  --lmvz-semantic-color-border-subtle: var(--lmvz-global-color-grey-neutral-200);
357
361
  --lmvz-semantic-color-border-subtle-hover: var(--lmvz-global-color-grey-neutral-400);
358
362
  --lmvz-semantic-color-on-surface-input-primary: var(--lmvz-global-color-neutral-black);
359
363
  --lmvz-semantic-color-on-surface-input-secondary: var(--lmvz-global-color-grey-neutral-700);
360
- --lmvz-semantic-color-brand-hellblau: var(--lmvz-global-color-brand-blue-400);
361
- --lmvz-semantic-color-brand-gruen: var(--lmvz-global-color-brand-green-400);
362
- --lmvz-semantic-color-brand-gelb: var(--lmvz-global-color-brand-yellow-400);
363
- --lmvz-semantic-color-brand-rot: var(--lmvz-global-color-brand-red-400);
364
+ --lmvz-semantic-color-brand-media1: var(--lmvz-global-color-brand-blue-400);
365
+ --lmvz-semantic-color-brand-media2: var(--lmvz-global-color-brand-green-400);
366
+ --lmvz-semantic-color-brand-media3: var(--lmvz-global-color-brand-yellow-300);
367
+ --lmvz-semantic-color-brand-media4: var(--lmvz-global-color-brand-red-300);
368
+ --lmvz-semantic-color-brand-media5: var(--lmvz-global-color-brand-purple-400);
369
+ --lmvz-semantic-color-brand-media6: var(--lmvz-global-color-brand-magenta-300);
370
+ --lmvz-semantic-color-brand-media7: var(--lmvz-global-color-brand-indigo-200);
371
+ --lmvz-semantic-color-brand-media8: var(--lmvz-global-color-grey-neutral-400);
364
372
  --lmvz-spacing-spec-margin-bottom-title: var(--lmvz-spacing-spec-margin-m);
365
373
  --lmvz-string-font-family: var(--lmvz-global-font-family-default);
366
374
  --lmvz-sem-sem-border-radius-medium: var(--lmvz-global-border-radius-16);
367
375
  --lmvz-sem-sem-border-radius-small: var(--lmvz-global-border-radius-8);
368
376
  --lmvz-component-icon-hover-sm-default: var(--lmvz-dimension-11-14);
369
377
  --lmvz-component-icon-hover-sm-scaled: var(--lmvz-dimension-12-16);
370
- --lmvz-component-icon-size-xs: var(--lmvz-dimension-12-16);
371
- --lmvz-component-icon-size-sm: var(--lmvz-dimension-14-18);
372
- --lmvz-component-icon-size-md: var(--lmvz-dimension-16-24);
373
- --lmvz-component-icon-size-lg: var(--lmvz-dimension-24-32);
374
- --lmvz-component-icon-size-2xs: var(--lmvz-dimension-11-14);
378
+ --lmvz-component-icon-size-xs: var(--lmvz-dimension-12-14);
379
+ --lmvz-component-icon-size-sm: var(--lmvz-dimension-14-16);
380
+ --lmvz-component-icon-size-md: var(--lmvz-dimension-16-20);
381
+ --lmvz-component-icon-size-lg: var(--lmvz-dimension-24-28);
382
+ --lmvz-component-icon-size-2xs: var(--lmvz-dimension-10-12);
383
+ --lmvz-component-icon-size-xl: var(--lmvz-dimension-28-36);
375
384
  --lmvz-component-heading-4xl-font-size: var(--lmvz-dimension-48-64);
376
385
  --lmvz-component-heading-4xl-line-height: var(--lmvz-component-line-height-default);
377
386
  --lmvz-component-heading-4xl-padding-bottom: var(--lmvz-dimension-28-40);
378
- --lmvz-component-heading-2xl-font-size: var(--lmvz-dimension-32-36);
387
+ --lmvz-component-heading-2xl-font-size: var(--lmvz-dimension-36-44);
379
388
  --lmvz-component-heading-2xl-line-height: var(--lmvz-component-line-height-narrow);
380
389
  --lmvz-component-heading-2xl-padding-bottom: var(--lmvz-dimension-28-40);
381
390
  --lmvz-component-heading-xl-font-size: var(--lmvz-dimension-24-28);
@@ -439,9 +448,9 @@
439
448
  --lmvz-component-input-lg-padding-x: var(--lmvz-dimension-14-20);
440
449
  --lmvz-component-input-lg-padding-y: var(--lmvz-dimension-14-20);
441
450
  --lmvz-component-input-lg-gap-x: var(--lmvz-dimension-4-10);
442
- --lmvz-component-input-height-sm: var(--lmvz-dimension-24-28);
443
- --lmvz-component-input-height-md: var(--lmvz-dimension-36-40);
444
- --lmvz-component-input-height-lg: var(--lmvz-dimension-40-48);
451
+ --lmvz-component-input-height-sm: var(--lmvz-dimension-36-40);
452
+ --lmvz-component-input-height-md: var(--lmvz-dimension-40-44);
453
+ --lmvz-component-input-height-lg: var(--lmvz-dimension-44-48);
445
454
  --lmvz-component-input-padding-sm: var(--lmvz-dimension-12-14);
446
455
  --lmvz-component-input-padding-md: var(--lmvz-dimension-14-16);
447
456
  --lmvz-component-input-padding-lg: var(--lmvz-dimension-16-20);
@@ -449,14 +458,18 @@
449
458
  --lmvz-component-input-gap-md: var(--lmvz-dimension-8-12);
450
459
  --lmvz-component-input-gap-lg: var(--lmvz-dimension-12-14);
451
460
  --lmvz-component-input-bg: var(--lmvz-semantic-color-surface-primary);
452
- --lmvz-component-card-gap-xy: var(--lmvz-dimension-12-18);
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);
453
465
  --lmvz-semantic-border-radius-xl: var(--lmvz-dimension-18-24);
454
466
  --lmvz-semantic-border-radius-lg: var(--lmvz-dimension-14-16);
455
467
  --lmvz-semantic-border-radius-md: var(--lmvz-dimension-6-8);
456
468
  --lmvz-semantic-border-radius-sm: var(--lmvz-dimension-2-4);
469
+ --lmvz-semantic-color-border-active: var(--lmvz-semantic-color-status-active-alternate);
457
470
  --lmvz-semantic-color-surface-input-primary: var(--lmvz-semantic-color-surface-primary);
458
- --lmvz-semantic-color-gradient-main-1: var(--lmvz-semantic-color-status-on-selected);
459
- --lmvz-semantic-color-gradient-main-2: var(--lmvz-semantic-color-status-on-selected);
471
+ --lmvz-semantic-color-gradient-main-1: var(--lmvz-semantic-color-status-on-active);
472
+ --lmvz-semantic-color-gradient-main-2: var(--lmvz-semantic-color-status-on-active);
460
473
  --lmvz-component-box-radius: var(--lmvz-semantic-border-radius-xl);
461
474
  }
462
475
  /**
@@ -468,6 +481,7 @@
468
481
  --lmvz-dimension-64-128: clamp(4rem, 3.03rem + 4.14vw, 8rem);
469
482
  --lmvz-dimension-56-128: clamp(3.5rem, 2.41rem + 4.66vw, 8rem);
470
483
  --lmvz-dimension-48-128: clamp(3rem, 1.79rem + 5.18vw, 8rem);
484
+ --lmvz-dimension-44-128: clamp(2.75rem, 1.48rem + 5.44vw, 8rem);
471
485
  --lmvz-dimension-40-128: clamp(2.5rem, 1.17rem + 5.7vw, 8rem);
472
486
  --lmvz-dimension-36-128: clamp(2.25rem, 0.85rem + 5.95vw, 8rem);
473
487
  --lmvz-dimension-33-128: clamp(2.06rem, 0.62rem + 6.15vw, 8rem);
@@ -496,6 +510,7 @@
496
510
  --lmvz-dimension-64-96: clamp(4rem, 3.51rem + 2.07vw, 6rem);
497
511
  --lmvz-dimension-56-96: clamp(3.5rem, 2.89rem + 2.59vw, 6rem);
498
512
  --lmvz-dimension-48-96: clamp(3rem, 2.27rem + 3.11vw, 6rem);
513
+ --lmvz-dimension-44-96: clamp(2.75rem, 1.96rem + 3.37vw, 6rem);
499
514
  --lmvz-dimension-40-96: clamp(2.5rem, 1.65rem + 3.62vw, 6rem);
500
515
  --lmvz-dimension-36-96: clamp(2.25rem, 1.34rem + 3.88vw, 6rem);
501
516
  --lmvz-dimension-33-96: clamp(2.06rem, 1.11rem + 4.08vw, 6rem);
@@ -523,6 +538,7 @@
523
538
  --lmvz-dimension-64-80: clamp(4rem, 3.76rem + 1.04vw, 5rem);
524
539
  --lmvz-dimension-56-80: clamp(3.5rem, 3.14rem + 1.55vw, 5rem);
525
540
  --lmvz-dimension-48-80: clamp(3rem, 2.51rem + 2.07vw, 5rem);
541
+ --lmvz-dimension-44-80: clamp(2.75rem, 2.2rem + 2.33vw, 5rem);
526
542
  --lmvz-dimension-40-80: clamp(2.5rem, 1.89rem + 2.59vw, 5rem);
527
543
  --lmvz-dimension-36-80: clamp(2.25rem, 1.58rem + 2.85vw, 5rem);
528
544
  --lmvz-dimension-33-80: clamp(2.06rem, 1.35rem + 3.04vw, 5rem);
@@ -549,6 +565,7 @@
549
565
  --lmvz-dimension-2-80: clamp(0.13rem, -1.06rem + 5.05vw, 5rem);
550
566
  --lmvz-dimension-56-64: clamp(3.5rem, 3.38rem + 0.52vw, 4rem);
551
567
  --lmvz-dimension-48-64: clamp(3rem, 2.76rem + 1.04vw, 4rem);
568
+ --lmvz-dimension-44-64: clamp(2.75rem, 2.45rem + 1.29vw, 4rem);
552
569
  --lmvz-dimension-40-64: clamp(2.5rem, 2.14rem + 1.55vw, 4rem);
553
570
  --lmvz-dimension-36-64: clamp(2.25rem, 1.83rem + 1.81vw, 4rem);
554
571
  --lmvz-dimension-33-64: clamp(2.06rem, 1.59rem + 2.01vw, 4rem);
@@ -574,6 +591,7 @@
574
591
  --lmvz-dimension-4-64: clamp(0.25rem, -0.66rem + 3.88vw, 4rem);
575
592
  --lmvz-dimension-2-64: clamp(0.13rem, -0.82rem + 4.01vw, 4rem);
576
593
  --lmvz-dimension-48-56: clamp(3rem, 2.88rem + 0.52vw, 3.5rem);
594
+ --lmvz-dimension-44-56: clamp(2.75rem, 2.57rem + 0.78vw, 3.5rem);
577
595
  --lmvz-dimension-40-56: clamp(2.5rem, 2.26rem + 1.04vw, 3.5rem);
578
596
  --lmvz-dimension-36-56: clamp(2.25rem, 1.95rem + 1.29vw, 3.5rem);
579
597
  --lmvz-dimension-33-56: clamp(2.06rem, 1.71rem + 1.49vw, 3.5rem);
@@ -598,6 +616,7 @@
598
616
  --lmvz-dimension-6-56: clamp(0.38rem, -0.38rem + 3.24vw, 3.5rem);
599
617
  --lmvz-dimension-4-56: clamp(0.25rem, -0.54rem + 3.37vw, 3.5rem);
600
618
  --lmvz-dimension-2-56: clamp(0.13rem, -0.69rem + 3.5vw, 3.5rem);
619
+ --lmvz-dimension-44-48: clamp(2.75rem, 2.69rem + 0.26vw, 3rem);
601
620
  --lmvz-dimension-40-48: clamp(2.5rem, 2.38rem + 0.52vw, 3rem);
602
621
  --lmvz-dimension-36-48: clamp(2.25rem, 2.07rem + 0.78vw, 3rem);
603
622
  --lmvz-dimension-33-48: clamp(2.06rem, 1.83rem + 0.97vw, 3rem);
@@ -622,6 +641,30 @@
622
641
  --lmvz-dimension-6-48: clamp(0.38rem, -0.26rem + 2.72vw, 3rem);
623
642
  --lmvz-dimension-4-48: clamp(0.25rem, -0.42rem + 2.85vw, 3rem);
624
643
  --lmvz-dimension-2-48: clamp(0.13rem, -0.57rem + 2.98vw, 3rem);
644
+ --lmvz-dimension-40-44: clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem);
645
+ --lmvz-dimension-36-44: clamp(2.25rem, 2.13rem + 0.52vw, 2.75rem);
646
+ --lmvz-dimension-33-44: clamp(2.06rem, 1.9rem + 0.71vw, 2.75rem);
647
+ --lmvz-dimension-32-44: clamp(2rem, 1.82rem + 0.78vw, 2.75rem);
648
+ --lmvz-dimension-31-44: clamp(1.94rem, 1.74rem + 0.84vw, 2.75rem);
649
+ --lmvz-dimension-29-44: clamp(1.81rem, 1.58rem + 0.97vw, 2.75rem);
650
+ --lmvz-dimension-28-44: clamp(1.75rem, 1.51rem + 1.04vw, 2.75rem);
651
+ --lmvz-dimension-27-44: clamp(1.69rem, 1.43rem + 1.1vw, 2.75rem);
652
+ --lmvz-dimension-25-44: clamp(1.56rem, 1.27rem + 1.23vw, 2.75rem);
653
+ --lmvz-dimension-24-44: clamp(1.5rem, 1.2rem + 1.29vw, 2.75rem);
654
+ --lmvz-dimension-23-44: clamp(1.44rem, 1.12rem + 1.36vw, 2.75rem);
655
+ --lmvz-dimension-21-44: clamp(1.31rem, 0.96rem + 1.49vw, 2.75rem);
656
+ --lmvz-dimension-20-44: clamp(1.25rem, 0.89rem + 1.55vw, 2.75rem);
657
+ --lmvz-dimension-18-44: clamp(1.13rem, 0.73rem + 1.68vw, 2.75rem);
658
+ --lmvz-dimension-16-44: clamp(1rem, 0.58rem + 1.81vw, 2.75rem);
659
+ --lmvz-dimension-14-44: clamp(0.88rem, 0.42rem + 1.94vw, 2.75rem);
660
+ --lmvz-dimension-13-44: clamp(0.81rem, 0.34rem + 2.01vw, 2.75rem);
661
+ --lmvz-dimension-12-44: clamp(0.75rem, 0.26rem + 2.07vw, 2.75rem);
662
+ --lmvz-dimension-11-44: clamp(0.69rem, 0.19rem + 2.14vw, 2.75rem);
663
+ --lmvz-dimension-10-44: clamp(0.63rem, 0.11rem + 2.2vw, 2.75rem);
664
+ --lmvz-dimension-8-44: clamp(0.5rem, -0.05rem + 2.33vw, 2.75rem);
665
+ --lmvz-dimension-6-44: clamp(0.38rem, -0.2rem + 2.46vw, 2.75rem);
666
+ --lmvz-dimension-4-44: clamp(0.25rem, -0.36rem + 2.59vw, 2.75rem);
667
+ --lmvz-dimension-2-44: clamp(0.13rem, -0.51rem + 2.72vw, 2.75rem);
625
668
  --lmvz-dimension-36-40: clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem);
626
669
  --lmvz-dimension-33-40: clamp(2.06rem, 1.96rem + 0.45vw, 2.5rem);
627
670
  --lmvz-dimension-32-40: clamp(2rem, 1.88rem + 0.52vw, 2.5rem);
package/dist/css/variables.dark.global.css CHANGED
@@ -58,12 +58,12 @@
58
58
  --lmvz-semantic-color-on-surface-secondary: var(--lmvz-global-color-grey-neutral-300);
59
59
  --lmvz-semantic-color-on-surface-tertiary: var(--lmvz-global-color-grey-neutral-500);
60
60
  --lmvz-semantic-color-status-on-neutral: var(--lmvz-global-color-grey-neutral-800);
61
- --lmvz-semantic-color-status-on-selected: var(--lmvz-global-color-brand-blue-950);
61
+ --lmvz-semantic-color-status-on-active: var(--lmvz-global-color-brand-blue-950);
62
62
  --lmvz-semantic-color-status-on-success: var(--lmvz-global-color-brand-green-500);
63
63
  --lmvz-semantic-color-status-on-warning: var(--lmvz-global-color-brand-yellow-800);
64
64
  --lmvz-semantic-color-status-on-danger: var(--lmvz-global-color-brand-red-700);
65
65
  --lmvz-semantic-color-status-neutral: var(--lmvz-global-color-grey-neutral-50);
66
- --lmvz-semantic-color-status-selected: var(--lmvz-global-color-brand-blue-100);
66
+ --lmvz-semantic-color-status-active: var(--lmvz-global-color-brand-blue-100);
67
67
  --lmvz-semantic-color-status-success: var(--lmvz-global-color-brand-green-50);
68
68
  --lmvz-semantic-color-status-warning: var(--lmvz-global-color-brand-yellow-50);
69
69
  --lmvz-semantic-color-status-danger: var(--lmvz-global-color-brand-red-50);
@@ -74,10 +74,10 @@
74
74
  --lmvz-semantic-color-border-subtle-hover: var(--lmvz-global-color-grey-neutral-600);
75
75
  --lmvz-semantic-color-on-surface-input-primary: var(--lmvz-global-color-neutral-white);
76
76
  --lmvz-semantic-color-on-surface-input-secondary: var(--lmvz-global-color-grey-neutral-300);
77
- --lmvz-semantic-color-brand-hellblau: var(--lmvz-global-color-brand-blue-400);
78
- --lmvz-semantic-color-brand-gruen: var(--lmvz-global-color-brand-green-400);
79
- --lmvz-semantic-color-brand-gelb: var(--lmvz-global-color-brand-yellow-400);
80
- --lmvz-semantic-color-brand-rot: var(--lmvz-global-color-brand-red-400);
77
+ --lmvz-semantic-color-brand-media1: var(--lmvz-global-color-brand-blue-400);
78
+ --lmvz-semantic-color-brand-media2: var(--lmvz-global-color-brand-green-400);
79
+ --lmvz-semantic-color-brand-media3: var(--lmvz-global-color-brand-yellow-400);
80
+ --lmvz-semantic-color-brand-media4: var(--lmvz-global-color-brand-red-400);
81
81
  --lmvz-string-font-family: var(--lmvz-global-font-family-default);
82
82
  --lmvz-semantic-color-surface-input-primary: var(--lmvz-semantic-color-surface-primary);
83
83
  --lmvz-semantic-color-gradient-main-1: var(--lmvz-semantic-color-int-primary);
package/dist/css/variables.dark.themed.css CHANGED
@@ -58,12 +58,12 @@
58
58
  --lmvz-semantic-color-on-surface-secondary: var(--lmvz-global-color-grey-neutral-300);
59
59
  --lmvz-semantic-color-on-surface-tertiary: var(--lmvz-global-color-grey-neutral-500);
60
60
  --lmvz-semantic-color-status-on-neutral: var(--lmvz-global-color-grey-neutral-800);
61
- --lmvz-semantic-color-status-on-selected: var(--lmvz-global-color-brand-blue-950);
61
+ --lmvz-semantic-color-status-on-active: var(--lmvz-global-color-brand-blue-950);
62
62
  --lmvz-semantic-color-status-on-success: var(--lmvz-global-color-brand-green-500);
63
63
  --lmvz-semantic-color-status-on-warning: var(--lmvz-global-color-brand-yellow-800);
64
64
  --lmvz-semantic-color-status-on-danger: var(--lmvz-global-color-brand-red-700);
65
65
  --lmvz-semantic-color-status-neutral: var(--lmvz-global-color-grey-neutral-50);
66
- --lmvz-semantic-color-status-selected: var(--lmvz-global-color-brand-blue-100);
66
+ --lmvz-semantic-color-status-active: var(--lmvz-global-color-brand-blue-100);
67
67
  --lmvz-semantic-color-status-success: var(--lmvz-global-color-brand-green-50);
68
68
  --lmvz-semantic-color-status-warning: var(--lmvz-global-color-brand-yellow-50);
69
69
  --lmvz-semantic-color-status-danger: var(--lmvz-global-color-brand-red-50);
@@ -74,10 +74,10 @@
74
74
  --lmvz-semantic-color-border-subtle-hover: var(--lmvz-global-color-grey-neutral-600);
75
75
  --lmvz-semantic-color-on-surface-input-primary: var(--lmvz-global-color-neutral-white);
76
76
  --lmvz-semantic-color-on-surface-input-secondary: var(--lmvz-global-color-grey-neutral-300);
77
- --lmvz-semantic-color-brand-hellblau: var(--lmvz-global-color-brand-blue-400);
78
- --lmvz-semantic-color-brand-gruen: var(--lmvz-global-color-brand-green-400);
79
- --lmvz-semantic-color-brand-gelb: var(--lmvz-global-color-brand-yellow-400);
80
- --lmvz-semantic-color-brand-rot: var(--lmvz-global-color-brand-red-400);
77
+ --lmvz-semantic-color-brand-media1: var(--lmvz-global-color-brand-blue-400);
78
+ --lmvz-semantic-color-brand-media2: var(--lmvz-global-color-brand-green-400);
79
+ --lmvz-semantic-color-brand-media3: var(--lmvz-global-color-brand-yellow-400);
80
+ --lmvz-semantic-color-brand-media4: var(--lmvz-global-color-brand-red-400);
81
81
  --lmvz-string-font-family: var(--lmvz-global-font-family-default);
82
82
  --lmvz-semantic-color-surface-input-primary: var(--lmvz-semantic-color-surface-primary);
83
83
  --lmvz-semantic-color-gradient-main-1: var(--lmvz-semantic-color-int-primary);
package/dist/css/variables.light.global.css CHANGED
@@ -58,30 +58,41 @@
58
58
  --lmvz-semantic-color-on-surface-secondary: var(--lmvz-global-color-grey-neutral-700);
59
59
  --lmvz-semantic-color-on-surface-tertiary: var(--lmvz-global-color-grey-neutral-500);
60
60
  --lmvz-semantic-color-status-on-neutral: var(--lmvz-global-color-grey-neutral-800);
61
- --lmvz-semantic-color-status-on-selected: var(--lmvz-global-color-brand-blue-950);
62
- --lmvz-semantic-color-status-on-success: var(--lmvz-global-color-brand-green-500);
63
- --lmvz-semantic-color-status-on-warning: var(--lmvz-global-color-brand-yellow-800);
61
+ --lmvz-semantic-color-status-on-active: var(--lmvz-global-color-brand-blue-950);
62
+ --lmvz-semantic-color-status-on-success: var(--lmvz-global-color-brand-green-800);
63
+ --lmvz-semantic-color-status-on-warning: var(--lmvz-global-color-brand-yellow-900);
64
64
  --lmvz-semantic-color-status-on-danger: var(--lmvz-global-color-brand-red-700);
65
65
  --lmvz-semantic-color-status-neutral: var(--lmvz-global-color-grey-neutral-50);
66
- --lmvz-semantic-color-status-selected: var(--lmvz-global-color-brand-blue-100);
66
+ --lmvz-semantic-color-status-active: var(--lmvz-global-color-brand-blue-100);
67
67
  --lmvz-semantic-color-status-success: var(--lmvz-global-color-brand-green-50);
68
68
  --lmvz-semantic-color-status-warning: var(--lmvz-global-color-brand-yellow-50);
69
69
  --lmvz-semantic-color-status-danger: var(--lmvz-global-color-brand-red-50);
70
+ --lmvz-semantic-color-status-active-alternate: var(--lmvz-global-color-brand-blue-900);
71
+ --lmvz-semantic-color-status-on-neutral-subtle: var(--lmvz-global-color-grey-neutral-400);
72
+ --lmvz-semantic-color-status-on-active-subtle: var(--lmvz-global-color-brand-blue-400);
73
+ --lmvz-semantic-color-status-on-active-alternate: var(--lmvz-global-color-neutral-white);
74
+ --lmvz-semantic-color-status-on-success-subtle: var(--lmvz-global-color-brand-green-300);
75
+ --lmvz-semantic-color-status-on-warning-subtle: var(--lmvz-global-color-brand-yellow-400);
76
+ --lmvz-semantic-color-status-on-danger-subtle: var(--lmvz-global-color-brand-red-200);
70
77
  --lmvz-semantic-color-border-default: var(--lmvz-global-color-grey-neutral-300);
71
78
  --lmvz-semantic-color-border-hover: var(--lmvz-global-color-grey-neutral-500);
72
- --lmvz-semantic-color-border-active: var(--lmvz-global-color-grey-neutral-400);
73
79
  --lmvz-semantic-color-border-subtle: var(--lmvz-global-color-grey-neutral-200);
74
80
  --lmvz-semantic-color-border-subtle-hover: var(--lmvz-global-color-grey-neutral-400);
75
81
  --lmvz-semantic-color-on-surface-input-primary: var(--lmvz-global-color-neutral-black);
76
82
  --lmvz-semantic-color-on-surface-input-secondary: var(--lmvz-global-color-grey-neutral-700);
77
- --lmvz-semantic-color-brand-hellblau: var(--lmvz-global-color-brand-blue-400);
78
- --lmvz-semantic-color-brand-gruen: var(--lmvz-global-color-brand-green-400);
79
- --lmvz-semantic-color-brand-gelb: var(--lmvz-global-color-brand-yellow-400);
80
- --lmvz-semantic-color-brand-rot: var(--lmvz-global-color-brand-red-400);
83
+ --lmvz-semantic-color-brand-media1: var(--lmvz-global-color-brand-blue-400);
84
+ --lmvz-semantic-color-brand-media2: var(--lmvz-global-color-brand-green-400);
85
+ --lmvz-semantic-color-brand-media3: var(--lmvz-global-color-brand-yellow-300);
86
+ --lmvz-semantic-color-brand-media4: var(--lmvz-global-color-brand-red-300);
87
+ --lmvz-semantic-color-brand-media5: var(--lmvz-global-color-brand-purple-400);
88
+ --lmvz-semantic-color-brand-media6: var(--lmvz-global-color-brand-magenta-300);
89
+ --lmvz-semantic-color-brand-media7: var(--lmvz-global-color-brand-indigo-200);
90
+ --lmvz-semantic-color-brand-media8: var(--lmvz-global-color-grey-neutral-400);
81
91
  --lmvz-string-font-family: var(--lmvz-global-font-family-default);
82
92
  --lmvz-sem-sem-border-radius-medium: var(--lmvz-global-border-radius-16);
83
93
  --lmvz-sem-sem-border-radius-small: var(--lmvz-global-border-radius-8);
94
+ --lmvz-semantic-color-border-active: var(--lmvz-semantic-color-status-active-alternate);
84
95
  --lmvz-semantic-color-surface-input-primary: var(--lmvz-semantic-color-surface-primary);
85
- --lmvz-semantic-color-gradient-main-1: var(--lmvz-semantic-color-status-on-selected);
86
- --lmvz-semantic-color-gradient-main-2: var(--lmvz-semantic-color-status-on-selected);
96
+ --lmvz-semantic-color-gradient-main-1: var(--lmvz-semantic-color-status-on-active);
97
+ --lmvz-semantic-color-gradient-main-2: var(--lmvz-semantic-color-status-on-active);
87
98
  }
package/dist/css/variables.light.themed.css CHANGED
@@ -58,30 +58,41 @@
58
58
  --lmvz-semantic-color-on-surface-secondary: var(--lmvz-global-color-grey-neutral-700);
59
59
  --lmvz-semantic-color-on-surface-tertiary: var(--lmvz-global-color-grey-neutral-500);
60
60
  --lmvz-semantic-color-status-on-neutral: var(--lmvz-global-color-grey-neutral-800);
61
- --lmvz-semantic-color-status-on-selected: var(--lmvz-global-color-brand-blue-950);
62
- --lmvz-semantic-color-status-on-success: var(--lmvz-global-color-brand-green-500);
63
- --lmvz-semantic-color-status-on-warning: var(--lmvz-global-color-brand-yellow-800);
61
+ --lmvz-semantic-color-status-on-active: var(--lmvz-global-color-brand-blue-950);
62
+ --lmvz-semantic-color-status-on-success: var(--lmvz-global-color-brand-green-800);
63
+ --lmvz-semantic-color-status-on-warning: var(--lmvz-global-color-brand-yellow-900);
64
64
  --lmvz-semantic-color-status-on-danger: var(--lmvz-global-color-brand-red-700);
65
65
  --lmvz-semantic-color-status-neutral: var(--lmvz-global-color-grey-neutral-50);
66
- --lmvz-semantic-color-status-selected: var(--lmvz-global-color-brand-blue-100);
66
+ --lmvz-semantic-color-status-active: var(--lmvz-global-color-brand-blue-100);
67
67
  --lmvz-semantic-color-status-success: var(--lmvz-global-color-brand-green-50);
68
68
  --lmvz-semantic-color-status-warning: var(--lmvz-global-color-brand-yellow-50);
69
69
  --lmvz-semantic-color-status-danger: var(--lmvz-global-color-brand-red-50);
70
+ --lmvz-semantic-color-status-active-alternate: var(--lmvz-global-color-brand-blue-900);
71
+ --lmvz-semantic-color-status-on-neutral-subtle: var(--lmvz-global-color-grey-neutral-400);
72
+ --lmvz-semantic-color-status-on-active-subtle: var(--lmvz-global-color-brand-blue-400);
73
+ --lmvz-semantic-color-status-on-active-alternate: var(--lmvz-global-color-neutral-white);
74
+ --lmvz-semantic-color-status-on-success-subtle: var(--lmvz-global-color-brand-green-300);
75
+ --lmvz-semantic-color-status-on-warning-subtle: var(--lmvz-global-color-brand-yellow-400);
76
+ --lmvz-semantic-color-status-on-danger-subtle: var(--lmvz-global-color-brand-red-200);
70
77
  --lmvz-semantic-color-border-default: var(--lmvz-global-color-grey-neutral-300);
71
78
  --lmvz-semantic-color-border-hover: var(--lmvz-global-color-grey-neutral-500);
72
- --lmvz-semantic-color-border-active: var(--lmvz-global-color-grey-neutral-400);
73
79
  --lmvz-semantic-color-border-subtle: var(--lmvz-global-color-grey-neutral-200);
74
80
  --lmvz-semantic-color-border-subtle-hover: var(--lmvz-global-color-grey-neutral-400);
75
81
  --lmvz-semantic-color-on-surface-input-primary: var(--lmvz-global-color-neutral-black);
76
82
  --lmvz-semantic-color-on-surface-input-secondary: var(--lmvz-global-color-grey-neutral-700);
77
- --lmvz-semantic-color-brand-hellblau: var(--lmvz-global-color-brand-blue-400);
78
- --lmvz-semantic-color-brand-gruen: var(--lmvz-global-color-brand-green-400);
79
- --lmvz-semantic-color-brand-gelb: var(--lmvz-global-color-brand-yellow-400);
80
- --lmvz-semantic-color-brand-rot: var(--lmvz-global-color-brand-red-400);
83
+ --lmvz-semantic-color-brand-media1: var(--lmvz-global-color-brand-blue-400);
84
+ --lmvz-semantic-color-brand-media2: var(--lmvz-global-color-brand-green-400);
85
+ --lmvz-semantic-color-brand-media3: var(--lmvz-global-color-brand-yellow-300);
86
+ --lmvz-semantic-color-brand-media4: var(--lmvz-global-color-brand-red-300);
87
+ --lmvz-semantic-color-brand-media5: var(--lmvz-global-color-brand-purple-400);
88
+ --lmvz-semantic-color-brand-media6: var(--lmvz-global-color-brand-magenta-300);
89
+ --lmvz-semantic-color-brand-media7: var(--lmvz-global-color-brand-indigo-200);
90
+ --lmvz-semantic-color-brand-media8: var(--lmvz-global-color-grey-neutral-400);
81
91
  --lmvz-string-font-family: var(--lmvz-global-font-family-default);
82
92
  --lmvz-sem-sem-border-radius-medium: var(--lmvz-global-border-radius-16);
83
93
  --lmvz-sem-sem-border-radius-small: var(--lmvz-global-border-radius-8);
94
+ --lmvz-semantic-color-border-active: var(--lmvz-semantic-color-status-active-alternate);
84
95
  --lmvz-semantic-color-surface-input-primary: var(--lmvz-semantic-color-surface-primary);
85
- --lmvz-semantic-color-gradient-main-1: var(--lmvz-semantic-color-status-on-selected);
86
- --lmvz-semantic-color-gradient-main-2: var(--lmvz-semantic-color-status-on-selected);
96
+ --lmvz-semantic-color-gradient-main-1: var(--lmvz-semantic-color-status-on-active);
97
+ --lmvz-semantic-color-gradient-main-2: var(--lmvz-semantic-color-status-on-active);
87
98
  }
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.18.0",
5
+ "version": "0.18.2",
6
6
  "author": "Patrick Nemenz <patrick.nemenz@adesso.at>",
7
7
  "license": "UNLICENSED",
8
8
  "publishConfig": {