@design-system-rte/core 0.2.0 → 0.6.0

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

@@ -0,0 +1,163 @@
+@use '../../primitives/colors' as *;
+@use '../../primitives/devColors' as *;
+
+$bleu-iceberg-light: (
+  "background-default": $core-white,
+  "background-hover": $greyscale-50,
+  "background-pressed": $greyscale-100,
+  "background-disabled": $greyscale-0,
+  "background-inverse": $greyscale-900,
+  "background-brand-default": $bleu-iceberg-600,
+  "background-brand-hover": $bleu-iceberg-700,
+  "background-brand-pressed": $bleu-iceberg-800,
+  "background-brand-selected-default": $bleu-iceberg-600,
+  "background-brand-selected-hover": $bleu-iceberg-700,
+  "background-brand-unselected-default": $bleu-iceberg-100,
+  "background-brand-unselected-hover": $bleu-iceberg-200,
+  "background-brand-inverse-default": $core-white,
+  "background-brand-inverse-hover": $bleu-iceberg-50,
+  "background-brand-inverse-pressed": $bleu-iceberg-100,
+  "background-danger-default": $rouge-indications-600,
+  "background-danger-hover": $rouge-indications-700,
+  "background-danger-pressed": $rouge-indications-800,
+  "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-600,
+  "border-secondary": $greyscale-400,
+  "border-tertiary": $greyscale-200,
+  "border-disabled": $greyscale-200,
+  "border-inverse": $core-white,
+  "border-brand-default": $bleu-iceberg-600,
+  "border-brand-focused": $bleu-iceberg-900,
+  "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-400,
+  "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-600,
+  "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-200,
+  "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": $greyscale-900,
+  "content-secondary": $greyscale-800,
+  "content-tertiary": $greyscale-600,
+  "content-primary-inverse": $core-white,
+  "content-secondary-inverse": $greyscale-100,
+  "content-tertiary-inverse": $greyscale-300,
+  "content-disabled": $greyscale-200,
+  "content-brand-default": $bleu-iceberg-600,
+  "content-brand-hover": $bleu-iceberg-700,
+  "content-brand-press": $bleu-iceberg-800,
+  "content-link-default": $bleu-digital-500,
+  "content-link-hover": $bleu-digital-600,
+  "content-link-press": $bleu-digital-700,
+  "content-link-visited": $violet-600,
+  "content-link-visited-hover": $violet-700,
+  "content-link-visited-press": $violet-800,
+  "content-danger": $rouge-indications-600,
+  "content-danger-hover": $rouge-indications-700,
+  "content-danger-press": $rouge-indications-800,
+  "content-danger-inverse": $core-white,
+  "content-info": $bleu-digital-500,
+  "content-info-inverse": $core-white,
+  "content-info-bold": $bleu-digital-600,
+  "content-warning": $jaune-indications-400,
+  "content-warning-inverse": $core-white,
+  "content-warning-bold": $jaune-indications-500,
+  "content-success": $vert-digital-600,
+  "content-success-inverse": $core-white,
+  "content-success-bold": $vert-digital-700,
+  "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.00),
+  "elevation-surface-shadow-1": rgba(255, 255, 255, 0.00),
+  "elevation-surface-shadow-2": rgba(255, 255, 255, 0.00),
+  "elevation-surface-shadow-3": rgba(255, 255, 255, 0.00),
+  "elevation-surface-shadow-4": rgba(255, 255, 255, 0.00),
+  "elevation-surface-shadow-5": rgba(255, 255, 255, 0.00),
+  "elevation-surface-shadow-6": rgba(255, 255, 255, 0.00),
+  "elevation-shadow-ambient": rgba(0, 0, 0, 0.12),
+  "elevation-shadow-ambient-darker": rgba(0, 0, 0, 0.20),
+  "elevation-shadow-ambient-brand": rgba(0, 0, 0, 0.25),
+  "elevation-shadow-key": rgba(0, 0, 0, 0.14),
+  "elevation-shadow-key-darker": rgba(0, 0, 0, 0.24),
+  "elevation-shadow-key-brand": rgba(0, 0, 0, 0.31),
+  "gradient-default": #ffffff,
+  // TODO remove this color (not a real token)
+  "background-brand-hover-opacity-20": $bleu-iceberg-700-opacity-20,
+  // TODO remove this color (not a real token)
+  "background-danger-hover-opacity-20": $rouge-indications-700-opacity-20,
+  // TODO remove this color (not a real token)
+  "background-hover-opacity-50": $greyscale-50-opacity-50,
+);

package/design-tokens/tokens/themes/_main.scss

@@ -0,0 +1,6 @@
+@forward "bleu-iceberg-light";
+@forward "bleu-iceberg-dark";
+@forward "violet-light";
+@forward "violet-dark";
+@forward "vert-foret-light";
+@forward "vert-foret-dark";

package/design-tokens/tokens/themes/_vert-foret-dark.scss

@@ -0,0 +1,163 @@
+@use '../../primitives/colors' as *;
+@use '../../primitives/devColors' as *;
+
+$vert-foret-dark: (
+  "background-default": $greyscale-900,
+  "background-hover": $greyscale-800,
+  "background-pressed": $greyscale-700,
+  "background-disabled": $greyscale-800,
+  "background-inverse": $core-white,
+  "background-brand-default": $vert-foret-300,
+  "background-brand-hover": $vert-foret-200,
+  "background-brand-pressed": $vert-foret-100,
+  "background-brand-selected-default": $vert-foret-300,
+  "background-brand-selected-hover": $vert-foret-200,
+  "background-brand-unselected-default": $vert-foret-700,
+  "background-brand-unselected-hover": $vert-foret-600,
+  "background-brand-inverse-default": $greyscale-900,
+  "background-brand-inverse-hover": $vert-foret-700,
+  "background-brand-inverse-pressed": $vert-foret-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": $vert-foret-0,
+  "border-brand-focused": $vert-foret-0,
+  "border-danger": $rouge-indications-600,
+  "border-info": $bleu-digital-500,
+  "border-warning": $jaune-indications-400,
+  "border-success": $vert-digital-600,
+  "chart-brand": $vert-foret-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": $vert-foret-0,
+  "content-brand-hover": $vert-foret-50,
+  "content-brand-press": $vert-foret-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": $vert-foret-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,
+);

package/design-tokens/tokens/themes/_vert-foret-light.scss

@@ -0,0 +1,163 @@
+@use '../../primitives/colors' as *;
+@use '../../primitives/devColors' as *;
+
+$vert-foret-light: (
+  "background-default": $core-white,
+  "background-hover": $greyscale-50,
+  "background-pressed": $greyscale-100,
+  "background-disabled": $greyscale-0,
+  "background-inverse": $greyscale-900,
+  "background-brand-default": $vert-foret-600,
+  "background-brand-hover": $vert-foret-700,
+  "background-brand-pressed": $vert-foret-800,
+  "background-brand-selected-default": $vert-foret-600,
+  "background-brand-selected-hover": $vert-foret-700,
+  "background-brand-unselected-default": $vert-foret-100,
+  "background-brand-unselected-hover": $vert-foret-200,
+  "background-brand-inverse-default": $core-white,
+  "background-brand-inverse-hover": $vert-foret-50,
+  "background-brand-inverse-pressed": $vert-foret-100,
+  "background-danger-default": $rouge-indications-600,
+  "background-danger-hover": $rouge-indications-700,
+  "background-danger-pressed": $rouge-indications-800,
+  "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-600,
+  "border-secondary": $greyscale-400,
+  "border-tertiary": $greyscale-200,
+  "border-disabled": $greyscale-200,
+  "border-inverse": $core-white,
+  "border-brand-default": $vert-foret-600,
+  "border-brand-focused": $vert-foret-900,
+  "border-danger": $rouge-indications-600,
+  "border-info": $bleu-digital-500,
+  "border-warning": $jaune-indications-400,
+  "border-success": $vert-digital-600,
+  "chart-brand": $vert-foret-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": $greyscale-900,
+  "content-secondary": $greyscale-800,
+  "content-tertiary": $greyscale-600,
+  "content-primary-inverse": $core-white,
+  "content-secondary-inverse": $greyscale-100,
+  "content-tertiary-inverse": $greyscale-300,
+  "content-disabled": $greyscale-200,
+  "content-brand-default": $vert-foret-600,
+  "content-brand-hover": $vert-foret-700,
+  "content-brand-press": $vert-foret-800,
+  "content-link-default": $bleu-digital-500,
+  "content-link-hover": $bleu-digital-600,
+  "content-link-press": $bleu-digital-700,
+  "content-link-visited": $violet-600,
+  "content-link-visited-hover": $violet-700,
+  "content-link-visited-press": $violet-800,
+  "content-danger": $rouge-indications-600,
+  "content-danger-hover": $rouge-indications-700,
+  "content-danger-press": $rouge-indications-800,
+  "content-danger-inverse": $core-white,
+  "content-info": $bleu-digital-500,
+  "content-info-inverse": $core-white,
+  "content-info-bold": $bleu-digital-600,
+  "content-warning": $jaune-indications-400,
+  "content-warning-inverse": $core-white,
+  "content-warning-bold": $jaune-indications-500,
+  "content-success": $vert-digital-600,
+  "content-success-inverse": $core-white,
+  "content-success-bold": $vert-digital-700,
+  "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.00),
+  "elevation-surface-shadow-1": rgba(255, 255, 255, 0.00),
+  "elevation-surface-shadow-2": rgba(255, 255, 255, 0.00),
+  "elevation-surface-shadow-3": rgba(255, 255, 255, 0.00),
+  "elevation-surface-shadow-4": rgba(255, 255, 255, 0.00),
+  "elevation-surface-shadow-5": rgba(255, 255, 255, 0.00),
+  "elevation-surface-shadow-6": rgba(255, 255, 255, 0.00),
+  "elevation-shadow-ambient": rgba(0, 0, 0, 0.12),
+  "elevation-shadow-ambient-darker": rgba(0, 0, 0, 0.20),
+  "elevation-shadow-ambient-brand": rgba(0, 0, 0, 0.25),
+  "elevation-shadow-key": rgba(0, 0, 0, 0.14),
+  "elevation-shadow-key-darker": rgba(0, 0, 0, 0.24),
+  "elevation-shadow-key-brand": rgba(0, 0, 0, 0.31),
+  "gradient-default": #ffffff,
+  // TODO remove this color (not a real token)
+  "background-brand-hover-opacity-20": $vert-foret-700-opacity-20,
+  // TODO remove this color (not a real token)
+  "background-danger-hover-opacity-20": $rouge-indications-700-opacity-20,
+  // TODO remove this color (not a real token)
+  "background-hover-opacity-50": $greyscale-50-opacity-50,
+);

package/design-tokens/tokens/themes/_violet-dark.scss

@@ -0,0 +1,163 @@
+@use '../../primitives/colors' as *;
+@use '../../primitives/devColors' as *;
+
+$violet-dark: (
+  "background-default": $greyscale-900,
+  "background-hover": $greyscale-800,
+  "background-pressed": $greyscale-700,
+  "background-disabled": $greyscale-800,
+  "background-inverse": $core-white,
+  "background-brand-default": $violet-300,
+  "background-brand-hover": $violet-200,
+  "background-brand-pressed": $violet-100,
+  "background-brand-selected-default": $violet-300,
+  "background-brand-selected-hover": $violet-200,
+  "background-brand-unselected-default": $violet-700,
+  "background-brand-unselected-hover": $violet-600,
+  "background-brand-inverse-default": $greyscale-900,
+  "background-brand-inverse-hover": $violet-700,
+  "background-brand-inverse-pressed": $violet-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": $violet-0,
+  "border-brand-focused": $violet-0,
+  "border-danger": $rouge-indications-600,
+  "border-info": $bleu-digital-500,
+  "border-warning": $jaune-indications-400,
+  "border-success": $vert-digital-600,
+  "chart-brand": $violet-600,
+  "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": $violet-0,
+  "content-brand-hover": $violet-50,
+  "content-brand-press": $violet-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": $violet-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,
+);