@rte-ds/core 1.2.1

package/design-tokens/tokens/_index.scss

@@ -0,0 +1 @@
+@forward "public"

package/design-tokens/tokens/private/_gradient.scss

@@ -0,0 +1,54 @@
+@use 'sass:map';
+@use '../public/themes/index' as *;
+
+@mixin neutral-top-bottom {
+  background: linear-gradient(180deg, hsla(0, 4%, 5%, 1), hsla(0, 4%, 5%, 0));
+}
+
+@mixin neutral-top-bottom-light {
+  background: linear-gradient(180deg, hsla(0, 4%, 5%, 0.6), hsla(0, 4%, 5%, 0));
+}
+
+@mixin neutral-top-bottom-smooth {
+  background: linear-gradient(180deg,
+      hsla(0, 4%, 5%, 0.84), hsla(0, 4%, 5%, 0.8), hsla(0, 4%, 5%, 0.75), hsla(0, 4%, 5%, 0.71), hsla(0, 4%, 5%, 0.67), hsla(0, 4%, 5%, 0.63), hsla(0, 4%, 5%, 0.59), hsla(0, 4%, 5%, 0.54), hsla(0, 4%, 5%, 0.49), hsla(0, 4%, 5%, 0.44), hsla(0, 4%, 5%, 0.38), hsla(0, 4%, 5%, 0.32), hsla(0, 4%, 5%, 0.25), hsla(0, 4%, 5%, 0.18), hsla(0, 4%, 5%, 0.09), hsla(0, 4%, 5%, 0));
+}
+
+@mixin neutral-bottom-top {
+  background: linear-gradient(0deg, hsla(0, 4%, 5%, 1), hsla(0, 4%, 5%, 0));
+}
+
+@mixin neutral-bottom-top-light {
+  background: linear-gradient(0deg, hsla(0, 4%, 5%, 0.6), hsla(0, 4%, 5%, 0));
+}
+
+@mixin neutral-bottom-top-smooth {
+  background: linear-gradient(0deg,
+      hsla(0, 4%, 5%, 0.84), hsla(0, 4%, 5%, 0.8), hsla(0, 4%, 5%, 0.75), hsla(0, 4%, 5%, 0.71), hsla(0, 4%, 5%, 0.67), hsla(0, 4%, 5%, 0.63), hsla(0, 4%, 5%, 0.59), hsla(0, 4%, 5%, 0.54), hsla(0, 4%, 5%, 0.49), hsla(0, 4%, 5%, 0.44), hsla(0, 4%, 5%, 0.38), hsla(0, 4%, 5%, 0.32), hsla(0, 4%, 5%, 0.25), hsla(0, 4%, 5%, 0.18), hsla(0, 4%, 5%, 0.09), hsla(0, 4%, 5%, 0));
+}
+
+@mixin neutral-left-right {
+  background: linear-gradient(90deg, hsla(0, 4%, 5%, 1), hsla(0, 4%, 5%, 0));
+}
+
+@mixin neutral-left-right-light {
+  background: linear-gradient(90deg, hsla(0, 4%, 5%, 0.6), hsla(0, 4%, 5%, 0));
+}
+
+@mixin neutral-left-right-smooth {
+  background: linear-gradient(90deg,
+      hsla(0, 4%, 5%, 0.84), hsla(0, 4%, 5%, 0.8), hsla(0, 4%, 5%, 0.75), hsla(0, 4%, 5%, 0.71), hsla(0, 4%, 5%, 0.67), hsla(0, 4%, 5%, 0.63), hsla(0, 4%, 5%, 0.59), hsla(0, 4%, 5%, 0.54), hsla(0, 4%, 5%, 0.49), hsla(0, 4%, 5%, 0.44), hsla(0, 4%, 5%, 0.38), hsla(0, 4%, 5%, 0.32), hsla(0, 4%, 5%, 0.25), hsla(0, 4%, 5%, 0.18), hsla(0, 4%, 5%, 0.09), hsla(0, 4%, 5%, 0));
+}
+
+@mixin neutral-right-left {
+  background: linear-gradient(270deg, hsla(0, 4%, 5%, 1), hsla(0, 4%, 5%, 0));
+}
+
+@mixin neutral-right-left-light {
+  background: linear-gradient(270deg, hsla(0, 4%, 5%, 0.6), hsla(0, 4%, 5%, 0));
+}
+
+@mixin neutral-right-left-smooth {
+  background: linear-gradient(270deg,
+      hsla(0, 4%, 5%, 0.84), hsla(0, 4%, 5%, 0.8), hsla(0, 4%, 5%, 0.75), hsla(0, 4%, 5%, 0.71), hsla(0, 4%, 5%, 0.67), hsla(0, 4%, 5%, 0.63), hsla(0, 4%, 5%, 0.59), hsla(0, 4%, 5%, 0.54), hsla(0, 4%, 5%, 0.49), hsla(0, 4%, 5%, 0.44), hsla(0, 4%, 5%, 0.38), hsla(0, 4%, 5%, 0.32), hsla(0, 4%, 5%, 0.25), hsla(0, 4%, 5%, 0.18), hsla(0, 4%, 5%, 0.09), hsla(0, 4%, 5%, 0));
+}

package/design-tokens/tokens/private/_index.scss

@@ -0,0 +1,4 @@
+@forward "gradient";
+@forward "zindex";
+@forward "shadows";
+@forward "size";

package/design-tokens/tokens/private/_shadows.scss

@@ -0,0 +1,38 @@
+// This file is auto-generated. Do not edit directly.
+
+$ambient-shadow-position-x: 0px;
+$ambient-shadow-position-y: 0px;
+$ambient-shadow-blur: 2px;
+$ambient-shadow-spread: 0px;
+$ambient-shadow-darker-position-x: 0px;
+$ambient-shadow-darker-position-y: 0px;
+$ambient-shadow-darker-blur: 8px;
+$ambient-shadow-darker-spread: 0px;
+$inner-shadow-key-position-x: 0px;
+$inner-shadow-key-position-y: 1px;
+$inner-shadow-key-blur: 4px;
+$inner-shadow-key-spread: 0px;
+$shadow-1-key-position-x: 0px;
+$shadow-1-key-position-y: 1px;
+$shadow-1-key-blur: 2px;
+$shadow-1-key-spread: 0px;
+$shadow-2-key-position-x: 0px;
+$shadow-2-key-position-y: 2px;
+$shadow-2-key-blur: 4px;
+$shadow-2-key-spread: 0px;
+$shadow-3-key-position-x: 0px;
+$shadow-3-key-position-y: 4px;
+$shadow-3-key-blur: 8px;
+$shadow-3-key-spread: 0px;
+$shadow-4-key-position-x: 0px;
+$shadow-4-key-position-y: 8px;
+$shadow-4-key-blur: 16px;
+$shadow-4-key-spread: 0px;
+$shadow-5-key-position-x: 0px;
+$shadow-5-key-position-y: 14px;
+$shadow-5-key-blur: 28px;
+$shadow-5-key-spread: 0px;
+$shadow-6-key-position-x: 0px;
+$shadow-6-key-position-y: 32px;
+$shadow-6-key-blur: 64px;
+$shadow-6-key-spread: 0px;

package/design-tokens/tokens/private/_size.scss

@@ -0,0 +1,7 @@
+// This file is auto-generated. Do not edit directly.
+
+$icon-xs: 12px;
+$icon-s: 16px;
+$icon-m: 20px;
+$icon-l: 24px;
+$icon-xl: 32px;

package/design-tokens/tokens/private/_zindex.scss

@@ -0,0 +1,5 @@
+// This file is auto-generated. Do not edit directly.
+
+$level-0: 0;
+$level-1: 10;
+$level-2: 100;

package/design-tokens/tokens/public/_border.scss

@@ -0,0 +1,15 @@
+// This file is auto-generated. Do not edit directly.
+
+$radius-none: 0px;
+$radius-xs: 2px;
+$radius-s: 4px;
+$radius-m: 8px;
+$radius-l: 12px;
+$radius-xl: 16px;
+$radius-2xl: 32px;
+$radius-pill: 999px;
+$width-none: 0px;
+$width-xs: 1px;
+$width-s: 2px;
+$width-m: 4px;
+$width-l: 8px;

package/design-tokens/tokens/public/_elevation.scss

@@ -0,0 +1,154 @@
+@use "../private/shadows" as *;
+
+@mixin neutral-inner-shadow {
+  box-shadow: inset $inner-shadow-key-position-x $inner-shadow-key-position-y $inner-shadow-key-blur $inner-shadow-key-spread var(--elevation-shadow-key);
+}
+
+@mixin elevation-neutral-inner-shadow {
+  @include neutral-inner-shadow;
+  background: linear-gradient(0deg, var(--elevation-surface-inner-shadow) 0%, var(--elevation-surface-inner-shadow) 100%);
+}
+
+@mixin neutral-shadow-1 {
+  box-shadow: $shadow-1-key-position-x $shadow-1-key-position-y $shadow-1-key-blur $shadow-1-key-spread var(--elevation-shadow-key),
+    $ambient-shadow-position-x $ambient-shadow-position-y $ambient-shadow-blur $ambient-shadow-spread var(--elevation-shadow-ambient);
+}
+
+@mixin elevation-neutral-shadow-1 {
+  @include neutral-shadow-1;
+  background: linear-gradient(0deg, var(--elevation-surface-shadow-1) 0%, var(--elevation-surface-shadow-1) 100%);
+}
+
+@mixin neutral-shadow-2 {
+  box-shadow: $shadow-2-key-position-x $shadow-2-key-position-y $shadow-2-key-blur $shadow-2-key-spread var(--elevation-shadow-key),
+    $ambient-shadow-position-x $ambient-shadow-position-y $ambient-shadow-blur $ambient-shadow-spread var(--elevation-shadow-ambient);
+}
+
+@mixin elevation-neutral-shadow-2 {
+  @include neutral-shadow-2;
+  background: linear-gradient(0deg, var(--elevation-surface-shadow-2) 0%, var(--elevation-surface-shadow-2) 100%);
+}
+
+@mixin neutral-drop-shadow-2 {
+  filter:
+    drop-shadow($shadow-2-key-position-x $shadow-2-key-position-y $shadow-2-key-blur var(--elevation-shadow-key)) drop-shadow($ambient-shadow-position-x $ambient-shadow-position-y $ambient-shadow-blur var(--elevation-shadow-ambient));
+}
+
+@mixin elevation-neutral-drop-shadow-2 {
+  @include neutral-drop-shadow-2;
+  background: linear-gradient(0deg, var(--elevation-surface-shadow-2) 0%, var(--elevation-surface-shadow-2) 100%);
+}
+
+@mixin neutral-shadow-3 {
+  box-shadow: $shadow-3-key-position-x $shadow-3-key-position-y $shadow-3-key-blur $shadow-3-key-spread var(--elevation-shadow-key),
+    $ambient-shadow-position-x $ambient-shadow-position-y $ambient-shadow-blur $ambient-shadow-spread var(--elevation-shadow-ambient);
+}
+
+@mixin elevation-neutral-shadow-3 {
+  @include neutral-shadow-3;
+  background: linear-gradient(0deg, var(--elevation-surface-shadow-3) 0%, var(--elevation-surface-shadow-3) 100%);
+}
+
+@mixin neutral-shadow-4 {
+  box-shadow: $shadow-4-key-position-x $shadow-4-key-position-y $shadow-4-key-blur $shadow-4-key-spread var(--elevation-shadow-key),
+    $ambient-shadow-position-x $ambient-shadow-position-y $ambient-shadow-blur $ambient-shadow-spread var(--elevation-shadow-ambient);
+}
+
+@mixin elevation-neutral-shadow-4 {
+  @include neutral-shadow-4;
+  background: linear-gradient(0deg, var(--elevation-surface-shadow-4) 0%, var(--elevation-surface-shadow-4) 100%);
+}
+
+@mixin neutral-shadow-5 {
+  box-shadow: $shadow-5-key-position-x $shadow-5-key-position-y $shadow-5-key-blur $shadow-5-key-spread var(--elevation-shadow-key-darker),
+    $ambient-shadow-darker-position-x $ambient-shadow-darker-position-y $ambient-shadow-darker-blur $ambient-shadow-darker-spread var(--elevation-shadow-ambient-darker);
+}
+
+@mixin elevation-neutral-shadow-5 {
+  @include neutral-shadow-5;
+  background: linear-gradient(0deg, var(--elevation-surface-shadow-5) 0%, var(--elevation-surface-shadow-5) 100%);
+}
+
+@mixin neutral-shadow-6 {
+  box-shadow: $shadow-6-key-position-x $shadow-6-key-position-y $shadow-6-key-blur $shadow-6-key-spread var(--elevation-shadow-key-darker),
+    $ambient-shadow-darker-position-x $ambient-shadow-darker-position-y $ambient-shadow-darker-blur $ambient-shadow-darker-spread var(--elevation-shadow-ambient-darker);
+}
+
+@mixin elevation-neutral-shadow-6 {
+  @include neutral-shadow-6;
+  background: linear-gradient(0deg, var(--elevation-surface-shadow-6) 0%, var(--elevation-surface-shadow-6) 100%);
+}
+
+@mixin brand-inner-shadow {
+  box-shadow: inset $inner-shadow-key-position-x $inner-shadow-key-position-y $inner-shadow-key-blur $inner-shadow-key-spread var(--elevation-shadow-key-brand);
+}
+
+@mixin elevation-brand-inner-shadow {
+  @include brand-inner-shadow;
+}
+
+@mixin brand-shadow-1 {
+  box-shadow:
+    $shadow-1-key-position-x $shadow-1-key-position-y $shadow-1-key-blur $shadow-1-key-spread var(--elevation-shadow-key-brand),
+    $ambient-shadow-position-x $ambient-shadow-position-y $ambient-shadow-blur $ambient-shadow-spread var(--elevation-shadow-ambient-brand);
+}
+
+@mixin elevation-brand-shadow-1 {
+  @include brand-shadow-1;
+  background: linear-gradient(0deg, var(--elevation-surface-shadow-1) 0%, var(--elevation-surface-shadow-1) 100%);
+}
+
+@mixin brand-shadow-2 {
+  box-shadow:
+    $shadow-2-key-position-x $shadow-2-key-position-y $shadow-2-key-blur $shadow-2-key-spread var(--elevation-shadow-key-brand),
+    $ambient-shadow-position-x $ambient-shadow-position-y $ambient-shadow-blur $ambient-shadow-spread var(--elevation-shadow-ambient-brand);
+}
+
+@mixin elevation-brand-shadow-2 {
+  @include brand-shadow-2;
+  background: linear-gradient(0deg, var(--elevation-surface-shadow-2) 0%, var(--elevation-surface-shadow-2) 100%);
+}
+
+@mixin brand-shadow-3 {
+  box-shadow:
+    $shadow-3-key-position-x $shadow-3-key-position-y $shadow-3-key-blur $shadow-3-key-spread var(--elevation-shadow-key-brand),
+    $ambient-shadow-position-x $ambient-shadow-position-y $ambient-shadow-blur $ambient-shadow-spread var(--elevation-shadow-ambient-brand);
+}
+
+@mixin elevation-brand-shadow-3 {
+  @include brand-shadow-3;
+  background: linear-gradient(0deg, var(--elevation-surface-shadow-3) 0%, var(--elevation-surface-shadow-3) 100%);
+}
+
+@mixin brand-shadow-4 {
+  box-shadow:
+    $shadow-4-key-position-x $shadow-4-key-position-y $shadow-4-key-blur $shadow-4-key-spread var(--elevation-shadow-key-brand),
+    $ambient-shadow-position-x $ambient-shadow-position-y $ambient-shadow-blur $ambient-shadow-spread var(--elevation-shadow-ambient-brand);
+}
+
+@mixin elevation-brand-shadow-4 {
+  @include brand-shadow-4;
+  background: linear-gradient(0deg, var(--elevation-surface-shadow-4) 0%, var(--elevation-surface-shadow-4) 100%);
+}
+
+@mixin brand-shadow-5 {
+  box-shadow:
+    $shadow-5-key-position-x $shadow-5-key-position-y $shadow-5-key-blur $shadow-5-key-spread var(--elevation-shadow-key-brand),
+    $ambient-shadow-darker-position-x $ambient-shadow-darker-position-y $ambient-shadow-darker-blur $ambient-shadow-darker-spread var(--elevation-shadow-ambient-brand);
+}
+
+@mixin elevation-brand-shadow-5 {
+  @include brand-shadow-5;
+  background: linear-gradient(0deg, var(--elevation-surface-shadow-5) 0%, var(--elevation-surface-shadow-5) 100%);
+}
+
+@mixin brand-shadow-6 {
+  box-shadow:
+    $shadow-6-key-position-x $shadow-6-key-position-y $shadow-6-key-blur $shadow-6-key-spread var(--elevation-shadow-key-brand),
+    $ambient-shadow-darker-position-x $ambient-shadow-darker-position-y $ambient-shadow-darker-blur $ambient-shadow-darker-spread var(--elevation-shadow-ambient-brand);
+}
+
+@mixin elevation-brand-shadow-6 {
+  @include brand-shadow-6;
+  background: linear-gradient(0deg, var(--elevation-surface-shadow-6) 0%, var(--elevation-surface-shadow-6) 100%);
+}

package/design-tokens/tokens/public/_index.scss

@@ -0,0 +1,6 @@
+@forward "border";
+@forward "spacing";
+@forward "typography";
+@forward "layout";
+@forward "opacity";
+@forward "elevation";

package/design-tokens/tokens/public/_layout.scss

@@ -0,0 +1,16 @@
+// This file is auto-generated. Do not edit directly.
+
+$breakpoints-xxs: 320px;
+$breakpoints-xs: 480px;
+$breakpoints-s: 768px;
+$breakpoints-m: 1024px;
+$breakpoints-l: 1440px;
+$breakpoints-xl: 1768px;
+$column-number-xs: 1;
+$column-number-s: 2;
+$column-number-m: 6;
+$column-number-l: 12;
+$panel-width-xs: 64px;
+$panel-width-s: 224px;
+$panel-width-m: 320px;
+$panel-width-l: 504px;

package/design-tokens/tokens/public/_opacity.scss

@@ -0,0 +1,14 @@
+// This file is auto-generated. Do not edit directly.
+
+$opacity-0: 0%;
+$opacity-5: 5%;
+$opacity-10: 10%;
+$opacity-20: 20%;
+$opacity-30: 30%;
+$opacity-40: 40%;
+$opacity-50: 50%;
+$opacity-60: 60%;
+$opacity-70: 70%;
+$opacity-80: 80%;
+$opacity-90: 90%;
+$opacity-100: 100%;

package/design-tokens/tokens/public/_spacing.scss

@@ -0,0 +1,25 @@
+// This file is auto-generated. Do not edit directly.
+
+$positive-spacing_0: 0px;
+$positive-spacing_025: 2px;
+$positive-spacing_050: 4px;
+$positive-spacing_075: 6px;
+$positive-spacing_100: 8px;
+$positive-spacing_150: 12px;
+$positive-spacing_200: 16px;
+$positive-spacing_250: 20px;
+$positive-spacing_300: 24px;
+$positive-spacing_400: 32px;
+$positive-spacing_500: 40px;
+$positive-spacing_600: 48px;
+$positive-spacing_800: 64px;
+$positive-spacing_1000: 80px;
+$negative-spacing_negative_025: -2px;
+$negative-spacing_negative_050: -4px;
+$negative-spacing_negative_075: -6px;
+$negative-spacing_negative_100: -8px;
+$negative-spacing_negative_150: -12px;
+$negative-spacing_negative_200: -16px;
+$negative-spacing_negative_250: -20px;
+$negative-spacing_negative_300: -24px;
+$negative-spacing_negative_400: -32px;

package/design-tokens/tokens/public/_typography.scss

@@ -0,0 +1,119 @@
+// This file is auto-generated. Do not edit directly.
+
+@use '../../primitives/typography' as *;
+
+$heading-5xl-semibold-font-family: $font-family-nunito;
+$heading-5xl-semibold-font-weight: $font-weight-semibold;
+$heading-5xl-semibold-font-size: $font-size-10xl;
+$heading-5xl-semibold-line-height: $line-height-10xl;
+$heading-5xl-semibold-letter-spacing: $letter-spacing-xs;
+$heading-4xl-semibold-font-family: $font-family-nunito;
+$heading-4xl-semibold-font-weight: $font-weight-semibold;
+$heading-4xl-semibold-font-size: $font-size-9xl;
+$heading-4xl-semibold-line-height: $line-height-9xl;
+$heading-4xl-semibold-letter-spacing: $letter-spacing-xs;
+$heading-3xl-semibold-font-family: $font-family-nunito;
+$heading-3xl-semibold-font-weight: $font-weight-semibold;
+$heading-3xl-semibold-font-size: $font-size-8xl;
+$heading-3xl-semibold-line-height: $line-height-8xl;
+$heading-3xl-semibold-letter-spacing: $letter-spacing-xs;
+$heading-2xl-semibold-font-family: $font-family-nunito;
+$heading-2xl-semibold-font-weight: $font-weight-semibold;
+$heading-2xl-semibold-font-size: $font-size-7xl;
+$heading-2xl-semibold-line-height: $line-height-7xl;
+$heading-2xl-semibold-letter-spacing: $letter-spacing-xs;
+$heading-xl-semibold-font-family: $font-family-nunito;
+$heading-xl-semibold-font-weight: $font-weight-semibold;
+$heading-xl-semibold-font-size: $font-size-6xl;
+$heading-xl-semibold-line-height: $line-height-6xl;
+$heading-xl-semibold-letter-spacing: $letter-spacing-xs;
+$heading-l-semibold-font-family: $font-family-nunito;
+$heading-l-semibold-font-weight: $font-weight-semibold;
+$heading-l-semibold-font-size: $font-size-5xl;
+$heading-l-semibold-line-height: $line-height-5xl;
+$heading-l-semibold-letter-spacing: $letter-spacing-xs;
+$heading-m-semibold-font-family: $font-family-nunito;
+$heading-m-semibold-font-weight: $font-weight-semibold;
+$heading-m-semibold-font-size: $font-size-3xl;
+$heading-m-semibold-line-height: $line-height-3xl;
+$heading-m-semibold-letter-spacing: $letter-spacing-s;
+$heading-s-semibold-font-family: $font-family-nunito;
+$heading-s-semibold-font-weight: $font-weight-semibold;
+$heading-s-semibold-font-size: $font-size-2xl;
+$heading-s-semibold-line-height: $line-height-2xl;
+$heading-s-semibold-letter-spacing: $letter-spacing-s;
+$heading-xs-semibold-font-family: $font-family-nunito;
+$heading-xs-semibold-font-weight: $font-weight-semibold;
+$heading-xs-semibold-font-size: $font-size-xl;
+$heading-xs-semibold-line-height: $line-height-xl;
+$heading-xs-semibold-letter-spacing: $letter-spacing-s;
+$heading-2xs-semibold-font-family: $font-family-nunito;
+$heading-2xs-semibold-font-weight: $font-weight-semibold;
+$heading-2xs-semibold-font-size: $font-size-l;
+$heading-2xs-semibold-line-height: $line-height-l;
+$heading-2xs-semibold-letter-spacing: $letter-spacing-none;
+$text-xl-regular-font-family: $font-family-arial;
+$text-xl-regular-font-weight: $font-weight-regular;
+$text-xl-regular-font-size: $font-size-2xl;
+$text-xl-regular-line-height: $line-height-2xl;
+$text-xl-regular-letter-spacing: $letter-spacing-none;
+$text-xl-bold-font-family: $font-family-arial;
+$text-xl-bold-font-weight: $font-weight-bold;
+$text-xl-bold-font-size: $font-size-2xl;
+$text-xl-bold-line-height: $line-height-2xl;
+$text-xl-bold-letter-spacing: $letter-spacing-none;
+$text-l-regular-font-family: $font-family-arial;
+$text-l-regular-font-weight: $font-weight-regular;
+$text-l-regular-font-size: $font-size-xl;
+$text-l-regular-line-height: $line-height-xl;
+$text-l-regular-letter-spacing: $letter-spacing-none;
+$text-l-bold-font-family: $font-family-arial;
+$text-l-bold-font-weight: $font-weight-bold;
+$text-l-bold-font-size: $font-size-xl;
+$text-l-bold-line-height: $line-height-xl;
+$text-l-bold-letter-spacing: $letter-spacing-none;
+$text-m-regular-font-family: $font-family-arial;
+$text-m-regular-font-weight: $font-weight-regular;
+$text-m-regular-font-size: $font-size-l;
+$text-m-regular-line-height: $line-height-l;
+$text-m-regular-letter-spacing: $letter-spacing-none;
+$text-m-bold-font-family: $font-family-arial;
+$text-m-bold-font-weight: $font-weight-bold;
+$text-m-bold-font-size: $font-size-l;
+$text-m-bold-line-height: $line-height-l;
+$text-m-bold-letter-spacing: $letter-spacing-none;
+$text-s-regular-font-family: $font-family-arial;
+$text-s-regular-font-weight: $font-weight-regular;
+$text-s-regular-font-size: $font-size-m;
+$text-s-regular-line-height: $line-height-m;
+$text-s-regular-letter-spacing: $letter-spacing-none;
+$text-s-bold-font-family: $font-family-arial;
+$text-s-bold-font-weight: $font-weight-bold;
+$text-s-bold-font-size: $font-size-m;
+$text-s-bold-line-height: $line-height-m;
+$text-s-bold-letter-spacing: $letter-spacing-none;
+$text-xs-regular-font-family: $font-family-arial;
+$text-xs-regular-font-weight: $font-weight-regular;
+$text-xs-regular-font-size: $font-size-s;
+$text-xs-regular-line-height: $line-height-s;
+$text-xs-regular-letter-spacing: $letter-spacing-none;
+$text-xs-bold-font-family: $font-family-arial;
+$text-xs-bold-font-weight: $font-weight-bold;
+$text-xs-bold-font-size: $font-size-s;
+$text-xs-bold-line-height: $line-height-s;
+$text-xs-bold-letter-spacing: $letter-spacing-none;
+$button-s-semibold-font-family: $font-family-nunito;
+$button-s-semibold-font-weight: $font-weight-semibold;
+$button-s-semibold-font-size: $font-size-l;
+$button-s-semibold-line-height: $line-height-l;
+$button-s-semibold-letter-spacing: $letter-spacing-s;
+$button-m-semibold-font-family: $font-family-nunito;
+$button-m-semibold-font-weight: $font-weight-semibold;
+$button-m-semibold-font-size: $font-size-xl;
+$button-m-semibold-line-height: $line-height-xl;
+$button-m-semibold-letter-spacing: $letter-spacing-s;
+$button-l-semibold-font-family: $font-family-nunito;
+$button-l-semibold-font-weight: $font-weight-semibold;
+$button-l-semibold-font-size: $font-size-2xl;
+$button-l-semibold-line-height: $line-height-2xl;
+$button-l-semibold-letter-spacing: $letter-spacing-s;

package/design-tokens/tokens/public/themes/_index.scss

@@ -0,0 +1,22 @@
+// This file is auto-generated. Do not edit directly.
+
+@use 'base' as *;
+
+$bleu-iceberg: (
+  "light": $bleu-iceberg-light,
+  "dark": $bleu-iceberg-dark,
+);
+$violet: (
+  "light": $violet-light,
+  "dark": $violet-dark,
+);
+$vert-foret: (
+  "light": $vert-foret-light,
+  "dark": $vert-foret-dark,
+);
+
+$themes: (
+  "bleu_iceberg": $bleu-iceberg,
+  "violet": $violet,
+  "vert_foret": $vert-foret,
+);

package/design-tokens/tokens/public/themes/base/_bleu-iceberg-dark.scss

@@ -0,0 +1,171 @@
+// This file is auto-generated. Do not edit directly.
+
+@use '../../../../primitives/colors' as *;
+@use '../../../../primitives/devColors' as *;
+
+$bleu-iceberg-dark: (
+  "background-default": $greyscale-900,
+  "background-hover": $greyscale-800,
+  "background-neutral-regular-default": $greyscale-700,
+  "background-neutral-regular-hover": $greyscale-550,
+  "background-neutral-bold-default": $greyscale-200,
+  "background-neutral-bold-hover": $greyscale-50,
+  "background-neutral-navigation-default": $greyscale-50,
+  "background-neutral-navigation-hover": $greyscale-100,
+  "background-disabled": $greyscale-800,
+  "background-inverse": $core-white,
+  "background-brand-default": $bleu-iceberg-300,
+  "background-brand-hover": $bleu-iceberg-200,
+  "background-brand-pressed": $bleu-iceberg-100,
+  "background-brand-selected-default": $bleu-iceberg-300,
+  "background-brand-selected-hover": $bleu-iceberg-200,
+  "background-brand-unselected-default": $bleu-iceberg-700,
+  "background-brand-unselected-hover": $bleu-iceberg-600,
+  "background-brand-inverse-default": $greyscale-900,
+  "background-brand-inverse-hover": $bleu-iceberg-700,
+  "background-brand-inverse-pressed": $bleu-iceberg-600,
+  "background-brand-navigation-default": $bleu-iceberg-950,
+  "background-brand-navigation-hover": $bleu-iceberg-900,
+  "background-brand-navigation-pressed": $bleu-iceberg-700,
+  "background-danger-default": $rouge-indications-500,
+  "background-danger-hover": $rouge-indications-400,
+  "background-danger-pressed": $rouge-indications-300,
+  "background-info-default": $bleu-digital-400,
+  "background-warning-default": $jaune-500,
+  "background-success-default": $vert-digital-400,
+  "border-primary": $greyscale-400,
+  "border-secondary": $greyscale-600,
+  "border-tertiary": $greyscale-800,
+  "border-divider": $greyscale-400,
+  "border-disabled": $greyscale-700,
+  "border-inverse": $greyscale-900,
+  "border-brand-default": $bleu-iceberg-0,
+  "border-brand-focused": $bleu-iceberg-0,
+  "border-brand-navigation-active": $bleu-iceberg-700,
+  "border-brand-navigation-divider": $bleu-iceberg-800,
+  "border-danger": $rouge-indications-500,
+  "border-info": $bleu-digital-400,
+  "border-warning": $jaune-indications-400,
+  "border-success": $vert-digital-400,
+  "content-primary": $core-white,
+  "content-secondary": $greyscale-100,
+  "content-tertiary": $greyscale-300,
+  "content-primary-inverse": $greyscale-900,
+  "content-disabled": $greyscale-700,
+  "content-brand-default": $bleu-iceberg-0,
+  "content-brand-hover": $bleu-iceberg-50,
+  "content-brand-pressed": $bleu-iceberg-100,
+  "content-brand-navigation-default": $bleu-iceberg-100,
+  "content-brand-navigation-hover": $bleu-iceberg-50,
+  "content-brand-navigation-disabled": $bleu-iceberg-700,
+  "content-link-default": $bleu-digital-500,
+  "content-link-hover": $bleu-digital-400,
+  "content-link-pressed": $bleu-digital-300,
+  "content-link-visited-default": $violet-500,
+  "content-link-visited-hover": $violet-400,
+  "content-link-visited-pressed": $violet-300,
+  "content-danger-default": $rouge-indications-500,
+  "content-danger-hover": $rouge-indications-400,
+  "content-danger-inverse": $core-white,
+  "content-success-default": $vert-digital-400,
+  "content-success-hover": $vert-digital-500,
+  "content-info-default": $bleu-digital-400,
+  "content-info-hover": $bleu-digital-500,
+  "content-decorative": $greyscale-900,
+  "brand-navigation-divider": $bleu-iceberg-800,
+  "brand-navigation-divider-2": $bleu-iceberg-800,
+  "brand-navigation-divider-3": $bleu-iceberg-800,
+  "brand-navigation-divider-4": $bleu-iceberg-800,
+  "chart-brand": $bleu-iceberg-500,
+  "chart-neutral": $greyscale-350,
+  "chart-category-1": $bleu-iceberg-500,
+  "chart-category-2": $fuschia-500,
+  "chart-category-3": $violet-600,
+  "chart-category-4": $vert-foret-500,
+  "chart-category-5": $marine-900,
+  "chart-category-6": $jaune-indications-500,
+  "chart-category-7": $taupe-700,
+  "chart-category-8": $bleu-petrole-400,
+  "chart-bleu-iceberg": $bleu-iceberg-100,
+  "chart-bleu-iceberg-bold": $bleu-iceberg-500,
+  "chart-vert-foret": $vert-foret-100,
+  "chart-vert-foret-bold": $vert-foret-400,
+  "chart-violet": $violet-300,
+  "chart-violet-bold": $violet-600,
+  "chart-bleu-rte": $bleu-rte-100,
+  "chart-bleu-rte-bold": $bleu-rte-600,
+  "chart-bleu-digital": $bleu-digital-100,
+  "chart-bleu-digital-bold": $bleu-digital-500,
+  "chart-marine": $marine-100,
+  "chart-marine-bold": $marine-500,
+  "chart-bleu-petrole": $bleu-petrole-100,
+  "chart-bleu-petrole-bold": $bleu-petrole-500,
+  "chart-bleu-cyan": $bleu-cyan-100,
+  "chart-bleu-cyan-bold": $bleu-cyan-500,
+  "chart-vert": $vert-100,
+  "chart-vert-bold": $vert-500,
+  "chart-vert-indications": $vert-indications-200,
+  "chart-vert-indications-bold": $vert-indications-400,
+  "chart-vert-digital": $vert-digital-100,
+  "chart-vert-digital-bold": $vert-digital-400,
+  "chart-jaune": $jaune-100,
+  "chart-jaune-bold": $jaune-500,
+  "chart-jaune-ocre": $jaune-ocre-100,
+  "chart-jaune-ocre-bold": $jaune-ocre-400,
+  "chart-jaune-indications": $jaune-indications-100,
+  "chart-jaune-indications-bold": $jaune-indications-400,
+  "chart-saumon": $saumon-100,
+  "chart-saumon-bold": $saumon-500,
+  "chart-rose-digital": $rose-digital-200,
+  "chart-rose-digital-bold": $rose-digital-500,
+  "chart-fuschia": $fuschia-100,
+  "chart-fuschia-bold": $fuschia-500,
+  "chart-rouge-indications": $rouge-indications-100,
+  "chart-rouge-indications-bold": $rouge-indications-500,
+  "chart-greyscale": $greyscale-50,
+  "chart-greyscale-bold": $greyscale-550,
+  "chart-taupe": $taupe-200,
+  "chart-taupe-bold": $taupe-600,
+  "decorative-neutral": $greyscale-50,
+  "decorative-bleu-iceberg": $bleu-iceberg-200,
+  "decorative-vert-foret": $vert-foret-100,
+  "decorative-violet": $violet-200,
+  "decorative-bleu-rte": $bleu-rte-200,
+  "decorative-bleu-digital": $bleu-digital-200,
+  "decorative-marine": $marine-100,
+  "decorative-bleu-petrole": $bleu-petrole-200,
+  "decorative-bleu-cyan": $bleu-cyan-200,
+  "decorative-vert": $vert-200,
+  "decorative-vert-indications": $vert-indications-200,
+  "decorative-vert-digital": $vert-digital-200,
+  "decorative-jaune": $jaune-100,
+  "decorative-jaune-ocre": $jaune-ocre-200,
+  "decorative-jaune-indications": $jaune-indications-200,
+  "decorative-saumon": $saumon-300,
+  "decorative-rose-digital": $rose-digital-200,
+  "decorative-fuschia": $fuschia-200,
+  "decorative-rouge-indication": $rouge-indications-100,
+  "decorative-taupe": $taupe-200,
+  "elevation-surface-inner-shadow": rgba(0, 0, 0, 0.20),
+  "elevation-surface-shadow-1": rgba(255, 255, 255, 0.03),
+  "elevation-surface-shadow-2": rgba(255, 255, 255, 0.05),
+  "elevation-surface-shadow-3": rgba(255, 255, 255, 0.08),
+  "elevation-surface-shadow-4": rgba(255, 255, 255, 0.10),
+  "elevation-surface-shadow-5": rgba(255, 255, 255, 0.12),
+  "elevation-surface-shadow-6": rgba(255, 255, 255, 0.14),
+  "elevation-shadow-ambient": rgba(0, 0, 0, 0.20),
+  "elevation-shadow-ambient-darker": rgba(0, 0, 0, 0.40),
+  "elevation-shadow-ambient-brand": rgba(0, 0, 0, 0.17),
+  "elevation-shadow-key": rgba(0, 0, 0, 0.28),
+  "elevation-shadow-key-darker": rgba(0, 0, 0, 0.48),
+  "elevation-shadow-key-brand": rgba(0, 0, 0, 0.21),
+  "brand-navigation-divider-5": $bleu-iceberg-800,
+  "brand-navigation-divider-6": $bleu-iceberg-800,
+  "brand-navigation-divider-7": $bleu-iceberg-800,
+  // TODO remove this color (not a real token)
+  "background-brand-hover-opacity-20": $bleu-iceberg-200-opacity-20,
+  // TODO remove this color (not a real token)
+  "background-danger-hover-opacity-20": $rouge-indications-500-opacity-20,
+  // TODO remove this color (not a real token)
+  "background-hover-opacity-50": $greyscale-800-opacity-50,
+);