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

package/react/components.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../index.tsx", "../components/divider/divider.tsx", "../components/thematic-break/thematic-break.tsx", "../components/quote/quote.tsx"],
-  "sourcesContent": ["import { Divider } from \"./components/divider/divider\";\nexport { Divider };\n\nimport { ThematicBreak } from \"./components/thematic-break/thematic-break\";\nexport { ThematicBreak };\n\nimport { Quote } from \"./components/quote/quote\";\nexport { Quote };\n", "export interface DividerProps {\n  variant?: 'soft' | 'medium' | 'hard';\n  classNames?: string;\n  attributes?: object;\n}\n\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n  const componentClassName = 'ds-divider';\n  const classNamePrefix = `${componentClassName}--`;\n  const classes = [\n    componentClassName,\n    `${classNamePrefix}${variant}`,\n    classNames\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default Divider;\n", "export interface ThematicBreakProps {\n  classNames?: string;\n  attributes?: object;\n}\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n  const componentClassName = 'ds-thematic-break';\n  const classes = [\n    componentClassName,\n    classNames\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default ThematicBreak;\n", "export interface QuoteProps {\n  bodyHtml: string;\n  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n  classNames?: string;\n  attributes?: object;\n  forcePx?: boolean;\n}\n\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n  const componentClassName = 'ds-quote';\n  const classes = [\n    componentClassName,\n    `ds-theme--${theme}`,\n    forcePx && 'ds-force-px',\n    classNames\n  ].filter(Boolean).join(' ');\n\n  const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n  return (\n    <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACgB6C;AAVtC,IAAM,UAAU,CAAC,EAAE,UAAU,QAAQ,YAAY,WAAW,MAAoB;AACrF,QAAM,qBAAqB;AAC3B,QAAM,kBAAkB,GAAG,kBAAkB;AAC7C,QAAM,UAAU;AAAA,IACd;AAAA,IACA,GAAG,eAAe,GAAG,OAAO;AAAA,IAC5B;AAAA,EACF,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SACE,4CAAC,SAAI,WAAW,SAAU,GAAG,YAAY,sDAAC,QAAG,GAAE;AAEnD;;;ACL6C,IAAAA,sBAAA;AARtC,IAAM,gBAAgB,CAAC,EAAE,YAAY,WAAW,MAA0B;AAC/E,QAAM,qBAAqB;AAC3B,QAAM,UAAU;AAAA,IACd;AAAA,IACA;AAAA,EACF,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SACE,6CAAC,SAAI,WAAW,SAAU,GAAG,YAAY,uDAAC,QAAG,GAAE;AAEnD;;;ACKI,IAAAC,sBAAA;AAZG,IAAM,QAAQ,CAAC,EAAE,UAAU,QAAQ,WAAW,YAAY,YAAY,QAAQ,MAAkB;AACrG,QAAM,qBAAqB;AAC3B,QAAM,UAAU;AAAA,IACd;AAAA,IACA,aAAa,KAAK;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,EACF,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,QAAM,YAAY,gBAAgB,kBAAkB,qBAAqB,QAAQ;AAEjF,SACE,6CAAC,gBAAW,yBAAyB,EAAE,QAAQ,UAAU,GAAG,WAAW,SAAU,GAAG,YAAY;AAEpG;",
+  "sources": ["../index.tsx", "../helpers/formatClassString.ts", "../components/divider/divider.tsx", "../components/thematic-break/thematic-break.tsx", "../components/quote/quote.tsx"],
+  "sourcesContent": ["import { Divider } from \"./components/divider/divider\";\nexport { Divider };\n\nimport { ThematicBreak } from \"./components/thematic-break/thematic-break\";\nexport { ThematicBreak };\n\nimport { Quote } from \"./components/quote/quote\";\nexport { Quote };\n", "export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n  return classesArray.filter(x => !!x).join(' ');\n}\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface DividerProps {\n  variant?: 'soft' | 'medium' | 'hard';\n  classNames?: string;\n  attributes?: object;\n}\n\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n  const classes = formatClassString([\n    'ds-divider',\n    `ds-divider--${variant}`,\n    classNames\n  ])\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default Divider;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface ThematicBreakProps {\n  classNames?: string;\n  attributes?: object;\n}\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n  const classes = formatClassString([\n    'ds-thematic-break',\n    classNames\n  ])\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default ThematicBreak;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface QuoteProps {\n  bodyHtml: string;\n  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n  classNames?: string;\n   /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object;\n  forcePx?: boolean;\n}\n\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n  const componentClassName = 'ds-quote';\n\n  const classes = formatClassString([\n    componentClassName,\n    `ds-theme--${theme}`,\n    forcePx && 'ds-force-px',\n    classNames,\n  ])\n\n  const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n  return (\n    <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;ACc6C;AARtC,IAAM,UAAU,CAAC,EAAE,UAAU,QAAQ,YAAY,WAAW,MAAoB;AACrF,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,eAAe,OAAO;AAAA,IACtB;AAAA,EACF,CAAC;AAED,SACE,4CAAC,SAAI,WAAW,SAAU,GAAG,YAAY,sDAAC,QAAG,GAAE;AAEnD;;;ACJ6C,IAAAA,sBAAA;AAPtC,IAAM,gBAAgB,CAAC,EAAE,YAAY,WAAW,MAA0B;AAC/E,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,6CAAC,SAAI,WAAW,SAAU,GAAG,YAAY,uDAAC,QAAG,GAAE;AAEnD;;;ACQI,IAAAC,sBAAA;AAbG,IAAM,QAAQ,CAAC,EAAE,UAAU,QAAQ,WAAW,YAAY,YAAY,QAAQ,MAAkB;AACrG,QAAM,qBAAqB;AAE3B,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,aAAa,KAAK;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,EACF,CAAC;AAED,QAAM,YAAY,gBAAgB,kBAAkB,qBAAqB,QAAQ;AAEjF,SACE,6CAAC,gBAAW,yBAAyB,EAAE,QAAQ,UAAU,GAAG,WAAW,SAAU,GAAG,YAAY;AAEpG;",
   "names": ["import_jsx_runtime", "import_jsx_runtime"]
 }

package/react/components.esm.js

@@ -1,24 +1,26 @@
+// ../src/helpers/formatClassString.ts
+var formatClassString = (classesArray) => {
+  return classesArray.filter((x) => !!x).join(" ");
+};
+
 // ../src/components/divider/divider.tsx
 import { jsx } from "react/jsx-runtime";
 var Divider = ({ variant = "soft", classNames, attributes }) => {
-  const componentClassName = "ds-divider";
-  const classNamePrefix = `${componentClassName}--`;
-  const classes = [
-    componentClassName,
-    `${classNamePrefix}${variant}`,
+  const classes = formatClassString([
+    "ds-divider",
+    `ds-divider--${variant}`,
     classNames
-  ].filter(Boolean).join(" ");
+  ]);
   return /* @__PURE__ */ jsx("div", { className: classes, ...attributes, children: /* @__PURE__ */ jsx("hr", {}) });
 };
 
 // ../src/components/thematic-break/thematic-break.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var ThematicBreak = ({ classNames, attributes }) => {
-  const componentClassName = "ds-thematic-break";
-  const classes = [
-    componentClassName,
+  const classes = formatClassString([
+    "ds-thematic-break",
     classNames
-  ].filter(Boolean).join(" ");
+  ]);
   return /* @__PURE__ */ jsx2("div", { className: classes, ...attributes, children: /* @__PURE__ */ jsx2("hr", {}) });
 };
 
@@ -26,12 +28,12 @@ var ThematicBreak = ({ classNames, attributes }) => {
 import { jsx as jsx3 } from "react/jsx-runtime";
 var Quote = ({ bodyHtml, theme = "nyheter", classNames, attributes, forcePx }) => {
   const componentClassName = "ds-quote";
-  const classes = [
+  const classes = formatClassString([
     componentClassName,
     `ds-theme--${theme}`,
     forcePx && "ds-force-px",
     classNames
-  ].filter(Boolean).join(" ");
+  ]);
   const quoteHtml = `<span class="${componentClassName}__border"></span> ${bodyHtml}`;
   return /* @__PURE__ */ jsx3("blockquote", { dangerouslySetInnerHTML: { __html: quoteHtml }, className: classes, ...attributes });
 };

package/react/components.esm.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../components/divider/divider.tsx", "../components/thematic-break/thematic-break.tsx", "../components/quote/quote.tsx"],
-  "sourcesContent": ["export interface DividerProps {\n  variant?: 'soft' | 'medium' | 'hard';\n  classNames?: string;\n  attributes?: object;\n}\n\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n  const componentClassName = 'ds-divider';\n  const classNamePrefix = `${componentClassName}--`;\n  const classes = [\n    componentClassName,\n    `${classNamePrefix}${variant}`,\n    classNames\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default Divider;\n", "export interface ThematicBreakProps {\n  classNames?: string;\n  attributes?: object;\n}\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n  const componentClassName = 'ds-thematic-break';\n  const classes = [\n    componentClassName,\n    classNames\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default ThematicBreak;\n", "export interface QuoteProps {\n  bodyHtml: string;\n  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n  classNames?: string;\n  attributes?: object;\n  forcePx?: boolean;\n}\n\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n  const componentClassName = 'ds-quote';\n  const classes = [\n    componentClassName,\n    `ds-theme--${theme}`,\n    forcePx && 'ds-force-px',\n    classNames\n  ].filter(Boolean).join(' ');\n\n  const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n  return (\n    <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n  );\n};\n"],
-  "mappings": ";AAgB6C;AAVtC,IAAM,UAAU,CAAC,EAAE,UAAU,QAAQ,YAAY,WAAW,MAAoB;AACrF,QAAM,qBAAqB;AAC3B,QAAM,kBAAkB,GAAG,kBAAkB;AAC7C,QAAM,UAAU;AAAA,IACd;AAAA,IACA,GAAG,eAAe,GAAG,OAAO;AAAA,IAC5B;AAAA,EACF,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SACE,oBAAC,SAAI,WAAW,SAAU,GAAG,YAAY,8BAAC,QAAG,GAAE;AAEnD;;;ACL6C,gBAAAA,YAAA;AARtC,IAAM,gBAAgB,CAAC,EAAE,YAAY,WAAW,MAA0B;AAC/E,QAAM,qBAAqB;AAC3B,QAAM,UAAU;AAAA,IACd;AAAA,IACA;AAAA,EACF,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SACE,gBAAAA,KAAC,SAAI,WAAW,SAAU,GAAG,YAAY,0BAAAA,KAAC,QAAG,GAAE;AAEnD;;;ACKI,gBAAAC,YAAA;AAZG,IAAM,QAAQ,CAAC,EAAE,UAAU,QAAQ,WAAW,YAAY,YAAY,QAAQ,MAAkB;AACrG,QAAM,qBAAqB;AAC3B,QAAM,UAAU;AAAA,IACd;AAAA,IACA,aAAa,KAAK;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,EACF,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,QAAM,YAAY,gBAAgB,kBAAkB,qBAAqB,QAAQ;AAEjF,SACE,gBAAAA,KAAC,gBAAW,yBAAyB,EAAE,QAAQ,UAAU,GAAG,WAAW,SAAU,GAAG,YAAY;AAEpG;",
+  "sources": ["../helpers/formatClassString.ts", "../components/divider/divider.tsx", "../components/thematic-break/thematic-break.tsx", "../components/quote/quote.tsx"],
+  "sourcesContent": ["export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n  return classesArray.filter(x => !!x).join(' ');\n}\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface DividerProps {\n  variant?: 'soft' | 'medium' | 'hard';\n  classNames?: string;\n  attributes?: object;\n}\n\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n  const classes = formatClassString([\n    'ds-divider',\n    `ds-divider--${variant}`,\n    classNames\n  ])\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default Divider;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface ThematicBreakProps {\n  classNames?: string;\n  attributes?: object;\n}\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n  const classes = formatClassString([\n    'ds-thematic-break',\n    classNames\n  ])\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default ThematicBreak;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface QuoteProps {\n  bodyHtml: string;\n  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n  classNames?: string;\n   /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object;\n  forcePx?: boolean;\n}\n\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n  const componentClassName = 'ds-quote';\n\n  const classes = formatClassString([\n    componentClassName,\n    `ds-theme--${theme}`,\n    forcePx && 'ds-force-px',\n    classNames,\n  ])\n\n  const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n  return (\n    <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n  );\n};\n"],
+  "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;ACc6C;AARtC,IAAM,UAAU,CAAC,EAAE,UAAU,QAAQ,YAAY,WAAW,MAAoB;AACrF,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,eAAe,OAAO;AAAA,IACtB;AAAA,EACF,CAAC;AAED,SACE,oBAAC,SAAI,WAAW,SAAU,GAAG,YAAY,8BAAC,QAAG,GAAE;AAEnD;;;ACJ6C,gBAAAA,YAAA;AAPtC,IAAM,gBAAgB,CAAC,EAAE,YAAY,WAAW,MAA0B;AAC/E,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,gBAAAA,KAAC,SAAI,WAAW,SAAU,GAAG,YAAY,0BAAAA,KAAC,QAAG,GAAE;AAEnD;;;ACQI,gBAAAC,YAAA;AAbG,IAAM,QAAQ,CAAC,EAAE,UAAU,QAAQ,WAAW,YAAY,YAAY,QAAQ,MAAkB;AACrG,QAAM,qBAAqB;AAE3B,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,aAAa,KAAK;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,EACF,CAAC;AAED,QAAM,YAAY,gBAAgB,kBAAkB,qBAAqB,QAAQ;AAEjF,SACE,gBAAAA,KAAC,gBAAW,yBAAyB,EAAE,QAAQ,UAAU,GAAG,WAAW,SAAU,GAAG,YAAY;AAEpG;",
   "names": ["jsx", "jsx"]
 }

package/tokens/colors-css-variables.json

@@ -12,7 +12,6 @@
   "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)",
@@ -23,7 +22,6 @@
   "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)",
@@ -48,7 +46,6 @@
   "surface-sudoko": "var(--ds-color-surface-sudoko)",
   "surface-brand": "var(--ds-color-surface-brand)",
   "surface-inverted": "var(--ds-color-surface-inverted)",
-  "surface-breaking": "var(--ds-color-surface-breaking)",
   "border-primary": "var(--ds-color-border-primary)",
   "border-primary-02": "var(--ds-color-border-primary-02)",
   "border-primary-03": "var(--ds-color-border-primary-03)",
@@ -60,7 +57,6 @@
   "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)",
@@ -86,4 +82,4 @@
   "gradient-content-fade-right": "var(--ds-color-gradient-content-fade-right)",
   "gradient-content-fade-up": "var(--ds-color-gradient-content-fade-up)",
   "gradient-content-fade-down": "var(--ds-color-gradient-content-fade-down)"
-}
+}

package/tokens/colors-dark-mode.json

@@ -1,75 +1,71 @@
 {
   "text": {
-    "primary": "#ededed",
-    "primary-02": "#b8b8b8",
+    "primary": "#EDEDED",
+    "primary-02": "#B8B8B8",
     "secondary": "#050505",
-    "critical": "#fd2330",
-    "disabled": "#b8b8b8",
+    "critical": "#FD2330",
+    "disabled": "#B8B8B8",
     "on-brand": "#ffffff",
     "on-business": "#ffffff",
     "on-critical": "#ffffff",
     "on-success": "#ffffff",
-    "brand": "#fd2330",
-    "body-link": "#65a0fc",
-    "body-link-visited": "#65a0fc",
-    "positive": "#3a8352",
-    "culture": "#4293d7"
+    "brand": "#FD2330",
+    "body-link": "#65A0FC",
+    "body-link-visited": "#65A0FC",
+    "positive": "#3A8352"
   },
   "icon": {
-    "primary": "#ededed",
-    "primary-02": "#cfcfcf",
+    "primary": "#EDEDED",
+    "primary-02": "#CFCFCF",
     "secondary": "#050505",
-    "critical": "#fd2330",
-    "disabled": "#b8b8b8",
+    "critical": "#FD2330",
+    "disabled": "#B8B8B8",
     "on-brand": "#141414",
     "on-critical": "#ffffff",
     "on-success": "#ffffff",
     "on-business": "#ffffff",
-    "brand": "#fd2330",
-    "culture": "#4293d7"
+    "brand": "#FD2330"
   },
   "component": {
-    "brand": "#fd2330",
-    "business": "#3a8352",
-    "primary": "#ededed",
-    "primary-overlay": "rgba(255, 255, 255, 0.13)",
-    "primary-overlay-02": "#9e9e9e",
+    "brand": "#FD2330",
+    "business": "#3A8352",
+    "primary": "#EDEDED",
+    "primary-overlay": "#ffffff21",
+    "primary-overlay-02": "#9E9E9E",
     "secondary": "#050505",
-    "secondary-overlay": "rgba(8, 8, 8, 0.13)",
-    "secondary-overlay-02": "rgba(8, 8, 8, 0.2)",
-    "critical": "#ef7171",
-    "critical-overlay": "#a51d24",
+    "secondary-overlay": "#08080821",
+    "secondary-overlay-02": "#08080833",
+    "critical": "#EF7171",
+    "critical-overlay": "#A51D24",
     "static-white": "#ffffff",
-    "positive": "#3a8352",
-    "primary-02": "#cfcfcf"
+    "positive": "#3A8352",
+    "primary-02": "#CFCFCF"
   },
   "surface": {
-    "below": "#171717",
+    "below": "#262626",
     "background": "#050505",
-    "raised": "#2b2b2b",
-    "native-article": "#2b2b2b",
-    "elevated": "#2b2b2b",
+    "raised": "#2B2B2B",
+    "native-article": "#2B2B2B",
+    "elevated": "#2B2B2B",
     "inverted": "#ffffff",
-    "overlay": "rgba(5, 5, 5, 0.5)",
-    "quiz": "#ea3e3f",
-    "korsord": "#8bb6e8",
-    "sudoko": "#90d0bd",
-    "brand": "#da000d",
-    "breaking": "#300407"
+    "overlay": "#05050580",
+    "quiz": "#EA3E3F",
+    "korsord": "#8BB6E8",
+    "sudoko": "#90D0BD",
+    "brand": "#DA000D"
   },
   "border": {
-    "primary": "rgba(255, 255, 255, 0.19)",
-    "primary-02": "rgba(255, 255, 255, 0.4)",
-    "primary-03": "#ededed",
+    "primary": "#3B3B3B",
+    "primary-02": "#ffffff66",
+    "primary-03": "#EDEDED",
     "secondary": "#141414",
-    "business": "#3a8352",
-    "critical": "#fd2330",
-    "focus": "#fd2330",
+    "business": "#3A8352",
+    "critical": "#FD2330",
+    "focus": "#FD2330",
     "focus-02": "#ffffff",
-    "focus-03": "#fd2330",
-    "focus-04": "#3a8352",
-    "brand": "#fd2330",
-    "culture": "#4293d7"
+    "focus-03": "#FD2330",
+    "focus-04": "#3A8352",
+    "brand": "#DA000D"
   },
   "background": {
     "primary": "#141414"
@@ -82,25 +78,25 @@
     "content-fade-down": "linear-gradient(0deg, #05050500 0%, #050505 100%)"
   },
   "static": {
-    "red-100": "#fad4d4",
+    "red-100": "#FAD4D4",
     "black": "#141414",
-    "transparent-black": "rgba(20, 20, 20, 0.6)",
+    "transparent-black": "#14141499",
     "white": "#ffffff",
-    "transparent-white": "rgba(255, 255, 255, 0.5)",
-    "green-100": "#cee4d6",
-    "red-300": "#ef7171",
-    "transparent-white-10": "rgba(255, 255, 255, 0.13)",
-    "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",
-    "red-200": "#f6acad",
-    "red-0": "#fce8e8"
+    "transparent-white": "#ffffff80",
+    "green-100": "#CEE4D6",
+    "red-300": "#EF7171",
+    "transparent-white-10": "#ffffff21",
+    "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",
+    "red-200": "#F6ACAD",
+    "red-0": "#FCE8E8"
   }
 }

package/tokens/colors-light-mode.json

@@ -3,98 +3,94 @@
     "primary": "#050505",
     "primary-02": "#666666",
     "secondary": "#ffffff",
-    "critical": "#da000d",
+    "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",
-    "culture": "#227ac3"
+    "brand": "#DA000D",
+    "body-link": "#4373CE",
+    "body-link-visited": "#4373CE",
+    "positive": "#3A8352"
   },
   "icon": {
     "primary": "#050505",
     "primary-02": "#666666",
     "secondary": "#ffffff",
-    "critical": "#da000d",
+    "critical": "#DA000D",
     "disabled": "#666666",
     "on-brand": "#ffffff",
     "on-business": "#ffffff",
-    "brand": "#da000d",
+    "brand": "#DA000D",
     "on-critical": "#ffffff",
-    "on-success": "#ffffff",
-    "culture": "#227ac3"
+    "on-success": "#ffffff"
   },
   "component": {
-    "brand": "#da000d",
-    "business": "#3a8352",
+    "brand": "#DA000D",
+    "business": "#3A8352",
     "primary": "#141414",
-    "primary-overlay": "rgba(8, 8, 8, 0.13)",
-    "primary-overlay-02": "rgba(8, 8, 8, 0.2)",
+    "primary-overlay": "#08080821",
+    "primary-overlay-02": "#08080833",
     "secondary": "#ffffff",
-    "secondary-overlay": "rgba(255, 255, 255, 0.13)",
-    "secondary-overlay-02": "rgba(255, 255, 255, 0.2)",
-    "critical": "#ea3e3f",
-    "critical-overlay": "#a51d24",
+    "secondary-overlay": "#ffffff21",
+    "secondary-overlay-02": "#ffffff33",
+    "critical": "#EA3E3F",
+    "critical-overlay": "#A51D24",
     "static-white": "#ffffff",
-    "positive": "#3a8352",
-    "primary-02": "#cfcfcf"
+    "positive": "#3A8352",
+    "primary-02": "#CFCFCF"
   },
   "surface": {
-    "below": "#f2f2f2",
-    "native-article": "#ededed",
+    "below": "#EDEDED",
+    "native-article": "#EDEDED",
     "background": "#ffffff",
-    "raised": "#ededed",
+    "raised": "#EDEDED",
     "elevated": "#ffffff",
-    "overlay": "rgba(5, 5, 5, 0.5)",
-    "quiz": "#ea3e3f",
-    "korsord": "#8bb6e8",
-    "sudoko": "#90d0bd",
-    "brand": "#da000d",
-    "inverted": "#141414",
-    "breaking": "#300407"
+    "overlay": "#05050580",
+    "quiz": "#EA3E3F",
+    "korsord": "#8BB6E8",
+    "sudoko": "#90D0BD",
+    "brand": "#DA000D",
+    "inverted": "#141414"
   },
   "border": {
-    "primary": "rgba(5, 5, 5, 0.13)",
-    "primary-02": "rgba(8, 8, 8, 0.4)",
+    "primary": "#08080821",
+    "primary-02": "#08080866",
     "primary-03": "#050505",
     "secondary": "#ffffff",
-    "business": "#3a8352",
-    "critical": "#da000d",
-    "focus": "#da000d",
+    "business": "#3A8352",
+    "critical": "#DA000D",
+    "focus": "#DA000D",
     "focus-02": "#141414",
-    "focus-03": "#da000d",
-    "focus-04": "#3a8352",
-    "brand": "#da000d",
-    "culture": "#227ac3"
+    "focus-03": "#DA000D",
+    "focus-04": "#3A8352",
+    "brand": "#DA000D"
   },
   "background": {
     "primary": "#ffffff"
   },
   "static": {
-    "red-100": "#fad4d4",
+    "red-100": "#FAD4D4",
     "black": "#141414",
-    "transparent-black": "rgba(20, 20, 20, 0.6)",
+    "transparent-black": "#14141499",
     "white": "#ffffff",
-    "transparent-white": "rgba(255, 255, 255, 0.5)",
-    "green-100": "#cee4d6",
-    "red-300": "#ef7171",
-    "transparent-white-10": "rgba(255, 255, 255, 0.13)",
-    "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",
-    "red-200": "#f6acad",
-    "red-0": "#fce8e8"
+    "transparent-white": "#ffffff80",
+    "green-100": "#CEE4D6",
+    "red-300": "#EF7171",
+    "transparent-white-10": "#ffffff21",
+    "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",
+    "red-200": "#F6ACAD",
+    "red-0": "#FCE8E8"
   },
   "gradient": {
     "content-fade-left": "linear-gradient(90deg, #ffffff00 0%, #ffffff 100%)",

package/tokens/typography-list.json

@@ -16,7 +16,6 @@
   "detailteaser-standard-compact": "'detailteaser-standard-compact'",
   "detailteaser-standard-compact-opinion": "'detailteaser-standard-compact-opinion'",
   "detailteaser-large": "'detailteaser-large'",
-  "detailteaser-breaking": "'detailteaser-breaking'",
   "detailteaser-large-opinion": "'detailteaser-large-opinion'",
   "detailteaser-large-storRubrik": "'detailteaser-large-storRubrik'",
   "detailteaser-standard": "'detailteaser-standard'",

package/tokens-tmp/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/components/teaser-breaking/README.md

@@ -1,46 +0,0 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-breaking](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-breaking)
-- Storybook: [TeaserBreaking](https://designsystem.dn.se/?path=/docs/section-teaserbreaking--docs)
-- Storybook (Latest): [TeaserBreaking](https://designsystem-latest.dn.se/?path=/docs/section-teaserbreaking--docs)
-
-----
-
-# teaser-breaking
-
-This teaser never has a lock-symbol/vip-badge
-
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|title | String | yes | | | Heading of the teaser |
-|targetLink | String | yes | | | Target URL for the teaser |
-|areaType | String | no | "right" or "bauta" | | The area where the column is rendered |
-|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
-|text | String | no | | | Teaser subtext |
-|vignette | String | no | | | Top text in the teaser |
-|highlight | String | no | | | Text before the heading |
-|mediaHtml | HTML String | no | | | Main image or other media |
-|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
-|classNames | String | no | | | Ex. "my-special-class" |
-|~forcePx~ | | | | | Not supported |
-
-## Minimum requirement example
-
-### Nunjucks
-
-These are copy paste friendly examples to quickliy get started using a component.
-
-```html
-{% from '@bonniernews/dn-design-system-web/components/teaser-breaking/teaser-breaking.njk' import TeaserBreaking %}
-
-{{ TeaserBreaking({
-  title: "Upp på börsen",
-  text: "Det ser ganska normalt ut på Stockholmsbörsen.",
-  highlight: "Ekonominytt:"
-})}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/teaser-breaking/teaser-breaking" as *;
-```

package/components/teaser-breaking/teaser-breaking.njk

@@ -1,46 +0,0 @@
-{% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
-
-{% macro TeaserBreaking(params) %}
-  {% set componentClassName = "ds-teaser" %}
-  {% set classNamePrefix = componentClassName + "--" %}
-
-  {% set extraClasses = [
-    "ds-teaser--breaking",
-    params.classNames if params.classNames
-  ] | join(" ") %}
-
-  {% call TeaserCard({
-    targetLink: params.targetLink,
-    areaType: params.areaType,
-    theme: params.theme,
-    attributes: params.attributes,
-    classNames: extraClasses
-  }) %}
-    <div class="{{ componentClassName + '__content'}}">
-      <div class="ds-teaser__content-inner">
-        {% if params.vignette %}
-          <div class="ds-teaser__vignette">
-            {{ params.vignette }}
-          </div>
-        {% endif %}
-        <h2 class="ds-teaser__title">
-          {% if params.highlight %}
-            <span class="{{ componentClassName + '__highlight'}}">{{ params.highlight }}</span>
-          {% endif %}
-          {{ params.title }}
-        </h2>
-
-        {% if params.text %}
-          <p class="{{ componentClassName + '__text' }}">
-            {{ params.text }}
-          </p>
-        {% endif %}
-      </div>
-    </div>
-    {% if params.mediaHtml %}
-      <div class="{{ componentClassName + '__media'}}">
-        {{ params.mediaHtml }}
-      </div>
-    {% endif %}
-  {% endcall %}
-{% endmacro %}

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

@@ -1,52 +0,0 @@
-@use "../../foundations/helpers/forward.helpers.scss" as *;
-@use "../../assets/teaser/teaser.scss" as *;
-
-.ds-teaser.ds-teaser--breaking {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-
-  .ds-teaser__media {
-    padding: ds-spacing(0 0 $ds-s-100);
-
-    video {
-      max-width: 100%;
-    }
-  }
-
-  .ds-teaser__content {
-    display: flex;
-    flex-direction: row;
-    padding: ds-spacing($ds-s-075 $ds-s-100 $ds-s-100);
-    text-align: center;
-
-    .ds-teaser__content-inner {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-    }
-  }
-
-  &:focus-visible {
-    outline: none !important; /* stylelint-disable-line declaration-no-important */
-
-    .ds-teaser__content {
-      @include ds-teaser-focus(-8px, false);
-    }
-  }
-
-  .ds-teaser__vignette {
-    margin-top: ds-spacing($ds-s-025);
-  }
-
-  .ds-teaser__title {
-    @include ds-typography($ds-typography-detailteaser-breaking);
-    text-align: center;
-  }
-
-  @include ds-hover(true) {
-    .ds-teaser__title {
-      @include ds-underline(3px);
-    }
-  }
-}