From f430ec6761ffc2620455942211cecbc8f4b7f9f9 Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Thu, 9 Jan 2025 13:15:16 +0100
Subject: [PATCH 1/5] feat(sbb-container, sbb-sticky-bar): add new color
 variants

---
 .../container/container/container.scss        | 16 ++++
 .../container/container/container.stories.ts  | 55 ++++++++++---
 src/elements/container/container/container.ts |  8 +-
 .../container/container.visual.spec.ts        |  2 +-
 src/elements/container/container/readme.md    | 23 ++++--
 src/elements/container/sticky-bar/readme.md   |  9 ++-
 .../container/sticky-bar/sticky-bar.scss      |  8 ++
 .../sticky-bar/sticky-bar.stories.ts          | 81 ++++++++++++++++---
 .../container/sticky-bar/sticky-bar.ts        |  7 +-
 .../sticky-bar/sticky-bar.visual.spec.ts      |  2 +-
 10 files changed, 174 insertions(+), 37 deletions(-)

diff --git a/src/elements/container/container/container.scss b/src/elements/container/container/container.scss
index 0950dc6905..a7a555d52f 100644
--- a/src/elements/container/container/container.scss
+++ b/src/elements/container/container/container.scss
@@ -5,6 +5,7 @@
 
 :host {
   --sbb-container-background-border-radius: 0;
+  --sbb-container-color: inherit;
 
   display: block;
 }
@@ -17,6 +18,20 @@
   --sbb-container-background-color: var(--sbb-color-milk);
 }
 
+:host([color='midnight']),
+:host([color='charcoal']) {
+  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
+  --sbb-container-color: white;
+}
+
+:host([color='midnight']) {
+  --sbb-container-background-color: var(--sbb-color-midnight);
+}
+
+:host([color='charcoal']) {
+  --sbb-container-background-color: var(--sbb-color-charcoal);
+}
+
 :host([data-slot-names~='image']) {
   --sbb-container-background-color: transparent;
   --sbb-container-padding: var(--sbb-spacing-responsive-xxl);
@@ -37,6 +52,7 @@
 }
 
 .sbb-container {
+  color: var(--sbb-container-color);
   background-color: var(--sbb-container-background-color);
   padding: var(--sbb-container-padding);
 
diff --git a/src/elements/container/container/container.stories.ts b/src/elements/container/container/container.stories.ts
index c27c5cbba7..6fd6bc02ae 100644
--- a/src/elements/container/container/container.stories.ts
+++ b/src/elements/container/container/container.stories.ts
@@ -13,14 +13,22 @@ import './container.js';
 
 import readme from './readme.md?raw';
 
-const containerContent = (title: string, last = false): TemplateResult => html`
-  <sbb-title level="4">${title}</sbb-title>
+const containerContent = (title: string, isDark: boolean, last = false): TemplateResult => html`
+  <sbb-title level="4" ?negative=${isDark}>${title}</sbb-title>
   <p class="sbb-text-s">The container component will give its content the correct spacing.</p>
   <p class="sbb-text-s">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-    voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    ${isDark
+      ? html`
+          In <code>"midnight"</code> and <code>"charcoal"</code> variants the slotted text has
+          <code>"white"</code> color; however, you have to manually set the
+          <code>"negative"</code> property on sbb-components when needed.
+        `
+      : html`
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+        `}
   </p>
   <sbb-secondary-button style=${last ? 'margin-block-end: 3rem;' : nothing}>
     See more
@@ -44,7 +52,7 @@ const color: InputType = {
   control: {
     type: 'select',
   },
-  options: ['white', 'transparent', 'milk'],
+  options: ['white', 'transparent', 'milk', 'midnight', 'charcoal'],
 };
 
 const expanded: InputType = {
@@ -79,10 +87,15 @@ const defaultArgs: Args = {
   'image-src': undefined,
 };
 
+function isDark(colorArg: string): boolean {
+  return colorArg === color.options![3] || colorArg === color.options![4];
+}
+
 const DefaultTemplate = (args: Args): TemplateResult => html`
   <sbb-container ${sbbSpread(args)}>
-    ${containerContent('Example title')} ${containerContent('Another one')}
-    ${containerContent('And another one', true)}
+    ${containerContent('Example title', isDark(args.color))}
+    ${containerContent('Another one', isDark(args.color))}
+    ${containerContent('And another one', isDark(args.color), true)}
   </sbb-container>
 `;
 
@@ -131,6 +144,18 @@ export const Milk: StoryObj = {
   args: { ...defaultArgs, color: color.options![2] },
 };
 
+export const Midnight: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, color: color.options![3] },
+};
+
+export const Charcoal: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, color: color.options![4] },
+};
+
 export const BackgroundImage: StoryObj = {
   render: BackgroundImageTemplate,
   argTypes: defaultArgTypes,
@@ -152,6 +177,18 @@ export const MilkBackgroundExpanded: StoryObj = {
   args: { ...defaultArgs, color: color.options![2], 'background-expanded': true },
 };
 
+export const MidnightBackgroundExpanded: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, color: color.options![3], 'background-expanded': true },
+};
+
+export const CharcoalBackgroundExpanded: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, color: color.options![4], 'background-expanded': true },
+};
+
 const meta: Meta = {
   parameters: {
     docs: {
diff --git a/src/elements/container/container/container.ts b/src/elements/container/container/container.ts
index 1b59cfb468..81034004c3 100644
--- a/src/elements/container/container/container.ts
+++ b/src/elements/container/container/container.ts
@@ -23,7 +23,6 @@ export
 @slotState()
 class SbbContainerElement extends LitElement {
   public static override styles: CSSResultGroup = style;
-
   /** Whether the container is expanded. */
   @forceType()
   @property({ type: Boolean, reflect: true })
@@ -35,7 +34,12 @@ class SbbContainerElement extends LitElement {
   public accessor backgroundExpanded: boolean = false;
 
   /** Color of the container, like transparent, white etc. */
-  @property({ reflect: true }) public accessor color: 'transparent' | 'white' | 'milk' = 'white';
+  @property({ reflect: true }) public accessor color:
+    | 'transparent'
+    | 'white'
+    | 'milk'
+    | 'midnight'
+    | 'charcoal' = 'white';
 
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
     super.willUpdate(changedProperties);
diff --git a/src/elements/container/container/container.visual.spec.ts b/src/elements/container/container/container.visual.spec.ts
index da75e666c8..4389fc27f5 100644
--- a/src/elements/container/container/container.visual.spec.ts
+++ b/src/elements/container/container/container.visual.spec.ts
@@ -20,7 +20,7 @@ const imageUrl = import.meta.resolve('../../core/testing/assets/placeholder-imag
 const imageBase64 = await loadAssetAsBase64(imageUrl);
 
 describe(`sbb-container`, () => {
-  const colorCases = ['transparent', 'white', 'milk'];
+  const colorCases = ['transparent', 'white', 'milk', 'midnight', 'charcoal'];
 
   const backgroundExpandedCases = [false, true];
 
diff --git a/src/elements/container/container/readme.md b/src/elements/container/container/readme.md
index 3bb1543a81..6028614562 100644
--- a/src/elements/container/container/readme.md
+++ b/src/elements/container/container/readme.md
@@ -36,23 +36,32 @@ Optionally, you can add an overlapping `sbb-chip-label` by wrapping the `sbb-ima
 
 ## Style
 
-By default `sbb-container` uses the `page spacing` defined in the [layout documentation](/docs/styles-layout--docs). Optionally the user can use the `expanded` property (default: `false`) to switch to the `page spacing expanded` layout.
+By default `sbb-container` uses the `page spacing` defined in the [layout documentation](/docs/styles-layout--docs).
+Optionally the user can use the `expanded` property (default: `false`) to switch to the `page spacing expanded` layout.
 Spacing options are applied to all the container's content, including the `sbb-sticky-bar`.
-The component has also four color variants that can be set using the `color` property (default: `white`).
+
+The component has also five color variants that can be set using the `color` property (default: `white`).
+In `midnight` and `charcoal` variants, the slotted content text color and the focus outline color change to white,
+but it's on the consumers to correctly set the `negative` property on slotted Lyne components, if needed.
 
 ```html
 <sbb-container expanded variant="milk"> ... </sbb-container>
+
+<sbb-container variant="midnight">
+  <sbb-title negative>Title</sbb-title>
+  <p>Text</p>
+</sbb-container>
 ```
 
 <!-- Auto Generated Below -->
 
 ## Properties
 
-| Name                 | Attribute             | Privacy | Type                                 | Default   | Description                                                                     |
-| -------------------- | --------------------- | ------- | ------------------------------------ | --------- | ------------------------------------------------------------------------------- |
-| `backgroundExpanded` | `background-expanded` | public  | `boolean`                            | `false`   | Whether the background color is shown on full container width on large screens. |
-| `color`              | `color`               | public  | `'transparent' \| 'white' \| 'milk'` | `'white'` | Color of the container, like transparent, white etc.                            |
-| `expanded`           | `expanded`            | public  | `boolean`                            | `false`   | Whether the container is expanded.                                              |
+| Name                 | Attribute             | Privacy | Type                                                             | Default   | Description                                                                     |
+| -------------------- | --------------------- | ------- | ---------------------------------------------------------------- | --------- | ------------------------------------------------------------------------------- |
+| `backgroundExpanded` | `background-expanded` | public  | `boolean`                                                        | `false`   | Whether the background color is shown on full container width on large screens. |
+| `color`              | `color`               | public  | `'transparent' \| 'white' \| 'milk' \| 'midnight' \| 'charcoal'` | `'white'` | Color of the container, like transparent, white etc.                            |
+| `expanded`           | `expanded`            | public  | `boolean`                                                        | `false`   | Whether the container is expanded.                                              |
 
 ## Slots
 
diff --git a/src/elements/container/sticky-bar/readme.md b/src/elements/container/sticky-bar/readme.md
index a5ab85ff4b..9e49f1a142 100644
--- a/src/elements/container/sticky-bar/readme.md
+++ b/src/elements/container/sticky-bar/readme.md
@@ -29,15 +29,16 @@ The `sbb-sticky-bar` content is provided via an unnamed slot.
 ## Style
 
 The `sbb-sticky-bar` inherits its variant from the `sbb-container` it's placed in.
-Optionally the user can set the `color` property on the `sbb-sticky-bar` in order to override the one inherited by the `sbb-container`. The color is only applied when the sticky bar is sticking, and will become transparent once it settles on the bottom of the container.
+Optionally the user can set the `color` property on the `sbb-sticky-bar` in order to override the one inherited by the `sbb-container`.
+The color is only applied when the sticky bar is sticking, and will become transparent once it settles on the bottom of the container.
 
 <!-- Auto Generated Below -->
 
 ## Properties
 
-| Name    | Attribute | Privacy | Type                        | Default | Description                                          |
-| ------- | --------- | ------- | --------------------------- | ------- | ---------------------------------------------------- |
-| `color` | `color`   | public  | `'white' \| 'milk' \| null` | `null`  | Color of the container, like transparent, white etc. |
+| Name    | Attribute | Privacy | Type                                                    | Default | Description                                          |
+| ------- | --------- | ------- | ------------------------------------------------------- | ------- | ---------------------------------------------------- |
+| `color` | `color`   | public  | `'white' \| 'milk' \| 'midnight' \| 'charcoal' \| null` | `null`  | Color of the container, like transparent, white etc. |
 
 ## Methods
 
diff --git a/src/elements/container/sticky-bar/sticky-bar.scss b/src/elements/container/sticky-bar/sticky-bar.scss
index be3b7b135b..938ee3aafe 100644
--- a/src/elements/container/sticky-bar/sticky-bar.scss
+++ b/src/elements/container/sticky-bar/sticky-bar.scss
@@ -61,6 +61,14 @@ $intersector-overlapping: 1px;
   --sbb-sticky-bar-sticky-background-color: var(--sbb-color-milk);
 }
 
+:host([data-sticking]:not([data-state='unsticky'])[color='midnight']) {
+  --sbb-sticky-bar-sticky-background-color: var(--sbb-color-midnight);
+}
+
+:host([data-sticking]:not([data-state='unsticky'])[color='charcoal']) {
+  --sbb-sticky-bar-sticky-background-color: var(--sbb-color-charcoal);
+}
+
 :host(
   :is(
     [data-sticking]:is([data-slide-vertically], [data-state='sticking'], [data-state='unsticking']),
diff --git a/src/elements/container/sticky-bar/sticky-bar.stories.ts b/src/elements/container/sticky-bar/sticky-bar.stories.ts
index b03008d908..7c1a9f3375 100644
--- a/src/elements/container/sticky-bar/sticky-bar.stories.ts
+++ b/src/elements/container/sticky-bar/sticky-bar.stories.ts
@@ -22,7 +22,7 @@ const containerColor: InputType = {
   table: {
     category: 'Container',
   },
-  options: ['transparent', 'white', 'milk'],
+  options: ['transparent', 'white', 'milk', 'midnight', 'charcoal'],
 };
 
 const containerExpanded: InputType = {
@@ -50,7 +50,7 @@ const color: InputType = {
   table: {
     category: 'Sticky Bar',
   },
-  options: ['unset', 'white', 'milk'],
+  options: ['unset', 'white', 'milk', 'midnight', 'charcoal'],
 };
 
 const defaultArgTypes: ArgTypes = {
@@ -86,8 +86,12 @@ const actionGroup = (): TemplateResult => html`
   </sbb-action-group>
 `;
 
-const containerContent = (title: string): TemplateResult => html`
-  <sbb-title level="4">${title}</sbb-title>
+function isDark(colorArg: string): boolean {
+  return colorArg === containerColor.options![3] || colorArg === containerColor.options![4];
+}
+
+const containerContent = (title: string, isDark: boolean): TemplateResult => html`
+  <sbb-title level="4" ?negative=${isDark}>${title}</sbb-title>
   <p class="sbb-text-s">The container component will give its content the correct spacing.</p>
   <p class="sbb-text-s">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
@@ -114,9 +118,10 @@ const DefaultTemplate = ({
     ?expanded=${containerExpanded}
     ?background-expanded=${containerBackgroundExpanded}
   >
-    ${containerContent('Example title')} ${containerContent('Another one')}
-    ${containerContent('And another one')} ${containerContent('And a last one')}
-
+    ${containerContent('Example title', isDark(containerColor))}
+    ${containerContent('Another one', isDark(containerColor))}
+    ${containerContent('And another one', isDark(containerColor))}
+    ${containerContent('And a last one', isDark(containerColor))}
     <sbb-sticky-bar color=${color !== 'unset' ? color : nothing}> ${actionGroup()} </sbb-sticky-bar>
   </sbb-container>
 `;
@@ -132,7 +137,7 @@ const ShortTemplate = ({
     ?expanded=${containerExpanded}
     ?background-expanded=${containerBackgroundExpanded}
   >
-    ${containerContent('Example title')}
+    ${containerContent('Example title', isDark(containerColor))}
     <sbb-sticky-bar color=${color !== 'unset' ? color : nothing}> ${actionGroup()} </sbb-sticky-bar>
   </sbb-container>
 `;
@@ -148,8 +153,10 @@ const WithContentAfterTemplate = ({
     ?expanded=${containerExpanded}
     ?background-expanded=${containerBackgroundExpanded}
   >
-    ${containerContent('Example title')} ${containerContent('Another one')}
-    ${containerContent('And another one')} ${containerContent('And a last one')}
+    ${containerContent('Example title', isDark(containerColor))}
+    ${containerContent('Another one', isDark(containerColor))}
+    ${containerContent('And another one', isDark(containerColor))}
+    ${containerContent('And a last one', isDark(containerColor))}
 
     <sbb-sticky-bar
       color=${color !== 'unset' ? color : nothing}
@@ -172,7 +179,8 @@ const WithContentAfterTemplate = ({
     ?background-expanded=${containerBackgroundExpanded}
   >
     <div style="padding-block: 4rem;">
-      ${containerContent('Content after first container')} ${containerContent('Another one')}
+      ${containerContent('Content after first container', isDark(containerColor))}
+      ${containerContent('Another one', isDark(containerColor))}
     </div>
   </sbb-container>
 `;
@@ -186,10 +194,11 @@ export const ShortContent: StoryObj = {
   argTypes: defaultArgTypes,
   args: defaultArgs,
 };
+
 export const ShortContentMilk: StoryObj = {
   render: ShortTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, containerColor: 'milk' },
+  args: { ...defaultArgs, containerColor: containerColor.options![2] },
 };
 
 export const Default: StoryObj = {
@@ -216,6 +225,18 @@ export const Milk: StoryObj = {
   args: { ...defaultArgs, color: color.options![2] },
 };
 
+export const Midnight: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, color: color.options![3] },
+};
+
+export const Charcoal: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, color: color.options![4] },
+};
+
 export const WithContentAfter: StoryObj = {
   render: WithContentAfterTemplate,
   argTypes: defaultArgTypes,
@@ -240,6 +261,42 @@ export const MilkContainerBackgroundExpanded: StoryObj = {
   args: { ...defaultArgs, containerColor: color.options![2], containerBackgroundExpanded: true },
 };
 
+export const MidnightContainer: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, containerColor: color.options![3] },
+};
+
+export const MidnightContainerCharcoalStickyBar: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, containerColor: color.options![3], color: color.options![4] },
+};
+
+export const MidnightContainerBackgroundExpanded: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, containerColor: color.options![3], containerBackgroundExpanded: true },
+};
+
+export const CharcoalContainer: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, containerColor: color.options![4] },
+};
+
+export const CharcoalContainerMidnightStickyBar: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, containerColor: color.options![4], color: color.options![3] },
+};
+
+export const CharcoalContainerBackgroundExpanded: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, containerColor: color.options![4], containerBackgroundExpanded: true },
+};
+
 export const ControlStickyState: StoryObj = {
   render: WithContentAfterTemplate,
   argTypes: defaultArgTypes,
diff --git a/src/elements/container/sticky-bar/sticky-bar.ts b/src/elements/container/sticky-bar/sticky-bar.ts
index b87d1743ed..f65624491c 100644
--- a/src/elements/container/sticky-bar/sticky-bar.ts
+++ b/src/elements/container/sticky-bar/sticky-bar.ts
@@ -48,7 +48,12 @@ class SbbStickyBarElement extends SbbUpdateSchedulerMixin(LitElement) {
   } as const;
 
   /** Color of the container, like transparent, white etc. */
-  @property({ reflect: true }) public accessor color: 'white' | 'milk' | null = null;
+  @property({ reflect: true }) public accessor color:
+    | 'white'
+    | 'milk'
+    | 'midnight'
+    | 'charcoal'
+    | null = null;
 
   /** The state of the component. */
   private set _state(state: StickyState) {
diff --git a/src/elements/container/sticky-bar/sticky-bar.visual.spec.ts b/src/elements/container/sticky-bar/sticky-bar.visual.spec.ts
index 04499a59d2..baeefb7f5f 100644
--- a/src/elements/container/sticky-bar/sticky-bar.visual.spec.ts
+++ b/src/elements/container/sticky-bar/sticky-bar.visual.spec.ts
@@ -21,7 +21,7 @@ import '../../title.js';
 
 describe(`sbb-sticky-bar`, () => {
   const cases = {
-    color: [undefined, 'white', 'milk'],
+    color: [undefined, 'white', 'milk', 'midnight', 'charcoal'],
     containerExpanded: [false, true],
     scrolled: [false, true],
   };

From d4e5dc1eee45aae916ba015baea4600fa97a4750 Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Tue, 14 Jan 2025 15:02:00 +0100
Subject: [PATCH 2/5] fix: review Jeri

---
 .../container/container/container.scss        |  2 +-
 .../container/container/container.stories.ts  |  2 +-
 src/elements/container/container/container.ts |  1 +
 .../container/container.visual.spec.ts        | 10 +++++---
 src/elements/container/container/readme.md    |  2 +-
 .../sticky-bar/sticky-bar.stories.ts          |  2 +-
 .../sticky-bar/sticky-bar.visual.spec.ts      | 24 +++++++++++++++++--
 7 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/src/elements/container/container/container.scss b/src/elements/container/container/container.scss
index a7a555d52f..e9294f1f4a 100644
--- a/src/elements/container/container/container.scss
+++ b/src/elements/container/container/container.scss
@@ -21,7 +21,7 @@
 :host([color='midnight']),
 :host([color='charcoal']) {
   --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
-  --sbb-container-color: white;
+  --sbb-container-color: var(--sbb-color-white);
 }
 
 :host([color='midnight']) {
diff --git a/src/elements/container/container/container.stories.ts b/src/elements/container/container/container.stories.ts
index 6fd6bc02ae..74750bd5ca 100644
--- a/src/elements/container/container/container.stories.ts
+++ b/src/elements/container/container/container.stories.ts
@@ -88,7 +88,7 @@ const defaultArgs: Args = {
 };
 
 function isDark(colorArg: string): boolean {
-  return colorArg === color.options![3] || colorArg === color.options![4];
+  return colorArg === 'midnight' || colorArg === 'charcoal';
 }
 
 const DefaultTemplate = (args: Args): TemplateResult => html`
diff --git a/src/elements/container/container/container.ts b/src/elements/container/container/container.ts
index 81034004c3..bc130cdda6 100644
--- a/src/elements/container/container/container.ts
+++ b/src/elements/container/container/container.ts
@@ -23,6 +23,7 @@ export
 @slotState()
 class SbbContainerElement extends LitElement {
   public static override styles: CSSResultGroup = style;
+
   /** Whether the container is expanded. */
   @forceType()
   @property({ type: Boolean, reflect: true })
diff --git a/src/elements/container/container/container.visual.spec.ts b/src/elements/container/container/container.visual.spec.ts
index 4389fc27f5..9e14ff3f89 100644
--- a/src/elements/container/container/container.visual.spec.ts
+++ b/src/elements/container/container/container.visual.spec.ts
@@ -19,6 +19,10 @@ import './container.js';
 const imageUrl = import.meta.resolve('../../core/testing/assets/placeholder-image.png');
 const imageBase64 = await loadAssetAsBase64(imageUrl);
 
+function isDark(color: string): boolean {
+  return color === 'midnight' || color === 'charcoal';
+}
+
 describe(`sbb-container`, () => {
   const colorCases = ['transparent', 'white', 'milk', 'midnight', 'charcoal'];
 
@@ -57,8 +61,8 @@ describe(`sbb-container`, () => {
     },
   ];
 
-  const containerContent = (): TemplateResult => html`
-    <sbb-title level="4">Example title</sbb-title>
+  const containerContent = (color?: string): TemplateResult => html`
+    <sbb-title level="4" ?negative=${!!color && isDark(color)}>Example title</sbb-title>
     <p class="sbb-text-s">The container component will give its content the correct spacing.</p>
     <p class="sbb-text-s">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
@@ -85,7 +89,7 @@ describe(`sbb-container`, () => {
         `color=${color}`,
         visualDiffDefault.with(async (setup) => {
           await setup.withFixture(
-            html`<sbb-container color=${color}>${containerContent()}</sbb-container>`,
+            html`<sbb-container color=${color}>${containerContent(color)}</sbb-container>`,
             wrapperStyles,
           );
         }),
diff --git a/src/elements/container/container/readme.md b/src/elements/container/container/readme.md
index 6028614562..1b0ec96f22 100644
--- a/src/elements/container/container/readme.md
+++ b/src/elements/container/container/readme.md
@@ -42,7 +42,7 @@ Spacing options are applied to all the container's content, including the `sbb-s
 
 The component has also five color variants that can be set using the `color` property (default: `white`).
 In `midnight` and `charcoal` variants, the slotted content text color and the focus outline color change to white,
-but it's on the consumers to correctly set the `negative` property on slotted Lyne components, if needed.
+but it's up to the consumer to correctly set the `negative` property on slotted Lyne components, if needed.
 
 ```html
 <sbb-container expanded variant="milk"> ... </sbb-container>
diff --git a/src/elements/container/sticky-bar/sticky-bar.stories.ts b/src/elements/container/sticky-bar/sticky-bar.stories.ts
index 7c1a9f3375..fc1d031caf 100644
--- a/src/elements/container/sticky-bar/sticky-bar.stories.ts
+++ b/src/elements/container/sticky-bar/sticky-bar.stories.ts
@@ -87,7 +87,7 @@ const actionGroup = (): TemplateResult => html`
 `;
 
 function isDark(colorArg: string): boolean {
-  return colorArg === containerColor.options![3] || colorArg === containerColor.options![4];
+  return colorArg === 'midnight' || colorArg === 'charcoal';
 }
 
 const containerContent = (title: string, isDark: boolean): TemplateResult => html`
diff --git a/src/elements/container/sticky-bar/sticky-bar.visual.spec.ts b/src/elements/container/sticky-bar/sticky-bar.visual.spec.ts
index baeefb7f5f..2ed25da7cd 100644
--- a/src/elements/container/sticky-bar/sticky-bar.visual.spec.ts
+++ b/src/elements/container/sticky-bar/sticky-bar.visual.spec.ts
@@ -19,6 +19,10 @@ import '../../button.js';
 import '../../link.js';
 import '../../title.js';
 
+function isDark(color: string): boolean {
+  return color === 'midnight' || color === 'charcoal';
+}
+
 describe(`sbb-sticky-bar`, () => {
   const cases = {
     color: [undefined, 'white', 'milk', 'midnight', 'charcoal'],
@@ -26,8 +30,8 @@ describe(`sbb-sticky-bar`, () => {
     scrolled: [false, true],
   };
 
-  const containerContent = (): TemplateResult => html`
-    <sbb-title level="4">Example title</sbb-title>
+  const containerContent = (color?: string): TemplateResult => html`
+    <sbb-title level="4" ?negative=${!!color && isDark(color)}>Example title</sbb-title>
     <p class="sbb-text-s">The container component will give its content the correct spacing.</p>
     <sbb-secondary-button style="margin-block-end: 0.75rem;" size="m">
       See more
@@ -80,6 +84,22 @@ describe(`sbb-sticky-bar`, () => {
       );
     });
 
+    for (const color of cases.color) {
+      it(
+        `container_color=${color}`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(
+            html` <sbb-container .color=${color}>
+              ${containerContent(color)}
+              <sbb-sticky-bar> ${actionGroup()}</sbb-sticky-bar>
+            </sbb-container>`,
+            { padding: '0' },
+          );
+          await setViewport({ width: SbbBreakpointMediumMin, height: 400 });
+        }),
+      );
+    }
+
     it(
       `unstick`,
       visualDiffDefault.with(async (setup) => {

From e88f5d45c6498bb6c1eaef058fccf257811e5927 Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Wed, 15 Jan 2025 10:22:59 +0100
Subject: [PATCH 3/5] fix: visual tests

---
 src/elements/container/sticky-bar/sticky-bar.visual.spec.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/elements/container/sticky-bar/sticky-bar.visual.spec.ts b/src/elements/container/sticky-bar/sticky-bar.visual.spec.ts
index 2ed25da7cd..667cb2cfc8 100644
--- a/src/elements/container/sticky-bar/sticky-bar.visual.spec.ts
+++ b/src/elements/container/sticky-bar/sticky-bar.visual.spec.ts
@@ -71,7 +71,7 @@ describe(`sbb-sticky-bar`, () => {
       });
 
       it(
-        visualDiffDefault.name,
+        '',
         visualDiffDefault.with((setup) => {
           setup.withSnapshotElement(root);
           setup.withPostSetupAction(async () => {
@@ -95,7 +95,6 @@ describe(`sbb-sticky-bar`, () => {
             </sbb-container>`,
             { padding: '0' },
           );
-          await setViewport({ width: SbbBreakpointMediumMin, height: 400 });
         }),
       );
     }

From f21ffa3cee8384eb555928dd11233364b3885b8d Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Wed, 15 Jan 2025 12:21:25 +0100
Subject: [PATCH 4/5] fix: stories renaming

---
 .../sticky-bar/sticky-bar.stories.ts          | 78 +++++++------------
 1 file changed, 27 insertions(+), 51 deletions(-)

diff --git a/src/elements/container/sticky-bar/sticky-bar.stories.ts b/src/elements/container/sticky-bar/sticky-bar.stories.ts
index fc1d031caf..bd6c26a3c8 100644
--- a/src/elements/container/sticky-bar/sticky-bar.stories.ts
+++ b/src/elements/container/sticky-bar/sticky-bar.stories.ts
@@ -189,112 +189,88 @@ export const Standalone: StoryObj = {
   render: Template,
 };
 
-export const ShortContent: StoryObj = {
-  render: ShortTemplate,
-  argTypes: defaultArgTypes,
-  args: defaultArgs,
-};
-
-export const ShortContentMilk: StoryObj = {
-  render: ShortTemplate,
-  argTypes: defaultArgTypes,
-  args: { ...defaultArgs, containerColor: containerColor.options![2] },
-};
-
 export const Default: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
   args: defaultArgs,
 };
 
-export const Expanded: StoryObj = {
-  render: DefaultTemplate,
-  argTypes: defaultArgTypes,
-  args: { ...defaultArgs, containerExpanded: true },
-};
-
 export const White: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, color: color.options![1] },
 };
 
-export const Milk: StoryObj = {
+export const WhiteStickyBarWithMilkContainer: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, color: color.options![2] },
-};
-
-export const Midnight: StoryObj = {
-  render: DefaultTemplate,
-  argTypes: defaultArgTypes,
-  args: { ...defaultArgs, color: color.options![3] },
+  args: { ...defaultArgs, containerColor: color.options![2], color: color.options![1] },
 };
 
-export const Charcoal: StoryObj = {
+export const WhiteWithContainerExpanded: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, color: color.options![4] },
-};
-
-export const WithContentAfter: StoryObj = {
-  render: WithContentAfterTemplate,
-  argTypes: defaultArgTypes,
-  args: { ...defaultArgs, containerColor: 'milk', color: 'white' },
+  args: { ...defaultArgs, color: color.options![1], containerExpanded: true },
 };
 
-export const MilkContainer: StoryObj = {
+export const Milk: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, containerColor: color.options![2] },
 };
 
-export const MilkContainerWhiteStickyBar: StoryObj = {
+export const MilkStickyBarWithWhiteContainer: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, containerColor: color.options![2], color: color.options![1] },
+  args: { ...defaultArgs, containerColor: color.options![1], color: color.options![2] },
 };
 
-export const MilkContainerBackgroundExpanded: StoryObj = {
+export const MilkWithContainerBackgroundExpanded: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, containerColor: color.options![2], containerBackgroundExpanded: true },
 };
 
-export const MidnightContainer: StoryObj = {
+export const Midnight: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, containerColor: color.options![3] },
 };
 
-export const MidnightContainerCharcoalStickyBar: StoryObj = {
+export const MidnightWithContainerBackgroundExpanded: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, containerColor: color.options![3], color: color.options![4] },
+  args: { ...defaultArgs, containerColor: color.options![3], containerBackgroundExpanded: true },
 };
 
-export const MidnightContainerBackgroundExpanded: StoryObj = {
+export const Charcoal: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, containerColor: color.options![3], containerBackgroundExpanded: true },
+  args: { ...defaultArgs, containerColor: color.options![4] },
 };
 
-export const CharcoalContainer: StoryObj = {
+export const CharcoalWithContainerBackgroundExpanded: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, containerColor: color.options![4] },
+  args: { ...defaultArgs, containerColor: color.options![4], containerBackgroundExpanded: true },
 };
 
-export const CharcoalContainerMidnightStickyBar: StoryObj = {
-  render: DefaultTemplate,
+export const ShortContent: StoryObj = {
+  render: ShortTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, containerColor: color.options![4], color: color.options![3] },
+  args: defaultArgs,
 };
 
-export const CharcoalContainerBackgroundExpanded: StoryObj = {
-  render: DefaultTemplate,
+export const ShortContentMilk: StoryObj = {
+  render: ShortTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, containerColor: color.options![4], containerBackgroundExpanded: true },
+  args: { ...defaultArgs, containerColor: containerColor.options![2] },
+};
+
+export const WithContentAfter: StoryObj = {
+  render: WithContentAfterTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, containerColor: 'milk', color: 'white' },
 };
 
 export const ControlStickyState: StoryObj = {

From bf2bbba84e4aca4526d5f6764d058445111d530b Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Wed, 15 Jan 2025 12:24:55 +0100
Subject: [PATCH 5/5] fix: control order

---
 src/elements/container/sticky-bar/sticky-bar.stories.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/elements/container/sticky-bar/sticky-bar.stories.ts b/src/elements/container/sticky-bar/sticky-bar.stories.ts
index bd6c26a3c8..6c3db36ad4 100644
--- a/src/elements/container/sticky-bar/sticky-bar.stories.ts
+++ b/src/elements/container/sticky-bar/sticky-bar.stories.ts
@@ -54,17 +54,17 @@ const color: InputType = {
 };
 
 const defaultArgTypes: ArgTypes = {
+  color,
   containerColor,
   containerExpanded,
   containerBackgroundExpanded,
-  color,
 };
 
 const defaultArgs: Args = {
+  color: color.options![0],
   containerColor: containerColor.options![0],
   containerExpanded: false,
   containerBackgroundExpanded: false,
-  color: color.options![0],
 };
 
 const actionGroup = (): TemplateResult => html`