@bonniernews/dn-design-system-web 33.0.9 → 34.1.0

package/CHANGELOG.md

@@ -4,6 +4,25 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [34.1.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@34.0.0...@bonniernews/dn-design-system-web@34.1.0) (2025-10-27)
+
+
+### Features
+
+* **web:** new body lineheight to match camy and bang ([#1928](https://github.com/BonnierNews/dn-design-system/issues/1928)) ([1dc9379](https://github.com/BonnierNews/dn-design-system/commit/1dc9379c87a4625e851d7116ef45d37964ed1e3b))
+
+## [34.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@33.0.9...@bonniernews/dn-design-system-web@34.0.0) (2025-10-08)
+
+
+### ⚠ BREAKING CHANGES
+
+* **foundations:** update variables from Figma (#1916)
+
+### Maintenance
+
+* **foundations:** update variables from Figma ([#1916](https://github.com/BonnierNews/dn-design-system/issues/1916)) ([802e1a6](https://github.com/BonnierNews/dn-design-system/commit/802e1a62be053408055c6baff6d49c7eda649c1b))
+* prerelease packages ([b92ebbf](https://github.com/BonnierNews/dn-design-system/commit/b92ebbf48f9c36704f92993b5f7502ce0255c604))
+
 ## [33.0.9](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@33.0.8...@bonniernews/dn-design-system-web@33.0.9) (2025-09-29)
 
 

package/components/button/button.scss

@@ -32,7 +32,7 @@ $ds-btn-outlined__border-width: ds-border-width(xxs);
   }
 
   &.ds-btn--primary {
-    --ds-btn__background-color: #{$ds-color-brand-600};
+    --ds-btn__background-color: #{$ds-color-brand-500};
     --ds-btn__color: #{$ds-color-text-on-brand};
   }
 

package/components/direkt-header/direkt-header.scss

@@ -1,7 +1,7 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 
 .ds-direkt-header {
-  background-color: $ds-color-brand-600;
+  background-color: $ds-color-brand-500;
   border-radius: ds-border-radius(050);
   color: $ds-color-text-primaryinvert;
   overflow: hidden;

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

@@ -54,7 +54,7 @@ a.ds-teaser--counter.ds-teaser {
 
     .ds-teaser--counter__item {
       align-items: center;
-      background-color: $ds-color-brand-600;
+      background-color: $ds-color-brand-500;
       border-radius: ds-border-radius($ds-s-025);
       color: $ds-color-text-on-brand;
       display: flex;

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

@@ -17,6 +17,7 @@
     padding: ds-spacing($ds-s-100);
     display: block;
     color: $ds-color-text-primary;
+    line-height: 0; // The parent of the inline-elements must have line-height 0 to ensure that the line-height set for the inline-elements actually has expected effect.
 
     .ds-teaser__title {
       display: inline;

package/foundations/base.scss

@@ -21,3 +21,7 @@ body {
 
   scroll-behavior: smooth;
 }
+
+body {
+  line-height: 1.2; // Should match our website codebases
+}

package/foundations/variables/colorsCssVariables.scss

@@ -1,6 +1,5 @@
 $ds-color-surface-foreground: var(--ds-color-surface-foreground);
 $ds-color-surface-primary: var(--ds-color-surface-primary);
-$ds-color-surface-media: var(--ds-color-surface-media);
 $ds-color-surface-primary-raised-soft: var(--ds-color-surface-primary-raised-soft);
 $ds-color-surface-primary-raised-strong: var(--ds-color-surface-primary-raised-strong);
 $ds-color-surface-primary-elevated: var(--ds-color-surface-primary-elevated);
@@ -15,6 +14,7 @@ $ds-color-surface-overlay: var(--ds-color-surface-overlay);
 $ds-color-surface-ad-yellow: var(--ds-color-surface-ad-yellow);
 $ds-color-surface-native-article: var(--ds-color-surface-native-article);
 $ds-color-surface-quiz: var(--ds-color-surface-quiz);
+$ds-color-surface-media: var(--ds-color-surface-media);
 $ds-color-border-primary: var(--ds-color-border-primary);
 $ds-color-border-primary-strong: var(--ds-color-border-primary-strong);
 $ds-color-border-primary-strongest: var(--ds-color-border-primary-strongest);
@@ -40,7 +40,14 @@ $ds-color-gradients-primary-start: var(--ds-color-gradients-primary-start);
 $ds-color-gradients-primary-end: var(--ds-color-gradients-primary-end);
 $ds-color-gradients-overlay-start: var(--ds-color-gradients-overlay-start);
 $ds-color-gradients-overlay-end: var(--ds-color-gradients-overlay-end);
-$ds-color-brand-0: var(--ds-color-brand-0);
+$ds-color-button-primary-default: var(--ds-color-button-primary-default);
+$ds-color-button-primary-hover: var(--ds-color-button-primary-hover);
+$ds-color-button-primary-pressed: var(--ds-color-button-primary-pressed);
+$ds-color-button-primary-disabled: var(--ds-color-button-primary-disabled);
+$ds-color-button-secondary-filled-default: var(--ds-color-button-secondary-filled-default);
+$ds-color-button-secondary-filled-hover: var(--ds-color-button-secondary-filled-hover);
+$ds-color-button-secondary-filled-pressed: var(--ds-color-button-secondary-filled-pressed);
+$ds-color-button-secondary-filled-disabled: var(--ds-color-button-secondary-filled-disabled);
 $ds-color-brand-100: var(--ds-color-brand-100);
 $ds-color-brand-200: var(--ds-color-brand-200);
 $ds-color-brand-300: var(--ds-color-brand-300);
@@ -50,8 +57,7 @@ $ds-color-brand-600: var(--ds-color-brand-600);
 $ds-color-brand-700: var(--ds-color-brand-700);
 $ds-color-brand-800: var(--ds-color-brand-800);
 $ds-color-brand-900: var(--ds-color-brand-900);
-$ds-color-brand-1000: var(--ds-color-brand-1000);
-$ds-color-brand-1100: var(--ds-color-brand-1100);
+$ds-color-brand-050: var(--ds-color-brand-050);
 $ds-color-culture-0: var(--ds-color-culture-0);
 $ds-color-culture-100: var(--ds-color-culture-100);
 $ds-color-culture-200: var(--ds-color-culture-200);

package/foundations/variables/colorsDnDark.scss

@@ -1,6 +1,5 @@
 $ds-hex-dark-surface-foreground: #0d0d0d;
 $ds-hex-dark-surface-primary: #171717;
-$ds-hex-dark-surface-media: #000000;
 $ds-hex-dark-surface-primary-raised-soft: #242424;
 $ds-hex-dark-surface-primary-raised-strong: #333333;
 $ds-hex-dark-surface-primary-elevated: #333333;
@@ -10,18 +9,19 @@ $ds-hex-dark-surface-primaryinvert-elevated: #ffffff;
 $ds-hex-dark-surface-brand: #da000d;
 $ds-hex-dark-surface-success: #3a8352;
 $ds-hex-dark-surface-culture: #227ac3;
-$ds-hex-dark-surface-breaking: #300407;
+$ds-hex-dark-surface-breaking: #320b0e;
 $ds-hex-dark-surface-overlay: rgba(5, 5, 5, 0.5);
 $ds-hex-dark-surface-ad-yellow: #ffeac6;
 $ds-hex-dark-surface-native-article: #2b2b2b;
 $ds-hex-dark-surface-quiz: #ea3e3f;
+$ds-hex-dark-surface-media: #000000;
 $ds-hex-dark-border-primary: rgba(255, 255, 255, 0.1);
 $ds-hex-dark-border-primary-strong: rgba(255, 255, 255, 0.25);
 $ds-hex-dark-border-primary-strongest: #ffffff;
 $ds-hex-dark-border-primaryinvert: rgba(5, 5, 5, 0.13);
 $ds-hex-dark-border-primaryinvert-strong: rgba(5, 5, 5, 0.5);
 $ds-hex-dark-border-primaryinvert-strongest: #171717;
-$ds-hex-dark-border-brand: #fd2330;
+$ds-hex-dark-border-brand: #f43434;
 $ds-hex-dark-border-culture: #4293d7;
 $ds-hex-dark-text-primary: #e5e5e5;
 $ds-hex-dark-text-primary-subtle: #b2b2b2;
@@ -29,29 +29,35 @@ $ds-hex-dark-text-primary-disabled: #b2b2b2;
 $ds-hex-dark-text-primaryinvert: #0d0d0d;
 $ds-hex-dark-text-primaryinvert-subtle: #595959;
 $ds-hex-dark-text-primaryinvert-disabled: #0d0d0d;
-$ds-hex-dark-text-brand: #fd2330;
+$ds-hex-dark-text-brand: #f43434;
 $ds-hex-dark-text-culture: #4293d7;
-$ds-hex-dark-text-critical: #fd2330;
+$ds-hex-dark-text-critical: #f43434;
 $ds-hex-dark-text-success: #3a8352;
 $ds-hex-dark-text-on-brand: #ffffff;
 $ds-hex-dark-text-body-link: #65a0fc;
 $ds-hex-dark-text-body-link-visited: #65a0fc;
 $ds-hex-dark-gradients-primary-start: #171717;
 $ds-hex-dark-gradients-primary-end: rgba(23, 23, 23, 0);
-$ds-hex-dark-gradients-overlay-start: rgba(36, 36, 36, 0.5);
+$ds-hex-dark-gradients-overlay-start: rgba(36, 36, 36, 0.75);
 $ds-hex-dark-gradients-overlay-end: rgba(36, 36, 36, 0);
-$ds-hex-dark-brand-0: #fbf4f4;
-$ds-hex-dark-brand-100: #f9eced;
-$ds-hex-dark-brand-200: #f2d9da;
-$ds-hex-dark-brand-300: #f0c2c4;
-$ds-hex-dark-brand-400: #f2888e;
-$ds-hex-dark-brand-500: #fd2330;
-$ds-hex-dark-brand-600: #da000d;
-$ds-hex-dark-brand-700: #af010b;
-$ds-hex-dark-brand-800: #85020a;
-$ds-hex-dark-brand-900: #5a0308;
-$ds-hex-dark-brand-1000: #300407;
-$ds-hex-dark-brand-1100: #1a0506;
+$ds-hex-dark-button-primary-default: #da000d;
+$ds-hex-dark-button-primary-hover: #b8000b;
+$ds-hex-dark-button-primary-pressed: #b8000b;
+$ds-hex-dark-button-primary-disabled: #b8000b;
+$ds-hex-dark-button-secondary-filled-default: #da000d;
+$ds-hex-dark-button-secondary-filled-hover: #b8000b;
+$ds-hex-dark-button-secondary-filled-pressed: #b8000b;
+$ds-hex-dark-button-secondary-filled-disabled: #b8000b;
+$ds-hex-dark-brand-100: #ffd0d3;
+$ds-hex-dark-brand-200: #ffa9ae;
+$ds-hex-dark-brand-300: #ff757d;
+$ds-hex-dark-brand-400: #f43434;
+$ds-hex-dark-brand-500: #da000d;
+$ds-hex-dark-brand-600: #b8000b;
+$ds-hex-dark-brand-700: #96171f;
+$ds-hex-dark-brand-800: #6e1c20;
+$ds-hex-dark-brand-900: #320b0e;
+$ds-hex-dark-brand-050: #ffe9ea;
 $ds-hex-dark-culture-0: #f4f7fa;
 $ds-hex-dark-culture-100: #e7f1fa;
 $ds-hex-dark-culture-200: #cfe5f6;

package/foundations/variables/colorsDnLight.scss

@@ -1,6 +1,5 @@
 $ds-hex-surface-foreground: #f2f2f2;
 $ds-hex-surface-primary: #ffffff;
-$ds-hex-surface-media: #000000;
 $ds-hex-surface-primary-raised-soft: #f2f2f2;
 $ds-hex-surface-primary-raised-strong: #e5e5e5;
 $ds-hex-surface-primary-elevated: #ffffff;
@@ -10,11 +9,12 @@ $ds-hex-surface-primaryinvert-elevated: #242424;
 $ds-hex-surface-brand: #da000d;
 $ds-hex-surface-success: #3a8352;
 $ds-hex-surface-culture: #227ac3;
-$ds-hex-surface-breaking: #300407;
+$ds-hex-surface-breaking: #320b0e;
 $ds-hex-surface-overlay: #05050580;
 $ds-hex-surface-ad-yellow: #ffeac6;
 $ds-hex-surface-native-article: #ededed;
 $ds-hex-surface-quiz: #ea3e3f;
+$ds-hex-surface-media: #000000;
 $ds-hex-border-primary: #0505051a;
 $ds-hex-border-primary-strong: #05050540;
 $ds-hex-border-primary-strongest: #0d0d0d;
@@ -38,20 +38,26 @@ $ds-hex-text-body-link: #4373ce;
 $ds-hex-text-body-link-visited: #4373ce;
 $ds-hex-gradients-primary-start: #ffffff;
 $ds-hex-gradients-primary-end: #ffffff00;
-$ds-hex-gradients-overlay-start: #24242480;
+$ds-hex-gradients-overlay-start: #242424bf;
 $ds-hex-gradients-overlay-end: #24242400;
-$ds-hex-brand-0: #fbf4f4;
-$ds-hex-brand-100: #f9eced;
-$ds-hex-brand-200: #f2d9da;
-$ds-hex-brand-300: #f0c2c4;
-$ds-hex-brand-400: #f2888e;
-$ds-hex-brand-500: #fd2330;
-$ds-hex-brand-600: #da000d;
-$ds-hex-brand-700: #af010b;
-$ds-hex-brand-800: #85020a;
-$ds-hex-brand-900: #5a0308;
-$ds-hex-brand-1000: #300407;
-$ds-hex-brand-1100: #1a0506;
+$ds-hex-button-primary-default: #da000d;
+$ds-hex-button-primary-hover: #96171f;
+$ds-hex-button-primary-pressed: #96171f;
+$ds-hex-button-primary-disabled: #f2f2f2;
+$ds-hex-button-secondary-filled-default: #da000d;
+$ds-hex-button-secondary-filled-hover: #96171f;
+$ds-hex-button-secondary-filled-pressed: #96171f;
+$ds-hex-button-secondary-filled-disabled: #f2f2f2;
+$ds-hex-brand-100: #ffd0d3;
+$ds-hex-brand-200: #ffa9ae;
+$ds-hex-brand-300: #ff757d;
+$ds-hex-brand-400: #f43434;
+$ds-hex-brand-500: #da000d;
+$ds-hex-brand-600: #b8000b;
+$ds-hex-brand-700: #96171f;
+$ds-hex-brand-800: #6e1c20;
+$ds-hex-brand-900: #320b0e;
+$ds-hex-brand-050: #ffe9ea;
 $ds-hex-culture-0: #f4f7fa;
 $ds-hex-culture-100: #e7f1fa;
 $ds-hex-culture-200: #cfe5f6;

package/foundations/variables/gradientsDnDark.scss

@@ -1,45 +1,45 @@
 $gradientsDnDark: (
-  content-fade-up: (
+  content-fade-down: (
     type: linear,
     angle: 180,
     stops: ((
-      color: rgba(23, 23, 23, 0),
+      color: #171717,
       position: 0
     ), (
-      color: #171717,
+      color: rgba(23, 23, 23, 0),
       position: 1
     ))
   ),
-  content-fade-left: (
+  content-fade-right: (
     type: linear,
     angle: 270,
     stops: ((
-      color: #171717,
+      color: rgba(23, 23, 23, 0),
       position: 0
     ), (
-      color: rgba(23, 23, 23, 0),
+      color: #171717,
       position: 1
     ))
   ),
-  content-fade-right: (
+  content-fade-left: (
     type: linear,
     angle: 270,
     stops: ((
-      color: rgba(23, 23, 23, 0),
+      color: #171717,
       position: 0
     ), (
-      color: #171717,
+      color: rgba(23, 23, 23, 0),
       position: 1
     ))
   ),
-  content-fade-down: (
+  content-fade-up: (
     type: linear,
     angle: 180,
     stops: ((
-      color: #171717,
+      color: rgba(23, 23, 23, 0),
       position: 0
     ), (
-      color: rgba(23, 23, 23, 0),
+      color: #171717,
       position: 1
     ))
   )

package/foundations/variables/gradientsDnLight.scss

@@ -1,45 +1,45 @@
 $gradientsDnLight: (
-  content-fade-up: (
+  content-fade-down: (
     type: linear,
     angle: 180,
     stops: ((
-      color: rgba(255, 255, 255, 0),
+      color: #ffffff,
       position: 0
     ), (
-      color: #ffffff,
+      color: rgba(255, 255, 255, 0),
       position: 1
     ))
   ),
-  content-fade-left: (
+  content-fade-right: (
     type: linear,
     angle: 270,
     stops: ((
-      color: #ffffff,
+      color: rgba(255, 255, 255, 0),
       position: 0
     ), (
-      color: rgba(255, 255, 255, 0),
+      color: #ffffff,
       position: 1
     ))
   ),
-  content-fade-right: (
+  content-fade-left: (
     type: linear,
     angle: 270,
     stops: ((
-      color: rgba(255, 255, 255, 0),
+      color: #ffffff,
       position: 0
     ), (
-      color: #ffffff,
+      color: rgba(255, 255, 255, 0),
       position: 1
     ))
   ),
-  content-fade-down: (
+  content-fade-up: (
     type: linear,
     angle: 180,
     stops: ((
-      color: #ffffff,
+      color: rgba(255, 255, 255, 0),
       position: 0
     ), (
-      color: rgba(255, 255, 255, 0),
+      color: #ffffff,
       position: 1
     ))
   )

package/foundations/variables/gradientsList.scss

@@ -1,4 +1,4 @@
-$ds-gradient-content-fade-up: var(--ds-gradient-content-fade-up);
-$ds-gradient-content-fade-left: var(--ds-gradient-content-fade-left);
-$ds-gradient-content-fade-right: var(--ds-gradient-content-fade-right);
 $ds-gradient-content-fade-down: var(--ds-gradient-content-fade-down);
+$ds-gradient-content-fade-right: var(--ds-gradient-content-fade-right);
+$ds-gradient-content-fade-left: var(--ds-gradient-content-fade-left);
+$ds-gradient-content-fade-up: var(--ds-gradient-content-fade-up);

package/foundations/variables/shadowsDnDark.scss

@@ -1,4 +1,11 @@
 $shadowsDnDark: (
+  elevation-sm: (
+    x: 0,
+    y: 2,
+    blur: 4,
+    spread: 1,
+    color: rgba(13, 13, 13, 0.25)
+  ),
   elevation-xs: (
     x: 0,
     y: 1,
@@ -13,13 +20,6 @@ $shadowsDnDark: (
     spread: 0,
     color: rgba(13, 13, 13, 0.25)
   ),
-  elevation-sm: (
-    x: 0,
-    y: 2,
-    blur: 4,
-    spread: 1,
-    color: rgba(13, 13, 13, 0.25)
-  ),
   elevation-md: (
     x: 0,
     y: 4,

package/foundations/variables/shadowsDnLight.scss

@@ -1,4 +1,11 @@
 $shadowsDnLight: (
+  elevation-sm: (
+    x: 0,
+    y: 2,
+    blur: 4,
+    spread: 1,
+    color: rgba(13, 13, 13, 0.15)
+  ),
   elevation-xs: (
     x: 0,
     y: 1,
@@ -13,13 +20,6 @@ $shadowsDnLight: (
     spread: 0,
     color: rgba(13, 13, 13, 0.15)
   ),
-  elevation-sm: (
-    x: 0,
-    y: 2,
-    blur: 4,
-    spread: 1,
-    color: rgba(13, 13, 13, 0.15)
-  ),
   elevation-md: (
     x: 0,
     y: 4,

package/foundations/variables/shadowsList.scss

@@ -1,4 +1,4 @@
+$ds-shadow-elevation-sm: --ds-shadow-elevation-sm;
 $ds-shadow-elevation-xs: --ds-shadow-elevation-xs;
 $ds-shadow-elevation-lg: --ds-shadow-elevation-lg;
-$ds-shadow-elevation-sm: --ds-shadow-elevation-sm;
 $ds-shadow-elevation-md: --ds-shadow-elevation-md;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "33.0.9",
+  "version": "34.1.0",
   "description": "DN design system for web.",
   "type": "module",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",

package/preact/components/icon-with-wrapper/icon-with-wrapper.js

@@ -7,7 +7,6 @@ var formatClassString = (classesArray) => {
 var colors_css_variables_default = {
   "surface-foreground": "var(--ds-color-surface-foreground)",
   "surface-primary": "var(--ds-color-surface-primary)",
-  "surface-media": "var(--ds-color-surface-media)",
   "surface-primary-raised-soft": "var(--ds-color-surface-primary-raised-soft)",
   "surface-primary-raised-strong": "var(--ds-color-surface-primary-raised-strong)",
   "surface-primary-elevated": "var(--ds-color-surface-primary-elevated)",
@@ -22,6 +21,7 @@ var colors_css_variables_default = {
   "surface-ad-yellow": "var(--ds-color-surface-ad-yellow)",
   "surface-native-article": "var(--ds-color-surface-native-article)",
   "surface-quiz": "var(--ds-color-surface-quiz)",
+  "surface-media": "var(--ds-color-surface-media)",
   "border-primary": "var(--ds-color-border-primary)",
   "border-primary-strong": "var(--ds-color-border-primary-strong)",
   "border-primary-strongest": "var(--ds-color-border-primary-strongest)",
@@ -47,7 +47,14 @@ var colors_css_variables_default = {
   "gradients-primary-end": "var(--ds-color-gradients-primary-end)",
   "gradients-overlay-start": "var(--ds-color-gradients-overlay-start)",
   "gradients-overlay-end": "var(--ds-color-gradients-overlay-end)",
-  "brand-0": "var(--ds-color-brand-0)",
+  "button-primary-default": "var(--ds-color-button-primary-default)",
+  "button-primary-hover": "var(--ds-color-button-primary-hover)",
+  "button-primary-pressed": "var(--ds-color-button-primary-pressed)",
+  "button-primary-disabled": "var(--ds-color-button-primary-disabled)",
+  "button-secondary-filled-default": "var(--ds-color-button-secondary-filled-default)",
+  "button-secondary-filled-hover": "var(--ds-color-button-secondary-filled-hover)",
+  "button-secondary-filled-pressed": "var(--ds-color-button-secondary-filled-pressed)",
+  "button-secondary-filled-disabled": "var(--ds-color-button-secondary-filled-disabled)",
   "brand-100": "var(--ds-color-brand-100)",
   "brand-200": "var(--ds-color-brand-200)",
   "brand-300": "var(--ds-color-brand-300)",
@@ -57,8 +64,7 @@ var colors_css_variables_default = {
   "brand-700": "var(--ds-color-brand-700)",
   "brand-800": "var(--ds-color-brand-800)",
   "brand-900": "var(--ds-color-brand-900)",
-  "brand-1000": "var(--ds-color-brand-1000)",
-  "brand-1100": "var(--ds-color-brand-1100)",
+  "brand-050": "var(--ds-color-brand-050)",
   "culture-0": "var(--ds-color-culture-0)",
   "culture-100": "var(--ds-color-culture-100)",
   "culture-200": "var(--ds-color-culture-200)",