@sbb-esta/lyne-elements 2.0.1 → 2.0.3

package/core/styles/core.scss

@@ -12,7 +12,7 @@
 
 // Core variables, are always needed
 :root {
-  // Grab css vars defined by `@sbb-esta/lyne-design-tokens` package
+  // Grab CSS vars defined by `@sbb-esta/lyne-design-tokens` package
   @include sbb-css-tokens.lyne-design-tokens-css-variables;
 
   & {
@@ -160,7 +160,7 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-// TODO: Move back to the sbb-container components when the global css refactoring happens
+// TODO: Move back to the sbb-container components when the global CSS refactoring happens
 sbb-container {
   > [slot='image']:is(sbb-image, img),
   > [slot='image'] :is(sbb-image, img) {
@@ -172,7 +172,7 @@ sbb-container {
   }
 }
 
-// TODO: Move back to the sbb-flip-card-summary components when the global css refactoring happens
+// TODO: Move back to the sbb-flip-card-summary components when the global CSS refactoring happens
 sbb-flip-card-summary {
   > [slot='image']:is(sbb-image, img),
   > [slot='image'] :is(sbb-image, img) {
@@ -185,7 +185,7 @@ sbb-flip-card-summary {
   }
 }
 
-// TODO: Move back to the sbb-lead-container components when the global css refactoring happens
+// TODO: Move back to the sbb-lead-container components when the global CSS refactoring happens
 sbb-lead-container {
   > [slot='image']:is(sbb-image, img, picture),
   > [slot='image'] :is(sbb-image, img, picture) {
@@ -206,7 +206,7 @@ sbb-message {
 
 // Target the slotted `sbb-image` which are generally wrapped by a <figure> (therefore are not reachable with the :slotted)
 // Apply the brightness effect on mouse hover
-// TODO: Move back to the teaser components when the global css refactoring happens
+// TODO: Move back to the teaser components when the global CSS refactoring happens
 :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) {
   --sbb-teaser-image-brightness-hover: var(--sbb-hover-image-brightness);
   --sbb-teaser-image-animation-duration: var(
@@ -229,7 +229,7 @@ sbb-message {
   }
 }
 
-// TODO: Move back to the teaser components when the global css refactoring happens
+// TODO: Move back to the teaser components when the global CSS refactoring happens
 :is(sbb-teaser-product, sbb-teaser-product-static) {
   :is(sbb-image, img) {
     border-radius: 0; // Reset sbb-image border radius in order to control it from teaser product.
@@ -243,7 +243,7 @@ sbb-message {
   }
 }
 
-// TODO: Move back to the teaser components when the global css refactoring happens
+// TODO: Move back to the teaser components when the global CSS refactoring happens
 sbb-teaser :is(sbb-image, img) {
   --sbb-image-object-fit: cover;
   --sbb-image-aspect-ratio: 4 / 3;
@@ -253,7 +253,7 @@ sbb-teaser :is(sbb-image, img) {
   scale: var(--sbb-teaser-scale, 1);
 }
 
-// TODO: Move back to the teaser-hero components when the global css refactoring happens
+// TODO: Move back to the teaser-hero components when the global CSS refactoring happens
 :is(sbb-teaser-hero) {
   :is(sbb-image, img) {
     --sbb-image-aspect-ratio: 1 / 1;
@@ -266,22 +266,23 @@ sbb-teaser :is(sbb-image, img) {
   }
 
   img {
-    width: 100%;
     display: block;
+    align-self: stretch;
+    width: 100%;
   }
 }
 
-// TODO: move to train formation after css refactoring
+// TODO: move to train formation after CSS refactoring
 sbb-train-formation:has(sbb-train[direction-label]) {
   --sbb-train-formation-reserve-spacing-display: block;
 }
 
-// TODO: move to train formation after css refactoring
+// TODO: move to train formation after CSS refactoring
 sbb-train-formation:has(sbb-train-wagon[sector]) {
   --sbb-train-formation-show-sectors-gap: 1;
 }
 
-// TODO: move to train formation after css refactoring
+// TODO: move to train formation after CSS refactoring
 sbb-train-formation:not(:has(sbb-train-wagon[label])) {
   --sbb-train-formation-wagon-label-display: none;
 }

package/core/styles/mixins/buttons.scss

@@ -101,7 +101,7 @@ $active: ':active, [data-active]';
     height: fit-content;
 
     // Use !important here to not interfere with Firefox focus ring definition
-    // which appears in normalize css of several frameworks.
+    // which appears in normalize CSS of several frameworks.
     outline: none !important;
 
     @include icon-button-variables;

package/core/styles/mixins/lists.scss

@@ -96,6 +96,7 @@
   }
 }
 
+// @deprecated Will be removed with next major version
 @mixin base-marker-list(
   $dimensions,
   $padding-inline,
@@ -159,49 +160,84 @@
 }
 
 @mixin icon-list {
-  @include base-marker-list(
-    $dimensions: '--sbb-icon-list-dimensions',
-    $padding-inline: '--sbb-icon-list-padding-inline',
-    $to-text-gap: '--sbb-icon-list-to-text-gap',
-    $vertical-gap: '--sbb-icon-list-vertical-gap',
-    $text-to-marker-block-offset: '--sbb-icon-list-text-to-marker-block-offset'
+  --sbb-icon-list-marker-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3 12a9 9 0 0 1 9-9 9 9 0 0 1 9 9 9 9 0 0 1-9 9 9 9 0 0 1-9-9m9-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m-1.104 13.305 5-6.5-.792-.61-4.69 6.096-2.102-1.681-.624.78 2.5 2 .398.319z" clip-rule="evenodd"></path></svg>');
+  --sbb-icon-list-marker-icon-color: currentcolor;
+  --sbb-icon-list-vertical-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-icon-list-dimensions: var(--sbb-size-icon-ui-small);
+  --sbb-icon-list-to-text-gap: var(--sbb-spacing-fixed-2x);
+
+  // Additional space from overall li padding to the text because text
+  // has to be centered to marker number.
+  --sbb-icon-list-text-to-marker-block-offset: calc(
+    0.5 *
+      (
+        var(--sbb-icon-list-dimensions) - var(--sbb-typo-line-height-body-text) *
+          var(--sbb-text-font-size)
+      )
   );
 
-  & {
-    --sbb-icon-list-marker-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3 12a9 9 0 0 1 9-9 9 9 0 0 1 9 9 9 9 0 0 1-9 9 9 9 0 0 1-9-9m9-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m-1.104 13.305 5-6.5-.792-.61-4.69 6.096-2.102-1.681-.624.78 2.5 2 .398.319z" clip-rule="evenodd"></path></svg>');
-    --sbb-icon-list-marker-icon-color: currentcolor;
-    --sbb-icon-list-vertical-gap: var(--sbb-spacing-fixed-2x);
-    --sbb-icon-list-dimensions: var(--sbb-size-icon-ui-small);
-    --sbb-icon-list-to-text-gap: var(--sbb-spacing-fixed-2x);
-  }
+  list-style: none;
+  margin: 0;
+  padding: 0;
 
-  > li::before {
-    content: '';
-    background-color: var(--sbb-icon-list-marker-icon-color);
-    mask-image: var(--sbb-icon-list-marker-icon);
-    mask-repeat: no-repeat;
-    mask-position: center;
-    mask-size: 100%;
+  // stylelint-disable-next-line no-descending-specificity
+  > li {
+    position: relative;
+    padding-inline: calc(var(--sbb-icon-list-dimensions) + var(--sbb-icon-list-to-text-gap)) 0;
+    min-height: var(--sbb-icon-list-dimensions);
+
+    + li {
+      margin-block-start: var(--sbb-icon-list-vertical-gap);
+    }
+
+    p {
+      margin-block: 0;
+    }
+
+    // P has to be redefined to be more specific
+    > * + p {
+      margin-block-start: var(--sbb-spacing-responsive-xxxs);
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: var(--sbb-icon-list-dimensions);
+      height: var(--sbb-icon-list-dimensions);
+      margin-block-start: calc(-1 * var(--sbb-icon-list-text-to-marker-block-offset));
+      inset-inline-start: 0;
+      background-color: var(--sbb-icon-list-marker-icon-color);
+      mask-image: var(--sbb-icon-list-marker-icon);
+      mask-repeat: no-repeat;
+      mask-position: center;
+      mask-size: 100%;
+    }
   }
 }
 
 @mixin step-list {
-  @include base-marker-list(
-    $dimensions: '--sbb-step-list-dimensions',
-    $padding-inline: '--sbb-step-list-padding-inline',
-    $to-text-gap: '--sbb-step-list-to-text-gap',
-    $vertical-gap: '--sbb-step-list-vertical-gap',
-    $text-to-marker-block-offset: '--sbb-step-list-text-to-marker-block-offset'
+  --sbb-step-list-dimensions: #{functions.px-to-rem-build(34)};
+  --sbb-step-list-padding-inline: var(--sbb-spacing-responsive-xxs);
+  --sbb-step-list-to-text-gap: var(--sbb-spacing-responsive-xxxs);
+  --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
+  --sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-step-list-border-radius: var(--sbb-border-radius-4x);
+
+  // Additional space from overall li padding to the text because text
+  // has to be centered to marker number.
+  --sbb-step-list-text-to-marker-block-offset: calc(
+    0.5 *
+      (
+        var(--sbb-step-list-dimensions) - var(--sbb-typo-line-height-body-text) *
+          var(--sbb-text-font-size)
+      )
   );
 
-  & {
-    --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
-    --sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x);
-    --sbb-step-list-border-radius: var(--sbb-border-radius-4x);
-
-    counter-reset: steps;
-    color: var(--sbb-color-iron);
-  }
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  counter-reset: steps;
+  color: var(--sbb-color-iron);
 
   &:where(.sbb-text-s) {
     --sbb-step-list-padding-block: var(--sbb-spacing-fixed-4x);
@@ -211,7 +247,15 @@
     --sbb-step-list-padding-block: var(--sbb-spacing-fixed-5x);
   }
 
+  &:where(.sbb-text-xl) {
+    @include mediaqueries.mq($from: medium) {
+      --sbb-step-list-dimensions: #{functions.px-to-rem-build(41)};
+    }
+  }
+
+  // stylelint-disable-next-line no-descending-specificity
   > li {
+    position: relative;
     counter-increment: steps;
     background-color: var(--sbb-color-milk);
     padding-block: calc(
@@ -226,12 +270,33 @@
     min-height: calc(var(--sbb-step-list-dimensions) + 2 * var(--sbb-step-list-padding-block));
 
     &::before {
+      @include typo.text-xxs--bold;
+
       content: counter(steps);
+      position: absolute;
       display: flex;
       align-items: center;
       justify-content: center;
-      border: var(--sbb-border-width-1x) solid var(--sbb-color-cement);
+      height: var(--sbb-step-list-dimensions);
+      width: var(--sbb-step-list-dimensions);
+      margin-block-start: calc(-1 * var(--sbb-step-list-text-to-marker-block-offset));
+      inset-inline-start: var(--sbb-step-list-padding-inline);
       color: var(--sbb-color-charcoal);
+      border: var(--sbb-border-width-1x) solid var(--sbb-color-cement);
+      border-radius: 50%;
+    }
+
+    + li {
+      margin-block-start: var(--sbb-step-list-vertical-gap);
+    }
+
+    p {
+      margin-block: 0;
+    }
+
+    // P has to be redefined to be more specific
+    > * + p {
+      margin-block-start: var(--sbb-spacing-responsive-xxxs);
     }
 
     &:first-of-type {

package/core.css

@@ -1379,8 +1379,9 @@ sbb-teaser :is(sbb-image, img) {
   }
 }
 :is(sbb-teaser-hero) img {
-  width: 100%;
   display: block;
+  align-self: stretch;
+  width: 100%;
 }
 
 sbb-train-formation:has(sbb-train[direction-label]) {