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

package/CHANGELOG.md

@@ -4,6 +4,20 @@ 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)
+
+
+### Maintenance
+
+* **web:** generate readme files based on storybook stories ([#1493](https://github.com/BonnierNews/dn-design-system/issues/1493)) ([253fa95](https://github.com/BonnierNews/dn-design-system/commit/253fa9592f35cb8f80faeafc2de9ba1d7da3ea3f))
+
 ## [21.1.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.1...@bonniernews/dn-design-system-web@21.1.2) (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/divider/README-NJK.md

@@ -0,0 +1,34 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)
+- Storybook: [Divider](https://designsystem.dn.se/?path=/docs/basic-divider--docs)
+- Storybook (Latest): [Divider](https://designsystem-latest.dn.se/?path=/docs/basic-divider--docs)
+
+----
+
+# Divider
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|variant | String | no | soft, medium, strong | soft | |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+
+## Minimum requirement example
+
+### Nunjucks
+
+These are copy paste friendly examples to quickliy get started using a component.
+
+```html
+{% from '@bonniernews/dn-design-system-web/components/divider/divider.njk' import Divider %}
+
+{{ Divider({
+  variant: "soft"
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/divider/divider";
+```

package/components/divider/README.md

@@ -1,34 +1,11 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)
-- Storybook: [Divider](https://designsystem.dn.se/?path=/docs/basic-divider--docs)
-- Storybook (Latest): [Divider](https://designsystem-latest.dn.se/?path=/docs/basic-divider--docs)
+Divider
+=======
 
-----
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)
+*   Storybook: [Divider](https://designsystem.dn.se/?path=/docs/basic-divider--docs)
 
-# Divider
+The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/divider/divider.scss'`
 
-## Parameters
+<table class="docblock-argstable sb-unstyled css-v2ifgj"><thead class="docblock-argstable-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody class="docblock-argstable-body"><tr><td class="css-4lbn0a"><span class="css-in3yi3">variant</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"soft"</span><span class="css-o1d7ko">"medium"</span><span class="css-o1d7ko">"hard"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"soft"</span></div></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">classNames</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">attributes</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">object</span></div></div></td><td><span>-</span></td></tr></tbody></table>
 
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|variant | String | no | soft, medium, strong | soft | |
-|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
-|classNames | String | no | | | Ex. "my-special-class" |
-
-## Minimum requirement example
-
-### Nunjucks
-
-These are copy paste friendly examples to quickliy get started using a component.
-
-```html
-{% from '@bonniernews/dn-design-system-web/components/divider/divider.njk' import Divider %}
-
-{{ Divider({
-  variant: "soft"
-})}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/divider/divider";
-```
+<pre class="prismjs css-4zr3vl"><div class="language-jsx css-zye6j" style="white-space: pre;"><span class="token tag punctuation">&lt;</span><span class="token tag class-name">Divider</span><span class="token tag"> </span><span class="token tag attr-name">variant</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">soft</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag punctuation">/&gt;</span></div></pre>

package/components/divider/divider.tsx

@@ -6,6 +6,13 @@ export interface DividerProps {
   attributes?: object;
 }
 
+/**
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)
+ * - Storybook: [Divider](https://designsystem.dn.se/?path=/docs/basic-divider--docs)
+ *
+ * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
+ * `@use '@bonniernews/dn-design-system-web/components/divider/divider.scss'`
+ */
 export const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {
   const classes = formatClassString([
     'ds-divider',

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 {