@design-system-rte/core 0.1.0

package/dist/core.mjs

@@ -0,0 +1 @@
+

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export declare interface ButtonProps {
+    label: string;
+    type?: ButtonType;
+    size?: ButtonSize;
+    disabled?: boolean;
+}
+
+export declare type ButtonSize = 's' | 'm' | 'l';
+
+export declare type ButtonType = 'filled' | 'outlined' | 'text' | 'transparent' | 'danger';
+
+export { }

package/dist/styles/main.css

@@ -0,0 +1,3 @@
+@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");
+
+/*# sourceMappingURL=main.css.map */

package/dist/styles/main.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../tokens/main.scss"],"names":[],"mappings":"AAMQ","file":"main.css"}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@design-system-rte/core",
+  "version": "0.1.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "style": "dist/styles/main.css",
+  "sass": "tokens/main.scss",
+  "files": ["dist", "tokens"],
+  "scripts": {
+    "build": "vite build && sass tokens/main.scss:dist/styles/main.css",
+    "build:types": "tsc --emitDeclarationOnly",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rte-france/design-system-rte"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "Design Tokens, interfaces and utilities for the Design System RTE",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "sass": "^1.85.1"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens/*": "./tokens/*",
+    "./style.css": "./dist/styles/main.css"
+  }
+}

package/tokens/_colors.scss

@@ -0,0 +1,388 @@
+// @use 'primitives/colors' as *;
+
+// :root{
+//   &[data-theme="bleu_iceberg"] {
+//     &[data-mode='light'] {
+//       --content-primary: #{$greyscale-900};
+//       --background-default: #{$core-white};
+//       --border-primary: #{$greyscale-600};
+//       --overlay-50: #{$core-black_50};
+//       --overlay-50_inverse: #{$core-white_50};
+//       --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};
+//       --background-hover: #{$greyscale-50};
+//       --background-pressed: #{$greyscale-100};
+//       --background-selected: #{$bleu_iceberg-200};
+//       --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_inverse_default: #{$core-white};
+//       --background-brand_inverse_hover: #{$bleu_iceberg-50};
+//       --background-brand_inverse_pressed: #{$bleu_iceberg-100};
+//       --background-danger_default: #{$rouge_indications-700};
+//       --background-danger_hover: #{$rouge_indications-800};
+//       --background-danger_pressed: #{$rouge_indications-900};
+//       --background-info: #{$bleu_digital-500};
+//       --background-info_subtle: #{$bleu_digital-100};
+//       --background-warning: #{$jaune_indications-400};
+//       --background-warning_subtle: #{$jaune_indications-100};
+//       --background-success: #{$vert_digital-600};
+//       --background-success_subtle: #{$vert_digital-200};
+//       --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-300};
+//       --content-brand_default: #{$bleu_iceberg-600};
+//       --content-brand_hover: #{$bleu_iceberg-700};
+//       --content-brand_pressed: #{$bleu_iceberg-800};
+//       --content-link_default: #{$bleu_digital-500};
+//       --content-link_hover: #{$bleu_digital-600};
+//       --content-link_pressed: #{$bleu_digital-700};
+//       --content-link_visited: #{$violet-600};
+//       --content-danger: #{$rouge_indications-700};
+//       --content-danger_inverse: #{$core-white};
+//       --content-danger_bold: #{$rouge_indications-800};
+//       --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};
+//     }
+    
+//     &[data-mode='dark'] {
+//       --content-primary: #{$core-white};
+//       --background-default: #{$greyscale-900};
+//       --border-primary: #{$greyscale-400};
+//       --overlay-50: #{$core-black_50};
+//       --overlay-50_inverse: #{$core-white_50};
+//       --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};
+//       --background-hover: #{$greyscale-800};
+//       --background-pressed: #{$greyscale-700};
+//       --background-selected: #{$bleu_iceberg-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_inverse_default: #{$bleu_iceberg-800};
+//       --background-brand_inverse_hover: #{$bleu_iceberg-700};
+//       --background-brand_inverse_pressed: #{$bleu_iceberg-600};
+//       --background-danger_default: #{$rouge_indications-700};
+//       --background-danger_hover: #{$rouge_indications-600};
+//       --background-danger_pressed: #{$rouge_indications-500};
+//       --background-info: #{$bleu_digital-500};
+//       --background-info_subtle: #{$bleu_digital-800};
+//       --background-warning: #{$jaune_indications-400};
+//       --background-warning_subtle: #{$jaune_indications-800};
+//       --background-success: #{$vert_digital-600};
+//       --background-success_subtle: #{$vert_digital-700};
+//       --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_pressed: #{$bleu_iceberg-100};
+//       --content-link_default: #{$bleu_digital-500};
+//       --content-link_hover: #{$bleu_digital-400};
+//       --content-link_pressed: #{$bleu_digital-300};
+//       --content-link_visited: #{$violet-300};
+//       --content-danger: #{$rouge_indications-600};
+//       --content-danger_inverse: #{$core-white};
+//       --content-danger_bold: #{$rouge_indications-500};
+//       --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};
+//     }
+//   }
+//   &[data-theme="violet"] {
+//     &[data-mode='light'] {
+//       --content-primary: #{$greyscale-900};
+//       --background-default: #{$core-white};
+//       --border-primary: #{$greyscale-600};
+//       --overlay-50: #{$core-black_50};
+//       --overlay-50_inverse: #{$core-white_50};
+//       --border-secondary: #{$greyscale-400};
+//       --border-tertiary: #{$greyscale-200};
+//       --border-disabled: #{$greyscale-200};
+//       --border-inverse: #{$core-white};
+//       --border-brand_default: #{$violet-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};
+//       --background-hover: #{$greyscale-50};
+//       --background-pressed: #{$greyscale-100};
+//       --background-selected: #{$violet-200};
+//       --background-disabled: #{$greyscale-0};
+//       --background-inverse: #{$greyscale-900};
+//       --background-brand_default: #{$violet-600};
+//       --background-brand_hover: #{$violet-700};
+//       --background-brand_pressed: #{$violet-800};
+//       --background-brand_inverse_default: #{$core-white};
+//       --background-brand_inverse_hover: #{$violet-50};
+//       --background-brand_inverse_pressed: #{$violet-100};
+//       --background-danger_default: #{$rouge_indications-700};
+//       --background-danger_hover: #{$rouge_indications-800};
+//       --background-danger_pressed: #{$rouge_indications-900};
+//       --background-info: #{$bleu_digital-500};
+//       --background-info_subtle: #{$bleu_digital-100};
+//       --background-warning: #{$jaune_indications-400};
+//       --background-warning_subtle: #{$jaune_indications-100};
+//       --background-success: #{$vert_digital-600};
+//       --background-success_subtle: #{$vert_digital-200};
+//       --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-300};
+//       --content-brand_default: #{$violet-600};
+//       --content-brand_hover: #{$violet-700};
+//       --content-brand_pressed: #{$violet-800};
+//       --content-link_default: #{$bleu_digital-500};
+//       --content-link_hover: #{$bleu_digital-600};
+//       --content-link_pressed: #{$bleu_digital-700};
+//       --content-link_visited: #{$violet-600};
+//       --content-danger: #{$rouge_indications-700};
+//       --content-danger_inverse: #{$core-white};
+//       --content-danger_bold: #{$rouge_indications-800};
+//       --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};
+//     }
+    
+//     &[data-mode='dark'] {
+//       --content-primary: #{$core-white};
+//       --background-default: #{$greyscale-900};
+//       --border-primary: #{$greyscale-400};
+//       --overlay-50: #{$core-black_50};
+//       --overlay-50_inverse: #{$core-white_50};
+//       --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};
+//       --background-hover: #{$greyscale-800};
+//       --background-pressed: #{$greyscale-700};
+//       --background-selected: #{$violet-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_inverse_default: #{$violet-800};
+//       --background-brand_inverse_hover: #{$violet-700};
+//       --background-brand_inverse_pressed: #{$violet-600};
+//       --background-danger_default: #{$rouge_indications-700};
+//       --background-danger_hover: #{$rouge_indications-600};
+//       --background-danger_pressed: #{$rouge_indications-500};
+//       --background-info: #{$bleu_digital-500};
+//       --background-info_subtle: #{$bleu_digital-800};
+//       --background-warning: #{$jaune_indications-400};
+//       --background-warning_subtle: #{$jaune_indications-800};
+//       --background-success: #{$vert_digital-600};
+//       --background-success_subtle: #{$vert_digital-700};
+//       --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_pressed: #{$violet-100};
+//       --content-link_default: #{$bleu_digital-500};
+//       --content-link_hover: #{$bleu_digital-400};
+//       --content-link_pressed: #{$bleu_digital-300};
+//       --content-link_visited: #{$violet-300};
+//       --content-danger: #{$rouge_indications-600};
+//       --content-danger_inverse: #{$core-white};
+//       --content-danger_bold: #{$rouge_indications-500};
+//       --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};
+//     }
+//   }
+//   &[data-theme="vert_foret"] {
+//     &[data-mode='light'] {
+//       --content-primary: #{$greyscale-900};
+//       --background-default: #{$core-white};
+//       --border-primary: #{$greyscale-600};
+//       --overlay-50: #{$core-black_50};
+//       --overlay-50_inverse: #{$core-white_50};
+//       --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};
+//       --background-hover: #{$greyscale-50};
+//       --background-pressed: #{$greyscale-100};
+//       --background-selected: #{$vert_foret-200};
+//       --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_inverse_default: #{$core-white};
+//       --background-brand_inverse_hover: #{$vert_foret-50};
+//       --background-brand_inverse_pressed: #{$vert_foret-100};
+//       --background-danger_default: #{$rouge_indications-700};
+//       --background-danger_hover: #{$rouge_indications-800};
+//       --background-danger_pressed: #{$rouge_indications-900};
+//       --background-info: #{$bleu_digital-500};
+//       --background-info_subtle: #{$bleu_digital-100};
+//       --background-warning: #{$jaune_indications-400};
+//       --background-warning_subtle: #{$jaune_indications-100};
+//       --background-success: #{$vert_digital-600};
+//       --background-success_subtle: #{$vert_digital-200};
+//       --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-300};
+//       --content-brand_default: #{$vert_foret-600};
+//       --content-brand_hover: #{$vert_foret-700};
+//       --content-brand_pressed: #{$vert_foret-800};
+//       --content-link_default: #{$bleu_digital-500};
+//       --content-link_hover: #{$bleu_digital-600};
+//       --content-link_pressed: #{$bleu_digital-700};
+//       --content-link_visited: #{$violet-600};
+//       --content-danger: #{$rouge_indications-700};
+//       --content-danger_inverse: #{$core-white};
+//       --content-danger_bold: #{$rouge_indications-800};
+//       --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};
+//     }
+    
+//     &[data-mode='dark'] {
+//       --content-default: #{$core-white};
+//       --content-primary: #{$core-white};
+//       --background-default: #{$greyscale-900};
+//       --border-primary: #{$greyscale-400};
+//       --overlay-50: #{$core-black_50};
+//       --overlay-50_inverse: #{$core-white_50};
+//       --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};
+//       --background-hover: #{$greyscale-800};
+//       --background-pressed: #{$greyscale-700};
+//       --background-selected: #{$vert_foret-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_inverse_default: #{$vert_foret-800};
+//       --background-brand_inverse_hover: #{$vert_foret-700};
+//       --background-brand_inverse_pressed: #{$vert_foret-600};
+//       --background-danger_default: #{$rouge_indications-700};
+//       --background-danger_hover: #{$rouge_indications-600};
+//       --background-danger_pressed: #{$rouge_indications-500};
+//       --background-info: #{$bleu_digital-500};
+//       --background-info_subtle: #{$bleu_digital-800};
+//       --background-warning: #{$jaune_indications-400};
+//       --background-warning_subtle: #{$jaune_indications-800};
+//       --background-success: #{$vert_digital-600};
+//       --background-success_subtle: #{$vert_digital-700};
+//       --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_pressed: #{$vert_foret-100};
+//       --content-link_default: #{$bleu_digital-500};
+//       --content-link_hover: #{$bleu_digital-400};
+//       --content-link_pressed: #{$bleu_digital-300};
+//       --content-link_visited: #{$violet-300};
+//       --content-danger: #{$rouge_indications-600};
+//       --content-danger_inverse: #{$core-white};
+//       --content-danger_bold: #{$rouge_indications-500};
+//       --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};
+//     }
+//   }
+// }
+
+

package/tokens/_mixins.scss

@@ -0,0 +1,30 @@
+@use 'themes' as *;
+@use 'primitives/colors' 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: violet, $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};
+    }
+}

package/tokens/_radius.scss

@@ -0,0 +1,11 @@
+$radius-xs: 2px;
+$radius-s: 4px;
+$radius-m: 8px;
+$radius-l: 16px;
+$radius-2xl: 32px;
+$radius-pill: 999px;
+$width-xs: 1px;
+$width-s: 1.5px;
+$width-m: 2px;
+$width-l: 4px;
+$width-xl: 8px;

package/tokens/_spacings.scss

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

@@ -0,0 +1,383 @@
+@use 'primitives/colors' as *;
+
+$bleu_iceberg: (
+    "light": (
+        "content-primary": $greyscale-900,
+        "background-default": $core-white,
+        "border-primary": $greyscale-600,
+        "overlay-50": $core-black_50,
+        "overlay-50_inverse": $core-white_50,
+        "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,
+        "background-hover": $greyscale-50,
+        "background-pressed": $greyscale-100,
+        "background-selected": $bleu_iceberg-200,
+        "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_inverse_default": $core-white,
+        "background-brand_inverse_hover": $bleu_iceberg-50,
+        "background-brand_inverse_pressed": $bleu_iceberg-100,
+        "background-danger_default": $rouge_indications-700,
+        "background-danger_hover": $rouge_indications-800,
+        "background-danger_pressed": $rouge_indications-900,
+        "background-info": $bleu_digital-500,
+        "background-info_subtle": $bleu_digital-100,
+        "background-warning": $jaune_indications-400,
+        "background-warning_subtle": $jaune_indications-100,
+        "background-success": $vert_digital-600,
+        "background-success_subtle": $vert_digital-200,
+        "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-300,
+        "content-brand_default": $bleu_iceberg-600,
+        "content-brand_hover": $bleu_iceberg-700,
+        "content-brand_pressed": $bleu_iceberg-800,
+        "content-link_default": $bleu_digital-500,
+        "content-link_hover": $bleu_digital-600,
+        "content-link_pressed": $bleu_digital-700,
+        "content-link_visited": $violet-600,
+        "content-danger": $rouge_indications-700,
+        "content-danger_inverse": $core-white,
+        "content-danger_bold": $rouge_indications-800,
+        "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
+    ),
+    "dark": (
+        "content-primary": $core-white,
+        "background-default": $greyscale-900,
+        "border-primary": $greyscale-400,
+        "overlay-50": $core-black_50,
+        "overlay-50_inverse": $core-white_50,
+        "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,
+        "background-hover": $greyscale-800,
+        "background-pressed": $greyscale-700,
+        "background-selected": $bleu_iceberg-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_inverse_default": $bleu_iceberg-800,
+        "background-brand_inverse_hover": $bleu_iceberg-700,
+        "background-brand_inverse_pressed": $bleu_iceberg-600,
+        "background-danger_default": $rouge_indications-700,
+        "background-danger_hover": $rouge_indications-600,
+        "background-danger_pressed": $rouge_indications-500,
+        "background-info": $bleu_digital-500,
+        "background-info_subtle": $bleu_digital-800,
+        "background-warning": $jaune_indications-400,
+        "background-warning_subtle": $jaune_indications-800,
+        "background-success": $vert_digital-600,
+        "background-success_subtle": $vert_digital-700,
+        "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_pressed": $bleu_iceberg-100,
+        "content-link_default": $bleu_digital-500,
+        "content-link_hover": $bleu_digital-400,
+        "content-link_pressed": $bleu_digital-300,
+        "content-link_visited": $violet-300,
+        "content-danger": $rouge_indications-600,
+        "content-danger_inverse": $core-white,
+        "content-danger_bold": $rouge_indications-500,
+        "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
+    )
+);
+
+$violet: (
+    "light": (
+      "content-primary": $greyscale-900,
+      "background-default": $core-white,
+      "border-primary": $greyscale-600,
+      "overlay-50": $core-black_50,
+      "overlay-50_inverse": $core-white_50,
+      "border-secondary": $greyscale-400,
+      "border-tertiary": $greyscale-200,
+      "border-disabled": $greyscale-200,
+      "border-inverse": $core-white,
+      "border-brand_default": $violet-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,
+      "background-hover": $greyscale-50,
+      "background-pressed": $greyscale-100,
+      "background-selected": $violet-200,
+      "background-disabled": $greyscale-0,
+      "background-inverse": $greyscale-900,
+      "background-brand_default": $violet-600,
+      "background-brand_hover": $violet-700,
+      "background-brand_pressed": $violet-800,
+      "background-brand_inverse_default": $core-white,
+      "background-brand_inverse_hover": $violet-50,
+      "background-brand_inverse_pressed": $violet-100,
+      "background-danger_default": $rouge_indications-700,
+      "background-danger_hover": $rouge_indications-800,
+      "background-danger_pressed": $rouge_indications-900,
+      "background-info": $bleu_digital-500,
+      "background-info_subtle": $bleu_digital-100,
+      "background-warning": $jaune_indications-400,
+      "background-warning_subtle": $jaune_indications-100,
+      "background-success": $vert_digital-600,
+      "background-success_subtle": $vert_digital-200,
+      "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-300,
+      "content-brand_default": $violet-600,
+      "content-brand_hover": $violet-700,
+      "content-brand_pressed": $violet-800,
+      "content-link_default": $bleu_digital-500,
+      "content-link_hover": $bleu_digital-600,
+      "content-link_pressed": $bleu_digital-700,
+      "content-link_visited": $violet-600,
+      "content-danger": $rouge_indications-700,
+      "content-danger_inverse": $core-white,
+      "content-danger_bold": $rouge_indications-800,
+      "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
+    ),
+    "dark": (
+        "content-primary": $core-white,
+        "background-default": $greyscale-900,
+        "border-primary": $greyscale-400,
+        "overlay-50": $core-black_50,
+        "overlay-50_inverse": $core-white_50,
+        "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,
+        "background-hover": $greyscale-800,
+        "background-pressed": $greyscale-700,
+        "background-selected": $violet-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_inverse_default": $violet-800,
+        "background-brand_inverse_hover": $violet-700,
+        "background-brand_inverse_pressed": $violet-600,
+        "background-danger_default": $rouge_indications-700,
+        "background-danger_hover": $rouge_indications-600,
+        "background-danger_pressed": $rouge_indications-500,
+        "background-info": $bleu_digital-500,
+        "background-info_subtle": $bleu_digital-800,
+        "background-warning": $jaune_indications-400,
+        "background-warning_subtle": $jaune_indications-800,
+        "background-success": $vert_digital-600,
+        "background-success_subtle": $vert_digital-700,
+        "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_pressed": $violet-100,
+        "content-link_default": $bleu_digital-500,
+        "content-link_hover": $bleu_digital-400,
+        "content-link_pressed": $bleu_digital-300,
+        "content-link_visited": $violet-300,
+        "content-danger": $rouge_indications-600,
+        "content-danger_inverse": $core-white,
+        "content-danger_bold": $rouge_indications-500,
+        "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
+    )    
+);
+
+$vert_foret: (
+    "light": (
+        "content-primary": $greyscale-900,
+        "background-default": $core-white,
+        "border-primary": $greyscale-600,
+        "overlay-50": $core-black_50,
+        "overlay-50_inverse": $core-white_50,
+        "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,
+        "background-hover": $greyscale-50,
+        "background-pressed": $greyscale-100,
+        "background-selected": $vert_foret-200,
+        "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_inverse_default": $core-white,
+        "background-brand_inverse_hover": $vert_foret-50,
+        "background-brand_inverse_pressed": $vert_foret-100,
+        "background-danger_default": $rouge_indications-700,
+        "background-danger_hover": $rouge_indications-800,
+        "background-danger_pressed": $rouge_indications-900,
+        "background-info": $bleu_digital-500,
+        "background-info_subtle": $bleu_digital-100,
+        "background-warning": $jaune_indications-400,
+        "background-warning_subtle": $jaune_indications-100,
+        "background-success": $vert_digital-600,
+        "background-success_subtle": $vert_digital-200,
+        "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-300,
+        "content-brand_default": $vert_foret-600,
+        "content-brand_hover": $vert_foret-700,
+        "content-brand_pressed": $vert_foret-800,
+        "content-link_default": $bleu_digital-500,
+        "content-link_hover": $bleu_digital-600,
+        "content-link_pressed": $bleu_digital-700,
+        "content-link_visited": $violet-600,
+        "content-danger": $rouge_indications-700,
+        "content-danger_inverse": $core-white,
+        "content-danger_bold": $rouge_indications-800,
+        "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
+    ),
+    "dark": (
+        "content-default": $core-white,
+        "content-primary": $core-white,
+        "background-default": $greyscale-900,
+        "border-primary": $greyscale-400,
+        "overlay-50": $core-black_50,
+        "overlay-50_inverse": $core-white_50,
+        "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,
+        "background-hover": $greyscale-800,
+        "background-pressed": $greyscale-700,
+        "background-selected": $vert_foret-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_inverse_default": $vert_foret-800,
+        "background-brand_inverse_hover": $vert_foret-700,
+        "background-brand_inverse_pressed": $vert_foret-600,
+        "background-danger_default": $rouge_indications-700,
+        "background-danger_hover": $rouge_indications-600,
+        "background-danger_pressed": $rouge_indications-500,
+        "background-info": $bleu_digital-500,
+        "background-info_subtle": $bleu_digital-800,
+        "background-warning": $jaune_indications-400,
+        "background-warning_subtle": $jaune_indications-800,
+        "background-success": $vert_digital-600,
+        "background-success_subtle": $vert_digital-700,
+        "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_pressed": $vert_foret-100,
+        "content-link_default": $bleu_digital-500,
+        "content-link_hover": $bleu_digital-400,
+        "content-link_pressed": $bleu_digital-300,
+        "content-link_visited": $violet-300,
+        "content-danger": $rouge_indications-600,
+        "content-danger_inverse": $core-white,
+        "content-danger_bold": $rouge_indications-500,
+        "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
+    )
+);

package/tokens/_typography.scss

@@ -0,0 +1,147 @@
+@use 'primitives/typography' as *;
+
+$heading-5xl-semibold-family: $family-nunito;
+$heading-5xl-semibold-weight: $weight-semibold;
+$heading-5xl-semibold-size: $font_size-10xl;
+$heading-5xl-semibold-line_height: $line_height-10xl;
+$heading-5xl-semibold-letter_spacing: $letter_spacing-xs;
+$heading-4xl-semibold-family: $family-nunito;
+$heading-4xl-semibold-weight: $weight-semibold;
+$heading-4xl-semibold-size: $font_size-9xl;
+$heading-4xl-semibold-line_height: $line_height-9xl;
+$heading-4xl-semibold-letter_spacing: $letter_spacing-xs;
+$heading-3xl-semibold-family: $family-nunito;
+$heading-3xl-semibold-weight: $weight-semibold;
+$heading-3xl-semibold-size: $font_size-8xl;
+$heading-3xl-semibold-line_height: $line_height-8xl;
+$heading-3xl-semibold-letter_spacing: $letter_spacing-xs;
+$heading-2xl-semibold-family: $family-nunito;
+$heading-2xl-semibold-weight: $weight-semibold;
+$heading-2xl-semibold-size: $font_size-7xl;
+$heading-2xl-semibold-line_height: $line_height-7xl;
+$heading-2xl-semibold-letter_spacing: $letter_spacing-xs;
+$heading-xl-semibold-family: $family-nunito;
+$heading-xl-semibold-weight: $weight-semibold;
+$heading-xl-semibold-size: $font_size-6xl;
+$heading-xl-semibold-line_height: $line_height-6xl;
+$heading-xl-semibold-letter_spacing: $letter_spacing-xs;
+$heading-l-semibold-family: $family-nunito;
+$heading-l-semibold-weight: $weight-semibold;
+$heading-l-semibold-size: $font_size-5xl;
+$heading-l-semibold-line_height: $line_height-5xl;
+$heading-l-semibold-letter_spacing: $letter_spacing-xs;
+$heading-m-semibold-family: $family-nunito;
+$heading-m-semibold-weight: $weight-semibold;
+$heading-m-semibold-size: $font_size-3xl;
+$heading-m-semibold-line_height: $line_height-3xl;
+$heading-m-semibold-letter_spacing: $letter_spacing-s;
+$heading-s-semibold-family: $family-nunito;
+$heading-s-semibold-weight: $weight-semibold;
+$heading-s-semibold-size: $font_size-2xl;
+$heading-s-semibold-line_height: $line_height-2xl;
+$heading-s-semibold-letter_spacing: $letter_spacing-s;
+$heading-xs-semibold-family: $family-nunito;
+$heading-xs-semibold-weight: $weight-semibold;
+$heading-xs-semibold-size: $font_size-l;
+$heading-xs-semibold-line_height: $line_height-l;
+$heading-xs-semibold-letter_spacing: $letter_spacing-s;
+$heading-2xs-semibold-family: $family-nunito;
+$heading-2xs-semibold-weight: $weight-semibold;
+$heading-2xs-semibold-size: $font_size-m;
+$heading-2xs-semibold-line_height: $line_height-m;
+$heading-2xs-semibold-letter_spacing: $letter_spacing-none;
+$text-xl-regular-family: $family-arial;
+$text-xl-regular-weight: $weight-regular;
+$text-xl-regular-size: $font_size-2xl;
+$text-xl-regular-line_height: $line_height-2xl;
+$text-xl-regular-letter_spacing: $letter_spacing-none;
+$text-xl-semibold-family: $family-arial;
+$text-xl-semibold-weight: $weight-semibold;
+$text-xl-semibold-size: $font_size-2xl;
+$text-xl-semibold-line_height: $line_height-2xl;
+$text-xl-semibold-letter_spacing: $letter_spacing-none;
+$text-l-regular-family: $family-arial;
+$text-l-regular-weight: $weight-regular;
+$text-l-regular-size: $font_size-l;
+$text-l-regular-line_height: $line_height-l;
+$text-l-regular-letter_spacing: $letter_spacing-none;
+$text-l-semibold-family: $family-arial;
+$text-l-semibold-weight: $weight-semibold;
+$text-l-semibold-size: $font_size-l;
+$text-l-semibold-line_height: $line_height-l;
+$text-l-semibold-letter_spacing: $letter_spacing-none;
+$text-m-regular-family: $family-arial;
+$text-m-regular-weight: $weight-regular;
+$text-m-regular-size: $font_size-m;
+$text-m-regular-line_height: $line_height-m;
+$text-m-regular-letter_spacing: $letter_spacing-none;
+$text-m-semibold-family: $family-arial;
+$text-m-semibold-weight: $weight-semibold;
+$text-m-semibold-size: $font_size-m;
+$text-m-semibold-line_height: $line_height-m;
+$text-m-semibold-letter_spacing: $letter_spacing-none;
+$text-s-regular-family: $family-arial;
+$text-s-regular-weight: $weight-regular;
+$text-s-regular-size: $font_size-s;
+$text-s-regular-line_height: $line_height-s;
+$text-s-regular-letter_spacing: $letter_spacing-none;
+$text-s-semibold-family: $family-arial;
+$text-s-semibold-weight: $weight-semibold;
+$text-s-semibold-size: $font_size-s;
+$text-s-semibold-line_height: $line_height-s;
+$text-s-semibold-letter_spacing: $letter_spacing-none;
+$text-xs-regular-family: $family-arial;
+$text-xs-regular-weight: $weight-regular;
+$text-xs-regular-size: $font_size-xs;
+$text-xs-regular-line_height: $line_height-xs;
+$text-xs-regular-letter_spacing: $letter_spacing-none;
+$text-xs-semibold-family: $family-arial;
+$text-xs-semibold-weight: $weight-semibold;
+$text-xs-semibold-size: $font_size-xs;
+$text-xs-semibold-line_height: $line_height-xs;
+$text-xs-semibold-letter_spacing: $letter_spacing-none;
+$button-s-semibold-family: $family-nunito;
+$button-s-semibold-weight: $weight-semibold;
+$button-s-semibold-size: $font_size-m;
+$button-s-semibold-line_height: $line_height-m;
+$button-s-semibold-letter_spacing: $letter_spacing-s;
+$button-m-semibold-family: $family-nunito;
+$button-m-semibold-weight: $weight-semibold;
+$button-m-semibold-size: $font_size-l;
+$button-m-semibold-line_height: $line_height-l;
+$button-m-semibold-letter_spacing: $letter_spacing-s;
+$button-l-semibold-family: $family-nunito;
+$button-l-semibold-weight: $weight-semibold;
+$button-l-semibold-size: $font_size-2xl;
+$button-l-semibold-line_height: $line_height-2xl;
+$button-l-semibold-letter_spacing: $letter_spacing-s;
+
+@mixin typography-button-s {
+    font-feature-settings: 'liga' off, 'clig' off;
+    font-family: $button-s-semibold-family;
+    font-size: $button-s-semibold-size;
+    font-style: normal;
+    letter-spacing: $button-s-semibold-letter_spacing;
+    font-weight: 600;
+    line-height: $button-s-semibold-line_height;
+}
+
+@mixin typography-button-m {
+    font-feature-settings: 'liga' off, 'clig' off;
+    font-family: $button-m-semibold-family;
+    font-size: $button-m-semibold-size;
+    font-style: normal;
+    letter-spacing: $button-m-semibold-letter_spacing;
+    font-weight: 600;
+    line-height: $button-m-semibold-line_height;
+}
+
+@mixin typography-button-l {
+    font-feature-settings: 'liga' off, 'clig' off;
+    font-family: $button-l-semibold-family;
+    font-size: $button-l-semibold-size;
+    font-style: normal;
+    letter-spacing: $button-l-semibold-letter_spacing;
+    font-weight: 600;
+    line-height: $button-l-semibold-line_height;
+}

package/tokens/main.scss

@@ -0,0 +1,7 @@
+@forward "./colors";
+@forward "./radius";
+@forward "./spacings";
+@forward "./typography";
+@forward "./mixins";
+
+@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");

package/tokens/primitives/_colors.scss

@@ -0,0 +1,253 @@
+$greyscale-150: #d7d6d5;
+$greyscale-50: #ebebea;
+$greyscale-100: #e1e1e0;
+$greyscale-0: #f4f5f4;
+$core-white_50: #ffffff;
+$greyscale-200: #cdcccb;
+$greyscale-650: #666665;
+$greyscale-950: #0d0c0c;
+$greyscale-850: #302f2f;
+$greyscale-800: #3e3e3d;
+$core-white: #ffffff;
+$greyscale-900: #201f1f;
+$greyscale-750: #4c4c4b;
+$core-black_50: #000000;
+$greyscale-550: #7f7e7e;
+$core-black: #000000;
+$greyscale-250: #c2c1c0;
+$greyscale-500: #8b8a8a;
+$greyscale-450: #969695;
+$greyscale-600: #737272;
+$greyscale-350: #acacab;
+$greyscale-300: #b7b7b6;
+$greyscale-700: #595958;
+$greyscale-400: #a1a1a0;
+$bleu_digital-900: #153b93;
+$bleu_digital-600: #1465fc;
+$bleu_digital-500: #2b86ff;
+$bleu_digital-400: #53aaff;
+$bleu_digital-300: #8ac8ff;
+$bleu_digital-0: #f7faff;
+$bleu_digital-800: #123fbb;
+$bleu_digital-100: #d8ebff;
+$bleu_digital-950: #122559;
+$bleu_digital-700: #0d4fea;
+$bleu_digital-50: #eef7ff;
+$bleu_digital-200: #baddff;
+$bleu_rte-950: #07364a;
+$bleu_rte-500: #0cbdeb;
+$bleu_rte-700: #017aa3;
+$bleu_rte-400: #36d3fa;
+$bleu_rte-300: #7ce1fd;
+$bleu_rte-600: #00a6d9;
+$bleu_rte-200: #b9edfe;
+$bleu_rte-900: #0b556f;
+$bleu_rte-800: #066686;
+$bleu_rte-100: #e0f5fe;
+$bleu_rte-50: #f0fbff;
+$bleu_rte-0: #f8fdff;
+$marine-800: #244068;
+$marine-900: #233857;
+$marine-50: #f3f6fc;
+$marine-700: #274a7d;
+$marine-600: #2f5d9a;
+$marine-400: #6494cc;
+$marine-950: #17243a;
+$marine-500: #3d70ad;
+$marine-300: #9ab9df;
+$marine-0: #f7f9fc;
+$marine-200: #c9d8ee;
+$marine-100: #e7edf7;
+$bleu_iceberg-950: #15253c;
+$bleu_iceberg-900: #1f3b5b;
+$bleu_iceberg-700: #225082;
+$bleu_iceberg-600: #2964a0;
+$bleu_iceberg-400: #5e9ad2;
+$bleu_iceberg-0: #f9fbfd;
+$bleu_iceberg-300: #96bde3;
+$bleu_iceberg-50: #f3f6fc;
+$bleu_iceberg-100: #e6eef8;
+$bleu_iceberg-800: #214770;
+$bleu_iceberg-500: #397ebe;
+$bleu_iceberg-200: #c7dbf0;
+$bleu_petrole-950: #10181d;
+$bleu_petrole-600: #3e6a7c;
+$bleu_petrole-700: #375867;
+$bleu_petrole-500: #478093;
+$bleu_petrole-800: #334a57;
+$bleu_petrole-400: #639cad;
+$bleu_petrole-100: #deecef;
+$bleu_petrole-900: #2e404b;
+$bleu_petrole-300: #95bfcb;
+$bleu_petrole-50: #f2f8f9;
+$bleu_petrole-200: #c1dae0;
+$bleu_petrole-0: #fbfcfd;
+$bleu_cyan-500: #0fb3cb;
+$bleu_cyan-400: #2bd0e5;
+$bleu_cyan-600: #108faa;
+$bleu_cyan-800: #195e71;
+$bleu_cyan-300: #6ee6f2;
+$bleu_cyan-200: #a9f2f8;
+$bleu_cyan-100: #d1f9fc;
+$bleu_cyan-50: #edfdfe;
+$bleu_cyan-0: #f9feff;
+$bleu_cyan-900: #1a4d5f;
+$bleu_cyan-950: #0c3949;
+$bleu_cyan-700: #14738a;
+$vert_foret-800: #145143;
+$vert_foret-600: #1b8065;
+$vert_foret-500: #2a9f7d;
+$vert_foret-700: #176b57;
+$vert_foret-400: #4dba97;
+$vert_foret-300: #81d4b7;
+$vert_foret-950: #082620;
+$vert_foret-200: #b3e7d1;
+$vert_foret-50: #effaf6;
+$vert_foret-100: #d7f4e6;
+$vert_foret-900: #114338;
+$vert_foret-0: #f5fcfa;
+$vert-0: #f5fffe;
+$vert-800: #0a655e;
+$vert-600: #009e8f;
+$vert-500: #04c8b1;
+$vert-200: #90ffe8;
+$vert-400: #1de4ca;
+$vert-700: #058075;
+$vert-300: #51f7dc;
+$vert-950: #003332;
+$vert-900: #0d544f;
+$vert-100: #c7fff4;
+$vert-50: #effefb;
+$vert_indications-950: #212b08;
+$vert_indications-900: #404e19;
+$vert_indications-700: #5e7417;
+$vert_indications-600: #7c9818;
+$vert_indications-400: #bed942;
+$vert_indications-800: #4b5c18;
+$vert_indications-300: #d3e86e;
+$vert_indications-500: #a4c424;
+$vert_indications-100: #f3f8cf;
+$vert_indications-200: #e6f2a4;
+$vert_indications-50: #fafce9;
+$vert_indications-0: #fdfef8;
+$vert_digital-950: #01321c;
+$vert_digital-800: #0e6d40;
+$vert_digital-900: #0e5937;
+$vert_digital-700: #0b8a4d;
+$vert_digital-500: #12d577;
+$vert_digital-600: #09b05f;
+$vert_digital-300: #65f8b0;
+$vert_digital-0: #f7fffb;
+$vert_digital-200: #b5fdd9;
+$vert_digital-100: #d9ffec;
+$vert_digital-400: #3cec96;
+$vert_digital-50: #effef6;
+$jaune-900: #744d0f;
+$jaune-800: #895f0a;
+$jaune-700: #a67a02;
+$jaune-400: #fff30d;
+$jaune-950: #442904;
+$jaune-300: #ffff41;
+$jaune-200: #faff86;
+$jaune-50: #feffe7;
+$jaune-500: #ffe500;
+$jaune-100: #faffc1;
+$jaune-600: #d1aa00;
+$jaune-0: #fffef5;
+$jaune_ocre-950: #3d1c0b;
+$jaune_ocre-800: #7c4117;
+$jaune_ocre-700: #955213;
+$jaune_ocre-500: #d99519;
+$jaune_ocre-400: #ebb53d;
+$jaune_ocre-300: #efc655;
+$jaune_ocre-900: #6a3619;
+$jaune_ocre-50: #fcf9ea;
+$jaune_ocre-100: #faefc7;
+$jaune_ocre-200: #f5de93;
+$jaune_ocre-600: #bb7313;
+$jaune_ocre-0: #fefcf8;
+$jaune_indications-950: #430e05;
+$jaune_indications-900: #752112;
+$jaune_indications-300: #f6ab4d;
+$jaune_indications-800: #8e2712;
+$jaune_indications-700: #ae330f;
+$jaune_indications-500: #ed6e13;
+$jaune_indications-100: #fce7c9;
+$jaune_indications-600: #d24e0d;
+$jaune_indications-200: #f9ce8e;
+$jaune_indications-50: #fef7ec;
+$jaune_indications-400: #f4922b;
+$jaune_indications-0: #fffbf7;
+$saumon-950: #43160c;
+$saumon-700: #b43d21;
+$saumon-500: #ec775c;
+$saumon-200: #fcd5cc;
+$saumon-300: #f9b7a8;
+$saumon-400: #f48d75;
+$saumon-100: #fde8e3;
+$saumon-600: #d64c2c;
+$saumon-900: #7c3120;
+$saumon-50: #fef4f2;
+$saumon-800: #95351f;
+$saumon-0: #fef9f7;
+$rose_digital-800: #a30e35;
+$rose_digital-900: #8b1034;
+$rose_digital-950: #4e0317;
+$rose_digital-700: #c30d36;
+$rose_digital-400: #ff546a;
+$rose_digital-500: #f93a58;
+$rose_digital-300: #ffa1ab;
+$rose_digital-200: #ffccd1;
+$rose_digital-100: #ffe3e5;
+$rose_digital-50: #fff1f2;
+$rose_digital-600: #e71742;
+$rose_digital-0: #fff7f8;
+$fuschia-950: #530023;
+$fuschia-900: #940749;
+$fuschia-800: #ae034d;
+$fuschia-700: #dc0059;
+$fuschia-500: #ff2c74;
+$fuschia-600: #f60862;
+$fuschia-300: #ff9bb8;
+$fuschia-200: #ffc8d8;
+$fuschia-400: #ff6394;
+$fuschia-100: #ffe1e9;
+$fuschia-50: #fff0f3;
+$fuschia-0: #fff8fa;
+$rouge_indications-800: #9d1439;
+$rouge_indications-600: #de2048;
+$rouge_indications-500: #f1425f;
+$rouge_indications-300: #fca5af;
+$rouge_indications-900: #861537;
+$rouge_indications-200: #fdced4;
+$rouge_indications-100: #ffe4e6;
+$rouge_indications-50: #fff1f2;
+$rouge_indications-700: #c81640;
+$rouge_indications-950: #4b0618;
+$rouge_indications-400: #f97385;
+$rouge_indications-0: #fef8fa;
+$taupe-900: #574c52;
+$taupe-950: #2f282c;
+$taupe-800: #61535b;
+$taupe-500: #a2929c;
+$taupe-700: #73636c;
+$taupe-300: #d4cdd2;
+$taupe-200: #e7e3e6;
+$taupe-50: #f8f7f8;
+$taupe-100: #f3f0f2;
+$taupe-600: #8a7883;
+$taupe-400: #b9adb5;
+$taupe-0: #fbfbfb;
+$violet-950: #2b1a38;
+$violet-900: #4a355a;
+$violet-500: #9979bc;
+$violet-600: #7d5a9f;
+$violet-100: #f3eff8;
+$violet-800: #563c6c;
+$violet-0: #fcfbfd;
+$violet-400: #b89fd3;
+$violet-300: #d2c3e4;
+$violet-50: #f9f7fc;
+$violet-200: #e6def0;
+$violet-700: #674883;
+

package/tokens/primitives/_typography.scss

@@ -0,0 +1,38 @@
+@use 'colors' as *;
+
+$family-nunito: "Nunito";
+$family-arial: "Arial";
+$weight-light: "Light";
+$weight-regular: "Regular";
+$weight-semibold: "Semibold";
+$font_size-xs: 10px;
+$font_size-s: 12px;
+$font_size-m: 14px;
+$font_size-l: 16px;
+$font_size-xl: 18px;
+$font_size-2xl: 20px;
+$font_size-3xl: 24px;
+$font_size-4xl: 28px;
+$font_size-5xl: 32px;
+$font_size-6xl: 40px;
+$font_size-7xl: 48px;
+$font_size-8xl: 56px;
+$font_size-9xl: 64px;
+$font_size-10xl: 72px;
+$line_height-xs: 14px;
+$line_height-s: 16px;
+$line_height-m: 20px;
+$line_height-l: 24px;
+$line_height-xl: 26px;
+$line_height-2xl: 28px;
+$line_height-3xl: 32px;
+$line_height-4xl: 36px;
+$line_height-5xl: 40px;
+$line_height-6xl: 48px;
+$line_height-7xl: 56px;
+$line_height-8xl: 64px;
+$line_height-9xl: 72px;
+$line_height-10xl: 80px;
+$letter_spacing-none: 0px;
+$letter_spacing-s: -0.5px;
+$letter_spacing-xs: -1px;