improve grid and column docs

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.styles.scss

@@ -1,5 +1,5 @@
 @use '@swisspost/design-system-styles/core' as post;
-@use '../column.styles' as *;
+@use '../shared.styles' as *;
 
 .column-example {
   font-size: post.$font-size-sm;
@@ -9,14 +9,14 @@
   }
 
   .row {
-    background-color: lighten(post.$nightblue-bright, 63%);
+    background-color: lighten(post.$petrol-dark, 75%);
   }
 
   .row-height .row {
     min-height: 10rem;
   }
 
-  .standalone-columns > *:not(p){
+  .standalone-columns > *:not(p) {
     @include column-styles;
   }
 }

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

@@ -1,11 +1,10 @@
 import { Canvas, Meta, Source } from '@storybook/blocks';
 import { parse } from '@/utils/sass-export';
-import scss from '../breakpoints.module.scss';
+import scss from '../shared.module.scss';
 import SampleContainer from './grid-container.sample.html?raw';
 import * as GridStories from './grid.stories';
-import './grid.styles.scss';
 
-export const BREAKPOINT_COUNT = Object.keys(parse(scss).breakpoint).length;
+export const BREAKPOINT_COUNT = parse(scss)['breakpoint-count'];
 
 <Meta of={GridStories} />
 

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

@@ -1,6 +1,7 @@
 import { StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { MetaExtended } from '@root/types';
+import './grid.styles.scss';
 
 const meta: MetaExtended = {
   id: '7240f2ef-216a-490e-9bd8-c0cef19f7b31',
@@ -9,9 +10,9 @@ const meta: MetaExtended = {
     badges: [],
   },
   decorators: [
-    (story: StoryFn, { args, context }: StoryContext) => html`
-      <div class="grid-example text-center ${args?.additionalDecoratorsClasses}">
-        ${story(args, context)}
+    (story: StoryFn, context: StoryContext) => html`
+      <div class="grid-example text-center ${context.args?.additionalDecoratorsClasses}">
+        ${story(context.args, context)}
       </div>
     `,
   ],

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

@@ -1,5 +1,5 @@
 @use '@swisspost/design-system-styles/core' as post;
-@use '../column.styles' as *;
+@use '../shared.styles' as *;
 
 .grid-example {
   font-size: post.$font-size-sm;

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

@@ -0,0 +1,8 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+@mixin column-styles {
+  background: linear-gradient(lighten(post.$nightblue-bright, 60%), lighten(post.$nightblue-bright, 60%)), linear-gradient(lighten(post.$nightblue-bright, 65%), lighten(post.$nightblue-bright, 65%));
+  background-clip: content-box, border-box;
+  border: 1px solid lighten(post.$nightblue-dark, 60%);
+  line-height: 3;
+}