@bonniernews/dn-design-system-web 7.2.0 → 7.2.1

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.2.1 (2023-10-23)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
 ## 7.2.0 (2023-10-23)
 
 

package/assets/form-field/form-field.scss

@@ -4,7 +4,7 @@
 $ds-form-field__error-icon-size: 20px;
 
 .ds-form-field__help-text {
-  margin-top: ds-spacing-component($ds-sc-x2);
+  margin-top: ds-spacing($ds-s-050);
   margin-bottom: 0;
   color: $ds-color-text-primary-02;
   @include ds-typography($ds-typography-functional-body01regular);
@@ -18,9 +18,9 @@ $ds-form-field__error-icon-size: 20px;
 .invalid {
   .ds-form-field__error-message {
     display: flex;
-    margin-top: ds-spacing-component($ds-sc-x2);
+    margin-top: ds-spacing($ds-s-050);
     .ds-icon {
-      margin: 0 ds-px-to-rem(ds-spacing-component($ds-sc-x2)) 0 0;
+      margin: ds-spacing(0 $ds-s-050 0 0, rem);
       height: ds-px-to-rem($ds-form-field__error-icon-size);
       width: ds-px-to-rem($ds-form-field__error-icon-size);
       line-height: 0;
@@ -44,7 +44,7 @@ $ds-form-field__error-icon-size: 20px;
   .invalid {
     .ds-form-field__error-message {
       .ds-icon {
-        margin: 0 ds-spacing-component($ds-sc-x2) 0 0;
+        margin: ds-spacing(0 $ds-s-050 0 0);
         height: $ds-form-field__error-icon-size;
         width: $ds-form-field__error-icon-size;
       }

package/assets/teaser/teaser.scss

@@ -29,7 +29,7 @@ $grade-size: ds-px-to-rem(34px);
     display: block;
     @include ds-typography($ds-typography-detailarticle-label);
     color: $ds-theme-color;
-    margin-bottom: ds-spacing-component($ds-sc-x1);
+    margin-bottom: ds-spacing($ds-s-025);
   }
 
   .ds-teaser__title {
@@ -54,13 +54,13 @@ $grade-size: ds-px-to-rem(34px);
     @include ds-typography($ds-typography-detailmedryckare);
     color: $ds-color-text-primary;
     // Should be replaced with dynamic spacing layout token when available
-    margin: ds-spacing-component($ds-sc-x2 0 0);
+    margin: ds-spacing($ds-s-050 0 0);
     @include ds-mq-smallest-breakpoint(tablet) {
-      margin-top: ds-spacing-component($ds-sc-x3);
+      margin-top: ds-spacing($ds-s-075);
     }
 
     &.ds-teaser__text--with-grade {
-      min-height: calc($grade-size + ds-spacing-component($ds-sc-x1, "rem"));
+      min-height: calc($grade-size + ds-spacing($ds-s-025, "rem"));
     }
   }
 
@@ -70,7 +70,7 @@ $grade-size: ds-px-to-rem(34px);
     float: left;
     font-size: 0;
     line-height: 0;
-    margin: ds-spacing-component($ds-sc-x1 $ds-sc-x2 0 0, "rem");
+    margin: ds-spacing($ds-s-025 $ds-s-050 0 0, "rem");
     height: $grade-size;
     width: $grade-size;
     svg {
@@ -102,7 +102,7 @@ $grade-size: ds-px-to-rem(34px);
 
   &.ds-teaser--quote-badge {
     .ds-teaser__title {
-      padding-right: ds-spacing-component($ds-sc-x3);
+      padding-right: ds-spacing($ds-s-075);
     }
   }
 }

package/components/article-body-image/article-body-image.scss

@@ -2,7 +2,7 @@
 @use "../../assets/article-image/article-image.scss" as *;
 
 .ds-article-image--body {
-  @include ds-spacing-layout(
-    $ds-sl-gap-vertical-static-medium 0 $ds-sl-gap-vertical-static-large
+  padding: ds-spacing(
+    $ds-s-gap-vertical-static-medium 0 $ds-s-gap-vertical-static-large
   );
 }

package/components/article-top-image/article-top-image.scss

@@ -2,5 +2,5 @@
 @use "../../assets/article-image/article-image.scss" as *;
 
 .ds-article-image--top {
-  @include ds-spacing-layout($ds-sl-gap-vertical-medium, padding-bottom);
+  padding-bottom: ds-spacing($ds-s-gap-vertical-medium);
 }

package/components/badge/badge.scss

@@ -17,12 +17,12 @@ $ds-badge__min-size: 8px;
     justify-content: center;
     min-height: ds-px-to-rem($ds-badge__min-size);
     min-width: ds-px-to-rem($ds-badge__min-size);
-    padding: 0 ds-px-to-rem(ds-spacing-component($ds-sc-x1));
+    padding: ds-spacing(0 $ds-s-025, rem);
     @at-root .ds-force-px#{&} {
       @include ds-typography($ds-typography-functional-meta02semibold, true);
       min-height: $ds-badge__min-size;
       min-width: $ds-badge__min-size;
-      padding: 0 ds-spacing-component($ds-sc-x1);
+      padding: ds-spacing(0 $ds-s-025);
     }
   }
 

package/components/blocked-content/blocked-content.scss

@@ -4,19 +4,19 @@
 .ds-blocked-content {
   background-color: $ds-color-surface-background;
   margin: 0;
-  @include ds-spacing-layout(
-    $ds-sl-gap-vertical-static-medium 0 $ds-sl-gap-vertical-static-large
+  padding: ds-spacing(
+    $ds-s-gap-vertical-static-medium 0 $ds-s-gap-vertical-static-large
   );
 
   .ds-blocked-content__inner {
     text-align: center;
     border: ds-metrics-border-width(x1) solid $ds-color-border-primary;
     border-radius: ds-metrics-border-radius(x1);
-    padding: ds-spacing-component($ds-sc-x8 $ds-sc-x4 $ds-sc-x4);
+    padding: ds-spacing($ds-s-200 $ds-s-100 $ds-s-100);
   }
 
   .ds-blocked-content__body {
-    margin: ds-spacing-component(0 0 $ds-sc-x8);
+    margin: ds-spacing(0 0 $ds-s-200);
     @include ds-typography($ds-typography-functional-body02regular);
     color: $ds-color-text-primary;
     @at-root .ds-force-px#{&} {
@@ -27,14 +27,14 @@
   .ds-blocked-content__link {
     @include ds-link($ds-link-paragraph);
     display: inline-block;
-    margin-top: ds-spacing-component($ds-sc-x2);
+    margin-top: ds-spacing($ds-s-050);
     word-break: break-word;
   }
 
   .ds-blocked-content__title {
     @include ds-typography($ds-typography-functional-heading01semibold);
     color: $ds-color-text-primary;
-    margin: 0 0 ds-spacing-component($ds-sc-x2);
+    margin: ds-spacing(0 0 $ds-s-050);
     @at-root .ds-force-px#{&} {
       @include ds-typography($ds-typography-functional-heading01semibold, true);
     }

package/components/buddy-menu/buddy-menu.scss

@@ -40,18 +40,18 @@
     position: relative;
   }
   .ds-buddy-menu__header {
-    padding: ds-spacing-component($ds-sc-x8 $ds-sc-x4 $ds-sc-x4);
-    margin: ds-spacing-component(0 0 $ds-sc-x4);
+    padding: ds-spacing($ds-s-200 $ds-s-100 $ds-s-100);
+    margin: ds-spacing(0 0 $ds-s-100);
   }
   .ds-buddy-menu__close {
     position: absolute;
-    right: ds-spacing-component($ds-sc-x1);
-    top: ds-spacing-component($ds-sc-x1);
+    right: ds-spacing($ds-s-025);
+    top: ds-spacing($ds-s-025);
   }
   .ds-buddy-menu__greeting {
     @include ds-typography($ds-typography-functional-heading03bold);
     color: $ds-color-text-primary;
-    margin: ds-spacing-component(0 0 $ds-sc-x4);
+    margin: ds-spacing(0 0 $ds-s-100);
     display: block;
   }
   .ds-buddy-menu__account-title,
@@ -59,26 +59,26 @@
   .ds-buddy-menu__links-title {
     @include ds-typography($ds-typography-functional-body02semibold);
     color: $ds-color-text-primary;
-    margin: ds-spacing-component(0 0 $ds-sc-x1);
+    margin: ds-spacing(0 0 $ds-s-025);
   }
   .ds-buddy-menu__links-title {
-    padding: ds-spacing-component(0 $ds-sc-x4);
+    padding: ds-spacing(0 $ds-s-100);
   }
   .ds-buddy-menu__addons-list {
     padding: 0;
-    margin: ds-spacing-component(0 0 $ds-sc-x4);
+    margin: ds-spacing(0 0 $ds-s-100);
     list-style: none;
     a {
       @include ds-link($ds-link-list);
       @include ds-typography($ds-typography-functional-body02regular);
       color: $ds-color-text-primary-02;
-      margin: ds-spacing-component(0 0 $ds-sc-x4);
+      margin: ds-spacing(0 0 $ds-s-100);
     }
   }
   .ds-buddy-menu__account-level {
     @include ds-typography($ds-typography-functional-body02regular);
     color: $ds-color-text-primary-02;
-    margin: ds-spacing-component(0 0 $ds-sc-x4);
+    margin: ds-spacing(0 0 $ds-s-100);
     display: block;
   }
   .ds-buddy-menu__links-list {
@@ -107,7 +107,7 @@
   }
 
   .ds-buddy-menu__campaign {
-    margin: 0 -#{ds-spacing-component($ds-sc-x4)};
+    margin: ds-spacing(0 $ds-s-100, px, true);
   }
 
   &.ds-buddy-menu--skola {

package/components/button/button.scss

@@ -45,7 +45,7 @@ $ds-btn__icon-size: 24px;
     border: $ds-btn-outlined__border-width solid;
     border-radius: ds-metrics-border-radius(x1);
     /* stylelint-disable-next-line */
-    padding: ds-spacing-component($ds-sc-x3, rem) - ds-px-to-rem($ds-btn-outlined__border-width) ds-spacing-component($ds-sc-x6, rem) - ds-px-to-rem($ds-btn-outlined__border-width);
+    padding: ds-spacing($ds-s-075, rem) - ds-px-to-rem($ds-btn-outlined__border-width) ds-spacing($ds-s-150, rem) - ds-px-to-rem($ds-btn-outlined__border-width);
     position: relative;
     &::before {
       content: "";
@@ -85,10 +85,10 @@ $ds-btn__icon-size: 24px;
 
 .ds-btn--small .ds-btn__inner {
   padding: ds-px-to-rem(
-      ds-spacing-component($ds-sc-x2) - $ds-btn-outlined__border-width
+      ds-spacing($ds-s-050) - $ds-btn-outlined__border-width
     )
     ds-px-to-rem(
-      ds-spacing-component($ds-sc-x5) - $ds-btn-outlined__border-width
+      ds-spacing($ds-s-125) - $ds-btn-outlined__border-width
     );
 }
 
@@ -110,7 +110,7 @@ $ds-btn__icon-size: 24px;
     display: flex;
     height: ds-px-to-rem($ds-btn__icon-size);
     width: ds-px-to-rem($ds-btn__icon-size);
-    margin: ds-spacing-component(0 0 0 $ds-sc-x2, rem);
+    margin: ds-spacing(0 0 0 $ds-s-050, rem);
     svg {
       fill: currentColor;
     }
@@ -120,12 +120,12 @@ $ds-btn__icon-size: 24px;
 .ds-btn--icon-right {
   .ds-btn__inner {
     padding-right: ds-px-to-rem(
-      ds-spacing-component($ds-sc-x5) - $ds-btn-outlined__border-width
+      ds-spacing($ds-s-125) - $ds-btn-outlined__border-width
     );
   }
   &.ds-btn--small .ds-btn__inner {
     padding-right: ds-px-to-rem(
-      ds-spacing-component($ds-sc-x4) - $ds-btn-outlined__border-width
+      ds-spacing($ds-s-100) - $ds-btn-outlined__border-width
     );
   }
 }
@@ -134,15 +134,15 @@ $ds-btn__icon-size: 24px;
   .ds-btn__inner {
     flex-direction: row-reverse;
     padding-left: ds-px-to-rem(
-      ds-spacing-component($ds-sc-x5) - $ds-btn-outlined__border-width
+      ds-spacing($ds-s-125) - $ds-btn-outlined__border-width
     );
     .ds-icon {
-      margin: ds-spacing-component(0 $ds-sc-x2 0 0, rem);
+      margin: ds-spacing(0 $ds-s-050 0 0, rem);
     }
   }
   &.ds-btn--small .ds-btn__inner {
     padding-left: ds-px-to-rem(
-      ds-spacing-component($ds-sc-x4) - $ds-btn-outlined__border-width
+      ds-spacing($ds-s-100) - $ds-btn-outlined__border-width
     );
   }
 }
@@ -296,37 +296,37 @@ $ds-btn__icon-size: 24px;
 
 .ds-btn.ds-force-px {
   .ds-btn__inner {
-    padding: ds-spacing-component($ds-sc-x3) - $ds-btn-outlined__border-width
-      ds-spacing-component($ds-sc-x6) - $ds-btn-outlined__border-width;
+    padding: ds-spacing($ds-s-075) - $ds-btn-outlined__border-width
+      ds-spacing($ds-s-150) - $ds-btn-outlined__border-width;
     @include ds-typography($ds-typography-detailstandard-button, true);
   }
   &.ds-btn--icon-left .ds-btn__inner,
   &.ds-btn--icon-right .ds-btn__inner {
     .ds-icon {
-      margin: ds-spacing-component(0 0 0 $ds-sc-x2);
+      margin: ds-spacing(0 0 0 $ds-s-050);
       height: $ds-btn__icon-size;
       width: $ds-btn__icon-size;
     }
   }
   &.ds-btn--icon-right .ds-btn__inner {
-    padding-right: ds-spacing-component($ds-sc-x5)-$ds-btn-outlined__border-width;
+    padding-right: ds-spacing($ds-s-125)-$ds-btn-outlined__border-width;
   }
   &.ds-btn--icon-left .ds-btn__inner {
-    padding-left: ds-spacing-component($ds-sc-x5)-$ds-btn-outlined__border-width;
+    padding-left: ds-spacing($ds-s-125)-$ds-btn-outlined__border-width;
     .ds-icon {
-      margin: ds-spacing-component(0 $ds-sc-x2 0 0);
+      margin: ds-spacing(0 $ds-s-050 0 0);
     }
   }
   &.ds-btn--small {
     .ds-btn__inner {
-      padding: ds-spacing-component($ds-sc-x2)-$ds-btn-outlined__border-width
-        ds-spacing-component($ds-sc-x5)-$ds-btn-outlined__border-width;
+      padding: ds-spacing($ds-s-050)-$ds-btn-outlined__border-width
+        ds-spacing($ds-s-125)-$ds-btn-outlined__border-width;
     }
     &.ds-btn--icon-right .ds-btn__inner {
-      padding-right: ds-spacing-component($ds-sc-x4)-$ds-btn-outlined__border-width;
+      padding-right: ds-spacing($ds-s-100)-$ds-btn-outlined__border-width;
     }
     &.ds-btn--icon-left .ds-btn__inner {
-      padding-left: ds-spacing-component($ds-sc-x4)-$ds-btn-outlined__border-width;
+      padding-left: ds-spacing($ds-s-100)-$ds-btn-outlined__border-width;
     }
   }
 }

package/components/button-toggle/button-toggle.scss

@@ -48,7 +48,7 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
     border: $ds-btn-toggle-outlined__border-width solid;
     border-radius: 100px;
     /* stylelint-disable-next-line */
-    padding: ds-spacing-component($ds-sc-x3, rem) - ds-px-to-rem($ds-btn-toggle-outlined__border-width) ds-spacing-component($ds-sc-x6, rem) - ds-px-to-rem($ds-btn-toggle-outlined__border-width);
+    padding: ds-spacing($ds-s-075, rem) - ds-px-to-rem($ds-btn-toggle-outlined__border-width) ds-spacing($ds-s-150, rem) - ds-px-to-rem($ds-btn-toggle-outlined__border-width);
     position: relative;
     &::before {
       content: "";
@@ -91,20 +91,20 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
 
 .ds-btn-toggle--small .ds-btn-toggle__inner {
   padding: ds-px-to-rem(
-      ds-spacing-component($ds-sc-x2) - $ds-btn-toggle-outlined__border-width
+      ds-spacing($ds-s-050) - $ds-btn-toggle-outlined__border-width
     )
     ds-px-to-rem(
-      ds-spacing-component($ds-sc-x5) - $ds-btn-toggle-outlined__border-width
+      ds-spacing($ds-s-125) - $ds-btn-toggle-outlined__border-width
     );
 }
 
 .ds-btn-toggle--xsmall .ds-btn-toggle__inner {
   @include ds-typography($ds-typography-detailstandard-button-small);
   padding: ds-px-to-rem(
-      ds-spacing-component($ds-sc-x1) - $ds-btn-toggle-outlined__border-width
+      ds-spacing($ds-s-025) - $ds-btn-toggle-outlined__border-width
     )
     ds-px-to-rem(
-      ds-spacing-component($ds-sc-x3) - $ds-btn-toggle-outlined__border-width
+      ds-spacing($ds-s-075) - $ds-btn-toggle-outlined__border-width
     );
 }
 
@@ -169,7 +169,7 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
     border-color: $ds-color-border-primary-03;
     color: $ds-color-text-primary;
     padding-left: ds-px-to-rem(
-      ds-spacing-component($ds-sc-x5) - $ds-btn-toggle-outlined__border-width
+      ds-spacing($ds-s-125) - $ds-btn-toggle-outlined__border-width
     );
 
     .ds-btn-toggle__on {
@@ -183,7 +183,7 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
       display: flex;
       height: ds-px-to-rem($ds-btn-toggle__icon-size);
       width: ds-px-to-rem($ds-btn-toggle__icon-size);
-      margin: ds-spacing-component(0 $ds-sc-x2 0 0, rem);
+      margin: ds-spacing(0 $ds-s-050 0 0, rem);
       svg {
         fill: currentColor;
       }
@@ -192,18 +192,18 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
 
   &.ds-btn-toggle--small .ds-btn-toggle__inner {
     padding-left: ds-px-to-rem(
-      ds-spacing-component($ds-sc-x4) - $ds-btn-toggle-outlined__border-width
+      ds-spacing($ds-s-100) - $ds-btn-toggle-outlined__border-width
     );
   }
 
   &.ds-btn-toggle--xsmall .ds-btn-toggle__inner {
     padding-left: ds-px-to-rem(
-      ds-spacing-component($ds-sc-x2) - $ds-btn-toggle-outlined__border-width
+      ds-spacing($ds-s-050) - $ds-btn-toggle-outlined__border-width
     );
     .ds-icon {
       height: ds-px-to-rem($ds-btn-toggle__icon-size-xsmall);
       width: ds-px-to-rem($ds-btn-toggle__icon-size-xsmall);
-      margin: ds-spacing-component(0 $ds-sc-x1 0 0, rem);
+      margin: ds-spacing(0 $ds-s-025 0 0, rem);
     }
   }
 
@@ -225,39 +225,39 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
 .ds-btn-toggle.ds-force-px {
   .ds-btn-toggle__inner {
     /* stylelint-disable-next-line */
-    padding: ds-spacing-component($ds-sc-x3) - $ds-btn-toggle-outlined__border-width ds-spacing-component($ds-sc-x6) - $ds-btn-toggle-outlined__border-width;
+    padding: ds-spacing($ds-s-075) - $ds-btn-toggle-outlined__border-width ds-spacing($ds-s-150) - $ds-btn-toggle-outlined__border-width;
     @include ds-typography($ds-typography-detailstandard-button, true);
   }
   &.ds-btn-toggle--selected .ds-btn-toggle__inner {
-    padding-left: ds-spacing-component($ds-sc-x5)-$ds-btn-toggle-outlined__border-width;
+    padding-left: ds-spacing($ds-s-125)-$ds-btn-toggle-outlined__border-width;
     .ds-icon {
-      margin: ds-spacing-component(0 $ds-sc-x2 0 0);
+      margin: ds-spacing(0 $ds-s-050 0 0);
       height: $ds-btn-toggle__icon-size;
       width: $ds-btn-toggle__icon-size;
     }
   }
   &.ds-btn-toggle--small {
     .ds-btn-toggle__inner {
-      padding: ds-spacing-component($ds-sc-x2)-$ds-btn-toggle-outlined__border-width
-        ds-spacing-component($ds-sc-x5)-$ds-btn-toggle-outlined__border-width;
+      padding: ds-spacing($ds-s-050)-$ds-btn-toggle-outlined__border-width
+        ds-spacing($ds-s-125)-$ds-btn-toggle-outlined__border-width;
     }
     &.ds-btn-toggle--selected .ds-btn-toggle__inner {
-      padding-left: ds-spacing-component($ds-sc-x4)-$ds-btn-toggle-outlined__border-width;
+      padding-left: ds-spacing($ds-s-100)-$ds-btn-toggle-outlined__border-width;
     }
   }
   &.ds-btn-toggle--xsmall {
     .ds-btn-toggle__inner {
       @include ds-typography($ds-typography-detailstandard-button-small, true);
-      padding: ds-spacing-component($ds-sc-x1)-$ds-btn-toggle-outlined__border-width
-        ds-spacing-component($ds-sc-x3)-$ds-btn-toggle-outlined__border-width;
+      padding: ds-spacing($ds-s-025)-$ds-btn-toggle-outlined__border-width
+        ds-spacing($ds-s-075)-$ds-btn-toggle-outlined__border-width;
       .ds-icon {
-        margin: ds-spacing-component(0 $ds-sc-x1 0 0);
+        margin: ds-spacing(0 $ds-s-025 0 0);
         height: $ds-btn-toggle__icon-size-xsmall;
         width: $ds-btn-toggle__icon-size-xsmall;
       }
     }
     &.ds-btn-toggle--selected .ds-btn-toggle__inner {
-      padding-left: ds-spacing-component($ds-sc-x2)-$ds-btn-toggle-outlined__border-width;
+      padding-left: ds-spacing($ds-s-050)-$ds-btn-toggle-outlined__border-width;
     }
   }
 }

package/components/byline/byline.scss

@@ -24,10 +24,10 @@ $ds-byline__image-size--direkt: 36px;
   &::after {
     content: "";
     height: ds-metrics-border-width(x1);
-    width: calc(100% - (ds-spacing-component($ds-sc-outer) * 2));
+    width: calc(100% - (ds-spacing($ds-s-outer) * 2));
     background-color: $ds-color-border-primary;
     position: absolute;
-    left: ds-spacing-component($ds-sc-x4);
+    left: ds-spacing($ds-s-100);
     bottom: 0;
   }
 
@@ -39,7 +39,7 @@ $ds-byline__image-size--direkt: 36px;
     align-items: center;
     justify-content: space-between;
     position: relative;
-    padding: ds-spacing-component($ds-sc-x4 $ds-sc-outer);
+    padding: ds-spacing($ds-s-100 $ds-s-outer);
     width: 100%;
 
     &::before {
@@ -87,7 +87,7 @@ $ds-byline__image-size--direkt: 36px;
     width: $ds-byline__image-size;
     border-radius: 50%;
     overflow: hidden;
-    margin-right: ds-spacing-component($ds-sc-x4);
+    margin-right: ds-spacing($ds-s-100);
     background-color: $ds-color-component-primary-overlay;
     flex-shrink: 0;
   }
@@ -124,13 +124,13 @@ $ds-byline__image-size--direkt: 36px;
   .ds-byline__icon-right {
     color: $ds-color-icon-primary;
     display: inline-flex;
-    margin-left: ds-spacing-component($ds-sc-x4);
+    margin-left: ds-spacing($ds-s-100);
   }
 
   .ds-byline__btn-toggle {
     min-height: $ds-byline__icon-size;
     min-width: 48px;
-    margin-left: ds-spacing-component($ds-sc-x4);
+    margin-left: ds-spacing($ds-s-100);
   }
 
   @include ds-hover() {
@@ -146,7 +146,7 @@ $ds-byline__image-size--direkt: 36px;
   &.ds-byline--direkt {
     .ds-byline__titles {
       .ds-byline__subtitle {
-        line-height: ds-spacing-component($ds-sc-x4);
+        line-height: ds-spacing($ds-s-100);
       }
     }
     .ds-byline__image {
@@ -159,8 +159,8 @@ $ds-byline__image-size--direkt: 36px;
     }
 
     .ds-byline__inner {
-      padding-top: ds-spacing-component($ds-sc-x3);
-      padding-bottom: ds-spacing-component($ds-sc-x3);
+      padding-top: ds-spacing($ds-s-075);
+      padding-bottom: ds-spacing($ds-s-075);
     }
   }
 

package/components/checkbox/checkbox.scss

@@ -16,7 +16,7 @@ $ds-checkbox__icon-size: 24px;
     justify-content: center;
     color: $ds-color-text-primary;
     position: relative;
-    padding: ds-spacing-component($ds-sc-x3);
+    padding: ds-spacing($ds-s-075);
     &::before {
       content: "";
       position: absolute;
@@ -27,11 +27,11 @@ $ds-checkbox__icon-size: 24px;
       bottom: 0;
     }
     .ds-checkbox__text {
-      margin: ds-spacing-component(0 0 0 $ds-sc-x2, rem);
+      margin: ds-spacing(0 0 0 $ds-s-050, rem);
       @include ds-typography($ds-typography-functional-body02regular);
       @at-root .ds-force-px#{&} {
         @include ds-typography($ds-typography-functional-body02regular, true);
-        margin: ds-spacing-component(0 0 0 $ds-sc-x2);
+        margin: ds-spacing(0 0 0 $ds-s-050);
       }
     }
     .ds-checkbox__icon {
@@ -98,13 +98,13 @@ $ds-checkbox__icon-size: 24px;
     }
 
     .ds-form-field__error-message {
-      margin-top: ds-spacing-component($ds-sc-x1);
-      padding: 0 ds-spacing-component($ds-sc-x3) ds-spacing-component($ds-sc-x3);
+      margin-top: ds-spacing($ds-s-025);
+      padding: ds-spacing(0 $ds-s-075 $ds-s-075);
 
       .ds-icon {
-        margin: 0 ds-spacing-component($ds-sc-x2 0 $ds-sc-x8, rem);
+        margin: ds-spacing(0 $ds-s-050 0 $ds-s-200, rem);
         @at-root .ds-force-px#{&} {
-          margin: ds-spacing-component(0 $ds-sc-x2 0 $ds-sc-x8);
+          margin: ds-spacing(0 $ds-s-050 0 $ds-s-200);
         }
       }
     }
@@ -113,11 +113,11 @@ $ds-checkbox__icon-size: 24px;
 
 .ds-checkbox--condensed {
   .ds-checkbox__inner {
-    padding: ds-spacing-component($ds-sc-x1);
+    padding: ds-spacing($ds-s-025);
   }
   &.ds-form-field__error .ds-form-field__error-message,
   .invalid .ds-form-field__error-message {
-    padding: 0 ds-spacing-component($ds-sc-x1) ds-spacing-component($ds-sc-x1);
+    padding: ds-spacing(0 $ds-s-025 $ds-s-025);
   }
 }
 

package/components/divider/divider.scss

@@ -2,7 +2,7 @@
 
 .ds-divider {
   margin: 0;
-  @include ds-spacing-layout($ds-sl-gap-vertical-static-medium 0);
+  padding: ds-spacing($ds-s-gap-vertical-static-medium 0);
 
   hr {
     margin: 0 auto;

package/components/factbox/factbox.scss

@@ -3,7 +3,7 @@
 
 $ds-factbox__grade-size: 40px;
 $ds-factbox__show-more-fade-height: 48px;
-$ds-factbox__padding: ds-spacing-component($ds-sc-x4);
+$ds-factbox__padding: ds-spacing($ds-s-100);
 /* stylelint-disable-next-line */
 $ds-factbox-border-width: 4px;
 $ds-factbox__padding-left: $ds-factbox__padding - $ds-factbox-border-width;
@@ -13,8 +13,8 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
   background-color: $ds-color-surface-background;
   box-sizing: border-box;
   margin: 0;
-  @include ds-spacing-layout(
-    $ds-sl-gap-vertical-static-medium 0 $ds-sl-gap-vertical-static-large
+  padding: ds-spacing(
+    $ds-s-gap-vertical-static-medium 0 $ds-s-gap-vertical-static-large
   );
 
   .ds-factbox__inner {
@@ -45,7 +45,7 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
       @include ds-typography($ds-typography-functional-body02regular, true);
     }
     p {
-      margin: 0 0 ds-spacing-component($ds-sc-x4);
+      margin: ds-spacing(0 0 $ds-s-100);
     }
     p:last-child {
       margin-bottom: 0;
@@ -67,18 +67,18 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
   .ds-factbox__title {
     @include ds-typography($ds-typography-functional-heading01bold);
     color: $ds-color-text-primary;
-    margin: 0 0 ds-spacing-component($ds-sc-x4);
+    margin: ds-spacing(0 0 $ds-s-100);
     @at-root .ds-force-px#{&} {
       @include ds-typography($ds-typography-functional-heading01bold, true);
     }
   }
   .ds-factbox__vignette {
     color: $ds-theme-color;
-    margin-right: ds-spacing-component($ds-sc-x1);
+    margin-right: ds-spacing($ds-s-025);
   }
   .ds-icon--grade {
     color: $ds-color-icon-primary;
-    margin: 0 0 ds-spacing-component($ds-sc-x4);
+    margin: ds-spacing(0 0 $ds-s-100);
     display: block;
     height: ds-px-to-rem($ds-factbox__grade-size);
     svg {
@@ -111,7 +111,7 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
   .ds-factbox__show-more--collapsable {
     background-color: $ds-color-surface-background;
     button {
-      margin: ds-spacing-component($ds-sc-x4 0 0);
+      margin: ds-spacing($ds-s-100 0 0);
     }
     &,
     &:not([data-factbox-expanded]) .ds-factbox__expand-more,