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

package/CHANGELOG.md

@@ -4,62 +4,38 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
-## [21.1.0-beta.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.0-beta.3...@bonniernews/dn-design-system-web@21.1.0-beta.4) (2024-11-06)
-
-## [21.1.0-beta.3](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.3) (2024-11-06)
+## [21.1.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.0.4...@bonniernews/dn-design-system-web@21.1.0) (2024-11-11)
 
 
 ### Features
 
-* **web:** breaking aka nivå3puff till visuella toppar ([#1450](https://github.com/BonnierNews/dn-design-system/issues/1450)) ([5adacb9](https://github.com/BonnierNews/dn-design-system/commit/5adacb9d8b1fadecd615278e63139627f3b88cb7))
-* **web:** nivå1puff till visuella toppar  ([#1460](https://github.com/BonnierNews/dn-design-system/issues/1460)) ([7743c3b](https://github.com/BonnierNews/dn-design-system/commit/7743c3bfad040b46921e934570808b33083401ce))
-* **web:** one level of bauta with background color ([9184544](https://github.com/BonnierNews/dn-design-system/commit/91845447403cb2ec5a787fd64c341d620861b148))
-* **web:** one level of bauta with background color ([644acd6](https://github.com/BonnierNews/dn-design-system/commit/644acd6166d7385ac08c930fe725215a9e35fc80))
+* **web:** one level of bauta with background color ([#1428](https://github.com/BonnierNews/dn-design-system/issues/1428)) ([c78c0a5](https://github.com/BonnierNews/dn-design-system/commit/c78c0a5e8a05a4ee4d31d7a58e5d23b1c39a7807))
+* **web:** tsx component teaser on site ([#1479](https://github.com/BonnierNews/dn-design-system/issues/1479)) ([e10f001](https://github.com/BonnierNews/dn-design-system/commit/e10f001fc5300837c7bf7a98958a1d806c6f84db))
 
+## [21.0.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.0.3...@bonniernews/dn-design-system-web@21.0.4) (2024-11-06)
 
-### Bug Fixes
 
-* **web:** correct spacing teasers ([#1491](https://github.com/BonnierNews/dn-design-system/issues/1491)) ([b2624b8](https://github.com/BonnierNews/dn-design-system/commit/b2624b8311384d38971f82eb84e73560244a4b18))
-* **web:** media box sizing border box ([#1473](https://github.com/BonnierNews/dn-design-system/issues/1473)) ([48aeeca](https://github.com/BonnierNews/dn-design-system/commit/48aeecac1be293bbcb8ece678d562c26c0ec59d6))
+### Maintenance
+
+* **foundations:** update tokens from Figma ([#1490](https://github.com/BonnierNews/dn-design-system/issues/1490)) ([aa7bcf3](https://github.com/BonnierNews/dn-design-system/commit/aa7bcf362f8f8f0495cbd6aa1ad12cc5c677ce24))
+* prerelease packages ([92a0383](https://github.com/BonnierNews/dn-design-system/commit/92a038392e8bc9b4bfa8b3f2dc508b16ef1ff4cf))
+
+## [21.0.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.0.2...@bonniernews/dn-design-system-web@21.0.3) (2024-11-04)
 
 
 ### 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))
 * **deps-dev:** bump @testing-library/react-native from 12.7.2 to 12.8.0 ([#1477](https://github.com/BonnierNews/dn-design-system/issues/1477)) ([59e489f](https://github.com/BonnierNews/dn-design-system/commit/59e489f4227e83e1d6df43eb9acf6c1ea42db3e3))
+* **deps-dev:** bump @testing-library/react-native from 12.8.0 to 12.8.1 ([#1487](https://github.com/BonnierNews/dn-design-system/issues/1487)) ([86b9369](https://github.com/BonnierNews/dn-design-system/commit/86b93691f2697715eb79a487ed92d953e5b36f83))
 * **deps:** bump @react-native-community/slider from 4.5.4 to 4.5.5 ([#1475](https://github.com/BonnierNews/dn-design-system/issues/1475)) ([c321542](https://github.com/BonnierNews/dn-design-system/commit/c321542bdf60e16f86fc02cae937b301e649bb48))
+* **deps:** bump elliptic from 6.5.7 to 6.6.0 ([#1483](https://github.com/BonnierNews/dn-design-system/issues/1483)) ([508f43d](https://github.com/BonnierNews/dn-design-system/commit/508f43dfac81353fe472079c406c8c7989bd36f4))
 * **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))
+* **foundations:** update tokens from Figma ([#1484](https://github.com/BonnierNews/dn-design-system/issues/1484)) ([41db5ef](https://github.com/BonnierNews/dn-design-system/commit/41db5ef5f44aa64adbd5d3eedd522274df273834))
+* prerelease packages ([0658681](https://github.com/BonnierNews/dn-design-system/commit/065868135bd5c468f65dafa447f7cbc08928d375))
 * prerelease packages ([974fe99](https://github.com/BonnierNews/dn-design-system/commit/974fe99363323771a4284b36a895757fd4c49630))
 * prerelease packages ([3ebfd91](https://github.com/BonnierNews/dn-design-system/commit/3ebfd91c6780c6222c74b500eade9fd19cac88f3))
 * **web:** change screenshot location ([#1482](https://github.com/BonnierNews/dn-design-system/issues/1482)) ([472d0df](https://github.com/BonnierNews/dn-design-system/commit/472d0df71292d72206f908b82b45148a3b79cb91))
-* **web:** released version v21.1.0-beta.1 ([9d45c5a](https://github.com/BonnierNews/dn-design-system/commit/9d45c5a4bbcfe53698ca9dffe3e1771422fbcdac))
-* **web:** released version v21.1.0-beta.2 ([49b9324](https://github.com/BonnierNews/dn-design-system/commit/49b9324c7074d6835aab2de9bb7d9e18649f58b6))
-* **web:** visuella-toppar-update-tokens ([#1468](https://github.com/BonnierNews/dn-design-system/issues/1468)) ([943705a](https://github.com/BonnierNews/dn-design-system/commit/943705afb2922c4d32bb4e042cd746857cbd26cf))
-
-## [21.1.0-beta.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.0-beta.1...@bonniernews/dn-design-system-web@21.1.0-beta.2) (2024-10-25)
-
-
-### Bug Fixes
-
-* **web:** media box sizing border box ([#1473](https://github.com/BonnierNews/dn-design-system/issues/1473)) ([e132abf](https://github.com/BonnierNews/dn-design-system/commit/e132abf44fc8d525fed7ff565ebdcc3702941669))
-
-## [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)
 
@@ -70,13 +46,6 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 ## [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))

package/assets/teaser/teaser.scss

@@ -97,7 +97,6 @@ $grade-size: ds-px-to-rem(34px);
   .ds-teaser__media {
     width: 100%;
     position: relative;
-    box-sizing: border-box;
   }
 
   .ds-vip-badge {

package/components/divider/divider.tsx

@@ -1,3 +1,5 @@
+import { formatClassString } from "@bonniernews/dn-design-system-web/helpers/formatClassString.ts";
+
 export interface DividerProps {
   variant?: 'soft' | 'medium' | 'hard';
   classNames?: string;
@@ -5,13 +7,11 @@ export interface DividerProps {
 }
 
 export const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {
-  const componentClassName = 'ds-divider';
-  const classNamePrefix = `${componentClassName}--`;
-  const classes = [
-    componentClassName,
-    `${classNamePrefix}${variant}`,
+  const classes = formatClassString([
+    'ds-divider',
+    `ds-divider--${variant}`,
     classNames
-  ].filter(Boolean).join(' ');
+  ])
 
   return (
     <div className={classes} {...attributes}><hr /></div>

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

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

package/components/quote/quote.tsx

@@ -1,19 +1,23 @@
+import { formatClassString } from "@bonniernews/dn-design-system-web/helpers/formatClassString.ts";
+
 export interface QuoteProps {
   bodyHtml: string;
   theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';
   classNames?: string;
+   /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
   attributes?: object;
   forcePx?: boolean;
 }
 
 export const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {
   const componentClassName = 'ds-quote';
-  const classes = [
+
+  const classes = formatClassString([
     componentClassName,
     `ds-theme--${theme}`,
     forcePx && 'ds-force-px',
-    classNames
-  ].filter(Boolean).join(' ');
+    classNames,
+  ])
 
   const quoteHtml = `<span class="${componentClassName}__border"></span> ${bodyHtml}`
 

package/components/teaser-card/teaser-card.tsx

@@ -0,0 +1,36 @@
+import { formatClassString } from "@bonniernews/dn-design-system-web/helpers/formatClassString.ts";
+
+export interface TeaserCardsProps {
+  areaType?: 'right' | 'bauta' | 'bautaxl';
+  targetLink?: string;
+  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';
+  classes?: string;
+   /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
+  attributes?: object;
+  children: any;
+}
+
+export const TeaserCard = ({ areaType, targetLink, theme = 'nyheter', classes, attributes, children }: TeaserCardsProps) => {
+  const componentClassName = 'ds-teaser';
+
+  const classNames = formatClassString([
+    componentClassName,
+    areaType && `${componentClassName}--${areaType}`,
+    `ds-theme--${theme}`,
+    classes,
+  ])
+
+  if (targetLink) {
+    return (
+      <a className={classNames} href={targetLink } {...attributes}>
+        { children }
+      </a>
+    );
+  }
+
+  return (
+    <div className={classNames}{...attributes}>
+      { children }
+    </div>
+  );
+};

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

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

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

@@ -13,17 +13,11 @@
     {% 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 + 'hide-top-border' if hideTopBorder,
+    classNamePrefix + 'top-img' if params.mediaHtml,
     italicsClass if italicsClass,
     classNamePrefix + "compact" if params.isCompact,
     params.classNames if params.classNames

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

@@ -32,10 +32,6 @@
     }
   }
 
-  .ds-teaser__vignette {
-    margin-top: ds-spacing($ds-s-025);
-  }
-
   .ds-teaser__title {
     @include ds-typography($ds-typography-detailteaser-large);
   }
@@ -69,7 +65,6 @@
     position: relative;
     margin-left: ds-spacing($ds-s-100);
     margin-bottom: ds-spacing($ds-s-100, "px", true);
-    margin-top: ds-spacing($ds-s-025);
 
     .picture {
       position: absolute;
@@ -111,21 +106,6 @@
     &.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,6 +28,12 @@
     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-onsite/teaser-onsite.tsx

@@ -0,0 +1,32 @@
+import { TeaserCard } from "@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.tsx";
+import { formatClassString } from "@bonniernews/dn-design-system-web/helpers/formatClassString.ts";
+import { Body, Content, Media, Title } from "@bonniernews/dn-design-system-web/helpers/teaser.tsx";
+export interface TeaserOnSiteProps {
+  areaType?: 'right' | 'bauta' | 'bautaxl';
+  targetLink?: string;
+  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';
+  classNames?: string;
+   /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
+  attributes?: object;
+  mediaHtml?: string;
+  title?: string;
+  text?: string;
+}
+
+export const TeaserOnSite = ({ areaType, targetLink, theme = 'nyheter', classNames, attributes, mediaHtml, title, text }: TeaserOnSiteProps) => {
+
+  const classes = formatClassString([
+    "ds-teaser--onsite",
+    classNames,
+  ])
+
+  return (
+    <TeaserCard { ...{ areaType, targetLink, theme, classes, attributes }}>
+      <Media { ...{ mediaHtml }}  />
+      <Content>
+        <Title title={`PÅ PLATS | ${title}`} />
+        <Body { ...{ text }} />
+      </Content>
+    </TeaserCard>
+  );
+};

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

@@ -17,7 +17,6 @@
     background-color: $ds-color-border-primary;
     position: absolute;
     display: block;
-    clear: both; // Clears floating media in standard-teaser
     top: 0;
     left: 0;
     right: 0;
@@ -27,22 +26,12 @@
   }
 
   // first-child only triggers if there is no vignette
-  .ds-teaser--hide-top-border::after,
+  .ds-teaser--top-img::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;
@@ -58,22 +47,22 @@
   }
 
   &.ds-teaser-package--bauta {
-    background-color: $ds-color-surface-breaking;
+    background-color: $bauta-surface-color;
 
     & .ds-teaser,
     & .ds-teaser--slideshow {
-      background-color: $ds-color-surface-breaking;
+      background-color: $bauta-surface-color;
     }
 
     .ds-split-container {
-      background-color: $ds-color-surface-breaking;
+      background-color: $bauta-surface-color;
       &::after {
-        background-color: $ds-color-border-primary;
+        background-color: $updated-color-border-primary;
       }
     }
 
     & > .ds-teaser::after {
-      background-color: $ds-color-border-primary;
+      background-color: $updated-color-border-primary;
     }
   }
 }

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

@@ -70,8 +70,6 @@
     }
 
     .ds-teaser__media {
-      margin-top: ds-spacing($ds-s-025);
-
       .ds-teaser-image__byline {
         @include ds-typography($ds-typography-functionalmeta01, $forcePx: true, $lineHeight: $ds-lineheight-l);
       }

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

@@ -6,10 +6,6 @@
   padding: ds-spacing($ds-s-075 $ds-s-100 0);
   overflow: hidden;
 
-  .ds-teaser__vignette {
-    margin-top: ds-spacing($ds-s-025);
-  }
-
   .ds-teaser__title {
     @include ds-typography($ds-typography-detailteaser-standard);
 
@@ -33,12 +29,17 @@
     margin-bottom: ds-spacing($ds-s-100);
   }
 
+  &::after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+
   .ds-teaser__content {
     display: block;
   }
 
   .ds-teaser__media {
-    margin-top: ds-spacing($ds-s-025);
     margin-bottom: ds-spacing($ds-s-100);
     margin-left: ds-spacing($ds-s-100);
     float: right;

package/components/thematic-break/thematic-break.tsx

@@ -1,14 +1,15 @@
+import { formatClassString } from "@bonniernews/dn-design-system-web/helpers/formatClassString.ts";
+
 export interface ThematicBreakProps {
   classNames?: string;
   attributes?: object;
 }
 
 export const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {
-  const componentClassName = 'ds-thematic-break';
-  const classes = [
-    componentClassName,
+  const classes = formatClassString([
+    'ds-thematic-break',
     classNames
-  ].filter(Boolean).join(' ');
+  ])
 
   return (
     <div className={classes} {...attributes}><hr /></div>

package/foundations/helpers/colors.scss

@@ -6,6 +6,11 @@
 @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() {
@@ -17,7 +22,7 @@ $ds-theme-color: var(--ds-theme-color);
   --ds-theme-color: #{$ds-color-component-brand};
 
   .ds-theme--nyheter {
-    --ds-theme-color: #{$ds-color-border-brand};
+    --ds-theme-color: #{$ds-color-component-brand};
   }
 
   .ds-theme--ekonomi {

package/foundations/variables/colorsCssVariables.scss

@@ -11,7 +11,6 @@ $ds-color-text-brand: var(--ds-color-text-brand);
 $ds-color-text-body-link: var(--ds-color-text-body-link);
 $ds-color-text-body-link-visited: var(--ds-color-text-body-link-visited);
 $ds-color-text-positive: var(--ds-color-text-positive);
-$ds-color-text-culture: var(--ds-color-text-culture);
 $ds-color-icon-primary: var(--ds-color-icon-primary);
 $ds-color-icon-primary-02: var(--ds-color-icon-primary-02);
 $ds-color-icon-secondary: var(--ds-color-icon-secondary);
@@ -22,7 +21,6 @@ $ds-color-icon-on-business: var(--ds-color-icon-on-business);
 $ds-color-icon-brand: var(--ds-color-icon-brand);
 $ds-color-icon-on-critical: var(--ds-color-icon-on-critical);
 $ds-color-icon-on-success: var(--ds-color-icon-on-success);
-$ds-color-icon-culture: var(--ds-color-icon-culture);
 $ds-color-component-brand: var(--ds-color-component-brand);
 $ds-color-component-business: var(--ds-color-component-business);
 $ds-color-component-primary: var(--ds-color-component-primary);
@@ -47,7 +45,6 @@ $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);
@@ -59,7 +56,6 @@ $ds-color-border-focus-02: var(--ds-color-border-focus-02);
 $ds-color-border-focus-03: var(--ds-color-border-focus-03);
 $ds-color-border-focus-04: var(--ds-color-border-focus-04);
 $ds-color-border-brand: var(--ds-color-border-brand);
-$ds-color-border-culture: var(--ds-color-border-culture);
 $ds-color-background-primary: var(--ds-color-background-primary);
 $ds-color-static-red-100: var(--ds-color-static-red-100);
 $ds-color-static-black: var(--ds-color-static-black);

package/foundations/variables/colorsDnDarkTokens.scss

@@ -1,88 +1,84 @@
-$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-text-culture: #4293d7;
-$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-icon-culture: #4293d7;
-$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-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-component-secondary: #050505;
-$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-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-static-white: #ffffff;
-$ds-hex-dark-component-positive: #3a8352;
-$ds-hex-dark-component-primary-02: #cfcfcf;
-$ds-hex-dark-surface-below: #171717;
+$ds-hex-dark-component-positive: #3A8352;
+$ds-hex-dark-component-primary-02: #CFCFCF;
+$ds-hex-dark-surface-below: #262626;
 $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: 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-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-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: #fd2330;
-$ds-hex-dark-border-culture: #4293d7;
+$ds-hex-dark-border-focus-03: #FD2330;
+$ds-hex-dark-border-focus-04: #3A8352;
+$ds-hex-dark-border-brand: #DA000D;
 $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: rgba(20, 20, 20, 0.6);
+$ds-hex-dark-static-transparent-black: #14141499;
 $ds-hex-dark-static-white: #ffffff;
-$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;
+$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;