chore(styles): tokenize containers

.changeset/plenty-taxis-hear.md

@@ -0,0 +1,26 @@
+---
+'@swisspost/design-system-styles': major
+'@swisspost/design-system-documentation': patch
+---
+
+Removed the `rg` and `xxl` grid breakpoints, reducing the grid to 5 breakpoints instead of the previous 7. This change affects all CSS classes tied to specific breakpoints (e.g., `col-rg-2`, `m-xxl-4`).
+
+**Previous Breakpoints**:
+- `xs: 0px`
+- `sm: 400px`
+- `rg: 600px`
+- `md: 780px`
+- `lg: 1024px`
+- `xl: 1280px`
+- `xxl: 1440px`
+
+**New Breakpoints**:
+- `xs: 0px`
+- `sm: 600px`
+- `md: 780px`
+- `lg: 1024px`
+- `xl: 1280px`
+
+To maintain compatibility with the updated grid system, you need to update your code by replacing any `*-rg-*` classes with `*-sm-*`, and any `*-xxl-*` classes with `*-xl-*`. For example:
+- `col-rg-2` → `col-sm-2`
+- `m-xxl-4` → `m-xl-4`

packages/documentation/cypress/snapshots/foundation/layout/containers.snapshot.ts

@@ -0,0 +1,9 @@
+describe('Containers', () => {
+  it('default', () => {
+    cy.visit('/iframe.html?id=snapshots--containers');
+    cy.get('.container', { timeout: 30000 }).should('be.visible');
+
+    // takes a screenshot for each breakpoint
+    cy.percySnapshot('Containers', { widths: [320, 720, 960, 1080, 1440] });
+  });
+});

packages/documentation/src/stories/foundation/layout/containers/containers.docs.mdx

@@ -1,47 +1,31 @@
-import { Meta, Source } from '@storybook/blocks';
-import { formatAsMap } from '@/utils/sass-export';
-import { ContainersTable, SCSS_VARIABLES } from './containers.blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks';
 import * as ContainerStories from './containers.stories';
 
 <Meta of={ContainerStories} />
 
 # Containers
 
-<p className="lead">Containers are a fundamental building block of our Design-System that contain, pad, and align your content within a given device or viewport. They are required, when using our grid-system. While containers can be nested, most layouts do not require a nested container.</p>
+<div className="lead">
+  Containers are essential layout elements ensuring content is aligned and properly padded across all devices and viewports.
+</div>
 
-We can distinguish between two different container types:
+<div className="alert alert-info my-24">
+  Containers are required when using the <a href="/?path=/docs/7240f2ef-216a-490e-9bd8-c0cef19f7b31--docs">grid system</a>.
+</div>
 
-- <code>.container</code>, which defines a <code>max-width</code> on some breakpoints.
-- <code>.container-fluid</code>, which is <code>width: 100%</code> at all breakpoints.
+There are two types of containers. The only difference between them is how they behave on wider screens.
+To see the difference, click the **"View full screen"** button in the examples below.
 
-<ContainersTable />
+## Container
 
-## Default container
+The `.container` adapts its width based on the viewport size, but it will not exceed 1200px.
+This ensures content stays centered and does not stretch too wide on large screens.
 
-Our default `.container` class is a responsive, fixed-width container.
+<Canvas sourceState="shown" of={ContainerStories.Container} />
 
-<Source code={`<div class="container">
-  <!-- Content here -->
-</div>`} language="scss"/>
+## Fluid Container
 
-## Fluid containers
+The `.container-fluid` spans the entire width of the viewport, regardless of its size.
+Use this for layouts where the content should stretch edge-to-edge, even on large screens.
 
-Use `.container-fluid` for a full width container, spanning the entire width of the viewport on every breakpoint.
-
-<Source code={`<div class="container-fluid">
-  <!-- Content here -->
-</div>`} language="scss"/>
-
-## CSS
-
-When using our source Sass files, you have the option of using Sass variables for customization (not recommended).
-
-### Sass variables
-
-<Source
-  language="scss"
-  dark
-  code={Object.entries(SCSS_VARIABLES.variables)
-    .map(([key, value]) => `$${key}: ${formatAsMap(value)};`)
-    .join('\n')}
-></Source>
+<Canvas sourceState="shown" of={ContainerStories.ContainerFluid} />

packages/documentation/src/stories/foundation/layout/containers/containers.snapshot.stories.ts

@@ -0,0 +1,26 @@
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
+import meta from './containers.stories';
+import { html } from 'lit';
+import { StoryFn } from '@storybook/web-components';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const Containers: Story = {
+  render: (_args: Args, context: StoryContext) => {
+    return html`${['container', 'container-fluid'].map(containerClass =>
+      meta.render({ containerClass }, context),
+    )}`;
+  },
+  decorators: [
+    (story: StoryFn, context: StoryContext) => html`
+      <div class="container-snapshots">${story(context.args, context)}</div>
+    `,
+  ],
+};

packages/documentation/src/stories/foundation/layout/containers/containers.stories.ts

@@ -1,16 +1,36 @@
-import type { StoryObj } from '@storybook/web-components';
+import type { Args, StoryObj } from '@storybook/web-components';
+import { StoryContext, StoryFn } from '@storybook/web-components';
 import { MetaExtended } from '@root/types';
+import { html } from 'lit';
+import './containers.styles.scss';
 
 const meta: MetaExtended = {
   id: 'a4ca9660-bb4a-4cc7-adfd-84767382ac03',
   title: 'Foundations/Layout/Containers',
-  parameters: {
-    badges: [],
-  },
+  render: (args: Args) => html`
+    <div class=${args.containerClass}>
+      <!-- Content goes here -->
+    </div>
+  `,
+  decorators: [
+    (story: StoryFn, context: StoryContext) => html`
+      <div class="container-examples">${story(context.args, context)}</div>
+    `,
+  ],
 };
 
 export default meta;
 
 type Story = StoryObj;
 
-export const Default: Story = {};
+export const Container: Story = {
+  args: {
+    containerClass: 'container',
+  },
+};
+
+export const ContainerFluid: Story = {
+  args: {
+    containerClass: 'container-fluid',
+  },
+};

packages/documentation/src/stories/foundation/layout/containers/containers.styles.scss

@@ -0,0 +1,39 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+$margin-bg: #F4FFA2;
+$padding-bg: #B8E2F3;
+$content-bg: #A69CE1;
+$content-fg: #59718B;
+
+.container-examples {
+  background: $margin-bg;
+
+  &:is(.sb-main-padded *) {
+    margin-inline: -1rem;
+  }
+
+  .container,
+  .container-fluid {
+    background: linear-gradient($padding-bg, $padding-bg), linear-gradient($content-bg, $content-bg);
+    background-clip: content-box, border-box;
+    color: $content-fg;
+
+    &::before {
+      content: "Content goes here";
+    }
+  }
+}
+
+.container-snapshots {
+  .container {
+    &::before {
+      content: "Container";
+    }
+  }
+
+  .container-fluid {
+    &::before {
+      content: "Container fluid";
+    }
+  }
+}

packages/styles/src/basics.scss

@@ -1,5 +1,6 @@
 @forward './variables/options';
 
+@use 'layout';
 @use 'elements';
 @use 'utilities';
 

packages/styles/src/cargo-external.scss

@@ -3,6 +3,7 @@
 @use './tokens/external';
 @use './tokens/cargo-theme';
 @use './palettes/cargo-palettes';
+@use './layout';
 @use './utilities';
 @use './elements';
 @use './components';

packages/styles/src/cargo-internal.scss

@@ -3,6 +3,7 @@
 @use './tokens/internal';
 @use './tokens/cargo-theme';
 @use './palettes/cargo-palettes';
+@use './layout';
 @use './utilities';
 @use './elements';
 @use './components';

packages/styles/src/components/grid.scss

@@ -4,53 +4,16 @@
 
 @use './../themes/bootstrap/core' as *;
 @use './../themes/bootstrap/grid' as bg;
-@use './../themes/bootstrap/containers' as bc;
 
 @use './../variables/commons';
 @use './../variables/spacing';
 @use './../variables/grid';
 
-$container-padding-x-cache: 0;
-$container-fluid-padding-x-cache: 0;
 $gutter-x-cache: 0;
 
-.container {
-  padding-inline: var(--post-container-padding-x);
-}
-
-.container-fluid {
-  padding-inline: var(--post-container-fluid-padding-x);
-}
-
 @each $breakpoint in grid.$grid-breakpoints-list {
-  $container-padding-x: map.get(grid.$grid-container-padding, $breakpoint);
-  $container-fluid-padding-x: map.get(grid.$grid-container-fluid-padding, $breakpoint);
   $gutter-x: map.get(grid.$grid-gutter-x, $breakpoint);
 
-  @if ($container-padding-x-cache != $container-padding-x) {
-    .container {
-      @if $breakpoint == 'xs' {
-        --post-container-padding-x: #{$container-padding-x};
-      } @else {
-        @include media-breakpoint-up($breakpoint) {
-          --post-container-padding-x: #{$container-padding-x};
-        }
-      }
-    }
-  }
-
-  @if ($container-fluid-padding-x-cache != $container-fluid-padding-x) {
-    .container-fluid {
-      @if $breakpoint == 'xs' {
-        --post-container-fluid-padding-x: #{$container-fluid-padding-x};
-      } @else {
-        @include media-breakpoint-up($breakpoint) {
-          --post-container-fluid-padding-x: #{$container-fluid-padding-x};
-        }
-      }
-    }
-  }
-
   @if ($gutter-x-cache != $gutter-x) {
     .row {
       @if $breakpoint == 'xs' {
@@ -62,9 +25,6 @@ $gutter-x-cache: 0;
       }
     }
   }
-
-  $container-padding-x-cache: $container-padding-x;
-  $container-fluid-padding-x-cache: $container-fluid-padding-x;
   $gutter-x-cache: $gutter-x;
 }
 

packages/styles/src/index.scss

@@ -1,5 +1,6 @@
 @forward './variables/options';
 
+@use './layout';
 @use './utilities';
 @use './elements';
 @use './components';

packages/styles/src/intranet.scss

@@ -1,5 +1,6 @@
 @forward './variables/options';
 
+@use 'layout';
 @use 'utilities';
 @use 'elements';
 @use 'components';

packages/styles/src/layout/_containers.scss

@@ -0,0 +1,32 @@
+@use 'sass:map';
+
+@use '../functions/tokens';
+@use '../mixins/media';
+@use '../tokens/components';
+@use '../variables/breakpoints';
+
+tokens.$default-map: components.$post-container;
+
+.container,
+.container-fluid {
+  width: 100%;
+  margin-inline: auto;
+
+  @each $breakpoint in map.keys(breakpoints.$grid-breakpoints) {
+    @include media.min($breakpoint) {
+      $gutter: tokens.get('grid-gutter-#{$breakpoint}');
+      $padding: tokens.get('grid-padding-#{$breakpoint}');
+
+      --post-grid-gutter-x: #{$gutter};
+
+      // The `.row` has a negative margin equal to half the gutter size.
+      // To prevent content from overflowing, the container needs to have
+      // a padding of at least half the gutter size to offset this negative margin.
+      padding-inline: max(#{$padding}, calc(0.5 * var(--post-grid-gutter-x)));
+    }
+  }
+}
+
+.container {
+  max-width: tokens.get('grid-max-width');
+}

packages/styles/src/layout/index.scss

@@ -0,0 +1 @@
+@forward './containers';

packages/styles/src/post-external.scss

@@ -3,6 +3,7 @@
 @use './tokens/external';
 @use './tokens/post-theme';
 @use './palettes/post-palettes';
+@use './layout';
 @use './utilities';
 @use './elements';
 @use './components';

packages/styles/src/post-internal.scss

@@ -3,6 +3,7 @@
 @use './tokens/internal';
 @use './tokens/post-theme';
 @use './palettes/post-palettes';
+@use './layout';
 @use './utilities';
 @use './elements';
 @use './components';