@bonniernews/dn-design-system-web 3.0.0-alpha.2 → 3.0.0-alpha.21

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: "";
@@ -75,14 +75,17 @@ $ds-btn__icon-size: 24px;
   &,
   & .ds-btn__inner {
     width: 100%;
+    box-sizing: border-box;
   }
 }
 
 .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 +106,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 +116,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 +130,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 +292,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: "";
@@ -81,25 +81,26 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
   &,
   & .ds-btn-toggle__inner {
     width: 100%;
+    box-sizing: border-box;
   }
 }
 
 .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 +165,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 +179,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 +188,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 +220,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;
   }
@@ -101,9 +101,12 @@ $ds-byline__image-size: 44px;
     word-break: break-all;
 
     .ds-byline__title {
-      @include ds-typography($ds-typography-functional-heading01medium);
+      @include ds-typography($ds-typography-functional-heading01semibold);
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functional-heading01medium, true);
+        @include ds-typography(
+          $ds-typography-functional-heading01semibold,
+          true
+        );
       }
       color: $ds-color-text-primary;
       text-align: left;
@@ -122,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

@@ -1,8 +1,4 @@
-@use "../../foundations/helpers/spacing.scss" as *;
-@use "../../foundations/helpers/typography.scss" as *;
-@use "../../foundations/helpers/metrics.scss" as *;
-@use "../../foundations/helpers/utilities.scss" as *;
-@use "../../foundations/helpers/colors.scss" as *;
+@use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../../assets/form-field/form-field.scss" as *;
 @use "../../foundations/icons/icon.scss" as *;
 
@@ -20,7 +16,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 +27,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 +95,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 +110,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,24 +5,25 @@ $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);
-  background-color: $ds-color-surface-raised;
+  @include ds-spacing-layout($ds-sl-gap-vertical-static-medium, padding-bottom);
   box-sizing: border-box;
 
-  &--with-icon {
-    display: flex;
-    flex-direction: row;
+  .ds-disclaimer__body-html,
+  .ds-disclaimer__icon-wrapper {
+    background-color: $ds-color-surface-raised;
+    padding: ds-spacing-component($ds-sc-x3 $ds-sc-x4);
   }
 
   .ds-disclaimer__icon-wrapper {
-    margin-right: ds-spacing-component(x2);
+    // instead of margin to keep background color
+    padding-right: ds-spacing-component($ds-sc-x2);
   }
 
   .ds-disclaimer__body-html {
     @include ds-typography($ds-typography-functional-body01regular);
     margin: 0;
     color: $ds-color-text-primary-02;
+    flex-grow: 1;
 
     @at-root .ds-force-px#{&} {
       @include ds-typography($ds-typography-functional-body01regular, true);
@@ -31,12 +32,12 @@ $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
     a {
       @include ds-link($ds-link-paragraph);
     }
-
+    b,
     strong {
-      @include ds-typography($ds-typography-functional-body01medium);
+      @include ds-typography($ds-typography-functional-body01semibold);
       color: $ds-color-text-primary;
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functional-body01medium, true);
+        @include ds-typography($ds-typography-functional-body01semibold, true);
       }
     }
   }
@@ -57,11 +58,24 @@ $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
     }
   }
 
-  &--native {
-    background-color: $ds-color-static-ad-yellow;
+  &.ds-disclaimer--with-icon {
+    display: flex;
+    flex-direction: row;
+
+    .ds-disclaimer__body-html {
+      padding-left: 0;
+    }
+  }
+
+  &.ds-disclaimer--native {
+    .ds-disclaimer__body-html,
+    .ds-disclaimer__icon-wrapper {
+      background-color: $ds-color-static-ad-yellow;
+    }
 
     .ds-icon,
     .ds-disclaimer__body-html,
+    .ds-disclaimer__body-html b,
     .ds-disclaimer__body-html strong {
       color: $ds-color-static-black;
     }

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;
@@ -51,10 +52,11 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
     a {
       @include ds-link($ds-link-article-body);
     }
+    b,
     strong {
-      @include ds-typography($ds-typography-functional-body02medium);
+      @include ds-typography($ds-typography-functional-body02semibold);
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functional-body02medium, true);
+        @include ds-typography($ds-typography-functional-body02semibold, true);
       }
     }
     img {
@@ -64,18 +66,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 +113,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

@@ -1,28 +1,22 @@
-@use "../../foundations/helpers/spacing.scss" as *;
-@use "../../foundations/helpers/typography.scss" as *;
-@use "../../foundations/helpers/mediaQueries.scss" as *;
-@use "../../foundations/helpers/metrics.scss" as *;
-@use "../../foundations/helpers/utilities.scss" as *;
-@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
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+
+$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 +77,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 +89,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 +99,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 +109,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 {
@@ -133,12 +127,12 @@ $ds-footer-column-gap: ds-spacing-component(x8) * 2; // @todo change to token wh
     margin-top: ds-spacing-component($ds-footer-row-gap-spacing-token);
 
     a {
-      @include ds-link();
-      margin: ds-spacing-component(x4 x4 0 0);
+      @include ds-link($ds-link-list);
+      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 {