fix(documentation): remove remaining sizing classes usage (#4357)

.changeset/bright-coins-repeat.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-nextjs-integration': patch
+'@swisspost/design-system-documentation': patch
+---
+
+Removed remaining sizing classes usage.

packages/documentation/.storybook/blocks/footer.tsx

@@ -94,7 +94,7 @@ export default (params: { pathToStoryFile?: String }) => (
     <footer className="docs-footer mt-56">
       <div>
         <div className="container">
-          <div className="pt-big-r pb-big-r">
+          <div className="py-32">
             <h2 className="mt-0">Design System Team Members</h2>
             <ul className="list-profile">
               {TEAM_MEMBERS.sort(() => (Math.random() > 0.5 ? 1 : -1)).map((developer, index) => (
@@ -114,8 +114,8 @@ export default (params: { pathToStoryFile?: String }) => (
                 </li>
               ))}
             </ul>
-            <div className="row mt-regular-r">
-              <div className="col-12 col-sm-auto mt-regular-r">
+            <div className="row mt-24">
+              <div className="col-12 col-sm-auto mt-24">
                 <a
                   className="btn-primary btn"
                   href="https://github.com/swisspost/design-system/issues"

packages/documentation/src/stories/components/avatar/avatar.docs.mdx

@@ -55,20 +55,20 @@ Please notice, that if you combine several methods to show a picture, the compon
 The properties are used in the order as follows:
 
 1. If you use an `<img>` tag in the default slot (for example to show a self hosted image), this will override the other properties.<br/><br/>
-   <div className="mb-regular banner banner-info banner-md">
+   <div className="mb-16 banner banner-info banner-md">
      We do not check if the image can be loaded, so make sure the image is available!
    </div>
 2. If you use the `userid` property (to show a company internal user picture) and a picture is available, this will override the `email` property, as well as `firstname` and `lastname`.<br/><br/>
-   <div className="mb-regular banner banner-info banner-md">
+   <div className="mb-16 banner banner-info banner-md">
      This will only work on `post.ch` urls and only in internal projects.
    </div>
 3. If you use the `email` property (to show a users picture provided through gravatar.com) and a picture is available, this will override the `firstname` and `lastname` properties.<br/><br/>
-   <div className="mb-regular banner banner-info banner-md">
+   <div className="mb-16 banner banner-info banner-md">
      Don't know Gravatar or haven't set up a profile yet, let's change this:
      [Signup](https://gravatar.com) now!
    </div>
 4. As an overall fallback the `firstname` and `lastname` properties are used to show at least some initials. And as an addition, `firstname` and `lastname` (if defined) are also used on all the other methods to set the `alt` tag of the image (if not already defined).<br/><br/>
-   <div className="mb-regular banner banner-info banner-md">
+   <div className="mb-16 banner banner-info banner-md">
      Because of big differences in the naming convenions around the world, we only set the
      `firstname` as required property.
    </div>

packages/documentation/src/stories/components/avatar/avatar.snapshot.stories.ts

@@ -18,7 +18,7 @@ export const AvatarPicture: Story = {
     return schemes(
       () => html`
         <div class="mt-16">
-          <div class="d-flex flex-column gap-regular">
+          <div class="d-flex flex-column gap-16">
               ${bombArgs({
                 lastname: [null, 'Source'],
                 firstname: ['Open'],

packages/documentation/src/stories/components/button/button.stories.ts

@@ -238,7 +238,7 @@ const VariantsTemplate = {
   },
   decorators: [
     (story: StoryFn, context: StoryContext) =>
-      html` <div class="d-flex gap-small-r flex-wrap">${story(context.args, context)}</div> `,
+      html` <div class="d-flex gap-12 flex-wrap">${story(context.args, context)}</div> `,
   ],
   render: (args: Args) =>
     html`

packages/documentation/src/stories/components/dialog/dialog.snapshot.stories.ts

@@ -24,7 +24,7 @@ export const Dialog: Story = {
             transition: none !important;
           }
         </style>
-        <div class="d-flex flex-wrap align-items-start gap-regular">
+        <div class="d-flex flex-wrap align-items-start gap-16">
           ${bombArgs({
             palette: ['palette-default', 'palette-accent', 'palette-alternate', 'palette-brand'],
             size: context.argTypes.size.options,

packages/documentation/src/stories/components/dialog/dialog.stories.ts

@@ -210,7 +210,7 @@ const CustomContentTemplate = {
   render: () => {
     return html`
       <dialog>
-        <form method="dialog" onsubmit="console.log(event)" class="p-regular-r">
+        <form method="dialog" onsubmit="console.log(event)" class="p-16">
           <h2>Custom content</h2>
           <p>This is some other content, just placed inside the dialog.</p>
           <button class="btn btn-primary">Ok</button>

packages/documentation/src/stories/foundations/typography/link/link.snapshot.stories.ts

@@ -17,7 +17,7 @@ export const Link: Story = {
   render: (_args: Args, context: StoryContext) => {
     return schemes(
       () => html`
-        <div class="d-flex flex-column gap-regular">
+        <div class="d-flex flex-column gap-16">
           ${bombArgs({
             text: ['Link Text', 'Lorem ipsum dolor sit amet consectetur'],
             href: ['https://example.com', 'https://imgur.com/FKmX7dt'],

packages/documentation/src/stories/guidelines/accessibility/accessibility.docs.mdx

@@ -7,12 +7,12 @@ import * as RegulationStories from './accessibility.stories';
 
 <figure>
   <blockquote class="blockquote" lang="de">
-    <p class="mb-regular">
+    <p class="mb-16">
       Die Postdienste müssen so angeboten werden, dass Menschen mit Behinderungen sie in
       qualitativer, quantitativer und wirtschaftlicher Hinsicht unter vergleichbaren Bedingungen wie
       Menschen ohne Behinderungen beanspruchen können.
     </p>
-    <p class="mb-regular">
+    <p class="mb-16">
       (EN) The postal services must be offered in such a way that people with disabilities can use
       them under comparable conditions to those without disabilities, both qualitatively,
       quantitatively, and economically.

packages/documentation/src/stories/guidelines/disabled-state/disabled-state.docs.mdx

@@ -7,24 +7,24 @@ import * as DisabledStateStories from './disabled-state.stories';
 
 Disabled states of input fields or buttons pose many accessibility issues.
 
-<ul class="list-unstyled ms-regular">
-  <li class="d-flex gap-mini">
+<ul class="list-unstyled ms-16">
+  <li class="d-flex gap-8">
     <div>❌</div>
     <div>Disabled fields cannot be reached by pressing tab</div>
   </li>
-  <li class="d-flex gap-mini">
+  <li class="d-flex gap-8">
     <div>❌</div>
     <div>It's often unclear why something is disabled</div>
   </li>
-  <li class="d-flex gap-mini">
+  <li class="d-flex gap-8">
     <div>❌</div>
     <div>It's often unclear how to enable a disabled field or button</div>
   </li>
-  <li class="d-flex gap-mini">
+  <li class="d-flex gap-8">
     <div>❌</div>
     <div>Disabled fields have low contrast</div>
   </li>
-  <li class="d-flex gap-mini">
+  <li class="d-flex gap-8">
     <div>❌</div>
     <div>
       The disabled state of a field is not always obvious (hard to discern from an enabled field)
@@ -48,7 +48,7 @@ Disabled states of input fields or buttons pose many accessibility issues.
       <tr>
         <td>
           <ul class="list-unstyled">
-            <li class="d-flex gap-mini">
+            <li class="d-flex gap-8">
               <div>❌</div>
               <div>
                 Forms with required fields tend to have the send button disabled until all required
@@ -60,7 +60,7 @@ Disabled states of input fields or buttons pose many accessibility issues.
         </td>
         <td>
           <ul class="list-unstyled">
-            <li class="d-flex gap-mini">
+            <li class="d-flex gap-8">
               <div>✔️</div>
               <div>
                 Let the user make mistakes and help them to correct them. Mark the required fields
@@ -79,7 +79,7 @@ Disabled states of input fields or buttons pose many accessibility issues.
       <tr>
         <td>
           <ul class="list-unstyled">
-            <li class="d-flex gap-mini">
+            <li class="d-flex gap-8">
               <div>❌</div>
               <div>
                 The user submits a form. While the client waits for the server response and to
@@ -91,7 +91,7 @@ Disabled states of input fields or buttons pose many accessibility issues.
         </td>
         <td>
           <ul class="list-unstyled">
-            <li class="d-flex gap-mini">
+            <li class="d-flex gap-8">
               <div>✔️</div>
               <div>
                 Provide a loading indicator or display a message that shows current progress when
@@ -112,7 +112,7 @@ Disabled states of input fields or buttons pose many accessibility issues.
       <tr>
         <td>
           <ul class="list-unstyled">
-            <li class="d-flex gap-mini">
+            <li class="d-flex gap-8">
               <div>❌</div>
               <div>
                 Some options in a radio button group or select field are disabled because they are
@@ -125,7 +125,7 @@ Disabled states of input fields or buttons pose many accessibility issues.
         </td>
         <td>
           <ul class="list-unstyled">
-            <li class="d-flex gap-mini">
+            <li class="d-flex gap-8">
               <div>✔️</div>
               <div>
                 There are multiple possible solutions, depending on the situation:

packages/nextjs-integration/src/app/page.tsx

@@ -16,7 +16,7 @@ export default function Home() {
       <h1 className="visually-hidden">This is the homepage</h1>
 
       <section>
-        <h2 className="h4 mt-huge-r">Sendung Verfolgen</h2>
+        <h2 className="h4 mt-40">Sendung Verfolgen</h2>
         <form className="palette-brand mt-16 py-16 px-32 d-flex gap-24">
           <PostIcon name="1010" className="fs-small-huge"></PostIcon>
           <div className="form-floating" style={{ minWidth: '50%' }}>
@@ -38,7 +38,7 @@ export default function Home() {
         </form>
       </section>
 
-      <section className="mt-huge-r">
+      <section className="mt-40">
         <div className="row">
           <div className="col-xl-2 col-md-6">
             <a href="#" className="card h-full product-card">
@@ -108,7 +108,7 @@ export default function Home() {
         </a>
       </section>
 
-      <section className="pt-huge-r mb-huge-r">
+      <section className="pt-40 mb-40">
         <div className="row">
           <div className="col-lg-4 col-sm-6 col-12 mb-16">
             <div className="card elevation-0">
@@ -154,7 +154,7 @@ export default function Home() {
         </div>
       </section>
 
-      <section className="mt-huge-r">
+      <section className="mt-40">
         <h2>Testing a couple web components</h2>
         <PostTabs>
           <PostTabHeader panel="one" data-tooltip-target="tooltip-one">
@@ -190,7 +190,7 @@ export default function Home() {
           </PostTabPanel>
         </PostTabs>
         <h3>Frequently asked questions</h3>
-        <PostAccordion headingLevel={4} className="mt-big-r" multiple>
+        <PostAccordion headingLevel={4} className="mt-32" multiple>
           <PostAccordionItem>
             <span slot="header">Is this for real?</span>
             <p>No, this is just a fantasy.</p>