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

package/components/floating-button/floating-button.scss

@@ -4,53 +4,53 @@
 @use "../spinner/spinner.scss" as *;
 
 .ds-floating-btn {
-  --ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x3 $ds-sc-x5, rem)};
+  --ds-floating-btn__inner-padding: #{ds-spacing($ds-s-075 $ds-s-125, rem)};
   --ds-floating-btn__icon-size: #{ds-px-to-rem(24px)};
 
   &.ds-force-px {
-    --ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x3 $ds-sc-x5)};
+    --ds-floating-btn__inner-padding: #{ds-spacing($ds-s-075 $ds-s-125)};
     --ds-floating-btn__icon-size: 24px;
   }
 
   &.ds-floating-btn--icon-left {
-    --ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x3 $ds-sc-x5 $ds-sc-x3 $ds-sc-x4, rem)};
-    --ds-floating-btn__icon-margin: #{ds-spacing-component(0 $ds-sc-x2 0 0)};
+    --ds-floating-btn__inner-padding: #{ds-spacing($ds-s-075 $ds-s-125 $ds-s-075 $ds-s-100, rem)};
+    --ds-floating-btn__icon-margin: #{ds-spacing(0 $ds-s-050 0 0)};
 
     &.ds-force-px {
-      --ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x3 $ds-sc-x5 $ds-sc-x3 $ds-sc-x4)};
+      --ds-floating-btn__inner-padding: #{ds-spacing($ds-s-075 $ds-s-125 $ds-s-075 $ds-s-100)};
     }
   }
 
   &.ds-floating-btn--icon-right {
-    --ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x3 $ds-sc-x4 $ds-sc-x3 $ds-sc-x5, rem)};
-    --ds-floating-btn__icon-margin: #{ds-spacing-component(0 0 0 $ds-sc-x2)};
+    --ds-floating-btn__inner-padding: #{ds-spacing($ds-s-075 $ds-s-100 $ds-s-075 $ds-s-125, rem)};
+    --ds-floating-btn__icon-margin: #{ds-spacing(0 0 0 $ds-s-050)};
 
     &.ds-force-px {
-      --ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x3 $ds-sc-x4 $ds-sc-x3 $ds-sc-x5)};
+      --ds-floating-btn__inner-padding: #{ds-spacing($ds-s-075 $ds-s-100 $ds-s-075 $ds-s-125)};
     }
   }
 
   &.ds-floating-btn--small {
-    --ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x2 $ds-sc-x5, rem)};
+    --ds-floating-btn__inner-padding: #{ds-spacing($ds-s-050 $ds-s-125, rem)};
 
     &.ds-force-px {
-      --ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x2 $ds-sc-x5)};
+      --ds-floating-btn__inner-padding: #{ds-spacing($ds-s-050 $ds-s-125)};
 
       &.ds-floating-btn--icon-left {
-        --ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x2 $ds-sc-x5 $ds-sc-x2 $ds-sc-x4)};
+        --ds-floating-btn__inner-padding: #{ds-spacing($ds-s-050 $ds-s-125 $ds-s-050 $ds-s-100)};
       }
 
       &.ds-floating-btn--icon-right {
-        --ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x2 $ds-sc-x4 $ds-sc-x2 $ds-sc-x5)};
+        --ds-floating-btn__inner-padding: #{ds-spacing($ds-s-050 $ds-s-100 $ds-s-050 $ds-s-125)};
       }
     }
 
     &.ds-floating-btn--icon-left {
-      --ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x2 $ds-sc-x5 $ds-sc-x2 $ds-sc-x4, rem)};
+      --ds-floating-btn__inner-padding: #{ds-spacing($ds-s-050 $ds-s-125 $ds-s-050 $ds-s-100, rem)};
     }
 
     &.ds-floating-btn--icon-right {
-      --ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x2 $ds-sc-x4 $ds-sc-x2 $ds-sc-x5, rem)};
+      --ds-floating-btn__inner-padding: #{ds-spacing($ds-s-050 $ds-s-100 $ds-s-050 $ds-s-125, rem)};
     }
   }
 }

package/components/footer/footer.scss

@@ -1,22 +1,22 @@
 @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-row-gap-spacing-token: $ds-s-200;
+$ds-footer-row-padding-spacing-token: $ds-s-100;
+$ds-footer-column-gap: ds-spacing($ds-s-400);
 
 .ds-footer {
   background-color: $ds-color-static-black;
 
   &__inner {
     color: $ds-color-static-white;
-    padding: ds-spacing-component($ds-sc-x8 $ds-sc-x4);
+    padding: ds-spacing($ds-s-200 $ds-s-100);
     display: grid;
     margin: 0 auto;
   }
 
   @include ds-mq-smallest-breakpoint(tablet) {
     &__inner {
-      padding: ds-spacing-component($ds-sc-x5) * 4; // @todo change to token when available
+      padding: ds-spacing($ds-s-500);
     }
   }
 
@@ -57,7 +57,7 @@ $ds-footer-column-gap: ds-spacing-component($ds-sc-x8) * 2; // @todo change to t
 
   &__rudolf,
   &__editors {
-    padding: ds-spacing-component(
+    padding: ds-spacing(
       $ds-footer-row-padding-spacing-token 0 $ds-footer-row-gap-spacing-token
     );
 
@@ -77,19 +77,19 @@ $ds-footer-column-gap: ds-spacing-component($ds-sc-x8) * 2; // @todo change to t
 
     img {
       min-width: 64px;
-      margin: ds-spacing-component(0 $ds-sc-x4 0 0);
+      margin: ds-spacing(0 $ds-s-100 0 0);
     }
   }
 
   &__link-grid {
     display: grid;
-    grid-row-gap: ds-spacing-component($ds-footer-row-gap-spacing-token);
+    grid-row-gap: ds-spacing($ds-footer-row-gap-spacing-token);
     justify-content: space-between;
-    padding: ds-spacing-component(0 0 $ds-footer-row-gap-spacing-token);
+    padding: ds-spacing(0 0 $ds-footer-row-gap-spacing-token);
 
     @include ds-mq-smallest-breakpoint(tablet) {
       grid-template-columns: repeat(3, auto);
-      grid-column-gap: ds-spacing-component($ds-sc-x4);
+      grid-column-gap: ds-spacing($ds-s-100);
     }
 
     @include ds-mq-smallest-breakpoint(desktop) {
@@ -99,7 +99,7 @@ $ds-footer-column-gap: ds-spacing-component($ds-sc-x8) * 2; // @todo change to t
 
     h2 {
       @include ds-typography($ds-typography-functional-body02bold);
-      margin: ds-spacing-component(0 0 $ds-sc-x4);
+      margin: ds-spacing(0 0 $ds-s-100);
     }
 
     ul {
@@ -109,7 +109,7 @@ $ds-footer-column-gap: ds-spacing-component($ds-sc-x8) * 2; // @todo change to t
       padding: 0;
 
       li:not(:last-of-type) {
-        margin: 0 0 ds-spacing-component($ds-sc-x2);
+        margin: ds-spacing(0 0 $ds-s-050);
       }
 
       a {
@@ -119,20 +119,20 @@ $ds-footer-column-gap: ds-spacing-component($ds-sc-x8) * 2; // @todo change to t
   }
 
   &__logo {
-    padding: ds-spacing-component($ds-footer-row-padding-spacing-token 0 0);
+    padding: ds-spacing($ds-footer-row-padding-spacing-token 0 0);
   }
 
   &__channels {
     @include ds-typography($ds-typography-functional-body01regular);
-    margin-top: ds-spacing-component($ds-footer-row-gap-spacing-token);
+    margin-top: ds-spacing($ds-footer-row-gap-spacing-token);
 
     a {
       @include ds-link($ds-link-list);
-      margin: ds-spacing-component($ds-sc-x4 $ds-sc-x4 0 0);
+      margin: ds-spacing($ds-s-100 $ds-s-100 0 0);
       display: inline-block;
 
       @include ds-mq-smallest-breakpoint(tablet) {
-        margin: ds-spacing-component($ds-sc-x4 $ds-sc-x6 0 0);
+        margin: ds-spacing($ds-s-100 $ds-s-150 0 0);
       }
 
       &:last-of-type {

package/components/group-header/group-header.scss

@@ -33,13 +33,13 @@
   .ds-group-header__icon,
   .ds-btn-toggle {
     flex-shrink: 0;
-    margin-right: ds-spacing-component($ds-sc-x4);
+    margin-right: ds-spacing($ds-s-100);
   }
 
   .ds-group-header__arrows {
     display: flex;
     flex-shrink: 0;
-    padding-right: ds-spacing-component($ds-sc-x2);
+    padding-right: ds-spacing($ds-s-050);
   }
 
   .ds-btn-toggle, .ds-group-header__arrows {
@@ -81,14 +81,14 @@
   }
 
   .ds-group-header__title {
-    padding: ds-spacing-component($ds-sc-x3 $ds-sc-x4);
+    padding: ds-spacing($ds-s-075 $ds-s-100);
     flex: 1;
     @include ds-typography($ds-typography-functional-body02bold);
     margin: 0;
   }
 
   &--bottom-border .ds-group-header__title {
-    padding-bottom: ds-spacing-component($ds-sc-x3) - ds-metrics-border-width(x1);
+    padding-bottom: ds-spacing($ds-s-075) - ds-metrics-border-width(x1);
   }
 
   &--bautaxl .ds-group-header__title {

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

@@ -7,7 +7,7 @@ $ds-icon-btn__min-clickable-area: 48px;
 $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
 
 .ds-icon-btn {
-  --ds-icon-btn__inner-padding: #{ds-spacing-component($ds-sc-x2)-$ds-btn-outlined__border-width};
+  --ds-icon-btn__inner-padding: #{ds-spacing($ds-s-050)-$ds-btn-outlined__border-width};
   --ds-icon-btn__icon-size: #{ds-px-to-rem(24px)};
 
   &.ds-force-px {
@@ -19,7 +19,7 @@ $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
   }
 
   &.ds-icon-btn--large {
-    --ds-icon-btn__inner-padding: #{ds-spacing-component($ds-sc-x3)-$ds-btn-outlined__border-width};
+    --ds-icon-btn__inner-padding: #{ds-spacing($ds-s-075)-$ds-btn-outlined__border-width};
   }
 }
 

package/components/image-caption/image-caption.scss

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

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

@@ -32,7 +32,7 @@ $ds-list-item__icon-size: 24px;
     align-items: center;
     justify-content: space-between;
     position: relative;
-    padding: ds-spacing-component($ds-sc-x4 $ds-sc-outer);
+    padding: ds-spacing($ds-s-100 $ds-s-outer);
     width: 100%;
 
     &::before {
@@ -97,17 +97,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($ds-sc-x4);
+    margin-left: ds-spacing($ds-s-100);
   }
 
   .ds-list-item__icon-left {
     display: inline-flex;
-    margin-right: ds-spacing-component($ds-sc-x4);
+    margin-right: ds-spacing($ds-s-100);
   }
 
   .ds-list-item__icon-right {
     display: inline-flex;
-    margin-left: ds-spacing-component($ds-sc-x4);
+    margin-left: ds-spacing($ds-s-100);
   }
 
   @include ds-hover() {
@@ -141,10 +141,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($ds-sc-x4) * 2));
+    width: calc(100% - (ds-spacing($ds-s-100) * 2));
     background-color: $ds-color-border-primary;
     position: absolute;
-    left: ds-spacing-component($ds-sc-x4);
+    left: ds-spacing($ds-s-100);
     bottom: 0;
   }
 
@@ -238,13 +238,13 @@ $ds-list-item__icon-size: 24px;
   cursor: default;
   .ds-list-item__inner {
     display: flex;
-    padding: 0 0 0 ds-spacing-component($ds-sc-outer);
+    padding: ds-spacing(0 0 0 $ds-s-outer);
   }
   .ds-list-item__titles {
-    padding: ds-spacing-component($ds-sc-x4) 0;
+    padding: ds-spacing($ds-s-100) 0;
   }
   .ds-btn-toggle {
-    margin: ds-spacing-component(0 $ds-sc-outer 0 $ds-sc-x4);
+    margin: ds-spacing(0 $ds-s-outer 0 $ds-s-100);
   }
   a {
     @include ds-link($ds-link-list);

package/components/quote/quote.scss

@@ -4,8 +4,8 @@
   @include ds-typography($ds-typography-detailarticle-quote);
   color: $ds-color-text-primary;
   margin: 0;
-  @include ds-spacing-layout(
-    $ds-sl-gap-vertical-static-medium 0 $ds-sl-gap-vertical-static-large
+  padding: ds-spacing(
+    $ds-s-gap-vertical-static-medium 0 $ds-s-gap-vertical-static-large
   );
   position: relative;
 
@@ -19,6 +19,6 @@
     height: 8px;
     color: $ds-theme-color;
     background: currentColor;
-    margin: ds-spacing-component(0 0 $ds-sc-x2);
+    margin: ds-spacing(0 0 $ds-s-050);
   }
 }

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

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

package/components/switch/switch.scss

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

package/components/teaser-image/teaser-image.scss

@@ -9,8 +9,8 @@
     position: absolute;
     bottom: 0;
     right: 0;
-    padding: ds-spacing-component($ds-sc-x1 $ds-sc-x2);
-    margin-left: ds-spacing-component($ds-sc-x2);
+    padding: ds-spacing($ds-s-025 $ds-s-050);
+    margin-left: ds-spacing($ds-s-050);
 
     @include ds-typography($ds-typography-functional-meta01regular, true);
     color: $ds-color-static-white;

package/components/teaser-large/teaser-large.scss

@@ -15,9 +15,9 @@
   .ds-teaser__content {
     display: flex;
     flex-direction: row;
-    @include ds-spacing-layout(
-      $ds-sl-teaser-vertical-small $ds-sl-teaser-horizontal
-        $ds-sl-teaser-vertical-medium
+    padding: ds-spacing(
+      $ds-s-teaser-vertical-small $ds-s-teaser-horizontal
+        $ds-s-teaser-vertical-medium
     );
 
     .ds-teaser__content-inner {
@@ -66,14 +66,14 @@
   .ds-teaser__byline {
     overflow: hidden;
     position: relative;
-    margin-left: ds-spacing-component($ds-sc-x4);
+    margin-left: ds-spacing($ds-s-100);
 
     // margin-bottom needs to be the negative value of padding-bottom on .ds-teaser__content
     @include ds-mq-only-breakpoint(mobile) {
-      margin-bottom: ds-spacing-component($ds-sc-x3, "px", true);
+      margin-bottom: ds-spacing($ds-s-075, "px", true);
     }
     @include ds-mq-smallest-breakpoint(tablet) {
-      margin-bottom: ds-spacing-component($ds-sc-x4, "px", true);
+      margin-bottom: ds-spacing($ds-s-100, "px", true);
     }
 
     .picture {
@@ -95,14 +95,14 @@
     @include ds-mq-largest-breakpoint(mobile) {
       width: 96px;
       min-height: 96px;
-      margin-left: ds-spacing-component($ds-sc-x2);
+      margin-left: ds-spacing($ds-s-050);
     }
 
     @include ds-mq-smallest-breakpoint(tablet) {
       width: 144px;
       // En bylinebild bör va lika hög som en "grekisk byst" - man ska se lite skjortkrage!
       min-height: 110px;
-      margin-left: ds-spacing-component($ds-sc-x4);
+      margin-left: ds-spacing($ds-s-100);
     }
   }
 
@@ -127,7 +127,7 @@
       .ds-teaser__byline {
         width: 96px;
         min-height: 96px;
-        margin-left: ds-spacing-component($ds-sc-x2);
+        margin-left: ds-spacing($ds-s-050);
       }
     }
   }

package/components/teaser-list-swipe/teaser-list-swipe.scss

@@ -11,13 +11,13 @@
   @include ds-teaser-focus(2px);
 
   .ds-teaser__carousel {
-    margin: ds-spacing-component(0 $ds-sc-x4);
-    padding-bottom: ds-spacing-component($ds-sc-x3);
+    margin: ds-spacing(0 $ds-s-100);
+    padding-bottom: ds-spacing($ds-s-075);
     overflow-x: scroll;
     display: grid;
     grid-auto-columns: max-content;
     grid-auto-flow: column;
-    gap: ds-spacing-component($ds-sc-x2);
+    gap: ds-spacing($ds-s-050);
 
     @include ds-teaser-focus(2px);
   }

package/components/teaser-list-vertical/teaser-list-vertical.scss

@@ -22,7 +22,7 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
 
   .ds-teaser-list-vertical__link {
     position: relative;
-    padding: ds-spacing-component($ds-sc-x4, rem);
+    padding: ds-spacing($ds-s-100, rem);
 
     &::before {
       content: "";
@@ -36,7 +36,7 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
   }
 
   .ds-teaser-list-vertical__item {
-    padding: ds-spacing-component($ds-sc-x3 $ds-sc-x4, rem);
+    padding: ds-spacing($ds-s-075 $ds-s-100, rem);
     display: block;
     text-decoration: none;
     position: relative;
@@ -46,7 +46,7 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
       position: absolute;
       bottom: 0;
       height: ds-metrics-border-width(x1);
-      width: calc(100% - ds-spacing-component($ds-sc-x8));
+      width: calc(100% - ds-spacing($ds-s-200));
       background-color: $ds-color-border-primary;
     }
 
@@ -57,7 +57,7 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
 
     .ds-teaser-list-vertical__item-title,
     .ds-teaser-list-vertical__item-notes {
-      margin: 0 0 0 (ds-spacing-component($ds-sc-x2, rem) + $ds-dot-size);
+      margin: 0 0 0 (ds-spacing($ds-s-050, rem) + $ds-dot-size);
     }
 
     .ds-teaser-list-vertical__item-title {
@@ -69,7 +69,7 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
     .ds-teaser-list-vertical__item-notes {
       @include ds-typography($ds-typography-functional-meta02regular);
       color: $ds-color-text-primary-02;
-      margin-top: ds-spacing-component($ds-sc-x2, rem);
+      margin-top: ds-spacing($ds-s-050, rem);
     }
 
     @include ds-hover() {
@@ -80,7 +80,7 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
   }
 
   .ds-teaser-list-vertical__media-item {
-    padding: ds-spacing-component($ds-sc-x3 $ds-sc-x4, rem);
+    padding: ds-spacing($ds-s-075 $ds-s-100, rem);
     display: flex;
     justify-content: space-between;
     text-decoration: none;
@@ -91,7 +91,7 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
       position: absolute;
       bottom: 0;
       height: ds-metrics-border-width(x1);
-      width: calc(100% - ds-spacing-component($ds-sc-x8));
+      width: calc(100% - ds-spacing($ds-s-200));
       background-color: $ds-color-border-primary;
     }
 
@@ -110,14 +110,14 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
     .ds-teaser-list-vertical__media-item-notes {
       @include ds-typography($ds-typography-functional-meta02regular);
       color: $ds-color-text-primary-02;
-      margin-top: ds-spacing-component($ds-sc-x2, rem);
+      margin-top: ds-spacing($ds-s-050, rem);
     }
 
     .ds-teaser-list-vertical__media-item-img {
       flex: 0 0 91px;
       align-self: flex-start;
       position: relative;
-      margin-left: ds-spacing-component($ds-sc-x4);
+      margin-left: ds-spacing($ds-s-100);
 
       .ds-icon {
         width: $ds-teaser-list-vertical-media-icon-size;

package/components/teaser-longlife/teaser-longlife.scss

@@ -31,7 +31,7 @@
     bottom: 0;
     left: 0;
     z-index: 2;
-    padding: ds-spacing-component($ds-sc-x4);
+    padding: ds-spacing($ds-s-100);
   }
 
   &:not(:has(.ds-teaser-image))  {

package/components/teaser-native/teaser-native.scss

@@ -7,12 +7,12 @@
   border-bottom: 4px solid $ds-color-static-ad-yellow;
 
   .ds-teaser__media {
-    @include ds-spacing-layout($ds-sl-teaser-vertical-medium, margin-bottom);
+    margin-bottom: ds-spacing($ds-s-teaser-vertical-medium);
   }
 
   .ds-teaser__content {
     display: block;
-    @include ds-spacing-layout($ds-sl-teaser-vertical-small $ds-sl-teaser-horizontal $ds-sl-teaser-vertical-medium);
+    padding: ds-spacing($ds-s-teaser-vertical-small $ds-s-teaser-horizontal $ds-s-teaser-vertical-medium);
   }
 
   .ds-teaser__title {
@@ -29,7 +29,7 @@
   &.ds-teaser--native-right,
   &.ds-teaser--native-large {
     .ds-teaser__media {
-      @include ds-spacing-layout(0, margin);
+      margin: 0;
     }
   }
 
@@ -54,7 +54,7 @@
     }
 
     .ds-teaser__media {
-      margin-left: ds-spacing-component($ds-sc-x4);
+      margin-left: ds-spacing($ds-s-100);
       float: right;
 
       @include ds-mq-only-breakpoint(mobile) {
@@ -89,7 +89,7 @@
     span {
       display: flex;
       align-items: center;
-      padding: ds-spacing-component(0 $ds-sc-x4);
+      padding: ds-spacing(0 $ds-s-100);
       background-color: $ds-color-static-black;
       color: $ds-color-static-white;
     }

package/components/teaser-onsite/teaser-onsite.scss

@@ -2,8 +2,8 @@
 @use "../../assets/teaser/teaser.scss" as *;
 
 .ds-teaser.ds-teaser--onsite {
-  @include ds-spacing-layout(
-    $ds-sl-teaser-vertical-medium $ds-sl-teaser-horizontal
+  padding: ds-spacing(
+    $ds-s-teaser-vertical-medium $ds-s-teaser-horizontal
   );
   display: flex;
 
@@ -28,7 +28,7 @@
   }
 
   .ds-teaser__media {
-    margin-right: ds-spacing-component($ds-sc-x4);
+    margin-right: ds-spacing($ds-s-100);
     width: 56px;
     height: 56px;
   }

package/components/teaser-package/teaser-package.scss

@@ -20,7 +20,7 @@
     top: 0;
     left: 0;
     right: 0;
-    @include ds-spacing-layout(0 $ds-sl-teaser-horizontal, margin);
+    margin: ds-spacing(0 $ds-s-teaser-horizontal);
     box-sizing: border-box;
     z-index: 5;
   }

package/components/teaser-right-now/teaser-right-now.scss

@@ -5,8 +5,8 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  @include ds-spacing-layout(
-    $ds-sl-teaser-vertical-medium $ds-sl-teaser-horizontal
+  padding: ds-spacing(
+    $ds-s-teaser-vertical-medium $ds-s-teaser-horizontal
   );
 
   .ds-teaser__title {

package/components/teaser-slideshow/teaser-slideshow.scss

@@ -14,12 +14,9 @@
   }
 
   .ds-teaser__content {
-    @include ds-spacing-layout(
-      $ds-sl-teaser-vertical-medium $ds-sl-teaser-horizontal
+    padding: ds-spacing(
+      $ds-s-teaser-vertical-medium $ds-s-teaser-horizontal $ds-s-100 $ds-s-teaser-horizontal
     );
-    padding-bottom: ds-spacing-component(
-      $ds-sc-x4
-    ) !important; // !important to override spacing set in media query above
     display: block;
     color: $ds-color-text-primary;