@bonniernews/dn-design-system-web 25.0.5 → 25.0.6-beta.1

package/foundations/helpers/gradients.scss

@@ -0,0 +1,33 @@
+@use "sass:map";
+@use "sass:list";
+@use "utilities.scss" as *;
+@use "../variables/gradientsDnLight.scss" as *;
+@use "../variables/gradientsDnDark.scss" as *;
+@forward "../variables/gradientsList.scss";
+
+@mixin ds-gradient($component, $theme: light) {
+  $tmpMap: map.get($gradientsDnLight, $component);
+
+  @if $theme == dark {
+    $tmpMap: map.get($gradientsDnDark, $component);
+  }
+
+  $angle: map.get($tmpMap, "angle");
+  $stops: map.get($tmpMap, "stops");
+
+  @if map.get($tmpMap, "type") == "linear" {
+    --ds-gradient-#{$component}: linear-gradient(
+      #{$angle}deg,
+      #{_get-stop($tmpMap, "color", 1)} #{_get-stop($tmpMap, "position", 1) * 100%},
+      #{_get-stop($tmpMap, "color", 2)} #{_get-stop($tmpMap, "position", 2) * 100%}
+    );
+  }
+}
+
+@function ds-get-gradient($component) {
+  @return var($component);
+}
+
+@function _get-stop($map, $key, $index) {
+  @return map.get(list.nth(map.get($map, "stops"), $index), $key);
+}

package/foundations/helpers/hover.scss

@@ -24,8 +24,8 @@
 @mixin ds-focus(
   $offset: false,
   $includeSelector: true,
-  $width: ds-border-width(x2),
-  $color: $ds-color-border-focus-02
+  $width: ds-border-width(xs),
+  $color: $ds-color-border-primary-strongest
 ) {
   @if not $includeSelector {
     @include _ds-focus($offset, $width, $color);

package/foundations/helpers/links.scss

@@ -1,16 +1,17 @@
 @use "../variables/colorsCssVariables";
 
 @use "colors.scss" as *;
-@use "../variables/decorations.scss" as *;
 @use "utilities.scss" as *;
 
 $ds-link-list: "list";
 $ds-link-paragraph: "paragraph";
 $ds-link-article-body: "article-body";
 
+$ds-text-decoration-link-underline: underline;
+
 @mixin ds-link($type: paragraph) {
   &:focus-visible {
-    outline-color: $ds-color-border-focus-02;
+    outline-color: $ds-color-border-primary;
   }
 
   & {
@@ -27,7 +28,7 @@ $ds-link-article-body: "article-body";
         text-decoration-line: none;
       }
       &:visited {
-        color: $ds-color-text-primary-02;
+        color: $ds-color-text-primary-subtle;
       }
     } @else if ($type == $ds-link-article-body) {
       text-decoration-line: $ds-text-decoration-link-underline;

package/foundations/helpers/metrics.scss

@@ -1,13 +1,11 @@
 @use "sass:list";
 @use "sass:map";
-@use "../variables/metrics.scss" as *;
-
-$dsBorderRadius: map.get($metrics, "border-radius");
-$dsBorderWidth: map.get($metrics, "border-width");
+@use "../variables/border-width.scss" as *;
+@use "../variables/radius.scss" as *;
 
 @function ds-border-radius($units: null) {
   @if ($units) {
-    @return _ds-get-metric($dsBorderRadius, $units);
+    @return _ds-get-metric($radius, $units);
   }
 
   @return null;
@@ -15,7 +13,7 @@ $dsBorderWidth: map.get($metrics, "border-width");
 
 @function ds-border-width($units: null) {
   @if ($units) {
-    @return _ds-get-metric($dsBorderWidth, $units);
+    @return _ds-get-metric($border-width, $units);
   }
 
   @return null;

package/foundations/helpers/shadows.scss

@@ -1,14 +1,14 @@
 @use "sass:map";
 @use "utilities.scss" as *;
-@use "../variables/shadowsDnLightTokens.scss" as *;
-@use "../variables/shadowsDnDarkTokens.scss" as *;
-@forward "../variables/shadowsTokensList.scss";
+@use "../variables/shadowsDnLight.scss" as *;
+@use "../variables/shadowsDnDark.scss" as *;
+@forward "../variables/shadowsList.scss";
 
 @mixin ds-shadow($component, $theme: light) {
-  $tmpMap: map.get($shadowsDnLightTokens, $component);
+  $tmpMap: map.get($shadowsDnLight, $component);
 
   @if $theme == dark {
-    $tmpMap: map.get($shadowsDnDarkTokens, $component);
+    $tmpMap: map.get($shadowsDnDark, $component);
   }
 
   $x: map.get($tmpMap, "x");

package/foundations/helpers/typography.scss

@@ -4,15 +4,14 @@
 @use "sass:list";
 @use "mediaQueries.scss" as *;
 @use "utilities.scss" as *;
-@use "../variables/typographyTokensScreenSmall.scss" as *;
-@use "../variables/typographyTokensScreenLarge.scss" as *;
-@use "../variables/typographyTokensScreenExtraLarge.scss" as *;
+@use "../variables/typographyScreenSmall.scss" as *;
+@use "../variables/typographyScreenLarge.scss" as *;
+@use "../variables/typographyScreenExtraLarge.scss" as *;
 @use "fontFamily.scss" as *;
-@forward "../variables/typographyTokensList.scss";
+@forward "../variables/typographyList.scss";
 @forward "../variables/typographyFontWeight.scss";
 @forward "../variables/typographyLetterSpacing.scss";
 @forward "../variables/typographyLineHeight.scss";
-@forward "../variables/decorations.scss";
 
 $dsTypographyKeys: (
   fontFamily: "font-family",
@@ -23,7 +22,7 @@ $dsTypographyKeys: (
   textDecorationLine: "text-decoration-line",
   color: "color",
   fontStyle: "font-style",
-  textCase: "text-transform",
+  textTransform: "text-transform",
 );
 
 $dsSansWeights: (
@@ -63,9 +62,9 @@ $dsSerifWeights: (
     "lineHeight": null,
     "fontStyle": null,
   );
-  $tmpMap: map.merge($addons, map.get($typographyTokensScreenSmall, $token));
-  $tmpMapScreenLarge: map.merge($addons, map.get($typographyTokensScreenLarge, $token));
-  $tmpMapScreenExtraLarge: map.merge($addons, map.get($typographyTokensScreenExtraLarge, $token));
+  $tmpMap: map.merge($addons, map.get($typographyScreenSmall, $token));
+  $tmpMapScreenLarge: map.merge($addons, map.get($typographyScreenLarge, $token));
+  $tmpMapScreenExtraLarge: map.merge($addons, map.get($typographyScreenExtraLarge, $token));
 
   @if $tmpMap {
     @include ds-mq-largest-breakpoint(mobile) {
@@ -122,12 +121,12 @@ $dsSerifWeights: (
   );
 
   @if $screen == mobile {
-    $tmpMap: map.merge($addons, map.get($typographyTokensScreenSmall, $token));
+    $tmpMap: map.merge($addons, map.get($typographyScreenSmall, $token));
   } @else if $screen == tablet {
-    $tmpMap: map.merge($addons, map.get($typographyTokensScreenLarge, $token));
+    $tmpMap: map.merge($addons, map.get($typographyScreenLarge, $token));
     $scaling: "large";
   } @else if $screen == desktop {
-    $tmpMap: map.merge($addons, map.get($typographyTokensScreenExtraLarge, $token));
+    $tmpMap: map.merge($addons, map.get($typographyScreenExtraLarge, $token));
     $scaling: "extraLarge";
   }
 

package/foundations/shadows.scss

@@ -1,12 +1,12 @@
 @use "sass:map";
 @use "sass:meta";
 @use "./helpers/shadows.scss" as *;
-@use "./variables/shadowsDnLightTokens";
-@use "./variables/shadowsDnDarkTokens";
+@use "./variables/shadowsDnLight";
+@use "./variables/shadowsDnDark";
 
 html,
 .ds-light {
-  @each $name, $value in meta.module-variables("shadowsDnLightTokens") {
+  @each $name, $value in meta.module-variables("shadowsDnLight") {
     @each $key in map.keys($value) {
       @include ds-shadow($key, light);
     }
@@ -17,7 +17,7 @@ html,
 // dnDark should only be used in storybook otherwise use ds-dark
 .dnDark,
 .ds-dark {
-  @each $name, $value in meta.module-variables("shadowsDnDarkTokens") {
+  @each $name, $value in meta.module-variables("shadowsDnDark") {
     @each $key in map.keys($value) {
       @include ds-shadow($key, dark);
     }

package/foundations/variables/border-width.scss

@@ -0,0 +1,5 @@
+$border-width: (
+  xxs: 1,
+  xs: 2,
+  sm: 4
+);

package/foundations/variables/colorsCssVariables.scss

@@ -1,87 +1,89 @@
-$ds-color-text-primary: var(--ds-color-text-primary);
-$ds-color-text-primary-02: var(--ds-color-text-primary-02);
-$ds-color-text-secondary: var(--ds-color-text-secondary);
-$ds-color-text-critical: var(--ds-color-text-critical);
-$ds-color-text-disabled: var(--ds-color-text-disabled);
-$ds-color-text-on-brand: var(--ds-color-text-on-brand);
-$ds-color-text-on-business: var(--ds-color-text-on-business);
-$ds-color-text-on-critical: var(--ds-color-text-on-critical);
-$ds-color-text-on-success: var(--ds-color-text-on-success);
-$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);
-$ds-color-icon-critical: var(--ds-color-icon-critical);
-$ds-color-icon-disabled: var(--ds-color-icon-disabled);
-$ds-color-icon-on-brand: var(--ds-color-icon-on-brand);
-$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);
-$ds-color-component-primary-overlay: var(--ds-color-component-primary-overlay);
-$ds-color-component-primary-overlay-02: var(--ds-color-component-primary-overlay-02);
-$ds-color-component-secondary: var(--ds-color-component-secondary);
-$ds-color-component-secondary-overlay: var(--ds-color-component-secondary-overlay);
-$ds-color-component-secondary-overlay-02: var(--ds-color-component-secondary-overlay-02);
-$ds-color-component-critical: var(--ds-color-component-critical);
-$ds-color-component-critical-overlay: var(--ds-color-component-critical-overlay);
-$ds-color-component-static-white: var(--ds-color-component-static-white);
-$ds-color-component-positive: var(--ds-color-component-positive);
-$ds-color-component-primary-02: var(--ds-color-component-primary-02);
-$ds-color-surface-below: var(--ds-color-surface-below);
-$ds-color-surface-native-article: var(--ds-color-surface-native-article);
-$ds-color-surface-background: var(--ds-color-surface-background);
-$ds-color-surface-raised: var(--ds-color-surface-raised);
-$ds-color-surface-elevated: var(--ds-color-surface-elevated);
-$ds-color-surface-overlay: var(--ds-color-surface-overlay);
-$ds-color-surface-quiz: var(--ds-color-surface-quiz);
-$ds-color-surface-korsord: var(--ds-color-surface-korsord);
-$ds-color-surface-sudoko: var(--ds-color-surface-sudoko);
+$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-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);
-$ds-color-surface-inverted: var(--ds-color-surface-inverted);
+$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-quiz: var(--ds-color-surface-quiz);
 $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);
-$ds-color-border-secondary: var(--ds-color-border-secondary);
-$ds-color-border-business: var(--ds-color-border-business);
-$ds-color-border-critical: var(--ds-color-border-critical);
-$ds-color-border-focus: var(--ds-color-border-focus);
-$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-primary-strong: var(--ds-color-border-primary-strong);
+$ds-color-border-primary-strongest: var(--ds-color-border-primary-strongest);
+$ds-color-border-primaryinvert: var(--ds-color-border-primaryinvert);
+$ds-color-border-primaryinvert-strong: var(--ds-color-border-primaryinvert-strong);
+$ds-color-border-primaryinvert-strongest: var(--ds-color-border-primaryinvert-strongest);
 $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);
-$ds-color-static-transparent-black: var(--ds-color-static-transparent-black);
-$ds-color-static-white: var(--ds-color-static-white);
-$ds-color-static-transparent-white: var(--ds-color-static-transparent-white);
-$ds-color-static-green-100: var(--ds-color-static-green-100);
-$ds-color-static-red-300: var(--ds-color-static-red-300);
-$ds-color-static-transparent-white-10: var(--ds-color-static-transparent-white-10);
-$ds-color-static-kultur: var(--ds-color-static-kultur);
-$ds-color-static-economy: var(--ds-color-static-economy);
-$ds-color-static-sport: var(--ds-color-static-sport);
-$ds-color-static-neutral-200: var(--ds-color-static-neutral-200);
-$ds-color-static-sthlm: var(--ds-color-static-sthlm);
-$ds-color-static-ad-yellow: var(--ds-color-static-ad-yellow);
-$ds-color-static-neutral-100: var(--ds-color-static-neutral-100);
-$ds-color-static-neutral-500: var(--ds-color-static-neutral-500);
-$ds-color-static-red-500: var(--ds-color-static-red-500);
-$ds-color-static-yellow: var(--ds-color-static-yellow);
-$ds-color-static-red-200: var(--ds-color-static-red-200);
-$ds-color-static-red-0: var(--ds-color-static-red-0);
-$ds-color-gradient-content-fade-left: var(--ds-color-gradient-content-fade-left);
-$ds-color-gradient-content-fade-right: var(--ds-color-gradient-content-fade-right);
-$ds-color-gradient-content-fade-up: var(--ds-color-gradient-content-fade-up);
-$ds-color-gradient-content-fade-down: var(--ds-color-gradient-content-fade-down);
+$ds-color-text-primary: var(--ds-color-text-primary);
+$ds-color-text-primary-subtle: var(--ds-color-text-primary-subtle);
+$ds-color-text-primary-disabled: var(--ds-color-text-primary-disabled);
+$ds-color-text-primaryinvert: var(--ds-color-text-primaryinvert);
+$ds-color-text-primaryinvert-subtle: var(--ds-color-text-primaryinvert-subtle);
+$ds-color-text-primaryinvert-disabled: var(--ds-color-text-primaryinvert-disabled);
+$ds-color-text-brand: var(--ds-color-text-brand);
+$ds-color-text-culture: var(--ds-color-text-culture);
+$ds-color-text-critical: var(--ds-color-text-critical);
+$ds-color-text-success: var(--ds-color-text-success);
+$ds-color-text-on-brand: var(--ds-color-text-on-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-gradients-primary-fade-start: var(--ds-color-gradients-primary-fade-start);
+$ds-color-gradients-primary-fade-end: var(--ds-color-gradients-primary-fade-end);
+$ds-color-brand-0: var(--ds-color-brand-0);
+$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);
+$ds-color-brand-400: var(--ds-color-brand-400);
+$ds-color-brand-500: var(--ds-color-brand-500);
+$ds-color-brand-600: var(--ds-color-brand-600);
+$ds-color-brand-700: var(--ds-color-brand-700);
+$ds-color-brand-800: var(--ds-color-brand-800);
+$ds-color-brand-900: var(--ds-color-brand-900);
+$ds-color-brand-1000: var(--ds-color-brand-1000);
+$ds-color-brand-1100: var(--ds-color-brand-1100);
+$ds-color-culture-0: var(--ds-color-culture-0);
+$ds-color-culture-100: var(--ds-color-culture-100);
+$ds-color-culture-200: var(--ds-color-culture-200);
+$ds-color-culture-300: var(--ds-color-culture-300);
+$ds-color-culture-400: var(--ds-color-culture-400);
+$ds-color-culture-500: var(--ds-color-culture-500);
+$ds-color-culture-600: var(--ds-color-culture-600);
+$ds-color-culture-700: var(--ds-color-culture-700);
+$ds-color-culture-800: var(--ds-color-culture-800);
+$ds-color-culture-900: var(--ds-color-culture-900);
+$ds-color-culture-1000: var(--ds-color-culture-1000);
+$ds-color-culture-1100: var(--ds-color-culture-1100);
+$ds-color-neutral-100: var(--ds-color-neutral-100);
+$ds-color-neutral-200: var(--ds-color-neutral-200);
+$ds-color-neutral-300: var(--ds-color-neutral-300);
+$ds-color-neutral-400: var(--ds-color-neutral-400);
+$ds-color-neutral-500: var(--ds-color-neutral-500);
+$ds-color-neutral-600: var(--ds-color-neutral-600);
+$ds-color-neutral-700: var(--ds-color-neutral-700);
+$ds-color-neutral-800: var(--ds-color-neutral-800);
+$ds-color-neutral-900: var(--ds-color-neutral-900);
+$ds-color-neutral-1000: var(--ds-color-neutral-1000);
+$ds-color-neutral-1100: var(--ds-color-neutral-1100);
+$ds-color-neutral-white: var(--ds-color-neutral-white);
+$ds-color-neutral-050: var(--ds-color-neutral-050);
+$ds-color-neutral-black: var(--ds-color-neutral-black);
+$ds-color-bright-neutral-alpha-100: var(--ds-color-bright-neutral-alpha-100);
+$ds-color-bright-neutral-alpha-200: var(--ds-color-bright-neutral-alpha-200);
+$ds-color-bright-neutral-alpha-300: var(--ds-color-bright-neutral-alpha-300);
+$ds-color-bright-neutral-alpha-400: var(--ds-color-bright-neutral-alpha-400);
+$ds-color-bright-neutral-alpha-500: var(--ds-color-bright-neutral-alpha-500);
+$ds-color-bright-neutral-alpha-050: var(--ds-color-bright-neutral-alpha-050);
+$ds-color-dark-neutral-alpha-100: var(--ds-color-dark-neutral-alpha-100);
+$ds-color-dark-neutral-alpha-200: var(--ds-color-dark-neutral-alpha-200);
+$ds-color-dark-neutral-alpha-300: var(--ds-color-dark-neutral-alpha-300);
+$ds-color-dark-neutral-alpha-400: var(--ds-color-dark-neutral-alpha-400);
+$ds-color-dark-neutral-alpha-500: var(--ds-color-dark-neutral-alpha-500);
+$ds-color-dark-neutral-alpha-050: var(--ds-color-dark-neutral-alpha-050);

package/foundations/variables/colorsDnDark.scss

@@ -0,0 +1,89 @@
+$ds-hex-dark-surface-foreground: #0d0d0d;
+$ds-hex-dark-surface-primary: #050505;
+$ds-hex-dark-surface-primary-raised-soft: #121212;
+$ds-hex-dark-surface-primary-raised-strong: #1e1e1e;
+$ds-hex-dark-surface-primary-elevated: #121212;
+$ds-hex-dark-surface-primaryinvert: #ffffff;
+$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;
+$ds-hex-dark-surface-success: #3a8352;
+$ds-hex-dark-surface-culture: #227ac3;
+$ds-hex-dark-surface-breaking: #300407;
+$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-quiz: #ea3e3f;
+$ds-hex-dark-border-primary: rgba(255, 255, 255, 0.15);
+$ds-hex-dark-border-primary-strong: rgba(255, 255, 255, 0.39);
+$ds-hex-dark-border-primary-strongest: #ffffff;
+$ds-hex-dark-border-primaryinvert: rgba(5, 5, 5, 0.13);
+$ds-hex-dark-border-primaryinvert-strong: rgba(5, 5, 5, 0.5);
+$ds-hex-dark-border-primaryinvert-strongest: #050505;
+$ds-hex-dark-border-brand: #fd2330;
+$ds-hex-dark-border-culture: #4293d7;
+$ds-hex-dark-text-primary: #e8e8e8;
+$ds-hex-dark-text-primary-subtle: #b2b2b2;
+$ds-hex-dark-text-primary-disabled: #b2b2b2;
+$ds-hex-dark-text-primaryinvert: #050505;
+$ds-hex-dark-text-primaryinvert-subtle: #5a5a5a;
+$ds-hex-dark-text-primaryinvert-disabled: #050505;
+$ds-hex-dark-text-brand: #fd2330;
+$ds-hex-dark-text-culture: #4293d7;
+$ds-hex-dark-text-critical: #fd2330;
+$ds-hex-dark-text-success: #3a8352;
+$ds-hex-dark-text-on-brand: #ffffff;
+$ds-hex-dark-text-body-link: #65a0fc;
+$ds-hex-dark-text-body-link-visited: #65a0fc;
+$ds-hex-dark-gradients-primary-fade-start: #050505;
+$ds-hex-dark-gradients-primary-fade-end: rgba(5, 5, 5, 0);
+$ds-hex-dark-brand-0: #fbf4f4;
+$ds-hex-dark-brand-100: #f9eced;
+$ds-hex-dark-brand-200: #f2d9da;
+$ds-hex-dark-brand-300: #f0c2c4;
+$ds-hex-dark-brand-400: #f2888e;
+$ds-hex-dark-brand-500: #fd2330;
+$ds-hex-dark-brand-600: #da000d;
+$ds-hex-dark-brand-700: #af010b;
+$ds-hex-dark-brand-800: #85020a;
+$ds-hex-dark-brand-900: #5a0308;
+$ds-hex-dark-brand-1000: #300407;
+$ds-hex-dark-brand-1100: #1a0506;
+$ds-hex-dark-culture-0: #f4f7fa;
+$ds-hex-dark-culture-100: #eaf0f6;
+$ds-hex-dark-culture-200: #cedfee;
+$ds-hex-dark-culture-300: #b3cee5;
+$ds-hex-dark-culture-400: #88b6dd;
+$ds-hex-dark-culture-500: #4293d7;
+$ds-hex-dark-culture-600: #227ac3;
+$ds-hex-dark-culture-700: #195a8f;
+$ds-hex-dark-culture-800: #154b79;
+$ds-hex-dark-culture-900: #0e314e;
+$ds-hex-dark-culture-1000: #152029;
+$ds-hex-dark-culture-1100: #05101a;
+$ds-hex-dark-neutral-100: #f2f2f2;
+$ds-hex-dark-neutral-200: #e8e8e8;
+$ds-hex-dark-neutral-300: #cdcdcd;
+$ds-hex-dark-neutral-400: #b2b2b2;
+$ds-hex-dark-neutral-500: #8c8c8c;
+$ds-hex-dark-neutral-600: #666666;
+$ds-hex-dark-neutral-700: #5a5a5a;
+$ds-hex-dark-neutral-800: #353535;
+$ds-hex-dark-neutral-900: #1e1e1e;
+$ds-hex-dark-neutral-1000: #121212;
+$ds-hex-dark-neutral-1100: #0d0d0d;
+$ds-hex-dark-neutral-white: #ffffff;
+$ds-hex-dark-neutral-050: #f8f8f8;
+$ds-hex-dark-neutral-black: #050505;
+$ds-hex-dark-bright-neutral-alpha-100: rgba(5, 5, 5, 0.05);
+$ds-hex-dark-bright-neutral-alpha-200: rgba(5, 5, 5, 0.13);
+$ds-hex-dark-bright-neutral-alpha-300: rgba(5, 5, 5, 0.2);
+$ds-hex-dark-bright-neutral-alpha-400: rgba(5, 5, 5, 0.35);
+$ds-hex-dark-bright-neutral-alpha-500: rgba(5, 5, 5, 0.5);
+$ds-hex-dark-bright-neutral-alpha-050: rgba(5, 5, 5, 0.03);
+$ds-hex-dark-dark-neutral-alpha-100: rgba(255, 255, 255, 0.05);
+$ds-hex-dark-dark-neutral-alpha-200: rgba(255, 255, 255, 0.15);
+$ds-hex-dark-dark-neutral-alpha-300: rgba(255, 255, 255, 0.19);
+$ds-hex-dark-dark-neutral-alpha-400: rgba(255, 255, 255, 0.34);
+$ds-hex-dark-dark-neutral-alpha-500: rgba(255, 255, 255, 0.39);
+$ds-hex-dark-dark-neutral-alpha-050: rgba(255, 255, 255, 0.03);

package/foundations/variables/colorsDnLight.scss

@@ -0,0 +1,89 @@
+$ds-hex-surface-foreground: #f8f8f8;
+$ds-hex-surface-primary: #ffffff;
+$ds-hex-surface-primary-raised-soft: #f2f2f2;
+$ds-hex-surface-primary-raised-strong: #e8e8e8;
+$ds-hex-surface-primary-elevated: #ffffff;
+$ds-hex-surface-primaryinvert: #050505;
+$ds-hex-surface-primaryinvert-raised-soft: #ffffff0d;
+$ds-hex-surface-primaryinvert-elevated: #121212;
+$ds-hex-surface-brand: #da000d;
+$ds-hex-surface-success: #3a8352;
+$ds-hex-surface-culture: #227ac3;
+$ds-hex-surface-breaking: #300407;
+$ds-hex-surface-overlay: #05050580;
+$ds-hex-surface-ad-yellow: #ffeac6;
+$ds-hex-surface-native-article: #ededed;
+$ds-hex-surface-quiz: #ea3e3f;
+$ds-hex-border-primary: #05050521;
+$ds-hex-border-primary-strong: #05050580;
+$ds-hex-border-primary-strongest: #050505;
+$ds-hex-border-primaryinvert: #ffffff26;
+$ds-hex-border-primaryinvert-strong: #ffffff63;
+$ds-hex-border-primaryinvert-strongest: #ffffff;
+$ds-hex-border-brand: #da000d;
+$ds-hex-border-culture: #227ac3;
+$ds-hex-text-primary: #050505;
+$ds-hex-text-primary-subtle: #5a5a5a;
+$ds-hex-text-primary-disabled: #5a5a5a;
+$ds-hex-text-primaryinvert: #f2f2f2;
+$ds-hex-text-primaryinvert-subtle: #b2b2b2;
+$ds-hex-text-primaryinvert-disabled: #f2f2f2;
+$ds-hex-text-brand: #da000d;
+$ds-hex-text-culture: #227ac3;
+$ds-hex-text-critical: #da000d;
+$ds-hex-text-success: #3a8352;
+$ds-hex-text-on-brand: #ffffff;
+$ds-hex-text-body-link: #4373ce;
+$ds-hex-text-body-link-visited: #4373ce;
+$ds-hex-gradients-primary-fade-start: #ffffff;
+$ds-hex-gradients-primary-fade-end: #ffffff00;
+$ds-hex-brand-0: #fbf4f4;
+$ds-hex-brand-100: #f9eced;
+$ds-hex-brand-200: #f2d9da;
+$ds-hex-brand-300: #f0c2c4;
+$ds-hex-brand-400: #f2888e;
+$ds-hex-brand-500: #fd2330;
+$ds-hex-brand-600: #da000d;
+$ds-hex-brand-700: #af010b;
+$ds-hex-brand-800: #85020a;
+$ds-hex-brand-900: #5a0308;
+$ds-hex-brand-1000: #300407;
+$ds-hex-brand-1100: #1a0506;
+$ds-hex-culture-0: #f4f7fa;
+$ds-hex-culture-100: #eaf0f6;
+$ds-hex-culture-200: #cedfee;
+$ds-hex-culture-300: #b3cee5;
+$ds-hex-culture-400: #88b6dd;
+$ds-hex-culture-500: #4293d7;
+$ds-hex-culture-600: #227ac3;
+$ds-hex-culture-700: #195a8f;
+$ds-hex-culture-800: #154b79;
+$ds-hex-culture-900: #0e314e;
+$ds-hex-culture-1000: #152029;
+$ds-hex-culture-1100: #05101a;
+$ds-hex-neutral-100: #f2f2f2;
+$ds-hex-neutral-200: #e8e8e8;
+$ds-hex-neutral-300: #cdcdcd;
+$ds-hex-neutral-400: #b2b2b2;
+$ds-hex-neutral-500: #8c8c8c;
+$ds-hex-neutral-600: #666666;
+$ds-hex-neutral-700: #5a5a5a;
+$ds-hex-neutral-800: #353535;
+$ds-hex-neutral-900: #1e1e1e;
+$ds-hex-neutral-1000: #121212;
+$ds-hex-neutral-1100: #0d0d0d;
+$ds-hex-neutral-white: #ffffff;
+$ds-hex-neutral-050: #f8f8f8;
+$ds-hex-neutral-black: #050505;
+$ds-hex-bright-neutral-alpha-100: #0505050d;
+$ds-hex-bright-neutral-alpha-200: #05050521;
+$ds-hex-bright-neutral-alpha-300: #05050533;
+$ds-hex-bright-neutral-alpha-400: #05050559;
+$ds-hex-bright-neutral-alpha-500: #05050580;
+$ds-hex-bright-neutral-alpha-050: #05050508;
+$ds-hex-dark-neutral-alpha-100: #ffffff0d;
+$ds-hex-dark-neutral-alpha-200: #ffffff26;
+$ds-hex-dark-neutral-alpha-300: #ffffff30;
+$ds-hex-dark-neutral-alpha-400: #ffffff57;
+$ds-hex-dark-neutral-alpha-500: #ffffff63;
+$ds-hex-dark-neutral-alpha-050: #ffffff08;

package/foundations/variables/gradientsDnDark.scss

@@ -0,0 +1,46 @@
+$gradientsDnDark: (
+  content-fade-left: (
+    type: linear,
+    angle: 270,
+    stops: ((
+      color: #050505,
+      position: 0
+    ), (
+      color: rgba(5, 5, 5, 0),
+      position: 1
+    ))
+  ),
+  content-fade-right: (
+    type: linear,
+    angle: 270,
+    stops: ((
+      color: rgba(5, 5, 5, 0),
+      position: 0
+    ), (
+      color: #050505,
+      position: 1
+    ))
+  ),
+  content-fade-up: (
+    type: linear,
+    angle: 180,
+    stops: ((
+      color: rgba(5, 5, 5, 0),
+      position: 0
+    ), (
+      color: #050505,
+      position: 1
+    ))
+  ),
+  content-fade-down: (
+    type: linear,
+    angle: 180,
+    stops: ((
+      color: #050505,
+      position: 0
+    ), (
+      color: rgba(5, 5, 5, 0),
+      position: 1
+    ))
+  )
+);

package/foundations/variables/gradientsDnLight.scss

@@ -0,0 +1,46 @@
+$gradientsDnLight: (
+  content-fade-left: (
+    type: linear,
+    angle: 270,
+    stops: ((
+      color: #ffffff,
+      position: 0
+    ), (
+      color: rgba(255, 255, 255, 0),
+      position: 1
+    ))
+  ),
+  content-fade-right: (
+    type: linear,
+    angle: 270,
+    stops: ((
+      color: rgba(255, 255, 255, 0),
+      position: 0
+    ), (
+      color: #ffffff,
+      position: 1
+    ))
+  ),
+  content-fade-up: (
+    type: linear,
+    angle: 180,
+    stops: ((
+      color: rgba(255, 255, 255, 0),
+      position: 0
+    ), (
+      color: #ffffff,
+      position: 1
+    ))
+  ),
+  content-fade-down: (
+    type: linear,
+    angle: 180,
+    stops: ((
+      color: #ffffff,
+      position: 0
+    ), (
+      color: rgba(255, 255, 255, 0),
+      position: 1
+    ))
+  )
+);

package/foundations/variables/gradientsList.scss

@@ -0,0 +1,4 @@
+$ds-gradient-content-fade-left: var(--ds-gradient-content-fade-left);
+$ds-gradient-content-fade-right: var(--ds-gradient-content-fade-right);
+$ds-gradient-content-fade-up: var(--ds-gradient-content-fade-up);
+$ds-gradient-content-fade-down: var(--ds-gradient-content-fade-down);