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

sbb-design-systems · Jan 9, 2025 · f430ec6 · f430ec6
1 parent 6ad135e
commit f430ec6
Show file tree

Hide file tree

Showing 10 changed files with 174 additions and 37 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: 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 === 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
@@ -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
@@ -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
@@ -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
@@ -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']),

diff --git 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,