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

package/core/styles/core.scss

@@ -131,6 +131,9 @@ $theme: 'standard' !default;
 @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
 );
@@ -211,6 +214,7 @@ $theme: 'standard' !default;
   @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;
@@ -339,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;
 
@@ -437,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

@@ -1533,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);
@@ -2062,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));
@@ -2178,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(