@bonniernews/dn-design-system-web 34.2.2 → 36.0.0

package/CHANGELOG.md

@@ -4,6 +4,42 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [36.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@35.0.0...@bonniernews/dn-design-system-web@36.0.0) (2026-01-08)
+
+
+### ⚠ BREAKING CHANGES
+
+* **web:** We renamed the radio button component to make it clear that it takes a list of radio buttons. It is now Radio Button Group
+
+### Bug Fixes
+
+* **web:** radio button renamed to radio button group ([#1977](https://github.com/BonnierNews/dn-design-system/issues/1977)) ([89e83c6](https://github.com/BonnierNews/dn-design-system/commit/89e83c636225652660c486045015c216b203deac))
+
+
+### Maintenance
+
+* **app:** script for dynamicColorsIOS ([#1969](https://github.com/BonnierNews/dn-design-system/issues/1969)) ([78b4ab7](https://github.com/BonnierNews/dn-design-system/commit/78b4ab740578ce030e87adc2e43bfdb1d6c2ea22))
+* **foundations:** fix token check security ([#1976](https://github.com/BonnierNews/dn-design-system/issues/1976)) ([600dc63](https://github.com/BonnierNews/dn-design-system/commit/600dc63f0bb818628a160f5b9ee9036d080e4a76))
+* prerelease packages ([ada232c](https://github.com/BonnierNews/dn-design-system/commit/ada232cbd6791991d499944d21ec5a5e3c15c66e))
+* **web:** fix build script security ([#1975](https://github.com/BonnierNews/dn-design-system/issues/1975)) ([9a3bf7d](https://github.com/BonnierNews/dn-design-system/commit/9a3bf7d2735ebfb73e39efc614327f50a6163ded))
+
+## [35.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@34.2.2...@bonniernews/dn-design-system-web@35.0.0) (2025-12-10)
+
+
+### ⚠ BREAKING CHANGES
+
+* **foundations:** update variables (#1968)
+
+### Maintenance
+
+* **deps:** bump @react-native-community/datetimepicker from 8.4.4 to 8.5.1 ([#1960](https://github.com/BonnierNews/dn-design-system/issues/1960)) ([ea1d941](https://github.com/BonnierNews/dn-design-system/commit/ea1d9410f5ad3dac71eb0e7f2c8dfdbc99ca9132))
+* **foundations:** remove app from designsystemet.dn.se and old paths on server ([#1966](https://github.com/BonnierNews/dn-design-system/issues/1966)) ([46e9260](https://github.com/BonnierNews/dn-design-system/commit/46e926008aeee903d590ae23aec54a643eb833de))
+* **foundations:** update variables ([#1968](https://github.com/BonnierNews/dn-design-system/issues/1968)) ([b5c089c](https://github.com/BonnierNews/dn-design-system/commit/b5c089cafff5b538b6ec112516861aa19fe8a828))
+* prerelease packages ([04ae6bb](https://github.com/BonnierNews/dn-design-system/commit/04ae6bb915728419623f3bb52fca6e083478663f))
+* prerelease packages ([04f25cf](https://github.com/BonnierNews/dn-design-system/commit/04f25cfc873eb3aeb555da2090bd53c9c4c6264f))
+* **web:** remove prerelease package as it can't publish to npm ([#1965](https://github.com/BonnierNews/dn-design-system/issues/1965)) ([8337bde](https://github.com/BonnierNews/dn-design-system/commit/8337bde491fdf8cb290a7f092db3f41223e5aa0e))
+* **web:** remove screenshot update in github action ([#1964](https://github.com/BonnierNews/dn-design-system/issues/1964)) ([b9cda9f](https://github.com/BonnierNews/dn-design-system/commit/b9cda9f93415be902a17678bad797111ade98097))
+
 ## [34.2.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@34.2.1...@bonniernews/dn-design-system-web@34.2.2) (2025-12-05)
 
 

package/components/disclaimer/disclaimer.scss

@@ -79,7 +79,7 @@ $ds-btn-outlined__border-width: ds-border-width(xxs);
   &.ds-disclaimer--native {
     .ds-disclaimer__body-html,
     .ds-disclaimer__icon-wrapper {
-      background-color: $ds-color-surface-ad-yellow;
+      background-color: $ds-color-surface-native-subtle;
     }
 
     .ds-icon,

package/components/list-item/list-item-types.ts

@@ -3,7 +3,7 @@ import { ComponentChildren } from 'preact'
 import type { DsIcon } from '@bonniernews/dn-design-system-web/types-lib/ds-icon.d.ts'
 
 import { ButtonToggleStandardProps } from '../button/button-types'
-import { ButtonProps } from '../radio-button/radio-button'
+import type { RadioButtonProps } from '../radio-button-group/radio-button-group'
 import { SwitchInnerProps } from '../switch/switch'
 
 export interface ListItemSharedProps {
@@ -20,7 +20,7 @@ export interface ListItemSharedProps {
 
 export interface ListItemBaseProps extends ListItemSharedProps {
   listItemType: 'accordion' | 'checkbox' | 'radio' | 'switch' | 'image' | 'standard' | 'toggle'
-  radioButtons?: ButtonProps[]
+  radioButtons?: RadioButtonProps[]
   href?: string
   leadingIcon?: DsIcon
   trailingIcon?: DsIcon

package/components/list-item/list-item.njk

@@ -1,7 +1,6 @@
 {% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
 {% from '@bonniernews/dn-design-system-web/components/switch/switch.njk' import Switch %}
 {% from '@bonniernews/dn-design-system-web/components/checkbox/checkbox.njk' import Checkbox %}
-{% from '@bonniernews/dn-design-system-web/components/radio-button/radio-button.njk' import RadioButton %}
 {% from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.njk' import ButtonToggle %}
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 
@@ -99,19 +98,6 @@
       {% endset %}
       {{ caller() if caller }}
     </label>
-  {% elif element == 'radio' %}
-    <label class="{{ classes }}" for="{{ params.id }}" {{- attributes | safe }}>
-      {% set iconLeftSvg %}
-        {{ RadioButton({
-          name: params.name,
-          condensed: true,
-          disabled: params.disabled,
-          forcePx: params.forcePx,
-          buttons: [{ id: params.id, checked: params.selected, attributes: params.elementAttributes, classNames: params.elementClassNames }]
-        })}}
-      {% endset %}
-      {{ caller() if caller }}
-    </label>
   {% elif element == 'switch' %}
     <label class="{{ classes }}" for="{{ params.name }}" {{- attributes | safe }} >
       {% set iconRightSvg %}

package/components/list-item/list-item.scss

@@ -2,7 +2,7 @@
 @use "../icon-sprite/icon-sprite.scss";
 @use "../checkbox/checkbox.scss" as *;
 @use "../switch/switch.scss" as *;
-@use "../radio-button/radio-button.scss" as *;
+@use "../radio-button-group/radio-button-group.scss" as *;
 @use "../button-toggle/button-toggle.scss" as *;
 
 $ds-list-item__icon-size: 24px;

package/components/{radio-button → radio-button-group}/README.md

@@ -1,15 +1,16 @@
-RadioButton
-===========
+RadioButtonGroup
+================
 
-*   GitHub: [BonnierNews/dn-design-system/web/src/components/radio-button](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/radio-button)
-*   Storybook: [Checkbox](https://designsystem.dn.se/?path=/docs/basic-form-radiobutton--docs)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/radio-button-group](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/radio-button-group)
+*   Storybook: [RadioButtonGroup](https://designsystem.dn.se/?path=/docs/basic-form-radiobuttongroup--docs)
 
-The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/radio-button/radio-button.scss`
+This component is used to render a group of radio buttons.
+
+The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/radio-button-group/radio-button-group.scss`
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
-| buttons\* | ButtonProps\[\] | \- |
-| id\* | string | \- |
+| buttons\* | RadioButtonProps\[\] | \- |
 | name | string | \- |
 | error | boolean | \- |
 | errorMessage | string | \- |
@@ -22,12 +23,18 @@ The component will not include styling by itself. Make sure to include the right
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
-<RadioButton
+<RadioButtonGroup
   buttons={[
     {
-      id: 'my_radio_name',
-      selected: false,
-      value: 'my_radio_value'
+      id: 'my_radio_name1',
+      label: 'My radio 1',
+      selected: true,
+      value: 'my_radio_value1'
+    },
+    {
+      id: 'my_radio_name2',
+      label: 'My radio 2',
+      value: 'my_radio_value2'
     }
   ]}
   name="my_radio_name"

package/components/{radio-button/radio-button.scss → radio-button-group/radio-button-group.scss}

@@ -4,7 +4,7 @@
 
 $ds-radio-btn__icon-size: 24px;
 
-.ds-radio-btn {
+.ds-radio-btn-group {
   display: inline-flex;
   flex-direction: column;
   align-items: flex-start;
@@ -112,7 +112,7 @@ $ds-radio-btn__icon-size: 24px;
   }
 }
 
-.ds-radio-btn input:disabled + .ds-radio-btn__inner {
+.ds-radio-btn-group input:disabled + .ds-radio-btn__inner {
   cursor: not-allowed;
   .ds-radio-btn__icon {
     color: $ds-color-text-primary-disabled;

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

@@ -3,7 +3,7 @@
 
 .ds-teaser.ds-teaser--native {
   overflow: hidden;
-  border-bottom: 4px solid $ds-color-surface-ad-yellow;
+  border-bottom: 4px solid $ds-color-surface-native-subtle;
 
   &:focus-visible {
     outline: none;
@@ -151,7 +151,7 @@
   }
 
   .ds-teaser__ad-bar {
-    background-color: $ds-color-surface-ad-yellow;
+    background-color: $ds-color-surface-native-subtle;
     display: flex;
     height: ds-px-to-rem(40px);
     font-family: $ds-font--sans;

package/foundations/variables/colorsCssVariables.scss

@@ -1,9 +1,9 @@
-$ds-color-surface-foreground: var(--ds-color-surface-foreground);
 $ds-color-surface-primary: var(--ds-color-surface-primary);
 $ds-color-surface-primary-raised-soft: var(--ds-color-surface-primary-raised-soft);
 $ds-color-surface-primary-raised-strong: var(--ds-color-surface-primary-raised-strong);
 $ds-color-surface-primary-elevated: var(--ds-color-surface-primary-elevated);
 $ds-color-surface-primaryinvert: var(--ds-color-surface-primaryinvert);
+$ds-color-surface-foreground: var(--ds-color-surface-foreground);
 $ds-color-surface-primaryinvert-raised-soft: var(--ds-color-surface-primaryinvert-raised-soft);
 $ds-color-surface-primaryinvert-elevated: var(--ds-color-surface-primaryinvert-elevated);
 $ds-color-surface-brand: var(--ds-color-surface-brand);
@@ -11,8 +11,8 @@ $ds-color-surface-success: var(--ds-color-surface-success);
 $ds-color-surface-culture: var(--ds-color-surface-culture);
 $ds-color-surface-breaking: var(--ds-color-surface-breaking);
 $ds-color-surface-overlay: var(--ds-color-surface-overlay);
-$ds-color-surface-ad-yellow: var(--ds-color-surface-ad-yellow);
-$ds-color-surface-native-article: var(--ds-color-surface-native-article);
+$ds-color-surface-native: var(--ds-color-surface-native);
+$ds-color-surface-native-subtle: var(--ds-color-surface-native-subtle);
 $ds-color-surface-quiz: var(--ds-color-surface-quiz);
 $ds-color-surface-media: var(--ds-color-surface-media);
 $ds-color-border-primary: var(--ds-color-border-primary);
@@ -40,14 +40,35 @@ $ds-color-gradients-primary-start: var(--ds-color-gradients-primary-start);
 $ds-color-gradients-primary-end: var(--ds-color-gradients-primary-end);
 $ds-color-gradients-overlay-start: var(--ds-color-gradients-overlay-start);
 $ds-color-gradients-overlay-end: var(--ds-color-gradients-overlay-end);
-$ds-color-button-primary-default: var(--ds-color-button-primary-default);
-$ds-color-button-primary-hover: var(--ds-color-button-primary-hover);
-$ds-color-button-primary-pressed: var(--ds-color-button-primary-pressed);
-$ds-color-button-primary-disabled: var(--ds-color-button-primary-disabled);
-$ds-color-button-secondary-filled-default: var(--ds-color-button-secondary-filled-default);
-$ds-color-button-secondary-filled-hover: var(--ds-color-button-secondary-filled-hover);
-$ds-color-button-secondary-filled-pressed: var(--ds-color-button-secondary-filled-pressed);
-$ds-color-button-secondary-filled-disabled: var(--ds-color-button-secondary-filled-disabled);
+$ds-color-button-primary-bg-default: var(--ds-color-button-primary-bg-default);
+$ds-color-button-primary-bg-hover: var(--ds-color-button-primary-bg-hover);
+$ds-color-button-primary-bg-pressed: var(--ds-color-button-primary-bg-pressed);
+$ds-color-button-primary-bg-disabled: var(--ds-color-button-primary-bg-disabled);
+$ds-color-button-primary-black-bg-default: var(--ds-color-button-primary-black-bg-default);
+$ds-color-button-primary-black-bg-hover: var(--ds-color-button-primary-black-bg-hover);
+$ds-color-button-primary-black-bg-pressed: var(--ds-color-button-primary-black-bg-pressed);
+$ds-color-button-primary-black-bg-disabled: var(--ds-color-button-primary-black-bg-disabled);
+$ds-color-button-secondary-filled-bg-default: var(--ds-color-button-secondary-filled-bg-default);
+$ds-color-button-secondary-filled-bg-hover: var(--ds-color-button-secondary-filled-bg-hover);
+$ds-color-button-secondary-filled-bg-pressed: var(--ds-color-button-secondary-filled-bg-pressed);
+$ds-color-button-secondary-filled-bg-disabled: var(--ds-color-button-secondary-filled-bg-disabled);
+$ds-color-button-secondary-outline-outline-default: var(--ds-color-button-secondary-outline-outline-default);
+$ds-color-button-secondary-outline-outline-hover: var(--ds-color-button-secondary-outline-outline-hover);
+$ds-color-button-secondary-outline-outline-pressed: var(--ds-color-button-secondary-outline-outline-pressed);
+$ds-color-button-secondary-outline-bg-disabled: var(--ds-color-button-secondary-outline-bg-disabled);
+$ds-color-button-game-on-bg-default: var(--ds-color-button-game-on-bg-default);
+$ds-color-button-game-on-bg-hover: var(--ds-color-button-game-on-bg-hover);
+$ds-color-button-game-on-bg-pressed: var(--ds-color-button-game-on-bg-pressed);
+$ds-color-button-game-on-text-default: var(--ds-color-button-game-on-text-default);
+$ds-color-button-game-on-outline-default: var(--ds-color-button-game-on-outline-default);
+$ds-color-button-game-off-bg-default: var(--ds-color-button-game-off-bg-default);
+$ds-color-button-game-off-bg-hover: var(--ds-color-button-game-off-bg-hover);
+$ds-color-button-game-off-bg-pressed: var(--ds-color-button-game-off-bg-pressed);
+$ds-color-button-game-off-text-default: var(--ds-color-button-game-off-text-default);
+$ds-color-button-game-off-outline-default: var(--ds-color-button-game-off-outline-default);
+$ds-color-button-game-hint-bg-default: var(--ds-color-button-game-hint-bg-default);
+$ds-color-button-game-hint-outline-default: var(--ds-color-button-game-hint-outline-default);
+$ds-color-button-game-hint-text-default: var(--ds-color-button-game-hint-text-default);
 $ds-color-brand-100: var(--ds-color-brand-100);
 $ds-color-brand-200: var(--ds-color-brand-200);
 $ds-color-brand-300: var(--ds-color-brand-300);

package/foundations/variables/colorsDnDark.scss

@@ -1,9 +1,9 @@
-$ds-hex-dark-surface-foreground: #0d0d0d;
 $ds-hex-dark-surface-primary: #171717;
 $ds-hex-dark-surface-primary-raised-soft: #242424;
 $ds-hex-dark-surface-primary-raised-strong: #333333;
 $ds-hex-dark-surface-primary-elevated: #333333;
 $ds-hex-dark-surface-primaryinvert: #ffffff;
+$ds-hex-dark-surface-foreground: #0d0d0d;
 $ds-hex-dark-surface-primaryinvert-raised-soft: rgba(5, 5, 5, 0.05);
 $ds-hex-dark-surface-primaryinvert-elevated: #ffffff;
 $ds-hex-dark-surface-brand: #da000d;
@@ -11,8 +11,8 @@ $ds-hex-dark-surface-success: #3a8352;
 $ds-hex-dark-surface-culture: #227ac3;
 $ds-hex-dark-surface-breaking: #320b0e;
 $ds-hex-dark-surface-overlay: rgba(5, 5, 5, 0.5);
-$ds-hex-dark-surface-ad-yellow: #ffeac6;
-$ds-hex-dark-surface-native-article: #2b2b2b;
+$ds-hex-dark-surface-native: #ffe380;
+$ds-hex-dark-surface-native-subtle: #1f1e19;
 $ds-hex-dark-surface-quiz: #ea3e3f;
 $ds-hex-dark-surface-media: #000000;
 $ds-hex-dark-border-primary: rgba(255, 255, 255, 0.1);
@@ -40,14 +40,35 @@ $ds-hex-dark-gradients-primary-start: #171717;
 $ds-hex-dark-gradients-primary-end: rgba(23, 23, 23, 0);
 $ds-hex-dark-gradients-overlay-start: rgba(36, 36, 36, 0.75);
 $ds-hex-dark-gradients-overlay-end: rgba(36, 36, 36, 0);
-$ds-hex-dark-button-primary-default: #da000d;
-$ds-hex-dark-button-primary-hover: #b8000b;
-$ds-hex-dark-button-primary-pressed: #b8000b;
-$ds-hex-dark-button-primary-disabled: #b8000b;
-$ds-hex-dark-button-secondary-filled-default: #da000d;
-$ds-hex-dark-button-secondary-filled-hover: #b8000b;
-$ds-hex-dark-button-secondary-filled-pressed: #b8000b;
-$ds-hex-dark-button-secondary-filled-disabled: #b8000b;
+$ds-hex-dark-button-primary-bg-default: #da000d;
+$ds-hex-dark-button-primary-bg-hover: #b8000b;
+$ds-hex-dark-button-primary-bg-pressed: #b8000b;
+$ds-hex-dark-button-primary-bg-disabled: #242424;
+$ds-hex-dark-button-primary-black-bg-default: #ffffff;
+$ds-hex-dark-button-primary-black-bg-hover: #f2f2f2;
+$ds-hex-dark-button-primary-black-bg-pressed: #f2f2f2;
+$ds-hex-dark-button-primary-black-bg-disabled: #242424;
+$ds-hex-dark-button-secondary-filled-bg-default: #333333;
+$ds-hex-dark-button-secondary-filled-bg-hover: #cdcdcd;
+$ds-hex-dark-button-secondary-filled-bg-pressed: #cdcdcd;
+$ds-hex-dark-button-secondary-filled-bg-disabled: #b8000b;
+$ds-hex-dark-button-secondary-outline-outline-default: rgba(255, 255, 255, 0.1);
+$ds-hex-dark-button-secondary-outline-outline-hover: rgba(255, 255, 255, 0.25);
+$ds-hex-dark-button-secondary-outline-outline-pressed: rgba(255, 255, 255, 0.25);
+$ds-hex-dark-button-secondary-outline-bg-disabled: #242424;
+$ds-hex-dark-button-game-on-bg-default: #227ac3;
+$ds-hex-dark-button-game-on-bg-hover: #227ac3;
+$ds-hex-dark-button-game-on-bg-pressed: #227ac3;
+$ds-hex-dark-button-game-on-text-default: #ffffff;
+$ds-hex-dark-button-game-on-outline-default: #227ac3;
+$ds-hex-dark-button-game-off-bg-default: #372c25;
+$ds-hex-dark-button-game-off-bg-hover: #372c25;
+$ds-hex-dark-button-game-off-bg-pressed: #372c25;
+$ds-hex-dark-button-game-off-text-default: #ffffff;
+$ds-hex-dark-button-game-off-outline-default: rgba(5, 5, 5, 0);
+$ds-hex-dark-button-game-hint-bg-default: #1f272e;
+$ds-hex-dark-button-game-hint-outline-default: #227ac3;
+$ds-hex-dark-button-game-hint-text-default: #ffffff;
 $ds-hex-dark-brand-100: #ffd0d3;
 $ds-hex-dark-brand-200: #ffa9ae;
 $ds-hex-dark-brand-300: #ff757d;

package/foundations/variables/colorsDnLight.scss

@@ -1,9 +1,9 @@
-$ds-hex-surface-foreground: #f2f2f2;
 $ds-hex-surface-primary: #ffffff;
 $ds-hex-surface-primary-raised-soft: #f2f2f2;
 $ds-hex-surface-primary-raised-strong: #e5e5e5;
 $ds-hex-surface-primary-elevated: #ffffff;
 $ds-hex-surface-primaryinvert: #0d0d0d;
+$ds-hex-surface-foreground: #f2f2f2;
 $ds-hex-surface-primaryinvert-raised-soft: #ffffff0d;
 $ds-hex-surface-primaryinvert-elevated: #242424;
 $ds-hex-surface-brand: #da000d;
@@ -11,8 +11,8 @@ $ds-hex-surface-success: #3a8352;
 $ds-hex-surface-culture: #227ac3;
 $ds-hex-surface-breaking: #320b0e;
 $ds-hex-surface-overlay: #05050580;
-$ds-hex-surface-ad-yellow: #ffeac6;
-$ds-hex-surface-native-article: #ededed;
+$ds-hex-surface-native: #ffe380;
+$ds-hex-surface-native-subtle: #fff9e5;
 $ds-hex-surface-quiz: #ea3e3f;
 $ds-hex-surface-media: #000000;
 $ds-hex-border-primary: #0505051a;
@@ -40,14 +40,35 @@ $ds-hex-gradients-primary-start: #ffffff;
 $ds-hex-gradients-primary-end: #ffffff00;
 $ds-hex-gradients-overlay-start: #242424bf;
 $ds-hex-gradients-overlay-end: #24242400;
-$ds-hex-button-primary-default: #da000d;
-$ds-hex-button-primary-hover: #96171f;
-$ds-hex-button-primary-pressed: #96171f;
-$ds-hex-button-primary-disabled: #f2f2f2;
-$ds-hex-button-secondary-filled-default: #da000d;
-$ds-hex-button-secondary-filled-hover: #96171f;
-$ds-hex-button-secondary-filled-pressed: #96171f;
-$ds-hex-button-secondary-filled-disabled: #f2f2f2;
+$ds-hex-button-primary-bg-default: #da000d;
+$ds-hex-button-primary-bg-hover: #96171f;
+$ds-hex-button-primary-bg-pressed: #96171f;
+$ds-hex-button-primary-bg-disabled: #f2f2f2;
+$ds-hex-button-primary-black-bg-default: #0d0d0d;
+$ds-hex-button-primary-black-bg-hover: #171717;
+$ds-hex-button-primary-black-bg-pressed: #171717;
+$ds-hex-button-primary-black-bg-disabled: #f2f2f2;
+$ds-hex-button-secondary-filled-bg-default: #e5e5e5;
+$ds-hex-button-secondary-filled-bg-hover: #cdcdcd;
+$ds-hex-button-secondary-filled-bg-pressed: #cdcdcd;
+$ds-hex-button-secondary-filled-bg-disabled: #f2f2f2;
+$ds-hex-button-secondary-outline-outline-default: #0505051a;
+$ds-hex-button-secondary-outline-outline-hover: #05050540;
+$ds-hex-button-secondary-outline-outline-pressed: #05050540;
+$ds-hex-button-secondary-outline-bg-disabled: #f2f2f2;
+$ds-hex-button-game-on-bg-default: #227ac3;
+$ds-hex-button-game-on-bg-hover: #227ac3;
+$ds-hex-button-game-on-bg-pressed: #227ac3;
+$ds-hex-button-game-on-text-default: #ffffff;
+$ds-hex-button-game-on-outline-default: #227ac3;
+$ds-hex-button-game-off-bg-default: #f9f1eb;
+$ds-hex-button-game-off-bg-hover: #f9f1eb;
+$ds-hex-button-game-off-bg-pressed: #f9f1eb;
+$ds-hex-button-game-off-text-default: #0d0d0d;
+$ds-hex-button-game-off-outline-default: #0505051a;
+$ds-hex-button-game-hint-bg-default: #f4f7fa;
+$ds-hex-button-game-hint-outline-default: #227ac3;
+$ds-hex-button-game-hint-text-default: #ffffff;
 $ds-hex-brand-100: #ffd0d3;
 $ds-hex-brand-200: #ffa9ae;
 $ds-hex-brand-300: #ff757d;

package/foundations/variables/shadowsDnDark.scss

@@ -1,15 +1,15 @@
 $shadowsDnDark: (
-  elevation-sm: (
+  elevation-xs: (
     x: 0,
-    y: 2,
-    blur: 4,
+    y: 1,
+    blur: 2,
     spread: 1,
     color: rgba(13, 13, 13, 0.25)
   ),
-  elevation-xs: (
+  elevation-sm: (
     x: 0,
-    y: 1,
-    blur: 2,
+    y: 2,
+    blur: 4,
     spread: 1,
     color: rgba(13, 13, 13, 0.25)
   ),

package/foundations/variables/shadowsDnLight.scss

@@ -1,15 +1,15 @@
 $shadowsDnLight: (
-  elevation-sm: (
+  elevation-xs: (
     x: 0,
-    y: 2,
-    blur: 4,
+    y: 1,
+    blur: 2,
     spread: 1,
     color: rgba(13, 13, 13, 0.15)
   ),
-  elevation-xs: (
+  elevation-sm: (
     x: 0,
-    y: 1,
-    blur: 2,
+    y: 2,
+    blur: 4,
     spread: 1,
     color: rgba(13, 13, 13, 0.15)
   ),

package/foundations/variables/shadowsList.scss

@@ -1,4 +1,4 @@
-$ds-shadow-elevation-sm: --ds-shadow-elevation-sm;
 $ds-shadow-elevation-xs: --ds-shadow-elevation-xs;
+$ds-shadow-elevation-sm: --ds-shadow-elevation-sm;
 $ds-shadow-elevation-lg: --ds-shadow-elevation-lg;
 $ds-shadow-elevation-md: --ds-shadow-elevation-md;

package/foundations/variables/typographyList.scss

@@ -2,6 +2,7 @@ $ds-typography-detail-article-direct-opinion: 'detail-article-direct-opinion';
 $ds-typography-detail-article-direkt: 'detail-article-direkt';
 $ds-typography-detail-article-longread: 'detail-article-longread';
 $ds-typography-detail-article-longread-premium: 'detail-article-longread-premium';
+$ds-typography-detail-article-native: 'detail-article-native';
 $ds-typography-detail-article-opinion: 'detail-article-opinion';
 $ds-typography-detail-article-quote: 'detail-article-quote';
 $ds-typography-detail-article-standard: 'detail-article-standard';
@@ -16,18 +17,22 @@ $ds-typography-detail-teaser-baotaxl: 'detail-teaser-baotaxl';
 $ds-typography-detail-teaser-centrerad: 'detail-teaser-centrerad';
 $ds-typography-detail-teaser-large: 'detail-teaser-large';
 $ds-typography-detail-teaser-large-compact: 'detail-teaser-large-compact';
+$ds-typography-detail-teaser-large-native: 'detail-teaser-large-native';
 $ds-typography-detail-teaser-large-opinion: 'detail-teaser-large-opinion';
 $ds-typography-detail-teaser-large-rightcol: 'detail-teaser-large-rightcol';
+$ds-typography-detail-teaser-list: 'detail-teaser-list';
 $ds-typography-detail-teaser-longlife: 'detail-teaser-longlife';
 $ds-typography-detail-teaser-standard: 'detail-teaser-standard';
 $ds-typography-detail-teaser-standard-compact: 'detail-teaser-standard-compact';
 $ds-typography-detail-teaser-standard-compact-opinion: 'detail-teaser-standard-compact-opinion';
+$ds-typography-detail-teaser-standard-native: 'detail-teaser-standard-native';
 $ds-typography-detail-teaser-standard-opinion: 'detail-teaser-standard-opinion';
 $ds-typography-detail-teaser-storrubrik: 'detail-teaser-storrubrik';
 $ds-typography-detail-teaser-storrubrik-opinion: 'detail-teaser-storrubrik-opinion';
 $ds-typography-detail-teaser-text-i-bild: 'detail-teaser-text-i-bild';
 $ds-typography-detail-teaser-tipsa: 'detail-teaser-tipsa';
 $ds-typography-detail-teaser-twin: 'detail-teaser-twin';
+$ds-typography-detail-teaser-videostories: 'detail-teaser-videostories';
 $ds-typography-expressive-body-lg: 'expressive-body-lg';
 $ds-typography-expressive-body-md: 'expressive-body-md';
 $ds-typography-expressive-body-sm: 'expressive-body-sm';

package/foundations/variables/typographyScreenExtraLarge.scss

@@ -28,6 +28,13 @@ $typographyScreenExtraLarge: (
     fontSize: 56,
     fontWeight: Bold
   ),
+  detail-article-native: (
+    lineHeight: 1.1,
+    letterSpacing: 0,
+    fontFamily: "DN Sans",
+    fontSize: 48,
+    fontWeight: Bold
+  ),
   detail-article-opinion: (
     lineHeight: 1.1,
     letterSpacing: 0,
@@ -127,6 +134,13 @@ $typographyScreenExtraLarge: (
     fontSize: 36,
     fontWeight: Bold
   ),
+  detail-teaser-large-native: (
+    lineHeight: 1.1,
+    letterSpacing: 0,
+    fontFamily: "DN Sans",
+    fontSize: 48,
+    fontWeight: Bold
+  ),
   detail-teaser-large-opinion: (
     lineHeight: 1.1,
     letterSpacing: 0,
@@ -142,6 +156,13 @@ $typographyScreenExtraLarge: (
     fontSize: 22,
     fontWeight: Bold
   ),
+  detail-teaser-list: (
+    lineHeight: 1.2,
+    letterSpacing: 0,
+    fontFamily: "DN Serif Text",
+    fontSize: 17,
+    fontWeight: SemiBold
+  ),
   detail-teaser-longlife: (
     lineHeight: 1.1,
     letterSpacing: 0,
@@ -171,6 +192,13 @@ $typographyScreenExtraLarge: (
     fontStyle: italic,
     fontWeight: Regular
   ),
+  detail-teaser-standard-native: (
+    lineHeight: 1.1,
+    letterSpacing: 0,
+    fontFamily: "DN Sans",
+    fontSize: 36,
+    fontWeight: Bold
+  ),
   detail-teaser-standard-opinion: (
     lineHeight: 1.1,
     letterSpacing: 0,
@@ -215,6 +243,13 @@ $typographyScreenExtraLarge: (
     fontSize: 22,
     fontWeight: Bold
   ),
+  detail-teaser-videostories: (
+    lineHeight: 1.1,
+    letterSpacing: 0,
+    fontFamily: "DN Serif Display",
+    fontSize: 36,
+    fontWeight: SemiBold
+  ),
   expressive-body-lg: (
     lineHeight: 1.5,
     letterSpacing: 0,

package/foundations/variables/typographyScreenLarge.scss

@@ -28,6 +28,13 @@ $typographyScreenLarge: (
     fontSize: 48,
     fontWeight: Bold
   ),
+  detail-article-native: (
+    lineHeight: 1.1,
+    letterSpacing: 0,
+    fontFamily: "DN Sans",
+    fontSize: 40,
+    fontWeight: Bold
+  ),
   detail-article-opinion: (
     lineHeight: 1.1,
     letterSpacing: 0,
@@ -127,6 +134,13 @@ $typographyScreenLarge: (
     fontSize: 32,
     fontWeight: Bold
   ),
+  detail-teaser-large-native: (
+    lineHeight: 1.1,
+    letterSpacing: 0,
+    fontFamily: "DN Sans",
+    fontSize: 40,
+    fontWeight: Bold
+  ),
   detail-teaser-large-opinion: (
     lineHeight: 1.1,
     letterSpacing: 0,
@@ -142,6 +156,13 @@ $typographyScreenLarge: (
     fontSize: 22,
     fontWeight: Bold
   ),
+  detail-teaser-list: (
+    lineHeight: 1.2,
+    letterSpacing: 0,
+    fontFamily: "DN Serif Text",
+    fontSize: 17,
+    fontWeight: SemiBold
+  ),
   detail-teaser-longlife: (
     lineHeight: 1.1,
     letterSpacing: 0,
@@ -171,6 +192,13 @@ $typographyScreenLarge: (
     fontStyle: italic,
     fontWeight: Regular
   ),
+  detail-teaser-standard-native: (
+    lineHeight: 1.1,
+    letterSpacing: 0,
+    fontFamily: "DN Sans",
+    fontSize: 28,
+    fontWeight: Bold
+  ),
   detail-teaser-standard-opinion: (
     lineHeight: 1.1,
     letterSpacing: 0,
@@ -215,6 +243,13 @@ $typographyScreenLarge: (
     fontSize: 22,
     fontWeight: Bold
   ),
+  detail-teaser-videostories: (
+    lineHeight: 1.1,
+    letterSpacing: 0,
+    fontFamily: "DN Serif Display",
+    fontSize: 28,
+    fontWeight: SemiBold
+  ),
   expressive-body-lg: (
     lineHeight: 1.5,
     letterSpacing: 0,