feat(styles): create spacing utilities from tokens (#3557)

I recommend reviewing this pull request one commit at a time:

- The ***first commit*** (`feat(styles): create spacing utilities from
tokens`) is the actual implementation of the new margin, padding, and
gap utilities from the token map.

- The ***second commit*** (`chore: apply new spacing utilities`) is
purely a refactor, where the old spacing utilities are replaced with the
newly created ones.

.changeset/proud-actors-knock.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-styles': major
+'@swisspost/design-system-documentation': minor
+---
+
+Updated the margin, padding, and gap utility classes to use the pixel values (1, 2, ... , 112) instead of size names (hair, line, ..., bigger-giant).

packages/components-angular/projects/consumer-app/src/app/app.component.html

@@ -1,14 +1,14 @@
 <header class="bg-dark">
-  <nav class="container py-2">
-    <ul class="d-flex flex-wrap row-gap-1 column-gap-3 m-0 list-unstyled">
+  <nav class="container py-8">
+    <ul class="d-flex flex-wrap row-gap-4 column-gap-16 m-0 list-unstyled">
       <li *ngFor="let route of navigationRoutes">
         <a [routerLink]="route.path">{{ route.title }}</a>
       </li>
     </ul>
   </nav>
 </header>
 
-<main class="container my-3">
+<main class="container my-16">
   <h1>Hurray, it works!</h1>
   <router-outlet></router-outlet>
 </main>

packages/components-angular/projects/consumer-app/src/app/routes/card-control/card-control.component.html

@@ -2,7 +2,7 @@ <h2>CardControl Forms</h2>
 
 <h3>Form Builder Form</h3>
 <form [formGroup]="formBuilderForm" (ngSubmit)="formBuilderFormOnSubmit($event)">
-  <fieldset class="mb-3">
+  <fieldset class="mb-16">
     <div class="row">
       <div class="col-8">
         <legend>Post Card Control Checkbox</legend>
@@ -30,7 +30,7 @@ <h3>Form Builder Form</h3>
     </div>
   </fieldset>
 
-  <fieldset class="mb-3">
+  <fieldset class="mb-16">
     <div class="row">
       <div class="col-8">
         <legend>Post Card Control Radio Group</legend>
@@ -61,7 +61,7 @@ <h3>Form Builder Form</h3>
     </div>
   </fieldset>
 
-  <div class="d-flex gap-3">
+  <div class="d-flex gap-16">
     <button class="btn btn-secondary" type="reset">Reset</button>
     <button class="btn btn-primary">Submit</button>
   </div>

packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html

@@ -1,4 +1,4 @@
-<div class="my-4">
+<div class="my-24">
   <h2>Post Accordion</h2>
   <post-accordion [headingLevel]="3">
     <post-accordion-item>
@@ -18,37 +18,37 @@ <h2>Post Accordion</h2>
   </post-accordion>
 </div>
 
-<div class="my-4">
+<div class="my-24">
   <h2>Post Alert</h2>
   <post-alert><p>Contentus momentus vero siteos et accusam iretea et justo.</p></post-alert>
 </div>
 
-<div class="my-4">
+<div class="my-24">
   <h2>Post Card-Control</h2>
   <post-card-control type="checkbox" label="label"></post-card-control>
 </div>
 
-<div class="my-4">
+<div class="my-24">
   <h2>Post Collapsible</h2>
   <post-collapsible-trigger for="angular-collapsible">
-    <button class="btn btn-secondary mb-mini">Toggle</button>
+    <button class="btn btn-secondary mb-8">Toggle</button>
   </post-collapsible-trigger>
   <post-collapsible id="angular-collapsible">
     <p>Contentus momentus vero siteos et accusam iretea et justo.</p>
   </post-collapsible>
 </div>
 
-<div class="my-4">
+<div class="my-24">
   <h2>Post Icon</h2>
   <post-icon name="1001"></post-icon>
 </div>
 
-<div class="my-4">
+<div class="my-24">
   <h2>Post Logo</h2>
   <post-logo url="https://www.post.ch/en">Logo of the Post, To the homepage</post-logo>
 </div>
 
-<div class="my-4">
+<div class="my-24">
   <h2>Post Popover</h2>
   <button class="btn btn-secondary btn-large" data-popover-target="popover-one">
     Click here to see a popover
@@ -64,17 +64,17 @@ <h2 class="h6">Optional title</h2>
   </post-popover>
 </div>
 
-<div class="my-4">
+<div class="my-24">
   <h2>Post Popovercontainer</h2>
   <post-popovercontainer></post-popovercontainer>
 </div>
 
-<div class="my-4">
+<div class="my-24">
   <h2>Post Rating</h2>
   <post-rating></post-rating>
 </div>
 
-<div class="my-4">
+<div class="my-24">
   <h2>Post Tabs</h2>
   <post-tabs>
     <post-tab-header panel="unua">Unua langeto</post-tab-header>
@@ -93,12 +93,12 @@ <h2>Post Tabs</h2>
   </post-tabs>
 </div>
 
-<div class="my-4">
+<div class="my-24">
   <h2>Post Tag</h2>
   <post-tag>Tag</post-tag>
 </div>
 
-<div class="my-4">
+<div class="my-24">
   <h2>Post Tooltip</h2>
   <button class="btn btn-secondary btn-large" data-tooltip-target="tooltip-one">Button</button>
   <post-tooltip id="tooltip-one" placement="top">Hi there 👋</post-tooltip>

packages/components/cypress/fixtures/post-card-control.form-association.test.html

@@ -41,7 +41,7 @@
         <post-card-control label="Group Member 3" type="radio" name="CardControlGroup" value="2">
         </post-card-control>
       </fieldset>
-      <div class="mt-3 d-flex gap-3 justify-content-end">
+      <div class="mt-16 d-flex gap-16 justify-content-end">
         <button type="reset" class="btn btn-link"><post-icon name="2042"></post-icon>Reset</button>
         <button type="submit" class="btn btn-primary btn-animated"><span>Submit</span></button>
       </div>

packages/components/src/index.html

@@ -13,6 +13,6 @@
     <script nomodule src="/build/post-components.js"></script>
   </head>
   <body>
-    <div class="p-5">Add your component here and start developing!</div>
+    <div class="p-48">Add your component here and start developing!</div>
   </body>
 </html>

packages/demo/src/app/bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component.html

@@ -1,9 +1,9 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Accordion</h1>
   <app-dependency-link></app-dependency-link>
 </div>
 
-<div class="alert alert-warning mb-big">
+<div class="alert alert-warning mb-32">
   <p class="alert-heading">Bootstrap accordions are deprecated and will soon be removed.</p>
   <p>
     For a similar behavior, check out our new
@@ -20,21 +20,21 @@ <h1 class="bold font-curve-large">Accordion</h1>
 
 <section>
   <h3>Using JavaScript</h3>
-  <div class="alert alert-info my-large">
+  <div class="alert alert-info my-24">
     <p>
       For the JavaScript accordion to work properly, you need to import collapse.js from Bootstrap
       into your component.
     </p>
   </div>
   <code
-    class="block my-big p-3"
+    class="block my-32 p-16"
     highlight="import 'bootstrap/js/dist/collapse';"
     [languages]="['javascript']"
   ></code>
 
   <app-accordion-demo></app-accordion-demo>
   <code
-    class="block mt-big"
+    class="block mt-32"
     [highlight]="codeTemplate"
     [languages]="['html', 'scss', 'css']"
   ></code>

packages/demo/src/app/bootstrap/components/alert/action-alert-demo/action-alert-demo.component.html

@@ -1,8 +1,8 @@
 <button class="btn btn-secondary" (click)="toggleEx1()" #ex1btn>Toggle Ex. 1</button>
 
-<button class="btn btn-secondary ms-3" (click)="toggleEx2()" #ex2btn>Toggle Ex. 2</button>
+<button class="btn btn-secondary ms-16" (click)="toggleEx2()" #ex2btn>Toggle Ex. 2</button>
 
-<button class="btn btn-secondary ms-3" (click)="toggleEx3()" #ex3btn>Toggle Ex. 3</button>
+<button class="btn btn-secondary ms-16" (click)="toggleEx3()" #ex3btn>Toggle Ex. 3</button>
 
 <div class="alert alert-info alert-action pi-1001 alert-fixed-bottom" role="alert" #ex1>
   <div class="alert-content">

packages/demo/src/app/bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html

@@ -1,9 +1,9 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 id="alerts" class="bold font-curve-large">Alerts / Notifications</h1>
   <app-dependency-link></app-dependency-link>
 </div>
 
-<div class="alert alert-warning mb-bigger-big">
+<div class="alert alert-warning mb-40">
   <p>
     The following two color variants are deprecated and will be removed in the next major version of
     the styles package:
@@ -30,7 +30,7 @@ <h1 id="alerts" class="bold font-curve-large">Alerts / Notifications</h1>
 <section class="continous-text">
   <h3>Usage</h3>
 
-  <div class="alert alert-warning mb-bigger-big">
+  <div class="alert alert-warning mb-40">
     <h5>Dismissible alerts are deprecated</h5>
     <p>
       There already exists a
@@ -44,7 +44,7 @@ <h5>Dismissible alerts are deprecated</h5>
     </p>
   </div>
 
-  <div class="alert-container mt-5">
+  <div class="alert-container mt-48">
     <div class="alert alert-info">
       <p class="alert-heading">
         The markup for alerts differs from the basic bootstrap implementation, to secure
@@ -65,7 +65,7 @@ <h5>Dismissible alerts are deprecated</h5>
           or "alert-dark" available.)
         </li>
       </ul>
-      <p class="bold pt-3">For Toasts, the bootstrap classes are not yet available!</p>
+      <p class="bold pt-16">For Toasts, the bootstrap classes are not yet available!</p>
     </div>
   </div>
 </section>

packages/demo/src/app/bootstrap/components/alert/toast-demo/toast-demo.component.html

@@ -65,13 +65,13 @@
   </div>
 </div>
 
-<div class="heading my-3">
+<div class="heading my-16">
   <h4>Examples of ngx-toastr</h4>
   <a
     href="https://www.npmjs.com/package/ngx-toastr"
     target="_blank"
     rel="noopener"
-    class="btn btn-sm btn-primary me-2"
+    class="btn btn-sm btn-primary me-8"
   >
     ngx-toastr Documentation
   </a>
@@ -84,12 +84,12 @@ <h4>Examples of ngx-toastr</h4>
     ngx-toastr Demo
   </a>
 </div>
-<p class="mb-3 mt-5">
+<p class="mb-16 mt-48">
   Screen reader output is a little better if the close button is disabled (alert messages can still
   be closed by clicking on them). Pass the following option to disable the close button:
 </p>
 <code
-  class="d-block mt-3 mb-5"
+  class="d-block mt-16 mb-48"
   [highlight]="JSON.stringify(toastOptions, null, 2)"
   [languages]="['typescript']"
 ></code>
@@ -98,15 +98,15 @@ <h4>Examples of ngx-toastr</h4>
     <span>Show Danger Toast</span>
   </button>
 
-  <button class="btn btn-secondary btn-animated ms-3" (click)="showSuccess()">
+  <button class="btn btn-secondary btn-animated ms-16" (click)="showSuccess()">
     <span>Show Success Toast</span>
   </button>
 
-  <button class="btn btn-secondary btn-animated ms-3" (click)="showInfo()">
+  <button class="btn btn-secondary btn-animated ms-16" (click)="showInfo()">
     <span>Show Info Toast</span>
   </button>
 
-  <button class="btn btn-secondary btn-animated ms-3" (click)="showWarning()">
+  <button class="btn btn-secondary btn-animated ms-16" (click)="showWarning()">
     <span>Show Warning Toast</span>
   </button>
 </section>

packages/demo/src/app/bootstrap/components/background/background-demo-page/background-demo-page.component.html

@@ -1,4 +1,4 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Background</h1>
   <h2 class="font-curve-medium">Custom Post Backgrounds</h2>
 </div>
@@ -10,8 +10,8 @@ <h2 class="bold">Infos</h2>
   be checked individually.
 </p>
 
-<h2 class="bold mt-huge">Default backgrounds</h2>
-<div class="d-flex my-4">
+<h2 class="bold mt-56">Default backgrounds</h2>
+<div class="d-flex my-24">
   <p class="form-check form-switch">
     <input
       id="bg-opacity-1"
@@ -27,7 +27,7 @@ <h2 class="bold mt-huge">Default backgrounds</h2>
 </div>
 <div class="row">
   <div class="col-12 col-lg-6">
-    <div class="p-3 bg-gray">
+    <div class="p-16 bg-gray">
       <app-background-demo
         [dropOpacity]="dropOpacity1"
         [colorArray]="[
@@ -44,7 +44,7 @@ <h2 class="bold mt-huge">Default backgrounds</h2>
     </div>
   </div>
   <div class="col-12 col-lg-6">
-    <div class="p-3 bg-dark">
+    <div class="p-16 bg-dark">
       <app-background-demo
         [dropOpacity]="dropOpacity1"
         [colorArray]="[
@@ -62,13 +62,13 @@ <h2 class="bold mt-huge">Default backgrounds</h2>
   </div>
 </div>
 <code
-  class="block mt-huge"
+  class="block mt-56"
   [highlight]="codeTemplate"
   [languages]="['html', 'scss', 'css', 'typescript', 'javascript']"
 ></code>
 
-<h2 class="bold mt-huge">Thematic backgrounds</h2>
-<div class="d-flex my-4">
+<h2 class="bold mt-56">Thematic backgrounds</h2>
+<div class="d-flex my-24">
   <p class="form-check form-switch">
     <input
       id="bg-opacity-2"
@@ -84,7 +84,7 @@ <h2 class="bold mt-huge">Thematic backgrounds</h2>
 </div>
 <div class="row">
   <div class="col-12 col-lg-6">
-    <div class="p-3 bg-gray">
+    <div class="p-16 bg-gray">
       <app-background-demo
         [dropOpacity]="dropOpacity2"
         [colorArray]="[
@@ -105,7 +105,7 @@ <h2 class="bold mt-huge">Thematic backgrounds</h2>
     </div>
   </div>
   <div class="col-12 col-lg-6">
-    <div class="p-3 bg-dark">
+    <div class="p-16 bg-dark">
       <app-background-demo
         [dropOpacity]="dropOpacity2"
         [colorArray]="[
@@ -127,8 +127,8 @@ <h2 class="bold mt-huge">Thematic backgrounds</h2>
   </div>
 </div>
 
-<h2 class="bold mt-huge">Contextual backgrounds (Intranet only)</h2>
-<div class="d-flex my-4">
+<h2 class="bold mt-56">Contextual backgrounds (Intranet only)</h2>
+<div class="d-flex my-24">
   <p class="form-check form-switch">
     <input
       id="bg-opacity-3"
@@ -144,15 +144,15 @@ <h2 class="bold mt-huge">Contextual backgrounds (Intranet only)</h2>
 </div>
 <div class="row">
   <div class="col-12 col-lg-6">
-    <div class="p-3 bg-gray">
+    <div class="p-16 bg-gray">
       <app-background-demo
         [dropOpacity]="dropOpacity3"
         [colorArray]="['success', 'warning', 'error', 'info']"
       ></app-background-demo>
     </div>
   </div>
   <div class="col-12 col-lg-6">
-    <div class="p-3 bg-dark">
+    <div class="p-16 bg-dark">
       <app-background-demo
         [dropOpacity]="dropOpacity3"
         [colorArray]="['success', 'warning', 'error', 'info']"

packages/demo/src/app/bootstrap/components/background/background-demo/background-demo.component.html

@@ -1,6 +1,6 @@
 <div
   *ngFor="let color of colorArray"
-  class="p-2 my-1"
+  class="p-8 my-4"
   [class]="'bg-' + color"
   [style]="'--post-bg-opacity:' + (dropOpacity ? 0.8 : 1) + ';'"
 >