feat(sbb-container, sbb-sticky-bar): add new color variants

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: var(--sbb-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);
 

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 === 'midnight' || colorArg === 'charcoal';
+}
+
 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: {

src/elements/container/container/container.ts

@@ -35,7 +35,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);

src/elements/container/container/container.visual.spec.ts

@@ -19,8 +19,12 @@ 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'];
+  const colorCases = ['transparent', 'white', 'milk', 'midnight', 'charcoal'];
 
   const backgroundExpandedCases = [false, true];
 
@@ -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,
           );
         }),

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 up to the consumer 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
 

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
 

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']),