@sbb-esta/lyne-elements-dev 4.7.0-dev.1773236484 → 4.7.0-dev.1773245052

package/core/styles/core.scss

@@ -128,6 +128,12 @@ $theme: 'standard' !default;
 @use '../../lead-container/lead-container.global' as lead-container with (
   $theme: $theme
 );
+@use '../../link/common/block-link.global' as block-link with (
+  $theme: $theme
+);
+@use '../../message/message.global' as message with (
+  $theme: $theme
+);
 @use '../../option/option/option.global' as option with (
   $theme: $theme
 );
@@ -206,7 +212,9 @@ $theme: 'standard' !default;
   @include header-common.base;
   @include header-environment.base;
   @include icon-sidebar.base;
+  @include block-link.base;
   @include lead-container.base;
+  @include message.base;
   @include option.base;
   @include option-hint.base;
   @include optgroup.base;
@@ -335,6 +343,7 @@ $theme: 'standard' !default;
 @include header.rules;
 @include icon-sidebar.rules;
 @include lead-container.rules;
+@include message.rules;
 @include option.rules;
 @include tab-nav-bar.rules;
 
@@ -433,14 +442,6 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-// TODO: Move back to the sbb-message components when the global CSS refactoring happens
-sbb-message {
-  > [slot='image']:is(sbb-image, img),
-  > [slot='image'] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-    border-radius: var(--sbb-message-image-border-radius);
-  }
-}
-
 // 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

package/core.css

@@ -1522,6 +1522,9 @@
   --sbb-header-environment-rotate: 45deg;
   --sbb-icon-sidebar-background-color: var(--sbb-background-color-1);
   --sbb-icon-sidebar-border-radius: var(--sbb-border-radius-8x);
+  --sbb-block-link-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-block-link-icon-size: var(--sbb-size-icon-ui-small);
+  --sbb-block-link-font-size: var(--sbb-text-font-size-s);
   --sbb-lead-container-background-color: var(--sbb-background-color-1);
   --sbb-lead-container-image-ratio: 2 / 1;
   --sbb-lead-container-image-overlap: var(--sbb-spacing-fixed-24x);
@@ -1530,6 +1533,12 @@
   --sbb-lead-container-padding-inline: var(--sbb-layout-base-offset-responsive);
   --sbb-lead-container-border-radius: var(--sbb-border-radius-6x);
   --sbb-lead-container-image-border-radius: 0;
+  --sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
+  --sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);
+  --sbb-message-image-border-radius: var(--sbb-border-radius-4x);
+  --sbb-message-subtitle-color: var(--sbb-color-granite);
+  --sbb-message-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-platinum));
+  --sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
   --sbb-option-color: var(--sbb-color-3);
   --sbb-option-background-color: inherit;
   --sbb-option-background-color-hover: var(--sbb-background-color-3);
@@ -2059,6 +2068,11 @@ sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-o
   border-radius: var(--sbb-lead-container-image-border-radius);
 }
 
+sbb-message > [slot=image]:is(sbb-image, img),
+sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+  border-radius: var(--sbb-message-image-border-radius);
+}
+
 :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
   --sbb-option-min-height: var(--sbb-size-element-xxs);
   --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
@@ -2175,11 +2189,6 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-sbb-message > [slot=image]:is(sbb-image, img),
-sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  border-radius: var(--sbb-message-image-border-radius);
-}
-
 :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(