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

package/assets/form-field/form-field.scss

@@ -6,8 +6,8 @@ $ds-form-field__error-icon-size: 20px;
 .ds-form-field__help-text {
   margin-top: ds-spacing($ds-s-050);
   margin-bottom: 0;
-  color: $ds-color-text-primary-02;
-  @include ds-typography($ds-typography-functionalbody01);
+  color: $ds-color-text-primary-subtle;
+  @include ds-typography($ds-typography-functional-body-sm);
 }
 
 .ds-form-field__error-message {
@@ -27,11 +27,11 @@ $ds-form-field__error-icon-size: 20px;
       line-height: 0;
       flex-shrink: 0;
       svg {
-        fill: $ds-color-icon-critical;
+        fill: $ds-color-text-critical;
       }
     }
     span {
-      @include ds-typography($ds-typography-functionalbody01);
+      @include ds-typography($ds-typography-functional-body-sm);
     }
   }
 
@@ -50,12 +50,12 @@ $ds-form-field__error-icon-size: 20px;
         width: $ds-form-field__error-icon-size;
       }
       span {
-        @include ds-typography($ds-typography-functionalbody01, true);
+        @include ds-typography($ds-typography-functional-body-sm, true);
       }
     }
   }
 
   .ds-form-field__help-text {
-    @include ds-typography($ds-typography-functionalbody01, true);
+    @include ds-typography($ds-typography-functional-body-sm, true);
   }
 }

package/assets/teaser/teaser.scss

@@ -16,7 +16,7 @@ $ds-teaser-standard-image-width-desktop: 196px;
 
 .ds-teaser {
   display: block;
-  background-color: $ds-color-surface-background;
+  background-color: $ds-color-surface-primary;
   text-decoration: none;
   position: relative;
 
@@ -31,7 +31,7 @@ $ds-teaser-standard-image-width-desktop: 196px;
   .ds-teaser__vignette {
     display: block;
     margin-bottom: ds-spacing($ds-s-025);
-    @include ds-typography($ds-typography-functionallabel01) {
+    @include ds-typography($ds-typography-functional-label-sm) {
       color: $ds-theme-color;
     }
   }
@@ -57,7 +57,7 @@ $ds-teaser-standard-image-width-desktop: 196px;
   .ds-teaser__text {
     // Should be replaced with dynamic spacing layout token when available
     margin: ds-spacing($ds-s-050 0 0);
-    @include ds-typography($ds-typography-detailmedryckare) {
+    @include ds-typography($ds-typography-detail-medryckare) {
       color: $ds-color-text-primary;
     }
     @include ds-mq-smallest-breakpoint(tablet) {
@@ -68,7 +68,7 @@ $ds-teaser-standard-image-width-desktop: 196px;
   .ds-teaser__sticker {
     display: inline;
     color: $ds-theme-color;
-    @include ds-typography($ds-typography-functionallabel01);
+    @include ds-typography($ds-typography-functional-label-sm);
   }
 
   .ds-teaser__media {
@@ -77,7 +77,7 @@ $ds-teaser-standard-image-width-desktop: 196px;
     box-sizing: border-box;
 
     &--rounded {
-      border-radius: ds-border-radius(x1);
+      border-radius: ds-border-radius(012);
       overflow: hidden;
     }
   }

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

@@ -2,5 +2,5 @@
 @use "../../assets/article-image/article-image.scss" as *;
 
 .ds-article-image--top {
-  padding-bottom: ds-spacing($ds-s-spacing-lg);
+  padding-bottom: ds-spacing($ds-s-lg);
 }

package/components/badge/badge.scss

@@ -7,8 +7,8 @@ $ds-badge__min-size: 8px;
   box-sizing: content-box;
 
   .ds-badge__inner {
-    background-color: $ds-color-component-brand;
-    border: $ds-color-border-secondary ds-border-width(x2) solid;
+    background-color: $ds-color-surface-brand;
+    border: $ds-color-border-primaryinvert-strongest ds-border-width(xs) solid;
     border-radius: 100px;
     display: inline-flex;
     align-items: center;
@@ -16,15 +16,15 @@ $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;
+    @include ds-typography($ds-typography-functional-meta-md, $lineHeight: 0, $fontWeight: $ds-fontweight-semibold) {
+      color: $ds-color-neutral-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,
+        $ds-typography-functional-meta-md,
         $forcePx: true,
         $lineHeight: 0,
         $fontWeight: $ds-fontweight-semibold

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

@@ -2,24 +2,24 @@
 @use "../button/button.scss" as *;
 
 .ds-blocked-content {
-  background-color: $ds-color-surface-background;
+  background-color: $ds-color-surface-primary;
   margin: 0;
   padding: ds-spacing($ds-s-100 0 $ds-s-200);
 
   .ds-blocked-content__inner {
     text-align: center;
-    border: ds-border-width(x1) solid $ds-color-border-primary;
-    border-radius: ds-border-radius(x1);
+    border: ds-border-width(xxs) solid $ds-color-border-primary;
+    border-radius: ds-border-radius(012);
     padding: ds-spacing($ds-s-200 $ds-s-100 $ds-s-100);
   }
 
   .ds-blocked-content__body {
     margin: ds-spacing(0 0 $ds-s-200);
-    @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);
     }
   }
 
@@ -33,17 +33,17 @@
   .ds-blocked-content__title {
     margin: ds-spacing(0 0 $ds-s-050);
     @include ds-typography(
-      $ds-typography-functionalheading01,
-      $lineHeight: $ds-lineheight-m,
+      $ds-typography-functional-heading-xxs,
+      $lineHeight: $ds-lineheight-md,
       $fontWeight: $ds-fontweight-semibold
     ) {
       color: $ds-color-text-primary;
     }
     @at-root .ds-force-px#{&} {
       @include ds-typography(
-        $ds-typography-functionalheading01,
+        $ds-typography-functional-heading-xxs,
         $forcePx: true,
-        $lineHeight: $ds-lineheight-m,
+        $lineHeight: $ds-lineheight-md,
         $fontWeight: $ds-fontweight-semibold
       );
     }

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

@@ -24,9 +24,9 @@
   }
 
   .ds-buddy-menu__inner {
-    background-color: $ds-color-surface-elevated;
-    border-radius: ds-border-radius(x2);
-    box-shadow: ds-shadow-get-box-shadow($ds-shadow-elevation-s);
+    background-color: $ds-color-surface-primary-elevated;
+    border-radius: ds-border-radius(025);
+    box-shadow: ds-shadow-get-box-shadow($ds-shadow-elevation-sm);
     position: relative;
     z-index: 1;
   }
@@ -50,7 +50,7 @@
   .ds-buddy-menu__greeting {
     margin: ds-spacing(0 0 $ds-s-100);
     display: block;
-    @include ds-typography($ds-typography-functionalheading03) {
+    @include ds-typography($ds-typography-functional-heading-sm) {
       color: $ds-color-text-primary;
     }
   }
@@ -58,7 +58,7 @@
   .ds-buddy-menu__addons-title,
   .ds-buddy-menu__links-title {
     margin: ds-spacing(0 0 $ds-s-025);
-    @include ds-typography($ds-typography-functionalbody02, $fontWeight: $ds-fontweight-semibold) {
+    @include ds-typography($ds-typography-functional-body-md, $fontWeight: $ds-fontweight-semibold) {
       color: $ds-color-text-primary;
     }
   }
@@ -71,21 +71,21 @@
     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;
+      @include ds-typography($ds-typography-functional-body-md) {
+        color: $ds-color-text-primary-subtle;
       }
     }
   }
   .ds-buddy-menu__account-level {
     margin: ds-spacing(0 0 $ds-s-100);
     display: block;
-    @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-buddy-menu__links-list {
-    border-bottom-left-radius: ds-border-radius(x2);
-    border-bottom-right-radius: ds-border-radius(x2);
+    border-bottom-left-radius: ds-border-radius(025);
+    border-bottom-right-radius: ds-border-radius(025);
     overflow: hidden;
     margin: 0;
     padding: ds-spacing(0 $ds-s-100);
@@ -93,18 +93,18 @@
 
   &.ds-force-px {
     .ds-buddy-menu__greeting {
-      @include ds-typography($ds-typography-functionalheading03, true);
+      @include ds-typography($ds-typography-functional-heading-sm, true);
     }
     .ds-buddy-menu__account-title,
     .ds-buddy-menu__addons-title,
     .ds-buddy-menu__links-title {
-      @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);
     }
     .ds-buddy-menu__addons-list a {
-      @include ds-typography($ds-typography-functionalbody02, true);
+      @include ds-typography($ds-typography-functional-body-md, true);
     }
     .ds-buddy-menu__account-level {
-      @include ds-typography($ds-typography-functionalbody02, true);
+      @include ds-typography($ds-typography-functional-body-md, true);
     }
   }
 

package/components/button/button.scss

@@ -2,7 +2,7 @@
 @use "../icon-sprite/icon-sprite.scss";
 @use "../spinner/spinner.scss" as *;
 
-$ds-btn-outlined__border-width: ds-border-width(x1);
+$ds-btn-outlined__border-width: ds-border-width(xxs);
 @function _btn-brdr($value, $rem: false) {
   $value: (ds-strip-unit($value) - ds-strip-unit($ds-btn-outlined__border-width)) * 1px;
   @if $rem {
@@ -12,14 +12,14 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
 }
 
 .ds-btn {
-  --ds-btn__background-color: #{$ds-color-surface-background};
+  --ds-btn__background-color: #{$ds-color-surface-primary};
   --ds-btn__border-color: transparent;
-  --ds-btn__outline-color: #{$ds-color-border-focus-02};
+  --ds-btn__outline-color: #{$ds-color-border-primary-strongest};
   --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);
+  border-radius: ds-border-radius(012);
   position: relative;
   background-color: var(--ds-btn__background-color);
   color: var(--ds-btn__color);
@@ -34,11 +34,11 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
   &.ds-btn--primary {
     &.ds-btn--default,
     &.ds-btn--elevated {
-      --ds-btn__background-color: #{$ds-color-component-primary};
-      --ds-btn__color: #{$ds-color-text-secondary};
+      --ds-btn__background-color: #{$ds-color-surface-primaryinvert};
+      --ds-btn__color: #{$ds-color-text-primaryinvert};
     }
     &.ds-btn--outline {
-      --ds-btn__border-color: #{$ds-color-component-primary};
+      --ds-btn__border-color: #{$ds-color-border-primary-strongest};
       --ds-btn__color: #{$ds-color-text-primary};
     }
     &.ds-btn--transparent {
@@ -49,11 +49,11 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
   &.ds-btn--secondary {
     &.ds-btn--default,
     &.ds-btn--elevated {
-      --ds-btn__background-color: #{$ds-color-component-primary-overlay};
+      --ds-btn__background-color: #{$ds-color-surface-primary-raised-strong};
       --ds-btn__color: #{$ds-color-text-primary};
     }
     &.ds-btn--outline {
-      --ds-btn__border-color: #{$ds-color-border-primary-02};
+      --ds-btn__border-color: #{$ds-color-border-primary-strong};
       --ds-btn__color: #{$ds-color-text-primary};
     }
     &.ds-btn--transparent {
@@ -62,14 +62,14 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
   }
 
   &.ds-btn--brand {
-    --ds-btn__outline-color: #{$ds-color-border-focus};
+    --ds-btn__outline-color: #{$ds-color-border-brand};
     &.ds-btn--default,
     &.ds-btn--elevated {
-      --ds-btn__background-color: #{$ds-color-component-brand};
-      --ds-btn__color: #{$ds-color-static-white};
+      --ds-btn__background-color: #{$ds-color-surface-brand};
+      --ds-btn__color: #{$ds-color-neutral-white};
     }
     &.ds-btn--outline {
-      --ds-btn__border-color: #{$ds-color-component-brand};
+      --ds-btn__border-color: #{$ds-color-surface-brand};
       --ds-btn__color: #{$ds-color-text-brand};
     }
     &.ds-btn--transparent {
@@ -78,27 +78,27 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
   }
 
   &.ds-btn--staticWhite {
-    --ds-btn__outline-color: #{$ds-color-static-white};
+    --ds-btn__outline-color: #{$ds-color-neutral-white};
     &.ds-btn--default,
     &.ds-btn--elevated {
-      --ds-btn__background-color: #{$ds-color-static-white};
-      --ds-btn__color: #{$ds-color-static-black};
+      --ds-btn__background-color: #{$ds-color-neutral-white};
+      --ds-btn__color: #{$ds-color-neutral-black};
     }
     &.ds-btn--outline {
       --ds-btn__background-color: transparent;
-      --ds-btn__border-color: #{$ds-color-static-white};
-      --ds-btn__color: #{$ds-color-static-white};
+      --ds-btn__border-color: #{$ds-color-neutral-white};
+      --ds-btn__color: #{$ds-color-neutral-white};
     }
     &.ds-btn--transparent {
-      --ds-btn__color: #{$ds-color-static-white};
+      --ds-btn__color: #{$ds-color-neutral-white};
     }
   }
 
   &.ds-btn--toggle.ds-btn--selected:not(.ds-btn--icon-only) {
     --ds-btn__background-color: transparent;
     --ds-btn__color: #{$ds-color-text-primary};
-    --ds-btn__border-color: #{$ds-color-component-primary};
-    --ds-btn__outline-color: #{$ds-color-border-focus-02};
+    --ds-btn__border-color: #{$ds-color-border-primary-strongest};
+    --ds-btn__outline-color: #{$ds-color-border-primary-strongest};
   }
   &.ds-btn--transparent {
     --ds-btn__background-color: transparent;
@@ -109,42 +109,54 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
   }
 
   &.ds-btn--elevated {
-    box-shadow: ds-shadow-get-box-shadow($ds-shadow-elevation-m);
+    box-shadow: ds-shadow-get-box-shadow($ds-shadow-elevation-md);
   }
 
   &.ds-btn--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);
+    @include ds-typography($token: $ds-typography-functional-body-sm, $fontWeight: $ds-fontweight-semibold);
     @at-root .ds-force-px#{&} {
       --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);
+      @include ds-typography(
+        $token: $ds-typography-functional-body-sm,
+        $fontWeight: $ds-fontweight-semibold,
+        $forcePx: true
+      );
     }
   }
 
   &.ds-btn--medium {
     --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);
+    @include ds-typography($token: $ds-typography-functional-body-md, $fontWeight: $ds-fontweight-semibold);
     @at-root .ds-force-px#{&} {
       --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-100))};
       padding: _btn-brdr(ds-spacing($ds-s-050)) _btn-brdr(ds-spacing($ds-s-125));
-      @include ds-typography($ds-typography-detailstandard-button, true);
+      @include ds-typography(
+        $token: $ds-typography-functional-body-md,
+        $fontWeight: $ds-fontweight-semibold,
+        $forcePx: true
+      );
     }
   }
 
   &.ds-btn--large {
     --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);
+    @include ds-typography($token: $ds-typography-functional-body-md, $fontWeight: $ds-fontweight-semibold);
 
     @at-root .ds-force-px#{&} {
       --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);
+      @include ds-typography(
+        $token: $ds-typography-functional-body-md,
+        $fontWeight: $ds-fontweight-semibold,
+        $forcePx: true
+      );
     }
   }
 
@@ -152,12 +164,16 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
     --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);
+    @include ds-typography($token: $ds-typography-functional-body-lg, $fontWeight: $ds-fontweight-semibold);
     @at-root .ds-force-px#{&} {
       --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);
+      @include ds-typography(
+        $token: $ds-typography-functional-body-lg,
+        $fontWeight: $ds-fontweight-semibold,
+        $forcePx: true
+      );
     }
   }
 
@@ -166,7 +182,7 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
   }
 
   &:focus-visible {
-    outline: ds-border-width(x2) solid var(--ds-btn__outline-color);
+    outline: ds-border-width(xs) solid var(--ds-btn__outline-color);
     outline-offset: 2px;
   }
 
@@ -299,9 +315,9 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
   // we have to override spinner styling since spinner variant is based on "off" button variant
   &.ds-btn--selected.ds-loading:not(.ds-btn--icon-only) {
     .ds-spinner__inner {
-      border-top-color: $ds-color-icon-primary;
+      border-top-color: $ds-color-text-primary;
       &::before {
-        border-color: $ds-color-icon-primary;
+        border-color: $ds-color-text-primary;
       }
     }
   }

package/components/checkbox/checkbox.scss

@@ -21,7 +21,7 @@ $ds-checkbox__icon-size: 24px;
     &::before {
       content: "";
       position: absolute;
-      border-radius: ds-border-radius(x1);
+      border-radius: ds-border-radius(012);
       top: 0;
       left: 0;
       right: 0;
@@ -38,11 +38,11 @@ $ds-checkbox__icon-size: 24px;
 
     .ds-checkbox__text {
       margin: ds-spacing(0 0 0 $ds-s-050, rem);
-      @include ds-typography($ds-typography-functionalbody02);
+      @include ds-typography($ds-typography-functional-body-md);
 
       @at-root .ds-force-px#{&} {
         margin: ds-spacing(0 0 0 $ds-s-050);
-        @include ds-typography($ds-typography-functionalbody02, true);
+        @include ds-typography($ds-typography-functional-body-md, true);
       }
     }
 
@@ -52,7 +52,7 @@ $ds-checkbox__icon-size: 24px;
       position: relative;
       height: ds-px-to-rem($ds-checkbox__icon-size);
       width: ds-px-to-rem($ds-checkbox__icon-size);
-      color: $ds-color-icon-primary;
+      color: $ds-color-text-primary;
       @at-root .ds-force-px#{&} {
         height: $ds-checkbox__icon-size;
         width: $ds-checkbox__icon-size;
@@ -87,8 +87,8 @@ $ds-checkbox__icon-size: 24px;
     }
 
     &:focus-visible + .ds-checkbox__inner {
-      border-radius: ds-border-radius(x1);
-      outline: ds-border-width(x2) solid $ds-color-border-focus-02;
+      border-radius: ds-border-radius(012);
+      outline: ds-border-width(xs) solid $ds-color-border-primary-strongest;
       outline-offset: 2px;
     }
   }
@@ -96,7 +96,7 @@ $ds-checkbox__icon-size: 24px;
   &.ds-form-field__error,
   .invalid {
     .ds-checkbox__inner .ds-checkbox__icon {
-      color: $ds-color-icon-critical;
+      color: $ds-color-text-critical;
     }
 
     .ds-form-field__error-message {
@@ -116,10 +116,10 @@ $ds-checkbox__icon-size: 24px;
 .ds-checkbox input:disabled + .ds-checkbox__inner {
   cursor: not-allowed;
   .ds-checkbox__icon {
-    color: $ds-color-icon-disabled;
+    color: $ds-color-text-primary-disabled;
   }
   .ds-checkbox__text {
-    color: $ds-color-text-disabled;
+    color: $ds-color-text-primary-disabled;
   }
   &::before {
     background-color: unset;

package/components/disclaimer/disclaimer.scss

@@ -2,7 +2,7 @@
 @use "../icon-sprite/icon-sprite.scss";
 
 $ds-disclaimer__icon-size: 20px;
-$ds-btn-outlined__border-width: ds-border-width(x1);
+$ds-btn-outlined__border-width: ds-border-width(xxs);
 
 .ds-disclaimer {
   padding-bottom: ds-spacing($ds-s-100);
@@ -10,7 +10,7 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
 
   .ds-disclaimer__body-html,
   .ds-disclaimer__icon-wrapper {
-    background-color: $ds-color-surface-raised;
+    background-color: $ds-color-surface-primary-raised-soft;
     padding: ds-spacing($ds-s-075 $ds-s-100);
   }
 
@@ -22,12 +22,12 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
   .ds-disclaimer__body-html {
     margin: 0;
     flex-grow: 1;
-    @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);
+      @include ds-typography($ds-typography-functional-body-sm, true);
     }
 
     a {
@@ -35,11 +35,11 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
     }
     b,
     strong {
-      @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;
       }
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functionalbody01, $forcePx: true, $fontWeight: $ds-fontweight-semibold);
+        @include ds-typography($ds-typography-functional-body-sm, $forcePx: true, $fontWeight: $ds-fontweight-semibold);
       }
     }
   }
@@ -50,7 +50,7 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
     height: ds-px-to-rem($ds-disclaimer__icon-size);
     width: ds-px-to-rem($ds-disclaimer__icon-size);
     margin: 0;
-    color: $ds-color-icon-primary;
+    color: $ds-color-text-primary;
     @at-root .ds-force-px#{&} {
       height: $ds-disclaimer__icon-size;
       width: $ds-disclaimer__icon-size;
@@ -72,14 +72,14 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
   &.ds-disclaimer--native {
     .ds-disclaimer__body-html,
     .ds-disclaimer__icon-wrapper {
-      background-color: $ds-color-static-ad-yellow;
+      background-color: $ds-color-surface-ad-yellow;
     }
 
     .ds-icon,
     .ds-disclaimer__body-html,
     .ds-disclaimer__body-html b,
     .ds-disclaimer__body-html strong {
-      color: $ds-color-static-black;
+      color: $ds-color-neutral-black;
     }
   }
 }

package/components/divider/divider.scss

@@ -8,7 +8,7 @@
     margin: 0 auto;
     border: none;
     background-color: $ds-color-border-primary;
-    height: ds-border-width(x1);
+    height: ds-border-width(xxs);
     width: 100%;
   }
 }
@@ -17,8 +17,8 @@
   background-color: $ds-color-border-primary;
 }
 .ds-divider--medium hr {
-  background-color: $ds-color-border-primary-02;
+  background-color: $ds-color-border-primary-strong;
 }
 .ds-divider--strong hr {
-  background-color: $ds-color-border-primary-03;
+  background-color: $ds-color-border-primary-strongest;
 }

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

@@ -13,7 +13,7 @@
 
     h2 {
       margin: 0;
-      @include ds-typography($ds-typography-functionalheading03) {
+      @include ds-typography($ds-typography-functional-heading-sm) {
         color: $ds-color-text-primary;
       }
     }
@@ -21,8 +21,8 @@
     .ds-empty-state__body {
       display: block;
       margin-top: ds-spacing($ds-s-025);
-      @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;
       }
     }
   }