@design-system-rte/core 0.3.0 → 0.6.0

package/design-tokens/tokens/_elevation.scss

@@ -0,0 +1,144 @@
+@use "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-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/_mixins.scss

@@ -0,0 +1,250 @@
+@use 'themes' as *;
+@use 'typography' as *;
+@use 'sass:map';
+
+$themes: (
+  "bleu_iceberg": $bleu-iceberg,
+  "violet": $violet,
+  "vert_foret": $vert-foret
+);
+
+@mixin apply-theme($targetTheme: bleu_iceberg, $mode: light) {
+  $targetTheme: map.get($themes, $targetTheme, $mode);
+
+  @include extract-custom-properties-from-theme($targetTheme);
+}
+
+
+@mixin theme-selector($targetTheme: bleu_iceberg, $mode: light) {
+  $theme: map.get($themes, $targetTheme, $mode);
+
+  [data-theme="#{$targetTheme}"][data-mode="#{$mode}"] {
+    @include extract-custom-properties-from-theme($theme);
+  }
+}
+
+@mixin extract-custom-properties-from-theme($theme) {
+  @each $property, $value in $theme {
+    --#{$property}: #{$value};
+  }
+}
+
+
+@mixin hover-box-shadow($color) {
+  box-shadow: 0 0 0 8px $color;
+}
+
+// Mixins for typography
+
+@mixin typography-button {
+  font-feature-settings: 'liga' off, 'clig' off;
+  font-style: normal;
+}
+
+@mixin typography-button-s {
+  @include typography-button;
+  font-family: $button-s-semibold-font-family;
+  font-size: $button-s-semibold-font-size;
+  letter-spacing: $button-s-semibold-letter-spacing;
+  font-weight: $button-s-semibold-font-weight;
+  line-height: $button-s-semibold-line-height;
+}
+
+@mixin typography-button-m {
+  @include typography-button;
+  font-family: $button-m-semibold-font-family;
+  font-weight: $button-m-semibold-font-weight;
+  font-size: $button-m-semibold-font-size;
+  line-height: $button-m-semibold-line-height;
+  letter-spacing: $button-m-semibold-letter-spacing;
+}
+
+@mixin typography-button-l {
+  @include typography-button;
+  font-family: $button-l-semibold-font-family;
+  font-weight: $button-l-semibold-font-weight;
+  font-size: $button-l-semibold-font-size;
+  line-height: $button-l-semibold-line-height;
+  letter-spacing: $button-l-semibold-letter-spacing;
+}
+
+@mixin typography-text {
+  font-feature-settings: 'liga' off, 'clig' off;
+  font-style: normal;
+}
+
+@mixin typography-text-m {
+  @include typography-text;
+  font-family: $text-m-regular-font-family;
+  font-weight: $text-m-regular-font-weight;
+  font-size: $text-m-regular-font-size;
+  line-height: $text-m-regular-line-height;
+  letter-spacing: $text-m-regular-letter-spacing;
+}
+
+@mixin typography-text-m-bold {
+  @include typography-text;
+  font-family: $text-m-bold-font-family;
+  font-weight: $text-m-bold-font-weight;
+  font-size: $text-m-bold-font-size;
+  line-height: $text-m-bold-line-height;
+  letter-spacing: $text-m-bold-letter-spacing;
+}
+
+@mixin typography-text-s {
+  @include typography-text;
+  font-family: $text-s-regular-font-family;
+  font-weight: $text-s-regular-font-weight;
+  font-size: $text-s-regular-font-size;
+  line-height: $text-s-regular-line-height;
+  letter-spacing: $text-s-regular-letter-spacing;
+}
+
+@mixin typography-text-l {
+  @include typography-text;
+  font-family: $text-l-regular-font-family;
+  font-weight: $text-l-regular-font-weight;
+  font-size: $text-l-regular-font-size;
+  line-height: $text-l-regular-line-height;
+  letter-spacing: $text-l-regular-letter-spacing;
+}
+
+@mixin typography-link {
+  font-feature-settings: 'liga' off, 'clig' off;
+  font-style: normal;
+}
+
+@mixin typography-link-m {
+  @include typography-link;
+  font-family: $text-m-regular-font-family;
+  font-weight: $text-m-regular-font-weight;
+  font-size: $text-m-regular-font-size;
+  line-height: $text-m-regular-line-height;
+  letter-spacing: $text-m-regular-letter-spacing;
+}
+
+@mixin typography-radio-button {
+  font-feature-settings: 'liga' off, 'clig' off;
+  font-style: normal;
+}
+
+@mixin typography-radio-button-l {
+  @include typography-radio-button;
+  font-family: $text-l-regular-font-family;
+  font-size: $text-l-regular-font-size;
+  font-weight: $text-l-regular-font-weight;
+  line-height: $text-l-regular-line-height;
+  letter-spacing: $text-l-regular-letter-spacing;
+}
+
+@mixin typography-heading {
+  font-feature-settings: "liga" off, "clig" off;
+  font-style: normal;
+}
+
+@mixin typography-heading-s {
+  @include typography-heading;
+  font-family: $heading-s-semibold-font-family;
+  font-weight: $heading-s-semibold-font-weight;
+  font-size: $heading-s-semibold-font-size;
+  line-height: $heading-s-semibold-line-height;
+  letter-spacing: $heading-s-semibold-letter-spacing;
+}
+
+@mixin typography-checkbox-error {
+  @include typography-text-s;
+  font-weight: $text-s-bold-font-weight;
+}
+
+@mixin typography-tooltip {
+  font-feature-settings: "liga" off, "clig" off;
+  font-style: normal;
+}
+
+@mixin typography-tooltip-label {
+  @include typography-tooltip;
+  font-family: $text-m-regular-font-family;
+  font-weight: $text-m-regular-font-weight;
+  font-size: $text-m-regular-font-size;
+  line-height: $text-m-regular-line-height;
+  letter-spacing: $text-m-regular-letter-spacing;
+}
+
+@mixin typography-storybook-title {
+  font-feature-settings: "liga" off, "clig" off;
+  font-style: normal;
+  font-family: $heading-3xl-semibold-font-family;
+  font-weight: $heading-3xl-semibold-font-weight;
+  font-size: $heading-2xl-semibold-font-size;
+  line-height: $heading-xl-semibold-line-height;
+}
+
+@mixin typography-storybook-subtitle {
+  font-feature-settings: "liga" off, "clig" off;
+  font-style: normal;
+  font-family: $heading-4xl-semibold-font-family;
+  font-weight: $heading-m-semibold-font-weight;
+  font-size: $heading-m-semibold-font-size;
+  line-height: $heading-m-semibold-line-height;
+}
+
+@mixin typography-storybook-header-content {
+  font-feature-settings: "liga" off, "clig" off;
+  font-style: normal;
+  font-family: $text-xl-regular-font-family;
+  font-weight: $text-xl-regular-font-weight;
+  font-size: $text-xl-regular-font-size;
+  line-height: $text-xl-regular-line-height;
+}
+
+@mixin typography-storybook-header-xs {
+  font-feature-settings: "liga" off, "clig" off;
+  font-style: normal;
+  font-family: $heading-xs-semibold-font-family;
+  font-weight: $heading-xs-semibold-font-weight;
+  font-size: $heading-xs-semibold-font-size;
+  line-height: $heading-xs-semibold-line-height;
+  letter-spacing: $heading-xs-semibold-letter-spacing;
+}
+
+@mixin typography-storybook-header-s {
+  font-feature-settings: "liga" off, "clig" off;
+  font-style: normal;
+  font-family: $heading-s-semibold-font-family;
+  font-weight: $heading-s-semibold-font-weight;
+  font-size: $heading-s-semibold-font-size;
+  line-height: $heading-s-semibold-line-height;
+  letter-spacing: $heading-s-semibold-letter-spacing;
+}
+
+@mixin typography-split-button {
+  font-feature-settings: "liga" off, "clig" off;
+  font-style: normal;
+}
+
+@mixin typography-split-button-s {
+  @include typography-split-button;
+  font-family: $button-s-semibold-font-family;
+  font-weight: $button-s-semibold-font-weight;
+  font-size: $button-s-semibold-font-size;
+  line-height: $button-s-semibold-line-height;
+  letter-spacing: $button-s-semibold-letter-spacing;
+}
+
+@mixin typography-split-button-m {
+  @include typography-split-button;
+  font-family: $button-m-semibold-font-family;
+  font-weight: $button-m-semibold-font-weight;
+  font-size: $button-m-semibold-font-size;
+  line-height: $button-m-semibold-line-height;
+  letter-spacing: $button-m-semibold-letter-spacing;
+}
+
+@mixin typography-split-button-l {
+  @include typography-split-button;
+  font-family: $button-l-semibold-font-family;
+  font-weight: $button-l-semibold-font-weight;
+  font-size: $button-l-semibold-font-size;
+  line-height: $button-l-semibold-line-height;
+  letter-spacing: $button-l-semibold-letter-spacing;
+}

package/design-tokens/tokens/_shadows.scss

@@ -0,0 +1,36 @@
+$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/_themes.scss

@@ -0,0 +1,14 @@
+@use "./themes/main" 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,
+);

package/{tokens → design-tokens/tokens}/_typography.scss

@@ -1,4 +1,4 @@
-@use 'primitives/typography' as *;
+@use '../primitives/typography' as *;
 
 $heading-5xl-semibold-font-family: $font-family-nunito;
 $heading-5xl-semibold-font-weight: $font-weight-semibold;
@@ -114,4 +114,4 @@ $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;
+$button-l-semibold-letter-spacing: $letter-spacing-s;

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

@@ -0,0 +1,163 @@
+@use '../../primitives/colors' as *;
+@use '../../primitives/devColors' as *;
+
+$bleu-iceberg-dark: (
+  "background-default": $greyscale-900,
+  "background-hover": $greyscale-800,
+  "background-pressed": $greyscale-700,
+  "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-danger-default": $rouge-indications-400,
+  "background-danger-hover": $rouge-indications-500,
+  "background-danger-pressed": $rouge-indications-600,
+  "background-status-info-subtle": $bleu-digital-100,
+  "background-status-info": $bleu-digital-400,
+  "background-status-warning": $jaune-500,
+  "background-status-warning-subtle": $jaune-100,
+  "background-status-success": $vert-digital-400,
+  "background-status-success-subtle": $vert-digital-200,
+  "background-status-alert": $rouge-indications-500,
+  "background-status-alert-subtle": $rouge-indications-100,
+  "border-primary": $greyscale-400,
+  "border-secondary": $greyscale-600,
+  "border-tertiary": $greyscale-800,
+  "border-disabled": $greyscale-700,
+  "border-inverse": $greyscale-900,
+  "border-brand-default": $bleu-iceberg-0,
+  "border-brand-focused": $bleu-iceberg-0,
+  "border-danger": $rouge-indications-600,
+  "border-info": $bleu-digital-500,
+  "border-warning": $jaune-indications-400,
+  "border-success": $vert-digital-600,
+  "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,
+  "content-primary": $core-white,
+  "content-secondary": $greyscale-100,
+  "content-tertiary": $greyscale-300,
+  "content-primary-inverse": $greyscale-900,
+  "content-secondary-inverse": $greyscale-800,
+  "content-tertiary-inverse": $greyscale-600,
+  "content-disabled": $greyscale-700,
+  "content-brand-default": $bleu-iceberg-0,
+  "content-brand-hover": $bleu-iceberg-50,
+  "content-brand-press": $bleu-iceberg-100,
+  "content-link-default": $bleu-digital-500,
+  "content-link-hover": $bleu-digital-400,
+  "content-link-press": $bleu-digital-300,
+  "content-link-visited": $violet-500,
+  "content-link-visited-hover": $violet-400,
+  "content-link-visited-press": $violet-300,
+  "content-danger": $rouge-indications-400,
+  "content-danger-hover": $rouge-indications-500,
+  "content-danger-press": $rouge-indications-600,
+  "content-danger-inverse": $core-white,
+  "content-info": $bleu-digital-500,
+  "content-info-inverse": $core-white,
+  "content-info-bold": $bleu-digital-400,
+  "content-warning": $jaune-indications-400,
+  "content-warning-inverse": $core-white,
+  "content-warning-bold": $jaune-indications-300,
+  "content-success": $vert-digital-600,
+  "content-success-inverse": $core-white,
+  "content-success-bold": $vert-digital-500,
+  "content-decorative": $greyscale-900,
+  "content-status": $greyscale-900,
+  "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),
+  "gradient-default": #ffffff,
+  // 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,
+);