@bonniernews/dn-design-system-web 3.0.0-alpha.99 → 4.0.0-alpha.1

package/foundations/variables/typographyTokensScreenSmall.scss

@@ -1,24 +1,24 @@
 $typographyTokensScreenSmall: (
   expressive-heading01regular: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Text",
     fontWeight: Regular,
     fontSize: 16,
     lineHeight: 20
   ),
   expressive-heading01semibold: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Text",
     fontWeight: SemiBold,
     fontSize: 16,
     lineHeight: 20
   ),
   expressive-heading01bold: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Text",
     fontWeight: Bold,
     fontSize: 16,
     lineHeight: 20
   ),
   expressive-heading01italicregular: (
-    fontFamily: "DN Serif Italic",
+    fontFamily: "DN Serif Text",
     fontWeight: Regular,
     fontSize: 16,
     letterSpacing: "",
@@ -26,7 +26,7 @@ $typographyTokensScreenSmall: (
     fontStyle: italic
   ),
   expressive-heading01italicsemibold: (
-    fontFamily: "DN Serif Italic",
+    fontFamily: "DN Serif Text",
     fontWeight: SemiBold,
     fontSize: 16,
     letterSpacing: "",
@@ -34,7 +34,7 @@ $typographyTokensScreenSmall: (
     fontStyle: italic
   ),
   expressive-heading01italicbold: (
-    fontFamily: "DN Serif Italic",
+    fontFamily: "DN Serif Text",
     fontWeight: Bold,
     fontSize: 16,
     letterSpacing: "",
@@ -42,58 +42,58 @@ $typographyTokensScreenSmall: (
     fontStyle: italic
   ),
   expressive-heading02regular: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Text",
     fontWeight: Regular,
     fontSize: 17,
     lineHeight: 21
   ),
   expressive-heading02semibold: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Text",
     fontWeight: SemiBold,
     fontSize: 17,
     lineHeight: 21
   ),
   expressive-heading02bold: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Text",
     fontWeight: Bold,
     fontSize: 17,
     lineHeight: 21
   ),
   expressive-heading02italicregular: (
-    fontFamily: "DN Serif Italic",
+    fontFamily: "DN Serif Text",
     fontWeight: Regular,
     fontSize: 17,
     lineHeight: 21,
     fontStyle: italic
   ),
   expressive-heading02italicsemibold: (
-    fontFamily: "DN Serif Italic",
+    fontFamily: "DN Serif Text",
     fontWeight: SemiBold,
     fontSize: 17,
     lineHeight: 21,
     fontStyle: italic
   ),
   expressive-heading02italicbold: (
-    fontFamily: "DN Serif Italic",
+    fontFamily: "DN Serif Text",
     fontWeight: Bold,
     fontSize: 17,
     lineHeight: 21,
     fontStyle: italic
   ),
   expressive-heading03regular: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Headline",
     fontWeight: Regular,
     fontSize: 20,
     lineHeight: 24
   ),
   expressive-heading03semibold: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Headline",
     fontWeight: SemiBold,
     fontSize: 20,
     lineHeight: 24
   ),
   expressive-heading03bold: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Headline",
     fontWeight: Bold,
     fontSize: 20,
     lineHeight: 24
@@ -102,98 +102,98 @@ $typographyTokensScreenSmall: (
     fontSize: 22,
     lineHeight: 26,
     fontWeight: Regular,
-    fontFamily: "DN Serif Italic",
+    fontFamily: "DN Serif Headline",
     fontStyle: italic
   ),
   expressive-heading03italicsemibold: (
     fontSize: 22,
     lineHeight: 26,
     fontWeight: SemiBold,
-    fontFamily: "DN Serif Italic",
+    fontFamily: "DN Serif Headline",
     fontStyle: italic
   ),
   expressive-heading03italicbold: (
     fontSize: 22,
     lineHeight: 26,
     fontWeight: Bold,
-    fontFamily: "DN Serif Italic",
+    fontFamily: "DN Serif Headline",
     fontStyle: italic
   ),
   expressive-heading04regular: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Headline",
     fontWeight: Regular,
     fontSize: 26,
     lineHeight: 30
   ),
   expressive-heading04semibold: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Headline",
     fontWeight: SemiBold,
     fontSize: 26,
     lineHeight: 30
   ),
   expressive-heading04bold: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Headline",
     fontWeight: Bold,
     fontSize: 26,
     lineHeight: 30
   ),
   expressive-heading04italicregular: (
-    fontFamily: "DN Serif Italic",
+    fontFamily: "DN Serif Headline",
     fontWeight: Regular,
     lineHeight: 30,
     fontSize: 26,
     fontStyle: italic
   ),
   expressive-heading04italicsemibold: (
-    fontFamily: "DN Serif Italic",
+    fontFamily: "DN Serif Headline",
     fontWeight: SemiBold,
     lineHeight: 30,
     fontSize: 26,
     fontStyle: italic
   ),
   expressive-heading04italicbold: (
-    fontFamily: "DN Serif Italic",
+    fontFamily: "DN Serif Headline",
     fontWeight: Bold,
     lineHeight: 30,
     fontSize: 26,
     fontStyle: italic
   ),
   expressive-heading05regular: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Display",
     fontWeight: Regular,
     lineHeight: 36,
     fontSize: 32,
     letterSpacing: ""
   ),
   expressive-heading05semibold: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Display",
     fontWeight: SemiBold,
     lineHeight: 36,
     fontSize: 32
   ),
   expressive-heading05bold: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Display",
     fontWeight: Bold,
     lineHeight: 36,
     fontSize: 32,
     letterSpacing: ""
   ),
   expressive-heading05italicregular: (
-    fontFamily: "DN Serif Italic",
+    fontFamily: "DN Serif Display",
     fontWeight: Regular,
     lineHeight: 36,
     fontSize: 32,
     fontStyle: italic
   ),
   expressive-heading05italicsemibold: (
-    fontFamily: "DN Serif Italic",
+    fontFamily: "DN Serif Display",
     fontWeight: SemiBold,
     lineHeight: 36,
     fontSize: 32,
     fontStyle: italic
   ),
   expressive-heading05italicbold: (
-    fontFamily: "DN Serif Italic",
+    fontFamily: "DN Serif Display",
     fontWeight: Bold,
     lineHeight: 36,
     fontSize: 32,
@@ -290,118 +290,118 @@ $typographyTokensScreenSmall: (
     lineHeight: 48
   ),
   expressive-preamble01regular: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Text",
     fontWeight: Regular,
     fontSize: 18,
     lineHeight: 26
   ),
   expressive-preamble01semibold: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Text",
     fontWeight: SemiBold,
     fontSize: 18,
     lineHeight: 26
   ),
   expressive-preamble01bold: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Text",
     fontWeight: Bold,
     fontSize: 18,
     lineHeight: 26
   ),
   expressive-preamble01italicregular: (
-    fontFamily: "DN Serif Italic",
+    fontFamily: "DN Serif Text",
     fontWeight: Regular,
     fontSize: 18,
     lineHeight: 26,
     fontStyle: italic
   ),
   expressive-preamble01italicsemibold: (
-    fontFamily: "DN Serif Italic",
+    fontFamily: "DN Serif Text",
     fontWeight: SemiBold,
     fontSize: 18,
     lineHeight: 26,
     fontStyle: italic
   ),
   expressive-preamble01italicbold: (
-    fontFamily: "DN Serif Italic",
+    fontFamily: "DN Serif Text",
     fontWeight: Bold,
     fontSize: 18,
     lineHeight: 26,
     fontStyle: italic
   ),
   expressive-body01regular: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Text",
     fontWeight: Regular,
     fontSize: 16,
     lineHeight: 24
   ),
   expressive-body01semibold: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Text",
     fontWeight: SemiBold,
     fontSize: 16,
     lineHeight: 24
   ),
   expressive-body01bold: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Text",
     fontWeight: Bold,
     fontSize: 16,
     lineHeight: 24
   ),
   expressive-body01italicregular: (
-    fontFamily: "DN Serif Italic",
+    fontFamily: "DN Serif Text",
     fontWeight: Regular,
     lineHeight: 24,
     fontSize: 16,
     fontStyle: italic
   ),
   expressive-body01italicsemibold: (
-    fontFamily: "DN Serif Italic",
+    fontFamily: "DN Serif Text",
     fontWeight: SemiBold,
     lineHeight: 24,
     fontSize: 16,
     fontStyle: italic
   ),
   expressive-body01italicbold: (
-    fontFamily: "DN Serif Italic",
+    fontFamily: "DN Serif Text",
     fontWeight: Bold,
     lineHeight: 24,
     fontSize: 16,
     fontStyle: italic
   ),
   expressive-body02regular: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Text",
     fontWeight: Regular,
     lineHeight: 28,
     fontSize: 18,
     paragraphSpacing: 16
   ),
   expressive-body02semibold: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Text",
     fontWeight: SemiBold,
     lineHeight: 28,
     fontSize: 18
   ),
   expressive-body02bold: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Text",
     fontWeight: Bold,
     lineHeight: 28,
     fontSize: 18
   ),
   expressive-body02italicregular: (
-    fontFamily: "DN Serif Italic",
+    fontFamily: "DN Serif Text",
     fontWeight: Regular,
     lineHeight: 28,
     fontSize: 18,
     fontStyle: italic
   ),
   expressive-body02italicsemibold: (
-    fontFamily: "DN Serif Italic",
+    fontFamily: "DN Serif Text",
     fontWeight: SemiBold,
     lineHeight: 28,
     fontSize: 18,
     fontStyle: italic
   ),
   expressive-body02italicbold: (
-    fontFamily: "DN Serif Italic",
+    fontFamily: "DN Serif Text",
     fontWeight: Bold,
     lineHeight: 28,
     fontSize: 18,
@@ -515,7 +515,7 @@ $typographyTokensScreenSmall: (
     letterSpacing: 0.2
   ),
   detaildropcap: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Display",
     lineHeight: 52,
     fontSize: 52,
     fontWeight: Bold
@@ -535,7 +535,7 @@ $typographyTokensScreenSmall: (
     letterSpacing: 0.5
   ),
   detailmedryckare: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Text",
     fontWeight: Regular,
     fontSize: 16,
     lineHeight: 22
@@ -549,34 +549,40 @@ $typographyTokensScreenSmall: (
     letterSpacing: 0.7
   ),
   detailarticle-standard: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Headline",
     fontWeight: Bold,
     lineHeight: 32,
     fontSize: 26
   ),
   detailarticle-opinion: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Headline",
     fontWeight: Regular,
     lineHeight: 32,
     fontSize: 26,
     fontStyle: italic
   ),
   detailarticle-longread: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Display",
     fontWeight: Regular,
     lineHeight: 36,
     fontSize: 32
   ),
   detailarticle-longread-premium: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Display",
     fontWeight: Bold,
     lineHeight: 36,
     fontSize: 32
   ),
   detailarticle-quote: (
-    fontFamily: "DN Serif",
+    fontFamily: "DN Serif Headline",
     fontWeight: Bold,
     lineHeight: 24,
     fontSize: 20
+  ),
+  detailmellanrubrik: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: Bold,
+    fontSize: 20,
+    lineHeight: 24
   )
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "3.0.0-alpha.99",
+  "version": "4.0.0-alpha.1",
   "description": "DN design system for web.",
   "main": "index.js",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",
@@ -11,18 +11,20 @@
   },
   "author": "Bonnier News AB",
   "license": "MIT",
-  "scripts": {},
   "bugs": {
     "url": "https://github.com/BonnierNews/dn-design-system/issues"
   },
   "devDependencies": {
-    "postcss": "8",
-    "stylelint": "^14.14.0",
-    "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-standard": "^29.0.0",
-    "stylelint-config-standard-scss": "^7.0.1",
-    "stylelint-prettier": "^2.0.0",
-    "stylelint-sass-render-errors": "^3.0.0",
+    "postcss": "8.4.23",
+    "stylelint": "^15.6.2",
+    "stylelint-config-prettier": "^9.0.5",
+    "stylelint-config-standard": "^33.0.0",
+    "stylelint-config-standard-scss": "^9.0.0",
+    "stylelint-prettier": "^3.0.0",
+    "stylelint-sass-render-errors": "^3.0.1",
     "stylelint-selector-bem-pattern": "^2.1.1"
+  },
+  "scripts": {
+    "lint:styles": "yarn stylelint \"**/*.scss\" \"!node_modules/\""
   }
 }

package/tokens/colors-dark-mode.json

@@ -0,0 +1,93 @@
+{
+  "text": {
+    "primary": "#EDEDED",
+    "primary-02": "#B8B8B8",
+    "secondary": "#050505",
+    "critical": "#EF7171",
+    "disabled": "#B8B8B8",
+    "on-brand": "#141414",
+    "on-business": "#ffffff",
+    "on-critical": "#ffffff",
+    "on-success": "#ffffff",
+    "brand": "#EF7171",
+    "body-link": "#65A0FC",
+    "body-link-visited": "#65A0FC",
+    "positive": "#3A8352"
+  },
+  "icon": {
+    "primary": "#EDEDED",
+    "primary-02": "#CFCFCF",
+    "secondary": "#050505",
+    "critical": "#EF7171",
+    "disabled": "#B8B8B8",
+    "on-brand": "#ffffff",
+    "on-critical": "#ffffff",
+    "on-success": "#ffffff",
+    "on-business": "#ffffff",
+    "brand": "#EF7171"
+  },
+  "component": {
+    "brand": "#EF7171",
+    "business": "#3A8352",
+    "primary": "#EDEDED",
+    "primary-overlay": "#ffffff1a",
+    "primary-overlay-02": "#9E9E9E",
+    "secondary": "#141414",
+    "secondary-overlay": "#0808081a",
+    "secondary-overlay-02": "#08080833",
+    "critical": "#EF7171",
+    "critical-overlay": "#A51D24",
+    "static-white": "#ffffff",
+    "positive": "#3A8352",
+    "primary-02": "#CFCFCF"
+  },
+  "surface": {
+    "below": "#050505",
+    "background": "#141414",
+    "raised": "#2B2B2B",
+    "native-article": "#2B2B2B",
+    "elevated": "#2B2B2B"
+  },
+  "border": {
+    "primary": "#ffffff1a",
+    "primary-02": "#ffffff66",
+    "primary-03": "#EDEDED",
+    "secondary": "#141414",
+    "business": "#3A8352",
+    "critical": "#EF7171",
+    "focus": "#EF7171",
+    "focus-02": "#ffffff",
+    "focus-03": "#EF7171",
+    "focus-04": "#3A8352"
+  },
+  "background": {
+    "primary": "#141414"
+  },
+  "gradient": {
+    "content-fade-left": "linear-gradient(90deg, #14141400 0%, #141414 100%)",
+    "content-fade-right": "linear-gradient(-90deg, #14141400 0%, #141414 100%)",
+    "content-fade-up": "linear-gradient(180deg, #14141400 0%, #141414 100%)",
+    "content-fade-up-down": "linear-gradient(0deg, #14141400 0%, #141414 100%)",
+    "content-fade-down": "linear-gradient(0deg, #14141400 0%, #141414 100%)"
+  },
+  "static": {
+    "red-200": "#FAD4D4",
+    "black": "#141414",
+    "transparent-black": "#14141480",
+    "white": "#ffffff",
+    "transparent-white": "#ffffff80",
+    "green-100": "#CEE4D6",
+    "red-300": "#EF7171",
+    "transparent-white-10": "#ffffff1a",
+    "kultur": "#568CBB",
+    "economy": "#60BCA1",
+    "sport": "#F58D2D",
+    "neutral-200": "#E0E0E0",
+    "sthlm": "#FF589B",
+    "ad-yellow": "#FFEAC2",
+    "neutral-100": "#EDEDED",
+    "neutral-500": "#9E9E9E",
+    "red-500": "#DA000D",
+    "yellow": "#FFE600"
+  }
+}

package/tokens/colors-light-mode.json

@@ -0,0 +1,92 @@
+{
+  "text": {
+    "primary": "#050505",
+    "primary-02": "#666666",
+    "secondary": "#ffffff",
+    "critical": "#DA000D",
+    "disabled": "#666666",
+    "on-brand": "#ffffff",
+    "on-business": "#ffffff",
+    "on-critical": "#ffffff",
+    "on-success": "#ffffff",
+    "brand": "#DA000D",
+    "body-link": "#4373CE",
+    "body-link-visited": "#4373CE",
+    "positive": "#3A8352"
+  },
+  "icon": {
+    "primary": "#050505",
+    "primary-02": "#666666",
+    "secondary": "#ffffff",
+    "critical": "#DA000D",
+    "disabled": "#666666",
+    "on-brand": "#ffffff",
+    "on-business": "#ffffff",
+    "brand": "#DA000D",
+    "on-critical": "#ffffff",
+    "on-success": "#ffffff"
+  },
+  "component": {
+    "brand": "#DA000D",
+    "business": "#3A8352",
+    "primary": "#141414",
+    "primary-overlay": "#0808081a",
+    "primary-overlay-02": "#08080833",
+    "secondary": "#ffffff",
+    "secondary-overlay": "#ffffff1a",
+    "secondary-overlay-02": "#ffffff33",
+    "critical": "#EA3E3F",
+    "critical-overlay": "#A51D24",
+    "static-white": "#ffffff",
+    "positive": "#3A8352",
+    "primary-02": "#CFCFCF"
+  },
+  "surface": {
+    "below": "#EDEDED",
+    "native-article": "#EDEDED",
+    "background": "#ffffff",
+    "raised": "#EDEDED",
+    "elevated": "#ffffff"
+  },
+  "border": {
+    "primary": "#0808081a",
+    "primary-02": "#08080866",
+    "primary-03": "#050505",
+    "secondary": "#ffffff",
+    "business": "#3A8352",
+    "critical": "#DA000D",
+    "focus": "#DA000D",
+    "focus-02": "#141414",
+    "focus-03": "#DA000D",
+    "focus-04": "#3A8352"
+  },
+  "background": {
+    "primary": "#ffffff"
+  },
+  "static": {
+    "red-200": "#FAD4D4",
+    "black": "#141414",
+    "transparent-black": "#14141480",
+    "white": "#ffffff",
+    "transparent-white": "#ffffff80",
+    "green-100": "#CEE4D6",
+    "red-300": "#EF7171",
+    "transparent-white-10": "#ffffff1a",
+    "kultur": "#568CBB",
+    "economy": "#60BCA1",
+    "sport": "#F58D2D",
+    "neutral-200": "#E0E0E0",
+    "sthlm": "#FF589B",
+    "ad-yellow": "#FFEAC2",
+    "neutral-100": "#EDEDED",
+    "neutral-500": "#9E9E9E",
+    "red-500": "#DA000D",
+    "yellow": "#FFE600"
+  },
+  "gradient": {
+    "content-fade-left": "linear-gradient(90deg, #ffffff00 0%, #ffffff 100%)",
+    "content-fade-right": "linear-gradient(-90deg, #ffffff00 0%, #ffffff 100%)",
+    "content-fade-up": "linear-gradient(180deg, #ffffff00 0%, #ffffff 100%)",
+    "content-fade-down": "linear-gradient(0deg, #ffffff00 0%, #ffffff 100%)"
+  }
+}