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

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

@@ -4,7 +4,7 @@
 .ds-split-container {
   padding: ds-spacing(
     $ds-s-teaser-vertical-small $ds-s-teaser-horizontal
-      $ds-sl-teaser-vertical-medium
+      $ds-s-teaser-vertical-medium
   );
   display: flex;
   flex-wrap: wrap;

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

@@ -3,8 +3,8 @@
 @use "sass:math";
 
 .ds-teaser.ds-teaser--standard {
-  @include ds-spacing-layout(
-    $ds-sl-teaser-vertical-small $ds-sl-teaser-horizontal 0
+  padding: ds-spacing(
+    $ds-s-teaser-vertical-small $ds-s-teaser-horizontal 0
   );
   overflow: hidden;
 
@@ -18,7 +18,7 @@
 
   .ds-teaser__media,
   .ds-teaser__content {
-    @include ds-spacing-layout($ds-sl-teaser-vertical-medium, margin-bottom);
+    margin-bottom: ds-spacing($ds-s-teaser-vertical-medium);
   }
 
   &::after {
@@ -32,8 +32,8 @@
   }
 
   .ds-teaser__media {
-    @include ds-spacing-layout($ds-sl-teaser-vertical-medium, margin-bottom);
-    margin-left: ds-spacing-component($ds-sc-x4);
+    margin-bottom: ds-spacing($ds-s-teaser-vertical-medium);
+    margin-left: ds-spacing($ds-s-100);
     float: right;
 
     @include ds-mq-only-breakpoint(mobile) {

package/components/teaser-swipe-card/teaser-swipe-card.njk

@@ -6,6 +6,7 @@
   {% set classes = [
     "ds-teaser",
     componentClassName,
+    "ds-theme--" + params.theme if params.theme,
     classNamePrefix + params.variant if params.variant and params.variant !== "default",
     params.classNames if params.classNames
   ] | join(" ") %}

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

@@ -10,22 +10,39 @@
   max-width: 66vw; // ensure low-width devices see atleast part of a second teaser
   color: $ds-color-text-primary;
   text-decoration: none;
-
-  border: ds-metrics-border-width(x1) solid $ds-color-border-primary;
-  border-radius: ds-metrics-border-radius(x1);
-  overflow: hidden; // ensure media doesn't overflow the border-radius
   margin-bottom: 0;
 
-  @include ds-teaser-focus(-2px);
+  &:focus-visible {
+    outline: none !important;
+
+    .ds-teaser__text {
+      @include ds-teaser-focus(-4px, false);
+    }
+  }
 
   .ds-teaser__text {
     display: flex;
     flex-direction: column;
-    padding: ds-spacing-component($ds-sc-x3);
+    padding: ds-spacing($ds-s-075);
+    border: ds-metrics-border-width(x1) solid $ds-color-border-primary;
+    border-radius: ds-metrics-border-radius(x1);
     margin: 0;
     flex: 1;
   }
 
+  .ds-teaser-image {
+    border-top-right-radius: ds-metrics-border-radius(x1);
+    border-top-left-radius: ds-metrics-border-radius(x1);
+    overflow: hidden;
+  }
+
+  .ds-teaser-image + .ds-teaser__text {
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    padding-top: ds-spacing($ds-s-050);
+  }
+
   .ds-teaser-swipe-card__time {
     @include ds-typography($ds-typography-functional-meta02regular);
     color: $ds-color-text-primary-02;
@@ -33,7 +50,7 @@
 
   .ds-teaser__title {
     @include ds-typography($ds-typography-expressive-heading01bold);
-    margin-bottom: ds-spacing-component($ds-sc-x2);
+    margin-bottom: ds-spacing($ds-s-050);
     flex: 1;
   }
 
@@ -50,15 +67,20 @@
   }
 
   &.ds-teaser-swipe-card--direkt {
-    border: none;
-    border-radius: 0;
-
     &:not(:last-of-type) {
-      margin-right: ds-spacing-component($ds-sc-x2);
+      margin-right: ds-spacing($ds-s-050);
     }
 
     .ds-teaser__text {
-      padding: ds-spacing-component($ds-sc-x1 0 0 0);
+      padding: ds-spacing($ds-s-025 0 0 0);
+      border: none;
+      border-radius: 0;
+    }
+
+    &:focus-visible {
+      .ds-teaser__text {
+        @include ds-teaser-focus(-2px, false);
+      }
     }
 
     .ds-teaser-swipe-card__time {
@@ -66,16 +88,16 @@
       @include ds-typography($ds-typography-functional-body01semibold);
       color: $ds-theme-color;
       align-items: center;
-      margin-bottom: ds-spacing-component($ds-sc-x1);
+      margin-bottom: ds-spacing($ds-s-025);
 
       &::before {
         content: "";
         display: block;
-        width: ds-spacing-component($ds-sc-x2);
-        height: ds-spacing-component($ds-sc-x2);
+        width: ds-spacing($ds-s-050);
+        height: ds-spacing($ds-s-050);
         background-color: $ds-theme-color;
         border-radius: 50%;
-        margin-right: ds-spacing-component($ds-sc-x2);
+        margin-right: ds-spacing($ds-s-050);
       }
 
       &::after {
@@ -84,7 +106,7 @@
         height: 2px;
         flex: 1;
         background-color: $ds-color-border-primary;
-        margin-left: ds-spacing-component($ds-sc-x2);
+        margin-left: ds-spacing($ds-s-050);
       }
     }
   }

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

@@ -3,9 +3,9 @@
 
 .ds-teaser.ds-teaser--tipsa {
   .ds-teaser__content {
-    @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
     );
   }
 
@@ -21,6 +21,6 @@
 
   .ds-teaser__text {
     @include ds-typography($ds-typography-functional-body02regular);
-    margin-top: ds-spacing-component($ds-sc-x2);
+    margin-top: ds-spacing($ds-s-050);
   }
 }

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

@@ -6,7 +6,7 @@ $ds-text-btn__min-clickable-area: 0;
 $ds-text-btn__underline-offset: 2px;
 
 .ds-text-btn {
-  --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x3)};
+  --ds-text-btn__inner-padding: #{ds-spacing($ds-s-075)};
   --ds-text-btn__icon-size: #{ds-px-to-rem(24px)};
 
   &.ds-force-px {
@@ -14,17 +14,17 @@ $ds-text-btn__underline-offset: 2px;
   }
 
   &.ds-text-btn--icon-left {
-    --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x3 $ds-sc-x3 $ds-sc-x3 $ds-sc-x2)};
-    --ds-text-btn__icon-margin: #{ds-spacing-component(0 $ds-sc-x2 0 0)};
+    --ds-text-btn__inner-padding: #{ds-spacing($ds-s-075 $ds-s-075 $ds-s-075 $ds-s-050)};
+    --ds-text-btn__icon-margin: #{ds-spacing(0 $ds-s-050 0 0)};
   }
 
   &.ds-text-btn--icon-right {
-    --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x3 $ds-sc-x2 $ds-sc-x3 $ds-sc-x3)};
-    --ds-text-btn__icon-margin: #{ds-spacing-component(0 0 0 $ds-sc-x2)};
+    --ds-text-btn__inner-padding: #{ds-spacing($ds-s-075 $ds-s-050 $ds-s-075 $ds-s-075)};
+    --ds-text-btn__icon-margin: #{ds-spacing(0 0 0 $ds-s-050)};
   }
 
   &.ds-text-btn--small {
-    --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x2)};
+    --ds-text-btn__inner-padding: #{ds-spacing($ds-s-050)};
     --ds-text-btn__icon-size: #{ds-px-to-rem(20px)};
 
     &.ds-force-px {
@@ -32,24 +32,24 @@ $ds-text-btn__underline-offset: 2px;
     }
 
     &.ds-text-btn--icon-left {
-      --ds-text-btn__icon-margin: #{ds-spacing-component(0 $ds-sc-x1 0 0)};
-      --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x2 $ds-sc-x2 $ds-sc-x2 $ds-sc-x1)};
+      --ds-text-btn__icon-margin: #{ds-spacing(0 $ds-s-025 0 0)};
+      --ds-text-btn__inner-padding: #{ds-spacing($ds-s-050 $ds-s-050 $ds-s-050 $ds-s-025)};
       &.ds-text-btn--condensed {
-        --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x1 $ds-sc-x1 $ds-sc-x1 0)};
+        --ds-text-btn__inner-padding: #{ds-spacing($ds-s-025 $ds-s-025 $ds-s-025 0)};
       }
     }
 
     &.ds-text-btn--icon-right {
-      --ds-text-btn__icon-margin: #{ds-spacing-component(0 0 0 $ds-sc-x1)};
-      --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x2 $ds-sc-x1 $ds-sc-x2 $ds-sc-x2)};
+      --ds-text-btn__icon-margin: #{ds-spacing(0 0 0 $ds-s-025)};
+      --ds-text-btn__inner-padding: #{ds-spacing($ds-s-050 $ds-s-025 $ds-s-050 $ds-s-050)};
       &.ds-text-btn--condensed {
-        --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x1 0 $ds-sc-x1 $ds-sc-x1)};
+        --ds-text-btn__inner-padding: #{ds-spacing($ds-s-025 0 $ds-s-025 $ds-s-025)};
       }
     }
   }
 
   &.ds-text-btn--condensed {
-    --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x1)};
+    --ds-text-btn__inner-padding: #{ds-spacing($ds-s-025)};
   }
 }
 

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

@@ -55,7 +55,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($ds-sc-x3 $ds-sc-x3 $ds-sc-x3 $ds-sc-x2);
+    padding: ds-spacing($ds-s-075 $ds-s-075 $ds-s-075 $ds-s-050);
     position: relative;
     &::before {
       content: "";
@@ -72,7 +72,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 $ds-sc-x2 0 0);
+      margin: ds-spacing(0 $ds-s-050 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($ds-sc-x1);
+  padding: ds-spacing($ds-s-025);
 }

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

@@ -5,7 +5,7 @@
 $ds-text-input-toggle-btn__width: 28px;
 $ds-text-input-toggle-btn__top: 22px;
 $ds-text-input-toggle-btn__area: (
-  $ds-text-input-toggle-btn__width + ds-spacing-component($ds-sc-x2)
+  $ds-text-input-toggle-btn__width + ds-spacing($ds-s-050)
 );
 
 .ds-form-field__error {
@@ -15,7 +15,7 @@ $ds-text-input-toggle-btn__area: (
 }
 
 .ds-text-input {
-  padding-top: ds-px-to-rem(ds-spacing-component($ds-sc-x2));
+  padding-top: ds-spacing($ds-s-050, rem);
   position: relative;
   color: $ds-color-text-primary;
 }
@@ -27,7 +27,7 @@ $ds-text-input-toggle-btn__area: (
   background-color: $ds-color-component-secondary;
   @include ds-typography($ds-typography-functional-body02regular);
   /* 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);
+  padding: ds-px-to-rem(ds-spacing($ds-s-100) - ds-metrics-border-width(x1)) ds-spacing($ds-s-100) - 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;
@@ -55,9 +55,9 @@ $ds-text-input-toggle-btn__area: (
 
   &:focus {
     padding: ds-px-to-rem(
-        ds-spacing-component($ds-sc-x4) - ds-metrics-border-width(x2)
+        ds-spacing($ds-s-100) - ds-metrics-border-width(x2)
       )
-      ds-spacing-component($ds-sc-x4) - ds-metrics-border-width(x2);
+      ds-spacing($ds-s-100) - ds-metrics-border-width(x2);
     border-color: $ds-color-border-primary-03;
     border-width: ds-metrics-border-width(x2);
 
@@ -83,18 +83,18 @@ $ds-text-input-toggle-btn__area: (
 
 .ds-text-input__label {
   position: absolute;
-  top: ds-px-to-rem(ds-spacing-component($ds-sc-x6));
-  left: ds-spacing-component($ds-sc-x4);
+  top: ds-spacing($ds-s-150, rem);
+  left: ds-spacing($ds-s-100);
   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($ds-sc-x2));
-    left: -#{ds-spacing-component($ds-sc-x1)};
+    width: calc(100% + ds-spacing($ds-s-050));
+    left: -#{ds-spacing($ds-s-025)};
     height: ds-metrics-border-width(x1);
     position: absolute;
-    top: ds-px-to-rem(ds-spacing-component($ds-sc-x2));
+    top: ds-spacing($ds-s-050, rem);
     z-index: -1;
     background-color: transparent; // for animation
     transition: background-color 0.2s ease-in-out;
@@ -104,7 +104,7 @@ $ds-text-input-toggle-btn__area: (
 .ds-icon-btn.ds-text-input__password-toggle {
   position: absolute;
   top: ds-px-to-rem($ds-text-input-toggle-btn__top);
-  right: ds-spacing-component($ds-sc-x1);
+  right: ds-spacing($ds-s-025);
   z-index: 1;
   min-width: 0;
   min-height: 0;
@@ -112,13 +112,13 @@ $ds-text-input-toggle-btn__area: (
 
 .ds-force-px {
   &.ds-text-input {
-    padding-top: ds-spacing-component($ds-sc-x2);
+    padding-top: ds-spacing($ds-s-050);
     font-size: 16px;
   }
 
   .ds-text-input__input {
     @include ds-typography($ds-typography-functional-body02regular, true);
-    padding: ds-spacing-component($ds-sc-x4) - ds-metrics-border-width(x1);
+    padding: ds-spacing($ds-s-100) - ds-metrics-border-width(x1);
 
     &.password-toggle {
       padding-right: $ds-text-input-toggle-btn__area;
@@ -137,15 +137,15 @@ $ds-text-input-toggle-btn__area: (
     }
 
     &:focus {
-      padding: ds-spacing-component($ds-sc-x4) - ds-metrics-border-width(x2);
+      padding: ds-spacing($ds-s-100) - ds-metrics-border-width(x2);
     }
   }
 
   .ds-text-input__label {
     @include ds-typography($ds-typography-functional-body02regular, true);
-    top: ds-spacing-component($ds-sc-x6);
+    top: ds-spacing($ds-s-150);
     &::before {
-      top: ds-spacing-component($ds-sc-x2);
+      top: ds-spacing($ds-s-050);
     }
   }
 

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

@@ -2,8 +2,8 @@
 
 .ds-thematic-break {
   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
   );
 
   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($ds-sc-x1);
+    margin-right: ds-spacing($ds-s-025);
   }
 
   @at-root .ds-force-px#{&} {

package/components/vip-badge/vip-badge.scss

@@ -14,13 +14,13 @@ $ds-vip-badge__icon-size: 16px;
   color: $ds-color-static-white;
   fill: $ds-color-static-white;
   @include ds-typography($ds-typography-functional-meta01regular);
-  padding: ds-px-to-rem(ds-spacing-component($ds-sc-x1));
+  padding: ds-spacing($ds-s-025, rem);
 
   @at-root .ds-force-px#{&} {
     @include ds-typography($ds-typography-functional-meta01regular, true);
     border-radius: ds-metrics-border-radius(x1) 0 ds-metrics-border-radius(x1)
       ds-metrics-border-radius(x1);
-    padding: ds-spacing-component($ds-sc-x1);
+    padding: ds-spacing($ds-s-025);
   }
 
   // bang class indicating that the user has premium access
@@ -39,16 +39,15 @@ $ds-vip-badge__icon-size: 16px;
 }
 
 .ds-vip-badge--text {
-  padding: ds-px-to-rem(ds-spacing-component($ds-sc-x1))
-    ds-px-to-rem(ds-spacing-component($ds-sc-x2));
+  padding: ds-spacing($ds-s-025 $ds-s-050, rem);
   @at-root .ds-force-px#{&} {
-    padding: ds-spacing-component($ds-sc-x1 $ds-sc-x2);
+    padding: ds-spacing($ds-s-025 $ds-s-050);
   }
 
   .ds-icon {
-    margin-right: ds-px-to-rem(ds-spacing-component($ds-sc-x1));
+    margin-right: ds-spacing($ds-s-025, rem);
     @at-root .ds-force-px#{&} {
-      margin-right: ds-spacing-component($ds-sc-x1);
+      margin-right: ds-spacing($ds-s-025);
     }
   }
 }

package/package.json

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