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

package/types-lib/ds-color.d.ts

@@ -1,105 +1,109 @@
 export enum DsColorEnum {
-  "text-primary" = "text-primary",
-  "text-primary-02" = "text-primary-02",
-  "text-secondary" = "text-secondary",
-  "text-critical" = "text-critical",
-  "text-disabled" = "text-disabled",
-  "text-on-brand" = "text-on-brand",
-  "text-on-business" = "text-on-business",
-  "text-on-critical" = "text-on-critical",
-  "text-on-success" = "text-on-success",
-  "text-brand" = "text-brand",
-  "text-body-link" = "text-body-link",
-  "text-body-link-visited" = "text-body-link-visited",
-  "text-positive" = "text-positive",
-  "text-culture" = "text-culture",
-  "icon-primary" = "icon-primary",
-  "icon-primary-02" = "icon-primary-02",
-  "icon-secondary" = "icon-secondary",
-  "icon-critical" = "icon-critical",
-  "icon-disabled" = "icon-disabled",
-  "icon-on-brand" = "icon-on-brand",
-  "icon-on-business" = "icon-on-business",
-  "icon-brand" = "icon-brand",
-  "icon-on-critical" = "icon-on-critical",
-  "icon-on-success" = "icon-on-success",
-  "icon-culture" = "icon-culture",
-  "component-brand" = "component-brand",
-  "component-business" = "component-business",
-  "component-primary" = "component-primary",
-  "component-primary-overlay" = "component-primary-overlay",
-  "component-primary-overlay-02" = "component-primary-overlay-02",
-  "component-secondary" = "component-secondary",
-  "component-secondary-overlay" = "component-secondary-overlay",
-  "component-secondary-overlay-02" = "component-secondary-overlay-02",
-  "component-critical" = "component-critical",
-  "component-critical-overlay" = "component-critical-overlay",
-  "component-static-white" = "component-static-white",
-  "component-positive" = "component-positive",
-  "component-primary-02" = "component-primary-02",
-  "surface-below" = "surface-below",
-  "surface-native-article" = "surface-native-article",
-  "surface-background" = "surface-background",
-  "surface-raised" = "surface-raised",
-  "surface-elevated" = "surface-elevated",
-  "surface-overlay" = "surface-overlay",
-  "surface-quiz" = "surface-quiz",
-  "surface-korsord" = "surface-korsord",
-  "surface-sudoko" = "surface-sudoko",
+  "surface-foreground" = "surface-foreground",
+  "surface-primary" = "surface-primary",
+  "surface-primary-raised-soft" = "surface-primary-raised-soft",
+  "surface-primary-raised-strong" = "surface-primary-raised-strong",
+  "surface-primary-elevated" = "surface-primary-elevated",
+  "surface-primaryinvert" = "surface-primaryinvert",
+  "surface-primaryinvert-raised-soft" = "surface-primaryinvert-raised-soft",
+  "surface-primaryinvert-elevated" = "surface-primaryinvert-elevated",
   "surface-brand" = "surface-brand",
-  "surface-inverted" = "surface-inverted",
+  "surface-success" = "surface-success",
+  "surface-culture" = "surface-culture",
   "surface-breaking" = "surface-breaking",
+  "surface-overlay" = "surface-overlay",
+  "surface-ad-yellow" = "surface-ad-yellow",
+  "surface-native-article" = "surface-native-article",
+  "surface-quiz" = "surface-quiz",
   "border-primary" = "border-primary",
-  "border-primary-02" = "border-primary-02",
-  "border-primary-03" = "border-primary-03",
-  "border-secondary" = "border-secondary",
-  "border-business" = "border-business",
-  "border-critical" = "border-critical",
-  "border-focus" = "border-focus",
-  "border-focus-02" = "border-focus-02",
-  "border-focus-03" = "border-focus-03",
-  "border-focus-04" = "border-focus-04",
+  "border-primary-strong" = "border-primary-strong",
+  "border-primary-strongest" = "border-primary-strongest",
+  "border-primaryinvert" = "border-primaryinvert",
+  "border-primaryinvert-strong" = "border-primaryinvert-strong",
+  "border-primaryinvert-strongest" = "border-primaryinvert-strongest",
   "border-brand" = "border-brand",
   "border-culture" = "border-culture",
-  "background-primary" = "background-primary",
-  "static-red-100" = "static-red-100",
-  "static-black" = "static-black",
-  "static-transparent-black" = "static-transparent-black",
-  "static-white" = "static-white",
-  "static-transparent-white" = "static-transparent-white",
-  "static-green-100" = "static-green-100",
-  "static-red-300" = "static-red-300",
-  "static-transparent-white-10" = "static-transparent-white-10",
-  "static-kultur" = "static-kultur",
-  "static-economy" = "static-economy",
-  "static-sport" = "static-sport",
-  "static-neutral-200" = "static-neutral-200",
-  "static-sthlm" = "static-sthlm",
-  "static-ad-yellow" = "static-ad-yellow",
-  "static-neutral-100" = "static-neutral-100",
-  "static-neutral-500" = "static-neutral-500",
-  "static-red-500" = "static-red-500",
-  "static-yellow" = "static-yellow",
-  "static-red-200" = "static-red-200",
-  "static-red-0" = "static-red-0",
-  "gradient-content-fade-left" = "gradient-content-fade-left",
-  "gradient-content-fade-right" = "gradient-content-fade-right",
-  "gradient-content-fade-up" = "gradient-content-fade-up",
-  "gradient-content-fade-down" = "gradient-content-fade-down"
+  "text-primary" = "text-primary",
+  "text-primary-subtle" = "text-primary-subtle",
+  "text-primary-disabled" = "text-primary-disabled",
+  "text-primaryinvert" = "text-primaryinvert",
+  "text-primaryinvert-subtle" = "text-primaryinvert-subtle",
+  "text-primaryinvert-disabled" = "text-primaryinvert-disabled",
+  "text-brand" = "text-brand",
+  "text-culture" = "text-culture",
+  "text-critical" = "text-critical",
+  "text-success" = "text-success",
+  "text-on-brand" = "text-on-brand",
+  "text-body-link" = "text-body-link",
+  "text-body-link-visited" = "text-body-link-visited",
+  "gradients-primary-fade-start" = "gradients-primary-fade-start",
+  "gradients-primary-fade-end" = "gradients-primary-fade-end",
+  "brand-0" = "brand-0",
+  "brand-100" = "brand-100",
+  "brand-200" = "brand-200",
+  "brand-300" = "brand-300",
+  "brand-400" = "brand-400",
+  "brand-500" = "brand-500",
+  "brand-600" = "brand-600",
+  "brand-700" = "brand-700",
+  "brand-800" = "brand-800",
+  "brand-900" = "brand-900",
+  "brand-1000" = "brand-1000",
+  "brand-1100" = "brand-1100",
+  "culture-0" = "culture-0",
+  "culture-100" = "culture-100",
+  "culture-200" = "culture-200",
+  "culture-300" = "culture-300",
+  "culture-400" = "culture-400",
+  "culture-500" = "culture-500",
+  "culture-600" = "culture-600",
+  "culture-700" = "culture-700",
+  "culture-800" = "culture-800",
+  "culture-900" = "culture-900",
+  "culture-1000" = "culture-1000",
+  "culture-1100" = "culture-1100",
+  "neutral-100" = "neutral-100",
+  "neutral-200" = "neutral-200",
+  "neutral-300" = "neutral-300",
+  "neutral-400" = "neutral-400",
+  "neutral-500" = "neutral-500",
+  "neutral-600" = "neutral-600",
+  "neutral-700" = "neutral-700",
+  "neutral-800" = "neutral-800",
+  "neutral-900" = "neutral-900",
+  "neutral-1000" = "neutral-1000",
+  "neutral-1100" = "neutral-1100",
+  "neutral-white" = "neutral-white",
+  "neutral-050" = "neutral-050",
+  "neutral-black" = "neutral-black",
+  "bright-neutral-alpha-100" = "bright-neutral-alpha-100",
+  "bright-neutral-alpha-200" = "bright-neutral-alpha-200",
+  "bright-neutral-alpha-300" = "bright-neutral-alpha-300",
+  "bright-neutral-alpha-400" = "bright-neutral-alpha-400",
+  "bright-neutral-alpha-500" = "bright-neutral-alpha-500",
+  "bright-neutral-alpha-050" = "bright-neutral-alpha-050",
+  "dark-neutral-alpha-100" = "dark-neutral-alpha-100",
+  "dark-neutral-alpha-200" = "dark-neutral-alpha-200",
+  "dark-neutral-alpha-300" = "dark-neutral-alpha-300",
+  "dark-neutral-alpha-400" = "dark-neutral-alpha-400",
+  "dark-neutral-alpha-500" = "dark-neutral-alpha-500",
+  "dark-neutral-alpha-050" = "dark-neutral-alpha-050"
 }
 export type DsColor = keyof typeof DsColorEnum;
 
 export enum DsColorIconEnum {
-  "icon-primary" = "icon-primary",
-  "icon-primary-02" = "icon-primary-02",
-  "icon-secondary" = "icon-secondary",
-  "icon-critical" = "icon-critical",
-  "icon-disabled" = "icon-disabled",
-  "icon-on-brand" = "icon-on-brand",
-  "icon-on-business" = "icon-on-business",
-  "icon-brand" = "icon-brand",
-  "icon-on-critical" = "icon-on-critical",
-  "icon-on-success" = "icon-on-success",
-  "icon-culture" = "icon-culture"
+  "text-primary" = "text-primary",
+  "text-primary-subtle" = "text-primary-subtle",
+  "text-primary-disabled" = "text-primary-disabled",
+  "text-primaryinvert" = "text-primaryinvert",
+  "text-primaryinvert-subtle" = "text-primaryinvert-subtle",
+  "text-primaryinvert-disabled" = "text-primaryinvert-disabled",
+  "text-brand" = "text-brand",
+  "text-culture" = "text-culture",
+  "text-critical" = "text-critical",
+  "text-success" = "text-success",
+  "text-on-brand" = "text-on-brand",
+  "text-body-link" = "text-body-link",
+  "text-body-link-visited" = "text-body-link-visited"
 }
 export type DsColorIcon = keyof typeof DsColorIconEnum;

package/variables/colors-dark-mode.json

@@ -0,0 +1,109 @@
+{
+  "surface": {
+    "foreground": "#0d0d0d",
+    "primary": "#050505",
+    "primary-raised-soft": "#121212",
+    "primary-raised-strong": "#1e1e1e",
+    "primary-elevated": "#121212",
+    "primaryinvert": "#ffffff",
+    "primaryinvert-raised-soft": "rgba(5, 5, 5, 0.05)",
+    "primaryinvert-elevated": "#ffffff",
+    "brand": "#da000d",
+    "success": "#3a8352",
+    "culture": "#227ac3",
+    "breaking": "#300407",
+    "overlay": "rgba(5, 5, 5, 0.5)",
+    "ad-yellow": "#ffeac6",
+    "native-article": "#2b2b2b",
+    "quiz": "#ea3e3f"
+  },
+  "border": {
+    "primary": "rgba(255, 255, 255, 0.15)",
+    "primary-strong": "rgba(255, 255, 255, 0.39)",
+    "primary-strongest": "#ffffff",
+    "primaryinvert": "rgba(5, 5, 5, 0.13)",
+    "primaryinvert-strong": "rgba(5, 5, 5, 0.5)",
+    "primaryinvert-strongest": "#050505",
+    "brand": "#fd2330",
+    "culture": "#4293d7"
+  },
+  "text": {
+    "primary": "#e8e8e8",
+    "primary-subtle": "#b2b2b2",
+    "primary-disabled": "#b2b2b2",
+    "primaryinvert": "#050505",
+    "primaryinvert-subtle": "#5a5a5a",
+    "primaryinvert-disabled": "#050505",
+    "brand": "#fd2330",
+    "culture": "#4293d7",
+    "critical": "#fd2330",
+    "success": "#3a8352",
+    "on-brand": "#ffffff",
+    "body-link": "#65a0fc",
+    "body-link-visited": "#65a0fc"
+  },
+  "gradients": {
+    "primary-fade-start": "#050505",
+    "primary-fade-end": "rgba(5, 5, 5, 0)"
+  },
+  "brand": {
+    "0": "#fbf4f4",
+    "100": "#f9eced",
+    "200": "#f2d9da",
+    "300": "#f0c2c4",
+    "400": "#f2888e",
+    "500": "#fd2330",
+    "600": "#da000d",
+    "700": "#af010b",
+    "800": "#85020a",
+    "900": "#5a0308",
+    "1000": "#300407",
+    "1100": "#1a0506"
+  },
+  "culture": {
+    "0": "#f4f7fa",
+    "100": "#eaf0f6",
+    "200": "#cedfee",
+    "300": "#b3cee5",
+    "400": "#88b6dd",
+    "500": "#4293d7",
+    "600": "#227ac3",
+    "700": "#195a8f",
+    "800": "#154b79",
+    "900": "#0e314e",
+    "1000": "#152029",
+    "1100": "#05101a"
+  },
+  "neutral": {
+    "100": "#f2f2f2",
+    "200": "#e8e8e8",
+    "300": "#cdcdcd",
+    "400": "#b2b2b2",
+    "500": "#8c8c8c",
+    "600": "#666666",
+    "700": "#5a5a5a",
+    "800": "#353535",
+    "900": "#1e1e1e",
+    "1000": "#121212",
+    "1100": "#0d0d0d",
+    "white": "#ffffff",
+    "050": "#f8f8f8",
+    "black": "#050505"
+  },
+  "bright-neutral-alpha": {
+    "100": "rgba(5, 5, 5, 0.05)",
+    "200": "rgba(5, 5, 5, 0.13)",
+    "300": "rgba(5, 5, 5, 0.2)",
+    "400": "rgba(5, 5, 5, 0.35)",
+    "500": "rgba(5, 5, 5, 0.5)",
+    "050": "rgba(5, 5, 5, 0.03)"
+  },
+  "dark-neutral-alpha": {
+    "100": "rgba(255, 255, 255, 0.05)",
+    "200": "rgba(255, 255, 255, 0.15)",
+    "300": "rgba(255, 255, 255, 0.19)",
+    "400": "rgba(255, 255, 255, 0.34)",
+    "500": "rgba(255, 255, 255, 0.39)",
+    "050": "rgba(255, 255, 255, 0.03)"
+  }
+}

package/variables/colors-light-mode.json

@@ -0,0 +1,109 @@
+{
+  "surface": {
+    "foreground": "#f8f8f8",
+    "primary": "#ffffff",
+    "primary-raised-soft": "#f2f2f2",
+    "primary-raised-strong": "#e8e8e8",
+    "primary-elevated": "#ffffff",
+    "primaryinvert": "#050505",
+    "primaryinvert-raised-soft": "#ffffff0d",
+    "primaryinvert-elevated": "#121212",
+    "brand": "#da000d",
+    "success": "#3a8352",
+    "culture": "#227ac3",
+    "breaking": "#300407",
+    "overlay": "#05050580",
+    "ad-yellow": "#ffeac6",
+    "native-article": "#ededed",
+    "quiz": "#ea3e3f"
+  },
+  "border": {
+    "primary": "#05050521",
+    "primary-strong": "#05050580",
+    "primary-strongest": "#050505",
+    "primaryinvert": "#ffffff26",
+    "primaryinvert-strong": "#ffffff63",
+    "primaryinvert-strongest": "#ffffff",
+    "brand": "#da000d",
+    "culture": "#227ac3"
+  },
+  "text": {
+    "primary": "#050505",
+    "primary-subtle": "#5a5a5a",
+    "primary-disabled": "#5a5a5a",
+    "primaryinvert": "#f2f2f2",
+    "primaryinvert-subtle": "#b2b2b2",
+    "primaryinvert-disabled": "#f2f2f2",
+    "brand": "#da000d",
+    "culture": "#227ac3",
+    "critical": "#da000d",
+    "success": "#3a8352",
+    "on-brand": "#ffffff",
+    "body-link": "#4373ce",
+    "body-link-visited": "#4373ce"
+  },
+  "gradients": {
+    "primary-fade-start": "#ffffff",
+    "primary-fade-end": "#ffffff00"
+  },
+  "brand": {
+    "0": "#fbf4f4",
+    "100": "#f9eced",
+    "200": "#f2d9da",
+    "300": "#f0c2c4",
+    "400": "#f2888e",
+    "500": "#fd2330",
+    "600": "#da000d",
+    "700": "#af010b",
+    "800": "#85020a",
+    "900": "#5a0308",
+    "1000": "#300407",
+    "1100": "#1a0506"
+  },
+  "culture": {
+    "0": "#f4f7fa",
+    "100": "#eaf0f6",
+    "200": "#cedfee",
+    "300": "#b3cee5",
+    "400": "#88b6dd",
+    "500": "#4293d7",
+    "600": "#227ac3",
+    "700": "#195a8f",
+    "800": "#154b79",
+    "900": "#0e314e",
+    "1000": "#152029",
+    "1100": "#05101a"
+  },
+  "neutral": {
+    "100": "#f2f2f2",
+    "200": "#e8e8e8",
+    "300": "#cdcdcd",
+    "400": "#b2b2b2",
+    "500": "#8c8c8c",
+    "600": "#666666",
+    "700": "#5a5a5a",
+    "800": "#353535",
+    "900": "#1e1e1e",
+    "1000": "#121212",
+    "1100": "#0d0d0d",
+    "white": "#ffffff",
+    "050": "#f8f8f8",
+    "black": "#050505"
+  },
+  "bright-neutral-alpha": {
+    "100": "#0505050d",
+    "200": "#05050521",
+    "300": "#05050533",
+    "400": "#05050559",
+    "500": "#05050580",
+    "050": "#05050508"
+  },
+  "dark-neutral-alpha": {
+    "100": "#ffffff0d",
+    "200": "#ffffff26",
+    "300": "#ffffff30",
+    "400": "#ffffff57",
+    "500": "#ffffff63",
+    "050": "#ffffff08"
+  }
+}

package/variables/gradients-dark-mode.json

@@ -0,0 +1,58 @@
+{
+  "content-fade-left": {
+    "type": "linear",
+    "angle": 270,
+    "stops": [
+      {
+        "color": "#050505",
+        "position": 0
+      },
+      {
+        "color": "rgba(5, 5, 5, 0)",
+        "position": 1
+      }
+    ]
+  },
+  "content-fade-right": {
+    "type": "linear",
+    "angle": 270,
+    "stops": [
+      {
+        "color": "rgba(5, 5, 5, 0)",
+        "position": 0
+      },
+      {
+        "color": "#050505",
+        "position": 1
+      }
+    ]
+  },
+  "content-fade-up": {
+    "type": "linear",
+    "angle": 180,
+    "stops": [
+      {
+        "color": "rgba(5, 5, 5, 0)",
+        "position": 0
+      },
+      {
+        "color": "#050505",
+        "position": 1
+      }
+    ]
+  },
+  "content-fade-down": {
+    "type": "linear",
+    "angle": 180,
+    "stops": [
+      {
+        "color": "#050505",
+        "position": 0
+      },
+      {
+        "color": "rgba(5, 5, 5, 0)",
+        "position": 1
+      }
+    ]
+  }
+}

package/variables/gradients-light-mode.json

@@ -0,0 +1,58 @@
+{
+  "content-fade-left": {
+    "type": "linear",
+    "angle": 270,
+    "stops": [
+      {
+        "color": "#ffffff",
+        "position": 0
+      },
+      {
+        "color": "rgba(255, 255, 255, 0)",
+        "position": 1
+      }
+    ]
+  },
+  "content-fade-right": {
+    "type": "linear",
+    "angle": 270,
+    "stops": [
+      {
+        "color": "rgba(255, 255, 255, 0)",
+        "position": 0
+      },
+      {
+        "color": "#ffffff",
+        "position": 1
+      }
+    ]
+  },
+  "content-fade-up": {
+    "type": "linear",
+    "angle": 180,
+    "stops": [
+      {
+        "color": "rgba(255, 255, 255, 0)",
+        "position": 0
+      },
+      {
+        "color": "#ffffff",
+        "position": 1
+      }
+    ]
+  },
+  "content-fade-down": {
+    "type": "linear",
+    "angle": 180,
+    "stops": [
+      {
+        "color": "#ffffff",
+        "position": 0
+      },
+      {
+        "color": "rgba(255, 255, 255, 0)",
+        "position": 1
+      }
+    ]
+  }
+}

package/variables/typography-list.json

@@ -0,0 +1,56 @@
+{
+  "expressive-heading-xxs": "'expressive-heading-xxs'",
+  "expressive-heading-xs": "'expressive-heading-xs'",
+  "expressive-heading-sm": "'expressive-heading-sm'",
+  "expressive-heading-md": "'expressive-heading-md'",
+  "expressive-heading-lg": "'expressive-heading-lg'",
+  "expressive-heading-xl": "'expressive-heading-xl'",
+  "expressive-body-sm": "'expressive-body-sm'",
+  "expressive-body-md": "'expressive-body-md'",
+  "expressive-body-lg": "'expressive-body-lg'",
+  "expressive-ingress-sm": "'expressive-ingress-sm'",
+  "expressive-ingress-md": "'expressive-ingress-md'",
+  "functional-heading-xxs": "'functional-heading-xxs'",
+  "functional-heading-xs": "'functional-heading-xs'",
+  "functional-heading-sm": "'functional-heading-sm'",
+  "functional-heading-md": "'functional-heading-md'",
+  "functional-heading-lg": "'functional-heading-lg'",
+  "functional-heading-xl": "'functional-heading-xl'",
+  "functional-label-sm": "'functional-label-sm'",
+  "functional-label-md": "'functional-label-md'",
+  "functional-body-sm": "'functional-body-sm'",
+  "functional-body-md": "'functional-body-md'",
+  "functional-body-lg": "'functional-body-lg'",
+  "functional-meta-sm": "'functional-meta-sm'",
+  "functional-meta-md": "'functional-meta-md'",
+  "functional-ingress-sm": "'functional-ingress-sm'",
+  "functional-ingress-md": "'functional-ingress-md'",
+  "detail-dropcap": "'detail-dropcap'",
+  "detail-gameheader": "'detail-gameheader'",
+  "detail-medryckare": "'detail-medryckare'",
+  "detail-mellanrubrik": "'detail-mellanrubrik'",
+  "detail-direkt-header": "'detail-direkt-header'",
+  "detail-teaser-standard": "'detail-teaser-standard'",
+  "detail-teaser-standard-opinion": "'detail-teaser-standard-opinion'",
+  "detail-teaser-standard-compact": "'detail-teaser-standard-compact'",
+  "detail-teaser-standard-compact-opinion": "'detail-teaser-standard-compact-opinion'",
+  "detail-teaser-large": "'detail-teaser-large'",
+  "detail-teaser-large-compact": "'detail-teaser-large-compact'",
+  "detail-teaser-storrubrik-opinion": "'detail-teaser-storrubrik-opinion'",
+  "detail-teaser-storrubrik": "'detail-teaser-storrubrik'",
+  "detail-teaser-twin": "'detail-teaser-twin'",
+  "detail-teaser-tipsa": "'detail-teaser-tipsa'",
+  "detail-teaser-baotaxl": "'detail-teaser-baotaxl'",
+  "detail-teaser-longlife": "'detail-teaser-longlife'",
+  "detail-teaser-breaking": "'detail-teaser-breaking'",
+  "detail-teaser-large-opinion": "'detail-teaser-large-opinion'",
+  "detail-teaser-story": "'detail-teaser-story'",
+  "detail-teaser-large-rightcol": "'detail-teaser-large-rightcol'",
+  "detail-article-standard": "'detail-article-standard'",
+  "detail-article-opinion": "'detail-article-opinion'",
+  "detail-article-longread": "'detail-article-longread'",
+  "detail-article-longread-premium": "'detail-article-longread-premium'",
+  "detail-article-direkt": "'detail-article-direkt'",
+  "detail-article-direct-opinion": "'detail-article-direct-opinion'",
+  "detail-article-quote": "'detail-article-quote'"
+}