feat(sbb-container, sbb-sticky-bar): add 'midnight' and 'charcoal' co…

…lor variants (#3337)
sbb-design-systems · Jan 16, 2025 · 6eee274 · 6eee274
1 parent a50ac43
commit 6eee274
Show file tree

Hide file tree

Showing 10 changed files with 217 additions and 70 deletions.
diff --git 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: 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);
 

diff --git 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 === '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: {

diff --git a/src/elements/container/container/container.ts b/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);

diff --git a/src/elements/container/container/container.visual.spec.ts b/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,16 +61,18 @@ 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
       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="margin-block-end: 3rem;">See more</sbb-secondary-button>
+    <sbb-secondary-button ?negative=${!!color && isDark(color)} style="margin-block-end: 3rem;"
+      >See more</sbb-secondary-button
+    >
   `;
 
   const backgroundImageContent = html`
@@ -85,7 +91,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
@@ -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
 

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