@bonniernews/dn-design-system-web - npm Package Compare versions

Comparing version 21.1.5 to 21.2.1-beta.0

components/divider/README.md

@@ -9,4 +9,2 @@ Divider
 
-<table class="docblock-argstable sb-unstyled css-v2ifgj"><thead class="docblock-argstable-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody class="docblock-argstable-body"><tr><td class="css-4lbn0a"><span class="css-in3yi3">variant</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"soft"</span><span class="css-o1d7ko">"medium"</span><span class="css-o1d7ko">"hard"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"soft"</span></div></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">classNames</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">attributes</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">object</span></div></div></td><td><span>-</span></td></tr></tbody></table>
-
-<pre class="prismjs css-4zr3vl"><div class="language-jsx css-zye6j" style="white-space: pre;"><span class="token tag punctuation">&lt;</span><span class="token tag class-name">Divider</span><span class="token tag"> </span><span class="token tag attr-name">variant</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">soft</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag punctuation">/&gt;</span></div></pre>
+<table class="docblock-argstable sb-unstyled css-v2ifgj"><thead class="docblock-argstable-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody class="docblock-argstable-body"><tr><td class="css-4lbn0a"><span class="css-in3yi3">variant</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"soft"</span><span class="css-o1d7ko">"medium"</span><span class="css-o1d7ko">"hard"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"soft"</span></div></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">classNames</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">attributes</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">object</span></div></div></td><td><span>-</span></td></tr></tbody></table>

components/teaser-onsite/README.md

@@ -13,9 +13,2 @@ TeaserOnsite
 
-<table class="docblock-argstable sb-unstyled css-v2ifgj"><thead class="docblock-argstable-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody class="docblock-argstable-body"><tr><td class="css-4lbn0a"><span class="css-in3yi3">areaType</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"right"</span><span class="css-o1d7ko">"bauta"</span><span class="css-o1d7ko">"bautaxl"</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">targetLink</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">theme</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"kultur"</span><span class="css-o1d7ko">"nyheter"</span><span class="css-o1d7ko">"sport"</span><span class="css-o1d7ko">"ekonomi"</span><span class="css-o1d7ko">"sthlm"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"nyheter"</span></div></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">classNames</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">attributes</span></td><td><div class="css-18pz2h2"><span>Ex. { target: "_blank", "data-test": "lorem ipsum" }</span></div><div class="css-1ije3e2"><div class="css-13nzt7e"><span class="css-o1d7ko">object</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">mediaHtml</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">title</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">text</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr></tbody></table>
-
-<pre class="prismjs css-4zr3vl"><div class="language-jsx css-zye6j" style="white-space: pre;"><span class="token tag punctuation">&lt;</span><span class="token tag class-name">TeaserOnSite</span><span class="token tag">
-</span><span class="token tag">  </span><span class="token tag attr-name">mediaHtml="&lt;figure</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">ds-teaser-image</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag punctuation">&gt;</span><span class="token tag attr-name">&lt;div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">picture</span><span class="token tag"> </span><span class="token tag attr-name">picture--placeholder&amp;quot;</span><span class="token tag"> </span><span class="token tag special-attr attr-name">style</span><span class="token tag special-attr attr-value punctuation attr-equals">=</span><span class="token tag special-attr attr-value value css language-css">&amp;quot</span><span class="token tag special-attr attr-value value css language-css punctuation">;</span><span class="token tag special-attr attr-value value css language-css property">aspect-ratio</span><span class="token tag special-attr attr-value value css language-css punctuation">:</span><span class="token tag"> </span><span class="token tag attr-name">1</span><span class="token tag"> / </span><span class="token tag attr-name">1;&amp;quot;</span><span class="token tag punctuation">&gt;</span><span class="token tag attr-name">&lt;img</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">picture__img</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag"> </span><span class="token tag attr-name">src</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">https://cached-images.bonnier.news/gcs/bilder-lab/dn-mly/d5e4cd87-61a5-40fc-8060-c4ad5019a9f3.jpeg?interpolation=lanczos-none</span><span class="token tag attr-value entity named-entity">&amp;amp;</span><span class="token tag attr-value">fit=around%7C56:56</span><span class="token tag attr-value entity named-entity">&amp;amp;</span><span class="token tag attr-value">crop=56:h;center,top</span><span class="token tag attr-value entity named-entity">&amp;amp;</span><span class="token tag attr-value">output-quality=80</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag"> </span><span class="token tag attr-name">alt</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag"> </span><span class="token tag attr-name">aria-hidden</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">true</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag punctuation">&gt;</span><span class="token tag attr-name">&lt;</span><span class="token tag">/</span><span class="token tag attr-name">div</span><span class="token tag punctuation">&gt;</span><span class="token tag attr-name">&lt;</span><span class="token tag">/</span><span class="token tag attr-name">figure</span><span class="token tag punctuation">&gt;</span><span class="token tag attr-name">"</span><span class="token tag">
-</span><span class="token tag">  </span><span class="token tag attr-name">targetLink</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">https://www.dn.se/varlden/har-forvarades-atombomber-under-kalla-kriget-nu-ar-flygbasen-pa-azorerna-ater-het-for-stormakterna/</span><span class="token tag attr-value punctuation">"</span><span class="token tag">
-</span><span class="token tag">  </span><span class="token tag attr-name">text</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">Henrik Brandão Jönsson och Eduardo Leal</span><span class="token tag attr-value punctuation">"</span><span class="token tag">
-</span><span class="token tag">  </span><span class="token tag attr-name">title</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">Azorerna</span><span class="token tag attr-value punctuation">"</span><span class="token tag">
-</span><span class="token tag"></span><span class="token tag punctuation">/&gt;</span></div></pre>
+<table class="docblock-argstable sb-unstyled css-v2ifgj"><thead class="docblock-argstable-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody class="docblock-argstable-body"><tr><td class="css-4lbn0a"><span class="css-in3yi3">areaType</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"right"</span><span class="css-o1d7ko">"bauta"</span><span class="css-o1d7ko">"bautaxl"</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">targetLink</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">theme</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"kultur"</span><span class="css-o1d7ko">"nyheter"</span><span class="css-o1d7ko">"sport"</span><span class="css-o1d7ko">"ekonomi"</span><span class="css-o1d7ko">"sthlm"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"nyheter"</span></div></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">classNames</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">attributes</span></td><td><div class="css-18pz2h2"><span>Ex. { target: "_blank", "data-test": "lorem ipsum" }</span></div><div class="css-1ije3e2"><div class="css-13nzt7e"><span class="css-o1d7ko">object</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">mediaHtml</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">title</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">text</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr></tbody></table>

package.json

 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "21.1.5",
+  "version": "21.2.1-beta.0",
   "description": "DN design system for web.",
@@ -5,0 +5,0 @@ "main": "index.tsx",

tokens/colors-css-variables.json

@@ -15,2 +15,3 @@ {
   "text-positive": "var(--ds-color-text-positive)",
+  "text-culture": "var(--ds-color-text-culture)",
   "icon-primary": "var(--ds-color-icon-primary)",
@@ -26,2 +27,3 @@ "icon-primary-02": "var(--ds-color-icon-primary-02)",
   "icon-on-success": "var(--ds-color-icon-on-success)",
+  "icon-culture": "var(--ds-color-icon-culture)",
   "component-brand": "var(--ds-color-component-brand)",
@@ -51,2 +53,3 @@ "component-business": "var(--ds-color-component-business)",
   "surface-inverted": "var(--ds-color-surface-inverted)",
+  "surface-breaking": "var(--ds-color-surface-breaking)",
   "border-primary": "var(--ds-color-border-primary)",
@@ -63,2 +66,3 @@ "border-primary-02": "var(--ds-color-border-primary-02)",
   "border-brand": "var(--ds-color-border-brand)",
+  "border-culture": "var(--ds-color-border-culture)",
   "background-primary": "var(--ds-color-background-primary)",
@@ -89,2 +93,2 @@ "static-red-100": "var(--ds-color-static-red-100)",
   "gradient-content-fade-down": "var(--ds-color-gradient-content-fade-down)"
-}
+}

tokens/colors-dark-mode.json

 {
   "text": {
-    "primary": "#EDEDED",
-    "primary-02": "#B8B8B8",
+    "primary": "#ededed",
+    "primary-02": "#b8b8b8",
     "secondary": "#050505",
-    "critical": "#FD2330",
-    "disabled": "#B8B8B8",
+    "critical": "#fd2330",
+    "disabled": "#b8b8b8",
     "on-brand": "#ffffff",
@@ -12,13 +12,14 @@ "on-business": "#ffffff",
     "on-success": "#ffffff",
-    "brand": "#FD2330",
-    "body-link": "#65A0FC",
-    "body-link-visited": "#65A0FC",
-    "positive": "#3A8352"
+    "brand": "#fd2330",
+    "body-link": "#65a0fc",
+    "body-link-visited": "#65a0fc",
+    "positive": "#3a8352",
+    "culture": "#4293d7"
   },
   "icon": {
-    "primary": "#EDEDED",
-    "primary-02": "#CFCFCF",
+    "primary": "#ededed",
+    "primary-02": "#cfcfcf",
     "secondary": "#050505",
-    "critical": "#FD2330",
-    "disabled": "#B8B8B8",
+    "critical": "#fd2330",
+    "disabled": "#b8b8b8",
     "on-brand": "#141414",
@@ -28,44 +29,47 @@ "on-critical": "#ffffff",
     "on-business": "#ffffff",
-    "brand": "#FD2330"
+    "brand": "#fd2330",
+    "culture": "#4293d7"
   },
   "component": {
-    "brand": "#FD2330",
-    "business": "#3A8352",
-    "primary": "#EDEDED",
-    "primary-overlay": "#ffffff21",
-    "primary-overlay-02": "#9E9E9E",
+    "brand": "#fd2330",
+    "business": "#3a8352",
+    "primary": "#ededed",
+    "primary-overlay": "rgba(255, 255, 255, 0.13)",
+    "primary-overlay-02": "#9e9e9e",
     "secondary": "#050505",
-    "secondary-overlay": "#08080821",
-    "secondary-overlay-02": "#08080833",
-    "critical": "#EF7171",
-    "critical-overlay": "#A51D24",
+    "secondary-overlay": "rgba(8, 8, 8, 0.13)",
+    "secondary-overlay-02": "rgba(8, 8, 8, 0.2)",
+    "critical": "#ef7171",
+    "critical-overlay": "#a51d24",
     "static-white": "#ffffff",
-    "positive": "#3A8352",
-    "primary-02": "#CFCFCF"
+    "positive": "#3a8352",
+    "primary-02": "#cfcfcf"
   },
   "surface": {
-    "below": "#262626",
+    "below": "#171717",
     "background": "#050505",
-    "raised": "#2B2B2B",
-    "native-article": "#2B2B2B",
-    "elevated": "#2B2B2B",
+    "raised": "#2b2b2b",
+    "native-article": "#2b2b2b",
+    "elevated": "#2b2b2b",
     "inverted": "#ffffff",
-    "overlay": "#05050580",
-    "quiz": "#EA3E3F",
-    "korsord": "#8BB6E8",
-    "sudoko": "#90D0BD",
-    "brand": "#DA000D"
+    "overlay": "rgba(5, 5, 5, 0.5)",
+    "quiz": "#ea3e3f",
+    "korsord": "#8bb6e8",
+    "sudoko": "#90d0bd",
+    "brand": "#da000d",
+    "breaking": "#300407"
   },
   "border": {
-    "primary": "#3B3B3B",
-    "primary-02": "#ffffff66",
-    "primary-03": "#EDEDED",
+    "primary": "rgba(255, 255, 255, 0.19)",
+    "primary-02": "rgba(255, 255, 255, 0.4)",
+    "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": "#DA000D"
+    "focus-03": "#fd2330",
+    "focus-04": "#3a8352",
+    "brand": "#fd2330",
+    "culture": "#4293d7"
   },
@@ -83,23 +87,23 @@ "background": {
   "static": {
-    "red-100": "#FAD4D4",
+    "red-100": "#fad4d4",
     "black": "#141414",
-    "transparent-black": "#14141499",
+    "transparent-black": "rgba(20, 20, 20, 0.6)",
     "white": "#ffffff",
-    "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"
+    "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"
   }
 }

tokens/colors-light-mode.json

@@ -6,3 +6,3 @@ {
     "secondary": "#ffffff",
-    "critical": "#DA000D",
+    "critical": "#da000d",
     "disabled": "#666666",
@@ -13,6 +13,7 @@ "on-brand": "#ffffff",
     "on-success": "#ffffff",
-    "brand": "#DA000D",
-    "body-link": "#4373CE",
-    "body-link-visited": "#4373CE",
-    "positive": "#3A8352"
+    "brand": "#da000d",
+    "body-link": "#4373ce",
+    "body-link-visited": "#4373ce",
+    "positive": "#3a8352",
+    "culture": "#227ac3"
   },
@@ -23,50 +24,53 @@ "icon": {
     "secondary": "#ffffff",
-    "critical": "#DA000D",
+    "critical": "#da000d",
     "disabled": "#666666",
     "on-brand": "#ffffff",
     "on-business": "#ffffff",
-    "brand": "#DA000D",
+    "brand": "#da000d",
     "on-critical": "#ffffff",
-    "on-success": "#ffffff"
+    "on-success": "#ffffff",
+    "culture": "#227ac3"
   },
   "component": {
-    "brand": "#DA000D",
-    "business": "#3A8352",
+    "brand": "#da000d",
+    "business": "#3a8352",
     "primary": "#141414",
-    "primary-overlay": "#08080821",
-    "primary-overlay-02": "#08080833",
+    "primary-overlay": "rgba(8, 8, 8, 0.13)",
+    "primary-overlay-02": "rgba(8, 8, 8, 0.2)",
     "secondary": "#ffffff",
-    "secondary-overlay": "#ffffff21",
-    "secondary-overlay-02": "#ffffff33",
-    "critical": "#EA3E3F",
-    "critical-overlay": "#A51D24",
+    "secondary-overlay": "rgba(255, 255, 255, 0.13)",
+    "secondary-overlay-02": "rgba(255, 255, 255, 0.2)",
+    "critical": "#ea3e3f",
+    "critical-overlay": "#a51d24",
     "static-white": "#ffffff",
-    "positive": "#3A8352",
-    "primary-02": "#CFCFCF"
+    "positive": "#3a8352",
+    "primary-02": "#cfcfcf"
   },
   "surface": {
-    "below": "#EDEDED",
-    "native-article": "#EDEDED",
+    "below": "#f2f2f2",
+    "native-article": "#ededed",
     "background": "#ffffff",
-    "raised": "#EDEDED",
+    "raised": "#ededed",
     "elevated": "#ffffff",
-    "overlay": "#05050580",
-    "quiz": "#EA3E3F",
-    "korsord": "#8BB6E8",
-    "sudoko": "#90D0BD",
-    "brand": "#DA000D",
-    "inverted": "#141414"
+    "overlay": "rgba(5, 5, 5, 0.5)",
+    "quiz": "#ea3e3f",
+    "korsord": "#8bb6e8",
+    "sudoko": "#90d0bd",
+    "brand": "#da000d",
+    "inverted": "#141414",
+    "breaking": "#300407"
   },
   "border": {
-    "primary": "#08080821",
-    "primary-02": "#08080866",
+    "primary": "rgba(5, 5, 5, 0.13)",
+    "primary-02": "rgba(8, 8, 8, 0.4)",
     "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"
+    "focus-03": "#da000d",
+    "focus-04": "#3a8352",
+    "brand": "#da000d",
+    "culture": "#227ac3"
   },
@@ -77,22 +81,22 @@ "background": {
   "static": {
-    "red-100": "#FAD4D4",
+    "red-100": "#fad4d4",
     "black": "#141414",
-    "transparent-black": "#14141499",
+    "transparent-black": "rgba(20, 20, 20, 0.6)",
     "white": "#ffffff",
-    "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"
+    "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"
   },
@@ -99,0 +103,0 @@ "gradient": {

tokens/typography-list.json

@@ -19,2 +19,3 @@ {
   "detailteaser-large": "'detailteaser-large'",
+  "detailteaser-breaking": "'detailteaser-breaking'",
   "detailteaser-large-opinion": "'detailteaser-large-opinion'",
@@ -21,0 +22,0 @@ "detailteaser-large-storRubrik": "'detailteaser-large-storRubrik'",

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1099164

increased by0.71%

Number of package files

472

increased by0.85%

Lines of code

1792

increased by0.79%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes