@bonniernews/dn-design-system-web 25.0.5 → 25.0.6-beta.1

package/components/factbox/factbox.scss

@@ -9,20 +9,20 @@ $ds-factbox__padding-left: $ds-factbox__padding - $ds-factbox-border-width;
 $ds-factbox__max-height: 500px; // includes top/bottom spacing
 
 .ds-factbox {
-  background-color: $ds-color-surface-background;
+  background-color: $ds-color-surface-primary;
   box-sizing: border-box;
   margin: 0;
   padding: ds-spacing($ds-s-100 0 $ds-s-200);
 
   .ds-factbox__inner {
-    border-top: ds-border-width(x1) solid $ds-color-border-primary;
+    border-top: ds-border-width(xxs) solid $ds-color-border-primary;
     border-left: $ds-factbox-border-width solid $ds-theme-color;
     max-height: ds-px-to-rem($ds-factbox__max-height);
     overflow: hidden;
     position: relative;
     padding: $ds-factbox__padding;
     padding-left: $ds-factbox__padding-left;
-    padding-top: $ds-factbox__padding - ds-border-width(x1);
+    padding-top: $ds-factbox__padding - ds-border-width(xxs);
 
     @at-root .ds-force-px#{&} {
       max-height: $ds-factbox__max-height;
@@ -36,11 +36,11 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
 
   .ds-factbox__body {
     overflow: hidden;
-    @include ds-typography($ds-typography-functionalbody02) {
+    @include ds-typography($ds-typography-functional-body-md) {
       color: $ds-color-text-primary;
     }
     @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-functionalbody02, true);
+      @include ds-typography($ds-typography-functional-body-md, true);
     }
     p {
       margin: ds-spacing(0 0 $ds-s-100);
@@ -53,12 +53,12 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
     }
     b,
     strong {
-      @include ds-typography($ds-typography-functionalbody02, $fontWeight: $ds-fontweight-semibold);
+      @include ds-typography($ds-typography-functional-body-md, $fontWeight: $ds-fontweight-semibold);
     }
     @at-root .ds-force-px#{&} {
       b,
       strong {
-        @include ds-typography($ds-typography-functionalbody02, $forcePx: true, $fontWeight: $ds-fontweight-semibold);
+        @include ds-typography($ds-typography-functional-body-md, $forcePx: true, $fontWeight: $ds-fontweight-semibold);
       }
     }
     img {
@@ -67,11 +67,11 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
   }
   .ds-factbox__title {
     margin: ds-spacing(0 0 $ds-s-100);
-    @include ds-typography($ds-typography-functionalheading01, $lineHeight: $ds-lineheight-m) {
+    @include ds-typography($ds-typography-functional-heading-xxs, $lineHeight: $ds-lineheight-md) {
       color: $ds-color-text-primary;
     }
     @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-functionalheading01, $forcePx: true, $lineHeight: $ds-lineheight-m);
+      @include ds-typography($ds-typography-functional-heading-xxs, $forcePx: true, $lineHeight: $ds-lineheight-md);
     }
   }
   .ds-factbox__vignette {
@@ -79,7 +79,7 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
     margin-right: ds-spacing($ds-s-025);
   }
   .ds-icon--grade {
-    color: $ds-color-icon-primary;
+    color: $ds-color-text-primary;
     margin: ds-spacing(0 0 $ds-s-100);
     display: block;
     height: ds-px-to-rem($ds-factbox__grade-size);
@@ -96,7 +96,7 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
   }
   .ds-factbox__show-more--collapsable::before {
     content: "";
-    background: $ds-color-gradient-content-fade-up;
+    background: $ds-gradient-content-fade-up;
     height: ds-px-to-rem($ds-factbox__show-more-fade-height);
     width: 100%;
     position: absolute;
@@ -111,7 +111,7 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
     display: none;
   }
   .ds-factbox__show-more--collapsable {
-    background-color: $ds-color-surface-background;
+    background-color: $ds-color-surface-primary;
     display: block;
     button {
       margin: ds-spacing($ds-s-100 0 0);
@@ -134,7 +134,7 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
         content: "";
         height: $ds-factbox__padding;
         width: 100%;
-        background-color: $ds-color-surface-background;
+        background-color: $ds-color-surface-primary;
         position: absolute;
       }
     }

package/components/footer/footer.scss

@@ -5,10 +5,10 @@ $ds-footer-row-padding-spacing-token: $ds-s-100;
 $ds-footer-column-gap: ds-spacing($ds-s-400);
 
 .ds-footer {
-  background-color: $ds-color-static-black;
+  background-color: $ds-color-neutral-black;
 
   &__inner {
-    color: $ds-color-static-white;
+    color: $ds-color-neutral-white;
     padding: ds-spacing($ds-s-200 $ds-s-100);
     display: grid;
     margin: 0 auto;
@@ -37,9 +37,9 @@ $ds-footer-column-gap: ds-spacing($ds-s-400);
   &__rudolf,
   &__editors,
   &__buttons {
-    border-top-width: ds-border-width(x1);
+    border-top-width: ds-border-width(xxs);
     border-top-style: solid;
-    border-color: $ds-color-static-transparent-white-10;
+    border-color: $ds-color-dark-neutral-alpha-200;
   }
 
   @include ds-mq-smallest-breakpoint(desktop) {
@@ -50,8 +50,8 @@ $ds-footer-column-gap: ds-spacing($ds-s-400);
 
     &__link-grid {
       border-bottom-style: solid;
-      border-bottom-width: ds-border-width(x1);
-      border-color: $ds-color-static-transparent-white-10;
+      border-bottom-width: ds-border-width(xxs);
+      border-color: $ds-color-dark-neutral-alpha-200;
     }
   }
 
@@ -61,7 +61,7 @@ $ds-footer-column-gap: ds-spacing($ds-s-400);
 
     &,
     p {
-      @include ds-typography($ds-typography-functionalbody01, $lineHeight: $ds-lineheight-l);
+      @include ds-typography($ds-typography-functional-body-sm, $lineHeight: $ds-lineheight-lg);
     }
 
     p {
@@ -97,14 +97,14 @@ $ds-footer-column-gap: ds-spacing($ds-s-400);
 
     h2 {
       margin: ds-spacing(0 0 $ds-s-100);
-      @include ds-typography($ds-typography-functionalheading01, $lineHeight: $ds-lineheight-l);
+      @include ds-typography($ds-typography-functional-heading-xxs, $lineHeight: $ds-lineheight-lg);
     }
 
     ul {
       list-style: none;
       margin: 0;
       padding: 0;
-      @include ds-typography($ds-typography-functionalbody02, $lineHeight: $ds-lineheight-l);
+      @include ds-typography($ds-typography-functional-body-md, $lineHeight: $ds-lineheight-lg);
 
       li:not(:last-of-type) {
         margin: ds-spacing(0 0 $ds-s-050);
@@ -112,7 +112,7 @@ $ds-footer-column-gap: ds-spacing($ds-s-400);
 
       a {
         @include ds-link($ds-link-list);
-        @include ds-focus($offset: 2px, $color: $ds-color-static-white);
+        @include ds-focus($offset: 2px, $color: $ds-color-neutral-white);
       }
     }
   }
@@ -130,9 +130,9 @@ $ds-footer-column-gap: ds-spacing($ds-s-400);
       background-color: transparent;
       border: none;
       cursor: pointer;
-      @include ds-typography($ds-typography-functionalbody01, $lineHeight: $ds-lineheight-l);
+      @include ds-typography($ds-typography-functional-body-sm, $lineHeight: $ds-lineheight-lg);
       @include ds-link($ds-link-list);
-      @include ds-focus($offset: 2px, $color: $ds-color-static-white);
+      @include ds-focus($offset: 2px, $color: $ds-color-neutral-white);
       @include ds-mq-smallest-breakpoint(tablet) {
         margin: ds-spacing($ds-s-100 $ds-s-150 0 0);
       }
@@ -148,19 +148,19 @@ $ds-footer-column-gap: ds-spacing($ds-s-400);
     .ds-footer__editors {
       &,
       p {
-        @include ds-typography($ds-typography-functionalbody01, $forcePx: true, $lineHeight: $ds-lineheight-l);
+        @include ds-typography($ds-typography-functional-body-sm, $forcePx: true, $lineHeight: $ds-lineheight-lg);
       }
     }
     .ds-footer__link-grid {
       h2 {
-        @include ds-typography($ds-typography-functionalheading01, true);
+        @include ds-typography($ds-typography-functional-heading-xxs, true);
       }
       ul {
-        @include ds-typography($ds-typography-functionalbody02, true);
+        @include ds-typography($ds-typography-functional-body-md, true);
       }
     }
     .ds-footer__buttons {
-      @include ds-typography($ds-typography-functionalbody01, true);
+      @include ds-typography($ds-typography-functional-body-sm, true);
     }
   }
 }

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

@@ -7,8 +7,8 @@ $ds-game-header__icon-size: 105px;
   width: 100%;
 
   .ds-game-header__top {
-    background-color: $ds-color-surface-background;
-    color: $ds-color-static-black;
+    background-color: $ds-color-surface-primary;
+    color: $ds-color-neutral-black;
   }
 
   .ds-game-header__top-content {
@@ -26,7 +26,7 @@ $ds-game-header__icon-size: 105px;
 
   .ds-game-header__title {
     margin: 0;
-    @include ds-typography($ds-typography-functionalheading05) {
+    @include ds-typography($ds-typography-functional-heading-lg) {
       color: inherit;
     }
   }
@@ -41,12 +41,12 @@ $ds-game-header__icon-size: 105px;
   }
 
   .ds-game-header__description {
-    background-color: $ds-color-surface-background;
+    background-color: $ds-color-surface-primary;
   }
 
   .ds-game-header__description-content {
     padding: ds-spacing($ds-s-100);
-    @include ds-typography($ds-typography-functionalbody02) {
+    @include ds-typography($ds-typography-functional-body-md) {
       color: $ds-color-text-primary;
     }
 
@@ -60,7 +60,7 @@ $ds-game-header__icon-size: 105px;
 
     b,
     strong {
-      @include ds-typography($ds-typography-functionalbody02, $fontWeight: $ds-fontweight-semibold);
+      @include ds-typography($ds-typography-functional-body-md, $fontWeight: $ds-fontweight-semibold);
     }
 
     p {

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

@@ -5,7 +5,7 @@
 $ds-group-header__icon-size: 24px;
 
 .ds-group-header {
-  --group-header-background: #{$ds-color-background-primary};
+  --group-header-background: #{$ds-color-surface-primary};
   --group-header-color: #{$ds-color-text-primary};
   --group-header-icon-color: currentColor;
   display: flex;
@@ -15,10 +15,10 @@ $ds-group-header__icon-size: 24px;
   align-items: stretch;
   background: var(--group-header-background);
   color: var(--group-header-color);
-  @include ds-typography($ds-typography-functionalbody02);
+  @include ds-typography($ds-typography-functional-body-md);
 
   &--bottom-border {
-    border-bottom: ds-border-width(x1) solid #{$ds-color-border-primary};
+    border-bottom: ds-border-width(xxs) solid #{$ds-color-border-primary};
     flex-basis: ds-spacing($ds-s-300) - 1px;
   }
 
@@ -62,7 +62,7 @@ $ds-group-header__icon-size: 24px;
   }
 
   .ds-group-header__right-link {
-    @include ds-typography($ds-typography-functionalbody01);
+    @include ds-typography($ds-typography-functional-body-sm);
     @include ds-link($ds-link-paragraph) {
       color: var(--group-header-icon-color);
     }
@@ -102,11 +102,11 @@ $ds-group-header__icon-size: 24px;
     padding: ds-spacing($ds-s-075 $ds-s-100);
     flex: 1;
     margin: 0;
-    @include ds-typography($ds-typography-functionalheading01, $lineHeight: $ds-lineheight-l);
+    @include ds-typography($ds-typography-functional-heading-xxs, $lineHeight: $ds-lineheight-lg);
   }
 
   &--bottom-border .ds-group-header__title {
-    padding-bottom: ds-spacing($ds-s-075) - ds-border-width(x1);
+    padding-bottom: ds-spacing($ds-s-075) - ds-border-width(xxs);
   }
 
   .ds-group-header__image {

package/components/icon-with-wrapper/icon-with-wrapper.njk

@@ -19,7 +19,7 @@
     {% set iconSize = size/16 + "rem" %}
   {% endif %}
 
-  {% set styleColor = "color: var(--ds-color-icon-" + color + ");" %}
+  {% set styleColor = "color: var(--ds-color-text-" + color + ");" %}
   {% set styleIcon = "width: " + iconSize + "; height: " + iconSize + ";" %}
 
   <div class="{{ classes }}" style="{{ styleIcon }} {{ styleColor }}" {{- attributes | safe}}>

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

@@ -2,16 +2,16 @@
 
 .ds-image-caption {
   margin-top: ds-spacing($ds-s-050);
-  @include ds-typography($ds-typography-functionalbody01) {
+  @include ds-typography($ds-typography-functional-body-sm) {
     color: $ds-color-text-primary;
   }
 
   @at-root .ds-force-px#{&} {
-    @include ds-typography($ds-typography-functionalbody01, true);
+    @include ds-typography($ds-typography-functional-body-sm, true);
   }
 
   > .ds-article-image__credits {
-    color: $ds-color-text-primary-02;
+    color: $ds-color-text-primary-subtle;
 
     &.ds-article-image__credits--nowrap {
       white-space: nowrap;

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

@@ -2,7 +2,7 @@
 
 .ds-link-box-item {
   padding: 0;
-  background-color: $ds-color-surface-background;
+  background-color: $ds-color-surface-primary;
   text-decoration: none;
   display: flex;
   flex-direction: column;
@@ -26,15 +26,15 @@
   .ds-link-box-item__label {
     word-break: break-word;
     display: block;
-    @include ds-typography($ds-typography-functionalbody01, $fontWeight: $ds-fontweight-semibold) {
+    @include ds-typography($ds-typography-functional-body-sm, $fontWeight: $ds-fontweight-semibold) {
       color: $ds-color-text-primary;
     }
   }
 
   .ds-link-box-item__text {
     display: block;
-    @include ds-typography($ds-typography-functionalbody01) {
-      color: $ds-color-text-primary-02;
+    @include ds-typography($ds-typography-functional-body-sm) {
+      color: $ds-color-text-primary-subtle;
     }
   }
 

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

@@ -3,7 +3,7 @@
 @use "./link-box-item";
 
 .ds-link-box {
-  background-color: $ds-color-surface-background;
+  background-color: $ds-color-surface-primary;
 
   .ds-link-box__grid {
     padding: ds-spacing($ds-s-100);

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

@@ -24,7 +24,7 @@ $ds-list-item__portrait-size--small: 36px;
   &.ds-list-item--border::after {
     content: "";
     width: 100%;
-    height: ds-border-width(x1);
+    height: ds-border-width(xxs);
     background: $ds-color-border-primary;
     position: absolute;
     bottom: 0;
@@ -78,7 +78,7 @@ $ds-list-item__portrait-size--small: 36px;
 
   .ds-list-item__icon-left,
   .ds-list-item__icon-right {
-    color: $ds-color-icon-primary;
+    color: $ds-color-text-primary;
   }
 
   .ds-list-item__titles {
@@ -90,26 +90,26 @@ $ds-list-item__portrait-size--small: 36px;
 
     .ds-list-item__title {
       text-align: left;
-      @include ds-typography($ds-typography-functionalbody02, $lineHeight: $ds-lineheight-m) {
+      @include ds-typography($ds-typography-functional-body-md, $lineHeight: $ds-lineheight-md) {
         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-functional-body-md, $lineHeight: $ds-lineheight-md, $forcePx: true) {
           color: $ds-color-text-primary;
         }
       }
 
       &.ds-list-item__title--semibold {
         @include ds-typography(
-          $ds-typography-functionalbody02,
-          $lineHeight: $ds-lineheight-m,
+          $ds-typography-functional-body-md,
+          $lineHeight: $ds-lineheight-md,
           $fontWeight: $ds-fontweight-semibold
         );
 
         @at-root .ds-force-px#{&} {
           @include ds-typography(
-            $ds-typography-functionalbody02,
-            $lineHeight: $ds-lineheight-m,
+            $ds-typography-functional-body-md,
+            $lineHeight: $ds-lineheight-md,
             $forcePx: true,
             $fontWeight: $ds-fontweight-semibold
           );
@@ -118,15 +118,15 @@ $ds-list-item__portrait-size--small: 36px;
 
       &.ds-list-item__title--bold {
         @include ds-typography(
-          $ds-typography-functionalbody02,
-          $lineHeight: $ds-lineheight-m,
+          $ds-typography-functional-body-md,
+          $lineHeight: $ds-lineheight-md,
           $fontWeight: $ds-fontweight-bold
         );
 
         @at-root .ds-force-px#{&} {
           @include ds-typography(
-            $ds-typography-functionalbody02,
-            $lineHeight: $ds-lineheight-m,
+            $ds-typography-functional-body-md,
+            $lineHeight: $ds-lineheight-md,
             $forcePx: true,
             $fontWeight: $ds-fontweight-bold
           );
@@ -140,12 +140,12 @@ $ds-list-item__portrait-size--small: 36px;
 
     .ds-list-item__subtitle {
       text-align: left;
-      @include ds-typography($ds-typography-functionalbody02) {
-        color: $ds-color-text-primary-02;
+      @include ds-typography($ds-typography-functional-body-md) {
+        color: $ds-color-text-primary-subtle;
       }
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functionalbody02, true) {
-          color: $ds-color-text-primary-02;
+        @include ds-typography($ds-typography-functional-body-md, true) {
+          color: $ds-color-text-primary-subtle;
         }
       }
     }
@@ -153,12 +153,12 @@ $ds-list-item__portrait-size--small: 36px;
 
   .ds-list-item__meta {
     text-align: right;
-    @include ds-typography($ds-typography-functionalbody01) {
-      color: $ds-color-text-primary-02;
+    @include ds-typography($ds-typography-functional-body-sm) {
+      color: $ds-color-text-primary-subtle;
     }
     @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-functionalbody01, true) {
-        color: $ds-color-text-primary-02;
+      @include ds-typography($ds-typography-functional-body-sm, true) {
+        color: $ds-color-text-primary-subtle;
       }
     }
   }
@@ -193,7 +193,7 @@ $ds-list-item__portrait-size--small: 36px;
   .ds-list-item__portrait {
     border-radius: 50%;
     overflow: hidden;
-    background-color: $ds-color-component-primary-overlay;
+    background-color: $ds-color-surface-primary-raised-soft;
     flex-shrink: 0;
 
     .picture,
@@ -203,13 +203,13 @@ $ds-list-item__portrait-size--small: 36px;
   }
 
   &:active:not(.ds-list-item--disabled) .ds-list-item__inner::before {
-    background-color: $ds-color-component-primary-overlay;
+    background-color: $ds-color-surface-primary-raised-soft;
   }
 
   &:focus-visible {
     outline: none;
     .ds-list-item__inner {
-      outline: ds-border-width(x2) solid $ds-color-border-focus-02;
+      outline: ds-border-width(xs) solid $ds-color-border-primary;
       outline-offset: -2px;
     }
   }
@@ -229,7 +229,7 @@ $ds-list-item__portrait-size--small: 36px;
   @at-root .ds-list-item__accordion-inner {
     display: none;
     padding: ds-spacing(0 $ds-s-050);
-    border-top: ds-border-width(x1) solid $ds-color-border-primary;
+    border-top: ds-border-width(xxs) solid $ds-color-border-primary;
     ul {
       margin: 0;
       padding: 0;

package/components/modal/modal.scss

@@ -64,7 +64,7 @@ body.no-scroll {
   }
 
   .ds-modal__content {
-    background-color: $ds-color-surface-background;
+    background-color: $ds-color-surface-primary;
     position: relative;
     z-index: 15;
 
@@ -75,7 +75,7 @@ body.no-scroll {
 
     @include ds-mq-smallest-breakpoint(tablet) {
       padding: ds-spacing($ds-s-400 $ds-s-300 $ds-s-300);
-      border-radius: ds-border-radius(x1);
+      border-radius: ds-border-radius(012);
     }
 
     .ds-btn.ds-modal__close--icon {
@@ -87,7 +87,7 @@ body.no-scroll {
     > h2 {
       margin: ds-spacing(0 0 $ds-s-200);
       text-align: center;
-      @include ds-typography($ds-typography-functionalheading03) {
+      @include ds-typography($ds-typography-functional-heading-sm) {
         color: $ds-color-text-primary;
       }
     }
@@ -95,7 +95,7 @@ body.no-scroll {
     > p {
       margin: 0;
       text-align: center;
-      @include ds-typography($ds-typography-functionalbody02) {
+      @include ds-typography($ds-typography-functional-body-md) {
         color: $ds-color-text-primary;
       }
     }

package/components/pagination/pagination.scss

@@ -2,7 +2,7 @@
 @use "../../components/text-button/text-button";
 
 .ds-pagination {
-  background-color: $ds-color-surface-background;
+  background-color: $ds-color-surface-primary;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
@@ -25,13 +25,13 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    @include ds-typography($ds-typography-functionalbody02) {
+    @include ds-typography($ds-typography-functional-body-md) {
       color: $ds-color-text-primary;
     }
 
     &--current {
-      color: $ds-color-text-secondary;
-      background-color: $ds-color-component-primary;
+      color: $ds-color-text-primaryinvert;
+      background-color: $ds-color-surface-primaryinvert;
       border-radius: 100%;
     }
 

package/components/pictogram/pictogram.scss

@@ -11,7 +11,7 @@ $ds-pictogram__icon-size--large: 40px;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  background-color: $ds-color-static-red-100;
+  background-color: $ds-color-brand-100;
   height: ds-px-to-rem($ds-pictogram__size);
   width: ds-px-to-rem($ds-pictogram__size);
   @at-root .ds-force-px#{&} {
@@ -29,12 +29,12 @@ $ds-pictogram__icon-size--large: 40px;
     }
 
     > svg {
-      fill: $ds-color-static-black;
+      fill: $ds-color-neutral-black;
     }
   }
 
   &.ds-pictogram--business {
-    background-color: $ds-color-static-green-100;
+    background-color: $ds-color-green-100;
   }
 
   &.ds-pictogram--large {

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

@@ -3,13 +3,13 @@
 
 .ds-profile-header {
   width: 100%;
-  background-color: $ds-color-surface-background;
+  background-color: $ds-color-surface-primary;
   display: flex;
 
   &.ds-profile-header--has-border {
     padding-bottom: ds-spacing($ds-s-100);
     .ds-profile-header__bar {
-      border-bottom: ds-border-width(x1) solid $ds-color-border-primary;
+      border-bottom: ds-border-width(xxs) solid $ds-color-border-primary;
 
       + .ds-profile-header__article-count {
         padding-top: ds-spacing($ds-s-100);
@@ -41,7 +41,7 @@
   .ds-profile-header__title {
     margin: 0;
     word-break: break-word;
-    @include ds-typography($ds-typography-functionalheading03, $fontWeight: $ds-fontweight-bold) {
+    @include ds-typography($ds-typography-functional-heading-sm, $fontWeight: $ds-fontweight-bold) {
       color: $ds-color-text-primary;
     }
   }
@@ -57,15 +57,15 @@
   .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-functional-body-md) {
+      color: $ds-color-text-primary-subtle;
     }
   }
 
   .ds-profile-header__description {
     margin: ds-spacing(0 $ds-s-100 0);
     padding-top: ds-spacing($ds-s-100);
-    @include ds-typography($ds-typography-functionalbody02) {
+    @include ds-typography($ds-typography-functional-body-md) {
       color: $ds-color-text-primary;
     }
 
@@ -75,7 +75,7 @@
 
     b,
     strong {
-      @include ds-typography($ds-typography-functionalbody02, $fontWeight: $ds-fontweight-semibold);
+      @include ds-typography($ds-typography-functional-body-md, $fontWeight: $ds-fontweight-semibold);
     }
 
     p {

package/components/quote/quote.scss

@@ -4,12 +4,12 @@
   margin: 0;
   padding: ds-spacing($ds-s-100 0 $ds-s-200);
   position: relative;
-  @include ds-typography($ds-typography-detailarticle-quote) {
+  @include ds-typography($ds-typography-detail-article-quote) {
     color: $ds-color-text-primary;
   }
 
   @at-root .ds-force-px#{&} {
-    @include ds-typography($ds-typography-detailarticle-quote, true);
+    @include ds-typography($ds-typography-detail-article-quote, true);
   }
 
   .ds-quote__border {