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

package/CHANGELOG.md

@@ -4,6 +4,30 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [21.1.0-beta.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.0.2...@bonniernews/dn-design-system-web@21.1.0-beta.1) (2024-10-25)
+
+
+### Features
+
+* **web:** breaking aka nivå3puff till visuella toppar ([#1450](https://github.com/BonnierNews/dn-design-system/issues/1450)) ([602040c](https://github.com/BonnierNews/dn-design-system/commit/602040c5a0e8ef7a7bd996bc6508e97956229c1b))
+* **web:** nivå1puff till visuella toppar  ([#1460](https://github.com/BonnierNews/dn-design-system/issues/1460)) ([d8dcacf](https://github.com/BonnierNews/dn-design-system/commit/d8dcacf7c76b80aac7e48fbf602bc5079d3a1cd3))
+* **web:** one level of bauta with background color ([8734216](https://github.com/BonnierNews/dn-design-system/commit/87342169eacf9d59f202f45424022c1bd733a74e))
+* **web:** one level of bauta with background color ([5d448cf](https://github.com/BonnierNews/dn-design-system/commit/5d448cf2cc890623e67c509edbb0418a98a8bb4b))
+
+
+### Maintenance
+
+* **deps-dev:** bump @babel/preset-env from 7.25.8 to 7.25.9 ([#1469](https://github.com/BonnierNews/dn-design-system/issues/1469)) ([b9a9884](https://github.com/BonnierNews/dn-design-system/commit/b9a988470f8862d4c010f27a097d9a65af115d2b))
+* **foundations:** update tokens from Figma ([#1467](https://github.com/BonnierNews/dn-design-system/issues/1467)) ([af2cd99](https://github.com/BonnierNews/dn-design-system/commit/af2cd99ce8ab17494a3e51e34588d25e24a9ef38))
+* prerelease packages ([3ebfd91](https://github.com/BonnierNews/dn-design-system/commit/3ebfd91c6780c6222c74b500eade9fd19cac88f3))
+* **web:** visuella-toppar-update-tokens ([#1468](https://github.com/BonnierNews/dn-design-system/issues/1468)) ([87277b4](https://github.com/BonnierNews/dn-design-system/commit/87277b487b6f663d4ca106a74cb878012e579a42))
+
+## [21.0.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.0.1...@bonniernews/dn-design-system-web@21.0.2) (2024-10-24)
+
+
+### Bug Fixes
+
+* **web:** higher z-index on arrow buttons in teaser list swipe ([#1459](https://github.com/BonnierNews/dn-design-system/issues/1459)) ([93b8b3a](https://github.com/BonnierNews/dn-design-system/commit/93b8b3ad2028115dfe393c5686be4fbf6db19086))
 ## [21.1.0-beta.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.0.0...@bonniernews/dn-design-system-web@21.1.0-beta.0) (2024-10-18)
 
 
@@ -11,10 +35,44 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 * **web:** one level of bauta with background color ([075ed25](https://github.com/BonnierNews/dn-design-system/commit/075ed259c6f3c50ed6018bd566fdc7b9b5c05c73))
 
+## [21.1.0-beta.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.0.0...@bonniernews/dn-design-system-web@21.1.0-beta.0) (2024-10-18)
+
+
+### Features
+
+* **web:** one level of bauta with background color ([075ed25](https://github.com/BonnierNews/dn-design-system/commit/075ed259c6f3c50ed6018bd566fdc7b9b5c05c73))
+
+
+### Maintenance
+
+* **deps-dev:** bump @babel/runtime from 7.25.7 to 7.25.9 ([#1458](https://github.com/BonnierNews/dn-design-system/issues/1458)) ([2a160a8](https://github.com/BonnierNews/dn-design-system/commit/2a160a8cfe74b593002ddc460fa4734dc008250d))
+* **deps-dev:** bump @types/jest from 29.5.13 to 29.5.14 ([#1463](https://github.com/BonnierNews/dn-design-system/issues/1463)) ([cb03bce](https://github.com/BonnierNews/dn-design-system/commit/cb03bce7ec4b7c6ede2cb929c6c5ff814278009a))
+* **deps-dev:** bump babel-plugin-react-native-web from 0.19.12 to 0.19.13 ([#1447](https://github.com/BonnierNews/dn-design-system/issues/1447)) ([c4041ac](https://github.com/BonnierNews/dn-design-system/commit/c4041acb905d60a60644b9a7a0f39970d1225873))
+* **deps-dev:** bump style-dictionary from 4.1.3 to 4.1.4 ([#1455](https://github.com/BonnierNews/dn-design-system/issues/1455)) ([e35c04a](https://github.com/BonnierNews/dn-design-system/commit/e35c04a2f92d51d8f072983a1d0087c169c6739f))
+* **deps:** bump @babel/core from 7.25.8 to 7.25.9 ([#1454](https://github.com/BonnierNews/dn-design-system/issues/1454)) ([d1277ca](https://github.com/BonnierNews/dn-design-system/commit/d1277ca8cb9911e63163745ccfed7a527c861e69))
+* **deps:** bump react-native-web from 0.19.12 to 0.19.13 ([#1448](https://github.com/BonnierNews/dn-design-system/issues/1448)) ([54f502f](https://github.com/BonnierNews/dn-design-system/commit/54f502fe48500251f1725e0ae704f5ca23793db7))
+* **deps:** bump react-syntax-highlighter from 15.5.0 to 15.6.1 ([#1466](https://github.com/BonnierNews/dn-design-system/issues/1466)) ([f7e0ede](https://github.com/BonnierNews/dn-design-system/commit/f7e0edebc0aec4d005a291f342bd66843a662722))
+* **deps:** bump sass from 1.80.2 to 1.80.3 ([#1457](https://github.com/BonnierNews/dn-design-system/issues/1457)) ([d01d82a](https://github.com/BonnierNews/dn-design-system/commit/d01d82a376bbd9e9bef9799da186719de46c6759))
+* **foundations:** update tokens from Figma ([#1453](https://github.com/BonnierNews/dn-design-system/issues/1453)) ([f9b929a](https://github.com/BonnierNews/dn-design-system/commit/f9b929a4bf6419a5a1360c0a2b4d58ac0bc8329d))
+* prerelease packages ([fac28c7](https://github.com/BonnierNews/dn-design-system/commit/fac28c769318d9f2b79b216ca7a93e5bf570209d))
+* prerelease packages ([2644177](https://github.com/BonnierNews/dn-design-system/commit/2644177a3b4106da78e3631dbaeabbade2f644d8))
+
+## [21.0.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.0.0...@bonniernews/dn-design-system-web@21.0.1) (2024-10-21)
+
+
+### Bug Fixes
+
+* **web:** correct one letter in aria role name ([#1449](https://github.com/BonnierNews/dn-design-system/issues/1449)) ([b6d9a0b](https://github.com/BonnierNews/dn-design-system/commit/b6d9a0b42c1c529f36b76a1f600abd9d24073691))
+
 
 ### Maintenance
 
-* **web:** released version v20.7.0-beta.0 ([8ae341a](https://github.com/BonnierNews/dn-design-system/commit/8ae341aea8b99cdd063e0541e95618876a8baa84))
+* **deps-dev:** bump @babel/preset-env from 7.25.4 to 7.25.8 ([#1444](https://github.com/BonnierNews/dn-design-system/issues/1444)) ([0fc75a7](https://github.com/BonnierNews/dn-design-system/commit/0fc75a752e2e5e5d833074253c8903bb8e62d442))
+* **deps-dev:** bump @types/jest from 29.5.4 to 29.5.13 ([#1445](https://github.com/BonnierNews/dn-design-system/issues/1445)) ([907411e](https://github.com/BonnierNews/dn-design-system/commit/907411e070bb2972ddbf2b0338398a463603d0f2))
+* **deps:** bump @storybook/addon-react-native-web from 0.0.24 to 0.0.26 ([#1437](https://github.com/BonnierNews/dn-design-system/issues/1437)) ([d5cdfec](https://github.com/BonnierNews/dn-design-system/commit/d5cdfeccd61e0161dfc4cdd5cf7c6dd9bd968154))
+* prerelease packages ([fe49466](https://github.com/BonnierNews/dn-design-system/commit/fe49466670ab2a6c76f92836991b9e9fc5814afa))
+* prerelease packages ([65eca7d](https://github.com/BonnierNews/dn-design-system/commit/65eca7d194a63bc13e78b1113ba506bc1f076fb2))
+* trigger foundations release ([#1442](https://github.com/BonnierNews/dn-design-system/issues/1442)) ([308d0d0](https://github.com/BonnierNews/dn-design-system/commit/308d0d02e3dc8056a755e946b80fc529834c0572))
 
 ## [21.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.6.1...@bonniernews/dn-design-system-web@21.0.0) (2024-10-18)
 

package/components/group-header/group-header.scss

@@ -23,7 +23,7 @@ $ds-group-header__icon-size: 24px;
   }
 
   &--bauta {
-    --group-header-background: #{$bauta-surface-color};
+    --group-header-background: #{$ds-color-surface-breaking};
   }
 
   &--toggle,

package/components/teaser-breaking/README.md

@@ -0,0 +1,46 @@
+- 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

@@ -0,0 +1,46 @@
+{% 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

@@ -0,0 +1,48 @@
+@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__title {
+    @include ds-typography($ds-typography-detailteaser-breaking);
+    text-align: center;
+  }
+
+  @include ds-hover(true) {
+    .ds-teaser__title {
+      @include ds-underline(3px);
+    }
+  }
+}

package/components/teaser-image/teaser-image.scss

@@ -30,7 +30,7 @@
     }
   }
 
-  .ds-teaser--top-img &--mask {
+  .ds-teaser--large &--mask {
     padding: ds-spacing($ds-s-100 $ds-s-100 0);
     box-sizing: border-box;
   }

package/components/teaser-large/teaser-large.njk

@@ -13,11 +13,17 @@
     {% set italicsClass = "ds-teaser--large-big-italic" if params.isLargeHeadline and params.areaType !== "right" else "ds-teaser--large-italic" %}
   {% endif %}
 
+  {# Hide top border if there is media and it's not a compact version. Compact is overruled by italic, if italic we must hide border because we shouldn't change anything related to åsikt #}
+  {% set hideTopBorder = false %}
+  {% if params.mediaHtml and (params.isItalicHeadline or not params.isCompact) %}
+    {% set hideTopBorder = true %}
+  {% endif %}
+
   {% set extraClasses = [
     "ds-teaser--large",
     classNamePrefix + params.variant if params.variant,
     classNamePrefix + "quote-badge" if isQuoteBadge,
-    classNamePrefix + 'top-img' if params.mediaHtml,
+    classNamePrefix + 'hide-top-border' if hideTopBorder,
     italicsClass if italicsClass,
     classNamePrefix + "compact" if params.isCompact,
     params.classNames if params.classNames

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

@@ -106,6 +106,21 @@
     &.ds-teaser--large-big-italic .ds-teaser__title {
       @include ds-typography($ds-typography-detailteaser-large-compact-opinion);
     }
+
+    &:not(.ds-teaser--large-italic):not(.ds-teaser--large-big-italic) {
+      .ds-vip-badge {
+        top: ds-spacing($ds-s-100);
+        right: ds-spacing($ds-s-100);
+      }
+
+      .ds-teaser__media {
+        padding: ds-spacing($ds-s-100 $ds-s-100 0 $ds-s-100);
+      }
+
+      .ds-teaser-dot {
+        display: none;
+      }
+    }
   }
 
   @include ds-mq-smallest-breakpoint(tablet) {

package/components/teaser-list-swipe/teaser-list-swipe.scss

@@ -44,7 +44,7 @@
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
-      z-index: 2;
+      z-index: 5;
 
       &--back {
         left: 10px;

package/components/teaser-native/teaser-native.scss

@@ -28,12 +28,6 @@
     font-family: $ds-font--arial !important; /* stylelint-disable-line declaration-no-important */
   }
 
-  &::after {
-    content: "";
-    display: block;
-    clear: both;
-  }
-
   &.ds-teaser--native-right,
   &.ds-teaser--native-large {
     .ds-teaser__media {

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

@@ -17,6 +17,7 @@
     background-color: $ds-color-border-primary;
     position: absolute;
     display: block;
+    clear: both; // Clears floating media in standard-teaser
     top: 0;
     left: 0;
     right: 0;
@@ -26,12 +27,22 @@
   }
 
   // first-child only triggers if there is no vignette
-  .ds-teaser--top-img::after,
+  .ds-teaser--hide-top-border::after,
   > .ds-split-container:first-child::after,
   > .ds-teaser:first-child::after {
     display: none;
   }
 
+  .ds-teaser--breaking + .ds-teaser--hide-top-border {
+    &::after {
+      display: block; // Override `display:none to make border visible
+    }
+
+    .ds-teaser__media {
+      padding-top: ds-spacing($ds-s-100);
+    }
+  }
+
   &::after {
     content: "";
     position: absolute;
@@ -47,22 +58,22 @@
   }
 
   &.ds-teaser-package--bauta {
-    background-color: $bauta-surface-color;
+    background-color: $ds-color-surface-breaking;
 
     & .ds-teaser,
     & .ds-teaser--slideshow {
-      background-color: $bauta-surface-color;
+      background-color: $ds-color-surface-breaking;
     }
 
     .ds-split-container {
-      background-color: $bauta-surface-color;
+      background-color: $ds-color-surface-breaking;
       &::after {
-        background-color: $updated-color-border-primary;
+        background-color: $ds-color-border-primary;
       }
     }
 
     & > .ds-teaser::after {
-      background-color: $updated-color-border-primary;
+      background-color: $ds-color-border-primary;
     }
   }
 }

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

@@ -29,12 +29,6 @@
     margin-bottom: ds-spacing($ds-s-100);
   }
 
-  &::after {
-    content: "";
-    display: block;
-    clear: both;
-  }
-
   .ds-teaser__content {
     display: block;
   }

package/components/teaser-swipe-card/teaser-swipe-card.njk

@@ -12,7 +12,7 @@
   ] | join(" ") %}
   {% set attributes = getAttributes(params.attributes) %}
 
-  <a href="{{ params.href }}" class="{{ classes }}" {{- attributes | safe }} role="list-item">
+  <a href="{{ params.href }}" class="{{ classes }}" {{- attributes | safe }} role="listitem">
     {% if params.variant != 'direkt' and params.mediaHtml %}
       {{ params.mediaHtml | safe }}
     {% endif %}

package/foundations/helpers/colors.scss

@@ -6,11 +6,6 @@
 @use "../variables/colorsDnLightTokens";
 @use "../variables/colorsDnDarkTokens";
 
-// Temporary variables before we update tokens
-$bauta-surface-color: #360003;
-$updated-color-border-primary: #ffffff19;
-// end of temporary variables
-
 $ds-theme-color: var(--ds-theme-color);
 
 @mixin get-dark-color-scheme() {
@@ -22,7 +17,7 @@ $ds-theme-color: var(--ds-theme-color);
   --ds-theme-color: #{$ds-color-component-brand};
 
   .ds-theme--nyheter {
-    --ds-theme-color: #{$ds-color-component-brand};
+    --ds-theme-color: #{$ds-color-border-brand};
   }
 
   .ds-theme--ekonomi {

package/foundations/variables/colorsCssVariables.scss

@@ -45,6 +45,7 @@ $ds-color-surface-korsord: var(--ds-color-surface-korsord);
 $ds-color-surface-sudoko: var(--ds-color-surface-sudoko);
 $ds-color-surface-brand: var(--ds-color-surface-brand);
 $ds-color-surface-inverted: var(--ds-color-surface-inverted);
+$ds-color-surface-breaking: var(--ds-color-surface-breaking);
 $ds-color-border-primary: var(--ds-color-border-primary);
 $ds-color-border-primary-02: var(--ds-color-border-primary-02);
 $ds-color-border-primary-03: var(--ds-color-border-primary-03);

package/foundations/variables/colorsDnDarkTokens.scss

@@ -1,84 +1,85 @@
-$ds-hex-dark-text-primary: #EDEDED;
-$ds-hex-dark-text-primary-02: #B8B8B8;
+$ds-hex-dark-text-primary: #ededed;
+$ds-hex-dark-text-primary-02: #b8b8b8;
 $ds-hex-dark-text-secondary: #050505;
-$ds-hex-dark-text-critical: #FD2330;
-$ds-hex-dark-text-disabled: #B8B8B8;
+$ds-hex-dark-text-critical: #fd2330;
+$ds-hex-dark-text-disabled: #b8b8b8;
 $ds-hex-dark-text-on-brand: #ffffff;
 $ds-hex-dark-text-on-business: #ffffff;
 $ds-hex-dark-text-on-critical: #ffffff;
 $ds-hex-dark-text-on-success: #ffffff;
-$ds-hex-dark-text-brand: #FD2330;
-$ds-hex-dark-text-body-link: #65A0FC;
-$ds-hex-dark-text-body-link-visited: #65A0FC;
-$ds-hex-dark-text-positive: #3A8352;
-$ds-hex-dark-icon-primary: #EDEDED;
-$ds-hex-dark-icon-primary-02: #CFCFCF;
+$ds-hex-dark-text-brand: #fd2330;
+$ds-hex-dark-text-body-link: #65a0fc;
+$ds-hex-dark-text-body-link-visited: #65a0fc;
+$ds-hex-dark-text-positive: #3a8352;
+$ds-hex-dark-icon-primary: #ededed;
+$ds-hex-dark-icon-primary-02: #cfcfcf;
 $ds-hex-dark-icon-secondary: #050505;
-$ds-hex-dark-icon-critical: #FD2330;
-$ds-hex-dark-icon-disabled: #B8B8B8;
+$ds-hex-dark-icon-critical: #fd2330;
+$ds-hex-dark-icon-disabled: #b8b8b8;
 $ds-hex-dark-icon-on-brand: #141414;
 $ds-hex-dark-icon-on-critical: #ffffff;
 $ds-hex-dark-icon-on-success: #ffffff;
 $ds-hex-dark-icon-on-business: #ffffff;
-$ds-hex-dark-icon-brand: #FD2330;
-$ds-hex-dark-component-brand: #FD2330;
-$ds-hex-dark-component-business: #3A8352;
-$ds-hex-dark-component-primary: #EDEDED;
-$ds-hex-dark-component-primary-overlay: #ffffff21;
-$ds-hex-dark-component-primary-overlay-02: #9E9E9E;
+$ds-hex-dark-icon-brand: #fd2330;
+$ds-hex-dark-component-brand: #fd2330;
+$ds-hex-dark-component-business: #3a8352;
+$ds-hex-dark-component-primary: #ededed;
+$ds-hex-dark-component-primary-overlay: rgba(255, 255, 255, 0.13);
+$ds-hex-dark-component-primary-overlay-02: #9e9e9e;
 $ds-hex-dark-component-secondary: #050505;
-$ds-hex-dark-component-secondary-overlay: #08080821;
-$ds-hex-dark-component-secondary-overlay-02: #08080833;
-$ds-hex-dark-component-critical: #EF7171;
-$ds-hex-dark-component-critical-overlay: #A51D24;
+$ds-hex-dark-component-secondary-overlay: rgba(8, 8, 8, 0.13);
+$ds-hex-dark-component-secondary-overlay-02: rgba(8, 8, 8, 0.2);
+$ds-hex-dark-component-critical: #ef7171;
+$ds-hex-dark-component-critical-overlay: #a51d24;
 $ds-hex-dark-component-static-white: #ffffff;
-$ds-hex-dark-component-positive: #3A8352;
-$ds-hex-dark-component-primary-02: #CFCFCF;
-$ds-hex-dark-surface-below: #262626;
+$ds-hex-dark-component-positive: #3a8352;
+$ds-hex-dark-component-primary-02: #cfcfcf;
+$ds-hex-dark-surface-below: #171717;
 $ds-hex-dark-surface-background: #050505;
-$ds-hex-dark-surface-raised: #2B2B2B;
-$ds-hex-dark-surface-native-article: #2B2B2B;
-$ds-hex-dark-surface-elevated: #2B2B2B;
+$ds-hex-dark-surface-raised: #2b2b2b;
+$ds-hex-dark-surface-native-article: #2b2b2b;
+$ds-hex-dark-surface-elevated: #2b2b2b;
 $ds-hex-dark-surface-inverted: #ffffff;
-$ds-hex-dark-surface-overlay: #05050580;
-$ds-hex-dark-surface-quiz: #EA3E3F;
-$ds-hex-dark-surface-korsord: #8BB6E8;
-$ds-hex-dark-surface-sudoko: #90D0BD;
-$ds-hex-dark-surface-brand: #DA000D;
-$ds-hex-dark-border-primary: #3B3B3B;
-$ds-hex-dark-border-primary-02: #ffffff66;
-$ds-hex-dark-border-primary-03: #EDEDED;
+$ds-hex-dark-surface-overlay: rgba(5, 5, 5, 0.5);
+$ds-hex-dark-surface-quiz: #ea3e3f;
+$ds-hex-dark-surface-korsord: #8bb6e8;
+$ds-hex-dark-surface-sudoko: #90d0bd;
+$ds-hex-dark-surface-brand: #da000d;
+$ds-hex-dark-surface-breaking: #300407;
+$ds-hex-dark-border-primary: rgba(255, 255, 255, 0.19);
+$ds-hex-dark-border-primary-02: rgba(255, 255, 255, 0.4);
+$ds-hex-dark-border-primary-03: #ededed;
 $ds-hex-dark-border-secondary: #141414;
-$ds-hex-dark-border-business: #3A8352;
-$ds-hex-dark-border-critical: #FD2330;
-$ds-hex-dark-border-focus: #FD2330;
+$ds-hex-dark-border-business: #3a8352;
+$ds-hex-dark-border-critical: #fd2330;
+$ds-hex-dark-border-focus: #fd2330;
 $ds-hex-dark-border-focus-02: #ffffff;
-$ds-hex-dark-border-focus-03: #FD2330;
-$ds-hex-dark-border-focus-04: #3A8352;
-$ds-hex-dark-border-brand: #DA000D;
+$ds-hex-dark-border-focus-03: #fd2330;
+$ds-hex-dark-border-focus-04: #3a8352;
+$ds-hex-dark-border-brand: #fd2330;
 $ds-hex-dark-background-primary: #141414;
 $ds-hex-dark-gradient-content-fade-left: linear-gradient(90deg, #05050500 0%, #050505 100%);
 $ds-hex-dark-gradient-content-fade-right: linear-gradient(-90deg, #05050500 0%, #050505 100%);
 $ds-hex-dark-gradient-content-fade-up: linear-gradient(180deg, #05050500 0%, #050505 100%);
 $ds-hex-dark-gradient-content-fade-up-down: linear-gradient(0deg, #05050500 0%, #050505 100%);
 $ds-hex-dark-gradient-content-fade-down: linear-gradient(0deg, #05050500 0%, #050505 100%);
-$ds-hex-dark-static-red-100: #FAD4D4;
+$ds-hex-dark-static-red-100: #fad4d4;
 $ds-hex-dark-static-black: #141414;
-$ds-hex-dark-static-transparent-black: #14141499;
+$ds-hex-dark-static-transparent-black: rgba(20, 20, 20, 0.6);
 $ds-hex-dark-static-white: #ffffff;
-$ds-hex-dark-static-transparent-white: #ffffff80;
-$ds-hex-dark-static-green-100: #CEE4D6;
-$ds-hex-dark-static-red-300: #EF7171;
-$ds-hex-dark-static-transparent-white-10: #ffffff21;
-$ds-hex-dark-static-kultur: #568CBB;
-$ds-hex-dark-static-economy: #60BCA1;
-$ds-hex-dark-static-sport: #F58D2D;
-$ds-hex-dark-static-neutral-200: #E0E0E0;
-$ds-hex-dark-static-sthlm: #FF589B;
-$ds-hex-dark-static-ad-yellow: #FFEAC2;
-$ds-hex-dark-static-neutral-100: #EDEDED;
-$ds-hex-dark-static-neutral-500: #9E9E9E;
-$ds-hex-dark-static-red-500: #DA000D;
-$ds-hex-dark-static-yellow: #FFE600;
-$ds-hex-dark-static-red-200: #F6ACAD;
-$ds-hex-dark-static-red-0: #FCE8E8;
+$ds-hex-dark-static-transparent-white: rgba(255, 255, 255, 0.5);
+$ds-hex-dark-static-green-100: #cee4d6;
+$ds-hex-dark-static-red-300: #ef7171;
+$ds-hex-dark-static-transparent-white-10: rgba(255, 255, 255, 0.13);
+$ds-hex-dark-static-kultur: #568cbb;
+$ds-hex-dark-static-economy: #60bca1;
+$ds-hex-dark-static-sport: #f58d2d;
+$ds-hex-dark-static-neutral-200: #e0e0e0;
+$ds-hex-dark-static-sthlm: #ff589b;
+$ds-hex-dark-static-ad-yellow: #ffeac2;
+$ds-hex-dark-static-neutral-100: #ededed;
+$ds-hex-dark-static-neutral-500: #9e9e9e;
+$ds-hex-dark-static-red-500: #da000d;
+$ds-hex-dark-static-yellow: #ffe600;
+$ds-hex-dark-static-red-200: #f6acad;
+$ds-hex-dark-static-red-0: #fce8e8;

package/foundations/variables/colorsDnLightTokens.scss

@@ -1,82 +1,83 @@
 $ds-hex-text-primary: #050505;
 $ds-hex-text-primary-02: #666666;
 $ds-hex-text-secondary: #ffffff;
-$ds-hex-text-critical: #DA000D;
+$ds-hex-text-critical: #da000d;
 $ds-hex-text-disabled: #666666;
 $ds-hex-text-on-brand: #ffffff;
 $ds-hex-text-on-business: #ffffff;
 $ds-hex-text-on-critical: #ffffff;
 $ds-hex-text-on-success: #ffffff;
-$ds-hex-text-brand: #DA000D;
-$ds-hex-text-body-link: #4373CE;
-$ds-hex-text-body-link-visited: #4373CE;
-$ds-hex-text-positive: #3A8352;
+$ds-hex-text-brand: #da000d;
+$ds-hex-text-body-link: #4373ce;
+$ds-hex-text-body-link-visited: #4373ce;
+$ds-hex-text-positive: #3a8352;
 $ds-hex-icon-primary: #050505;
 $ds-hex-icon-primary-02: #666666;
 $ds-hex-icon-secondary: #ffffff;
-$ds-hex-icon-critical: #DA000D;
+$ds-hex-icon-critical: #da000d;
 $ds-hex-icon-disabled: #666666;
 $ds-hex-icon-on-brand: #ffffff;
 $ds-hex-icon-on-business: #ffffff;
-$ds-hex-icon-brand: #DA000D;
+$ds-hex-icon-brand: #da000d;
 $ds-hex-icon-on-critical: #ffffff;
 $ds-hex-icon-on-success: #ffffff;
-$ds-hex-component-brand: #DA000D;
-$ds-hex-component-business: #3A8352;
+$ds-hex-component-brand: #da000d;
+$ds-hex-component-business: #3a8352;
 $ds-hex-component-primary: #141414;
-$ds-hex-component-primary-overlay: #08080821;
-$ds-hex-component-primary-overlay-02: #08080833;
+$ds-hex-component-primary-overlay: rgba(8, 8, 8, 0.13);
+$ds-hex-component-primary-overlay-02: rgba(8, 8, 8, 0.2);
 $ds-hex-component-secondary: #ffffff;
-$ds-hex-component-secondary-overlay: #ffffff21;
-$ds-hex-component-secondary-overlay-02: #ffffff33;
-$ds-hex-component-critical: #EA3E3F;
-$ds-hex-component-critical-overlay: #A51D24;
+$ds-hex-component-secondary-overlay: rgba(255, 255, 255, 0.13);
+$ds-hex-component-secondary-overlay-02: rgba(255, 255, 255, 0.2);
+$ds-hex-component-critical: #ea3e3f;
+$ds-hex-component-critical-overlay: #a51d24;
 $ds-hex-component-static-white: #ffffff;
-$ds-hex-component-positive: #3A8352;
-$ds-hex-component-primary-02: #CFCFCF;
-$ds-hex-surface-below: #EDEDED;
-$ds-hex-surface-native-article: #EDEDED;
+$ds-hex-component-positive: #3a8352;
+$ds-hex-component-primary-02: #cfcfcf;
+$ds-hex-surface-below: #f2f2f2;
+$ds-hex-surface-native-article: #ededed;
 $ds-hex-surface-background: #ffffff;
-$ds-hex-surface-raised: #EDEDED;
+$ds-hex-surface-raised: #ededed;
 $ds-hex-surface-elevated: #ffffff;
-$ds-hex-surface-overlay: #05050580;
-$ds-hex-surface-quiz: #EA3E3F;
-$ds-hex-surface-korsord: #8BB6E8;
-$ds-hex-surface-sudoko: #90D0BD;
-$ds-hex-surface-brand: #DA000D;
+$ds-hex-surface-overlay: rgba(5, 5, 5, 0.5);
+$ds-hex-surface-quiz: #ea3e3f;
+$ds-hex-surface-korsord: #8bb6e8;
+$ds-hex-surface-sudoko: #90d0bd;
+$ds-hex-surface-brand: #da000d;
 $ds-hex-surface-inverted: #141414;
-$ds-hex-border-primary: #08080821;
-$ds-hex-border-primary-02: #08080866;
+$ds-hex-surface-breaking: #300407;
+$ds-hex-border-primary: rgba(5, 5, 5, 0.13);
+$ds-hex-border-primary-02: rgba(8, 8, 8, 0.4);
 $ds-hex-border-primary-03: #050505;
 $ds-hex-border-secondary: #ffffff;
-$ds-hex-border-business: #3A8352;
-$ds-hex-border-critical: #DA000D;
-$ds-hex-border-focus: #DA000D;
+$ds-hex-border-business: #3a8352;
+$ds-hex-border-critical: #da000d;
+$ds-hex-border-focus: #da000d;
 $ds-hex-border-focus-02: #141414;
-$ds-hex-border-focus-03: #DA000D;
-$ds-hex-border-focus-04: #3A8352;
-$ds-hex-border-brand: #DA000D;
+$ds-hex-border-focus-03: #da000d;
+$ds-hex-border-focus-04: #3a8352;
+$ds-hex-border-brand: #da000d;
 $ds-hex-background-primary: #ffffff;
-$ds-hex-static-red-100: #FAD4D4;
+$ds-hex-static-red-100: #fad4d4;
 $ds-hex-static-black: #141414;
-$ds-hex-static-transparent-black: #14141499;
+$ds-hex-static-transparent-black: rgba(20, 20, 20, 0.6);
 $ds-hex-static-white: #ffffff;
-$ds-hex-static-transparent-white: #ffffff80;
-$ds-hex-static-green-100: #CEE4D6;
-$ds-hex-static-red-300: #EF7171;
-$ds-hex-static-transparent-white-10: #ffffff21;
-$ds-hex-static-kultur: #568CBB;
-$ds-hex-static-economy: #60BCA1;
-$ds-hex-static-sport: #F58D2D;
-$ds-hex-static-neutral-200: #E0E0E0;
-$ds-hex-static-sthlm: #FF589B;
-$ds-hex-static-ad-yellow: #FFEAC2;
-$ds-hex-static-neutral-100: #EDEDED;
-$ds-hex-static-neutral-500: #9E9E9E;
-$ds-hex-static-red-500: #DA000D;
-$ds-hex-static-yellow: #FFE600;
-$ds-hex-static-red-200: #F6ACAD;
-$ds-hex-static-red-0: #FCE8E8;
+$ds-hex-static-transparent-white: rgba(255, 255, 255, 0.5);
+$ds-hex-static-green-100: #cee4d6;
+$ds-hex-static-red-300: #ef7171;
+$ds-hex-static-transparent-white-10: rgba(255, 255, 255, 0.13);
+$ds-hex-static-kultur: #568cbb;
+$ds-hex-static-economy: #60bca1;
+$ds-hex-static-sport: #f58d2d;
+$ds-hex-static-neutral-200: #e0e0e0;
+$ds-hex-static-sthlm: #ff589b;
+$ds-hex-static-ad-yellow: #ffeac2;
+$ds-hex-static-neutral-100: #ededed;
+$ds-hex-static-neutral-500: #9e9e9e;
+$ds-hex-static-red-500: #da000d;
+$ds-hex-static-yellow: #ffe600;
+$ds-hex-static-red-200: #f6acad;
+$ds-hex-static-red-0: #fce8e8;
 $ds-hex-gradient-content-fade-left: linear-gradient(90deg, #ffffff00 0%, #ffffff 100%);
 $ds-hex-gradient-content-fade-right: linear-gradient(-90deg, #ffffff00 0%, #ffffff 100%);
 $ds-hex-gradient-content-fade-up: linear-gradient(180deg, #ffffff00 0%, #ffffff 100%);

package/foundations/variables/typographyFontWeight.scss

@@ -2,3 +2,4 @@ $ds-fontweight-regular: Regular;
 $ds-fontweight-medium: Medium;
 $ds-fontweight-semibold: SemiBold;
 $ds-fontweight-bold: Bold;
+$ds-fontweight-extrabold: ExtraBold;

package/foundations/variables/typographyTokensList.scss

@@ -15,6 +15,7 @@ $ds-typography-detaildirekt-header: 'detaildirekt-header';
 $ds-typography-detailteaser-standard-compact: 'detailteaser-standard-compact';
 $ds-typography-detailteaser-standard-compact-opinion: 'detailteaser-standard-compact-opinion';
 $ds-typography-detailteaser-large: 'detailteaser-large';
+$ds-typography-detailteaser-breaking: 'detailteaser-breaking';
 $ds-typography-detailteaser-large-opinion: 'detailteaser-large-opinion';
 $ds-typography-detailteaser-large-storRubrik: 'detailteaser-large-storRubrik';
 $ds-typography-detailteaser-standard: 'detailteaser-standard';

package/foundations/variables/typographyTokensScreenExtraLarge.scss

@@ -54,15 +54,22 @@ $typographyTokensScreenExtraLarge: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
     lineHeight: 1.1,
-    fontSize: 56,
+    fontSize: 48,
+    letterSpacing: 0
+  ),
+  detailteaser-breaking: (
+    fontFamily: "DN Serif Display",
+    fontWeight: ExtraBold,
+    lineHeight: 1.1,
+    fontSize: 72,
     letterSpacing: 0
   ),
   detailteaser-standard: (
     fontFamily: "DN Serif Headline",
-    fontSize: 36,
     lineHeight: 1.1,
     letterSpacing: 0,
-    fontWeight: Bold
+    fontWeight: Bold,
+    fontSize: 28
   ),
   detailteaser-standard-compact: (
     fontFamily: "DN Serif Headline",
@@ -74,7 +81,7 @@ $typographyTokensScreenExtraLarge: (
   detailteaser-large-compact: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
-    fontSize: 40,
+    fontSize: 36,
     lineHeight: 1.1,
     letterSpacing: 0
   ),

package/foundations/variables/typographyTokensScreenLarge.scss

@@ -93,6 +93,13 @@ $typographyTokensScreenLarge: (
     fontSize: 40,
     letterSpacing: 0
   ),
+  detailteaser-breaking: (
+    fontFamily: "DN Serif Display",
+    fontWeight: ExtraBold,
+    lineHeight: 1.1,
+    fontSize: 48,
+    letterSpacing: 0
+  ),
   detailteaser-large-opinion: (
     fontFamily: "DN Serif Display",
     fontWeight: Regular,
@@ -110,10 +117,10 @@ $typographyTokensScreenLarge: (
   ),
   detailteaser-standard: (
     fontFamily: "DN Serif Headline",
-    fontSize: 26,
     lineHeight: 1.1,
     letterSpacing: 0,
-    fontWeight: Bold
+    fontWeight: Bold,
+    fontSize: 28
   ),
   detailteaser-standard-opinion: (
     fontFamily: "DN Serif Headline",
@@ -133,7 +140,7 @@ $typographyTokensScreenLarge: (
   detailteaser-large-compact: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
-    fontSize: 40,
+    fontSize: 32,
     lineHeight: 1.1,
     letterSpacing: 0
   ),

package/foundations/variables/typographyTokensScreenSmall.scss

@@ -122,6 +122,13 @@ $typographyTokensScreenSmall: (
     fontSize: 26,
     letterSpacing: 0
   ),
+  detailteaser-breaking: (
+    fontFamily: "DN Serif Display",
+    fontWeight: ExtraBold,
+    lineHeight: 1.1,
+    fontSize: 40,
+    letterSpacing: 0
+  ),
   detailteaser-large-opinion: (
     fontFamily: "DN Serif Headline",
     fontWeight: Regular,
@@ -139,10 +146,10 @@ $typographyTokensScreenSmall: (
   ),
   detailteaser-standard: (
     fontFamily: "DN Serif Headline",
-    fontSize: 20,
     lineHeight: 1.2,
     letterSpacing: 0,
-    fontWeight: Bold
+    fontWeight: Bold,
+    fontSize: 20
   ),
   detailteaser-standard-opinion: (
     fontFamily: "DN Serif Headline",
@@ -156,14 +163,14 @@ $typographyTokensScreenSmall: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
     lineHeight: 1.2,
-    fontSize: 17,
+    fontSize: 18,
     letterSpacing: 0
   ),
   detailteaser-large-compact: (
     fontFamily: "DN Serif Headline",
     fontWeight: Bold,
-    fontSize: 26,
-    lineHeight: 1.1,
+    fontSize: 20,
+    lineHeight: 1.2,
     letterSpacing: 0
   ),
   detailteaser-large-compact-opinion: (
@@ -205,7 +212,7 @@ $typographyTokensScreenSmall: (
   detailteaser-tipsa: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
-    fontSize: 17,
+    fontSize: 18,
     lineHeight: 1.2,
     letterSpacing: 0
   ),

package/package.json

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

package/tokens/colors-css-variables.json

@@ -46,6 +46,7 @@
   "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)",
@@ -82,4 +83,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,71 +1,72 @@
 {
   "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"
+    "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"
+    "brand": "#fd2330"
   },
   "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"
   },
   "background": {
     "primary": "#141414"
@@ -78,25 +79,25 @@
     "content-fade-down": "linear-gradient(0deg, #05050500 0%, #050505 100%)"
   },
   "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"
   }
-}
+}

package/tokens/colors-light-mode.json

@@ -3,94 +3,95 @@
     "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"
+    "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"
   },
   "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"
   },
   "background": {
     "primary": "#ffffff"
   },
   "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"
   },
   "gradient": {
     "content-fade-left": "linear-gradient(90deg, #ffffff00 0%, #ffffff 100%)",
@@ -98,4 +99,4 @@
     "content-fade-up": "linear-gradient(180deg, #ffffff00 0%, #ffffff 100%)",
     "content-fade-down": "linear-gradient(0deg, #ffffff00 0%, #ffffff 100%)"
   }
-}
+}

package/tokens/typography-list.json

@@ -16,6 +16,7 @@
   "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'",