@lmvz-ds/design-tokens 0.18.0 → 0.18.1

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 +6 -0
  2. package/dist/css/variables.base.css +70 -31
  3. package/dist/css/variables.dark.global.css +2 -2
  4. package/dist/css/variables.dark.themed.css +2 -2
  5. package/dist/css/variables.light.global.css +14 -7
  6. package/dist/css/variables.light.themed.css +14 -7
  7. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @lmvz-ds/design-tokens
2
2
 
3
+ ## 0.18.1
4
+
5
+ ### Patch Changes
6
+
7
+ - b34b9fe: Design Tokens aktualisiert
8
+
3
9
  ## 0.18.0
4
10
 
5
11
  ### 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,18 +339,24 @@
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);
@@ -367,15 +371,16 @@
367
371
  --lmvz-sem-sem-border-radius-small: var(--lmvz-global-border-radius-8);
368
372
  --lmvz-component-icon-hover-sm-default: var(--lmvz-dimension-11-14);
369
373
  --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);
374
+ --lmvz-component-icon-size-xs: var(--lmvz-dimension-12-14);
375
+ --lmvz-component-icon-size-sm: var(--lmvz-dimension-14-16);
376
+ --lmvz-component-icon-size-md: var(--lmvz-dimension-16-20);
377
+ --lmvz-component-icon-size-lg: var(--lmvz-dimension-24-28);
378
+ --lmvz-component-icon-size-2xs: var(--lmvz-dimension-10-12);
379
+ --lmvz-component-icon-size-xl: var(--lmvz-dimension-28-36);
375
380
  --lmvz-component-heading-4xl-font-size: var(--lmvz-dimension-48-64);
376
381
  --lmvz-component-heading-4xl-line-height: var(--lmvz-component-line-height-default);
377
382
  --lmvz-component-heading-4xl-padding-bottom: var(--lmvz-dimension-28-40);
378
- --lmvz-component-heading-2xl-font-size: var(--lmvz-dimension-32-36);
383
+ --lmvz-component-heading-2xl-font-size: var(--lmvz-dimension-36-44);
379
384
  --lmvz-component-heading-2xl-line-height: var(--lmvz-component-line-height-narrow);
380
385
  --lmvz-component-heading-2xl-padding-bottom: var(--lmvz-dimension-28-40);
381
386
  --lmvz-component-heading-xl-font-size: var(--lmvz-dimension-24-28);
@@ -439,9 +444,9 @@
439
444
  --lmvz-component-input-lg-padding-x: var(--lmvz-dimension-14-20);
440
445
  --lmvz-component-input-lg-padding-y: var(--lmvz-dimension-14-20);
441
446
  --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);
447
+ --lmvz-component-input-height-sm: var(--lmvz-dimension-36-40);
448
+ --lmvz-component-input-height-md: var(--lmvz-dimension-40-44);
449
+ --lmvz-component-input-height-lg: var(--lmvz-dimension-44-48);
445
450
  --lmvz-component-input-padding-sm: var(--lmvz-dimension-12-14);
446
451
  --lmvz-component-input-padding-md: var(--lmvz-dimension-14-16);
447
452
  --lmvz-component-input-padding-lg: var(--lmvz-dimension-16-20);
@@ -449,14 +454,18 @@
449
454
  --lmvz-component-input-gap-md: var(--lmvz-dimension-8-12);
450
455
  --lmvz-component-input-gap-lg: var(--lmvz-dimension-12-14);
451
456
  --lmvz-component-input-bg: var(--lmvz-semantic-color-surface-primary);
452
- --lmvz-component-card-gap-xy: var(--lmvz-dimension-12-18);
457
+ --lmvz-component-card-gap-xy: var(--lmvz-dimension-16-24);
458
+ --lmvz-component-card-padding-x: var(--lmvz-dimension-24-28);
459
+ --lmvz-component-card-margin-bottom: var(--lmvz-dimension-24-32);
460
+ --lmvz-component-card-margin-top: var(--lmvz-dimension-24-28);
453
461
  --lmvz-semantic-border-radius-xl: var(--lmvz-dimension-18-24);
454
462
  --lmvz-semantic-border-radius-lg: var(--lmvz-dimension-14-16);
455
463
  --lmvz-semantic-border-radius-md: var(--lmvz-dimension-6-8);
456
464
  --lmvz-semantic-border-radius-sm: var(--lmvz-dimension-2-4);
465
+ --lmvz-semantic-color-border-active: var(--lmvz-semantic-color-status-active-alternate);
457
466
  --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);
467
+ --lmvz-semantic-color-gradient-main-1: var(--lmvz-semantic-color-status-on-active);
468
+ --lmvz-semantic-color-gradient-main-2: var(--lmvz-semantic-color-status-on-active);
460
469
  --lmvz-component-box-radius: var(--lmvz-semantic-border-radius-xl);
461
470
  }
462
471
  /**
@@ -468,6 +477,7 @@
468
477
  --lmvz-dimension-64-128: clamp(4rem, 3.03rem + 4.14vw, 8rem);
469
478
  --lmvz-dimension-56-128: clamp(3.5rem, 2.41rem + 4.66vw, 8rem);
470
479
  --lmvz-dimension-48-128: clamp(3rem, 1.79rem + 5.18vw, 8rem);
480
+ --lmvz-dimension-44-128: clamp(2.75rem, 1.48rem + 5.44vw, 8rem);
471
481
  --lmvz-dimension-40-128: clamp(2.5rem, 1.17rem + 5.7vw, 8rem);
472
482
  --lmvz-dimension-36-128: clamp(2.25rem, 0.85rem + 5.95vw, 8rem);
473
483
  --lmvz-dimension-33-128: clamp(2.06rem, 0.62rem + 6.15vw, 8rem);
@@ -496,6 +506,7 @@
496
506
  --lmvz-dimension-64-96: clamp(4rem, 3.51rem + 2.07vw, 6rem);
497
507
  --lmvz-dimension-56-96: clamp(3.5rem, 2.89rem + 2.59vw, 6rem);
498
508
  --lmvz-dimension-48-96: clamp(3rem, 2.27rem + 3.11vw, 6rem);
509
+ --lmvz-dimension-44-96: clamp(2.75rem, 1.96rem + 3.37vw, 6rem);
499
510
  --lmvz-dimension-40-96: clamp(2.5rem, 1.65rem + 3.62vw, 6rem);
500
511
  --lmvz-dimension-36-96: clamp(2.25rem, 1.34rem + 3.88vw, 6rem);
501
512
  --lmvz-dimension-33-96: clamp(2.06rem, 1.11rem + 4.08vw, 6rem);
@@ -523,6 +534,7 @@
523
534
  --lmvz-dimension-64-80: clamp(4rem, 3.76rem + 1.04vw, 5rem);
524
535
  --lmvz-dimension-56-80: clamp(3.5rem, 3.14rem + 1.55vw, 5rem);
525
536
  --lmvz-dimension-48-80: clamp(3rem, 2.51rem + 2.07vw, 5rem);
537
+ --lmvz-dimension-44-80: clamp(2.75rem, 2.2rem + 2.33vw, 5rem);
526
538
  --lmvz-dimension-40-80: clamp(2.5rem, 1.89rem + 2.59vw, 5rem);
527
539
  --lmvz-dimension-36-80: clamp(2.25rem, 1.58rem + 2.85vw, 5rem);
528
540
  --lmvz-dimension-33-80: clamp(2.06rem, 1.35rem + 3.04vw, 5rem);
@@ -549,6 +561,7 @@
549
561
  --lmvz-dimension-2-80: clamp(0.13rem, -1.06rem + 5.05vw, 5rem);
550
562
  --lmvz-dimension-56-64: clamp(3.5rem, 3.38rem + 0.52vw, 4rem);
551
563
  --lmvz-dimension-48-64: clamp(3rem, 2.76rem + 1.04vw, 4rem);
564
+ --lmvz-dimension-44-64: clamp(2.75rem, 2.45rem + 1.29vw, 4rem);
552
565
  --lmvz-dimension-40-64: clamp(2.5rem, 2.14rem + 1.55vw, 4rem);
553
566
  --lmvz-dimension-36-64: clamp(2.25rem, 1.83rem + 1.81vw, 4rem);
554
567
  --lmvz-dimension-33-64: clamp(2.06rem, 1.59rem + 2.01vw, 4rem);
@@ -574,6 +587,7 @@
574
587
  --lmvz-dimension-4-64: clamp(0.25rem, -0.66rem + 3.88vw, 4rem);
575
588
  --lmvz-dimension-2-64: clamp(0.13rem, -0.82rem + 4.01vw, 4rem);
576
589
  --lmvz-dimension-48-56: clamp(3rem, 2.88rem + 0.52vw, 3.5rem);
590
+ --lmvz-dimension-44-56: clamp(2.75rem, 2.57rem + 0.78vw, 3.5rem);
577
591
  --lmvz-dimension-40-56: clamp(2.5rem, 2.26rem + 1.04vw, 3.5rem);
578
592
  --lmvz-dimension-36-56: clamp(2.25rem, 1.95rem + 1.29vw, 3.5rem);
579
593
  --lmvz-dimension-33-56: clamp(2.06rem, 1.71rem + 1.49vw, 3.5rem);
@@ -598,6 +612,7 @@
598
612
  --lmvz-dimension-6-56: clamp(0.38rem, -0.38rem + 3.24vw, 3.5rem);
599
613
  --lmvz-dimension-4-56: clamp(0.25rem, -0.54rem + 3.37vw, 3.5rem);
600
614
  --lmvz-dimension-2-56: clamp(0.13rem, -0.69rem + 3.5vw, 3.5rem);
615
+ --lmvz-dimension-44-48: clamp(2.75rem, 2.69rem + 0.26vw, 3rem);
601
616
  --lmvz-dimension-40-48: clamp(2.5rem, 2.38rem + 0.52vw, 3rem);
602
617
  --lmvz-dimension-36-48: clamp(2.25rem, 2.07rem + 0.78vw, 3rem);
603
618
  --lmvz-dimension-33-48: clamp(2.06rem, 1.83rem + 0.97vw, 3rem);
@@ -622,6 +637,30 @@
622
637
  --lmvz-dimension-6-48: clamp(0.38rem, -0.26rem + 2.72vw, 3rem);
623
638
  --lmvz-dimension-4-48: clamp(0.25rem, -0.42rem + 2.85vw, 3rem);
624
639
  --lmvz-dimension-2-48: clamp(0.13rem, -0.57rem + 2.98vw, 3rem);
640
+ --lmvz-dimension-40-44: clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem);
641
+ --lmvz-dimension-36-44: clamp(2.25rem, 2.13rem + 0.52vw, 2.75rem);
642
+ --lmvz-dimension-33-44: clamp(2.06rem, 1.9rem + 0.71vw, 2.75rem);
643
+ --lmvz-dimension-32-44: clamp(2rem, 1.82rem + 0.78vw, 2.75rem);
644
+ --lmvz-dimension-31-44: clamp(1.94rem, 1.74rem + 0.84vw, 2.75rem);
645
+ --lmvz-dimension-29-44: clamp(1.81rem, 1.58rem + 0.97vw, 2.75rem);
646
+ --lmvz-dimension-28-44: clamp(1.75rem, 1.51rem + 1.04vw, 2.75rem);
647
+ --lmvz-dimension-27-44: clamp(1.69rem, 1.43rem + 1.1vw, 2.75rem);
648
+ --lmvz-dimension-25-44: clamp(1.56rem, 1.27rem + 1.23vw, 2.75rem);
649
+ --lmvz-dimension-24-44: clamp(1.5rem, 1.2rem + 1.29vw, 2.75rem);
650
+ --lmvz-dimension-23-44: clamp(1.44rem, 1.12rem + 1.36vw, 2.75rem);
651
+ --lmvz-dimension-21-44: clamp(1.31rem, 0.96rem + 1.49vw, 2.75rem);
652
+ --lmvz-dimension-20-44: clamp(1.25rem, 0.89rem + 1.55vw, 2.75rem);
653
+ --lmvz-dimension-18-44: clamp(1.13rem, 0.73rem + 1.68vw, 2.75rem);
654
+ --lmvz-dimension-16-44: clamp(1rem, 0.58rem + 1.81vw, 2.75rem);
655
+ --lmvz-dimension-14-44: clamp(0.88rem, 0.42rem + 1.94vw, 2.75rem);
656
+ --lmvz-dimension-13-44: clamp(0.81rem, 0.34rem + 2.01vw, 2.75rem);
657
+ --lmvz-dimension-12-44: clamp(0.75rem, 0.26rem + 2.07vw, 2.75rem);
658
+ --lmvz-dimension-11-44: clamp(0.69rem, 0.19rem + 2.14vw, 2.75rem);
659
+ --lmvz-dimension-10-44: clamp(0.63rem, 0.11rem + 2.2vw, 2.75rem);
660
+ --lmvz-dimension-8-44: clamp(0.5rem, -0.05rem + 2.33vw, 2.75rem);
661
+ --lmvz-dimension-6-44: clamp(0.38rem, -0.2rem + 2.46vw, 2.75rem);
662
+ --lmvz-dimension-4-44: clamp(0.25rem, -0.36rem + 2.59vw, 2.75rem);
663
+ --lmvz-dimension-2-44: clamp(0.13rem, -0.51rem + 2.72vw, 2.75rem);
625
664
  --lmvz-dimension-36-40: clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem);
626
665
  --lmvz-dimension-33-40: clamp(2.06rem, 1.96rem + 0.45vw, 2.5rem);
627
666
  --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);
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);
package/dist/css/variables.light.global.css CHANGED
@@ -58,18 +58,24 @@
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);
@@ -81,7 +87,8 @@
81
87
  --lmvz-string-font-family: var(--lmvz-global-font-family-default);
82
88
  --lmvz-sem-sem-border-radius-medium: var(--lmvz-global-border-radius-16);
83
89
  --lmvz-sem-sem-border-radius-small: var(--lmvz-global-border-radius-8);
90
+ --lmvz-semantic-color-border-active: var(--lmvz-semantic-color-status-active-alternate);
84
91
  --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);
92
+ --lmvz-semantic-color-gradient-main-1: var(--lmvz-semantic-color-status-on-active);
93
+ --lmvz-semantic-color-gradient-main-2: var(--lmvz-semantic-color-status-on-active);
87
94
  }
package/dist/css/variables.light.themed.css CHANGED
@@ -58,18 +58,24 @@
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);
@@ -81,7 +87,8 @@
81
87
  --lmvz-string-font-family: var(--lmvz-global-font-family-default);
82
88
  --lmvz-sem-sem-border-radius-medium: var(--lmvz-global-border-radius-16);
83
89
  --lmvz-sem-sem-border-radius-small: var(--lmvz-global-border-radius-8);
90
+ --lmvz-semantic-color-border-active: var(--lmvz-semantic-color-status-active-alternate);
84
91
  --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);
92
+ --lmvz-semantic-color-gradient-main-1: var(--lmvz-semantic-color-status-on-active);
93
+ --lmvz-semantic-color-gradient-main-2: var(--lmvz-semantic-color-status-on-active);
87
94
  }
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.1",
6
6
  "author": "Patrick Nemenz <patrick.nemenz@adesso.at>",
7
7
  "license": "UNLICENSED",
8
8
  "publishConfig": {