feat: update size tokens (#2551)

package.json

@@ -63,7 +63,7 @@
     "@lit/react": "^1.0.1",
     "@open-wc/lit-helpers": "0.7.0",
     "@open-wc/testing": "4.0.0",
-    "@sbb-esta/lyne-design-tokens": "0.4.3",
+    "@sbb-esta/lyne-design-tokens": "0.5.0",
     "@storybook/addon-a11y": "8.0.5",
     "@storybook/addon-actions": "8.0.5",
     "@storybook/addon-essentials": "8.0.5",

src/components/button/common/button-common.scss

@@ -25,7 +25,7 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
   --sbb-button-shadow-2-color: var(--sbb-color-red125-alpha-20);
   --sbb-button-border-width: var(--sbb-border-width-2x);
   --sbb-button-border-radius: var(--sbb-border-radius-infinity);
-  --sbb-button-min-height: var(--sbb-size-button-l-min-height);
+  --sbb-button-min-height: var(--sbb-size-element-m);
   --sbb-button-transition-duration: var(--sbb-animation-duration-2x);
   --sbb-button-transition-easing-function: var(--sbb-animation-easing);
   --sbb-button-padding-block-min: var(--sbb-spacing-fixed-1x);
@@ -57,7 +57,7 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
 }
 
 :host([size='m']) {
-  --sbb-button-min-height: var(--sbb-size-button-m-min-height);
+  --sbb-button-min-height: var(--sbb-size-element-s);
   --sbb-button-padding-inline: var(--sbb-spacing-fixed-5x);
 
   @include sbb.mq($from: medium) {

src/components/form-error/form-error.scss

@@ -5,8 +5,9 @@
 @include sbb.host-component-properties;
 
 :host {
-  --sbb-form-error-height: calc(var(--sbb-typo-line-height-body-text) * 1em);
   --sbb-form-error-color: var(--sbb-color-red125);
+  --sbb-form-error-height: calc(var(--sbb-typo-line-height-body-text) * 1em);
+  --sbb-size-icon-form-error: #{sbb.px-to-rem-build(17)};
 
   // Overrides sbb icon
   --sbb-icon-svg-width: var(--sbb-size-icon-form-error);

src/components/form-field/form-field/form-field.scss

@@ -10,7 +10,7 @@
   --sbb-form-field-border-style: solid;
   --sbb-form-field-border-radius: var(--sbb-border-radius-4x);
   --sbb-form-field-border-width: var(--sbb-border-width-1x);
-  --sbb-form-field-min-height: var(--sbb-size-form-element-m-min-height);
+  --sbb-form-field-min-height: var(--sbb-size-element-m);
   --sbb-form-field-label-color: var(--sbb-color-metal);
   --sbb-form-field-prefix-color: var(--sbb-color-metal);
   --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);
@@ -73,7 +73,7 @@
 }
 
 :host([size='l']) {
-  --sbb-form-field-min-height: var(--sbb-size-form-element-l-min-height);
+  --sbb-form-field-min-height: var(--sbb-size-element-l);
   --sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs);
 }
 

src/components/header/common/header-action.scss

@@ -8,7 +8,7 @@
   --sbb-header-action-padding-inline: var(--sbb-spacing-fixed-5x);
   --sbb-header-action-color: var(--sbb-color-black);
   --sbb-header-action-background-color: transparent;
-  --sbb-header-action-min-height: var(--sbb-size-button-m-min-height);
+  --sbb-header-action-min-height: var(--sbb-size-element-s);
   --sbb-header-action-min-width: var(--sbb-header-action-min-height);
   --sbb-header-action-transition-duration: var(--sbb-animation-duration-2x);
   --sbb-header-action-transition-easing: var(--sbb-animation-easing);

src/components/menu/menu/menu.e2e.ts

@@ -195,7 +195,7 @@ describe(`sbb-menu with ${fixture.name}`, () => {
     expect(element).to.have.attribute('data-state', 'opened');
 
     const buttonHeight = getComputedStyle(document.documentElement).getPropertyValue(
-      `--sbb-size-button-l-min-height-large`,
+      `--sbb-size-element-m`,
     );
     expect(buttonHeight.trim()).to.be.equal('3.5rem');
 

src/components/popover/popover/popover.e2e.ts

@@ -170,7 +170,7 @@ describe(`sbb-popover with ${fixture.name}`, () => {
       expect(element).to.have.attribute('data-state', 'opened');
 
       const buttonHeight = getComputedStyle(document.documentElement).getPropertyValue(
-        `--sbb-size-button-l-min-height-large`,
+        `--sbb-size-element-m`,
       );
       expect(buttonHeight.trim()).to.be.equal('3.5rem');
 

src/components/train/train-blocked-passage/train-blocked-passage.scss

@@ -8,7 +8,7 @@
   --sbb-train-blocked-passage-height: var(--sbb-train-formation-wagon-height);
   --sbb-train-blocked-passage-background-color: var(--sbb-color-red);
   --sbb-train-blocked-passage-bar-color: var(--sbb-color-white);
-  --sbb-train-blocked-passage-icon-dimension: var(--sbb-size-icon-timetable-attribute);
+  --sbb-train-blocked-passage-icon-dimension: #{sbb.px-to-rem-build(16)};
   --sbb-train-blocked-passage-icon-bar-width: #{sbb.px-to-rem-build(10)};
   --sbb-train-blocked-passage-icon-bar-height: #{sbb.px-to-rem-build(4)};
   --sbb-train-blocked-passage-icon-bar-border-radius: #{sbb.px-to-rem-build(1)};

src/components/train/train-formation/train-formation.scss

@@ -9,7 +9,7 @@
   --sbb-train-formation-background-color: var(--sbb-color-white);
   --sbb-train-formation-sector-label-color: var(--sbb-color-metal);
   --sbb-train-formation-sector-line-color: var(--sbb-color-smoke);
-  --sbb-train-formation-blocked-passage-width: var(--sbb-size-icon-timetable-attribute);
+  --sbb-train-formation-blocked-passage-width: #{sbb.px-to-rem-build(16)};
 
   @include sbb.if-forced-colors {
     --sbb-train-formation-sector-line-color: CanvasText;

yarn.lock

@@ -1975,10 +1975,10 @@
     argparse "~1.0.9"
     string-argv "~0.3.1"
 
-"@sbb-esta/lyne-design-tokens@0.4.3":
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/@sbb-esta/lyne-design-tokens/-/lyne-design-tokens-0.4.3.tgz#d09e3376b164ecb6269cfca7ab0efa46bfdfb7b8"
-  integrity sha512-DGu0jvXx6poV7NVyYulcb3YF0zAxO+4pkhm+EgKdM3Gg+52IbTVmjjt3b3NWKxI6gtGq6Mnn+Q8imRnHW71q7A==
+"@sbb-esta/lyne-design-tokens@0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@sbb-esta/lyne-design-tokens/-/lyne-design-tokens-0.5.0.tgz#13384cf5496a1512d20fe6eed70454e1ebd919a6"
+  integrity sha512-WKzoxM3HzBoFrqUsNUF1rFAvut5PVb3qyN/IxFUNzjrNZTvlYEeXU4pNQJM+KQtt4t4iJmKEytBifF0MiLfRow==
 
 "@sinclair/typebox@^0.27.8":
   version "0.27.8"