@bonniernews/dn-design-system-web 21.1.0-beta.1 → 21.1.0-beta.3

package/CHANGELOG.md

@@ -4,6 +4,43 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [21.1.0-beta.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.0.2...@bonniernews/dn-design-system-web@21.1.0-beta.3) (2024-11-06)
+
+
+### Features
+
+* **web:** breaking aka nivå3puff till visuella toppar ([#1450](https://github.com/BonnierNews/dn-design-system/issues/1450)) ([5adacb9](https://github.com/BonnierNews/dn-design-system/commit/5adacb9d8b1fadecd615278e63139627f3b88cb7))
+* **web:** nivå1puff till visuella toppar  ([#1460](https://github.com/BonnierNews/dn-design-system/issues/1460)) ([7743c3b](https://github.com/BonnierNews/dn-design-system/commit/7743c3bfad040b46921e934570808b33083401ce))
+* **web:** one level of bauta with background color ([9184544](https://github.com/BonnierNews/dn-design-system/commit/91845447403cb2ec5a787fd64c341d620861b148))
+* **web:** one level of bauta with background color ([644acd6](https://github.com/BonnierNews/dn-design-system/commit/644acd6166d7385ac08c930fe725215a9e35fc80))
+
+
+### Bug Fixes
+
+* **web:** correct spacing teasers ([#1491](https://github.com/BonnierNews/dn-design-system/issues/1491)) ([b2624b8](https://github.com/BonnierNews/dn-design-system/commit/b2624b8311384d38971f82eb84e73560244a4b18))
+* **web:** media box sizing border box ([#1473](https://github.com/BonnierNews/dn-design-system/issues/1473)) ([48aeeca](https://github.com/BonnierNews/dn-design-system/commit/48aeecac1be293bbcb8ece678d562c26c0ec59d6))
+
+
+### Maintenance
+
+* **deps-dev:** bump @babel/preset-env from 7.25.8 to 7.25.9 ([#1469](https://github.com/BonnierNews/dn-design-system/issues/1469)) ([b9a9884](https://github.com/BonnierNews/dn-design-system/commit/b9a988470f8862d4c010f27a097d9a65af115d2b))
+* **deps-dev:** bump @testing-library/react-native from 12.7.2 to 12.8.0 ([#1477](https://github.com/BonnierNews/dn-design-system/issues/1477)) ([59e489f](https://github.com/BonnierNews/dn-design-system/commit/59e489f4227e83e1d6df43eb9acf6c1ea42db3e3))
+* **deps:** bump @react-native-community/slider from 4.5.4 to 4.5.5 ([#1475](https://github.com/BonnierNews/dn-design-system/issues/1475)) ([c321542](https://github.com/BonnierNews/dn-design-system/commit/c321542bdf60e16f86fc02cae937b301e649bb48))
+* **foundations:** update tokens from Figma ([#1467](https://github.com/BonnierNews/dn-design-system/issues/1467)) ([af2cd99](https://github.com/BonnierNews/dn-design-system/commit/af2cd99ce8ab17494a3e51e34588d25e24a9ef38))
+* prerelease packages ([974fe99](https://github.com/BonnierNews/dn-design-system/commit/974fe99363323771a4284b36a895757fd4c49630))
+* prerelease packages ([3ebfd91](https://github.com/BonnierNews/dn-design-system/commit/3ebfd91c6780c6222c74b500eade9fd19cac88f3))
+* **web:** change screenshot location ([#1482](https://github.com/BonnierNews/dn-design-system/issues/1482)) ([472d0df](https://github.com/BonnierNews/dn-design-system/commit/472d0df71292d72206f908b82b45148a3b79cb91))
+* **web:** released version v21.1.0-beta.1 ([9d45c5a](https://github.com/BonnierNews/dn-design-system/commit/9d45c5a4bbcfe53698ca9dffe3e1771422fbcdac))
+* **web:** released version v21.1.0-beta.2 ([49b9324](https://github.com/BonnierNews/dn-design-system/commit/49b9324c7074d6835aab2de9bb7d9e18649f58b6))
+* **web:** visuella-toppar-update-tokens ([#1468](https://github.com/BonnierNews/dn-design-system/issues/1468)) ([943705a](https://github.com/BonnierNews/dn-design-system/commit/943705afb2922c4d32bb4e042cd746857cbd26cf))
+
+## [21.1.0-beta.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.0-beta.1...@bonniernews/dn-design-system-web@21.1.0-beta.2) (2024-10-25)
+
+
+### Bug Fixes
+
+* **web:** media box sizing border box ([#1473](https://github.com/BonnierNews/dn-design-system/issues/1473)) ([e132abf](https://github.com/BonnierNews/dn-design-system/commit/e132abf44fc8d525fed7ff565ebdcc3702941669))
+
 ## [21.1.0-beta.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.0.2...@bonniernews/dn-design-system-web@21.1.0-beta.1) (2024-10-25)
 
 

package/assets/teaser/teaser.scss

@@ -97,6 +97,7 @@ $grade-size: ds-px-to-rem(34px);
   .ds-teaser__media {
     width: 100%;
     position: relative;
+    box-sizing: border-box;
   }
 
   .ds-vip-badge {

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

@@ -35,6 +35,10 @@
     }
   }
 
+  .ds-teaser__vignette {
+    margin-top: ds-spacing($ds-s-025);
+  }
+
   .ds-teaser__title {
     @include ds-typography($ds-typography-detailteaser-breaking);
     text-align: center;

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

@@ -32,6 +32,10 @@
     }
   }
 
+  .ds-teaser__vignette {
+    margin-top: ds-spacing($ds-s-025);
+  }
+
   .ds-teaser__title {
     @include ds-typography($ds-typography-detailteaser-large);
   }
@@ -65,6 +69,7 @@
     position: relative;
     margin-left: ds-spacing($ds-s-100);
     margin-bottom: ds-spacing($ds-s-100, "px", true);
+    margin-top: ds-spacing($ds-s-025);
 
     .picture {
       position: absolute;

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

@@ -70,6 +70,8 @@
     }
 
     .ds-teaser__media {
+      margin-top: ds-spacing($ds-s-025);
+
       .ds-teaser-image__byline {
         @include ds-typography($ds-typography-functionalmeta01, $forcePx: true, $lineHeight: $ds-lineheight-l);
       }

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

@@ -6,6 +6,10 @@
   padding: ds-spacing($ds-s-075 $ds-s-100 0);
   overflow: hidden;
 
+  .ds-teaser__vignette {
+    margin-top: ds-spacing($ds-s-025);
+  }
+
   .ds-teaser__title {
     @include ds-typography($ds-typography-detailteaser-standard);
 
@@ -34,6 +38,7 @@
   }
 
   .ds-teaser__media {
+    margin-top: ds-spacing($ds-s-025);
     margin-bottom: ds-spacing($ds-s-100);
     margin-left: ds-spacing($ds-s-100);
     float: right;

package/foundations/variables/colorsCssVariables.scss

@@ -11,6 +11,7 @@ $ds-color-text-brand: var(--ds-color-text-brand);
 $ds-color-text-body-link: var(--ds-color-text-body-link);
 $ds-color-text-body-link-visited: var(--ds-color-text-body-link-visited);
 $ds-color-text-positive: var(--ds-color-text-positive);
+$ds-color-text-culture: var(--ds-color-text-culture);
 $ds-color-icon-primary: var(--ds-color-icon-primary);
 $ds-color-icon-primary-02: var(--ds-color-icon-primary-02);
 $ds-color-icon-secondary: var(--ds-color-icon-secondary);
@@ -21,6 +22,7 @@ $ds-color-icon-on-business: var(--ds-color-icon-on-business);
 $ds-color-icon-brand: var(--ds-color-icon-brand);
 $ds-color-icon-on-critical: var(--ds-color-icon-on-critical);
 $ds-color-icon-on-success: var(--ds-color-icon-on-success);
+$ds-color-icon-culture: var(--ds-color-icon-culture);
 $ds-color-component-brand: var(--ds-color-component-brand);
 $ds-color-component-business: var(--ds-color-component-business);
 $ds-color-component-primary: var(--ds-color-component-primary);
@@ -57,6 +59,7 @@ $ds-color-border-focus-02: var(--ds-color-border-focus-02);
 $ds-color-border-focus-03: var(--ds-color-border-focus-03);
 $ds-color-border-focus-04: var(--ds-color-border-focus-04);
 $ds-color-border-brand: var(--ds-color-border-brand);
+$ds-color-border-culture: var(--ds-color-border-culture);
 $ds-color-background-primary: var(--ds-color-background-primary);
 $ds-color-static-red-100: var(--ds-color-static-red-100);
 $ds-color-static-black: var(--ds-color-static-black);

package/foundations/variables/colorsDnDarkTokens.scss

@@ -11,6 +11,7 @@ $ds-hex-dark-text-brand: #fd2330;
 $ds-hex-dark-text-body-link: #65a0fc;
 $ds-hex-dark-text-body-link-visited: #65a0fc;
 $ds-hex-dark-text-positive: #3a8352;
+$ds-hex-dark-text-culture: #4293d7;
 $ds-hex-dark-icon-primary: #ededed;
 $ds-hex-dark-icon-primary-02: #cfcfcf;
 $ds-hex-dark-icon-secondary: #050505;
@@ -21,6 +22,7 @@ $ds-hex-dark-icon-on-critical: #ffffff;
 $ds-hex-dark-icon-on-success: #ffffff;
 $ds-hex-dark-icon-on-business: #ffffff;
 $ds-hex-dark-icon-brand: #fd2330;
+$ds-hex-dark-icon-culture: #4293d7;
 $ds-hex-dark-component-brand: #fd2330;
 $ds-hex-dark-component-business: #3a8352;
 $ds-hex-dark-component-primary: #ededed;
@@ -57,6 +59,7 @@ $ds-hex-dark-border-focus-02: #ffffff;
 $ds-hex-dark-border-focus-03: #fd2330;
 $ds-hex-dark-border-focus-04: #3a8352;
 $ds-hex-dark-border-brand: #fd2330;
+$ds-hex-dark-border-culture: #4293d7;
 $ds-hex-dark-background-primary: #141414;
 $ds-hex-dark-gradient-content-fade-left: linear-gradient(90deg, #05050500 0%, #050505 100%);
 $ds-hex-dark-gradient-content-fade-right: linear-gradient(-90deg, #05050500 0%, #050505 100%);

package/foundations/variables/colorsDnLightTokens.scss

@@ -11,6 +11,7 @@ $ds-hex-text-brand: #da000d;
 $ds-hex-text-body-link: #4373ce;
 $ds-hex-text-body-link-visited: #4373ce;
 $ds-hex-text-positive: #3a8352;
+$ds-hex-text-culture: #227ac3;
 $ds-hex-icon-primary: #050505;
 $ds-hex-icon-primary-02: #666666;
 $ds-hex-icon-secondary: #ffffff;
@@ -21,6 +22,7 @@ $ds-hex-icon-on-business: #ffffff;
 $ds-hex-icon-brand: #da000d;
 $ds-hex-icon-on-critical: #ffffff;
 $ds-hex-icon-on-success: #ffffff;
+$ds-hex-icon-culture: #227ac3;
 $ds-hex-component-brand: #da000d;
 $ds-hex-component-business: #3a8352;
 $ds-hex-component-primary: #141414;
@@ -57,6 +59,7 @@ $ds-hex-border-focus-02: #141414;
 $ds-hex-border-focus-03: #da000d;
 $ds-hex-border-focus-04: #3a8352;
 $ds-hex-border-brand: #da000d;
+$ds-hex-border-culture: #227ac3;
 $ds-hex-background-primary: #ffffff;
 $ds-hex-static-red-100: #fad4d4;
 $ds-hex-static-black: #141414;

package/foundations/variables/metrics.scss

@@ -1,7 +1,8 @@
 $metrics: (
   border-radius: (
     x1: 2,
-    x2: 4
+    x2: 4,
+    lg: 8
   ),
   border-width: (
     x1: 1,

package/foundations/variables/typographyTokensScreenSmall.scss

@@ -126,7 +126,7 @@ $typographyTokensScreenSmall: (
     fontFamily: "DN Serif Display",
     fontWeight: ExtraBold,
     lineHeight: 1.1,
-    fontSize: 40,
+    fontSize: 36,
     letterSpacing: 0
   ),
   detailteaser-large-opinion: (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "21.1.0-beta.1",
+  "version": "21.1.0-beta.3",
   "description": "DN design system for web.",
   "main": "index.tsx",
   "type": "module",

package/tokens/colors-css-variables.json

@@ -12,6 +12,7 @@
   "text-body-link": "var(--ds-color-text-body-link)",
   "text-body-link-visited": "var(--ds-color-text-body-link-visited)",
   "text-positive": "var(--ds-color-text-positive)",
+  "text-culture": "var(--ds-color-text-culture)",
   "icon-primary": "var(--ds-color-icon-primary)",
   "icon-primary-02": "var(--ds-color-icon-primary-02)",
   "icon-secondary": "var(--ds-color-icon-secondary)",
@@ -22,6 +23,7 @@
   "icon-brand": "var(--ds-color-icon-brand)",
   "icon-on-critical": "var(--ds-color-icon-on-critical)",
   "icon-on-success": "var(--ds-color-icon-on-success)",
+  "icon-culture": "var(--ds-color-icon-culture)",
   "component-brand": "var(--ds-color-component-brand)",
   "component-business": "var(--ds-color-component-business)",
   "component-primary": "var(--ds-color-component-primary)",
@@ -58,6 +60,7 @@
   "border-focus-03": "var(--ds-color-border-focus-03)",
   "border-focus-04": "var(--ds-color-border-focus-04)",
   "border-brand": "var(--ds-color-border-brand)",
+  "border-culture": "var(--ds-color-border-culture)",
   "background-primary": "var(--ds-color-background-primary)",
   "static-red-100": "var(--ds-color-static-red-100)",
   "static-black": "var(--ds-color-static-black)",

package/tokens/colors-dark-mode.json

@@ -12,7 +12,8 @@
     "brand": "#fd2330",
     "body-link": "#65a0fc",
     "body-link-visited": "#65a0fc",
-    "positive": "#3a8352"
+    "positive": "#3a8352",
+    "culture": "#4293d7"
   },
   "icon": {
     "primary": "#ededed",
@@ -24,7 +25,8 @@
     "on-critical": "#ffffff",
     "on-success": "#ffffff",
     "on-business": "#ffffff",
-    "brand": "#fd2330"
+    "brand": "#fd2330",
+    "culture": "#4293d7"
   },
   "component": {
     "brand": "#fd2330",
@@ -66,7 +68,8 @@
     "focus-02": "#ffffff",
     "focus-03": "#fd2330",
     "focus-04": "#3a8352",
-    "brand": "#fd2330"
+    "brand": "#fd2330",
+    "culture": "#4293d7"
   },
   "background": {
     "primary": "#141414"
@@ -100,4 +103,4 @@
     "red-200": "#f6acad",
     "red-0": "#fce8e8"
   }
-}
+}

package/tokens/colors-light-mode.json

@@ -12,7 +12,8 @@
     "brand": "#da000d",
     "body-link": "#4373ce",
     "body-link-visited": "#4373ce",
-    "positive": "#3a8352"
+    "positive": "#3a8352",
+    "culture": "#227ac3"
   },
   "icon": {
     "primary": "#050505",
@@ -24,7 +25,8 @@
     "on-business": "#ffffff",
     "brand": "#da000d",
     "on-critical": "#ffffff",
-    "on-success": "#ffffff"
+    "on-success": "#ffffff",
+    "culture": "#227ac3"
   },
   "component": {
     "brand": "#da000d",
@@ -66,7 +68,8 @@
     "focus-02": "#141414",
     "focus-03": "#da000d",
     "focus-04": "#3a8352",
-    "brand": "#da000d"
+    "brand": "#da000d",
+    "culture": "#227ac3"
   },
   "background": {
     "primary": "#ffffff"
@@ -99,4 +102,4 @@
     "content-fade-up": "linear-gradient(180deg, #ffffff00 0%, #ffffff 100%)",
     "content-fade-down": "linear-gradient(0deg, #ffffff00 0%, #ffffff 100%)"
   }
-}
+}