@bonniernews/dn-design-system-web 8.0.7 → 8.0.9

package/.prettierrc

@@ -0,0 +1,17 @@
+{
+  "semi": false,
+  "tabWidth": 2,
+  "printWidth": 120,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "overrides": [
+    {
+      "files": "**/*.scss",
+      "options": {
+        "singleQuote": false
+      }
+    }
+  ]
+}

package/.stylelintignore

@@ -0,0 +1 @@
+foundations/variables/**

package/.stylelintrc.json

@@ -0,0 +1,22 @@
+{
+  "plugins": [
+    "stylelint-selector-bem-pattern",
+    "stylelint-sass-render-errors"
+  ],
+  "extends": [
+    "stylelint-config-recommended-scss",
+    "stylelint-prettier/recommended"
+  ],
+  "rules": {
+    "plugin/sass-render-errors": true,
+    "no-descending-specificity": null,
+    "declaration-no-important": true,
+    "scss/at-import-partial-extension": null,
+    "scss/no-global-function-names": null,
+    "scss/comment-no-empty": null,
+    "plugin/selector-bem-pattern": {
+      "preset": "bem"
+    },
+    "prettier/prettier": [true, {"printWidth": 120}]
+  }
+}

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.
 
+## 8.0.9 (2023-11-10)
+
+
+### Bug Fixes
+
+* **web:** rename metrics function ([#1086](https://github.com/BonnierNews/dn-design-system/issues/1086)) ([589bc48](https://github.com/BonnierNews/dn-design-system/commit/589bc487eae3ba8b34b1418e1723d1b26fad91b0))
+
+
+
+## 8.0.8 (2023-11-10)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
 ## 8.0.7 (2023-11-09)
 
 

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

@@ -2,7 +2,5 @@
 @use "../../assets/article-image/article-image.scss" as *;
 
 .ds-article-image--body {
-  padding: ds-spacing(
-    $ds-s-gap-vertical-static-medium 0 $ds-s-gap-vertical-static-large
-  );
+  padding: ds-spacing($ds-s-gap-vertical-static-medium 0 $ds-s-gap-vertical-static-large);
 }

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

@@ -4,14 +4,12 @@
 .ds-blocked-content {
   background-color: $ds-color-surface-background;
   margin: 0;
-  padding: ds-spacing(
-    $ds-s-gap-vertical-static-medium 0 $ds-s-gap-vertical-static-large
-  );
+  padding: ds-spacing($ds-s-gap-vertical-static-medium 0 $ds-s-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);
+    border: ds-border-width(x1) solid $ds-color-border-primary;
+    border-radius: ds-border-radius(x1);
     padding: ds-spacing($ds-s-200 $ds-s-100 $ds-s-100);
   }
 

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

@@ -25,9 +25,8 @@
 
   .ds-buddy-menu__inner {
     background-color: $ds-color-surface-elevated;
-    border-radius: ds-metrics-border-radius(x2);
-    box-shadow: ds-shadow-get-box-shadow($ds-shadow-drop-shadow-a),
-      ds-shadow-get-box-shadow($ds-shadow-drop-shadow-b);
+    border-radius: ds-border-radius(x2);
+    box-shadow: ds-shadow-get-box-shadow($ds-shadow-drop-shadow-a), ds-shadow-get-box-shadow($ds-shadow-drop-shadow-b);
     position: relative;
     z-index: 1;
   }
@@ -82,8 +81,8 @@
     display: block;
   }
   .ds-buddy-menu__links-list {
-    border-bottom-left-radius: ds-metrics-border-radius(x2);
-    border-bottom-right-radius: ds-metrics-border-radius(x2);
+    border-bottom-left-radius: ds-border-radius(x2);
+    border-bottom-right-radius: ds-border-radius(x2);
     overflow: hidden;
     margin: 0;
     padding: 0;

package/components/button/button.scss

@@ -3,7 +3,7 @@
 @use "../icon-sprite/icon-sprite.scss";
 @use "../spinner/spinner.scss" as *;
 
-$ds-btn-outlined__border-width: ds-metrics-border-width(x1);
+$ds-btn-outlined__border-width: ds-border-width(x1);
 $ds-btn__min-clickable-area: 48px;
 $ds-btn__icon-size: 24px;
 
@@ -29,7 +29,7 @@ $ds-btn__icon-size: 24px;
   &:focus-visible {
     outline: none;
     .ds-btn__inner {
-      outline: ds-metrics-border-width(x2) solid;
+      outline: ds-border-width(x2) solid;
       outline-offset: 2px;
     }
   }
@@ -43,9 +43,10 @@ $ds-btn__icon-size: 24px;
   .ds-btn__inner {
     @include ds-typography($ds-typography-detailstandard-button);
     border: $ds-btn-outlined__border-width solid;
-    border-radius: ds-metrics-border-radius(x1);
-    /* stylelint-disable-next-line */
-    padding: ds-spacing($ds-s-075, rem) - ds-px-to-rem($ds-btn-outlined__border-width) ds-spacing($ds-s-150, rem) - ds-px-to-rem($ds-btn-outlined__border-width);
+    border-radius: ds-border-radius(x1);
+    padding: ds-spacing($ds-s-075, rem) - ds-px-to-rem($ds-btn-outlined__border-width) ds-spacing($ds-s-150, rem) - ds-px-to-rem(
+        $ds-btn-outlined__border-width
+      );
     position: relative;
     &::before {
       content: "";
@@ -84,12 +85,8 @@ $ds-btn__icon-size: 24px;
 }
 
 .ds-btn--small .ds-btn__inner {
-  padding: ds-px-to-rem(
-      ds-spacing($ds-s-050) - $ds-btn-outlined__border-width
-    )
-    ds-px-to-rem(
-      ds-spacing($ds-s-125) - $ds-btn-outlined__border-width
-    );
+  padding: ds-px-to-rem(ds-spacing($ds-s-050) - $ds-btn-outlined__border-width)
+    ds-px-to-rem(ds-spacing($ds-s-125) - $ds-btn-outlined__border-width);
 }
 
 @include ds-mq-only-breakpoint(mobile) {
@@ -119,31 +116,23 @@ $ds-btn__icon-size: 24px;
 
 .ds-btn--icon-right {
   .ds-btn__inner {
-    padding-right: ds-px-to-rem(
-      ds-spacing($ds-s-125) - $ds-btn-outlined__border-width
-    );
+    padding-right: ds-px-to-rem(ds-spacing($ds-s-125) - $ds-btn-outlined__border-width);
   }
   &.ds-btn--small .ds-btn__inner {
-    padding-right: ds-px-to-rem(
-      ds-spacing($ds-s-100) - $ds-btn-outlined__border-width
-    );
+    padding-right: ds-px-to-rem(ds-spacing($ds-s-100) - $ds-btn-outlined__border-width);
   }
 }
 
 .ds-btn--icon-left {
   .ds-btn__inner {
     flex-direction: row-reverse;
-    padding-left: ds-px-to-rem(
-      ds-spacing($ds-s-125) - $ds-btn-outlined__border-width
-    );
+    padding-left: ds-px-to-rem(ds-spacing($ds-s-125) - $ds-btn-outlined__border-width);
     .ds-icon {
       margin: ds-spacing(0 $ds-s-050 0 0, rem);
     }
   }
   &.ds-btn--small .ds-btn__inner {
-    padding-left: ds-px-to-rem(
-      ds-spacing($ds-s-100) - $ds-btn-outlined__border-width
-    );
+    padding-left: ds-px-to-rem(ds-spacing($ds-s-100) - $ds-btn-outlined__border-width);
   }
 }
 
@@ -296,8 +285,9 @@ $ds-btn__icon-size: 24px;
 
 .ds-btn.ds-force-px {
   .ds-btn__inner {
-    padding: ds-spacing($ds-s-075) - $ds-btn-outlined__border-width
-      ds-spacing($ds-s-150) - $ds-btn-outlined__border-width;
+    /* stylelint-disable-next-line */
+    padding: ds-spacing($ds-s-075) - $ds-btn-outlined__border-width ds-spacing($ds-s-150) -
+      $ds-btn-outlined__border-width;
     @include ds-typography($ds-typography-detailstandard-button, true);
   }
   &.ds-btn--icon-left .ds-btn__inner,
@@ -319,8 +309,7 @@ $ds-btn__icon-size: 24px;
   }
   &.ds-btn--small {
     .ds-btn__inner {
-      padding: ds-spacing($ds-s-050)-$ds-btn-outlined__border-width
-        ds-spacing($ds-s-125)-$ds-btn-outlined__border-width;
+      padding: ds-spacing($ds-s-050)-$ds-btn-outlined__border-width ds-spacing($ds-s-125)-$ds-btn-outlined__border-width;
     }
     &.ds-btn--icon-right .ds-btn__inner {
       padding-right: ds-spacing($ds-s-100)-$ds-btn-outlined__border-width;

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

@@ -47,8 +47,9 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
     @include ds-typography($ds-typography-detailstandard-button);
     border: $ds-btn-toggle-outlined__border-width solid;
     border-radius: 100px;
-    /* stylelint-disable-next-line */
-    padding: ds-spacing($ds-s-075, rem) - ds-px-to-rem($ds-btn-toggle-outlined__border-width) ds-spacing($ds-s-150, rem) - ds-px-to-rem($ds-btn-toggle-outlined__border-width);
+    padding: ds-spacing($ds-s-075, rem) - ds-px-to-rem($ds-btn-toggle-outlined__border-width) ds-spacing($ds-s-150, rem) - ds-px-to-rem(
+        $ds-btn-toggle-outlined__border-width
+      );
     position: relative;
     &::before {
       content: "";
@@ -90,22 +91,14 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
 }
 
 .ds-btn-toggle--small .ds-btn-toggle__inner {
-  padding: ds-px-to-rem(
-      ds-spacing($ds-s-050) - $ds-btn-toggle-outlined__border-width
-    )
-    ds-px-to-rem(
-      ds-spacing($ds-s-125) - $ds-btn-toggle-outlined__border-width
-    );
+  padding: ds-px-to-rem(ds-spacing($ds-s-050) - $ds-btn-toggle-outlined__border-width)
+    ds-px-to-rem(ds-spacing($ds-s-125) - $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($ds-s-025) - $ds-btn-toggle-outlined__border-width
-    )
-    ds-px-to-rem(
-      ds-spacing($ds-s-075) - $ds-btn-toggle-outlined__border-width
-    );
+  padding: ds-px-to-rem(ds-spacing($ds-s-025) - $ds-btn-toggle-outlined__border-width)
+    ds-px-to-rem(ds-spacing($ds-s-075) - $ds-btn-toggle-outlined__border-width);
 }
 
 @include ds-mq-only-breakpoint(mobile) {
@@ -168,9 +161,7 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
     background-color: transparent;
     border-color: $ds-color-border-primary-03;
     color: $ds-color-text-primary;
-    padding-left: ds-px-to-rem(
-      ds-spacing($ds-s-125) - $ds-btn-toggle-outlined__border-width
-    );
+    padding-left: ds-px-to-rem(ds-spacing($ds-s-125) - $ds-btn-toggle-outlined__border-width);
 
     .ds-btn-toggle__on {
       display: flex;
@@ -191,15 +182,11 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
   }
 
   &.ds-btn-toggle--small .ds-btn-toggle__inner {
-    padding-left: ds-px-to-rem(
-      ds-spacing($ds-s-100) - $ds-btn-toggle-outlined__border-width
-    );
+    padding-left: ds-px-to-rem(ds-spacing($ds-s-100) - $ds-btn-toggle-outlined__border-width);
   }
 
   &.ds-btn-toggle--xsmall .ds-btn-toggle__inner {
-    padding-left: ds-px-to-rem(
-      ds-spacing($ds-s-050) - $ds-btn-toggle-outlined__border-width
-    );
+    padding-left: ds-px-to-rem(ds-spacing($ds-s-050) - $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);
@@ -225,7 +212,8 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
 .ds-btn-toggle.ds-force-px {
   .ds-btn-toggle__inner {
     /* stylelint-disable-next-line */
-    padding: ds-spacing($ds-s-075) - $ds-btn-toggle-outlined__border-width ds-spacing($ds-s-150) - $ds-btn-toggle-outlined__border-width;
+    padding: ds-spacing($ds-s-075) - $ds-btn-toggle-outlined__border-width ds-spacing($ds-s-150) -
+      $ds-btn-toggle-outlined__border-width;
     @include ds-typography($ds-typography-detailstandard-button, true);
   }
   &.ds-btn-toggle--selected .ds-btn-toggle__inner {
@@ -238,8 +226,7 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
   }
   &.ds-btn-toggle--small {
     .ds-btn-toggle__inner {
-      padding: ds-spacing($ds-s-050)-$ds-btn-toggle-outlined__border-width
-        ds-spacing($ds-s-125)-$ds-btn-toggle-outlined__border-width;
+      padding: ds-spacing($ds-s-050)-$ds-btn-toggle-outlined__border-width ds-spacing($ds-s-125)-$ds-btn-toggle-outlined__border-width;
     }
     &.ds-btn-toggle--selected .ds-btn-toggle__inner {
       padding-left: ds-spacing($ds-s-100)-$ds-btn-toggle-outlined__border-width;
@@ -248,8 +235,7 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
   &.ds-btn-toggle--xsmall {
     .ds-btn-toggle__inner {
       @include ds-typography($ds-typography-detailstandard-button-small, true);
-      padding: ds-spacing($ds-s-025)-$ds-btn-toggle-outlined__border-width
-        ds-spacing($ds-s-075)-$ds-btn-toggle-outlined__border-width;
+      padding: ds-spacing($ds-s-025)-$ds-btn-toggle-outlined__border-width ds-spacing($ds-s-075)-$ds-btn-toggle-outlined__border-width;
       .ds-icon {
         margin: ds-spacing(0 $ds-s-025 0 0);
         height: $ds-btn-toggle__icon-size-xsmall;

package/components/byline/byline.scss

@@ -102,10 +102,7 @@ $ds-byline__image-size--direkt: 36px;
     .ds-byline__title {
       @include ds-typography($ds-typography-functional-heading01semibold);
       @at-root .ds-force-px#{&} {
-        @include ds-typography(
-          $ds-typography-functional-heading01semibold,
-          true
-        );
+        @include ds-typography($ds-typography-functional-heading01semibold, true);
       }
       color: $ds-color-text-primary;
       text-align: left;

package/components/checkbox/checkbox.scss

@@ -20,7 +20,7 @@ $ds-checkbox__icon-size: 24px;
     &::before {
       content: "";
       position: absolute;
-      border-radius: ds-metrics-border-radius(x1);
+      border-radius: ds-border-radius(x1);
       top: 0;
       left: 0;
       right: 0;
@@ -75,8 +75,8 @@ $ds-checkbox__icon-size: 24px;
     }
 
     &:focus-visible + .ds-checkbox__inner {
-      border-radius: ds-metrics-border-radius(x1);
-      outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
+      border-radius: ds-border-radius(x1);
+      outline: ds-border-width(x2) solid $ds-color-border-focus-02;
       outline-offset: 2px;
     }
   }

package/components/factbox/factbox.scss

@@ -4,7 +4,6 @@
 $ds-factbox__grade-size: 40px;
 $ds-factbox__show-more-fade-height: 48px;
 $ds-factbox__padding: ds-spacing($ds-s-100);
-/* stylelint-disable-next-line */
 $ds-factbox-border-width: 4px;
 $ds-factbox__padding-left: $ds-factbox__padding - $ds-factbox-border-width;
 $ds-factbox__max-height: 500px; // includes top/bottom spacing
@@ -13,9 +12,7 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
   background-color: $ds-color-surface-background;
   box-sizing: border-box;
   margin: 0;
-  padding: ds-spacing(
-    $ds-s-gap-vertical-static-medium 0 $ds-s-gap-vertical-static-large
-  );
+  padding: ds-spacing($ds-s-gap-vertical-static-medium 0 $ds-s-gap-vertical-static-large);
 
   .ds-factbox__inner {
     border-top: ds-metrics-border-width(x1) solid $ds-color-border-primary;

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

@@ -53,9 +53,7 @@
       --ds-floating-btn__inner-padding: #{ds-spacing($ds-s-050 $ds-s-100 $ds-s-050 $ds-s-125, rem)};
     }
   }
-}
 
-.ds-floating-btn {
   cursor: pointer;
   background-color: transparent;
   border: none;

package/components/footer/footer.scss

@@ -57,9 +57,7 @@ $ds-footer-column-gap: ds-spacing($ds-s-400);
 
   &__rudolf,
   &__editors {
-    padding: ds-spacing(
-      $ds-footer-row-padding-spacing-token 0 $ds-footer-row-gap-spacing-token
-    );
+    padding: ds-spacing($ds-footer-row-padding-spacing-token 0 $ds-footer-row-gap-spacing-token);
 
     &,
     p {

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

@@ -7,7 +7,6 @@
   --group-header-color: #{$ds-color-text-primary};
   --group-header-icon-color: currentColor;
   display: flex;
-  align-items: center;
   justify-content: space-between;
   align-items: stretch;
   background: var(--group-header-background);
@@ -42,7 +41,8 @@
     padding-right: ds-spacing($ds-s-050);
   }
 
-  .ds-btn-toggle, .ds-group-header__arrows {
+  .ds-btn-toggle,
+  .ds-group-header__arrows {
     margin-top: 2px; // special case due to design margin extending from the component's visual size, not its clickable area
     margin-bottom: 2px;
   }

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

@@ -21,9 +21,7 @@ $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
   &.ds-icon-btn--large {
     --ds-icon-btn__inner-padding: #{ds-spacing($ds-s-075)-$ds-btn-outlined__border-width};
   }
-}
 
-.ds-icon-btn {
   cursor: pointer;
   background-color: transparent;
   border: 0;

package/components/quote/quote.scss

@@ -4,9 +4,7 @@
   @include ds-typography($ds-typography-detailarticle-quote);
   color: $ds-color-text-primary;
   margin: 0;
-  padding: ds-spacing(
-    $ds-s-gap-vertical-static-medium 0 $ds-s-gap-vertical-static-large
-  );
+  padding: ds-spacing($ds-s-gap-vertical-static-medium 0 $ds-s-gap-vertical-static-large);
   position: relative;
 
   @at-root .ds-force-px#{&} {

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

@@ -20,7 +20,7 @@ $ds-radio-btn__icon-size: 24px;
     &::before {
       content: "";
       position: absolute;
-      border-radius: ds-metrics-border-radius(x1);
+      border-radius: ds-border-radius(x1);
       top: 0;
       left: 0;
       right: 0;
@@ -85,8 +85,8 @@ $ds-radio-btn__icon-size: 24px;
     }
 
     &:focus-visible + .ds-radio-btn__inner {
-      border-radius: ds-metrics-border-radius(x1);
-      outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
+      border-radius: ds-border-radius(x1);
+      outline: ds-border-width(x2) solid $ds-color-border-focus-02;
       outline-offset: 2px;
     }
   }

package/components/switch/switch.scss

@@ -36,7 +36,9 @@ $ds-switch__container-width: 44px;
       width: ds-px-to-rem($ds-switch__container-width);
       background-color: $ds-color-component-primary-overlay-02;
       border-radius: 100px;
-      transition: background-color 500ms ease, outline-color 500ms ease;
+      transition:
+        background-color 500ms ease,
+        outline-color 500ms ease;
       @at-root .ds-force-px#{&} {
         height: $ds-switch__container-height;
         width: $ds-switch__container-width;
@@ -106,25 +108,13 @@ $ds-switch__container-width: 44px;
 }
 
 @include ds-hover() {
-  .ds-switch
-    input:not(:disabled)
-    + .ds-switch__inner:hover
-    .ds-switch__box::before,
-  .ds-list-item--switch:hover
-    input:not(:disabled)
-    + .ds-switch__inner
-    .ds-switch__box::before {
+  .ds-switch input:not(:disabled) + .ds-switch__inner:hover .ds-switch__box::before,
+  .ds-list-item--switch:hover input:not(:disabled) + .ds-switch__inner .ds-switch__box::before {
     background-color: $ds-color-component-primary-overlay;
   }
 }
-.ds-switch
-  input:not(:disabled)
-  + .ds-switch__inner:active
-  .ds-switch__box::before,
-.ds-list-item--switch:active
-  input:not(:disabled)
-  + .ds-switch__inner
-  .ds-switch__box::before {
+.ds-switch input:not(:disabled) + .ds-switch__inner:active .ds-switch__box::before,
+.ds-list-item--switch:active input:not(:disabled) + .ds-switch__inner .ds-switch__box::before {
   background-color: $ds-color-component-primary-overlay-02;
 }
 

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

@@ -26,7 +26,7 @@
 
   &::after,
   &.ds-teaser-dot--flashing::before {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     bottom: 0;
@@ -40,7 +40,7 @@
 
 @keyframes dot-pulse {
   0% {
-    transform: scale(.95);
+    transform: scale(0.95);
   }
 
   70% {
@@ -54,7 +54,7 @@
 
 @keyframes ripple-pulse {
   0% {
-    transform: scale(.95);
+    transform: scale(0.95);
     opacity: 0.4;
   }
 
@@ -64,7 +64,7 @@
   }
 
   100% {
-    transform: scale(.95);
-    opacity: 0
+    transform: scale(0.95);
+    opacity: 0;
   }
 }

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

@@ -15,10 +15,7 @@
   .ds-teaser__content {
     display: flex;
     flex-direction: row;
-    padding: ds-spacing(
-      $ds-s-teaser-vertical-small $ds-s-teaser-horizontal
-        $ds-s-teaser-vertical-medium
-    );
+    padding: ds-spacing($ds-s-teaser-vertical-small $ds-s-teaser-horizontal $ds-s-teaser-vertical-medium);
 
     .ds-teaser__content-inner {
       display: flex;
@@ -28,7 +25,7 @@
   }
 
   &:focus-visible {
-    outline: none !important;
+    outline: none !important; /* stylelint-disable-line declaration-no-important */
 
     .ds-teaser__content {
       @include ds-teaser-focus(-8px, false);
@@ -113,9 +110,7 @@
       }
 
       &.ds-teaser--large-italic .ds-teaser__title {
-        @include ds-typography(
-          $ds-typography-expressive-heading02italicregular
-        );
+        @include ds-typography($ds-typography-expressive-heading02italicregular);
 
         @include ds-hover(true) {
           .ds-teaser__title {

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

@@ -50,7 +50,7 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
       background-color: $ds-color-border-primary;
     }
 
-    .ds-teaser-dot  {
+    .ds-teaser-dot {
       position: absolute;
       margin-top: ds-px-to-rem(6px);
     }

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

@@ -34,7 +34,7 @@
     padding: ds-spacing($ds-s-100);
   }
 
-  &:not(:has(.ds-teaser-image))  {
+  &:not(:has(.ds-teaser-image)) {
     background-color: $ds-color-static-black;
 
     .ds-teaser__content {

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

@@ -17,7 +17,7 @@
 
   .ds-teaser__title {
     @include ds-typography($ds-typography-expressive-heading02bold);
-    font-family: $ds-font--arial !important;
+    font-family: $ds-font--arial !important; /* stylelint-disable-line declaration-no-important */
   }
 
   &::after {

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

@@ -2,9 +2,7 @@
 @use "../../assets/teaser/teaser.scss" as *;
 
 .ds-teaser.ds-teaser--onsite {
-  padding: ds-spacing(
-    $ds-s-teaser-vertical-medium $ds-s-teaser-horizontal
-  );
+  padding: ds-spacing($ds-s-teaser-vertical-medium $ds-s-teaser-horizontal);
   display: flex;
 
   .ds-teaser__title {
@@ -14,7 +12,7 @@
 
   @include ds-hover(true) {
     .ds-teaser__title {
-      text-decoration: none !important;
+      text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
     }
 
     .ds-teaser__text {

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

@@ -51,10 +51,7 @@
       background-color: transparent;
     }
 
-    .ds-group-header
-      + .ds-teaser--large:not(.ds-teaser--large-italic):not(
-        .ds-teaser--large-big-italic
-      ) {
+    .ds-group-header + .ds-teaser--large:not(.ds-teaser--large-italic):not(.ds-teaser--large-big-italic) {
       .ds-teaser__title {
         @include ds-typography($ds-typography-expressive-heading05bold);
       }

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

@@ -5,9 +5,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: ds-spacing(
-    $ds-s-teaser-vertical-medium $ds-s-teaser-horizontal
-  );
+  padding: ds-spacing($ds-s-teaser-vertical-medium $ds-s-teaser-horizontal);
 
   .ds-teaser__title {
     @include ds-typography($ds-typography-expressive-heading01bold);

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

@@ -14,9 +14,7 @@
   }
 
   .ds-teaser__content {
-    padding: ds-spacing(
-      $ds-s-teaser-vertical-medium $ds-s-teaser-horizontal $ds-s-100 $ds-s-teaser-horizontal
-    );
+    padding: ds-spacing($ds-s-teaser-vertical-medium $ds-s-teaser-horizontal $ds-s-100 $ds-s-teaser-horizontal);
     display: block;
     color: $ds-color-text-primary;
 

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

@@ -2,10 +2,7 @@
 @use "../../assets/teaser/teaser.scss" as *;
 
 .ds-split-container {
-  padding: ds-spacing(
-    $ds-s-teaser-vertical-small $ds-s-teaser-horizontal
-      $ds-s-teaser-vertical-medium
-  );
+  padding: ds-spacing($ds-s-teaser-vertical-small $ds-s-teaser-horizontal $ds-s-teaser-vertical-medium);
   display: flex;
   flex-wrap: wrap;
   position: relative;

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

@@ -3,9 +3,7 @@
 @use "sass:math";
 
 .ds-teaser.ds-teaser--standard {
-  padding: ds-spacing(
-    $ds-s-teaser-vertical-small $ds-s-teaser-horizontal 0
-  );
+  padding: ds-spacing($ds-s-teaser-vertical-small $ds-s-teaser-horizontal 0);
   overflow: hidden;
 
   .ds-teaser__title {

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

@@ -13,7 +13,7 @@
   margin-bottom: 0;
 
   &:focus-visible {
-    outline: none !important;
+    outline: none !important; /* stylelint-disable-line declaration-no-important */
 
     .ds-teaser__text {
       @include ds-teaser-focus(-4px, false);
@@ -24,15 +24,15 @@
     display: flex;
     flex-direction: column;
     padding: ds-spacing($ds-s-075);
-    border: ds-metrics-border-width(x1) solid $ds-color-border-primary;
-    border-radius: ds-metrics-border-radius(x1);
+    border: ds-border-width(x1) solid $ds-color-border-primary;
+    border-radius: ds-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);
+    border-top-right-radius: ds-border-radius(x1);
+    border-top-left-radius: ds-border-radius(x1);
     overflow: hidden;
   }
 
@@ -103,7 +103,7 @@
       &::after {
         content: "";
         display: block;
-        height: ds-metrics-border-width(x1);
+        height: ds-border-width(x1);
         flex: 1;
         background-color: $ds-color-border-primary;
         margin-left: ds-spacing($ds-s-050);

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

@@ -3,10 +3,7 @@
 
 .ds-teaser.ds-teaser--tipsa {
   .ds-teaser__content {
-    padding: ds-spacing(
-      $ds-s-teaser-vertical-small $ds-s-teaser-horizontal
-        $ds-s-teaser-vertical-medium
-    );
+    padding: ds-spacing($ds-s-teaser-vertical-small $ds-s-teaser-horizontal $ds-s-teaser-vertical-medium);
   }
 
   .ds-teaser__title {

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

@@ -51,9 +51,7 @@ $ds-text-btn__underline-offset: 2px;
   &.ds-text-btn--condensed {
     --ds-text-btn__inner-padding: #{ds-spacing($ds-s-025)};
   }
-}
 
-.ds-text-btn {
   cursor: pointer;
   background-color: transparent;
   border: 0;
@@ -72,7 +70,7 @@ $ds-text-btn__underline-offset: 2px;
   &:focus-visible {
     outline: none;
     .ds-text-btn__inner {
-      outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
+      outline: ds-border-width(x2) solid $ds-color-border-focus-02;
       outline-offset: 2px;
     }
   }
@@ -85,7 +83,7 @@ $ds-text-btn__underline-offset: 2px;
 
   .ds-text-btn__inner {
     background-color: transparent;
-    border-radius: ds-metrics-border-radius(x1);
+    border-radius: ds-border-radius(x1);
     padding: var(--ds-text-btn__inner-padding);
     position: relative;
     &::before {

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

@@ -38,7 +38,7 @@ $ds-text-btn-toggle__icon-size: 24px;
   &:focus-visible {
     outline: none;
     .ds-text-btn-toggle__inner {
-      outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
+      outline: ds-border-width(x2) solid $ds-color-border-focus-02;
       outline-offset: 2px;
     }
   }
@@ -54,7 +54,7 @@ $ds-text-btn-toggle__icon-size: 24px;
     align-items: center;
     justify-content: center;
     background-color: transparent;
-    border-radius: ds-metrics-border-radius(x1);
+    border-radius: ds-border-radius(x1);
     padding: ds-spacing($ds-s-075 $ds-s-075 $ds-s-075 $ds-s-050);
     position: relative;
     &::before {

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

@@ -4,9 +4,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($ds-s-050)
-);
+$ds-text-input-toggle-btn__area: ($ds-text-input-toggle-btn__width + ds-spacing($ds-s-050));
 
 .ds-form-field__error {
   .ds-text-input__input {
@@ -26,18 +24,15 @@ $ds-text-input-toggle-btn__area: (
   color: $ds-color-text-primary;
   background-color: $ds-color-component-secondary;
   @include ds-typography($ds-typography-functional-body02regular);
-  /* stylelint-disable-next-line */
-  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);
+  padding: ds-px-to-rem(ds-spacing($ds-s-100) - ds-border-width(x1)) ds-spacing($ds-s-100) - ds-border-width(x1);
+  border: solid ds-border-width(x1) $ds-color-border-primary-02;
+  border-radius: ds-border-radius(x1);
   margin: 0;
 
   &.password-toggle {
     padding-right: ds-px-to-rem($ds-text-input-toggle-btn__area);
     &:focus {
-      padding-right: ds-px-to-rem(
-        $ds-text-input-toggle-btn__area - ds-metrics-border-width(x2)
-      );
+      padding-right: ds-px-to-rem($ds-text-input-toggle-btn__area - ds-border-width(x2));
     }
   }
 
@@ -54,15 +49,12 @@ $ds-text-input-toggle-btn__area: (
   }
 
   &:focus {
-    padding: ds-px-to-rem(
-        ds-spacing($ds-s-100) - ds-metrics-border-width(x2)
-      )
-      ds-spacing($ds-s-100) - ds-metrics-border-width(x2);
+    padding: ds-px-to-rem(ds-spacing($ds-s-100) - ds-border-width(x2)) ds-spacing($ds-s-100) - ds-border-width(x2);
     border-color: $ds-color-border-primary-03;
-    border-width: ds-metrics-border-width(x2);
+    border-width: ds-border-width(x2);
 
     + .ds-text-input__label::before {
-      height: ds-metrics-border-width(x2);
+      height: ds-border-width(x2);
     }
   }
 
@@ -86,13 +78,15 @@ $ds-text-input-toggle-btn__area: (
   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;
+  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($ds-s-050));
     left: -#{ds-spacing($ds-s-025)};
-    height: ds-metrics-border-width(x1);
+    height: ds-border-width(x1);
     position: absolute;
     top: ds-spacing($ds-s-050, rem);
     z-index: -1;
@@ -118,14 +112,12 @@ $ds-text-input-toggle-btn__area: (
 
   .ds-text-input__input {
     @include ds-typography($ds-typography-functional-body02regular, true);
-    padding: ds-spacing($ds-s-100) - ds-metrics-border-width(x1);
+    padding: ds-spacing($ds-s-100) - ds-border-width(x1);
 
     &.password-toggle {
       padding-right: $ds-text-input-toggle-btn__area;
       &:focus {
-        padding-right: (
-          $ds-text-input-toggle-btn__area - ds-metrics-border-width(x2)
-        );
+        padding-right: ($ds-text-input-toggle-btn__area - ds-border-width(x2));
       }
     }
 
@@ -137,7 +129,7 @@ $ds-text-input-toggle-btn__area: (
     }
 
     &:focus {
-      padding: ds-spacing($ds-s-100) - ds-metrics-border-width(x2);
+      padding: ds-spacing($ds-s-100) - ds-border-width(x2);
     }
   }
 

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

@@ -2,9 +2,7 @@
 
 .ds-thematic-break {
   margin: 0;
-  padding: ds-spacing(
-    $ds-s-gap-vertical-static-medium 0 $ds-s-gap-vertical-static-large
-  );
+  padding: ds-spacing($ds-s-gap-vertical-static-medium 0 $ds-s-gap-vertical-static-large);
 
   hr {
     margin: 0 auto;

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

@@ -7,9 +7,8 @@ $ds-vip-badge__icon-size: 16px;
   display: none;
   align-items: center;
   box-sizing: content-box;
-  border-radius: ds-px-to-rem(ds-metrics-border-radius(x1)) 0
-    ds-px-to-rem(ds-metrics-border-radius(x1))
-    ds-px-to-rem(ds-metrics-border-radius(x1));
+  border-radius: ds-px-to-rem(ds-border-radius(x1)) 0 ds-px-to-rem(ds-border-radius(x1))
+    ds-px-to-rem(ds-border-radius(x1));
   background-color: $ds-color-component-business;
   color: $ds-color-static-white;
   fill: $ds-color-static-white;
@@ -18,8 +17,7 @@ $ds-vip-badge__icon-size: 16px;
 
   @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);
+    border-radius: ds-border-radius(x1) 0 ds-border-radius(x1) ds-border-radius(x1);
     padding: ds-spacing($ds-s-025);
   }
 

package/foundations/a11y/a11y.scss

@@ -1,5 +1,5 @@
 .visually-hidden {
-  position: absolute !important;
+  position: absolute !important; /* stylelint-disable-line declaration-no-important */
   height: 1px;
   width: 1px;
   overflow: hidden;

package/foundations/helpers/loading.scss

@@ -7,7 +7,7 @@
     cursor: not-allowed;
 
     & *:not(.ds-spinner) {
-      color: transparent !important;
+      color: transparent !important; /* stylelint-disable-line declaration-no-important */
     }
 
     .ds-spinner {

package/foundations/helpers/metrics.scss

@@ -6,7 +6,7 @@
 $dsBorderRadius: map.get($metrics, "border-radius");
 $dsBorderWidth: map.get($metrics, "border-width");
 
-@function ds-metrics-border-radius($units: null) {
+@function ds-border-radius($units: null) {
   @if ($units) {
     @return _ds-get-metric($dsBorderRadius, $units);
   }
@@ -14,7 +14,7 @@ $dsBorderWidth: map.get($metrics, "border-width");
   @return null;
 }
 
-@function ds-metrics-border-width($units: null) {
+@function ds-border-width($units: null) {
   @if ($units) {
     @return _ds-get-metric($dsBorderWidth, $units);
   }
@@ -41,3 +41,13 @@ $dsBorderWidth: map.get($metrics, "border-width");
 
   @return $values;
 }
+
+// deprecated
+@function ds-metrics-border-radius($units: null) {
+  @return ds-border-radius($units);
+}
+
+// deprecated
+@function ds-metrics-border-width($units: null) {
+  @return ds-border-width($units);
+}

package/foundations/helpers/shadows.scss

@@ -20,18 +20,9 @@
   $color: map.get($tmpMap, "color");
 
   @if map.get($tmpMap, "type") == "innerShadow" {
-    --ds-shadow-#{$component}: inset
-      #{$x}px
-      #{$y}px
-      #{$blur}px
-      #{$spread}px
-      #{$color};
+    --ds-shadow-#{$component}: inset #{$x}px #{$y}px #{$blur}px #{$spread}px #{$color};
   } @else {
-    --ds-shadow-#{$component}: #{$x}px
-      #{$y}px
-      #{$blur}px
-      #{$spread}px
-      #{$color};
+    --ds-shadow-#{$component}: #{$x}px #{$y}px #{$blur}px #{$spread}px #{$color};
   }
 }
 

package/foundations/helpers/spacing-deprecated.scss

@@ -8,11 +8,7 @@
 @forward "../variables/deprecated/spacingComponentList.scss";
 @forward "../variables/deprecated/spacingLayoutList.scss";
 
-@function ds-spacing-component(
-  $units: null,
-  $sizeUnit: "px",
-  $negative: false
-) {
+@function ds-spacing-component($units: null, $sizeUnit: "px", $negative: false) {
   @if $units {
     @return _ds-get-spacings-deprecated($spacingComponent, $units, $sizeUnit, $negative);
   }
@@ -20,23 +16,13 @@
   @return null;
 }
 
-@mixin ds-spacing-layout(
-  $units: null,
-  $property: padding,
-  $sizeUnit: "px",
-  $negative: false
-) {
+@mixin ds-spacing-layout($units: null, $property: padding, $sizeUnit: "px", $negative: false) {
   @if $units {
     $values: _ds-get-spacings-deprecated($spacingLayout, $units, $sizeUnit, $negative);
     @include ds-mq-largest-breakpoint(mobile) {
       #{$property}: $values;
     }
-    $valuesLargeScreen: _ds-get-spacings-deprecated(
-      $spacingLayoutLargeScreen,
-      $units,
-      $sizeUnit,
-      $negative
-    );
+    $valuesLargeScreen: _ds-get-spacings-deprecated($spacingLayoutLargeScreen, $units, $sizeUnit, $negative);
     @include ds-mq-smallest-breakpoint(tablet) {
       #{$property}: $valuesLargeScreen;
     }

package/foundations/helpers/spacing.scss

@@ -11,11 +11,7 @@
 // @todo remove when possible
 @forward "spacing-deprecated.scss";
 
-@function ds-spacing(
-  $units: null,
-  $sizeUnit: "px",
-  $negative: false
-) {
+@function ds-spacing($units: null, $sizeUnit: "px", $negative: false) {
   @if $units {
     $values: ();
 

package/foundations/helpers/typography.scss

@@ -49,10 +49,7 @@ $dsSerifWeights: (
 @mixin ds-typography($component, $forcePx: false) {
   $tmpMap: map.get($typographyTokensScreenSmall, $component);
   $tmpMapScreenLarge: map.get($typographyTokensScreenLarge, $component);
-  $tmpMapScreenExtraLarge: map.get(
-    $typographyTokensScreenExtraLarge,
-    $component
-  );
+  $tmpMapScreenExtraLarge: map.get($typographyTokensScreenExtraLarge, $component);
 
   @if $tmpMap {
     @include ds-mq-largest-breakpoint(mobile) {
@@ -67,12 +64,7 @@ $dsSerifWeights: (
     @include ds-mq-only-breakpoint(tablet) {
       @include _ds-normalize-letter-spacing($tmpMapScreenLarge);
       @each $key in map-keys($tmpMapScreenLarge) {
-        @include _ds-typography-get-property(
-          $tmpMapScreenLarge,
-          $key,
-          $forcePx,
-          "large"
-        );
+        @include _ds-typography-get-property($tmpMapScreenLarge, $key, $forcePx, "large");
       }
     }
   }
@@ -81,12 +73,7 @@ $dsSerifWeights: (
     @include ds-mq-smallest-breakpoint(desktop) {
       @include _ds-normalize-letter-spacing($tmpMapScreenExtraLarge);
       @each $key in map-keys($tmpMapScreenExtraLarge) {
-        @include _ds-typography-get-property(
-          $tmpMapScreenExtraLarge,
-          $key,
-          $forcePx,
-          "extraLarge"
-        );
+        @include _ds-typography-get-property($tmpMapScreenExtraLarge, $key, $forcePx, "extraLarge");
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "8.0.7",
+  "version": "8.0.9",
   "description": "DN design system for web.",
   "main": "index.js",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",
@@ -16,11 +16,9 @@
   },
   "devDependencies": {
     "postcss": "8.4.31",
-    "stylelint": "^15.6.2",
-    "stylelint-config-prettier": "^9.0.5",
-    "stylelint-config-standard": "^33.0.0",
-    "stylelint-config-standard-scss": "^9.0.0",
-    "stylelint-prettier": "^3.0.0",
+    "stylelint": "^15.11.0",
+    "stylelint-config-recommended-scss": "^13.1.0",
+    "stylelint-prettier": "^4.0.2",
     "stylelint-sass-render-errors": "^3.0.1",
     "stylelint-selector-bem-pattern": "^2.1.1"
   },