From d7e11728f4b352f37d44f785f07a4c593e083bfc Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <66249294+myrta2302@users.noreply.github.com>
Date: Fri, 13 Dec 2024 16:45:24 +0200
Subject: [PATCH] feat(styles): updated sizing utility (no tokens)  (#4012)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
Co-authored-by: Oliver Schürch <oliver.schuerch@post.ch>
---
 .changeset/soft-pugs-dream.md                 |   6 +
 .changeset/violet-poems-attend.md             |   6 +
 .../snapshots/utilities/sizing.snapshot.ts    |  22 +++
 .../select-custom-basic.sample.html           |   2 +-
 .../select-custom-floating.sample.html        |   2 +-
 .../components/slider/slider.stories.ts       |   2 +-
 .../foundations/logo/logo.snapshot.stories.ts |   2 +-
 .../stories/foundations/logo/logo.stories.ts  |   4 +-
 .../stories/utilities/sizing/sizing.docs.mdx  |  61 +++----
 .../utilities/sizing/sizing.module.scss       |  18 +-
 .../sizing/sizing.snapshot.stories.ts         | 139 ++++++++++++++++
 .../utilities/sizing/sizing.stories.ts        | 156 ++++++++++--------
 .../utilities/sizing/sizing.styles.scss       |  30 +++-
 .../utilities/spacing/spacing.stories.ts      |   2 +-
 packages/documentation/src/utils/naming.ts    |   3 +
 packages/migrations/src/utils/constants.ts    |   1 +
 packages/styles/src/components/sizing.scss    |  21 +--
 .../src/themes/bootstrap/_utilities.scss      |  13 ++
 packages/styles/src/utilities/_variables.scss | 121 ++++++++++++++
 packages/styles/src/variables/_index.scss     |   1 +
 packages/styles/src/variables/_sizing.scss    |  69 ++++++++
 packages/styles/src/variables/_spacing.scss   |  13 --
 22 files changed, 548 insertions(+), 146 deletions(-)
 create mode 100644 .changeset/soft-pugs-dream.md
 create mode 100644 .changeset/violet-poems-attend.md
 create mode 100644 packages/documentation/cypress/snapshots/utilities/sizing.snapshot.ts
 create mode 100644 packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts
 create mode 100644 packages/documentation/src/utils/naming.ts
 create mode 100644 packages/styles/src/variables/_sizing.scss

diff --git a/.changeset/soft-pugs-dream.md b/.changeset/soft-pugs-dream.md
new file mode 100644
index 0000000000..10b4189721
--- /dev/null
+++ b/.changeset/soft-pugs-dream.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor 
+---
+
+Updated the utility classes for sizing.
diff --git a/.changeset/violet-poems-attend.md b/.changeset/violet-poems-attend.md
new file mode 100644
index 0000000000..cfec36d36d
--- /dev/null
+++ b/.changeset/violet-poems-attend.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Implemented new pixel based sizes.
diff --git a/packages/documentation/cypress/snapshots/utilities/sizing.snapshot.ts b/packages/documentation/cypress/snapshots/utilities/sizing.snapshot.ts
new file mode 100644
index 0000000000..e539797cc7
--- /dev/null
+++ b/packages/documentation/cypress/snapshots/utilities/sizing.snapshot.ts
@@ -0,0 +1,22 @@
+describe('Sizing', () => {
+  // Parent based sizing classes [e.g. .quarter, .third, .half, etc.]
+  it('Sizing Percentages', () => {
+    cy.visit('/iframe.html?id=snapshots--percentage-sizing');
+    cy.get('.snapshot', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Sizing', { widths: [320, 1440] });
+  });
+
+  // Percentage sizing classes relative to viewport [e.g. vh-25, vw-33, min-vh-50, max-vw-100, etc.]
+  it('Sizing Viewport Percentages', () => {
+    cy.visit('/iframe.html?id=snapshots--percentage-vp-sizing');
+    cy.get('.snapshot', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Sizing', { widths: [320, 1440] });
+  });
+
+  // Pixel based sizing classes [e.g. h-80, w-56, max-w-24, min-h-24, etc.]
+  it('Sizing Pixel Based', () => {
+    cy.visit('/iframe.html?id=snapshots--pixel-sizing');
+    cy.get('.snapshot', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Sizing', { widths: [320, 1440] });
+  });
+});
diff --git a/packages/documentation/src/stories/components/select-custom/select-custom-basic.sample.html b/packages/documentation/src/stories/components/select-custom/select-custom-basic.sample.html
index eb42edb536..0a98a341b4 100644
--- a/packages/documentation/src/stories/components/select-custom/select-custom-basic.sample.html
+++ b/packages/documentation/src/stories/components/select-custom/select-custom-basic.sample.html
@@ -12,7 +12,7 @@
     <span [class.visually-hidden]="selectedOption">Default custom-select</span>
     <span *ngIf="selectedOption" aria-hidden="true">{{ selectedOption.label }}</span>
   </button>
-  <div aria-labelledby="customSelectButton" class="w-100 mw-100" ngbDropdownMenu role="listbox">
+  <div aria-labelledby="customSelectButton" class="w-100 max-w-100" ngbDropdownMenu role="listbox">
     <button
       (click)="toggle.focus()"
       (focus)="selectedOption = option"
diff --git a/packages/documentation/src/stories/components/select-custom/select-custom-floating.sample.html b/packages/documentation/src/stories/components/select-custom/select-custom-floating.sample.html
index 37f20358b2..3dbd83a857 100644
--- a/packages/documentation/src/stories/components/select-custom/select-custom-floating.sample.html
+++ b/packages/documentation/src/stories/components/select-custom/select-custom-floating.sample.html
@@ -14,7 +14,7 @@
   <label class="form-label" id="customSelectLabel">
     Floatinglabel custom-select {{ infoText }}
   </label>
-  <div aria-labelledby="customSelectLabel" class="w-100 mw-100" ngbDropdownMenu role="listbox">
+  <div aria-labelledby="customSelectLabel" class="w-100 max-w-100" ngbDropdownMenu role="listbox">
     <button
       (click)="toggle.focus()"
       (focus)="selectedOption = option"
diff --git a/packages/documentation/src/stories/components/slider/slider.stories.ts b/packages/documentation/src/stories/components/slider/slider.stories.ts
index 5acb16ee25..c5ae75fcdb 100644
--- a/packages/documentation/src/stories/components/slider/slider.stories.ts
+++ b/packages/documentation/src/stories/components/slider/slider.stories.ts
@@ -215,7 +215,7 @@ function render(args: Args, context: StoryContext) {
           <label class="form-label visually-hidden" for="${inputId}">Range controller</label>
           <input
             id="${inputId}"
-            class="form-control mw-giant"
+            class="form-control min-w-80"
             type="text"
             inputmode="decimal"
             value="${args.value}"
diff --git a/packages/documentation/src/stories/foundations/logo/logo.snapshot.stories.ts b/packages/documentation/src/stories/foundations/logo/logo.snapshot.stories.ts
index 95fb494fab..9f201decc4 100644
--- a/packages/documentation/src/stories/foundations/logo/logo.snapshot.stories.ts
+++ b/packages/documentation/src/stories/foundations/logo/logo.snapshot.stories.ts
@@ -23,7 +23,7 @@ export const PostLogo: Story = {
                 <p>${url ? 'Links' : 'Images'}</p>
                 <div class="row">
                   <div class="col">
-                    ${['big', 'huge', 'giant'].map(
+                    ${['32', '56', '80'].map(
                       (height, i) => html`
                         <div class="h-${height} ${i === 0 ? 'my' : 'mb'}-16">
                           ${meta.render?.({ ...context.args, url }, context)}
diff --git a/packages/documentation/src/stories/foundations/logo/logo.stories.ts b/packages/documentation/src/stories/foundations/logo/logo.stories.ts
index 9fc01f60e5..2d165a4115 100644
--- a/packages/documentation/src/stories/foundations/logo/logo.stories.ts
+++ b/packages/documentation/src/stories/foundations/logo/logo.stories.ts
@@ -24,7 +24,7 @@ export default meta;
 
 // DECORATORS
 function containerWithHeight(story: StoryFn, context: StoryContext) {
-  return html` <div class="h-giant">${story(context.args, context)}</div> `;
+  return html` <div class="h-80">${story(context.args, context)}</div> `;
 }
 
 // RENDERER
@@ -57,5 +57,5 @@ export const Link: Story = {
 };
 
 export const Height: Story = {
-  render: () => html` <post-logo class="h-huge">Logo of the Post</post-logo> `,
+  render: () => html` <post-logo class="h-56">Logo of the Post</post-logo> `,
 };
diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx b/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx
index 2305a8a96e..eab0361910 100644
--- a/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx
+++ b/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx
@@ -13,60 +13,49 @@ import * as SizingStories from './sizing.stories';
 
 ## Height & Width
 
-Height and width can be set using `h-*` and `w-*` prefixes, max-height and max-width can be set using prefixes `mh-*` and `mw-*` .
+Height and width can be set using our utility classes `h-{size}` and `w-{size}`, max-height and max-width can be set with `max-h-{size}` and `max-w-{size}` and min-height and min-width can be set with `min-h-{size}` and `min-w-{size}`.
 
 ### Parent Based
 
-Bootstrap offers sizing classes with the suffixes bellow. They allow you to set a height / width as a percentage of the parent element (see [Bootstrap Sizing](https://getbootstrap.com/docs/5.3/utilities/sizing/) for reference).
+The design system offers classes for percentage based sizing with the suffixes bellow. They allow you to set a height / width as a percentage of the parent element.
 
-> - `*-25`
-> - `*-50`
-> - `*-75`
-> - `*-100`
+- `*-auto`
+- `*-quarter`
+- `*-third`
+- `*-half`
+- `*-two-thirds`
+- `*-three-quarters`
+- `*-full`
 
-#### Example
+### Example
 
-<Canvas sourceState="shown" of={SizingStories.SizesPercent} />
+<Canvas sourceState="shown" of={SizingStories.PercentSizes} />
 <div className="hide-col-default">
-  <Controls of={SizingStories.SizesPercent} />
+  <Controls of={SizingStories.PercentSizes} />
 </div>
 
-### Relative to breakpoints
-
-For width, we offer additionally `.w-{breakpoint}-{size}` classes (e.g. `w-md-100`) so that you can size only for some specific breakpoints.
+### Pixel Based
 
-See <a href="/?path=/docs/eb78afcb-ce92-4990-94b6-6536d5ec6af4--docs#full-width">Full-width button</a> for a practical example.
+Additional pixel-based sizing classes allow precise height `h-{size}` and width `w-{size}` definitions in pixels (e.g., `w-12` for 12px width and `h-26` for 26px height).
 
-### Post-Sizes
+See all available sizes in the example bellow.
 
-Post sizes can be used as suffixes in the same way. To find out which size name to use, see the "Size name in classes" column in the reference table above or use the "Example Post-Sizes" below.
+### Example
 
-#### Sass variables
-
-{/* prettier-ignore */}
-<div className="banner banner-warning mb-40">
-  <h2 className="banner-heading">Sizing variables are deprecated</h2>
-  <p>The current set of the post-specific sizing variables is deprecated in favour of a new naming system that is consistent with the Design. For further information, please read the <a href="https://github.com/swisspost/design-system/discussions/588">discussion on sizing variables on GitHub</a> and have a look at the <a href="https://www.figma.com/file/ojCcgC5Zd12eUSzq6V5m24/Foundations?node-id=3%3A2&t=l8qimsXlxeMLOzs6-0">implementation in Figma</a>.</p>
-  <p>There is a new solution with updated naming system up coming for spacing sizes.</p>
+<Canvas sourceState="shown" of={SizingStories.PxSizes} />
+<div className="hide-col-default">
+  <Controls of={SizingStories.PxSizes} />
 </div>
 
-<Source
-  language="scss"
-  dark
-  code={Object.entries(SizingStories.SCSS_VARIABLES)
-    .filter(([key, value]) => key !== 'parameters')
-    .map(([key, value]) => `$${key}: ${formatAsMap(value)};`)
-    .join('\n')}
-></Source>
+### Relative to breakpoints
 
-<Canvas of={SizingStories.Sizes} />
-<div className="hide-col-default">
-  <Controls of={SizingStories.Sizes} />
-</div>
+For width and height, the design system provides additionally `.w-{breakpoint}-{size}` classes (e.g. `w-md-full`, `h-md-56`) so that you can set different sizes for specific breakpoints.
+
+See <a href="/?path=/docs/eb78afcb-ce92-4990-94b6-6536d5ec6af4--docs#full-width">Full-width button</a> for a practical example.
 
-## Viewport Based
+### Viewport Based
 
-There is the possibility to set the width and height relative to the viewport.
+There is the possibility to set the width and height as a percentage relative to the viewport. Available percentages: `25`, `33`, `50`, `66`, `75`, `100`.
 
 > - `min-vh-100`
 > - `min-vw-100`
diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.module.scss b/packages/documentation/src/stories/utilities/sizing/sizing.module.scss
index e747d1f7da..3413b40b27 100644
--- a/packages/documentation/src/stories/utilities/sizing/sizing.module.scss
+++ b/packages/documentation/src/stories/utilities/sizing/sizing.module.scss
@@ -1,7 +1,21 @@
+@use 'sass:list';
+@use 'sass:map';
 @use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/variables/sizing' as tokens;
 
 :export {
-  @each $key, $value in post.$post-sizes {
-    #{$key}: #{$value};
+  @each $key, $value in tokens.$post-percentage-sizes {
+    pcsizes_#{$key}: #{$value};
+  }
+  @each $key, $value in tokens.$post-px-sizes {
+    pxsizes_#{$key}: #{$value};
+  }
+  @each $breakpoint in post.$grid-breakpoints-list {
+    @if (map.get(post.$grid-breakpoints, $breakpoint) == 0) {
+      firstBreakpoint_#{$breakpoint}: $breakpoint;
+    }
+    @if (map.get(post.$grid-breakpoints, $breakpoint) != 0) {
+      breakpoints_#{$breakpoint}: $breakpoint;
+    }
   }
 }
diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts b/packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts
new file mode 100644
index 0000000000..be6d562b5c
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts
@@ -0,0 +1,139 @@
+import type { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './sizing.styles.scss';
+import meta from './sizing.stories';
+import { COLOR_SCHEMES, schemes } from '@/shared/snapshots/schemes';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+const samples = [
+  { w: 'third', h: 'full', maxW: 'third', minW: 'full', maxH: 'half', minH: 'two-thirds' },
+  { w: 'quarter', h: 'half', maxW: 'quarter', minW: 'half', maxH: 'full', minH: 'quarter' },
+  { w: 'half', h: 'quarter', maxW: 'half', minW: 'quarter', maxH: 'two-thirds', minH: 'third' },
+  {
+    w: 'three-quarters',
+    h: 'quarter',
+    maxW: 'three-quarters',
+    minW: 'three-quarters',
+    maxH: 'quarter',
+    minH: 'half',
+  },
+  { w: 'full', h: 'half', maxW: 'full', minW: 'third', maxH: 'auto', minH: 'auto' },
+];
+
+const vpSamples = [
+  { w: '33', h: '100', maxvW: '33', minvW: '100', maxvH: '50', minvH: '66' },
+  { w: '50', h: '50', maxvW: '25', minvW: '50', maxvH: '100', minvH: '25' },
+  { w: '50', h: '25', maxvW: '50', minvW: '25', maxvH: '66', minvH: '33' },
+  {
+    w: '75',
+    h: '25',
+    maxvW: '75',
+    minvW: '25',
+    maxvH: '50',
+    minvH: '25',
+  },
+  { w: '100', h: '50', maxvW: '100', minvW: '33', maxvH: 'auto', minvH: 'auto' },
+];
+
+const pxSamples = [
+  { w: '12', h: '18', maxW: '33', minW: '12', maxH: '48', minH: '22' },
+  { w: '24', h: '36', maxW: '32', minW: '20', maxH: '40', minH: '24' },
+  { w: '40', h: '56', maxW: '48', minW: '24', maxH: '56', minH: '32' },
+  { w: '28', h: '64', maxW: '80', minW: '56', maxH: '96', minH: '36' },
+  { w: '96', h: '48', maxW: '100', minW: '40', maxH: '112', minH: '48' },
+  { w: '64', h: '56', maxW: '80', minW: '32', maxH: '78', minH: '64' },
+  { w: '20', h: '15', maxW: '22', minW: '12', maxH: '32', minH: '18' },
+  { w: '32', h: '22', maxW: '40', minW: '24', maxH: '36', minH: '20' },
+  { w: '78', h: '96', maxW: '80', minW: '40', maxH: '112', minH: '56' },
+  { w: '48', h: '80', maxW: '96', minW: '50', maxH: '112', minH: '56' },
+  { w: '80', h: '96', maxW: '112', minW: '64', maxH: '100', minH: '36' },
+];
+function generateClassNames(sample: Record<string, string>, isViewport = false) {
+  const prefix = isViewport ? 'v' : '';
+
+  const classNames = ['content'];
+
+  classNames.push(prefix + 'h-' + sample.h);
+  classNames.push(prefix + 'w-' + sample.w);
+
+  if (sample['max' + prefix + 'H'] && sample['max' + prefix + 'H'] !== 'none') {
+    classNames.push('max-vh-' + sample['max' + prefix + 'H']);
+  }
+
+  if (sample['max' + prefix + 'W'] && sample['max' + prefix + 'W'] !== 'none') {
+    classNames.push('max-vw-' + sample['max' + prefix + 'W']);
+  }
+
+  if (sample['min' + prefix + 'H'] && sample['min' + prefix + 'H'] !== 'none') {
+    classNames.push('min-vh-' + sample['min' + prefix + 'H']);
+  }
+
+  if (sample['min' + prefix + 'W'] && sample['min' + prefix + 'W'] !== 'none') {
+    classNames.push('min-vw-' + sample['min' + prefix + 'W']);
+  }
+
+  return classNames.filter(Boolean).join(' ');
+}
+
+export const PercentageSizing: StoryObj = {
+  render() {
+    return schemes(
+      () => {
+        return html`
+          ${samples.map(sample => {
+            return html`<div class="sizing-example snapshot">
+              <div class="${generateClassNames(sample)}"></div>
+            </div>`;
+          })};
+        `;
+      },
+      { filter: scheme => scheme === COLOR_SCHEMES.light },
+    );
+  },
+};
+
+export const PercentageVpSizing: StoryObj = {
+  render() {
+    return schemes(
+      () => {
+        return html`
+          <div class="grid">
+            ${vpSamples.map(sample => {
+              return html`
+                <div class="grid-item">
+                  <div class="sizing-example snapshot">
+                    <div class="${generateClassNames(sample, true)}"></div>
+                  </div>
+                </div>
+              `;
+            })}
+          </div>
+        `;
+      },
+      { filter: scheme => scheme === COLOR_SCHEMES.light },
+    );
+  },
+};
+
+export const PixelSizing: StoryObj = {
+  render() {
+    return schemes(
+      () => {
+        return html`
+          ${pxSamples.map(sample => {
+            return html`<div class="sizing-px-example snapshot">
+              <div class="${generateClassNames(sample)}"></div>
+            </div>`;
+          })}
+        `;
+      },
+      { filter: scheme => scheme === COLOR_SCHEMES.light },
+    );
+  },
+};
diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts b/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts
index 38558d2899..f28ebe9daa 100644
--- a/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts
+++ b/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts
@@ -1,14 +1,14 @@
-import type { Args, StoryObj } from '@storybook/web-components';
+import type { Args, StoryObj, StoryFn, StoryContext } from '@storybook/web-components';
 import { html } from 'lit';
-import './sizing.styles.scss';
-import scss from './sizing.module.scss';
+import sizing from './sizing.module.scss';
+import { parse } from '@/utils/sass-export';
 import { MetaExtended } from '@root/types';
+import './sizing.styles.scss';
+import { camelToKebabCase } from '@/utils/naming';
 
-export const SCSS_VARIABLES = scss;
-
-const sizingOptions = ['auto', ...Object.keys(SCSS_VARIABLES)];
-
-const sizeOptionsPercent = ['auto', '25', '50', '75', '100'];
+const sizes: Record<string, string> = parse(sizing);
+const percentageSizes = Object.keys(sizes.pcsizes);
+const pixelSizes = Object.keys(sizes.pxsizes);
 
 const meta: MetaExtended = {
   render: renderSizing,
@@ -18,45 +18,25 @@ const meta: MetaExtended = {
     badges: [],
   },
   args: {
-    height: 'bigger-giant',
-    width: 'bigger-giant',
-    maxHeight: 'null',
-    maxWidth: 'null',
+    height: 'none',
+    width: 'none',
+    maxHeight: 'none',
+    maxWidth: 'none',
+    minHeight: 'none',
+    minWidth: 'none',
   },
-  argTypes: {
-    height: {
-      name: 'height',
-      description: 'Set the height of the rectangle',
-      control: {
-        type: 'select',
-      },
-      options: sizingOptions,
-    },
-    width: {
-      name: 'width',
-      description: 'Set the width of the rectangle',
-      control: {
-        type: 'select',
-      },
-      options: sizingOptions,
-    },
-    maxHeight: {
-      name: 'max-height',
-      description: 'Set the maximum height of the rectangle',
-      control: {
-        type: 'select',
-      },
-      options: ['none', ...sizingOptions],
-    },
-    maxWidth: {
-      name: 'max-width',
-      description: 'Set the maximum width of the rectangle',
-      control: {
-        type: 'select',
-      },
-      options: ['none', ...sizingOptions],
+  decorators: [
+    (story: StoryFn, context: StoryContext) => {
+      const storyTemplate = html`
+        <div class="sizing-example">
+          <div class="h-112">
+            ${story(context.args, context)}
+          </div>
+        </div>
+      `;
+      return storyTemplate;
     },
-  },
+  ],
 };
 
 export default meta;
@@ -64,33 +44,73 @@ export default meta;
 type Story = StoryObj;
 
 function renderSizing(args: Args) {
-  const maximumHeight = args.maxHeight && args.maxHeight !== 'null' ? `mh-${args.maxHeight}` : '';
-  const maximumWidth = args.maxWidth && args.maxWidth !== 'null' ? `mw-${args.maxWidth}` : '';
-  const classes = `content h-${args.height} w-${args.width} ${maximumHeight} ${maximumWidth}`;
+  const classNames = [
+    `content`,
+    `h-${args.height}`,
+    `w-${args.width}`,
+    args.maxHeight && args.maxHeight !== 'none' ? `max-h-${args.maxHeight}` : '',
+    args.maxWidth && args.maxWidth !== 'none' ? `max-w-${args.maxWidth}` : '',
+    args.minHeight && args.minHeight !== 'none' ? `min-h-${args.minHeight}` : '',
+    args.minWidth && args.minWidth !== 'none' ? `min-w-${args.minWidth}` : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
 
-  return html`
-    <div class="sizing-example">
-      <div class="d-flex p-16 gap-16" style="height: 150px">
-        <div class="flex-fill">
-          <div class="${classes}"></div>
-        </div>
-      </div>
-    </div>
-  `;
+  return html`<div class="${classNames}"></div>`;
 }
 
-export const Sizes: Story = {};
-export const SizesPercent: Story = {
+const pcArgTypes = [
+  { name: 'height', category: 'Height', options: percentageSizes },
+  { name: 'width', category: 'Width', options: percentageSizes },
+  { name: 'maxHeight', category: 'Height', options: percentageSizes },
+  { name: 'maxWidth', category: 'Width', options: percentageSizes },
+  { name: 'minHeight', category: 'Height', options: percentageSizes },
+  { name: 'minWidth', category: 'Width', options: percentageSizes },
+];
+
+export const PercentSizes: Story = {
   args: {
-    width: '25',
-    height: '100',
+    width: 'quarter',
+    height: 'full',
   },
-  argTypes: {
-    height: {
-      options: sizeOptionsPercent,
-    },
-    width: {
-      options: sizeOptionsPercent,
-    },
+  argTypes: Object.fromEntries(
+    pcArgTypes.map(argType => [
+      argType.name,
+      {
+        name: camelToKebabCase(argType.name),
+        description: `Set the ${camelToKebabCase(argType.name).toLowerCase()} of the rectangle`,
+        control: { type: 'select' },
+        options: argType.options,
+        table: { category: argType.category },
+      },
+    ]),
+  ),
+};
+
+const pxArgTypes = [
+  { name: 'height', category: 'Height', options: pixelSizes },
+  { name: 'width', category: 'Width', options: pixelSizes },
+  { name: 'maxHeight', category: 'Height', options: pixelSizes },
+  { name: 'maxWidth', category: 'Width', options: pixelSizes },
+  { name: 'minHeight', category: 'Height', options: pixelSizes },
+  { name: 'minWidth', category: 'Width', options: pixelSizes },
+];
+
+export const PxSizes: Story = {
+  args: {
+    width: '100',
+    height: '80',
   },
+  argTypes: Object.fromEntries(
+    pxArgTypes.map(argType => [
+      argType.name,
+      {
+        name: camelToKebabCase(argType.name),
+        description: `Set the ${camelToKebabCase(argType.name).toLowerCase()} of the rectangle`,
+        control: { type: 'select' },
+        options: argType.options,
+        table: { category: argType.category },
+      },
+    ]),
+  ),
 };
diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.styles.scss b/packages/documentation/src/stories/utilities/sizing/sizing.styles.scss
index 6d46035c47..84f5536836 100644
--- a/packages/documentation/src/stories/utilities/sizing/sizing.styles.scss
+++ b/packages/documentation/src/stories/utilities/sizing/sizing.styles.scss
@@ -2,7 +2,35 @@
 
 .sizing-example {
   .content {
-    background-color: post.$white;
+    background-color: post.$gray-40;
+  }
+
+  .grid-item {
+    width: 20vw;
+    height: 20vw;
     border: 1px solid post.$gray-40;
+
+    div {
+      background-color: post.$gray-40;
+    }
+  }
+}
+
+.sizing-example .grid {
+  display: grid;
+  grid-template-columns: 100vw;
+  grid-template-rows: 100vh;
+  gap: 30px;
+  .grid-item {
+    width: 100vw;
+    height: 100vh;
   }
 }
+
+.sizing-example.snapshot,
+.sizing-px-example.snapshot {
+  display: flex;
+  width: 20vw;
+  height: 20vw;
+  border: 1px solid post.$gray-40 !important;
+}
diff --git a/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts b/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts
index 4abdc3b371..6e93e63899 100644
--- a/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts
+++ b/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts
@@ -47,7 +47,7 @@ function withLegend(template: TemplateResult, ...legendItems: string[]) {
         ${legendItems.map(
           item => html`
             <li class="d-flex align-items-center">
-              <div class="h-regular w-regular me-8 ${item}"></div>
+              <div class="h-16 w-16 me-8 ${item}"></div>
               <span>${item}</span>
             </li>
           `,
diff --git a/packages/documentation/src/utils/naming.ts b/packages/documentation/src/utils/naming.ts
new file mode 100644
index 0000000000..a57c671fae
--- /dev/null
+++ b/packages/documentation/src/utils/naming.ts
@@ -0,0 +1,3 @@
+export function camelToKebabCase(str: string) {
+  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
diff --git a/packages/migrations/src/utils/constants.ts b/packages/migrations/src/utils/constants.ts
index 1da92da3a0..f2f4d69cf3 100644
--- a/packages/migrations/src/utils/constants.ts
+++ b/packages/migrations/src/utils/constants.ts
@@ -1,6 +1,7 @@
 export const breakpoints = [ 'xs', 'sm', 'rg', 'md', 'lg', 'xl', 'xxl' ];
 
 const bootstrapSizes = [ '0', '1', '2', '3', '4', '5', 'auto' ];
+
 const postSizes = [
   'hair',
   'line',
diff --git a/packages/styles/src/components/sizing.scss b/packages/styles/src/components/sizing.scss
index 228e836d8e..bf76e9bf87 100644
--- a/packages/styles/src/components/sizing.scss
+++ b/packages/styles/src/components/sizing.scss
@@ -3,33 +3,16 @@
 @use 'sass:map';
 @use './../themes/bootstrap/core' as *;
 @use './../variables/spacing';
+@use './../variables/sizing';
 @use './../variables/breakpoints';
 @use './../mixins/utilities';
 
-// Post sizes
-@each $breakpoint in map.keys(breakpoints.$grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: if($breakpoint == 'xs', '', '-#{$breakpoint}');
-
-    @each $prop,
-      $abbrev
-        in (/* Deprecated */ line-height: lh, height: h, max-height: mh, width: w, max-width: mw)
-    {
-      @each $size, $length in spacing.$post-sizes {
-        .#{$abbrev}#{$infix}-#{$size} {
-          #{$prop}: $length !important;
-        }
-      }
-    }
-  }
-}
-
 // Post breakpoints width - e.g. w-sm-100
 @each $breakpoint in map.keys(breakpoints.$grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     @if $breakpoint != 'xs' {
       @each $prop, $abbrev in (width: w) {
-        @each $size, $length in spacing.$sizes {
+        @each $size, $length in sizing.$post-percentage-sizes {
           .#{$abbrev}-#{$breakpoint}-#{$size} {
             #{$prop}: $length !important;
           }
diff --git a/packages/styles/src/themes/bootstrap/_utilities.scss b/packages/styles/src/themes/bootstrap/_utilities.scss
index 0696634c6c..e8d4bde6d1 100644
--- a/packages/styles/src/themes/bootstrap/_utilities.scss
+++ b/packages/styles/src/themes/bootstrap/_utilities.scss
@@ -26,6 +26,17 @@ $utilities: map.remove($utilities, 'gap');
 $utilities: map.remove($utilities, 'row-gap');
 $utilities: map.remove($utilities, 'column-gap');
 
+$utilities: map.remove($utilities, 'width');
+$utilities: map.remove($utilities, 'height');
+$utilities: map.remove($utilities, 'max-width');
+$utilities: map.remove($utilities, 'max-height');
+$utilities: map.remove($utilities, 'min-width');
+$utilities: map.remove($utilities, 'min-height');
+$utilities: map.remove($utilities, 'viewport-width');
+$utilities: map.remove($utilities, 'viewport-height');
+$utilities: map.remove($utilities, 'min-viewport-width');
+$utilities: map.remove($utilities, 'min-viewport-height');
+
 $utilities: map.remove($utilities, 'flex');
 $utilities: map.remove($utilities, 'flex-direction');
 $utilities: map.remove($utilities, 'align-items');
@@ -34,7 +45,9 @@ $utilities: map.remove($utilities, 'align-self');
 $utilities: map.remove($utilities, 'flex-grow');
 $utilities: map.remove($utilities, 'flex-shrink');
 $utilities: map.remove($utilities, 'flex-wrap');
+
 $utilities: map.remove($utilities, 'order');
+
 $utilities: map.remove($utilities, 'justify-content');
 
 $utilities: map.remove($utilities, 'display');
diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss
index d09cf091b1..04b78b2890 100644
--- a/packages/styles/src/utilities/_variables.scss
+++ b/packages/styles/src/utilities/_variables.scss
@@ -2,6 +2,7 @@
 
 @use './functions' as *;
 
+@use '../variables/sizing' as *;
 /*
   Utilities are generated with our utility API using bellow $utilities map.
 
@@ -28,6 +29,126 @@ $position-values: (
 );
 
 $utilities: (
+  'width': (
+    responsive: true,
+    property: width,
+    class: w,
+    values: $post-combined-sizes,
+  ),
+  'height': (
+    responsive: true,
+    property: height,
+    class: h,
+    values: $post-combined-sizes,
+  ),
+  'max-width': (
+    responsive: true,
+    property: max-width,
+    class: max-w,
+    values: $post-combined-sizes,
+  ),
+  'max-height': (
+    responsive: true,
+    property: max-height,
+    class: max-h,
+    values: $post-combined-sizes,
+  ),
+  'min-width': (
+    responsive: true,
+    property: min-width,
+    class: min-w,
+    values: $post-combined-sizes,
+  ),
+  'min-height': (
+    responsive: true,
+    property: min-height,
+    class: min-h,
+    values: $post-combined-sizes,
+  ),
+  'viewport-width': (
+    responsive: true,
+    property: width,
+    class: vw,
+    values: (
+      0: 0,
+      25: 25vw,
+      33: 25vw,
+      50: 50vw,
+      66: 66vw,
+      75: 75vw,
+      100: 100vw,
+    ),
+  ),
+  'viewport-height': (
+    responsive: true,
+    property: height,
+    class: vh,
+    values: (
+      0: 0,
+      25: 25vh,
+      33: 33vh,
+      50: 50vh,
+      66: 66vh,
+      75: 75vh,
+      100: 100vh,
+    ),
+  ),
+  'min-viewport-width': (
+    responsive: true,
+    property: min-width,
+    class: min-vw,
+    values: (
+      0: 0,
+      25: 25vw,
+      33: 25vw,
+      50: 50vw,
+      66: 66vw,
+      75: 75vw,
+      100: 100vw,
+    ),
+  ),
+  'min-viewport-height': (
+    responsive: true,
+    property: min-height,
+    class: min-vh,
+    values: (
+      0: 0,
+      25: 25vh,
+      33: 33vh,
+      50: 50vh,
+      66: 66vh,
+      75: 75vh,
+      100: 100vh,
+    ),
+  ),
+  'max-viewport-width': (
+    responsive: true,
+    property: max-width,
+    class: max-vw,
+    values: (
+      0: 0,
+      25: 25vw,
+      33: 25vw,
+      50: 50vw,
+      66: 66vw,
+      75: 75vw,
+      100: 100vw,
+    ),
+  ),
+  'max-viewport-height': (
+    responsive: true,
+    property: max-height,
+    class: max-vh,
+    values: (
+      0: 0,
+      25: 25vh,
+      33: 33vh,
+      50: 50vh,
+      66: 66vh,
+      75: 75vh,
+      100: 100vh,
+    ),
+  ),
   'align': (
     property: vertical-align,
     class: align,
diff --git a/packages/styles/src/variables/_index.scss b/packages/styles/src/variables/_index.scss
index aff8c98c7e..a2a1c02cbc 100644
--- a/packages/styles/src/variables/_index.scss
+++ b/packages/styles/src/variables/_index.scss
@@ -11,5 +11,6 @@
 @forward 'icons';
 @forward 'options';
 @forward 'spacing';
+@forward 'sizing';
 @forward 'type';
 @forward 'components';
diff --git a/packages/styles/src/variables/_sizing.scss b/packages/styles/src/variables/_sizing.scss
new file mode 100644
index 0000000000..139cde6afa
--- /dev/null
+++ b/packages/styles/src/variables/_sizing.scss
@@ -0,0 +1,69 @@
+@use 'sass:map';
+
+@use '../functions/tokens';
+@use '../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
+
+// Sizing
+//
+// Control the default sizing by modifying these variables.
+
+// Post-Sizes
+$post-px-sizes: () !default;
+$post-px-sizes: map.merge(
+  (
+    '0': tokens.get('post-utility-gap-0'),
+    '1': tokens.get('post-utility-gap-1'),
+    '2': tokens.get('post-utility-gap-2'),
+    '3': tokens.get('post-utility-gap-3'),
+    '4': tokens.get('post-utility-gap-4'),
+    '5': tokens.get('post-utility-gap-5'),
+    '6': tokens.get('post-utility-gap-6'),
+    '8': tokens.get('post-utility-gap-8'),
+    '10': tokens.get('post-utility-gap-10'),
+    '11': tokens.get('post-utility-gap-11'),
+    '12': tokens.get('post-utility-gap-12'),
+    '14': tokens.get('post-utility-gap-14'),
+    '15': tokens.get('post-utility-gap-15'),
+    '16': tokens.get('post-utility-gap-16'),
+    '18': tokens.get('post-utility-gap-18'),
+    '19': tokens.get('post-utility-gap-19'),
+    '20': tokens.get('post-utility-gap-20'),
+    '22': tokens.get('post-utility-gap-22'),
+    '24': tokens.get('post-utility-gap-24'),
+    '26': tokens.get('post-utility-gap-26'),
+    '28': tokens.get('post-utility-gap-28'),
+    '30': tokens.get('post-utility-gap-30'),
+    '32': tokens.get('post-utility-gap-32'),
+    '34': tokens.get('post-utility-gap-34'),
+    '36': tokens.get('post-utility-gap-36'),
+    '40': tokens.get('post-utility-gap-40'),
+    '48': tokens.get('post-utility-gap-48'),
+    '56': tokens.get('post-utility-gap-56'),
+    '64': tokens.get('post-utility-gap-64'),
+    '78': tokens.get('post-utility-gap-78'),
+    '80': tokens.get('post-utility-gap-80'),
+    '96': tokens.get('post-utility-gap-96'),
+    '100': tokens.get('post-utility-gap-100'),
+    '112': tokens.get('post-utility-gap-112'),
+  ),
+  $post-px-sizes
+);
+
+// This variable affects the `.h-*` and `.w-*` classes.
+$post-percentage-sizes: () !default;
+$post-percentage-sizes: map.merge(
+  (
+    'quarter': 25%,
+    'third': 33%,
+    'half': 50%,
+    'two-thirds': 66%,
+    'three-quarters': 75%,
+    'full': 100%,
+    auto: auto,
+  ),
+  $post-percentage-sizes
+);
+
+$post-combined-sizes: map.merge($post-px-sizes, $post-percentage-sizes);
diff --git a/packages/styles/src/variables/_spacing.scss b/packages/styles/src/variables/_spacing.scss
index 7c7ee7b242..b4d8528415 100644
--- a/packages/styles/src/variables/_spacing.scss
+++ b/packages/styles/src/variables/_spacing.scss
@@ -55,19 +55,6 @@ $post-sizes: map.merge(
   $post-sizes
 );
 
-// This variable affects the `.h-*` and `.w-*` classes.
-$sizes: () !default;
-$sizes: map.merge(
-  (
-    25: 25%,
-    50: 50%,
-    75: 75%,
-    100: 100%,
-    auto: auto,
-  ),
-  $sizes
-);
-
 // Abstand Gross, Section
 $size-curve-giant: (
   'xs': $size-huge,