@bonniernews/dn-design-system-web 3.0.0-alpha.4 → 3.0.0-alpha.6

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 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.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)
+
+
+### Features
+
+* **web:** video caption component ([#706](https://github.com/BonnierNews/dn-design-system/issues/706)) ([a64278a](https://github.com/BonnierNews/dn-design-system/commit/a64278a64840e2422baed278b7bae29055dabf78))
+
+
+
 ## [3.0.0-alpha.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.3...@bonniernews/dn-design-system-web@3.0.0-alpha.4) (2023-03-08)
 
 

package/README.md

@@ -10,4 +10,4 @@ Storybook latest: [https://designsystem-latest.dn.se/](https://designsystem-late
 
 Github: [https://github.com/BonnierNews/dn-design-system/tree/main/web/src](https://github.com/BonnierNews/dn-design-system/tree/main/web/src)
 
-For specific instructions see each component or helper readme.
+For specific instructions see each component or helper readme

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,