@bonniernews/dn-design-system-web 26.0.1 → 27.0.0

package/CHANGELOG.md

@@ -4,6 +4,30 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [27.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@26.0.2...@bonniernews/dn-design-system-web@27.0.0) (2025-02-09)
+
+
+### ⚠ BREAKING CHANGES
+
+* update variables (#1601)
+
+### Maintenance
+
+* prerelease packages ([d61250d](https://github.com/BonnierNews/dn-design-system/commit/d61250d70c8d4f05701eba31feecd6488105e0b7))
+* update variables ([#1601](https://github.com/BonnierNews/dn-design-system/issues/1601)) ([221b0b5](https://github.com/BonnierNews/dn-design-system/commit/221b0b5bae56b8dcfee1c461341c8c3ddcf3f731))
+
+## [26.0.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@26.0.1...@bonniernews/dn-design-system-web@26.0.2) (2025-02-05)
+
+
+### Bug Fixes
+
+* **web:** do not render spinner if button has a link ([#1599](https://github.com/BonnierNews/dn-design-system/issues/1599)) ([17e562a](https://github.com/BonnierNews/dn-design-system/commit/17e562afa88bfff82c535c9328101d21488f6885))
+
+
+### Maintenance
+
+* **deps:** bump store2 from 2.14.2 to 2.14.4 in /web ([#1593](https://github.com/BonnierNews/dn-design-system/issues/1593)) ([e48bfdf](https://github.com/BonnierNews/dn-design-system/commit/e48bfdf4e9c4f201e132bdc0c30e0f8a52cb1825))
+
 ## [26.0.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@26.0.0...@bonniernews/dn-design-system-web@26.0.1) (2025-02-03)
 
 

package/components/button/button.njk

@@ -79,6 +79,9 @@
       {% endif %}
     {% endcall %}
   {% else %}
+    {% if params.href %}
+      {% set loadingHtml = null %}
+    {% endif %}
     {% set buttonParams = { isIconButton: params.isIconBtn, a11y: params.a11y, text: text, iconSvg: iconSvg, loadingHtml: loadingHtml , attributes: params.attributes } %}
     {%- if params.href %}
       <a href="{{ params.href | default('#', true) }}" {{ ariaLabel | safe }} class="{{ classes }}" {{- attributes | safe }}>

package/foundations/variables/colorsDnDark.scss

@@ -1,8 +1,8 @@
-$ds-hex-dark-surface-foreground: #000000;
-$ds-hex-dark-surface-primary: #0f0f0f;
-$ds-hex-dark-surface-primary-raised-soft: #171717;
-$ds-hex-dark-surface-primary-raised-strong: #212121;
-$ds-hex-dark-surface-primary-elevated: #0f0f0f;
+$ds-hex-dark-surface-foreground: #0d0d0d;
+$ds-hex-dark-surface-primary: #171717;
+$ds-hex-dark-surface-primary-raised-soft: #242424;
+$ds-hex-dark-surface-primary-raised-strong: #333333;
+$ds-hex-dark-surface-primary-elevated: #333333;
 $ds-hex-dark-surface-primaryinvert: #ffffff;
 $ds-hex-dark-surface-primaryinvert-raised-soft: rgba(5, 5, 5, 0.05);
 $ds-hex-dark-surface-primaryinvert-elevated: #ffffff;
@@ -14,20 +14,20 @@ $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-border-primary: rgba(255, 255, 255, 0.15);
-$ds-hex-dark-border-primary-strong: rgba(255, 255, 255, 0.39);
+$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: #000000;
+$ds-hex-dark-border-primaryinvert-strongest: #0d0d0d;
 $ds-hex-dark-border-brand: #fd2330;
 $ds-hex-dark-border-culture: #4293d7;
-$ds-hex-dark-text-primary: #e8e8e8;
+$ds-hex-dark-text-primary: #e5e5e5;
 $ds-hex-dark-text-primary-subtle: #b2b2b2;
 $ds-hex-dark-text-primary-disabled: #b2b2b2;
-$ds-hex-dark-text-primaryinvert: #000000;
+$ds-hex-dark-text-primaryinvert: #0d0d0d;
 $ds-hex-dark-text-primaryinvert-subtle: #595959;
-$ds-hex-dark-text-primaryinvert-disabled: #000000;
+$ds-hex-dark-text-primaryinvert-disabled: #0d0d0d;
 $ds-hex-dark-text-brand: #fd2330;
 $ds-hex-dark-text-culture: #4293d7;
 $ds-hex-dark-text-critical: #fd2330;
@@ -62,19 +62,19 @@ $ds-hex-dark-culture-900: #0e314e;
 $ds-hex-dark-culture-1000: #152029;
 $ds-hex-dark-culture-1100: #05101a;
 $ds-hex-dark-neutral-100: #f2f2f2;
-$ds-hex-dark-neutral-200: #e8e8e8;
+$ds-hex-dark-neutral-200: #e5e5e5;
 $ds-hex-dark-neutral-300: #cdcdcd;
 $ds-hex-dark-neutral-400: #b2b2b2;
 $ds-hex-dark-neutral-500: #8c8c8c;
 $ds-hex-dark-neutral-600: #666666;
 $ds-hex-dark-neutral-700: #595959;
 $ds-hex-dark-neutral-800: #363636;
-$ds-hex-dark-neutral-900: #212121;
-$ds-hex-dark-neutral-1000: #171717;
-$ds-hex-dark-neutral-1100: #0f0f0f;
+$ds-hex-dark-neutral-900: #333333;
+$ds-hex-dark-neutral-1000: #242424;
+$ds-hex-dark-neutral-1100: #171717;
 $ds-hex-dark-neutral-white: #ffffff;
 $ds-hex-dark-neutral-050: #f8f8f8;
-$ds-hex-dark-neutral-black: #000000;
+$ds-hex-dark-neutral-black: #0d0d0d;
 $ds-hex-dark-bright-neutral-alpha-100: rgba(5, 5, 5, 0.05);
 $ds-hex-dark-bright-neutral-alpha-200: rgba(5, 5, 5, 0.13);
 $ds-hex-dark-bright-neutral-alpha-300: rgba(5, 5, 5, 0.2);

package/foundations/variables/colorsDnLight.scss

@@ -1,11 +1,11 @@
 $ds-hex-surface-foreground: #f8f8f8;
 $ds-hex-surface-primary: #ffffff;
 $ds-hex-surface-primary-raised-soft: #f2f2f2;
-$ds-hex-surface-primary-raised-strong: #e8e8e8;
+$ds-hex-surface-primary-raised-strong: #e5e5e5;
 $ds-hex-surface-primary-elevated: #ffffff;
-$ds-hex-surface-primaryinvert: #000000;
+$ds-hex-surface-primaryinvert: #0d0d0d;
 $ds-hex-surface-primaryinvert-raised-soft: #ffffff0d;
-$ds-hex-surface-primaryinvert-elevated: #171717;
+$ds-hex-surface-primaryinvert-elevated: #242424;
 $ds-hex-surface-brand: #da000d;
 $ds-hex-surface-success: #3a8352;
 $ds-hex-surface-culture: #227ac3;
@@ -14,15 +14,15 @@ $ds-hex-surface-overlay: #05050580;
 $ds-hex-surface-ad-yellow: #ffeac6;
 $ds-hex-surface-native-article: #ededed;
 $ds-hex-surface-quiz: #ea3e3f;
-$ds-hex-border-primary: #05050521;
-$ds-hex-border-primary-strong: #05050580;
-$ds-hex-border-primary-strongest: #000000;
+$ds-hex-border-primary: #0505051a;
+$ds-hex-border-primary-strong: #05050540;
+$ds-hex-border-primary-strongest: #0d0d0d;
 $ds-hex-border-primaryinvert: #ffffff26;
 $ds-hex-border-primaryinvert-strong: #ffffff63;
 $ds-hex-border-primaryinvert-strongest: #ffffff;
 $ds-hex-border-brand: #da000d;
 $ds-hex-border-culture: #227ac3;
-$ds-hex-text-primary: #000000;
+$ds-hex-text-primary: #0d0d0d;
 $ds-hex-text-primary-subtle: #595959;
 $ds-hex-text-primary-disabled: #595959;
 $ds-hex-text-primaryinvert: #f2f2f2;
@@ -62,19 +62,19 @@ $ds-hex-culture-900: #0e314e;
 $ds-hex-culture-1000: #152029;
 $ds-hex-culture-1100: #05101a;
 $ds-hex-neutral-100: #f2f2f2;
-$ds-hex-neutral-200: #e8e8e8;
+$ds-hex-neutral-200: #e5e5e5;
 $ds-hex-neutral-300: #cdcdcd;
 $ds-hex-neutral-400: #b2b2b2;
 $ds-hex-neutral-500: #8c8c8c;
 $ds-hex-neutral-600: #666666;
 $ds-hex-neutral-700: #595959;
 $ds-hex-neutral-800: #363636;
-$ds-hex-neutral-900: #212121;
-$ds-hex-neutral-1000: #171717;
-$ds-hex-neutral-1100: #0f0f0f;
+$ds-hex-neutral-900: #333333;
+$ds-hex-neutral-1000: #242424;
+$ds-hex-neutral-1100: #171717;
 $ds-hex-neutral-white: #ffffff;
 $ds-hex-neutral-050: #f8f8f8;
-$ds-hex-neutral-black: #000000;
+$ds-hex-neutral-black: #0d0d0d;
 $ds-hex-bright-neutral-alpha-100: #0505050d;
 $ds-hex-bright-neutral-alpha-200: #05050521;
 $ds-hex-bright-neutral-alpha-300: #05050533;

package/foundations/variables/shadowsDnDark.scss

@@ -1,30 +1,30 @@
 $shadowsDnDark: (
   elevation-xs: (
     x: 0,
-    y: 0,
-    blur: 0,
-    spread: 0,
-    color: #0505051a
+    y: 1,
+    blur: 2,
+    spread: 1,
+    color: rgba(13, 13, 13, 0.25)
   ),
   elevation-sm: (
     x: 0,
-    y: 0,
-    blur: 0,
-    spread: 0,
-    color: #0505051a
+    y: 2,
+    blur: 4,
+    spread: 1,
+    color: rgba(13, 13, 13, 0.25)
   ),
   elevation-md: (
     x: 0,
-    y: 0,
-    blur: 0,
+    y: 4,
+    blur: 8,
     spread: 0,
-    color: #0505051a
+    color: rgba(13, 13, 13, 0.25)
   ),
   elevation-lg: (
     x: 0,
-    y: 0,
-    blur: 0,
+    y: 4,
+    blur: 16,
     spread: 0,
-    color: #0000001a
+    color: rgba(13, 13, 13, 0.25)
   )
 );

package/foundations/variables/shadowsDnLight.scss

@@ -4,27 +4,27 @@ $shadowsDnLight: (
     y: 1,
     blur: 2,
     spread: 1,
-    color: #0505051a
+    color: rgba(13, 13, 13, 0.15)
   ),
   elevation-sm: (
     x: 0,
     y: 2,
     blur: 4,
     spread: 1,
-    color: #0505051a
+    color: rgba(13, 13, 13, 0.15)
   ),
   elevation-md: (
     x: 0,
     y: 4,
     blur: 8,
     spread: 0,
-    color: #0505051a
+    color: rgba(13, 13, 13, 0.15)
   ),
   elevation-lg: (
     x: 0,
     y: 4,
     blur: 16,
     spread: 0,
-    color: #0000001a
+    color: rgba(13, 13, 13, 0.15)
   )
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "26.0.1",
+  "version": "27.0.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/buddy-menu/buddy-menu.js

@@ -146,7 +146,8 @@ var ButtonBase = ({
   } else {
     const buttonParams = { isIconButton, a11y, text, icon, loadingHtml, attributes };
     if (href) {
-      buttonToRender = /* @__PURE__ */ jsx5("a", { href, className: classes, ...attributes, children: /* @__PURE__ */ jsx5(InnerButton, { ...buttonParams }) });
+      const params = { ...buttonParams, loadingHtml: null };
+      buttonToRender = /* @__PURE__ */ jsx5("a", { href, className: classes, ...attributes, children: /* @__PURE__ */ jsx5(InnerButton, { ...params }) });
     } else {
       buttonToRender = /* @__PURE__ */ jsx5("button", { type, className: classes, ...attributes, disabled, children: /* @__PURE__ */ jsx5(InnerButton, { ...buttonParams }) });
     }