Merge branch 'main' into refactor/4063-refactor-the-icons-search-page

# Conflicts: # packages/documentation/src/stories/foundations/icons/search/search-icons.styles.scss
swisspost · Dec 20, 2024 · e77c66f · e77c66f
2 parents c9a5f5c + ede92e4
commit e77c66f
Show file tree

Hide file tree

Showing 64 changed files with 538 additions and 593 deletions.
diff --git a/.changeset/fresh-files-crash.md b/.changeset/fresh-files-crash.md
@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-components': patch
+'@swisspost/design-system-styles': patch
+---
+
+Removed all usage of deprecated utility sizing classes.
diff --git a/.changeset/stale-guests-love.md b/.changeset/stale-guests-love.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': major
+---
+
+Removed deprecated utility sizing and line-height classes as well as `responsive-size`, `generate-utility-class` and all `bezel-*` mixins.
diff --git a/packages/components/cypress/fixtures/post-popover.test.html b/packages/components/cypress/fixtures/post-popover.test.html
@@ -4,6 +4,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
+    <link
+      href="../../node_modules/@swisspost/design-system-styles/post-external.css"
+      rel="stylesheet"
+    />
     <script src="../../dist/post-components/post-components.esm.js" type="module"></script>
   </head>
   <body>

diff --git a/packages/components/src/components/post-card-control/post-card-control.scss b/packages/components/src/components/post-card-control/post-card-control.scss
@@ -4,6 +4,10 @@
 @use '@swisspost/design-system-styles/components/form-check';
 @use '@swisspost/design-system-styles/components/checkbox';
 @use '@swisspost/design-system-styles/components/radio-button';
+@use '@swisspost/design-system-styles/tokens/utilities';
+@use '@swisspost/design-system-styles/functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
 
 /*
 * There are a whole bunch of !important statements in this file.
@@ -22,7 +26,7 @@
 :host-context(fieldset) {
   &:host(:not(:last-child)) {
     .card-control {
-      margin-bottom: post.$size-regular;
+      margin-bottom: tokens.get('utility-gap-16');
     }
   }
 }
@@ -38,18 +42,18 @@
   display: grid;
   grid-template: 'input label icon' 'input content content' / min-content auto min-content;
   align-items: center;
-  gap: 0 post.$size-mini;
+  gap: 0 tokens.get('utility-gap-8');
   margin: 0;
-  padding: post.$size-regular;
+  padding: tokens.get('utility-gap-12');
   background-color: var(--post-card-control-bg);
-  border: post.$size-line solid var(--post-card-control-border-color);
+  border: tokens.get('utility-gap-2') solid var(--post-card-control-border-color);
   border-radius: post.$border-radius;
   color: var(--post-card-control-color) !important;
   cursor: pointer;
 
   .card-control--input {
     grid-area: input;
-    margin: post.$size-micro 0;
+    margin: tokens.get('utility-gap-4') 0;
     background-color: var(--post-card-control-input-bg) !important;
     border-color: var(--post-card-control-input-border-color) !important;
     color: var(--post-card-control-input-border-color) !important;
@@ -79,7 +83,7 @@
 
   .card-control--label {
     grid-area: label;
-    margin: post.$size-micro 0;
+    margin: tokens.get('utility-gap-4') 0;
     padding: 0 !important;
     color: inherit !important;
     pointer-events: none;
@@ -101,8 +105,8 @@
 
   .card-control--icon {
     grid-area: icon;
-    width: post.$size-big;
-    height: post.$size-big;
+    width: tokens.get('utility-gap-32');
+    height: tokens.get('utility-gap-32');
     pointer-events: none;
 
     > slot {
@@ -195,11 +199,11 @@
     --post-card-control-input-border-color: FieldText;
     --post-card-control-input-bg: Field;
 
-    outline: post.$size-line solid Field;
-    outline-offset: post.$size-line * -2;
+    outline: tokens.get('utility-gap-2') solid Field;
+    outline-offset: calc(tokens.get('utility-gap-2') * -2);
 
     .card-control--input {
-      outline: post.$size-line solid Field;
+      outline: tokens.get('utility-gap-2') solid Field;
 
       // selector needed to override the .form-check styles
       &[type] {
@@ -264,7 +268,7 @@
           display: block;
           content: '';
           position: absolute;
-          inset: post.$size-line;
+          inset: tokens.get('utility-gap-2');
           background-color: SelectedItem;
           z-index: 1;
         }
@@ -296,8 +300,8 @@
           display: block;
           content: '';
           position: absolute;
-          inset: post.$size-line;
-          border-radius: post.$size-line * 0.5;
+          inset: tokens.get('utility-gap-2');
+          border-radius: calc(tokens.get('utility-gap-2') * 0.5);
           background-color: SelectedItem;
         }
 
@@ -306,7 +310,7 @@
         }
 
         .card-control--input {
-          outline: post.$size-line solid Field;
+          outline: tokens.get('utility-gap-2') solid Field;
         }
       }
     }
@@ -432,7 +436,7 @@
 
 :host([data-context*='fieldset']:not(:last-child)) {
   .card-control {
-    margin-bottom: post.$size-regular;
+    margin-bottom: tokens.get('utility-gap-16');
   }
 }
 

diff --git a/packages/components/src/components/post-rating/post-rating.scss b/packages/components/src/components/post-rating/post-rating.scss
@@ -1,4 +1,6 @@
 @use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/tokens/utilities';
+@use '@swisspost/design-system-styles/functions/tokens';
 
 :host {
   display: inline-block;
@@ -8,7 +10,7 @@
   display: flex;
   flex-wrap: wrap;
   overflow: hidden;
-  margin: 0 (-(post.$size-micro));
+  margin: 0 calc(tokens.get('utility-gap-4', utilities.$post-spacing) * -1);
   border-radius: post.$border-radius;
 
   .star {

diff --git a/packages/components/src/components/post-tooltip/post-tooltip.scss b/packages/components/src/components/post-tooltip/post-tooltip.scss
@@ -3,11 +3,15 @@
 @use '@swisspost/design-system-styles/variables/color';
 @use '@swisspost/design-system-styles/functions/color' as color-fn;
 @use '@swisspost/design-system-styles/variables/spacing';
+@use '@swisspost/design-system-styles/tokens/utilities';
+@use '@swisspost/design-system-styles/functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
 
 post-popovercontainer {
-  padding: spacing.$size-micro spacing.$size-mini;
-  max-width: 2 * spacing.$size-bigger-giant - spacing.$size-mini;
-  min-height: spacing.$size-regular;
+  padding: tokens.get('utility-gap-4') tokens.get('utility-gap-8');
+  max-width: calc(2 * tokens.get('utility-gap-112') - tokens.get('utility-gap-8'));
+  min-height: tokens.get('utility-gap-16');
 
   // Creates a safe space around the popovercontainer for save pointer crossing between trigger and tooltip
   &[arrow] {

diff --git a/packages/documentation/.storybook/addons/addons.scss b/packages/documentation/.storybook/addons/addons.scss
@@ -1,4 +1,8 @@
 @use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/functions/tokens' as tokens;
+@use '@swisspost/design-system-styles/tokens/utilities' as utilities;
+
+tokens.$default-map: utilities.$post-spacing;
 
 .addon-label {
   color: post.$body-color !important;
@@ -8,19 +12,19 @@
   min-width: 12rem;
   display: flex;
   flex-flow: column nowrap;
-  gap: post.$size-line;
+  gap: tokens.get('utility-gap-2');
   position: absolute;
   top: -5px;
   right: 0;
-  padding: post.$size-mini;
+  padding: tokens.get('utility-gap-8');
   background-color: post.$white;
   border: post.$border-width solid post.$border-color;
   border-radius: post.$border-radius;
   font-size: post.$font-size-sm;
 
   .addon-dropdown__item {
     display: block;
-    padding: post.$size-mini post.$size-small-regular;
+    padding: tokens.get('utility-gap-8') tokens.get('utility-gap-12');
     border-radius: post.$border-radius-sm;
     text-decoration: none;
     color: post.$body-color !important;
@@ -38,6 +42,6 @@
 .addon-button {
   post-icon {
     font-size: post.$font-size-20;
-    margin-inline-end: post.$size-line;
+    margin-inline-end: tokens.get('utility-gap-2');
   }
 }
diff --git a/packages/documentation/.storybook/addons/version-switcher/version-switcher.scss b/packages/documentation/.storybook/addons/version-switcher/version-switcher.scss
@@ -1,4 +1,8 @@
 @use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/functions/tokens' as tokens;
+@use '@swisspost/design-system-styles/tokens/utilities' as utilities;
+
+tokens.$default-map: utilities.$post-spacing;
 
 .version-switcher__loading {
   display: flex;
@@ -17,12 +21,12 @@
 
   .item__deps {
     display: flex;
-    gap: post.$size-small-regular;
+    gap: tokens.get('utility-gap-12');
   }
 
   .deps_dep {
     display: flex;
-    gap: post.$size-line;
+    gap: tokens.get('utility-gap-2');
     font-size: 85%;
   }
 

diff --git a/packages/documentation/.storybook/styles/components/blocks.scss b/packages/documentation/.storybook/styles/components/blocks.scss
@@ -1,15 +1,19 @@
 @use '@swisspost/design-system-styles/core' as post;
 @use '@swisspost/design-system-styles/elements/body';
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 #storybook-docs {
   .sbdocs-preview {
     border-color: post.$border-color;
-    border-radius: post.$size-mini;
+    border-radius: tokens.get('utility-gap-8');
     box-shadow: none;
   }
 
   .docblock-argstable {
-    border-radius: post.$size-mini;
+    border-radius: tokens.get('utility-gap-8');
 
     tbody {
       position: relative;
@@ -22,7 +26,7 @@
         position: absolute;
         inset: 0;
         border: post.$border-width solid post.$border-color;
-        border-radius: post.$size-mini;
+        border-radius: tokens.get('utility-gap-8');
         z-index: -1;
       }
 
@@ -46,33 +50,33 @@
             background-clip: padding-box !important;
 
             &:first-child {
-              border-inline-start: post.$size-line solid transparent;
+              border-inline-start: tokens.get('utility-gap-2') solid transparent;
             }
 
             &:last-child {
-              border-inline-end: post.$size-line solid transparent;
+              border-inline-end: tokens.get('utility-gap-2') solid transparent;
             }
           }
 
           &:first-child > td {
-            border-block-start: post.$size-hair solid transparent;
+            border-block-start: tokens.get('utility-gap-1') solid transparent;
 
             &:first-child {
-              border-start-start-radius: post.$size-mini;
+              border-start-start-radius: tokens.get('utility-gap-8');
             }
 
             &:last-child {
-              border-start-end-radius: post.$size-mini;
+              border-start-end-radius: tokens.get('utility-gap-8');
             }
           }
 
           &:last-child > td {
             &:first-child {
-              border-end-start-radius: post.$size-mini;
+              border-end-start-radius: tokens.get('utility-gap-8');
             }
 
             &:last-child {
-              border-end-end-radius: post.$size-mini;
+              border-end-end-radius: tokens.get('utility-gap-8');
             }
           }
         }
@@ -81,7 +85,7 @@
   }
 
   .docblock-source {
-    border-radius: post.$size-mini;
+    border-radius: tokens.get('utility-gap-8');
     box-shadow: none;
   }
 }
diff --git a/packages/documentation/.storybook/styles/components/tabs.scss b/packages/documentation/.storybook/styles/components/tabs.scss
@@ -1,5 +1,9 @@
 @use '@swisspost/design-system-styles/core' as post;
 @use '../mixins';
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 @include mixins.style-docs-only-guard('post-tabs') {
   &::part(tabs) {
@@ -30,7 +34,7 @@
   }
 
   &:where(.sb-tabs-lg, :has(post-tab-panel > .sbdocs)) {
-    margin-top: post.$size-big;
+    margin-top: tokens.get('utility-gap-32');
 
     &::part(tabs) {
       &::before {
@@ -57,9 +61,9 @@
         display: block;
         content: '';
         position: absolute;
-        top: calc(100% + #{post.$size-regular});
+        top: calc(100% + tokens.get('utility-gap-16'));
         left: 0;
-        right: post.$size-mini * -1;
+        right: calc(tokens.get('utility-gap-8') * -1);
         border-top: post.$border-width dashed post.$border-color;
       }
     }

diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss
@@ -2,8 +2,8 @@
 @use '@swisspost/design-system-styles/core.scss' as post;
 @use '@swisspost/internet-header/dist/swisspost-internet-header/swisspost-internet-header.css';
 @use './components';
-@use '@swisspost/design-system-styles/functions/tokens' as tokens;
-@use '@swisspost/design-system-styles/tokens/utilities' as utilities;
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/utilities';
 
 tokens.$default-map: utilities.$post-color;
 
@@ -91,10 +91,10 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: post.$size-mini;
+    gap: tokens.get('utility-gap-8', utilities.$post-spacing);
   }
   .docs-title {
-    margin-bottom: post.$size-mini;
+    margin-bottom: tokens.get('utility-gap-8', utilities.$post-spacing);
 
     :first-child {
       margin-right: auto;