feat(styles): build the grid with tokens

.changeset/eight-singers-add.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Updated the grid gutters and margins.

.changeset/orange-cups-join.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Updated the layout containers, grid and columns documentation pages.

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

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Source, Controls } from '@storybook/blocks';
+import { Meta, Canvas, Controls } from '@storybook/blocks';
 import * as ColumnStories from './columns.stories';
 import './columns.styles.scss';
 

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

@@ -9,8 +9,8 @@ const meta: MetaExtended = {
     badges: [],
   },
   decorators: [
-    (story: StoryFn, { args, context }: StoryContext) => html`
-      <div class="p-16 column-example text-center">${story(args, context)}</div>
+    (story: StoryFn, context: StoryContext) => html`
+      <div class="p-16 column-example text-center">${story(context.args, context)}</div>
     `,
   ],
   args: {
@@ -19,7 +19,7 @@ const meta: MetaExtended = {
     justifyContent: 'justify-content-start',
     offsetItem: 'offset-1',
     renderBreakingElement: true,
-    ColumnOneOrder: 'no order',
+    ColumnOneOrder: 'no order class',
     ColumnTwoOrder: 'order-5',
     ColumnThreeOrder: 'order-1',
     ColumnWidth: 'col-4',
@@ -141,9 +141,14 @@ export const VerticalExample: Story = {
       include: ['Align Items', 'Align Item 1'],
     },
   },
+  decorators: [
+    (story: StoryFn, context: StoryContext) => html`
+      <div class="row-height">${story(context.args, context)}</div>
+    `,
+  ],
   render: (args: Args) => html`
     <div class="container">
-      <div class="row-height row ${args.alignItems}">
+      <div class="row ${args.alignItems}">
         <div class="col${args.alignSelf === 'no self alignment' ? '' : ` ${args.alignSelf}`}">
           Item 1
         </div>
@@ -250,8 +255,8 @@ export const ColumnBreakExample: Story = {
 
 export const ResetOffsetExample: Story = {
   decorators: [
-    (story: StoryFn, { args, context }: StoryContext) => html`
-      ${story(args, context)}
+    (story: StoryFn, context: StoryContext) => html`
+      ${story(context.args, context)}
       <p class="mt-16"><small>Resize the browser window to see changes.</small></p>
     `,
   ],

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

@@ -1,25 +1,22 @@
 @use '@swisspost/design-system-styles/core' as post;
+@use '../shared.styles' as *;
 
 .column-example {
   font-size: post.$font-size-sm;
 
   .row > *:not(.w-100) {
-    padding-block: 0.75rem;
-    background-color: lighten(post.$nightblue-bright, 55%);
-    border: 1px solid lighten(post.$nightblue-dark, 45%);
+    @include column-styles;
   }
 
   .row {
-    background-color: lighten(post.$nightblue-bright, 61.5%);
+    background-color: lighten(post.$petrol-dark, 75%);
   }
 
-  .row-height {
+  .row-height .row {
     min-height: 10rem;
   }
 
-  .standalone-columns > *:not(p){
-    padding-block: 0.75rem;
-    background-color: lighten(post.$nightblue-bright, 55%);
-    border: 1px solid lighten(post.$nightblue-dark, 45%);
+  .standalone-columns > *:not(p) {
+    @include column-styles;
   }
-}
+}

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

@@ -1,47 +1,34 @@
 import { Meta, Source } from '@storybook/blocks';
-import { formatAsMap } from '@/utils/sass-export';
-import { ContainersTable, SCSS_VARIABLES } from './containers.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">
+  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 is two types of containers:
 
-<ContainersTable />
+## Container
 
-## Default container
-
-Our default `.container` class is a responsive, fixed-width container.
+The `.container` adapts its width based on the viewport size, but it will not exceed 1280px.
+This ensures content stays centered and does not stretch too wide on large screens.
 
 <Source code={`<div class="container">
-  <!-- Content here -->
+  <!-- Content goes here -->
 </div>`} language="scss"/>
 
-## Fluid containers
+## Fluid Container
 
-Use `.container-fluid` for a full width container, spanning the entire width of the viewport on every breakpoint.
+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.
 
 <Source code={`<div class="container-fluid">
-  <!-- Content here -->
+  <!-- Content goes 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>

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

@@ -3,7 +3,6 @@
 @use '../shared.module' as shared;
 
 :export {
-  // Variables used in the spec table (some variables used on the page are defined in the shared module)
   @each $breakpoint, $value in post.$grid-breakpoints {
     container_#{$breakpoint}_max-width: map.get(post.$container-max-widths, $breakpoint) or none;
     container_#{$breakpoint}_padding: map.get(post.$grid-container-padding, $breakpoint);
@@ -12,19 +11,4 @@
       $breakpoint
     );
   }
-
-  // Variables to expose under sass variables section
-  @each $breakpoint, $value in post.$grid-breakpoints {
-    variables_container-max-widths_#{$breakpoint}: map.get(post.$container-max-widths, $breakpoint);
-    variables_grid-container-padding_#{$breakpoint}: map.get(
-        post.$grid-container-padding,
-        $breakpoint
-      ) or
-      none;
-    variables_grid-container-fluid-padding_#{$breakpoint}: map.get(
-        post.$grid-container-fluid-padding,
-        $breakpoint
-      ) or
-      none;
-  }
 }

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

@@ -1,18 +1,18 @@
 import { Canvas, Meta, Source } from '@storybook/blocks';
-import { formatAsMap } from '@/utils/sass-export';
-import { GridTable, SCSS_VARIABLES } from './grid.blocks';
-import * as GridStories from './grid.stories';
-import './grid.styles.scss';
+import { parse } from '@/utils/sass-export';
+import scss from '../shared.module.scss';
 import SampleContainer from './grid-container.sample.html?raw';
-import SampleScssMixins from './grid-scss-mixins.sample.scss?raw';
+import * as GridStories from './grid.stories';
+
+export const BREAKPOINT_COUNT = parse(scss)['breakpoint-count'];
 
 <Meta of={GridStories} />
 
 # Grid system
 
 <div className="lead">
   Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a
-  twelve column system, {SCSS_VARIABLES['breakpoint-count']} default responsive tiers,
+  twelve column system, {BREAKPOINT_COUNT} default responsive tiers,
   Sass variables and mixins, and dozens of predefined classes.
 </div>
 
@@ -35,7 +35,7 @@ The above example creates three equal-width columns across all devices and viewp
 
 Breaking it down, here’s how the grid system comes together:
 
-- **Our grid supports <span>{SCSS_VARIABLES['breakpoint-count']}</span> responsive breakpoints.** Breakpoints are based on `min-width` media queries, meaning they affect that breakpoint and all those above it. This means you can control container and column sizing and behavior by each breakpoint.
+- **Our grid supports <span>{BREAKPOINT_COUNT}</span> responsive breakpoints.** Breakpoints are based on `min-width` media queries, meaning they affect that breakpoint and all those above it. This means you can control container and column sizing and behavior by each breakpoint.
 - **Container (e.g. `.container`) center and horizontally pad your content.**<br/>
   Don't nest `.containers`, but use them (for example) as a wrapper for your content area:
   <Source language="html" dark code={SampleContainer}></Source>
@@ -44,13 +44,6 @@ Breaking it down, here’s how the grid system comes together:
 - **Gutters are also responsive and customizable.** Gutter classes are available across all breakpoints, with all the same sizes as our `margin` and `padding` spacing. Change horizontal gutters with `.gx-*` classes, vertical gutters with `.gy-*`, or all gutters with `.g-*` classes. `.g-0` is also available to remove gutters.
 - **Sass variables, maps, and mixins power the grid.** If you don’t want to use the predefined grid classes, you can use the grid’s source Sass to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.
 
-## Grid options
-
-Our grid system can adapt across all <span>{SCSS_VARIABLES['breakpoint-count']}</span> breakpoints.
-Each of these breakpoints have their own specifications, a unique class prefix, and some modifiers.
-
-<GridTable />
-
 ## Auto-layout columns
 
 Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like `.col-sm-6`.
@@ -75,7 +68,7 @@ Use `.col-{breakpoint}-auto` classes to size columns based on the natural width
 
 ## Responsive classes
 
-Our grid includes <span>{SCSS_VARIABLES['breakpoint-count']}</span> tiers of predefined classes for building complex responsive layouts.
+Our grid includes <span>{BREAKPOINT_COUNT}</span> tiers of predefined classes for building complex responsive layouts.
 
 ### All breakpoints
 
@@ -116,25 +109,3 @@ To nest your content with the default grid, add a new `.row` and set of `.col-*`
 Note: the style in this example is applied to the column to visually better understand nesting. However, it's recommended to apply the style on a child element of the column.
 
 <Canvas of={GridStories.Nested} />
-
-## CSS
-
-When using our source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.
-
-### Sass variables
-
-Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
-
-<Source
-  language="scss"
-  dark
-  code={Object.entries(SCSS_VARIABLES.variables)
-    .map(([key, value]) => `$${key}: ${formatAsMap(value)};`)
-    .join('\n')}
-></Source>
-
-### Sass mixins
-
-Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
-
-<Source language="scss" dark code={SampleScssMixins}></Source>