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

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

@@ -21,7 +21,7 @@ $ds-radio-btn__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,10 +38,10 @@ $ds-radio-btn__icon-size: 24px;
 
     .ds-radio-btn__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);
       }
     }
 
@@ -51,7 +51,7 @@ $ds-radio-btn__icon-size: 24px;
       position: relative;
       height: ds-px-to-rem($ds-radio-btn__icon-size);
       width: ds-px-to-rem($ds-radio-btn__icon-size);
-      color: $ds-color-icon-primary;
+      color: $ds-color-text-primary;
       @at-root .ds-force-px#{&} {
         height: $ds-radio-btn__icon-size;
         width: $ds-radio-btn__icon-size;
@@ -86,8 +86,8 @@ $ds-radio-btn__icon-size: 24px;
     }
 
     &:focus-visible + .ds-radio-btn__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;
       outline-offset: 2px;
     }
   }
@@ -95,7 +95,7 @@ $ds-radio-btn__icon-size: 24px;
   &.ds-form-field__error,
   .invalid {
     .ds-radio-btn__inner .ds-radio-btn__icon {
-      color: $ds-color-icon-critical;
+      color: $ds-color-text-critical;
     }
 
     .ds-form-field__error-message {
@@ -115,10 +115,10 @@ $ds-radio-btn__icon-size: 24px;
 .ds-radio-btn input:disabled + .ds-radio-btn__inner {
   cursor: not-allowed;
   .ds-radio-btn__icon {
-    color: $ds-color-icon-disabled;
+    color: $ds-color-text-primary-disabled;
   }
   .ds-radio-btn__text {
-    color: $ds-color-text-disabled;
+    color: $ds-color-text-primary-disabled;
   }
 
   &:hover {

package/components/spinner/spinner.scss

@@ -30,51 +30,51 @@ $ds-spinner__shadow-border-opacity: 0.2;
   }
 
   &--brand .ds-spinner__inner {
-    border-top-color: $ds-color-icon-brand;
+    border-top-color: $ds-color-text-brand;
     &::before {
-      border-color: $ds-color-icon-brand;
+      border-color: $ds-color-text-brand;
     }
   }
 
   &--primary .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;
     }
   }
 
   &--secondary .ds-spinner__inner {
-    border-top-color: $ds-color-icon-secondary;
+    border-top-color: $ds-color-text-primaryinvert;
     &::before {
-      border-color: $ds-color-icon-secondary;
+      border-color: $ds-color-text-primaryinvert;
     }
   }
 
   &--onBrand .ds-spinner__inner {
-    border-top-color: $ds-color-icon-on-brand;
+    border-top-color: $ds-color-text-on-brand;
     &::before {
-      border-color: $ds-color-icon-on-brand;
+      border-color: $ds-color-text-on-brand;
     }
   }
 
   &--onBusiness .ds-spinner__inner {
-    border-top-color: $ds-color-icon-on-business;
+    border-top-color: $ds-color-neutral-white;
     &::before {
-      border-color: $ds-color-icon-on-business;
+      border-color: $ds-color-neutral-white;
     }
   }
 
   &--staticBlack .ds-spinner__inner {
-    border-top-color: $ds-color-static-black;
+    border-top-color: $ds-color-neutral-black;
     &::before {
-      border-color: $ds-color-static-black;
+      border-color: $ds-color-neutral-black;
     }
   }
 
   &--staticWhite .ds-spinner__inner {
-    border-top-color: $ds-color-static-white;
+    border-top-color: $ds-color-neutral-white;
     &::before {
-      border-color: $ds-color-static-white;
+      border-color: $ds-color-neutral-white;
     }
   }
 }

package/components/switch/switch.scss

@@ -19,10 +19,10 @@ $ds-switch__container-width: 44px;
 
     .ds-switch__meta {
       margin: ds-spacing(0 $ds-s-050 0 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);
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functionalbody01, true);
+        @include ds-typography($ds-typography-functional-body-sm, true);
       }
 
       .ds-switch__meta-on {
@@ -36,7 +36,7 @@ $ds-switch__container-width: 44px;
       position: relative;
       height: ds-px-to-rem($ds-switch__container-height);
       width: ds-px-to-rem($ds-switch__container-width);
-      background-color: $ds-color-component-primary-overlay-02;
+      background-color: $ds-color-surface-primary-raised-strong;
       border-radius: 100px;
       transition:
         background-color 500ms ease,
@@ -58,7 +58,7 @@ $ds-switch__container-width: 44px;
       @include min-click-surface();
     }
     .ds-switch__knob {
-      background-color: $ds-color-component-static-white;
+      background-color: $ds-color-neutral-white;
       position: absolute;
       border-radius: 50%;
       top: ds-px-to-rem($ds-switch__knob-padding);
@@ -96,17 +96,17 @@ $ds-switch__container-width: 44px;
 
     &:checked:not(:disabled) {
       & + .ds-switch__inner .ds-switch__box {
-        background-color: $ds-color-component-brand;
+        background-color: $ds-color-surface-brand;
       }
     }
 
     &:focus-visible + .ds-switch__inner .ds-switch__box {
-      outline: ds-border-width(x2) solid $ds-color-border-focus-02;
+      outline: ds-border-width(xs) solid $ds-color-border-primary;
       outline-offset: 2px;
     }
 
     &:checked:focus-visible + .ds-switch__inner .ds-switch__box {
-      outline-color: $ds-color-border-focus;
+      outline-color: $ds-color-border-brand;
     }
   }
 }
@@ -114,23 +114,23 @@ $ds-switch__container-width: 44px;
 @include ds-hover() {
   .ds-switch input:not(:disabled) + .ds-switch__inner:hover .ds-switch__box::before,
   .ds-list-item--switch:hover input:not(:disabled) + .ds-switch__inner .ds-switch__box::before {
-    background-color: $ds-color-component-primary-overlay;
+    background-color: $ds-color-surface-primary-raised-strong;
   }
 }
 .ds-switch input:not(:disabled) + .ds-switch__inner:active .ds-switch__box::before,
 .ds-list-item--switch:active input:not(:disabled) + .ds-switch__inner .ds-switch__box::before {
-  background-color: $ds-color-component-primary-overlay-02;
+  background-color: $ds-color-surface-primary-raised-strong;
 }
 
 .ds-switch input:disabled + .ds-switch__inner {
   cursor: not-allowed;
   .ds-switch__meta {
-    color: $ds-color-text-disabled;
+    color: $ds-color-text-primary-disabled;
   }
   .ds-switch__box {
-    background-color: $ds-color-component-primary-overlay;
+    background-color: $ds-color-surface-primary-raised-soft;
   }
   .ds-switch__knob {
-    background-color: $ds-color-component-primary-overlay-02;
+    background-color: $ds-color-surface-primary-raised-strong;
   }
 }

package/components/tag-header/tag-header.scss

@@ -4,13 +4,13 @@
 
 .ds-tag-header {
   width: 100%;
-  background-color: $ds-color-surface-background;
+  background-color: $ds-color-surface-primary;
   padding-bottom: ds-spacing($ds-s-100);
   display: flex;
 
   &.ds-tag-header--has-border {
     .ds-tag-header__bar {
-      border-bottom: ds-border-width(x1) solid $ds-color-border-primary;
+      border-bottom: ds-border-width(xxs) solid $ds-color-border-primary;
       padding-bottom: ds-spacing($ds-s-100);
 
       + .ds-tag-header__article-count {
@@ -53,7 +53,7 @@
     margin-bottom: ds-spacing($ds-s-025);
     display: block;
     text-decoration: none;
-    @include ds-typography($ds-typography-functionallabel01) {
+    @include ds-typography($ds-typography-functional-label-sm) {
       color: $ds-theme-color;
     }
     &:hover {
@@ -64,7 +64,7 @@
   .ds-tag-header__title {
     word-break: break-word;
     margin: 0;
-    @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;
     }
   }
@@ -86,15 +86,15 @@
   .ds-tag-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-tag-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;
     }
 
@@ -104,7 +104,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/teaser-centered/teaser-centered.scss

@@ -38,7 +38,7 @@
   }
 
   .ds-teaser__title {
-    @include ds-typography($ds-typography-detailteaser-breaking) {
+    @include ds-typography($ds-typography-detail-teaser-breaking) {
       text-align: center;
     }
   }

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

@@ -10,8 +10,8 @@
 
 .ds-teaser-footer__notes {
   display: block;
-  @include ds-typography($ds-typography-functionalmeta02) {
-    color: $ds-color-text-primary-02;
+  @include ds-typography($ds-typography-functional-meta-md) {
+    color: $ds-color-text-primary-subtle;
   }
 }
 
@@ -22,7 +22,7 @@
   margin-top: ds-spacing($ds-s-050);
 
   .ds-teaser-footer__title {
-    @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;
     }
   }
@@ -35,11 +35,11 @@
     height: ds-px-to-rem(24px);
     width: ds-px-to-rem(24px);
     margin-right: ds-spacing($ds-s-075);
-    background-color: $ds-color-component-primary;
+    background-color: $ds-color-surface-primaryinvert;
     border-radius: 50%;
 
     > svg {
-      fill: $ds-color-icon-secondary;
+      fill: $ds-color-text-primaryinvert;
     }
   }
 }

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

@@ -12,17 +12,17 @@
     right: 0;
     padding: ds-spacing(0 $ds-s-025);
     margin-left: ds-spacing($ds-s-050);
-    background-color: $ds-color-static-transparent-black;
+    background-color: $ds-color-bright-neutral-alpha-500;
     z-index: 5;
-    @include ds-typography($ds-typography-functionalmeta01, $lineHeight: $ds-lineheight-l) {
-      color: $ds-color-static-white;
+    @include ds-typography($ds-typography-functional-meta-sm, $lineHeight: $ds-lineheight-lg) {
+      color: $ds-color-neutral-white;
     }
   }
 
   &--mask {
     .ds-teaser-image__byline {
       background-color: transparent;
-      color: $ds-color-text-primary-02;
+      color: $ds-color-text-primary-subtle;
       position: relative;
       width: 100%;
       text-align: right;

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

@@ -37,7 +37,7 @@
   }
 
   .ds-teaser__title {
-    @include ds-typography($ds-typography-detailteaser-large);
+    @include ds-typography($ds-typography-detail-teaser-large);
   }
 
   @include ds-hover(true) {
@@ -48,13 +48,13 @@
 
   &.ds-teaser--large-big-italic {
     .ds-teaser__title {
-      @include ds-typography($ds-typography-detailteaser-large-storRubrik-opinion);
+      @include ds-typography($ds-typography-detail-teaser-storrubrik-opinion);
     }
   }
 
   &.ds-teaser--large-italic {
     .ds-teaser__title {
-      @include ds-typography($ds-typography-detailteaser-large-opinion);
+      @include ds-typography($ds-typography-detail-teaser-large-opinion);
     }
 
     @include ds-hover(true) {
@@ -105,14 +105,15 @@
   @include ds-mq-smallest-breakpoint(tablet) {
     &.ds-teaser--right {
       .ds-teaser__title {
-        @include ds-typography($ds-typography-detailteaser-large-rightcol);
+        @include ds-typography($ds-typography-detail-teaser-large-rightcol, $lineHeight: 1.2);
       }
 
       &.ds-teaser--large-italic .ds-teaser__title {
         @include ds-typography(
-          $ds-typography-detailteaser-large-rightcol,
+          $ds-typography-detail-teaser-large-rightcol,
           $fontWeight: $ds-fontweight-regular,
-          $fontStyle: italic
+          $fontStyle: italic,
+          $lineHeight: 1.2
         );
 
         @include ds-hover(true) {

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

@@ -8,7 +8,7 @@ $ds-dot-size: ds-px-to-rem(10px);
 $ds-teaser-list-vertical-media-icon-size: 20px;
 
 .ds-teaser-list-vertical {
-  background-color: $ds-color-surface-background;
+  background-color: $ds-color-surface-primary;
 
   &.ds-teaser-list-vertical--flexible {
     display: flex;
@@ -35,7 +35,7 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
       top: 0;
       left: 0;
       right: 0;
-      height: ds-border-width(x1);
+      height: ds-border-width(xxs);
       background-color: $ds-color-border-primary;
     }
   }
@@ -51,7 +51,7 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
       content: "";
       position: absolute;
       bottom: 0;
-      height: ds-border-width(x1);
+      height: ds-border-width(xxs);
       width: calc(100% - ds-spacing($ds-s-200));
       background-color: $ds-color-border-primary;
     }
@@ -64,14 +64,14 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
     .ds-teaser-list-vertical__item-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;
       }
     }
 
     .ds-teaser-list-vertical__item-title {
       word-break: break-word;
-      @include ds-typography($ds-typography-expressiveheading01) {
+      @include ds-typography($ds-typography-expressive-heading-xxs) {
         color: $ds-color-text-primary;
       }
 
@@ -82,7 +82,7 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
 
     &.ds-teaser-list-vertical__item--italic .ds-teaser-list-vertical__item-title {
       @include ds-typography(
-        $ds-typography-expressiveheading01,
+        $ds-typography-expressive-heading-xxs,
         $fontWeight: $ds-fontweight-medium,
         $fontStyle: italic
       );
@@ -101,8 +101,8 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
       .ds-teaser-list-vertical__item-video-icon {
         width: $ds-teaser-list-vertical-media-icon-size;
         height: $ds-teaser-list-vertical-media-icon-size;
-        background: $ds-color-static-red-500;
-        color: $ds-color-static-white;
+        background: $ds-color-surface-brand;
+        color: $ds-color-neutral-white;
         position: absolute;
         z-index: 1;
         bottom: 0;

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

@@ -8,7 +8,7 @@
     outline: none;
 
     .ds-teaser__content {
-      @include ds-focus($offset: -8px, $includeSelector: false, $color: $ds-color-static-white);
+      @include ds-focus($offset: -8px, $includeSelector: false, $color: $ds-color-neutral-white);
     }
   }
 
@@ -24,7 +24,7 @@
       left: 0;
       bottom: 0;
       right: 0;
-      background-color: $ds-color-static-transparent-black;
+      background-color: $ds-color-bright-neutral-alpha-500;
       z-index: 1;
     }
 
@@ -34,7 +34,7 @@
   }
 
   .ds-teaser__content {
-    color: $ds-color-static-white;
+    color: $ds-color-neutral-white;
     position: absolute;
     bottom: 0;
     left: 0;
@@ -43,7 +43,7 @@
   }
 
   &:not(:has(.ds-teaser-image)) {
-    background-color: $ds-color-static-black;
+    background-color: $ds-color-neutral-black;
 
     .ds-teaser__content {
       position: relative;
@@ -54,14 +54,14 @@
     color: currentColor;
     margin: 0;
     @include ds-typography(
-      $ds-typography-functionallabel01,
-      $lineHeight: $ds-lineheight-l,
+      $ds-typography-functional-label-sm,
+      $lineHeight: $ds-lineheight-lg,
       $letterSpacing: $ds-letterspacing-none
     );
   }
 
   .ds-teaser__title {
     color: currentColor;
-    @include ds-typography($ds-typography-detaillonglife);
+    @include ds-typography($ds-typography-detail-teaser-longlife);
   }
 }

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

@@ -3,7 +3,7 @@
 
 .ds-teaser.ds-teaser--native {
   overflow: hidden;
-  border-bottom: 4px solid $ds-color-static-ad-yellow;
+  border-bottom: 4px solid $ds-color-surface-ad-yellow;
 
   &:focus-visible {
     outline: none;
@@ -23,7 +23,7 @@
   }
 
   .ds-teaser__title {
-    @include ds-typography($ds-typography-expressiveheading02) {
+    @include ds-typography($ds-typography-expressive-heading-sm) {
       font-family: $ds-font--arial !important; /* stylelint-disable-line declaration-no-important */
     }
   }
@@ -38,14 +38,14 @@
   &.ds-teaser--native-large {
     .ds-teaser__title {
       @include ds-mq-only-breakpoint(mobile) {
-        @include ds-typography($ds-typography-expressiveheading04);
+        @include ds-typography($ds-typography-expressive-heading-xl);
       }
 
       @include ds-mq-only-breakpoint(tablet) {
         @include ds-typography-manual(
-          $ds-typography-expressiveheading04,
+          $ds-typography-expressive-heading-xl,
           40,
-          $lineHeight: $ds-lineheight-s,
+          $lineHeight: $ds-lineheight-sm,
           $weight: $ds-fontweight-bold,
           $scaling: "large"
         );
@@ -53,9 +53,9 @@
 
       @include ds-mq-only-breakpoint(desktop) {
         @include ds-typography-manual(
-          $ds-typography-expressiveheading04,
+          $ds-typography-expressive-heading-xl,
           56,
-          $lineHeight: $ds-lineheight-s,
+          $lineHeight: $ds-lineheight-sm,
           $weight: $ds-fontweight-bold,
           $scaling: "extraLarge"
         );
@@ -67,17 +67,17 @@
     .ds-teaser__title {
       @include ds-mq-only-breakpoint(mobile) {
         @include ds-typography-manual(
-          $ds-typography-expressiveheading02,
+          $ds-typography-expressive-heading-sm,
           17,
           $weight: $ds-fontweight-bold,
-          $lineHeight: $ds-lineheight-m,
+          $lineHeight: $ds-lineheight-md,
           $scaling: "large"
         );
       }
 
       @include ds-mq-smallest-breakpoint(tablet) {
         @include ds-typography-manual(
-          $ds-typography-expressiveheading02,
+          $ds-typography-expressive-heading-sm,
           24,
           $weight: $ds-fontweight-bold,
           $lineHeight: 1.25,
@@ -91,29 +91,29 @@
     .ds-teaser__title {
       @include ds-mq-only-breakpoint(mobile) {
         @include ds-typography-manual(
-          $ds-typography-expressiveheading03,
+          $ds-typography-expressive-heading-xl,
           20,
           $weight: $ds-fontweight-bold,
-          $lineHeight: $ds-lineheight-m
+          $lineHeight: $ds-lineheight-md
         );
       }
 
       @include ds-mq-only-breakpoint(tablet) {
         @include ds-typography-manual(
-          $ds-typography-expressiveheading03,
+          $ds-typography-expressive-heading-xl,
           26,
           $weight: $ds-fontweight-bold,
-          $lineHeight: $ds-lineheight-s,
+          $lineHeight: $ds-lineheight-sm,
           $scaling: "large"
         );
       }
 
       @include ds-mq-only-breakpoint(desktop) {
         @include ds-typography-manual(
-          $ds-typography-expressiveheading03,
+          $ds-typography-expressive-heading-xl,
           36,
           $weight: $ds-fontweight-bold,
-          $lineHeight: $ds-lineheight-s,
+          $lineHeight: $ds-lineheight-sm,
           $scaling: "extraLarge"
         );
       }
@@ -145,7 +145,7 @@
   }
 
   .ds-teaser__ad-bar {
-    background-color: $ds-color-static-ad-yellow;
+    background-color: $ds-color-surface-ad-yellow;
     display: flex;
     height: ds-px-to-rem(40px);
     font-family: $ds-font--sans;
@@ -156,8 +156,8 @@
       display: flex;
       align-items: center;
       padding: ds-spacing(0 $ds-s-100);
-      background-color: $ds-color-static-black;
-      color: $ds-color-static-white;
+      background-color: $ds-color-neutral-black;
+      color: $ds-color-neutral-white;
     }
   }
 

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

@@ -7,7 +7,7 @@
 
   .ds-teaser__title {
     color: $ds-theme-color;
-    @include ds-typography($ds-typography-functionallabel01);
+    @include ds-typography($ds-typography-functional-label-sm);
   }
 
   @include ds-hover(true) {
@@ -22,7 +22,7 @@
 
   .ds-teaser__text {
     margin-top: ds-spacing($ds-s-025);
-    @include ds-typography($ds-typography-functionalheading01, $lineHeight: $ds-lineheight-m);
+    @include ds-typography($ds-typography-functional-heading-xxs, $lineHeight: $ds-lineheight-md);
   }
 
   .ds-teaser__media {

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

@@ -4,7 +4,7 @@
 
 .ds-teaser-package {
   position: relative;
-  background-color: $ds-color-background-primary;
+  background-color: $ds-color-surface-primary;
 
   & > .ds-teaser {
     position: relative;
@@ -13,7 +13,7 @@
   > .ds-teaser::after,
   > .ds-split-container::after {
     content: "";
-    height: ds-border-width(x1);
+    height: ds-border-width(xxs);
     background-color: $ds-color-border-primary;
     position: absolute;
     display: block;

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

@@ -8,7 +8,7 @@
   padding: ds-spacing($ds-s-100);
 
   .ds-teaser__title {
-    @include ds-typography($ds-typography-expressiveheading01);
+    @include ds-typography($ds-typography-expressive-heading-xxs);
   }
 
   @include ds-hover(true) {