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

package/CHANGELOG.md

@@ -4,12 +4,43 @@ 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)
+
+
+### Features
+
+* **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
@@ -45,7 +76,6 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 ## [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)
 
-
 ### ⚠ BREAKING CHANGES
 
 * **web:** JS imports requires file extension
@@ -54,7 +84,6 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 * **web:** less specific export ([#1436](https://github.com/BonnierNews/dn-design-system/issues/1436)) ([9da4652](https://github.com/BonnierNews/dn-design-system/commit/9da46527d7e63c800a8391fe2280717e4dd733cd))
 
-
 ### Maintenance
 
 * **deps-dev:** bump @actions/core from 1.10.1 to 1.11.1 ([#1433](https://github.com/BonnierNews/dn-design-system/issues/1433)) ([0aa8f7c](https://github.com/BonnierNews/dn-design-system/commit/0aa8f7c87c052599ec75e19c0a03921ef6417afd))
@@ -87,6 +116,13 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 * prerelease packages ([ec0ca89](https://github.com/BonnierNews/dn-design-system/commit/ec0ca895f0e4995f0b700ee40140920f3105ef86))
 * revert "chore(deps-dev): bump @react-native/metro-config from 0.75.2 to 0.75.4" ([#1435](https://github.com/BonnierNews/dn-design-system/issues/1435)) ([97a0feb](https://github.com/BonnierNews/dn-design-system/commit/97a0febdabed45c94a01b0600a040d8eb20dbf46))
 
+## [20.7.0-beta.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.6.0...@bonniernews/dn-design-system-web@20.7.0-beta.0) (2024-10-17)
+
+
+### Features
+
+* **web:** one level of bauta with background color ([8f843f7](https://github.com/BonnierNews/dn-design-system/commit/8f843f7f24352feaa89b9c2f332a070845749f0f))
+
 ## [20.6.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.6.0...@bonniernews/dn-design-system-web@20.6.1) (2024-10-16)
 
 
@@ -94,6 +130,7 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 * move to figma variables ([#1419](https://github.com/BonnierNews/dn-design-system/issues/1419)) ([96eaa70](https://github.com/BonnierNews/dn-design-system/commit/96eaa701b712e66a0597b2524ae31db34eea6294))
 * prerelease packages ([c2ddd94](https://github.com/BonnierNews/dn-design-system/commit/c2ddd9434e69a243959a1a510394cdacd791ef21))
+
 * **web:** running multiple screenshots via test_ids ([#1426](https://github.com/BonnierNews/dn-design-system/issues/1426)) ([996e498](https://github.com/BonnierNews/dn-design-system/commit/996e49813c9a1124cad803760437fba4420cbce7))
 
 ## [20.6.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.5.4...@bonniernews/dn-design-system-web@20.6.0) (2024-10-09)

package/components/group-header/group-header.njk

@@ -13,6 +13,7 @@
     classNamePrefix + (params.type or "icon"),
     classNamePrefix + params.variant if params.variant,
     classNamePrefix + 'bottom-border' if params.showBottomBorder,
+    'ds-dark' if params.variant == 'bauta',
     params.classNames if params.classNames
   ] | join(" ") %}
 
@@ -45,7 +46,7 @@
     {% else %}
       {{ groupHeaderInner | safe }}
     {% endif %}
-    {# there is no static-white toggle btn so it is disabled for bauta/xl for now #}
+    {# there is no static-white toggle btn so it is disabled for bauta for now #}
     {% if params.type == 'toggle' and not params.variant %}
       {{ ButtonToggle({
         variant: "brand",

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

@@ -23,15 +23,7 @@ $ds-group-header__icon-size: 24px;
   }
 
   &--bauta {
-    --group-header-background: #{$ds-theme-color};
-    --group-header-color: #{$ds-color-text-on-brand};
-    --group-header-icon-color: #{$ds-color-icon-on-brand};
-  }
-
-  &--bautaxl {
-    --group-header-background: #{$ds-color-static-black};
-    --group-header-color: #{$ds-color-static-yellow};
-    --group-header-icon-color: #{$ds-color-icon-on-brand};
+    --group-header-background: #{$ds-color-surface-breaking};
   }
 
   &--toggle,
@@ -116,10 +108,6 @@ $ds-group-header__icon-size: 24px;
     padding-bottom: ds-spacing($ds-s-075) - ds-border-width(x1);
   }
 
-  &--bautaxl .ds-group-header__title {
-    @include ds-typography($ds-typography-detailbaota-xl-label);
-  }
-
   .ds-group-header__image {
     margin-left: ds-spacing($ds-s-100);
     align-self: center;

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-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.njk

@@ -8,7 +8,8 @@
     componentClassName,
     classNamePrefix + params.areaType if params.areaType,
     'ds-theme--' + params.theme if params.theme,
-    params.classNames if params.classNames
+    params.classNames if params.classNames,
+    'ds-dark' if params.areaType == 'bauta'
   ] | join(" ") %}
   {%- set attributes = getAttributes(params.attributes) %}
 

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;
@@ -46,38 +57,23 @@
     display: none;
   }
 
-  &.ds-teaser-package--bautaxl {
-    &::after {
-      background-color: transparent;
+  &.ds-teaser-package--bauta {
+    background-color: $ds-color-surface-breaking;
+
+    & .ds-teaser,
+    & .ds-teaser--slideshow {
+      background-color: $ds-color-surface-breaking;
     }
 
-    .ds-group-header + .ds-teaser--large:not(.ds-teaser--large-italic):not(.ds-teaser--large-big-italic) {
-      .ds-teaser__title {
-        @include ds-typography($ds-typography-detailteaser-baotaxl);
+    .ds-split-container {
+      background-color: $ds-color-surface-breaking;
+      &::after {
+        background-color: $ds-color-border-primary;
       }
+    }
 
-      @include ds-mq-only-breakpoint(mobile) {
-        background-color: $ds-color-static-black;
-        .ds-teaser__title,
-        .ds-teaser__text {
-          color: $ds-color-static-white;
-        }
-        .ds-teaser-dot {
-          color: $ds-color-static-red-300;
-        }
-        .ds-teaser__vignette,
-        .ds-teaser__sticker {
-          color: $ds-color-static-red-300;
-        }
-        &::after {
-          background-color: $ds-color-static-transparent-white-10;
-        }
-
-        & + .ds-teaser::after,
-        & + .ds-split-container::after {
-          display: none;
-        }
-      }
+    & > .ds-teaser::after {
+      background-color: $ds-color-border-primary;
     }
   }
 }

package/components/teaser-split/teaser-split.njk

@@ -78,7 +78,7 @@
   {%- set classNamePrefix = componentClassName + "--" %}
   {%- set classes = [
     componentClassName,
-    classNamePrefix + params.areaType if params.areaType == "bauta" or params.areaType == "bautaxl",
+    classNamePrefix + params.areaType if params.areaType == "bauta",
     "ds-theme--" + params.theme if params.theme,
     params.classNames if params.classNames
   ] | join(" ") %}

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/foundations/helpers/colors.scss

@@ -17,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.0.2",
+  "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'",