nve-designsystem 4.3.0 → 4.5.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 (82) hide show
  1. package/chunks/chunk.2PCBEMQZ.js +4 -4
  2. package/chunks/chunk.36O46B5H.js +2 -2
  3. package/chunks/chunk.4TUIT776.js +1 -1
  4. package/chunks/chunk.5JY5FUCG.js +325 -344
  5. package/chunks/chunk.5P45LHIX.js +2 -2
  6. package/chunks/chunk.6CTB5ZDJ.js +16 -4
  7. package/chunks/chunk.B4BZKR24.js +2 -2
  8. package/chunks/chunk.D5YQDJ7X.js +3 -3
  9. package/chunks/chunk.EA437WHD.js +1 -1
  10. package/chunks/chunk.GI7VDIWX.js +1 -1
  11. package/chunks/chunk.GMYPQTFK.js +1 -1
  12. package/chunks/chunk.HVTXQL7M.js +3 -3
  13. package/chunks/chunk.IKV4VH3T.js +3 -3
  14. package/chunks/chunk.IVVHNXMC.js +2 -2
  15. package/chunks/chunk.JHOXTQXA.js +3 -3
  16. package/chunks/chunk.JXOKFADN.js +3 -3
  17. package/chunks/chunk.K7JGTRV7.js +1 -1
  18. package/chunks/chunk.KPLQLAWP.js +3 -3
  19. package/chunks/chunk.LD4M4QGE.js +1 -1
  20. package/chunks/chunk.MSKEYBDI.js +3 -3
  21. package/chunks/chunk.NYIIDP5N.js +1 -1
  22. package/chunks/chunk.RWUUFNUL.js +2 -2
  23. package/chunks/chunk.SAPQLUO4.js +4 -4
  24. package/chunks/chunk.SI4ACBFK.js +1 -1
  25. package/chunks/chunk.TP2GB2HO.js +4 -4
  26. package/chunks/chunk.UDWRA64J.js +3 -3
  27. package/chunks/chunk.URTPIBTY.js +3 -3
  28. package/chunks/chunk.VESXC477.js +1 -1
  29. package/chunks/chunk.XA43ZQPC.js +3 -3
  30. package/chunks/chunk.XQ2OKYYA.js +3 -3
  31. package/chunks/chunk.XZNBUGX7.js +1 -1
  32. package/chunks/chunk.YHLNUJ7P.js +2 -2
  33. package/chunks/chunk.ZH2AND3P.js +8 -8
  34. package/chunks/chunk.ZL53POKZ.js +2 -2
  35. package/chunks/class-map.js +3 -3
  36. package/chunks/decorate.js +11 -11
  37. package/chunks/directive-helpers.js +3 -3
  38. package/chunks/if-defined.js +1 -1
  39. package/chunks/lit.js +88 -86
  40. package/chunks/live.js +8 -8
  41. package/chunks/nve-alert.component.js +9 -9
  42. package/chunks/nve-carousel-item.component.js +1 -1
  43. package/chunks/nve-checkbox-group.component.js +7 -7
  44. package/chunks/nve-label.component.js +1 -1
  45. package/chunks/nve-warning-level.component.js +4 -4
  46. package/chunks/ref.js +4 -4
  47. package/chunks/shoelace.js +771 -771
  48. package/chunks/static-html.js +4 -4
  49. package/chunks/unsafe-html.js +1 -1
  50. package/components/nve-accordion/nve-accordion.component.js +1 -1
  51. package/components/nve-aspect-rose/nve-aspect-rose.component.d.ts +40 -0
  52. package/components/nve-aspect-rose/nve-aspect-rose.component.js +90 -0
  53. package/components/nve-aspect-rose/nve-aspect-rose.styles.d.ts +2 -0
  54. package/components/nve-aspect-rose/nve-aspect-rose.styles.js +27 -0
  55. package/components/nve-badge/nve-badge.component.js +1 -1
  56. package/components/nve-carousel-thumbnail/nve-carousel-thumbnail.component.js +1 -1
  57. package/components/nve-combobox/nve-combobox.component.js +1 -1
  58. package/components/nve-darkmode-switch/nve-darkmode-switch.component.js +3 -2
  59. package/components/nve-icon/nve-icon.component.js +1 -1
  60. package/components/nve-link-card/nve-link-card.component.js +6 -6
  61. package/components/nve-message-card/nve-message-card.component.js +1 -1
  62. package/components/nve-navigation-card/nve-navigation-card.component.js +8 -8
  63. package/components/nve-paragraph/nve-paragraph.component.js +1 -1
  64. package/components/nve-stepper/nve-step/nve-step.component.js +21 -21
  65. package/components/nve-stepper/nve-stepper-mobile.component.js +1 -1
  66. package/components/nve-stepper/nve-stepper.component.js +1 -1
  67. package/components/nve-switch/nve-switch.component.js +1 -1
  68. package/components/nve-tab/nve-tab.component.js +1 -1
  69. package/components/nve-tab-group/nve-tab-group.component.js +6 -6
  70. package/components/nve-tab-panel/nve-tab-panel.component.js +1 -1
  71. package/components/nve-tag/nve-tag.component.js +6 -6
  72. package/components/nve-textarea/nve-textarea.component.js +12 -12
  73. package/css/nve.css +54 -45
  74. package/css/nve_dark.css +16 -7
  75. package/css/rme.css +54 -45
  76. package/css/rme_dark.css +16 -7
  77. package/css/varsom.css +54 -45
  78. package/css/varsom_dark.css +16 -7
  79. package/custom-elements.json +97 -1
  80. package/nve-designsystem.d.ts +2 -1
  81. package/nve-designsystem.js +43 -42
  82. package/package.json +5 -5
package/css/nve.css CHANGED
@@ -112,6 +112,15 @@
112
112
  --color-shades-functional-red-999: #411616;
113
113
  --color-shades-functional-red-000: #ffebee;
114
114
  --color-shades-functional-red-050: #ffd8de;
115
+ --color-shades-functional-danger-100: #ffb8b8;
116
+ --color-shades-functional-danger-200: #ff8f8f;
117
+ --color-shades-functional-danger-400: #ff3333;
118
+ --color-shades-functional-danger-600: #e50000;
119
+ --color-shades-functional-danger-800: #b20000;
120
+ --color-shades-functional-danger-900: #800000;
121
+ --color-shades-functional-danger-999: #4d0000;
122
+ --color-shades-functional-danger-050: #ffd6d6;
123
+ --color-shades-functional-danger-000: #ffebeb;
115
124
  --color-shades-functional-orange-100: #ffe3c2;
116
125
  --color-shades-functional-orange-150: #ffd9ad;
117
126
  --color-shades-functional-orange-200: #ffc98a;
@@ -253,7 +262,7 @@
253
262
  --box-shadow-none: 0 0 0 0 rgba(0,0,0,0);
254
263
  --box-shadow-soft: -59px 104px 33px 0 rgba(0,0,0,0.00), -38px 67px 31px 0 rgba(0,0,0,0.00), -21px 37px 26px 0 rgba(0,0,0,0.01), -9px 17px 19px 0 rgba(0,0,0,0.02), -2px 4px 11px 0 rgba(0,0,0,0.03);
255
264
  --box-shadow-hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04);
256
- --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02);
265
+ --box-shadow-header: 0 4px 32px 0 rgba(0,0,0,0.02);
257
266
  --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03);
258
267
  --boolean-brand-nve: true;
259
268
  --boolean-brand-varsom: false;
@@ -389,18 +398,18 @@
389
398
  --color-dangerlevel-background-default-level1: var(--color-shades-functional-green-500);
390
399
  --color-dangerlevel-background-default-level2: var(--color-shades-functional-yellow-500);
391
400
  --color-dangerlevel-background-default-level3: var(--color-shades-functional-orange-400);
392
- --color-dangerlevel-background-default-level4: var(--color-shades-functional-red-500);
393
- --color-dangerlevel-background-default-level5: var(--color-shades-functional-neutralgrey-950);
401
+ --color-dangerlevel-background-default-level4: var(--color-shades-functional-danger-400);
402
+ --color-dangerlevel-background-default-level5: var(--color-shades-functional-danger-900);
394
403
  --color-dangerlevel-background-mute-level1: var(--color-shades-functional-green-150);
395
404
  --color-dangerlevel-background-mute-level2: var(--color-shades-functional-yellow-200);
396
405
  --color-dangerlevel-background-mute-level3: var(--color-shades-functional-orange-150);
397
- --color-dangerlevel-background-mute-level4: var(--color-shades-functional-red-050);
398
- --color-dangerlevel-background-mute-level5: var(--color-shades-functional-neutralgrey-200);
406
+ --color-dangerlevel-background-mute-level4: var(--color-shades-functional-danger-050);
407
+ --color-dangerlevel-background-mute-level5: var(--color-shades-functional-danger-200);
399
408
  --color-dangerlevel-background-subtle-level1: var(--color-shades-functional-green-100);
400
409
  --color-dangerlevel-background-subtle-level2: var(--color-shades-functional-yellow-100);
401
410
  --color-dangerlevel-background-subtle-level3: var(--color-shades-functional-orange-050);
402
- --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-red-000);
403
- --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-neutralgrey-150);
411
+ --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-danger-000);
412
+ --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-danger-200);
404
413
  --color-dangerlevel-foreground-default-level1: var(--color-shades-functional-neutralgrey-999);
405
414
  --color-dangerlevel-foreground-default-level2: var(--color-shades-functional-neutralgrey-999);
406
415
  --color-dangerlevel-foreground-default-level3: var(--color-shades-functional-neutralgrey-999);
@@ -660,48 +669,48 @@
660
669
  --sizing-fixed-sizing-2x-large: var(--dimension-14x);
661
670
  --sizing-fixed-sizing-3x-large: var(--dimension-16x);
662
671
  --typography-heading-x-large: var(--font-weight-semibold) var(--font-size-3x-large)/var(--line-height-0) var(--font-family-primary-family);
663
- --typography-heading-large: var(--font-weight-semibold) var(--font-size-2x-large)/var(--line-height-1) var(--font-family-primary-family);
672
+ --typography-heading-large: var(--font-weight-semibold) var(--font-size-2x-large)/1.2 var(--font-family-primary-family);
664
673
  --typography-heading-medium: var(--font-weight-semibold) var(--font-size-x-large)/var(--line-height-2) var(--font-family-primary-family);
665
- --typography-heading-small: var(--font-weight-semibold) var(--font-size-large)/var(--line-height-3) var(--font-family-primary-family);
666
- --typography-heading-x-small: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-3) var(--font-family-primary-family);
667
- --typography-subheading-large: var(--font-weight-regular) var(--font-size-2x-large)/var(--line-height-1) var(--font-family-primary-family);
674
+ --typography-heading-small: var(--font-weight-semibold) var(--font-size-large)/1.3 var(--font-family-primary-family);
675
+ --typography-heading-x-small: var(--font-weight-semibold) var(--font-size-medium)/1.3 var(--font-family-primary-family);
676
+ --typography-subheading-large: var(--font-weight-regular) var(--font-size-2x-large)/1.2 var(--font-family-primary-family);
668
677
  --typography-subheading-medium: var(--font-weight-regular) var(--font-size-x-large)/var(--line-height-2) var(--font-family-primary-family);
669
- --typography-subheading-small: var(--font-weight-regular) var(--font-size-large)/var(--line-height-3) var(--font-family-primary-family);
670
- --typography-lead-large-regular: var(--font-weight-regular) var(--font-size-large)/var(--line-height-4) var(--font-family-primary-family);
671
- --typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/var(--line-height-4) var(--font-family-primary-family);
672
- --typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family);
673
- --typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family);
678
+ --typography-subheading-small: var(--font-weight-regular) var(--font-size-large)/1.3 var(--font-family-primary-family);
679
+ --typography-lead-large-regular: var(--font-weight-regular) var(--font-size-large)/1.4 var(--font-family-primary-family);
680
+ --typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/1.4 var(--font-family-primary-family);
681
+ --typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family);
682
+ --typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/1.5 var(--font-family-primary-family);
674
683
  --font-size-small: var(--dimension-4-5x); /** 16 px */
675
- --typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family);
676
- --typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family);
677
- --typography-body-large: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family);
678
- --typography-body-large-underline: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family);
679
- --typography-body-medium: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family);
680
- --typography-body-medium-underline: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family);
681
- --typography-body-small: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family);
682
- --typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family);
683
- --typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family);
684
- --typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family);
685
- --typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-primary-family);
686
- --typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-primary-family);
687
- --typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-primary-family);
688
- --typography-body-compact-medium-underline-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-primary-family);
689
- --typography-body-compact-small-compact: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-1) var(--font-family-primary-family);
690
- --typography-body-compact-small-underline-compact: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-1) var(--font-family-primary-family);
691
- --typography-body-compact-x-small-compact: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-1) var(--font-family-primary-family);
692
- --typography-body-compact-x-small-underline-compact: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-1) var(--font-family-primary-family);
693
- --typography-detailtext-caption: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family);
694
- --typography-detailtext-caps-large: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family);
695
- --typography-detailtext-caps-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family);
696
- --typography-label-large: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-6) var(--font-family-primary-family);
697
- --typography-label-large-light: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-6) var(--font-family-primary-family);
698
- --typography-label-medium: var(--font-weight-semibold) var(--font-size-small)/var(--line-height-6) var(--font-family-primary-family);
699
- --typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/var(--line-height-6) var(--font-family-primary-family);
700
- --typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-6) var(--font-family-primary-family);
701
- --typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-6) var(--font-family-primary-family);
684
+ --typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family);
685
+ --typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/1.5 var(--font-family-primary-family);
686
+ --typography-body-large: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family);
687
+ --typography-body-large-underline: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family);
688
+ --typography-body-medium: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family);
689
+ --typography-body-medium-underline: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family);
690
+ --typography-body-small: var(--font-weight-regular) var(--font-size-x-small)/1.5 var(--font-family-primary-family);
691
+ --typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/1.5 var(--font-family-primary-family);
692
+ --typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family);
693
+ --typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family);
694
+ --typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/1.2 var(--font-family-primary-family);
695
+ --typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/1.2 var(--font-family-primary-family);
696
+ --typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/1.2 var(--font-family-primary-family);
697
+ --typography-body-compact-medium-underline-compact: var(--font-weight-regular) var(--font-size-small)/1.2 var(--font-family-primary-family);
698
+ --typography-body-compact-small-compact: var(--font-weight-regular) var(--font-size-x-small)/1.2 var(--font-family-primary-family);
699
+ --typography-body-compact-small-underline-compact: var(--font-weight-regular) var(--font-size-x-small)/1.2 var(--font-family-primary-family);
700
+ --typography-body-compact-x-small-compact: var(--font-weight-regular) var(--font-size-2x-small)/1.2 var(--font-family-primary-family);
701
+ --typography-body-compact-x-small-underline-compact: var(--font-weight-regular) var(--font-size-2x-small)/1.2 var(--font-family-primary-family);
702
+ --typography-detailtext-caption: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family);
703
+ --typography-detailtext-caps-large: var(--font-weight-semibold) var(--font-size-medium)/1.5 var(--font-family-primary-family);
704
+ --typography-detailtext-caps-small: var(--font-weight-semibold) var(--font-size-x-small)/1.5 var(--font-family-primary-family);
705
+ --typography-label-large: var(--font-weight-semibold) var(--font-size-medium)/1.1 var(--font-family-primary-family);
706
+ --typography-label-large-light: var(--font-weight-regular) var(--font-size-medium)/1.1 var(--font-family-primary-family);
707
+ --typography-label-medium: var(--font-weight-semibold) var(--font-size-small)/1.1 var(--font-family-primary-family);
708
+ --typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/1.1 var(--font-family-primary-family);
709
+ --typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/1.1 var(--font-family-primary-family);
710
+ --typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/1.1 var(--font-family-primary-family);
702
711
  --font-size-2x-small: var(--dimension-3-5x); /** 12 px */
703
- --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-primary-family);
704
- --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-primary-family);
712
+ --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/1.1 var(--font-family-primary-family);
713
+ --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/1.1 var(--font-family-primary-family);
705
714
  --font-size-x-small: var(--dimension-4x); /** 14 px */
706
715
  --font-size-medium: var(--dimension-5x); /** 18 px */
707
716
  --font-size-large: var(--dimension-6x); /** 20 px */
package/css/nve_dark.css CHANGED
@@ -112,6 +112,15 @@
112
112
  --color-shades-functional-red-999: #411616;
113
113
  --color-shades-functional-red-000: #ffebee;
114
114
  --color-shades-functional-red-050: #ffd8de;
115
+ --color-shades-functional-danger-100: #ffb8b8;
116
+ --color-shades-functional-danger-200: #ff8f8f;
117
+ --color-shades-functional-danger-400: #ff3333;
118
+ --color-shades-functional-danger-600: #e50000;
119
+ --color-shades-functional-danger-800: #b20000;
120
+ --color-shades-functional-danger-900: #800000;
121
+ --color-shades-functional-danger-999: #4d0000;
122
+ --color-shades-functional-danger-050: #ffd6d6;
123
+ --color-shades-functional-danger-000: #ffebeb;
115
124
  --color-shades-functional-orange-100: #ffe3c2;
116
125
  --color-shades-functional-orange-150: #ffd9ad;
117
126
  --color-shades-functional-orange-200: #ffc98a;
@@ -253,7 +262,7 @@
253
262
  --box-shadow-none: 0 0 0 0 rgba(0,0,0,0);
254
263
  --box-shadow-soft: -59px 104px 33px 0 rgba(0,0,0,0.00), -38px 67px 31px 0 rgba(0,0,0,0.00), -21px 37px 26px 0 rgba(0,0,0,0.01), -9px 17px 19px 0 rgba(0,0,0,0.02), -2px 4px 11px 0 rgba(0,0,0,0.03);
255
264
  --box-shadow-hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04);
256
- --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02);
265
+ --box-shadow-header: 0 4px 32px 0 rgba(0,0,0,0.02);
257
266
  --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03);
258
267
  --boolean-brand-nve: true;
259
268
  --boolean-brand-varsom: false;
@@ -389,18 +398,18 @@
389
398
  --color-dangerlevel-background-default-level1: var(--color-shades-functional-green-500);
390
399
  --color-dangerlevel-background-default-level2: var(--color-shades-functional-yellow-500);
391
400
  --color-dangerlevel-background-default-level3: var(--color-shades-functional-orange-400);
392
- --color-dangerlevel-background-default-level4: var(--color-shades-functional-red-500);
393
- --color-dangerlevel-background-default-level5: var(--color-shades-functional-neutralgrey-950);
401
+ --color-dangerlevel-background-default-level4: var(--color-shades-functional-danger-400);
402
+ --color-dangerlevel-background-default-level5: var(--color-shades-functional-danger-900);
394
403
  --color-dangerlevel-background-mute-level1: var(--color-shades-functional-green-150);
395
404
  --color-dangerlevel-background-mute-level2: var(--color-shades-functional-yellow-200);
396
405
  --color-dangerlevel-background-mute-level3: var(--color-shades-functional-orange-150);
397
- --color-dangerlevel-background-mute-level4: var(--color-shades-functional-red-050);
398
- --color-dangerlevel-background-mute-level5: var(--color-shades-functional-neutralgrey-200);
406
+ --color-dangerlevel-background-mute-level4: var(--color-shades-functional-danger-050);
407
+ --color-dangerlevel-background-mute-level5: var(--color-shades-functional-danger-200);
399
408
  --color-dangerlevel-background-subtle-level1: var(--color-shades-functional-green-100);
400
409
  --color-dangerlevel-background-subtle-level2: var(--color-shades-functional-yellow-100);
401
410
  --color-dangerlevel-background-subtle-level3: var(--color-shades-functional-orange-050);
402
- --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-red-000);
403
- --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-neutralgrey-150);
411
+ --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-danger-000);
412
+ --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-danger-200);
404
413
  --color-dangerlevel-foreground-default-level1: var(--color-shades-functional-neutralgrey-999);
405
414
  --color-dangerlevel-foreground-default-level2: var(--color-shades-functional-neutralgrey-999);
406
415
  --color-dangerlevel-foreground-default-level3: var(--color-shades-functional-neutralgrey-999);
package/css/rme.css CHANGED
@@ -112,6 +112,15 @@
112
112
  --color-shades-functional-red-999: #411616;
113
113
  --color-shades-functional-red-000: #ffebee;
114
114
  --color-shades-functional-red-050: #ffd8de;
115
+ --color-shades-functional-danger-100: #ffb8b8;
116
+ --color-shades-functional-danger-200: #ff8f8f;
117
+ --color-shades-functional-danger-400: #ff3333;
118
+ --color-shades-functional-danger-600: #e50000;
119
+ --color-shades-functional-danger-800: #b20000;
120
+ --color-shades-functional-danger-900: #800000;
121
+ --color-shades-functional-danger-999: #4d0000;
122
+ --color-shades-functional-danger-050: #ffd6d6;
123
+ --color-shades-functional-danger-000: #ffebeb;
115
124
  --color-shades-functional-orange-100: #ffe3c2;
116
125
  --color-shades-functional-orange-150: #ffd9ad;
117
126
  --color-shades-functional-orange-200: #ffc98a;
@@ -253,7 +262,7 @@
253
262
  --box-shadow-none: 0 0 0 0 rgba(0,0,0,0);
254
263
  --box-shadow-soft: -59px 104px 33px 0 rgba(0,0,0,0.00), -38px 67px 31px 0 rgba(0,0,0,0.00), -21px 37px 26px 0 rgba(0,0,0,0.01), -9px 17px 19px 0 rgba(0,0,0,0.02), -2px 4px 11px 0 rgba(0,0,0,0.03);
255
264
  --box-shadow-hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04);
256
- --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02);
265
+ --box-shadow-header: 0 4px 32px 0 rgba(0,0,0,0.02);
257
266
  --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03);
258
267
  --boolean-brand-nve: false;
259
268
  --boolean-brand-varsom: false;
@@ -389,18 +398,18 @@
389
398
  --color-dangerlevel-background-default-level1: var(--color-shades-functional-green-500);
390
399
  --color-dangerlevel-background-default-level2: var(--color-shades-functional-yellow-500);
391
400
  --color-dangerlevel-background-default-level3: var(--color-shades-functional-orange-400);
392
- --color-dangerlevel-background-default-level4: var(--color-shades-functional-red-500);
393
- --color-dangerlevel-background-default-level5: var(--color-shades-functional-neutralgrey-950);
401
+ --color-dangerlevel-background-default-level4: var(--color-shades-functional-danger-400);
402
+ --color-dangerlevel-background-default-level5: var(--color-shades-functional-danger-900);
394
403
  --color-dangerlevel-background-mute-level1: var(--color-shades-functional-green-150);
395
404
  --color-dangerlevel-background-mute-level2: var(--color-shades-functional-yellow-200);
396
405
  --color-dangerlevel-background-mute-level3: var(--color-shades-functional-orange-150);
397
- --color-dangerlevel-background-mute-level4: var(--color-shades-functional-red-050);
398
- --color-dangerlevel-background-mute-level5: var(--color-shades-functional-neutralgrey-200);
406
+ --color-dangerlevel-background-mute-level4: var(--color-shades-functional-danger-050);
407
+ --color-dangerlevel-background-mute-level5: var(--color-shades-functional-danger-200);
399
408
  --color-dangerlevel-background-subtle-level1: var(--color-shades-functional-green-100);
400
409
  --color-dangerlevel-background-subtle-level2: var(--color-shades-functional-yellow-100);
401
410
  --color-dangerlevel-background-subtle-level3: var(--color-shades-functional-orange-050);
402
- --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-red-000);
403
- --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-neutralgrey-150);
411
+ --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-danger-000);
412
+ --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-danger-200);
404
413
  --color-dangerlevel-foreground-default-level1: var(--color-shades-functional-neutralgrey-999);
405
414
  --color-dangerlevel-foreground-default-level2: var(--color-shades-functional-neutralgrey-999);
406
415
  --color-dangerlevel-foreground-default-level3: var(--color-shades-functional-neutralgrey-999);
@@ -660,48 +669,48 @@
660
669
  --sizing-fixed-sizing-2x-large: var(--dimension-14x);
661
670
  --sizing-fixed-sizing-3x-large: var(--dimension-16x);
662
671
  --typography-heading-x-large: var(--font-weight-semibold) var(--font-size-3x-large)/var(--line-height-0) var(--font-family-primary-family);
663
- --typography-heading-large: var(--font-weight-semibold) var(--font-size-2x-large)/var(--line-height-1) var(--font-family-primary-family);
672
+ --typography-heading-large: var(--font-weight-semibold) var(--font-size-2x-large)/1.2 var(--font-family-primary-family);
664
673
  --typography-heading-medium: var(--font-weight-semibold) var(--font-size-x-large)/var(--line-height-2) var(--font-family-primary-family);
665
- --typography-heading-small: var(--font-weight-semibold) var(--font-size-large)/var(--line-height-3) var(--font-family-primary-family);
666
- --typography-heading-x-small: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-3) var(--font-family-primary-family);
667
- --typography-subheading-large: var(--font-weight-regular) var(--font-size-2x-large)/var(--line-height-1) var(--font-family-primary-family);
674
+ --typography-heading-small: var(--font-weight-semibold) var(--font-size-large)/1.3 var(--font-family-primary-family);
675
+ --typography-heading-x-small: var(--font-weight-semibold) var(--font-size-medium)/1.3 var(--font-family-primary-family);
676
+ --typography-subheading-large: var(--font-weight-regular) var(--font-size-2x-large)/1.2 var(--font-family-primary-family);
668
677
  --typography-subheading-medium: var(--font-weight-regular) var(--font-size-x-large)/var(--line-height-2) var(--font-family-primary-family);
669
- --typography-subheading-small: var(--font-weight-regular) var(--font-size-large)/var(--line-height-3) var(--font-family-primary-family);
670
- --typography-lead-large-regular: var(--font-weight-regular) var(--font-size-large)/var(--line-height-4) var(--font-family-primary-family);
671
- --typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/var(--line-height-4) var(--font-family-primary-family);
672
- --typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family);
673
- --typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family);
678
+ --typography-subheading-small: var(--font-weight-regular) var(--font-size-large)/1.3 var(--font-family-primary-family);
679
+ --typography-lead-large-regular: var(--font-weight-regular) var(--font-size-large)/1.4 var(--font-family-primary-family);
680
+ --typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/1.4 var(--font-family-primary-family);
681
+ --typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family);
682
+ --typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/1.5 var(--font-family-primary-family);
674
683
  --font-size-small: var(--dimension-4-5x); /** 16 px */
675
- --typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family);
676
- --typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family);
677
- --typography-body-large: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family);
678
- --typography-body-large-underline: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family);
679
- --typography-body-medium: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family);
680
- --typography-body-medium-underline: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family);
681
- --typography-body-small: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family);
682
- --typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family);
683
- --typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family);
684
- --typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family);
685
- --typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-primary-family);
686
- --typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-primary-family);
687
- --typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-primary-family);
688
- --typography-body-compact-medium-underline-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-primary-family);
689
- --typography-body-compact-small-compact: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-1) var(--font-family-primary-family);
690
- --typography-body-compact-small-underline-compact: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-1) var(--font-family-primary-family);
691
- --typography-body-compact-x-small-compact: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-1) var(--font-family-primary-family);
692
- --typography-body-compact-x-small-underline-compact: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-1) var(--font-family-primary-family);
693
- --typography-detailtext-caption: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family);
694
- --typography-detailtext-caps-large: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family);
695
- --typography-detailtext-caps-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family);
696
- --typography-label-large: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-6) var(--font-family-primary-family);
697
- --typography-label-large-light: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-6) var(--font-family-primary-family);
698
- --typography-label-medium: var(--font-weight-semibold) var(--font-size-small)/var(--line-height-6) var(--font-family-primary-family);
699
- --typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/var(--line-height-6) var(--font-family-primary-family);
700
- --typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-6) var(--font-family-primary-family);
701
- --typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-6) var(--font-family-primary-family);
684
+ --typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family);
685
+ --typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/1.5 var(--font-family-primary-family);
686
+ --typography-body-large: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family);
687
+ --typography-body-large-underline: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family);
688
+ --typography-body-medium: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family);
689
+ --typography-body-medium-underline: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family);
690
+ --typography-body-small: var(--font-weight-regular) var(--font-size-x-small)/1.5 var(--font-family-primary-family);
691
+ --typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/1.5 var(--font-family-primary-family);
692
+ --typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family);
693
+ --typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family);
694
+ --typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/1.2 var(--font-family-primary-family);
695
+ --typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/1.2 var(--font-family-primary-family);
696
+ --typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/1.2 var(--font-family-primary-family);
697
+ --typography-body-compact-medium-underline-compact: var(--font-weight-regular) var(--font-size-small)/1.2 var(--font-family-primary-family);
698
+ --typography-body-compact-small-compact: var(--font-weight-regular) var(--font-size-x-small)/1.2 var(--font-family-primary-family);
699
+ --typography-body-compact-small-underline-compact: var(--font-weight-regular) var(--font-size-x-small)/1.2 var(--font-family-primary-family);
700
+ --typography-body-compact-x-small-compact: var(--font-weight-regular) var(--font-size-2x-small)/1.2 var(--font-family-primary-family);
701
+ --typography-body-compact-x-small-underline-compact: var(--font-weight-regular) var(--font-size-2x-small)/1.2 var(--font-family-primary-family);
702
+ --typography-detailtext-caption: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family);
703
+ --typography-detailtext-caps-large: var(--font-weight-semibold) var(--font-size-medium)/1.5 var(--font-family-primary-family);
704
+ --typography-detailtext-caps-small: var(--font-weight-semibold) var(--font-size-x-small)/1.5 var(--font-family-primary-family);
705
+ --typography-label-large: var(--font-weight-semibold) var(--font-size-medium)/1.1 var(--font-family-primary-family);
706
+ --typography-label-large-light: var(--font-weight-regular) var(--font-size-medium)/1.1 var(--font-family-primary-family);
707
+ --typography-label-medium: var(--font-weight-semibold) var(--font-size-small)/1.1 var(--font-family-primary-family);
708
+ --typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/1.1 var(--font-family-primary-family);
709
+ --typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/1.1 var(--font-family-primary-family);
710
+ --typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/1.1 var(--font-family-primary-family);
702
711
  --font-size-2x-small: var(--dimension-3-5x); /** 12 px */
703
- --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-primary-family);
704
- --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-primary-family);
712
+ --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/1.1 var(--font-family-primary-family);
713
+ --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/1.1 var(--font-family-primary-family);
705
714
  --font-size-x-small: var(--dimension-4x); /** 14 px */
706
715
  --font-size-medium: var(--dimension-5x); /** 18 px */
707
716
  --font-size-large: var(--dimension-6x); /** 20 px */
package/css/rme_dark.css CHANGED
@@ -112,6 +112,15 @@
112
112
  --color-shades-functional-red-999: #411616;
113
113
  --color-shades-functional-red-000: #ffebee;
114
114
  --color-shades-functional-red-050: #ffd8de;
115
+ --color-shades-functional-danger-100: #ffb8b8;
116
+ --color-shades-functional-danger-200: #ff8f8f;
117
+ --color-shades-functional-danger-400: #ff3333;
118
+ --color-shades-functional-danger-600: #e50000;
119
+ --color-shades-functional-danger-800: #b20000;
120
+ --color-shades-functional-danger-900: #800000;
121
+ --color-shades-functional-danger-999: #4d0000;
122
+ --color-shades-functional-danger-050: #ffd6d6;
123
+ --color-shades-functional-danger-000: #ffebeb;
115
124
  --color-shades-functional-orange-100: #ffe3c2;
116
125
  --color-shades-functional-orange-150: #ffd9ad;
117
126
  --color-shades-functional-orange-200: #ffc98a;
@@ -253,7 +262,7 @@
253
262
  --box-shadow-none: 0 0 0 0 rgba(0,0,0,0);
254
263
  --box-shadow-soft: -59px 104px 33px 0 rgba(0,0,0,0.00), -38px 67px 31px 0 rgba(0,0,0,0.00), -21px 37px 26px 0 rgba(0,0,0,0.01), -9px 17px 19px 0 rgba(0,0,0,0.02), -2px 4px 11px 0 rgba(0,0,0,0.03);
255
264
  --box-shadow-hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04);
256
- --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02);
265
+ --box-shadow-header: 0 4px 32px 0 rgba(0,0,0,0.02);
257
266
  --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03);
258
267
  --boolean-brand-nve: false;
259
268
  --boolean-brand-varsom: false;
@@ -389,18 +398,18 @@
389
398
  --color-dangerlevel-background-default-level1: var(--color-shades-functional-green-500);
390
399
  --color-dangerlevel-background-default-level2: var(--color-shades-functional-yellow-500);
391
400
  --color-dangerlevel-background-default-level3: var(--color-shades-functional-orange-400);
392
- --color-dangerlevel-background-default-level4: var(--color-shades-functional-red-500);
393
- --color-dangerlevel-background-default-level5: var(--color-shades-functional-neutralgrey-950);
401
+ --color-dangerlevel-background-default-level4: var(--color-shades-functional-danger-400);
402
+ --color-dangerlevel-background-default-level5: var(--color-shades-functional-danger-900);
394
403
  --color-dangerlevel-background-mute-level1: var(--color-shades-functional-green-150);
395
404
  --color-dangerlevel-background-mute-level2: var(--color-shades-functional-yellow-200);
396
405
  --color-dangerlevel-background-mute-level3: var(--color-shades-functional-orange-150);
397
- --color-dangerlevel-background-mute-level4: var(--color-shades-functional-red-050);
398
- --color-dangerlevel-background-mute-level5: var(--color-shades-functional-neutralgrey-200);
406
+ --color-dangerlevel-background-mute-level4: var(--color-shades-functional-danger-050);
407
+ --color-dangerlevel-background-mute-level5: var(--color-shades-functional-danger-200);
399
408
  --color-dangerlevel-background-subtle-level1: var(--color-shades-functional-green-100);
400
409
  --color-dangerlevel-background-subtle-level2: var(--color-shades-functional-yellow-100);
401
410
  --color-dangerlevel-background-subtle-level3: var(--color-shades-functional-orange-050);
402
- --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-red-000);
403
- --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-neutralgrey-150);
411
+ --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-danger-000);
412
+ --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-danger-200);
404
413
  --color-dangerlevel-foreground-default-level1: var(--color-shades-functional-neutralgrey-999);
405
414
  --color-dangerlevel-foreground-default-level2: var(--color-shades-functional-neutralgrey-999);
406
415
  --color-dangerlevel-foreground-default-level3: var(--color-shades-functional-neutralgrey-999);
package/css/varsom.css CHANGED
@@ -112,6 +112,15 @@
112
112
  --color-shades-functional-red-999: #411616;
113
113
  --color-shades-functional-red-000: #ffebee;
114
114
  --color-shades-functional-red-050: #ffd8de;
115
+ --color-shades-functional-danger-100: #ffb8b8;
116
+ --color-shades-functional-danger-200: #ff8f8f;
117
+ --color-shades-functional-danger-400: #ff3333;
118
+ --color-shades-functional-danger-600: #e50000;
119
+ --color-shades-functional-danger-800: #b20000;
120
+ --color-shades-functional-danger-900: #800000;
121
+ --color-shades-functional-danger-999: #4d0000;
122
+ --color-shades-functional-danger-050: #ffd6d6;
123
+ --color-shades-functional-danger-000: #ffebeb;
115
124
  --color-shades-functional-orange-100: #ffe3c2;
116
125
  --color-shades-functional-orange-150: #ffd9ad;
117
126
  --color-shades-functional-orange-200: #ffc98a;
@@ -253,7 +262,7 @@
253
262
  --box-shadow-none: 0 0 0 0 rgba(0,0,0,0);
254
263
  --box-shadow-soft: -59px 104px 33px 0 rgba(0,0,0,0.00), -38px 67px 31px 0 rgba(0,0,0,0.00), -21px 37px 26px 0 rgba(0,0,0,0.01), -9px 17px 19px 0 rgba(0,0,0,0.02), -2px 4px 11px 0 rgba(0,0,0,0.03);
255
264
  --box-shadow-hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04);
256
- --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02);
265
+ --box-shadow-header: 0 4px 32px 0 rgba(0,0,0,0.02);
257
266
  --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03);
258
267
  --boolean-brand-nve: false;
259
268
  --boolean-brand-varsom: true;
@@ -389,18 +398,18 @@
389
398
  --color-dangerlevel-background-default-level1: var(--color-shades-functional-green-500);
390
399
  --color-dangerlevel-background-default-level2: var(--color-shades-functional-yellow-500);
391
400
  --color-dangerlevel-background-default-level3: var(--color-shades-functional-orange-400);
392
- --color-dangerlevel-background-default-level4: var(--color-shades-functional-red-500);
393
- --color-dangerlevel-background-default-level5: var(--color-shades-functional-neutralgrey-950);
401
+ --color-dangerlevel-background-default-level4: var(--color-shades-functional-danger-400);
402
+ --color-dangerlevel-background-default-level5: var(--color-shades-functional-danger-900);
394
403
  --color-dangerlevel-background-mute-level1: var(--color-shades-functional-green-150);
395
404
  --color-dangerlevel-background-mute-level2: var(--color-shades-functional-yellow-200);
396
405
  --color-dangerlevel-background-mute-level3: var(--color-shades-functional-orange-150);
397
- --color-dangerlevel-background-mute-level4: var(--color-shades-functional-red-050);
398
- --color-dangerlevel-background-mute-level5: var(--color-shades-functional-neutralgrey-200);
406
+ --color-dangerlevel-background-mute-level4: var(--color-shades-functional-danger-050);
407
+ --color-dangerlevel-background-mute-level5: var(--color-shades-functional-danger-200);
399
408
  --color-dangerlevel-background-subtle-level1: var(--color-shades-functional-green-100);
400
409
  --color-dangerlevel-background-subtle-level2: var(--color-shades-functional-yellow-100);
401
410
  --color-dangerlevel-background-subtle-level3: var(--color-shades-functional-orange-050);
402
- --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-red-000);
403
- --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-neutralgrey-150);
411
+ --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-danger-000);
412
+ --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-danger-200);
404
413
  --color-dangerlevel-foreground-default-level1: var(--color-shades-functional-neutralgrey-999);
405
414
  --color-dangerlevel-foreground-default-level2: var(--color-shades-functional-neutralgrey-999);
406
415
  --color-dangerlevel-foreground-default-level3: var(--color-shades-functional-neutralgrey-999);
@@ -660,48 +669,48 @@
660
669
  --sizing-fixed-sizing-2x-large: var(--dimension-14x);
661
670
  --sizing-fixed-sizing-3x-large: var(--dimension-16x);
662
671
  --typography-heading-x-large: var(--font-weight-semibold) var(--font-size-3x-large)/var(--line-height-0) var(--font-family-primary-family);
663
- --typography-heading-large: var(--font-weight-semibold) var(--font-size-2x-large)/var(--line-height-1) var(--font-family-primary-family);
672
+ --typography-heading-large: var(--font-weight-semibold) var(--font-size-2x-large)/1.2 var(--font-family-primary-family);
664
673
  --typography-heading-medium: var(--font-weight-semibold) var(--font-size-x-large)/var(--line-height-2) var(--font-family-primary-family);
665
- --typography-heading-small: var(--font-weight-semibold) var(--font-size-large)/var(--line-height-3) var(--font-family-primary-family);
666
- --typography-heading-x-small: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-3) var(--font-family-primary-family);
667
- --typography-subheading-large: var(--font-weight-regular) var(--font-size-2x-large)/var(--line-height-1) var(--font-family-primary-family);
674
+ --typography-heading-small: var(--font-weight-semibold) var(--font-size-large)/1.3 var(--font-family-primary-family);
675
+ --typography-heading-x-small: var(--font-weight-semibold) var(--font-size-medium)/1.3 var(--font-family-primary-family);
676
+ --typography-subheading-large: var(--font-weight-regular) var(--font-size-2x-large)/1.2 var(--font-family-primary-family);
668
677
  --typography-subheading-medium: var(--font-weight-regular) var(--font-size-x-large)/var(--line-height-2) var(--font-family-primary-family);
669
- --typography-subheading-small: var(--font-weight-regular) var(--font-size-large)/var(--line-height-3) var(--font-family-primary-family);
670
- --typography-lead-large-regular: var(--font-weight-regular) var(--font-size-large)/var(--line-height-4) var(--font-family-primary-family);
671
- --typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/var(--line-height-4) var(--font-family-primary-family);
672
- --typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family);
673
- --typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family);
678
+ --typography-subheading-small: var(--font-weight-regular) var(--font-size-large)/1.3 var(--font-family-primary-family);
679
+ --typography-lead-large-regular: var(--font-weight-regular) var(--font-size-large)/1.4 var(--font-family-primary-family);
680
+ --typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/1.4 var(--font-family-primary-family);
681
+ --typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family);
682
+ --typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/1.5 var(--font-family-primary-family);
674
683
  --font-size-small: var(--dimension-4-5x); /** 16 px */
675
- --typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family);
676
- --typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family);
677
- --typography-body-large: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family);
678
- --typography-body-large-underline: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family);
679
- --typography-body-medium: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family);
680
- --typography-body-medium-underline: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family);
681
- --typography-body-small: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family);
682
- --typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family);
683
- --typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family);
684
- --typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family);
685
- --typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-primary-family);
686
- --typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-primary-family);
687
- --typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-primary-family);
688
- --typography-body-compact-medium-underline-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-primary-family);
689
- --typography-body-compact-small-compact: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-1) var(--font-family-primary-family);
690
- --typography-body-compact-small-underline-compact: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-1) var(--font-family-primary-family);
691
- --typography-body-compact-x-small-compact: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-1) var(--font-family-primary-family);
692
- --typography-body-compact-x-small-underline-compact: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-1) var(--font-family-primary-family);
693
- --typography-detailtext-caption: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family);
694
- --typography-detailtext-caps-large: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family);
695
- --typography-detailtext-caps-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family);
696
- --typography-label-large: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-6) var(--font-family-primary-family);
697
- --typography-label-large-light: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-6) var(--font-family-primary-family);
698
- --typography-label-medium: var(--font-weight-semibold) var(--font-size-small)/var(--line-height-6) var(--font-family-primary-family);
699
- --typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/var(--line-height-6) var(--font-family-primary-family);
700
- --typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-6) var(--font-family-primary-family);
701
- --typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-6) var(--font-family-primary-family);
684
+ --typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family);
685
+ --typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/1.5 var(--font-family-primary-family);
686
+ --typography-body-large: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family);
687
+ --typography-body-large-underline: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family);
688
+ --typography-body-medium: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family);
689
+ --typography-body-medium-underline: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family);
690
+ --typography-body-small: var(--font-weight-regular) var(--font-size-x-small)/1.5 var(--font-family-primary-family);
691
+ --typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/1.5 var(--font-family-primary-family);
692
+ --typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family);
693
+ --typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family);
694
+ --typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/1.2 var(--font-family-primary-family);
695
+ --typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/1.2 var(--font-family-primary-family);
696
+ --typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/1.2 var(--font-family-primary-family);
697
+ --typography-body-compact-medium-underline-compact: var(--font-weight-regular) var(--font-size-small)/1.2 var(--font-family-primary-family);
698
+ --typography-body-compact-small-compact: var(--font-weight-regular) var(--font-size-x-small)/1.2 var(--font-family-primary-family);
699
+ --typography-body-compact-small-underline-compact: var(--font-weight-regular) var(--font-size-x-small)/1.2 var(--font-family-primary-family);
700
+ --typography-body-compact-x-small-compact: var(--font-weight-regular) var(--font-size-2x-small)/1.2 var(--font-family-primary-family);
701
+ --typography-body-compact-x-small-underline-compact: var(--font-weight-regular) var(--font-size-2x-small)/1.2 var(--font-family-primary-family);
702
+ --typography-detailtext-caption: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family);
703
+ --typography-detailtext-caps-large: var(--font-weight-semibold) var(--font-size-medium)/1.5 var(--font-family-primary-family);
704
+ --typography-detailtext-caps-small: var(--font-weight-semibold) var(--font-size-x-small)/1.5 var(--font-family-primary-family);
705
+ --typography-label-large: var(--font-weight-semibold) var(--font-size-medium)/1.1 var(--font-family-primary-family);
706
+ --typography-label-large-light: var(--font-weight-regular) var(--font-size-medium)/1.1 var(--font-family-primary-family);
707
+ --typography-label-medium: var(--font-weight-semibold) var(--font-size-small)/1.1 var(--font-family-primary-family);
708
+ --typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/1.1 var(--font-family-primary-family);
709
+ --typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/1.1 var(--font-family-primary-family);
710
+ --typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/1.1 var(--font-family-primary-family);
702
711
  --font-size-2x-small: var(--dimension-3-5x); /** 12 px */
703
- --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-primary-family);
704
- --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-primary-family);
712
+ --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/1.1 var(--font-family-primary-family);
713
+ --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/1.1 var(--font-family-primary-family);
705
714
  --font-size-x-small: var(--dimension-4x); /** 14 px */
706
715
  --font-size-medium: var(--dimension-5x); /** 18 px */
707
716
  --font-size-large: var(--dimension-6x); /** 20 px */
package/css/varsom_dark.css CHANGED
@@ -112,6 +112,15 @@
112
112
  --color-shades-functional-red-999: #411616;
113
113
  --color-shades-functional-red-000: #ffebee;
114
114
  --color-shades-functional-red-050: #ffd8de;
115
+ --color-shades-functional-danger-100: #ffb8b8;
116
+ --color-shades-functional-danger-200: #ff8f8f;
117
+ --color-shades-functional-danger-400: #ff3333;
118
+ --color-shades-functional-danger-600: #e50000;
119
+ --color-shades-functional-danger-800: #b20000;
120
+ --color-shades-functional-danger-900: #800000;
121
+ --color-shades-functional-danger-999: #4d0000;
122
+ --color-shades-functional-danger-050: #ffd6d6;
123
+ --color-shades-functional-danger-000: #ffebeb;
115
124
  --color-shades-functional-orange-100: #ffe3c2;
116
125
  --color-shades-functional-orange-150: #ffd9ad;
117
126
  --color-shades-functional-orange-200: #ffc98a;
@@ -253,7 +262,7 @@
253
262
  --box-shadow-none: 0 0 0 0 rgba(0,0,0,0);
254
263
  --box-shadow-soft: -59px 104px 33px 0 rgba(0,0,0,0.00), -38px 67px 31px 0 rgba(0,0,0,0.00), -21px 37px 26px 0 rgba(0,0,0,0.01), -9px 17px 19px 0 rgba(0,0,0,0.02), -2px 4px 11px 0 rgba(0,0,0,0.03);
255
264
  --box-shadow-hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04);
256
- --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02);
265
+ --box-shadow-header: 0 4px 32px 0 rgba(0,0,0,0.02);
257
266
  --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03);
258
267
  --boolean-brand-nve: false;
259
268
  --boolean-brand-varsom: true;
@@ -389,18 +398,18 @@
389
398
  --color-dangerlevel-background-default-level1: var(--color-shades-functional-green-500);
390
399
  --color-dangerlevel-background-default-level2: var(--color-shades-functional-yellow-500);
391
400
  --color-dangerlevel-background-default-level3: var(--color-shades-functional-orange-400);
392
- --color-dangerlevel-background-default-level4: var(--color-shades-functional-red-500);
393
- --color-dangerlevel-background-default-level5: var(--color-shades-functional-neutralgrey-950);
401
+ --color-dangerlevel-background-default-level4: var(--color-shades-functional-danger-400);
402
+ --color-dangerlevel-background-default-level5: var(--color-shades-functional-danger-900);
394
403
  --color-dangerlevel-background-mute-level1: var(--color-shades-functional-green-150);
395
404
  --color-dangerlevel-background-mute-level2: var(--color-shades-functional-yellow-200);
396
405
  --color-dangerlevel-background-mute-level3: var(--color-shades-functional-orange-150);
397
- --color-dangerlevel-background-mute-level4: var(--color-shades-functional-red-050);
398
- --color-dangerlevel-background-mute-level5: var(--color-shades-functional-neutralgrey-200);
406
+ --color-dangerlevel-background-mute-level4: var(--color-shades-functional-danger-050);
407
+ --color-dangerlevel-background-mute-level5: var(--color-shades-functional-danger-200);
399
408
  --color-dangerlevel-background-subtle-level1: var(--color-shades-functional-green-100);
400
409
  --color-dangerlevel-background-subtle-level2: var(--color-shades-functional-yellow-100);
401
410
  --color-dangerlevel-background-subtle-level3: var(--color-shades-functional-orange-050);
402
- --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-red-000);
403
- --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-neutralgrey-150);
411
+ --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-danger-000);
412
+ --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-danger-200);
404
413
  --color-dangerlevel-foreground-default-level1: var(--color-shades-functional-neutralgrey-999);
405
414
  --color-dangerlevel-foreground-default-level2: var(--color-shades-functional-neutralgrey-999);
406
415
  --color-dangerlevel-foreground-default-level3: var(--color-shades-functional-neutralgrey-999);