@lmvz-ds/components 0.34.0 → 0.35.0

package/collection/components/lmvz-button/lmvz-button.css

@@ -58,7 +58,7 @@ h6 {
 hr {
   height: 0;
   border: none;
-  margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
+  margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0);
 }
 
@@ -157,17 +157,17 @@ button.primary:not([disabled], .disabled):active {
 button.danger {
   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
   --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #e52a31));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
 }
 
 button.danger:not([disabled], .disabled):hover {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fdf1f2));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #e52a31));
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
 }
 
 button.danger:not([disabled], .disabled):active {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #e52a31));
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
 }
 
 button.tertiary {
@@ -190,7 +190,7 @@ button.small {
   --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
   --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)));
   --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)));
-  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
+  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5
     Router));
 }
 

package/collection/components/lmvz-card/lmvz-card.css

@@ -58,7 +58,7 @@ h6 {
 hr {
   height: 0;
   border: none;
-  margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
+  margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0);
 }
 
@@ -158,17 +158,17 @@ button.primary:not([disabled], .disabled):active {
 button.danger {
   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
   --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #e52a31));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
 }
 
 button.danger:not([disabled], .disabled):hover {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fdf1f2));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #e52a31));
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
 }
 
 button.danger:not([disabled], .disabled):active {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #e52a31));
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
 }
 
 button.tertiary {
@@ -191,7 +191,7 @@ button.small {
   --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
   --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)));
   --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)));
-  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
+  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5
     Router));
 }
 
@@ -221,7 +221,7 @@ button.large {
 }
 .top {
   display: flex;
-  padding: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  padding: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -230,7 +230,7 @@ button.large {
 .bottom {
   display: flex;
   min-width: 150px;
-  padding: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem));
+  padding: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem));
   flex-direction: column;
   align-items: flex-start;
   align-self: stretch;
@@ -244,7 +244,7 @@ button.large {
 
   padding-bottom: var(--lmvz-global-s4, 4px);
   overflow-wrap: break-word;
-  font: var(--lmvz-typography-heading-2xl, 500 clamp(2.25rem, 2.13rem + 0.52vw, 2.75rem) / 1.4
+  font: var(--lmvz-typography-heading-2xl, 500 clamp(2rem, 1.82rem + 0.78vw, 2.75rem) / 1.4
     Router);
 }
 .description {

package/collection/components/lmvz-checkbox/lmvz-checkbox.css

@@ -45,9 +45,9 @@
 
   --checkbox-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);
   --checkbox-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);
-  --checkbox-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7);
+  --checkbox-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1);
   --checkbox-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc);
-  --checkbox-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+  --checkbox-border-color-error: var(--lmvz-semantic-color-status-on-danger, #a31419);
 
   --checkbox-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
   --checkbox-wrapper-bg-checked: var(--lmvz-semantic-color-status-active, #f6fbfe);
@@ -58,8 +58,8 @@
 
   --checkbox-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000);
   --checkbox-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
-  --checkbox-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #7a7a7a);
-  --checkbox-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+  --checkbox-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #545454);
+  --checkbox-error-color: var(--lmvz-semantic-color-status-on-danger, #a31419);
   --checkbox-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
 
   --checkbox-easing: var(--lmvz-global-easing-default, ease);
@@ -69,8 +69,8 @@
   display: flex;
   align-items: center;
   gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
-  padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));
-  padding-inline: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
+  padding-block: var(--lmvz-dimension-8-2, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));
+  padding-inline: var(--lmvz-dimension-10-4, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
   border-radius: var(--lmvz-semantic-border-radius-round, 999px);
   /* WCAG 2.5.5 AAA: 44px minimum touch target */
   /* min-block-size: 44px;  */
@@ -124,13 +124,13 @@ label {
   cursor: pointer;
 }
 .helper-text {
-  font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router);
+  font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router);
   /* font-weight: 400 per DS token standard (body-sm). Note: lmvz-input.css [role='status'] incorrectly uses font-weight: 500 — DS inconsistency, see lmvz-input.css line ~153 */
   color: var(--checkbox-helper-color);
   margin-block-start: 2px;
 }
 .error-text {
-  font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router);
+  font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router);
   color: var(--checkbox-error-color);
   display: block;
   margin-block-start: 4px;

package/collection/components/lmvz-chip/lmvz-chip.css

@@ -1,13 +1,13 @@
 :host {
   --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-neutral-subtle, #d4d4d4);
   --lmvz-chip-background-color: var(--lmvz-semantic-color-status-neutral, #fcfcfc);
-  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-neutral, #545454);
+  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-neutral, #000000);
 
-  padding-block: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem));
-  padding-inline: var(--lmvz-dimension-8-10, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));
+  padding-block: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem));
+  padding-inline: var(--lmvz-dimension-10-8, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));
   border: 1px solid var(--lmvz-chip-border-color);
   border-radius: var(--lmvz-semantic-border-radius-round, 999px);
-  font: var(--lmvz-typography-body-xs-strong, 500 clamp(0.63rem, 0.61rem + 0.06vw, 0.69rem) / 1.5
+  font: var(--lmvz-typography-body-xs-strong, 500 clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem) / 1.5
     Router);
   background-color: var(--lmvz-chip-background-color);
   color: var(--lmvz-chip-foreground-color);
@@ -15,7 +15,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem));
+  gap: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem));
 
   /* enable truncated content */
   box-sizing: border-box;
@@ -32,11 +32,11 @@
 }
 
 :host([size='small']) {
-  padding-block: var(--lmvz-dimension-2-4, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem));
-  padding-inline: var(--lmvz-dimension-6-8, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));
+  padding-block: var(--lmvz-dimension-4-2, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem));
+  padding-inline: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));
   font: var(--lmvz-typography-body-2xs-strong, 500 clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem) / 1.5
     Router);
-  gap: var(--lmvz-dimension-2-4, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem));
+  gap: var(--lmvz-dimension-4-2, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem));
 }
 
 ::slotted(*) {
@@ -48,11 +48,11 @@
 
 ::slotted(lmvz-icon) {
   --lmvz-component-color: var(--lmvz-chip-foreground-color);
-  --lmvz-component-size: var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
+  --lmvz-component-size: var(--lmvz-dimension-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
 }
 
 :host([size='small']) ::slotted(lmvz-icon) {
-  --lmvz-component-size: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
+  --lmvz-component-size: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
 }
 
 :host([type='active']) {
@@ -62,25 +62,25 @@
 }
 
 :host([type='warning']) {
-  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-warning-subtle, #ffdf75);
-  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-warning, #fffbf0);
-  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-warning, #7a5e00);
+  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-warning-subtle, #e6b000);
+  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-warning, #ffeeb8);
+  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-warning, #614a00);
 }
 
 :host([type='success']) {
-  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-success-subtle, #a5dad3);
-  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-success, #f1f9f8);
-  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-success, #37867c);
+  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-success-subtle, #4eb6a9);
+  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-success, #c2e6e1);
+  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-success, #28625b);
 }
 
 :host([type='error']) {
-  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2);
-  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-danger, #fdf1f2);
-  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b);
+  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-danger, #fbdfe0);
+  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-danger, #a31419);
 }
 
 :host([type='neutral']) {
   --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-neutral-subtle, #d4d4d4);
   --lmvz-chip-background-color: var(--lmvz-semantic-color-status-neutral, #fcfcfc);
-  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-neutral, #545454);
+  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-neutral, #000000);
 }

package/collection/components/lmvz-header/lmvz-header.css

@@ -8,14 +8,14 @@
 
   background-color: var(--lmvz-semantic-color-surface-primary, #ffffff);
 
-  --lmvz-header-x-spacing-level-1: var(--lmvz-dimension-8-28, clamp(0.5rem, 0.2rem + 1.29vw, 1.75rem));
+  --lmvz-header-x-spacing-level-1: var(--lmvz-dimension-28-8, clamp(0.5rem, 0.2rem + 1.29vw, 1.75rem));
   --lmvz-header-x-spacing-level-2: var(--lmvz-component-buttongroup-wrapper-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
 
-  padding: var(--lmvz-dimension-8-16, clamp(0.5rem, 0.38rem + 0.52vw, 1rem)) var(--lmvz-header-x-spacing-level-1);
+  padding: var(--lmvz-dimension-16-8, clamp(0.5rem, 0.38rem + 0.52vw, 1rem)) var(--lmvz-header-x-spacing-level-1);
   gap: var(--lmvz-header-x-spacing-level-1);
 
   .brand {
-    /* min-width: var(--lmvz-dimension-48-96); */
+    /* min-width: var(--lmvz-dimension-96-48); */
     display: inline-flex;
     justify-content: center;
     align-items: center;

package/collection/components/lmvz-icon/lmvz-icon.css

@@ -45,7 +45,7 @@
 
 :host([size='lg']) {
   svg {
-    --lmvz-icon-size: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem));
+    --lmvz-icon-size: var(--lmvz-component-icon-size-lg, clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem));
   }
 }
 

package/collection/components/lmvz-input/lmvz-input.css

@@ -44,7 +44,7 @@
   --input-radius: var(--lmvz-component-input-radius-default, 999px);
   --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);
   --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);
-  --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7);
+  --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1);
   --input-border-color-focus: var(--lmvz-semantic-color-border-active, #0f8acc);
   --input-border-width: var(--lmvz-semantic-border-width-default, 1px);
 
@@ -57,7 +57,7 @@
   --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);
   --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);
   --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);
-  --error-text-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+  --error-text-color: var(--lmvz-semantic-color-status-on-danger, #a31419);
 
   --label-minimized-bg: var(--input-bg);
   --label-minimized-padding-x: 4px;
@@ -70,7 +70,7 @@
   --input-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem));
   --input-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
   --input-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem));
-  --input-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem));
+  --input-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
 }
 :host([size='md']) {
   --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));

package/collection/components/lmvz-link/lmvz-link.css

@@ -5,15 +5,17 @@
 a {
   display: inline-flex;
   align-items: center;
-  gap: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem));
-  padding-inline: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)) var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
-  padding-block: var(--lmvz-dimension-6-8, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));
+  gap: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem));
+  padding-inline: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)) var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
+  padding-block: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));
   border-radius: var(--lmvz-semantic-border-radius-round, 999px);
   color: var(--lmvz-semantic-color-int-on-tertiary, #000000);
   font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
     Router);
   text-decoration: underline;
-  transition: background-color 0.15s ease, color 0.15s ease;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
 }
 
 a:hover {

package/collection/components/lmvz-message/lmvz-message.css

@@ -4,8 +4,8 @@
   align-items: flex-start;
   width: 100%;
 
-  padding: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)) var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
-  gap: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  padding: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)) var(--lmvz-dimension-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
+  gap: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
 
   border: var(--lmvz-semantic-border-width-default, 1px) solid;
   border-radius: var(--lmvz-semantic-border-radius-md, 6px);
@@ -24,9 +24,9 @@
 }
 
 :host([type='warning']) {
-  background-color: var(--lmvz-semantic-color-status-warning, #fffbf0);
-  border-color: var(--lmvz-semantic-color-status-on-warning-subtle, #ffdf75);
-  color: var(--lmvz-semantic-color-status-on-warning, #7a5e00);
+  background-color: var(--lmvz-semantic-color-status-warning, #ffeeb8);
+  border-color: var(--lmvz-semantic-color-status-on-warning-subtle, #e6b000);
+  color: var(--lmvz-semantic-color-status-on-warning, #614a00);
 }
 
 .leading-icon {

package/collection/components/lmvz-modal/lmvz-modal.css

@@ -58,7 +58,7 @@ h6 {
 hr {
   height: 0;
   border: none;
-  margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
+  margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0);
 }
 
@@ -67,7 +67,7 @@ hr {
   display: contents;
 
   /* TODO: missing token for modal/box gap */
-  --lmvz-modal-shell-gap: var(--lmvz-dimension-16-20, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
+  --lmvz-modal-shell-gap: var(--lmvz-dimension-20-16, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
 }
 dialog {
   border: none;
@@ -104,8 +104,8 @@ dialog::backdrop {
 
   .close-button {
     position: absolute;
-    top: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
-    right: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
+    top: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
+    right: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
   }
 }
 .header {
@@ -116,7 +116,7 @@ dialog::backdrop {
 }
 .title {
   min-inline-size: 0;
-  font: var(--lmvz-typography-heading-lg, 500 clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem) / 1.5
+  font: var(--lmvz-typography-heading-lg, 500 clamp(1.13rem, 1.03rem + 0.39vw, 1.5rem) / 1.5
     Router);
 }
 .has-title .title {

package/collection/components/lmvz-radio/lmvz-radio.css

@@ -45,9 +45,9 @@
 
   --radio-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);
   --radio-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);
-  --radio-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7);
+  --radio-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1);
   --radio-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc);
-  --radio-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+  --radio-border-color-error: var(--lmvz-semantic-color-status-on-danger, #a31419);
   --radio-dot-color: var(--lmvz-semantic-color-border-active, #0f8acc);
 
   --radio-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
@@ -55,7 +55,7 @@
 
   --radio-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000);
   --radio-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
-  --radio-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #7a7a7a);
+  --radio-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #545454);
 
   --radio-easing: var(--lmvz-global-easing-default, ease);
   --radio-duration: 0.2s;
@@ -63,8 +63,8 @@
   display: flex;
   align-items: center;
   gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
-  padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));
-  padding-inline: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  padding-block: var(--lmvz-dimension-8-2, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));
+  padding-inline: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
   border-radius: var(--lmvz-semantic-border-radius-round, 999px);
   overflow: clip;
   cursor: pointer;
@@ -74,8 +74,8 @@
 }
 input {
   position: absolute;
-  inset-block-start: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));
-  inset-inline-start: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
+  inset-block-start: var(--lmvz-dimension-8-2, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));
+  inset-inline-start: var(--lmvz-dimension-10-4, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
   opacity: 0;
   width: var(--radio-circle-size);
   height: var(--radio-circle-size);
@@ -117,7 +117,7 @@ label {
 }
 .helper-text {
   display: block;
-  font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router);
+  font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router);
   color: var(--radio-helper-color);
   margin-block-start: 2px;
 }
@@ -150,7 +150,7 @@ label {
   border-color: var(--radio-border-color-error);
 }
 :host([error]) .helper-text {
-  color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+  color: var(--lmvz-semantic-color-status-on-danger, #a31419);
 }
 /* Disabled state */
 :host([disabled]) {

package/collection/components/lmvz-select/lmvz-select.css

@@ -49,20 +49,20 @@
   --lmvz-select-radius: var(--lmvz-component-input-radius-default, 999px);
   --lmvz-select-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);
   --lmvz-select-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);
-  --lmvz-select-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7);
+  --lmvz-select-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1);
   --lmvz-select-border-width: var(--lmvz-semantic-border-width-default, 1px);
   --lmvz-select-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);
   --lmvz-select-label-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);
   --lmvz-select-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
   --lmvz-select-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
   --lmvz-select-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));
-  --lmvz-select-label-font-size: var(--lmvz-component-body-xs-font-size, clamp(0.63rem, 0.61rem + 0.06vw, 0.69rem));
+  --lmvz-select-label-font-size: var(--lmvz-component-body-xs-font-size, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
   --lmvz-select-label-top-offset: calc(var(--lmvz-internal-select-floating-label-top-offset) * -1);
   --lmvz-select-label-minimized-padding-x: 4px;
   --lmvz-select-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%);
   --lmvz-select-helper-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);
   --lmvz-select-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
-  --lmvz-select-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+  --lmvz-select-error-color: var(--lmvz-semantic-color-status-on-danger, #a31419);
 }
 .select-wrapper {
   position: relative;
@@ -201,7 +201,7 @@ select {
   --lmvz-select-label-font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));
 }
 :host([size='small']) div[aria-hidden] > span:first-child {
-  font-size: var(--lmvz-component-body-sm-font-size, clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem));
+  font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
 }
 :host([size='small']) div[aria-hidden] svg {
   width: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));
@@ -211,7 +211,7 @@ select {
   --lmvz-select-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem));
   --lmvz-select-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
   --lmvz-select-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
-  --lmvz-select-label-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem));
+  --lmvz-select-label-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
 }
 :host([size='large']) div[aria-hidden] > span:first-child {
   font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));

package/collection/components/lmvz-snackbar/lmvz-snackbar.css

@@ -1,6 +1,6 @@
 :host {
   position: fixed;
-  bottom: var(--lmvz-dimension-16-20, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
+  bottom: var(--lmvz-dimension-20-16, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
   left: 50%;
   transform: translateX(-50%);
   z-index: 2147483000; /* TODO(tokens): promote to design-token */
@@ -8,40 +8,40 @@
   width: max-content;
   border: 1px solid transparent;
   border-radius: var(--lmvz-semantic-border-radius-lg, 14px);
-  padding: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)) var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
+  padding: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)) var(--lmvz-dimension-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
 
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  gap: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  gap: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
 
   pointer-events: auto;
   font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
     Router);
 
   /* this will be picked up by lmvz-icon as well */
-  --lmvz-component-color: var(--lmvz-semantic-color-status-on-success, #37867c);
+  --lmvz-component-color: var(--lmvz-semantic-color-status-on-success, #28625b);
 
   color: var(--lmvz-component-color);
 }
 
 :host([status='success']) {
-  background-color: var(--lmvz-semantic-color-status-success, #f1f9f8);
-  border-color: var(--lmvz-semantic-color-status-on-success-subtle, #a5dad3);
-  --lmvz-component-color: var(--lmvz-semantic-color-status-on-success, #37867c);
+  background-color: var(--lmvz-semantic-color-status-success, #c2e6e1);
+  border-color: var(--lmvz-semantic-color-status-on-success-subtle, #4eb6a9);
+  --lmvz-component-color: var(--lmvz-semantic-color-status-on-success, #28625b);
 }
 
 :host([status='warning']) {
-  background-color: var(--lmvz-semantic-color-status-warning, #fffbf0);
-  border-color: var(--lmvz-semantic-color-status-on-warning-subtle, #ffdf75);
-  --lmvz-component-color: var(--lmvz-semantic-color-status-on-warning, #7a5e00);
+  background-color: var(--lmvz-semantic-color-status-warning, #ffeeb8);
+  border-color: var(--lmvz-semantic-color-status-on-warning-subtle, #e6b000);
+  --lmvz-component-color: var(--lmvz-semantic-color-status-on-warning, #614a00);
 }
 
 :host([status='error']) {
-  background-color: var(--lmvz-semantic-color-status-danger, #fdf1f2);
-  border-color: var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2);
-  --lmvz-component-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+  background-color: var(--lmvz-semantic-color-status-danger, #fbdfe0);
+  border-color: var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b);
+  --lmvz-component-color: var(--lmvz-semantic-color-status-on-danger, #a31419);
 }
 
 lmvz-icon {

package/collection/components/lmvz-tab/lmvz-tab.css

@@ -25,7 +25,7 @@ h6 {
 hr {
   height: 0;
   border: none;
-  margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
+  margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0);
 }
 
@@ -49,9 +49,9 @@ button {
   justify-content: center;
   gap: var(--lmvz-component-component-spacing-0-default, 4px);
 
-  padding-top: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
-  padding-bottom: var(--lmvz-dimension-8-14, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem));
-  padding-inline: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));
+  padding-top: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  padding-bottom: var(--lmvz-dimension-14-8, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem));
+  padding-inline: var(--lmvz-dimension-24-16, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));
 
   border: none;
   border-radius: var(--lmvz-semantic-border-radius-round, 999px);
@@ -89,9 +89,9 @@ button:active {
   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);
 }
 :host([has-media]) button {
-  padding-top: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));
-  padding-bottom: var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
-  padding-inline: var(--lmvz-dimension-40-48, clamp(2.5rem, 2.38rem + 0.52vw, 3rem));
+  padding-top: var(--lmvz-dimension-18-16, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));
+  padding-bottom: var(--lmvz-dimension-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
+  padding-inline: var(--lmvz-dimension-48-40, clamp(2.5rem, 2.38rem + 0.52vw, 3rem));
   border-radius: var(--lmvz-semantic-border-radius-lg, 14px);
 }
 :host([has-media]) button:hover {
@@ -145,10 +145,10 @@ button:active {
   --lmvz-component-color: var(--lmvz-tab-color);
 }
 ::slotted(lmvz-icon) {
-  --lmvz-component-size: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));
+  --lmvz-component-size: var(--lmvz-dimension-18-16, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));
 }
 :host([has-media]) ::slotted(lmvz-icon) {
-  --lmvz-component-size: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem));
+  --lmvz-component-size: var(--lmvz-component-icon-size-lg, clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem));
 }
 .label {
   display: contents;

package/collection/components/lmvz-tabs/lmvz-tabs.css

@@ -25,7 +25,7 @@ h6 {
 hr {
   height: 0;
   border: none;
-  margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
+  margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0);
 }
 
@@ -47,7 +47,7 @@ hr {
   display: none; /* Chrome/Safari */
 }
 :host([has-icon-tabs]) .tablist {
-  gap: var(--lmvz-dimension-6-8, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));
+  gap: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));
   background: none;
   border-radius: 0;
 }

package/collection/components/lmvz-toggle/lmvz-toggle.css

@@ -41,8 +41,8 @@
   display: inline-flex;
   align-items: center;
   gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
-  padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));
-  padding-inline: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
+  padding-block: var(--lmvz-dimension-8-2, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));
+  padding-inline: var(--lmvz-dimension-10-4, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
   /* TODO[LDHCID-136]: min-height currently below accessibility requirements for tap targets (44px) */
   /* min-height: 38px; */
   border-radius: var(--lmvz-semantic-border-radius-round, 999px);
@@ -74,7 +74,7 @@
   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0);
 }
 :host(:not([disabled]):hover) .track {
-  border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7);
+  border-color: var(--lmvz-semantic-color-border-hover, #a1a1a1);
 }
 :host([checked]) .track {
   border-color: var(--lmvz-semantic-color-border-active, #0f8acc);