@bonniernews/dn-design-system-web 21.1.3 → 21.1.4

package/CHANGELOG.md

@@ -4,6 +4,13 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [21.1.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.3...@bonniernews/dn-design-system-web@21.1.4) (2024-11-15)
+
+
+### Bug Fixes
+
+* **web:** refactor deprecated sass ([#1498](https://github.com/BonnierNews/dn-design-system/issues/1498)) ([390dac7](https://github.com/BonnierNews/dn-design-system/commit/390dac7f47444978276124aa396c9cccfd2aeef1))
+
 ## [21.1.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.2...@bonniernews/dn-design-system-web@21.1.3) (2024-11-15)
 
 

package/assets/teaser/teaser.scss

@@ -32,9 +32,10 @@ $grade-size: ds-px-to-rem(34px);
 
   .ds-teaser__vignette {
     display: block;
-    @include ds-typography($ds-typography-functionallabel01);
-    color: $ds-theme-color;
     margin-bottom: ds-spacing($ds-s-025);
+    @include ds-typography($ds-typography-functionallabel01) {
+      color: $ds-theme-color;
+    }
   }
 
   .ds-teaser__title {
@@ -56,10 +57,11 @@ $grade-size: ds-px-to-rem(34px);
   }
 
   .ds-teaser__text {
-    @include ds-typography($ds-typography-detailmedryckare);
-    color: $ds-color-text-primary;
     // Should be replaced with dynamic spacing layout token when available
     margin: ds-spacing($ds-s-050 0 0);
+    @include ds-typography($ds-typography-detailmedryckare) {
+      color: $ds-color-text-primary;
+    }
     @include ds-mq-smallest-breakpoint(tablet) {
       margin-top: ds-spacing($ds-s-075);
     }

package/components/badge/badge.scss

@@ -7,8 +7,6 @@ $ds-badge__min-size: 8px;
   box-sizing: content-box;
 
   .ds-badge__inner {
-    @include ds-typography($ds-typography-functionalmeta02, $lineHeight: 0, $fontWeight: $ds-fontweight-semibold);
-    color: $ds-color-static-white;
     background-color: $ds-color-component-brand;
     border: $ds-color-border-secondary ds-border-width(x2) solid;
     border-radius: 100px;
@@ -18,16 +16,19 @@ $ds-badge__min-size: 8px;
     min-height: ds-px-to-rem($ds-badge__min-size);
     min-width: ds-px-to-rem($ds-badge__min-size);
     padding: ds-spacing($ds-s-025, rem);
+    @include ds-typography($ds-typography-functionalmeta02, $lineHeight: 0, $fontWeight: $ds-fontweight-semibold) {
+      color: $ds-color-static-white;
+    }
     @at-root .ds-force-px#{&} {
+      min-height: $ds-badge__min-size;
+      min-width: $ds-badge__min-size;
+      padding: ds-spacing($ds-s-025);
       @include ds-typography(
         $ds-typography-functionalmeta02,
         $forcePx: true,
         $lineHeight: 0,
         $fontWeight: $ds-fontweight-semibold
       );
-      min-height: $ds-badge__min-size;
-      min-width: $ds-badge__min-size;
-      padding: ds-spacing($ds-s-025);
     }
   }
 

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

@@ -15,28 +15,30 @@
 
   .ds-blocked-content__body {
     margin: ds-spacing(0 0 $ds-s-200);
-    @include ds-typography($ds-typography-functionalbody02);
-    color: $ds-color-text-primary;
+    @include ds-typography($ds-typography-functionalbody02) {
+      color: $ds-color-text-primary;
+    }
     @at-root .ds-force-px#{&} {
       @include ds-typography($ds-typography-functionalbody02, true);
     }
   }
 
   .ds-blocked-content__link {
-    @include ds-link($ds-link-paragraph);
     display: inline-block;
     margin-top: ds-spacing($ds-s-050);
     word-break: break-word;
+    @include ds-link($ds-link-paragraph);
   }
 
   .ds-blocked-content__title {
+    margin: ds-spacing(0 0 $ds-s-050);
     @include ds-typography(
       $ds-typography-functionalheading01,
       $lineHeight: $ds-lineheight-m,
       $fontWeight: $ds-fontweight-semibold
-    );
-    color: $ds-color-text-primary;
-    margin: ds-spacing(0 0 $ds-s-050);
+    ) {
+      color: $ds-color-text-primary;
+    }
     @at-root .ds-force-px#{&} {
       @include ds-typography(
         $ds-typography-functionalheading01,

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

@@ -48,37 +48,40 @@
     top: ds-spacing($ds-s-075);
   }
   .ds-buddy-menu__greeting {
-    @include ds-typography($ds-typography-functionalheading03);
-    color: $ds-color-text-primary;
     margin: ds-spacing(0 0 $ds-s-100);
     display: block;
+    @include ds-typography($ds-typography-functionalheading03) {
+      color: $ds-color-text-primary;
+    }
   }
   .ds-buddy-menu__account-title,
   .ds-buddy-menu__addons-title,
   .ds-buddy-menu__links-title {
-    @include ds-typography($ds-typography-functionalbody02, $fontWeight: $ds-fontweight-semibold);
-    color: $ds-color-text-primary;
     margin: ds-spacing(0 0 $ds-s-025);
+    @include ds-typography($ds-typography-functionalbody02, $fontWeight: $ds-fontweight-semibold) {
+      color: $ds-color-text-primary;
+    }
   }
   .ds-buddy-menu__links-title {
     padding: ds-spacing(0 $ds-s-100);
   }
   .ds-buddy-menu__addons-list {
     padding: 0;
-    margin: ds-spacing(0 0 $ds-s-100);
     list-style: none;
+    margin: ds-spacing(0 0 $ds-s-100);
     a {
       @include ds-link($ds-link-list);
-      @include ds-typography($ds-typography-functionalbody02);
-      color: $ds-color-text-primary-02;
-      margin: ds-spacing(0 0 $ds-s-100);
+      @include ds-typography($ds-typography-functionalbody02) {
+        color: $ds-color-text-primary-02;
+      }
     }
   }
   .ds-buddy-menu__account-level {
-    @include ds-typography($ds-typography-functionalbody02);
-    color: $ds-color-text-primary-02;
     margin: ds-spacing(0 0 $ds-s-100);
     display: block;
+    @include ds-typography($ds-typography-functionalbody02) {
+      color: $ds-color-text-primary-02;
+    }
   }
   .ds-buddy-menu__links-list {
     border-bottom-left-radius: ds-border-radius(x2);

package/components/button/button.scss

@@ -1,4 +1,3 @@
-@use "sass:math";
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../icon-sprite/icon-sprite.scss";
 @use "../spinner/spinner.scss" as *;
@@ -17,6 +16,17 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
   --ds-btn__border-color: transparent;
   --ds-btn__outline-color: #{$ds-color-border-focus-02};
   --ds-btn__icon-size: #{ds-px-to-rem(24px)};
+
+  cursor: pointer;
+  border: $ds-btn-outlined__border-width solid var(--ds-btn__border-color);
+  border-radius: ds-border-radius(x1);
+  position: relative;
+  background-color: var(--ds-btn__background-color);
+  color: var(--ds-btn__color);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
   @at-root .ds-force-px#{&} {
     --ds-btn__icon-size: 24px;
   }
@@ -35,6 +45,7 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
       --ds-btn__color: #{$ds-color-text-primary};
     }
   }
+
   &.ds-btn--secondary {
     &.ds-btn--default,
     &.ds-btn--elevated {
@@ -49,6 +60,7 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
       --ds-btn__color: #{$ds-color-text-primary};
     }
   }
+
   &.ds-btn--brand {
     --ds-btn__outline-color: #{$ds-color-border-focus};
     &.ds-btn--default,
@@ -64,6 +76,7 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
       --ds-btn__color: #{$ds-color-text-brand};
     }
   }
+
   &.ds-btn--staticWhite {
     --ds-btn__outline-color: #{$ds-color-static-white};
     &.ds-btn--default,
@@ -90,68 +103,64 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
   &.ds-btn--transparent {
     --ds-btn__background-color: transparent;
   }
+
   &.ds-btn--rounded {
     border-radius: 100px;
   }
+
   &.ds-btn--elevated {
     box-shadow: ds-shadow-get-box-shadow($ds-shadow-elevation-m);
   }
 
   &.ds-btn--small {
-    @include ds-typography($ds-typography-detailstandard-button-small);
     --ds-btn__icon-size: #{ds-px-to-rem(20px)};
     --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-050), true)};
     padding: _btn-brdr(ds-spacing($ds-s-025), true) _btn-brdr(ds-spacing($ds-s-075), true);
+    @include ds-typography($ds-typography-detailstandard-button-small);
     @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-detailstandard-button-small, true);
       --ds-btn__icon-size: 20px;
       --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-050))};
       padding: _btn-brdr(ds-spacing($ds-s-025)) _btn-brdr(ds-spacing($ds-s-075));
+      @include ds-typography($ds-typography-detailstandard-button-small, true);
     }
   }
+
   &.ds-btn--medium {
-    @include ds-typography($ds-typography-detailstandard-button);
     --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-100), true)};
     padding: _btn-brdr(ds-spacing($ds-s-050), true) _btn-brdr(ds-spacing($ds-s-125), true);
+    @include ds-typography($ds-typography-detailstandard-button);
     @at-root .ds-force-px#{&} {
       --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-100))};
-      @include ds-typography($ds-typography-detailstandard-button, true);
       padding: _btn-brdr(ds-spacing($ds-s-050)) _btn-brdr(ds-spacing($ds-s-125));
+      @include ds-typography($ds-typography-detailstandard-button, true);
     }
   }
+
   &.ds-btn--large {
-    @include ds-typography($ds-typography-detailstandard-button);
     --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-125), true)};
     padding: _btn-brdr(ds-spacing($ds-s-075), true) _btn-brdr(ds-spacing($ds-s-150), true);
+    @include ds-typography($ds-typography-detailstandard-button);
+
     @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-detailstandard-button, true);
       --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-125))};
       padding: _btn-brdr(ds-spacing($ds-s-075)) _btn-brdr(ds-spacing($ds-s-150));
+      @include ds-typography($ds-typography-detailstandard-button, true);
     }
   }
+
   &.ds-btn--xlarge {
-    @include ds-typography($ds-typography-detailstandard-button-xlarge);
     --ds-btn__icon-size: #{ds-px-to-rem(32px)};
     --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-200), true) - ds-px-to-rem(4px)};
     padding: _btn-brdr(ds-spacing($ds-s-075), true) _btn-brdr(ds-spacing($ds-s-200), true);
+    @include ds-typography($ds-typography-detailstandard-button-xlarge);
     @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-detailstandard-button-xlarge, true);
       --ds-btn__icon-size: 32px;
       --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-200)) - 4px};
       padding: _btn-brdr(ds-spacing($ds-s-075)) _btn-brdr(ds-spacing($ds-s-200));
+      @include ds-typography($ds-typography-detailstandard-button-xlarge, true);
     }
   }
 
-  cursor: pointer;
-  border: $ds-btn-outlined__border-width solid var(--ds-btn__border-color);
-  border-radius: ds-border-radius(x1);
-  position: relative;
-  background-color: var(--ds-btn__background-color);
-  color: var(--ds-btn__color);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
   span {
     pointer-events: none;
   }
@@ -196,6 +205,7 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
       opacity: $ds-opacity-component-hover-pressed;
     }
   }
+
   &:active:not(:disabled):not(.ds-loading)::before {
     opacity: $ds-opacity-component-hover-pressed;
   }

package/components/checkbox/checkbox.scss

@@ -41,8 +41,8 @@ $ds-checkbox__icon-size: 24px;
       @include ds-typography($ds-typography-functionalbody02);
 
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functionalbody02, true);
         margin: ds-spacing(0 0 0 $ds-s-050);
+        @include ds-typography($ds-typography-functionalbody02, true);
       }
     }
 

package/components/disclaimer/disclaimer.scss

@@ -20,10 +20,11 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
   }
 
   .ds-disclaimer__body-html {
-    @include ds-typography($ds-typography-functionalbody01);
     margin: 0;
-    color: $ds-color-text-primary-02;
     flex-grow: 1;
+    @include ds-typography($ds-typography-functionalbody01) {
+      color: $ds-color-text-primary-02;
+    }
 
     @at-root .ds-force-px#{&} {
       @include ds-typography($ds-typography-functionalbody01, true);
@@ -34,8 +35,9 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
     }
     b,
     strong {
-      @include ds-typography($ds-typography-functionalbody01, $fontWeight: $ds-fontweight-semibold);
-      color: $ds-color-text-primary;
+      @include ds-typography($ds-typography-functionalbody01, $fontWeight: $ds-fontweight-semibold) {
+        color: $ds-color-text-primary;
+      }
       @at-root .ds-force-px#{&} {
         @include ds-typography($ds-typography-functionalbody01, $forcePx: true, $fontWeight: $ds-fontweight-semibold);
       }

package/components/empty-state/empty-state.scss

@@ -12,16 +12,18 @@
     margin-top: ds-spacing($ds-s-100);
 
     h2 {
-      @include ds-typography($ds-typography-functionalheading03);
-      color: $ds-color-text-primary;
       margin: 0;
+      @include ds-typography($ds-typography-functionalheading03) {
+        color: $ds-color-text-primary;
+      }
     }
 
     .ds-empty-state__body {
-      @include ds-typography($ds-typography-functionalbody02);
       display: block;
-      color: $ds-color-text-primary-02;
       margin-top: ds-spacing($ds-s-025);
+      @include ds-typography($ds-typography-functionalbody02) {
+        color: $ds-color-text-primary-02;
+      }
     }
   }
 

package/components/factbox/factbox.scss

@@ -36,8 +36,9 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
 
   .ds-factbox__body {
     overflow: hidden;
-    @include ds-typography($ds-typography-functionalbody02);
-    color: $ds-color-text-primary;
+    @include ds-typography($ds-typography-functionalbody02) {
+      color: $ds-color-text-primary;
+    }
     @at-root .ds-force-px#{&} {
       @include ds-typography($ds-typography-functionalbody02, true);
     }
@@ -65,9 +66,10 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
     }
   }
   .ds-factbox__title {
-    @include ds-typography($ds-typography-functionalheading01, $lineHeight: $ds-lineheight-m);
-    color: $ds-color-text-primary;
     margin: ds-spacing(0 0 $ds-s-100);
+    @include ds-typography($ds-typography-functionalheading01, $lineHeight: $ds-lineheight-m) {
+      color: $ds-color-text-primary;
+    }
     @at-root .ds-force-px#{&} {
       @include ds-typography($ds-typography-functionalheading01, $forcePx: true, $lineHeight: $ds-lineheight-m);
     }

package/components/footer/footer.scss

@@ -96,15 +96,15 @@ $ds-footer-column-gap: ds-spacing($ds-s-400);
     }
 
     h2 {
-      @include ds-typography($ds-typography-functionalheading01, $lineHeight: $ds-lineheight-l);
       margin: ds-spacing(0 0 $ds-s-100);
+      @include ds-typography($ds-typography-functionalheading01, $lineHeight: $ds-lineheight-l);
     }
 
     ul {
-      @include ds-typography($ds-typography-functionalbody02, $lineHeight: $ds-lineheight-l);
       list-style: none;
       margin: 0;
       padding: 0;
+      @include ds-typography($ds-typography-functionalbody02, $lineHeight: $ds-lineheight-l);
 
       li:not(:last-of-type) {
         margin: ds-spacing(0 0 $ds-s-050);
@@ -122,15 +122,14 @@ $ds-footer-column-gap: ds-spacing($ds-s-400);
   }
 
   &__channels {
-    @include ds-typography($ds-typography-functionalbody01, $lineHeight: $ds-lineheight-l);
     margin-top: ds-spacing($ds-footer-row-gap-spacing-token);
+    @include ds-typography($ds-typography-functionalbody01, $lineHeight: $ds-lineheight-l);
 
     a {
-      @include ds-link($ds-link-list);
-      @include ds-focus($offset: 2px, $color: $ds-color-static-white);
       margin: ds-spacing($ds-s-100 $ds-s-100 0 0);
       display: inline-block;
-
+      @include ds-link($ds-link-list);
+      @include ds-focus($offset: 2px, $color: $ds-color-static-white);
       @include ds-mq-smallest-breakpoint(tablet) {
         margin: ds-spacing($ds-s-100 $ds-s-150 0 0);
       }

package/components/game-header/game-header.scss

@@ -25,9 +25,10 @@ $ds-game-header__icon-size: 105px;
   }
 
   .ds-game-header__title {
-    @include ds-typography($ds-typography-functionalheading05);
-    color: inherit;
     margin: 0;
+    @include ds-typography($ds-typography-functionalheading05) {
+      color: inherit;
+    }
   }
 
   .ds-game-header__media {
@@ -44,9 +45,10 @@ $ds-game-header__icon-size: 105px;
   }
 
   .ds-game-header__description-content {
-    @include ds-typography($ds-typography-functionalbody02);
     padding: ds-spacing($ds-s-100);
-    color: $ds-color-text-primary;
+    @include ds-typography($ds-typography-functionalbody02) {
+      color: $ds-color-text-primary;
+    }
 
     @include ds-mq-only-breakpoint(mobile) {
       padding-top: ds-spacing($ds-s-050);

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

@@ -63,8 +63,9 @@ $ds-group-header__icon-size: 24px;
 
   .ds-group-header__right-link {
     @include ds-typography($ds-typography-functionalbody01);
-    @include ds-link($ds-link-paragraph);
-    color: var(--group-header-icon-color);
+    @include ds-link($ds-link-paragraph) {
+      color: var(--group-header-icon-color);
+    }
   }
 
   .ds-group-header__icon {
@@ -100,8 +101,8 @@ $ds-group-header__icon-size: 24px;
   .ds-group-header__title {
     padding: ds-spacing($ds-s-075 $ds-s-100);
     flex: 1;
-    @include ds-typography($ds-typography-functionalheading01, $lineHeight: $ds-lineheight-l);
     margin: 0;
+    @include ds-typography($ds-typography-functionalheading01, $lineHeight: $ds-lineheight-l);
   }
 
   &--bottom-border .ds-group-header__title {

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

@@ -1,9 +1,10 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 
 .ds-image-caption {
-  @include ds-typography($ds-typography-functionalbody01);
   margin-top: ds-spacing($ds-s-050);
-  color: $ds-color-text-primary;
+  @include ds-typography($ds-typography-functionalbody01) {
+    color: $ds-color-text-primary;
+  }
 
   @at-root .ds-force-px#{&} {
     @include ds-typography($ds-typography-functionalbody01, true);

package/components/link-box/link-box-item.scss

@@ -24,16 +24,18 @@
   }
 
   .ds-link-box-item__label {
-    color: $ds-color-text-primary;
-    @include ds-typography($ds-typography-functionalbody01, $fontWeight: $ds-fontweight-semibold);
     word-break: break-word;
     display: block;
+    @include ds-typography($ds-typography-functionalbody01, $fontWeight: $ds-fontweight-semibold) {
+      color: $ds-color-text-primary;
+    }
   }
 
   .ds-link-box-item__text {
-    color: $ds-color-text-primary-02;
-    @include ds-typography($ds-typography-functionalbody01);
     display: block;
+    @include ds-typography($ds-typography-functionalbody01) {
+      color: $ds-color-text-primary-02;
+    }
   }
 
   .ds-link-box-item__content {

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

@@ -89,14 +89,16 @@ $ds-list-item__portrait-size--small: 36px;
     overflow-wrap: anywhere;
 
     .ds-list-item__title {
-      @include ds-typography($ds-typography-functionalbody02, $lineHeight: $ds-lineheight-m);
+      text-align: left;
+      @include ds-typography($ds-typography-functionalbody02, $lineHeight: $ds-lineheight-m) {
+        color: $ds-color-text-primary;
+      }
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functionalbody02, $lineHeight: $ds-lineheight-m, $forcePx: true);
+        @include ds-typography($ds-typography-functionalbody02, $lineHeight: $ds-lineheight-m, $forcePx: true) {
+          color: $ds-color-text-primary;
+        }
       }
 
-      color: $ds-color-text-primary;
-      text-align: left;
-
       &.ds-list-item__title--semibold {
         @include ds-typography(
           $ds-typography-functionalbody02,
@@ -137,22 +139,28 @@ $ds-list-item__portrait-size--small: 36px;
     }
 
     .ds-list-item__subtitle {
-      @include ds-typography($ds-typography-functionalbody02);
+      text-align: left;
+      @include ds-typography($ds-typography-functionalbody02) {
+        color: $ds-color-text-primary-02;
+      }
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functionalbody02, true);
+        @include ds-typography($ds-typography-functionalbody02, true) {
+          color: $ds-color-text-primary-02;
+        }
       }
-      color: $ds-color-text-primary-02;
-      text-align: left;
     }
   }
 
   .ds-list-item__meta {
-    @include ds-typography($ds-typography-functionalbody01);
+    text-align: right;
+    @include ds-typography($ds-typography-functionalbody01) {
+      color: $ds-color-text-primary-02;
+    }
     @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-functionalbody01, true);
+      @include ds-typography($ds-typography-functionalbody01, true) {
+        color: $ds-color-text-primary-02;
+      }
     }
-    color: $ds-color-text-primary-02;
-    text-align: right;
   }
 
   .ds-list-item__icon-left {
@@ -265,9 +273,9 @@ $ds-list-item__portrait-size--small: 36px;
 
 .ds-list-item--toggle {
   a {
-    @include ds-link($ds-link-list);
     display: block;
     width: 100%;
+    @include ds-link($ds-link-list);
   }
 }
 

package/components/modal/modal.scss

@@ -85,17 +85,19 @@ body.no-scroll {
     }
 
     > h2 {
-      @include ds-typography($ds-typography-functionalheading03);
       margin: ds-spacing(0 0 $ds-s-200);
-      color: $ds-color-text-primary;
       text-align: center;
+      @include ds-typography($ds-typography-functionalheading03) {
+        color: $ds-color-text-primary;
+      }
     }
 
     > p {
-      @include ds-typography($ds-typography-functionalbody02);
       margin: 0;
       text-align: center;
-      color: $ds-color-text-primary;
+      @include ds-typography($ds-typography-functionalbody02) {
+        color: $ds-color-text-primary;
+      }
     }
 
     > .ds-modal__buttons {

package/components/pagination/pagination.scss

@@ -19,14 +19,15 @@
     display: flex;
   }
   &__page {
-    @include ds-typography($ds-typography-functionalbody02);
-    color: $ds-color-text-primary;
     margin: ds-spacing($ds-s-050);
     min-height: ds-px-to-rem(32);
     min-width: ds-px-to-rem(32);
     display: flex;
     align-items: center;
     justify-content: center;
+    @include ds-typography($ds-typography-functionalbody02) {
+      color: $ds-color-text-primary;
+    }
 
     &--current {
       color: $ds-color-text-secondary;

package/components/profile-header/profile-header.scss

@@ -39,10 +39,11 @@
   }
 
   .ds-profile-header__title {
-    @include ds-typography($ds-typography-functionalheading03, $fontWeight: $ds-fontweight-bold);
-    color: $ds-color-text-primary;
     margin: 0;
     word-break: break-word;
+    @include ds-typography($ds-typography-functionalheading03, $fontWeight: $ds-fontweight-bold) {
+      color: $ds-color-text-primary;
+    }
   }
 
   .ds-profile-header__media {
@@ -56,15 +57,17 @@
   .ds-profile-header__article-count {
     margin: ds-spacing(0 $ds-s-100 0);
     padding-top: ds-spacing($ds-s-050);
-    @include ds-typography($ds-typography-functionalbody02);
-    color: $ds-color-text-primary-02;
+    @include ds-typography($ds-typography-functionalbody02) {
+      color: $ds-color-text-primary-02;
+    }
   }
 
   .ds-profile-header__description {
-    @include ds-typography($ds-typography-functionalbody02);
-    color: $ds-color-text-primary;
     margin: ds-spacing(0 $ds-s-100 0);
     padding-top: ds-spacing($ds-s-100);
+    @include ds-typography($ds-typography-functionalbody02) {
+      color: $ds-color-text-primary;
+    }
 
     a {
       @include ds-link($ds-link-article-body);

package/components/quote/quote.scss

@@ -1,11 +1,12 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 
 .ds-quote {
-  @include ds-typography($ds-typography-detailarticle-quote);
-  color: $ds-color-text-primary;
   margin: 0;
   padding: ds-spacing($ds-s-100 0 $ds-s-200);
   position: relative;
+  @include ds-typography($ds-typography-detailarticle-quote) {
+    color: $ds-color-text-primary;
+  }
 
   @at-root .ds-force-px#{&} {
     @include ds-typography($ds-typography-detailarticle-quote, true);