@bonniernews/dn-design-system-web 3.0.0-alpha.5 → 3.0.0-alpha.7

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 3.0.0-alpha.7 (2023-03-10)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.6](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.5...@bonniernews/dn-design-system-web@3.0.0-alpha.6) (2023-03-08)
+
+
+### Bug Fixes
+
+* **web:** add sass variables for spacing and refactor helper ([#719](https://github.com/BonnierNews/dn-design-system/issues/719)) ([e65417c](https://github.com/BonnierNews/dn-design-system/commit/e65417cbcbe54d6d388e7b7f8b88e33ec7598588))
+
+
+
 ## [3.0.0-alpha.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.4...@bonniernews/dn-design-system-web@3.0.0-alpha.5) (2023-03-08)
 
 

package/assets/article-image/article-image.scss

@@ -5,7 +5,7 @@
 
   > figcaption {
     @include ds-typography($ds-typography-functional-body01regular);
-    margin-top: ds-spacing-component(x2);
+    margin-top: ds-spacing-component($ds-sc-x2);
     color: $ds-color-text-primary;
 
     @at-root .ds-force-px#{&} {

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

@@ -8,7 +8,7 @@
 $ds-form-field__error-icon-size: 20px;
 
 .ds-form-field__help-text {
-  margin-top: ds-spacing-component(x2);
+  margin-top: ds-spacing-component($ds-sc-x2);
   margin-bottom: 0;
   color: $ds-color-text-primary-02;
   @include ds-typography($ds-typography-functional-body01regular);
@@ -22,9 +22,9 @@ $ds-form-field__error-icon-size: 20px;
 .invalid {
   .ds-form-field__error-message {
     display: flex;
-    margin-top: ds-spacing-component(x2);
+    margin-top: ds-spacing-component($ds-sc-x2);
     .ds-icon {
-      margin: 0 ds-px-to-rem(ds-spacing-component(x2)) 0 0;
+      margin: 0 ds-px-to-rem(ds-spacing-component($ds-sc-x2)) 0 0;
       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;
@@ -48,7 +48,7 @@ $ds-form-field__error-icon-size: 20px;
   .invalid {
     .ds-form-field__error-message {
       .ds-icon {
-        margin: 0 ds-spacing-component(x2) 0 0;
+        margin: 0 ds-spacing-component($ds-sc-x2) 0 0;
         height: $ds-form-field__error-icon-size;
         width: $ds-form-field__error-icon-size;
       }

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

@@ -3,6 +3,6 @@
 
 .ds-article-image--body {
   @include ds-spacing-layout(
-    gap-vertical-static-medium 0 gap-vertical-static-large
+    $ds-sl-gap-vertical-static-medium 0 $ds-sl-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(gap-vertical-static-large, px, padding-bottom);
+  @include ds-spacing-layout($ds-sl-gap-vertical-static-large, padding-bottom);
 }

package/components/badge/badge.scss

@@ -21,12 +21,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(x1));
+    padding: 0 ds-px-to-rem(ds-spacing-component($ds-sc-x1));
     @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(x1);
+      padding: 0 ds-spacing-component($ds-sc-x1);
     }
   }
 

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

@@ -5,18 +5,18 @@
   background-color: $ds-color-surface-background;
   margin: 0;
   @include ds-spacing-layout(
-    gap-vertical-static-medium 0 gap-vertical-static-large
+    $ds-sl-gap-vertical-static-medium 0 $ds-sl-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(x8 x4 x4);
+    padding: ds-spacing-component($ds-sc-x8 $ds-sc-x4 $ds-sc-x4);
   }
 
   .ds-blocked-content__body {
-    margin: ds-spacing-component(0 0 x8);
+    margin: ds-spacing-component(0 0 $ds-sc-x8);
     @include ds-typography($ds-typography-functional-body02regular);
     color: $ds-color-text-primary;
     @at-root .ds-force-px#{&} {
@@ -26,7 +26,7 @@
   .ds-blocked-content__title {
     @include ds-typography($ds-typography-functional-heading01semibold);
     color: $ds-color-text-primary;
-    margin: 0 0 ds-spacing-component(x2);
+    margin: 0 0 ds-spacing-component($ds-sc-x2);
     @at-root .ds-force-px#{&} {
       @include ds-typography($ds-typography-functional-heading01semibold, true);
     }

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

@@ -47,18 +47,18 @@
     position: relative;
   }
   .ds-buddy-menu__header {
-    padding: ds-spacing-component(x8 x4 x4);
-    margin: ds-spacing-component(0 0 x4);
+    padding: ds-spacing-component($ds-sc-x8 $ds-sc-x4 $ds-sc-x4);
+    margin: ds-spacing-component(0 0 $ds-sc-x4);
   }
   .ds-buddy-menu__close {
     position: absolute;
-    right: ds-spacing-component(x1);
-    top: ds-spacing-component(x1);
+    right: ds-spacing-component($ds-sc-x1);
+    top: ds-spacing-component($ds-sc-x1);
   }
   .ds-buddy-menu__greeting {
     @include ds-typography($ds-typography-functional-heading03bold);
     color: $ds-color-text-primary;
-    margin: ds-spacing-component(0 0 x4);
+    margin: ds-spacing-component(0 0 $ds-sc-x4);
     display: block;
   }
   .ds-buddy-menu__account-title,
@@ -66,26 +66,26 @@
   .ds-buddy-menu__links-title {
     @include ds-typography($ds-typography-functional-body02semibold);
     color: $ds-color-text-primary;
-    margin: ds-spacing-component(0 0 x1);
+    margin: ds-spacing-component(0 0 $ds-sc-x1);
   }
   .ds-buddy-menu__links-title {
-    padding: ds-spacing-component(0 x4);
+    padding: ds-spacing-component(0 $ds-sc-x4);
   }
   .ds-buddy-menu__addons-list {
     padding: 0;
-    margin: ds-spacing-component(0 0 x4);
+    margin: ds-spacing-component(0 0 $ds-sc-x4);
     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 x4);
+      margin: ds-spacing-component(0 0 $ds-sc-x4);
     }
   }
   .ds-buddy-menu__account-level {
     @include ds-typography($ds-typography-functional-body02regular);
     color: $ds-color-text-primary-02;
-    margin: ds-spacing-component(0 0 x4);
+    margin: ds-spacing-component(0 0 $ds-sc-x4);
     display: block;
   }
   .ds-buddy-menu__links-list {
@@ -114,7 +114,7 @@
   }
 
   .ds-buddy-menu__campaign {
-    margin: 0 -#{ds-spacing-component(x4)};
+    margin: 0 -#{ds-spacing-component($ds-sc-x4)};
   }
 
   &.ds-buddy-menu--skola {

package/components/button/button.scss

@@ -41,7 +41,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(x3, rem) - ds-px-to-rem($ds-btn-outlined__border-width) ds-spacing-component(x6, rem) - ds-px-to-rem($ds-btn-outlined__border-width);
+    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);
     position: relative;
     &::before {
       content: "";
@@ -80,9 +80,11 @@ $ds-btn__icon-size: 24px;
 
 .ds-btn--small .ds-btn__inner {
   padding: ds-px-to-rem(
-      ds-spacing-component(x2) - $ds-btn-outlined__border-width
+      ds-spacing-component($ds-sc-x2) - $ds-btn-outlined__border-width
     )
-    ds-px-to-rem(ds-spacing-component(x5) - $ds-btn-outlined__border-width);
+    ds-px-to-rem(
+      ds-spacing-component($ds-sc-x5) - $ds-btn-outlined__border-width
+    );
 }
 
 @include ds-mq-only-breakpoint(mobile) {
@@ -103,7 +105,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 x2, rem);
+    margin: ds-spacing-component(0 0 0 $ds-sc-x2, rem);
     svg {
       fill: currentColor;
     }
@@ -113,12 +115,12 @@ $ds-btn__icon-size: 24px;
 .ds-btn--icon-right {
   .ds-btn__inner {
     padding-right: ds-px-to-rem(
-      ds-spacing-component(x5) - $ds-btn-outlined__border-width
+      ds-spacing-component($ds-sc-x5) - $ds-btn-outlined__border-width
     );
   }
   &.ds-btn--small .ds-btn__inner {
     padding-right: ds-px-to-rem(
-      ds-spacing-component(x4) - $ds-btn-outlined__border-width
+      ds-spacing-component($ds-sc-x4) - $ds-btn-outlined__border-width
     );
   }
 }
@@ -127,15 +129,15 @@ $ds-btn__icon-size: 24px;
   .ds-btn__inner {
     flex-direction: row-reverse;
     padding-left: ds-px-to-rem(
-      ds-spacing-component(x5) - $ds-btn-outlined__border-width
+      ds-spacing-component($ds-sc-x5) - $ds-btn-outlined__border-width
     );
     .ds-icon {
-      margin: ds-spacing-component(0 x2 0 0, rem);
+      margin: ds-spacing-component(0 $ds-sc-x2 0 0, rem);
     }
   }
   &.ds-btn--small .ds-btn__inner {
     padding-left: ds-px-to-rem(
-      ds-spacing-component(x4) - $ds-btn-outlined__border-width
+      ds-spacing-component($ds-sc-x4) - $ds-btn-outlined__border-width
     );
   }
 }
@@ -289,37 +291,37 @@ $ds-btn__icon-size: 24px;
 
 .ds-btn.ds-force-px {
   .ds-btn__inner {
-    padding: ds-spacing-component(x3) - $ds-btn-outlined__border-width
-      ds-spacing-component(x6) - $ds-btn-outlined__border-width;
+    padding: ds-spacing-component($ds-sc-x3) - $ds-btn-outlined__border-width
+      ds-spacing-component($ds-sc-x6) - $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 x2);
+      margin: ds-spacing-component(0 0 0 $ds-sc-x2);
       height: $ds-btn__icon-size;
       width: $ds-btn__icon-size;
     }
   }
   &.ds-btn--icon-right .ds-btn__inner {
-    padding-right: ds-spacing-component(x5)-$ds-btn-outlined__border-width;
+    padding-right: ds-spacing-component($ds-sc-x5)-$ds-btn-outlined__border-width;
   }
   &.ds-btn--icon-left .ds-btn__inner {
-    padding-left: ds-spacing-component(x5)-$ds-btn-outlined__border-width;
+    padding-left: ds-spacing-component($ds-sc-x5)-$ds-btn-outlined__border-width;
     .ds-icon {
-      margin: ds-spacing-component(0 x2 0 0);
+      margin: ds-spacing-component(0 $ds-sc-x2 0 0);
     }
   }
   &.ds-btn--small {
     .ds-btn__inner {
-      padding: ds-spacing-component(x2)-$ds-btn-outlined__border-width
-        ds-spacing-component(x5)-$ds-btn-outlined__border-width;
+      padding: ds-spacing-component($ds-sc-x2)-$ds-btn-outlined__border-width
+        ds-spacing-component($ds-sc-x5)-$ds-btn-outlined__border-width;
     }
     &.ds-btn--icon-right .ds-btn__inner {
-      padding-right: ds-spacing-component(x4)-$ds-btn-outlined__border-width;
+      padding-right: ds-spacing-component($ds-sc-x4)-$ds-btn-outlined__border-width;
     }
     &.ds-btn--icon-left .ds-btn__inner {
-      padding-left: ds-spacing-component(x4)-$ds-btn-outlined__border-width;
+      padding-left: ds-spacing-component($ds-sc-x4)-$ds-btn-outlined__border-width;
     }
   }
 }

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

@@ -44,7 +44,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(x3, rem) - ds-px-to-rem($ds-btn-toggle-outlined__border-width) ds-spacing-component(x6, rem) - ds-px-to-rem($ds-btn-toggle-outlined__border-width);
+    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);
     position: relative;
     &::before {
       content: "";
@@ -86,20 +86,20 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
 
 .ds-btn-toggle--small .ds-btn-toggle__inner {
   padding: ds-px-to-rem(
-      ds-spacing-component(x2) - $ds-btn-toggle-outlined__border-width
+      ds-spacing-component($ds-sc-x2) - $ds-btn-toggle-outlined__border-width
     )
     ds-px-to-rem(
-      ds-spacing-component(x5) - $ds-btn-toggle-outlined__border-width
+      ds-spacing-component($ds-sc-x5) - $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(x1) - $ds-btn-toggle-outlined__border-width
+      ds-spacing-component($ds-sc-x1) - $ds-btn-toggle-outlined__border-width
     )
     ds-px-to-rem(
-      ds-spacing-component(x3) - $ds-btn-toggle-outlined__border-width
+      ds-spacing-component($ds-sc-x3) - $ds-btn-toggle-outlined__border-width
     );
 }
 
@@ -164,7 +164,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(x5) - $ds-btn-toggle-outlined__border-width
+      ds-spacing-component($ds-sc-x5) - $ds-btn-toggle-outlined__border-width
     );
 
     .ds-btn-toggle__on {
@@ -178,7 +178,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 x2 0 0, rem);
+      margin: ds-spacing-component(0 $ds-sc-x2 0 0, rem);
       svg {
         fill: currentColor;
       }
@@ -187,18 +187,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(x4) - $ds-btn-toggle-outlined__border-width
+      ds-spacing-component($ds-sc-x4) - $ds-btn-toggle-outlined__border-width
     );
   }
 
   &.ds-btn-toggle--xsmall .ds-btn-toggle__inner {
     padding-left: ds-px-to-rem(
-      ds-spacing-component(x2) - $ds-btn-toggle-outlined__border-width
+      ds-spacing-component($ds-sc-x2) - $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 x1 0 0, rem);
+      margin: ds-spacing-component(0 $ds-sc-x1 0 0, rem);
     }
   }
 
@@ -219,40 +219,40 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
 
 .ds-btn-toggle.ds-force-px {
   .ds-btn-toggle__inner {
-    padding: ds-spacing-component(x3) - $ds-btn-toggle-outlined__border-width
-      ds-spacing-component(x6) - $ds-btn-toggle-outlined__border-width;
+    /* 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;
     @include ds-typography($ds-typography-detailstandard-button, true);
   }
   &.ds-btn-toggle--selected .ds-btn-toggle__inner {
-    padding-left: ds-spacing-component(x5)-$ds-btn-toggle-outlined__border-width;
+    padding-left: ds-spacing-component($ds-sc-x5)-$ds-btn-toggle-outlined__border-width;
     .ds-icon {
-      margin: ds-spacing-component(0 x2 0 0);
+      margin: ds-spacing-component(0 $ds-sc-x2 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(x2)-$ds-btn-toggle-outlined__border-width
-        ds-spacing-component(x5)-$ds-btn-toggle-outlined__border-width;
+      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;
     }
     &.ds-btn-toggle--selected .ds-btn-toggle__inner {
-      padding-left: ds-spacing-component(x4)-$ds-btn-toggle-outlined__border-width;
+      padding-left: ds-spacing-component($ds-sc-x4)-$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(x1)-$ds-btn-toggle-outlined__border-width
-        ds-spacing-component(x3)-$ds-btn-toggle-outlined__border-width;
+      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;
       .ds-icon {
-        margin: ds-spacing-component(0 x1 0 0);
+        margin: ds-spacing-component(0 $ds-sc-x1 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(x2)-$ds-btn-toggle-outlined__border-width;
+      padding-left: ds-spacing-component($ds-sc-x2)-$ds-btn-toggle-outlined__border-width;
     }
   }
 }

package/components/byline/byline.scss

@@ -23,10 +23,10 @@ $ds-byline__image-size: 44px;
   &::after {
     content: "";
     height: ds-metrics-border-width(x1);
-    width: calc(100% - (ds-spacing-component(outer) * 2));
+    width: calc(100% - (ds-spacing-component($ds-sc-outer) * 2));
     background-color: $ds-color-border-primary;
     position: absolute;
-    left: ds-spacing-component(x4);
+    left: ds-spacing-component($ds-sc-x4);
     bottom: 0;
   }
 
@@ -39,7 +39,7 @@ $ds-byline__image-size: 44px;
     align-items: center;
     justify-content: space-between;
     position: relative;
-    padding: ds-spacing-component(x4 outer);
+    padding: ds-spacing-component($ds-sc-x4 $ds-sc-outer);
     width: 100%;
 
     &::before {
@@ -88,7 +88,7 @@ $ds-byline__image-size: 44px;
     width: $ds-byline__image-size;
     border-radius: 50%;
     overflow: hidden;
-    margin-right: ds-spacing-component(x4);
+    margin-right: ds-spacing-component($ds-sc-x4);
     background-color: $ds-color-component-primary-overlay;
     flex-shrink: 0;
   }
@@ -125,13 +125,13 @@ $ds-byline__image-size: 44px;
   .ds-byline__icon-right {
     color: $ds-color-icon-primary;
     display: inline-flex;
-    margin-left: ds-spacing-component(x4);
+    margin-left: ds-spacing-component($ds-sc-x4);
   }
 
   .ds-byline__btn-toggle {
     min-height: 44px;
     min-width: 48px;
-    margin-left: ds-spacing-component(x4);
+    margin-left: ds-spacing-component($ds-sc-x4);
   }
 
   @include ds-hover() {

package/components/checkbox/checkbox.scss

@@ -20,7 +20,7 @@ $ds-checkbox__icon-size: 24px;
     justify-content: center;
     color: $ds-color-text-primary;
     position: relative;
-    padding: ds-spacing-component(x3);
+    padding: ds-spacing-component($ds-sc-x3);
     &::before {
       content: "";
       position: absolute;
@@ -31,11 +31,11 @@ $ds-checkbox__icon-size: 24px;
       bottom: 0;
     }
     .ds-checkbox__text {
-      margin: ds-spacing-component(0 0 0 x2, rem);
+      margin: ds-spacing-component(0 0 0 $ds-sc-x2, 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 x2);
+        margin: ds-spacing-component(0 0 0 $ds-sc-x2);
       }
     }
     .ds-checkbox__icon {
@@ -99,13 +99,13 @@ $ds-checkbox__icon-size: 24px;
     }
 
     .ds-form-field__error-message {
-      margin-top: ds-spacing-component(x1);
-      padding: 0 ds-spacing-component(x3) ds-spacing-component(x3);
+      margin-top: ds-spacing-component($ds-sc-x1);
+      padding: 0 ds-spacing-component($ds-sc-x3) ds-spacing-component($ds-sc-x3);
 
       .ds-icon {
-        margin: 0 ds-spacing-component(x2, rem) 0 ds-spacing-component(x8, rem);
+        margin: 0 ds-spacing-component($ds-sc-x2 0 $ds-sc-x8, rem);
         @at-root .ds-force-px#{&} {
-          margin: ds-spacing-component(0 x2 0 x8);
+          margin: ds-spacing-component(0 $ds-sc-x2 0 $ds-sc-x8);
         }
       }
     }
@@ -114,11 +114,11 @@ $ds-checkbox__icon-size: 24px;
 
 .ds-checkbox--condensed {
   .ds-checkbox__inner {
-    padding: ds-spacing-component(x1);
+    padding: ds-spacing-component($ds-sc-x1);
   }
   &.ds-form-field__error .ds-form-field__error-message,
   .invalid .ds-form-field__error-message {
-    padding: 0 ds-spacing-component(x1) ds-spacing-component(x1);
+    padding: 0 ds-spacing-component($ds-sc-x1) ds-spacing-component($ds-sc-x1);
   }
 }
 

package/components/disclaimer/disclaimer.scss

@@ -5,8 +5,8 @@ $ds-disclaimer__icon-size: 20px;
 $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
 
 .ds-disclaimer {
-  padding: ds-spacing-component(x3 x4);
-  margin-bottom: ds-spacing-component(x4);
+  padding: ds-spacing-component($ds-sc-x3 $ds-sc-x4);
+  margin-bottom: ds-spacing-component($ds-sc-x4);
   background-color: $ds-color-surface-raised;
   box-sizing: border-box;
 
@@ -16,7 +16,7 @@ $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
   }
 
   .ds-disclaimer__icon-wrapper {
-    margin-right: ds-spacing-component(x2);
+    margin-right: ds-spacing-component($ds-sc-x2);
   }
 
   .ds-disclaimer__body-html {

package/components/divider/divider.scss

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

package/components/factbox/factbox.scss

@@ -3,7 +3,8 @@
 
 $ds-factbox__grade-size: 40px + (ds-metrics-border-width(x2) * 2);
 $ds-factbox__show-more-fade-height: 48px;
-$ds-factbox__padding: ds-spacing-component(x4);
+$ds-factbox__padding: ds-spacing-component($ds-sc-x4);
+/* stylelint-disable-next-line */
 $ds-factbox__padding-left: $ds-factbox__padding - ds-metrics-border-width(x2);
 $ds-factbox__max-height: 500px; // includes top/bottom spacing
 
@@ -12,7 +13,7 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
   box-sizing: border-box;
   margin: 0;
   @include ds-spacing-layout(
-    gap-vertical-static-medium 0 gap-vertical-static-large
+    $ds-sl-gap-vertical-static-medium 0 $ds-sl-gap-vertical-static-large
   );
 
   .ds-factbox__inner {
@@ -43,7 +44,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(x4);
+      margin: 0 0 ds-spacing-component($ds-sc-x4);
     }
     p:last-child {
       margin-bottom: 0;
@@ -64,18 +65,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(x4);
+    margin: 0 0 ds-spacing-component($ds-sc-x4);
     @at-root .ds-force-px#{&} {
       @include ds-typography($ds-typography-functional-heading01bold, true);
     }
   }
   .ds-factbox__vignette {
     color: $ds-color-component-brand;
-    margin-right: ds-spacing-component(x1);
+    margin-right: ds-spacing-component($ds-sc-x1);
   }
   .ds-factbox__grade {
     color: $ds-color-icon-primary;
-    margin: 0 0 ds-spacing-component(x4);
+    margin: 0 0 ds-spacing-component($ds-sc-x4);
 
     .ds-icon {
       display: block;
@@ -111,7 +112,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(x4 0 0);
+      margin: ds-spacing-component($ds-sc-x4 0 0);
     }
     &,
     &:not([data-factbox-expanded]) .ds-factbox__expand-more,

package/components/footer/footer.scss

@@ -6,23 +6,23 @@
 @use "../../foundations/helpers/colors.scss" as *;
 @use "../../foundations/helpers/links.scss" as *;
 
-$ds-footer-row-gap-spacing-token: x8;
-$ds-footer-row-padding-spacing-token: x4;
-$ds-footer-column-gap: ds-spacing-component(x8) * 2; // @todo change to token when available
+$ds-footer-row-gap-spacing-token: $ds-sc-x8;
+$ds-footer-row-padding-spacing-token: $ds-sc-x4;
+$ds-footer-column-gap: ds-spacing-component($ds-sc-x8) * 2; // @todo change to token when available
 
 .ds-footer {
   background-color: $ds-color-static-black;
 
   &__inner {
     color: $ds-color-static-white;
-    padding: ds-spacing-component(x8 x4);
+    padding: ds-spacing-component($ds-sc-x8 $ds-sc-x4);
     display: grid;
     margin: 0 auto;
   }
 
   @include ds-mq-smallest-breakpoint(tablet) {
     &__inner {
-      padding: ds-spacing-component(x5) * 4; // @todo change to token when available
+      padding: ds-spacing-component($ds-sc-x5) * 4; // @todo change to token when available
     }
   }
 
@@ -83,7 +83,7 @@ $ds-footer-column-gap: ds-spacing-component(x8) * 2; // @todo change to token wh
 
     img {
       min-width: 64px;
-      margin: ds-spacing-component(0 x4 0 0);
+      margin: ds-spacing-component(0 $ds-sc-x4 0 0);
     }
   }
 
@@ -95,7 +95,7 @@ $ds-footer-column-gap: ds-spacing-component(x8) * 2; // @todo change to token wh
 
     @include ds-mq-smallest-breakpoint(tablet) {
       grid-template-columns: repeat(3, auto);
-      grid-column-gap: ds-spacing-component(x4);
+      grid-column-gap: ds-spacing-component($ds-sc-x4);
     }
 
     @include ds-mq-smallest-breakpoint(desktop) {
@@ -105,7 +105,7 @@ $ds-footer-column-gap: ds-spacing-component(x8) * 2; // @todo change to token wh
 
     h2 {
       @include ds-typography($ds-typography-functional-body02bold);
-      margin: ds-spacing-component(0 0 x4);
+      margin: ds-spacing-component(0 0 $ds-sc-x4);
     }
 
     ul {
@@ -115,7 +115,7 @@ $ds-footer-column-gap: ds-spacing-component(x8) * 2; // @todo change to token wh
       padding: 0;
 
       li:not(:last-of-type) {
-        margin: 0 0 ds-spacing-component(x2);
+        margin: 0 0 ds-spacing-component($ds-sc-x2);
       }
 
       a {
@@ -134,11 +134,11 @@ $ds-footer-column-gap: ds-spacing-component(x8) * 2; // @todo change to token wh
 
     a {
       @include ds-link();
-      margin: ds-spacing-component(x4 x4 0 0);
+      margin: ds-spacing-component($ds-sc-x4 $ds-sc-x4 0 0);
       display: inline-block;
 
       @include ds-mq-smallest-breakpoint(tablet) {
-        margin: ds-spacing-component(x4 x6 0 0);
+        margin: ds-spacing-component($ds-sc-x4 $ds-sc-x6 0 0);
       }
 
       &:last-of-type {

package/components/icon-button/icon-button.scss

@@ -29,7 +29,7 @@ $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
     align-items: center;
     justify-content: center;
     position: relative;
-    padding: ds-spacing-component(x2)-$ds-btn-outlined__border-width;
+    padding: ds-spacing-component($ds-sc-x2)-$ds-btn-outlined__border-width;
 
     &::before {
       content: "";
@@ -67,11 +67,11 @@ $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
   }
 
   &.ds-icon-btn--small .ds-icon-btn__inner {
-    padding: ds-spacing-component(x1)-$ds-btn-outlined__border-width;
+    padding: ds-spacing-component($ds-sc-x1)-$ds-btn-outlined__border-width;
   }
 
   &.ds-icon-btn--large .ds-icon-btn__inner {
-    padding: ds-spacing-component(x3)-$ds-btn-outlined__border-width;
+    padding: ds-spacing-component($ds-sc-x3)-$ds-btn-outlined__border-width;
   }
 
   &:focus-visible {

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

@@ -29,7 +29,7 @@ $ds-btn-toggle-outlined__border-width: ds-metrics-border-width(x1);
     align-items: center;
     justify-content: center;
     position: relative;
-    padding: ds-spacing-component(x2)-$ds-btn-toggle-outlined__border-width;
+    padding: ds-spacing-component($ds-sc-x2)-$ds-btn-toggle-outlined__border-width;
 
     .ds-icon-btn-toggle__on {
       display: none;
@@ -71,11 +71,11 @@ $ds-btn-toggle-outlined__border-width: ds-metrics-border-width(x1);
   }
 
   &.ds-icon-btn-toggle--small .ds-icon-btn-toggle__inner {
-    padding: ds-spacing-component(x1)-$ds-btn-toggle-outlined__border-width;
+    padding: ds-spacing-component($ds-sc-x1)-$ds-btn-toggle-outlined__border-width;
   }
 
   &.ds-icon-btn-toggle--large .ds-icon-btn-toggle__inner {
-    padding: ds-spacing-component(x3)-$ds-btn-toggle-outlined__border-width;
+    padding: ds-spacing-component($ds-sc-x3)-$ds-btn-toggle-outlined__border-width;
   }
 
   &:focus-visible {

package/components/list-item/list-item.scss

@@ -33,7 +33,7 @@ $ds-list-item__icon-size: 24px;
     align-items: center;
     justify-content: space-between;
     position: relative;
-    padding: ds-spacing-component(x4 outer);
+    padding: ds-spacing-component($ds-sc-x4 $ds-sc-outer);
     width: 100%;
 
     &::before {
@@ -99,17 +99,17 @@ $ds-list-item__icon-size: 24px;
       @include ds-typography($ds-typography-functional-body01regular, true);
     }
     color: $ds-color-text-primary-02;
-    margin-left: ds-spacing-component(x4);
+    margin-left: ds-spacing-component($ds-sc-x4);
   }
 
   .ds-list-item__icon-left {
     display: inline-flex;
-    margin-right: ds-spacing-component(x4);
+    margin-right: ds-spacing-component($ds-sc-x4);
   }
 
   .ds-list-item__icon-right {
     display: inline-flex;
-    margin-left: ds-spacing-component(x4);
+    margin-left: ds-spacing-component($ds-sc-x4);
   }
 
   @include ds-hover() {
@@ -143,10 +143,10 @@ $ds-list-item__icon-size: 24px;
   &.ds-list-item--accordion-active + .ds-list-item__accordion-inner::after {
     content: "";
     height: ds-metrics-border-width(x1);
-    width: calc(100% - (ds-spacing-component(x4) * 2));
+    width: calc(100% - (ds-spacing-component($ds-sc-x4) * 2));
     background-color: $ds-color-border-primary;
     position: absolute;
-    left: ds-spacing-component(x4);
+    left: ds-spacing-component($ds-sc-x4);
     bottom: 0;
   }
 
@@ -240,13 +240,13 @@ $ds-list-item__icon-size: 24px;
   cursor: default;
   .ds-list-item__inner {
     display: flex;
-    padding: 0 0 0 ds-spacing-component(outer);
+    padding: 0 0 0 ds-spacing-component($ds-sc-outer);
   }
   .ds-list-item__titles {
-    padding: ds-spacing-component(x4) 0;
+    padding: ds-spacing-component($ds-sc-x4) 0;
   }
   .ds-btn-toggle {
-    margin: 0 ds-spacing-component(outer) 0 ds-spacing-component(x4);
+    margin: ds-spacing-component(0 $ds-sc-outer 0 $ds-sc-x4);
   }
   a {
     @include ds-link($ds-link-list);

package/components/quote/quote.scss

@@ -5,7 +5,7 @@
   color: $ds-color-text-primary;
   margin: 0;
   @include ds-spacing-layout(
-    gap-vertical-static-medium 0 gap-vertical-static-large
+    $ds-sl-gap-vertical-static-medium 0 $ds-sl-gap-vertical-static-large
   );
   position: relative;
 
@@ -19,7 +19,7 @@
     height: 8px;
     color: $ds-color-component-brand;
     background: currentColor;
-    margin: ds-spacing-component(0 0 x2);
+    margin: ds-spacing-component(0 0 $ds-sc-x2);
   }
 
   &--culture .ds-quote__border {

package/components/radio-button/radio-button.scss

@@ -21,7 +21,7 @@ $ds-radio-btn__icon-size: 24px;
     justify-content: center;
     color: $ds-color-text-primary;
     position: relative;
-    padding: ds-spacing-component(x3);
+    padding: ds-spacing-component($ds-sc-x3);
     &::before {
       content: "";
       position: absolute;
@@ -32,11 +32,11 @@ $ds-radio-btn__icon-size: 24px;
       bottom: 0;
     }
     .ds-radio-btn__text {
-      margin: ds-spacing-component(0 0 0 x2, rem);
+      margin: ds-spacing-component(0 0 0 $ds-sc-x2, 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 x2);
+        margin: ds-spacing-component(0 0 0 $ds-sc-x2);
       }
     }
     .ds-radio-btn__icon {
@@ -100,13 +100,13 @@ $ds-radio-btn__icon-size: 24px;
     }
 
     .ds-form-field__error-message {
-      margin-top: ds-spacing-component(x1);
-      padding: 0 ds-spacing-component(x3) ds-spacing-component(x3);
+      margin-top: ds-spacing-component($ds-sc-x1);
+      padding: 0 ds-spacing-component($ds-sc-x3) ds-spacing-component($ds-sc-x3);
 
       .ds-icon {
-        margin: 0 ds-spacing-component(x2, rem) 0 ds-spacing-component(x8, rem);
+        margin: 0 ds-spacing-component($ds-sc-x2 0 $ds-sc-x8, rem);
         @at-root .ds-force-px#{&} {
-          margin: ds-spacing-component(0 x2 0 x8);
+          margin: ds-spacing-component(0 $ds-sc-x2 0 $ds-sc-x8);
         }
       }
     }
@@ -115,11 +115,11 @@ $ds-radio-btn__icon-size: 24px;
 
 .ds-radio-btn--condensed {
   .ds-radio-btn__inner {
-    padding: ds-spacing-component(x1);
+    padding: ds-spacing-component($ds-sc-x1);
   }
   &.ds-form-field__error .ds-form-field__error-message,
   .invalid .ds-form-field__error-message {
-    padding: 0 ds-spacing-component(x1) ds-spacing-component(x1);
+    padding: 0 ds-spacing-component($ds-sc-x1) ds-spacing-component($ds-sc-x1);
   }
 }
 

package/components/switch/switch.scss

@@ -12,13 +12,13 @@ $ds-switch__container-width: 44px;
   align-items: flex-start;
 
   .ds-switch__inner {
-    padding: ds-spacing-component(x3 0);
+    padding: ds-spacing-component($ds-sc-x3 0);
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     .ds-switch__meta {
-      margin: ds-spacing-component(0 x2 0 0);
+      margin: ds-spacing-component(0 $ds-sc-x2 0 0);
       color: $ds-color-text-primary-02;
       @include ds-typography($ds-typography-functional-body01regular);
       @at-root .ds-force-px#{&} {

package/components/text-button/text-button.scss

@@ -54,7 +54,7 @@ $ds-text-btn__icon-size: 24px;
   .ds-text-btn__inner {
     background-color: transparent;
     border-radius: ds-metrics-border-radius(x1);
-    padding: ds-spacing-component(x3);
+    padding: ds-spacing-component($ds-sc-x3);
     position: relative;
     &::before {
       content: "";
@@ -108,7 +108,7 @@ $ds-text-btn__icon-size: 24px;
     display: flex;
     height: ds-px-to-rem($ds-text-btn__icon-size);
     width: ds-px-to-rem($ds-text-btn__icon-size);
-    margin: ds-spacing-component(0 0 0 x2);
+    margin: ds-spacing-component(0 0 0 $ds-sc-x2);
     color: $ds-color-icon-primary;
     svg {
       fill: currentColor;
@@ -129,19 +129,19 @@ $ds-text-btn__icon-size: 24px;
 }
 
 .ds-text-btn--icon-left .ds-text-btn__inner {
-  padding: ds-spacing-component(x3 x3 x3 x2);
+  padding: ds-spacing-component($ds-sc-x3 $ds-sc-x3 $ds-sc-x3 $ds-sc-x2);
   flex-direction: row-reverse;
   .ds-icon {
-    margin: ds-spacing-component(0 x2 0 0);
+    margin: ds-spacing-component(0 $ds-sc-x2 0 0);
   }
 }
 
 .ds-text-btn--icon-right .ds-text-btn__inner {
-  padding: ds-spacing-component(x3 x2 x3 x3);
+  padding: ds-spacing-component($ds-sc-x3 $ds-sc-x2 $ds-sc-x3 $ds-sc-x3);
 }
 
 .ds-text-btn--condensed .ds-text-btn__inner {
-  padding: ds-spacing-component(x1);
+  padding: ds-spacing-component($ds-sc-x1);
 }
 
 @include ds-mq-only-breakpoint(mobile) {

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

@@ -57,7 +57,7 @@ $ds-text-btn-toggle__icon-size: 24px;
     justify-content: center;
     background-color: transparent;
     border-radius: ds-metrics-border-radius(x1);
-    padding: ds-spacing-component(x3 x3 x3 x2);
+    padding: ds-spacing-component($ds-sc-x3 $ds-sc-x3 $ds-sc-x3 $ds-sc-x2);
     position: relative;
     &::before {
       content: "";
@@ -74,7 +74,7 @@ $ds-text-btn-toggle__icon-size: 24px;
       display: flex;
       height: ds-px-to-rem($ds-text-btn-toggle__icon-size);
       width: ds-px-to-rem($ds-text-btn-toggle__icon-size);
-      margin: ds-spacing-component(0 x2 0 0);
+      margin: ds-spacing-component(0 $ds-sc-x2 0 0);
       color: $ds-color-icon-primary;
       svg {
         fill: currentColor;
@@ -128,5 +128,5 @@ $ds-text-btn-toggle__icon-size: 24px;
 }
 
 .ds-text-btn-toggle--condensed .ds-text-btn-toggle__inner {
-  padding: ds-spacing-component(x1);
+  padding: ds-spacing-component($ds-sc-x1);
 }

package/components/text-input/text-input.scss

@@ -9,7 +9,7 @@
 
 $ds-text-input-toggle-btn__width: 32px;
 $ds-text-input-toggle-btn__area: (
-  $ds-text-input-toggle-btn__width + ds-spacing-component(x2)
+  $ds-text-input-toggle-btn__width + ds-spacing-component($ds-sc-x2)
 );
 
 .ds-form-field__error {
@@ -19,7 +19,7 @@ $ds-text-input-toggle-btn__area: (
 }
 
 .ds-text-input {
-  padding-top: ds-px-to-rem(ds-spacing-component(x2));
+  padding-top: ds-px-to-rem(ds-spacing-component($ds-sc-x2));
   position: relative;
   color: $ds-color-text-primary;
 }
@@ -30,8 +30,8 @@ $ds-text-input-toggle-btn__area: (
   color: $ds-color-text-primary;
   background-color: $ds-color-component-secondary;
   @include ds-typography($ds-typography-functional-body02regular);
-  padding: ds-px-to-rem(ds-spacing-component(x4) - ds-metrics-border-width(x1))
-    ds-spacing-component(x4) - ds-metrics-border-width(x1);
+  /* stylelint-disable-next-line */
+  padding: ds-px-to-rem(ds-spacing-component($ds-sc-x4) - ds-metrics-border-width(x1)) ds-spacing-component($ds-sc-x4) - ds-metrics-border-width(x1);
   border: solid ds-metrics-border-width(x1) $ds-color-border-primary-02;
   border-radius: ds-metrics-border-radius(x1);
   margin: 0;
@@ -59,9 +59,9 @@ $ds-text-input-toggle-btn__area: (
 
   &:focus {
     padding: ds-px-to-rem(
-        ds-spacing-component(x4) - ds-metrics-border-width(x2)
+        ds-spacing-component($ds-sc-x4) - ds-metrics-border-width(x2)
       )
-      ds-spacing-component(x4) - ds-metrics-border-width(x2);
+      ds-spacing-component($ds-sc-x4) - ds-metrics-border-width(x2);
     border-color: $ds-color-border-primary-03;
     border-width: ds-metrics-border-width(x2);
 
@@ -87,18 +87,18 @@ $ds-text-input-toggle-btn__area: (
 
 .ds-text-input__label {
   position: absolute;
-  top: ds-px-to-rem(ds-spacing-component(x6));
-  left: ds-spacing-component(x4);
+  top: ds-px-to-rem(ds-spacing-component($ds-sc-x6));
+  left: ds-spacing-component($ds-sc-x4);
   z-index: 1;
   transition: font-size 0.1s ease-in, top 0.1s ease-in;
   @include ds-typography($ds-typography-functional-body02regular);
   &::before {
     content: "";
-    width: calc(100% + ds-spacing-component(x2));
-    left: -#{ds-spacing-component(x1)};
+    width: calc(100% + ds-spacing-component($ds-sc-x2));
+    left: -#{ds-spacing-component($ds-sc-x1)};
     height: ds-metrics-border-width(x1);
     position: absolute;
-    top: ds-px-to-rem(ds-spacing-component(x2));
+    top: ds-px-to-rem(ds-spacing-component($ds-sc-x2));
     z-index: -1;
     background-color: transparent; // for animation
     transition: background-color 0.2s ease-in-out;
@@ -107,8 +107,8 @@ $ds-text-input-toggle-btn__area: (
 
 .ds-icon-btn.ds-text-input__password-toggle {
   position: absolute;
-  top: ds-px-to-rem(ds-spacing-component(x5));
-  right: ds-spacing-component(x1);
+  top: ds-px-to-rem(ds-spacing-component($ds-sc-x5));
+  right: ds-spacing-component($ds-sc-x1);
   z-index: 1;
   min-width: 0;
   min-height: 0;
@@ -116,12 +116,12 @@ $ds-text-input-toggle-btn__area: (
 
 .ds-force-px {
   &.ds-text-input {
-    padding-top: ds-spacing-component(x2);
+    padding-top: ds-spacing-component($ds-sc-x2);
   }
 
   .ds-text-input__input {
     @include ds-typography($ds-typography-functional-body02regular, true);
-    padding: ds-spacing-component(x4) - ds-metrics-border-width(x1);
+    padding: ds-spacing-component($ds-sc-x4) - ds-metrics-border-width(x1);
 
     &.password-toggle {
       padding-right: $ds-text-input-toggle-btn__area;
@@ -140,19 +140,19 @@ $ds-text-input-toggle-btn__area: (
     }
 
     &:focus {
-      padding: ds-spacing-component(x4) - ds-metrics-border-width(x2);
+      padding: ds-spacing-component($ds-sc-x4) - ds-metrics-border-width(x2);
     }
   }
 
   .ds-text-input__label {
     @include ds-typography($ds-typography-functional-body02regular, true);
-    top: ds-spacing-component(x6);
+    top: ds-spacing-component($ds-sc-x6);
     &::before {
-      top: ds-spacing-component(x2);
+      top: ds-spacing-component($ds-sc-x2);
     }
   }
 
   .ds-text-input__password-toggle {
-    top: ds-spacing-component(x5);
+    top: ds-spacing-component($ds-sc-x5);
   }
 }

package/components/thematic-break/thematic-break.scss

@@ -3,7 +3,7 @@
 .ds-thematic-break {
   margin: 0;
   @include ds-spacing-layout(
-    gap-vertical-static-medium 0 gap-vertical-static-large
+    $ds-sl-gap-vertical-static-medium 0 $ds-sl-gap-vertical-static-large
   );
 
   hr {

package/components/video-caption/video-caption.scss

@@ -6,7 +6,7 @@
 
   .ds-video-caption__duration {
     @include ds-typography($ds-typography-functional-body01bold);
-    margin-right: ds-spacing-component(x1);
+    margin-right: ds-spacing-component($ds-sc-x1);
   }
 
   @at-root .ds-force-px#{&} {

package/foundations/helpers/README-spacing.md

@@ -5,6 +5,21 @@
 
 # Spacing
 
+## use sass variable
+To avoid silent breaking changes use sass variable instead of raw token name.
+
+Ex: `margin: ds-spacing-component($ds-sc-x1 0 $ds-sc-x4)`
+
+Ex: `@include ds-spacing-layout($ds-sl-page-horizontal auto, padding-top)` 
+
+By using sass variables (instead of token name directly), if a spacing token used in scss is removed sass will not compile - which is a good thing!
+
+By using sass variables for spacing tokens you will see which tokens are available through auto complete.
+
+Variables with `$ds-sc-` prefix are available for `ds-spacing-component()`
+
+Variables with `$ds-sl-` prefix are available for `ds-spacing-layout()`
+
 ## ds-spacing-component | function
 
 Use for space _inside_ a component (or atom).
@@ -22,8 +37,15 @@ Dynamic spacings are static and are _not_ wrapped in any media query, the functi
 ```scss
 @use "@bonniernews/dn-design-system-web/foundations/helpers/forward.helpers.scss" as *;
 
-.test {
-  margin: ds-spacing-component(x1 x2 0, px, true);
+.test-1 {
+  margin: ds-spacing-component($ds-sc-x1 $ds-sc-x2 0);
+}
+
+// Outputs:
+4px 8px 0
+
+.test-2 {
+  margin: ds-spacing-component($ds-sc-x1 $ds-sc-x2 0, px, true);
 }
 
 // Outputs:
@@ -41,31 +63,47 @@ This mixin returns `property: value` wrapped in media query.
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |units | String | yes | one or more spacing tokens or `auto` or `0` | | Ex. 0 page-horizontal  |
-|sizeUnit | String | no | px, rem, em | px | |
 |property | String | no | padding, margin | padding | Use padding for layout spacing to avoid collapsing margins|
+|sizeUnit | String | no | px, rem, em | px | |
 |negative | bool | no | true, false | false | Applies to all units except for `auto` and `0` |
 
 ```scss
 @use "@bonniernews/dn-design-system-web/foundations/helpers/forward.helpers.scss" as *;
 
-.test {
+.test-1 {
+  @include ds-spacing-layout($ds-sl-page-top-small, padding-top);
+}
+
+// Outputs:
+@media (max-width: 1024px) {
+  .test-1 {
+    padding-top: 16px;
+  }
+}
+@media (min-width: 1025px) {
+  .test-1 {
+    padding-top: 32px;
+  }
+}
+
+.test-2 {
   @include ds-spacing-layout(
-    0 page-horizontal,
-    px,
+    0 $ds-sl-page-horizontal,
     margin,
+    px,
     true
   );
 }
 
 // Outputs:
 @media (max-width: 1024px) {
-  .test {
-      margin: 0 -16px;
+  .test-2 {
+    margin: 0 -16px;
   }
 }
 @media (min-width: 1025px) {
-  .test {
-      margin: 0 -32px;
+  .test-2 {
+    margin: 0 -32px;
   }
 }
 ```

package/foundations/helpers/spacing.scss

@@ -5,6 +5,8 @@
 @use "../variables/spacingComponent.scss" as *;
 @use "../variables/spacingLayout.scss" as *;
 @use "../variables/spacingLayoutLargeScreen.scss" as *;
+@forward '../variables/spacingComponentList.scss';
+@forward '../variables/spacingLayoutList.scss';
 
 @function ds-spacing-component(
   $units: null,
@@ -20,8 +22,8 @@
 
 @mixin ds-spacing-layout(
   $units: null,
-  $sizeUnit: "px",
   $property: padding,
+  $sizeUnit: "px",
   $negative: false
 ) {
   @if $units {

package/foundations/variables/spacingComponentList.scss

@@ -0,0 +1,10 @@
+$ds-sc-x1: x1;
+$ds-sc-x2: x2;
+$ds-sc-x3: x3;
+$ds-sc-x4: x4;
+$ds-sc-x5: x5;
+$ds-sc-x6: x6;
+$ds-sc-x8: x8;
+$ds-sc-x20: x20;
+$ds-sc-outer: outer;
+$ds-sc-outer-negative: outer-negative;

package/foundations/variables/spacingLayoutList.scss

@@ -0,0 +1,8 @@
+$ds-sl-page-horizontal: page-horizontal;
+$ds-sl-page-top-small: page-top-small;
+$ds-sl-page-top-large: page-top-large;
+$ds-sl-page-bottom: page-bottom;
+$ds-sl-gap-vertical-static-medium: gap-vertical-static-medium;
+$ds-sl-gap-vertical-static-large: gap-vertical-static-large;
+$ds-sl-gap-horizontal-static-small: gap-horizontal-static-small;
+$ds-sl-gap-vertical-static-small: gap-vertical-static-small;

package/foundations/variables/typographyTokensScreenLarge.scss

@@ -120,8 +120,8 @@ $typographyTokensScreenLarge: (
   expressive-heading04regular: (
     fontFamily: "DN Serif 22",
     fontWeight: Regular,
-    fontSize: 52,
-    lineHeight: 48
+    fontSize: 48,
+    lineHeight: 52
   ),
   expressive-heading04semibold: (
     fontFamily: "DN Serif 22",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "3.0.0-alpha.5",
+  "version": "3.0.0-alpha.7",
   "description": "DN design system for web.",
   "main": "index.js",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",

package/tokens/spacing-component-list.json

@@ -0,0 +1,12 @@
+{
+  "x1": "x1",
+  "x2": "x2",
+  "x3": "x3",
+  "x4": "x4",
+  "x5": "x5",
+  "x6": "x6",
+  "x8": "x8",
+  "x20": "x20",
+  "outer": "outer",
+  "outer-negative": "outer-negative"
+}

package/tokens/spacing-layout-list.json

@@ -0,0 +1,10 @@
+{
+  "page-horizontal": "page-horizontal",
+  "page-top-small": "page-top-small",
+  "page-top-large": "page-top-large",
+  "page-bottom": "page-bottom",
+  "gap-vertical-static-medium": "gap-vertical-static-medium",
+  "gap-vertical-static-large": "gap-vertical-static-large",
+  "gap-horizontal-static-small": "gap-horizontal-static-small",
+  "gap-vertical-static-small": "gap-vertical-static-small"
+}