feat: add default and overscroll backgrounds

.changeset/weak-jars-rhyme.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added color palettes to easily apply colors to a page section using predefined color sets.

packages/documentation/.storybook/addons/styles-switcher/StylesSwitcher.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { IconButton, WithTooltip } from '@storybook/components';
 
-const THEMES = ['Post'] as const;
+const THEMES = ['Post', 'Cargo'] as const;
 const CHANNELS = ['External', 'Internal'] as const;
 const SCHEMES = ['Light', 'Dark'] as const;
 
@@ -15,18 +15,6 @@ const possibleStylesheets = THEMES.flatMap(theme => {
   return CHANNELS.map(channel => getStylesheetUrl(theme, channel));
 });
 
-/*
- * Backgrounds
- */
-const backgroundClasses: { [key in (typeof SCHEMES)[number]]: string } = {
-  Light: 'bg-white',
-  Dark: 'bg-dark',
-};
-const getBackgroundClass = (scheme: string) => {
-  return scheme in backgroundClasses ? backgroundClasses[scheme] : '';
-};
-const possibleBackgrounds = SCHEMES.map(scheme => getBackgroundClass(scheme));
-
 /*
  * Local storage access
  */
@@ -113,9 +101,8 @@ function StylesSwitcher() {
     if (!stories) return;
 
     stories.forEach(story => {
-      story.classList.remove(...possibleBackgrounds);
-      story.classList.add(getBackgroundClass(currentScheme));
       story.setAttribute('data-color-scheme', currentScheme.toLowerCase());
+      if (!story.classList.contains('palette-default')) story.classList.add('palette-default');
     });
   }, [stories, currentScheme]);
 

packages/documentation/.storybook/styles/preview.scss

@@ -6,6 +6,8 @@
 
 #storybook-root,
 #storybook-docs {
+  background-color: white;
+
   .sbdocs-content .container >,
   .sbdocs-content .container > post-tabs > post-tab-panel >,
   .sbdocs-content .container > migration-global-state {

packages/documentation/cypress/e2e/components/palette.cy.ts

@@ -0,0 +1,13 @@
+describe('Palette', () => {
+  describe('Accessibility', () => {
+    beforeEach(() => {
+      cy.visit('/iframe.html?id=snapshots--palette');
+      cy.get('.palette-default', { timeout: 30000 }).should('be.visible');
+      cy.injectAxe();
+    });
+
+    it('Has no detectable a11y violations on load for all variants', () => {
+      cy.checkA11y('#root-inner');
+    });
+  });
+});

packages/documentation/cypress/snapshots/components/palette.snapshot.ts

@@ -0,0 +1,7 @@
+describe('Palette', () => {
+  it('default', () => {
+    cy.visit('/iframe.html?id=snapshots--palette');
+    cy.get('.palette-default', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Palettes', { widths: [1440] });
+  });
+});

packages/documentation/cypress/snapshots/utilities/accent.snapshot.ts

@@ -0,0 +1,7 @@
+describe('Accent', () => {
+  it('accent', () => {
+    cy.visit('/iframe.html?id=snapshots--accent');
+    cy.get('.accent-default', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Accents', { widths: [1440] });
+  });
+});

packages/documentation/src/stories/foundation/palette/palette.docs.mdx

@@ -0,0 +1,27 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as paletteStories from './palette.stories';
+
+<Meta of={paletteStories} />
+
+<div className="docs-title">
+  # Palettes
+</div>
+
+<div className="lead">
+  Easily apply colors to a section of your page using predefined color sets.
+</div>
+
+There are four different palettes:
+- **Default** - The standard palette used when no other palette is specified.
+- **Alternate** - Used to differentiate alternating sections from the body, without strong emphasis or highlighting.
+- **Accent** - A complementary color used for highlights and emphasis.
+- **Brand** - The primary color for the brand.
+
+Palettes may also include a specific text color that is different from the body color.
+You can apply this text color to any element by using the `.palette-text` class.
+
+<Canvas sourceState="shown" of={paletteStories.Default} />
+
+<div className="hide-col-default">
+  <Controls of={paletteStories.Default} />
+</div>

packages/documentation/src/stories/foundation/palette/palette.snapshot.stories.ts

@@ -0,0 +1,24 @@
+import type { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import meta from './palette.stories';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const Palette: Story = {
+  render: () => {
+    return html`${['light', 'dark'].map(
+      scheme => html`
+        <div class="palette-default p-24" data-color-scheme=${scheme}>
+          ${meta.argTypes.palette.options.map(palette => meta.render({ palette }))}
+        </div>
+      `,
+    )}`;
+  },
+};

packages/documentation/src/stories/foundation/palette/palette.stories.ts

@@ -0,0 +1,57 @@
+import { Args, Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+const meta: Meta = {
+  id: '43481535-5b39-40b5-a273-478b07dc3b31',
+  title: 'Foundations/Palettes',
+  tags: ['package:HTML'],
+  render: renderPalette,
+  parameters: {
+    palettes: [],
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=18172-73431&mode=design&t=3lniLiZhl7q9Gqgn-4',
+    },
+  },
+  args: {
+    palette: 'default',
+  },
+  argTypes: {
+    palette: {
+      name: 'Palette',
+      description: 'The set of colors used for a section of the page.',
+      control: {
+        type: 'radio',
+        labels: {
+          default: 'Default',
+          alternate: 'Alternate',
+          brand: 'Brand',
+          accent: 'Accent',
+        },
+      },
+      options: ['default', 'alternate', 'accent', 'brand'],
+      table: {
+        category: 'General',
+      },
+    },
+  },
+};
+
+export default meta;
+
+// RENDERER
+function renderPalette(args: Args) {
+  return html`
+    <div class="palette-${args.palette} p-24">
+      <p>I use the main body color.</p>
+      <p style="palette-text">
+        I use a specific color from the palette (it might be the same as the body color).
+      </p>
+    </div>
+  `;
+}
+
+// STORIES
+type Story = StoryObj;
+
+export const Default: Story = {};

packages/styles/gulpfile.js

@@ -27,7 +27,7 @@ gulp.task('copy', () => {
  * See https://github.com/pnpm/pnpm/issues/8338 for more information and reproduction
  */
 gulp.task('temporarily-copy-token-files', () => {
-  return gulp.src(['../tokens/dist/*.scss']).pipe(gulp.dest('./src/tokens/temp'));
+  return gulp.src(['../tokens/dist/**/*.scss']).pipe(gulp.dest('./src/tokens/temp'));
 });
 
 /**

packages/styles/src/cargo-external.scss

@@ -0,0 +1,8 @@
+@use './tokens/schemes';
+@use './tokens/device';
+@use './tokens/external';
+@use './tokens/cargo-theme';
+@use 'palettes/cargo-palettes';
+@use 'utilities/index';
+@use './elements';
+@use './components';

packages/styles/src/cargo-internal.scss

@@ -0,0 +1,8 @@
+@use './tokens/schemes';
+@use './tokens/device';
+@use './tokens/internal';
+@use './tokens/cargo-theme';
+@use 'palettes/cargo-palettes';
+@use 'utilities/index';
+@use './elements';
+@use './components';

packages/styles/src/cargo-tokens-external.scss

@@ -0,0 +1,8 @@
+@use 'sass:meta';
+
+@layer design-system {
+  @include meta.load-css('./tokens/schemes');
+  @include meta.load-css('./tokens/device');
+  @include meta.load-css('./tokens/external');
+  @include meta.load-css('./tokens/cargo-theme');
+}

packages/styles/src/cargo-tokens-internal.scss

@@ -0,0 +1,8 @@
+@use 'sass:meta';
+
+@layer design-system {
+  @include meta.load-css('./tokens/schemes');
+  @include meta.load-css('./tokens/device');
+  @include meta.load-css('./tokens/internal');
+  @include meta.load-css('./tokens/cargo-theme');
+}

packages/styles/src/elements/body.scss

@@ -1,12 +1,22 @@
 @use 'sass:map';
+@use '../variables/color';
 @use '../functions/tokens';
 @use '../tokens/elements';
+@use '../tokens/palettes';
 
 tokens.$default-map: elements.$post-body;
 
 // Resets type
 @use '../components/fonts';
 
+html {
+  // This in combination with the default background color on the body creates a nice effect when overscrolling
+  // in Safari and Chrome on a Mac because the header and the footer are yellow, the yellow surface stretches
+  // beyond the body. If this is not yellow, overscrolling reveals a white background and the header
+  // suddenly seems in the middle of the page.
+  background-color: color.$yellow;
+}
+
 body {
   font-family: tokens.get('body-font-family');
   font-size: tokens.get('body-font-size');

packages/styles/src/palettes/_mixins.scss

@@ -0,0 +1,56 @@
+@use 'sass:map';
+@use 'sass:meta';
+
+@use '../functions/contrast';
+@use '../placeholders/schemes';
+
+@use '../functions/tokens';
+@use '../tokens/elements';
+@use '../tokens/palettes';
+
+@use './variables' as *;
+
+@mixin generate-palette-class($name, $theme) {
+  .palette-#{$name} {
+    &,
+    &:is([data-color-scheme='light'], [data-color-scheme='light'] *) {
+      @include palette-styles($name, $theme, 'light', $redefine-tokens: true);
+    }
+
+    &:is([data-color-scheme='dark'], [data-color-scheme='dark'] *) {
+      @include palette-styles($name, $theme, 'dark', $redefine-tokens: true);
+    }
+  }
+}
+
+@mixin default-palette-styles($theme) {
+  &:not([data-color-scheme='dark']) {
+    @include palette-styles($default-palette, $theme, 'light');
+  }
+
+  &[data-color-scheme='dark'] {
+    @include palette-styles($default-palette, $theme, 'dark');
+  }
+}
+
+@mixin palette-styles($name, $theme, $scheme, $redefine-tokens: false) {
+  $palette: map.get(meta.module-variables(palettes), '#{$theme}-#{$scheme}');
+
+  @if ($palette) {
+    --post-palette-fg: #{tokens.get('palettes-color-#{$name}-fg', palettes.$post-palettes)};
+    --post-palette-bg: #{tokens.get('palettes-color-#{$name}-bg', palettes.$post-palettes)};
+    background-color: var(--post-palette-bg) !important;
+
+    @if ($redefine-tokens == true) {
+      // redefining the body color is required so that the new color scheme is taken into account
+      color: tokens.get('body-color', elements.$post-body);
+
+      $bg-scheme: tokens.get('helper-color-#{$name}-bg-scheme', $palette);
+      @if ($bg-scheme == 'light') {
+        @extend %color-scheme-light;
+      } @else {
+        @extend %color-scheme-dark;
+      }
+    }
+  }
+}

packages/styles/src/palettes/_variables.scss

@@ -0,0 +1,2 @@
+$default-palette: 'default';
+$palettes: $default-palette, 'alternate', 'brand', 'accent';

packages/styles/src/palettes/cargo-palettes.scss

@@ -0,0 +1,10 @@
+@use 'mixins' as *;
+@use 'variables' as *;
+
+body {
+  @include default-palette-styles('cargo');
+}
+
+@each $palette in $palettes {
+  @include generate-palette-class($palette, 'cargo');
+}

packages/styles/src/palettes/post-palettes.scss

@@ -0,0 +1,10 @@
+@use 'mixins' as *;
+@use 'variables' as *;
+
+body {
+  @include default-palette-styles('post');
+}
+
+@each $palette in $palettes {
+  @include generate-palette-class($palette, 'post');
+}

packages/styles/src/post-external.scss

@@ -1,4 +1,8 @@
-@use './post-tokens-external';
-@use './utilities';
+@use './tokens/schemes';
+@use './tokens/device';
+@use './tokens/external';
+@use './tokens/post-theme';
+@use 'palettes/post-palettes';
+@use 'utilities/index';
 @use './elements';
 @use './components';

packages/styles/src/post-internal.scss

@@ -1,4 +1,8 @@
-@use './post-tokens-internal';
-@use './utilities';
+@use './tokens/schemes';
+@use './tokens/device';
+@use './tokens/internal';
+@use './tokens/post-theme';
+@use 'palettes/post-palettes';
+@use 'utilities/index';
 @use './elements';
 @use './components';

packages/styles/src/tokens/_cargo-theme.scss

@@ -0,0 +1,8 @@
+@use './temp/theme' as themes;
+
+@use './core';
+@use './../mixins/tokens';
+
+:root {
+  @include tokens.from(themes.$post-cargo);
+}

packages/styles/src/tokens/_palettes.scss

@@ -0,0 +1,5 @@
+@use './temp/palettes/post-light' as post-light;
+
+@forward './temp/palettes';
+
+$post-light: post-light.$post-palettes;

packages/styles/src/utilities/_variables.scss

@@ -251,5 +251,10 @@ $utilities: (
     values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex
       none,
   ),
+  'accent-text': (
+    css-var: true,
+    css-variable-name: accent-fg,
+    values: null,
+  ),
   // IMPORTANT: When adding new utilities here, please ensure to remove the corresponding bootstrap utilities in `src/themes/bootstrap/_utilities.scss`.
 );

packages/tokens/_build/configs/index.js

@@ -1,2 +1,3 @@
 import './all.js';
+import './palettes.js';
 import './tailwind.js';