@design-system-rte/core 0.3.0 → 0.7.0

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

@@ -0,0 +1,163 @@
+@use '../../primitives/colors' as *;
+@use '../../primitives/devColors' as *;
+
+$violet-light: (
+  "background-default": $core-white,
+  "background-hover": $greyscale-50,
+  "background-pressed": $greyscale-100,
+  "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-selected-default": $violet-600,
+  "background-brand-selected-hover": $violet-700,
+  "background-brand-unselected-default": $violet-100,
+  "background-brand-unselected-hover": $violet-200,
+  "background-brand-inverse-default": $core-white,
+  "background-brand-inverse-hover": $violet-50,
+  "background-brand-inverse-pressed": $violet-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": $violet-600,
+  "border-brand-focused": $violet-900,
+  "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": $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": $violet-600,
+  "content-brand-hover": $violet-700,
+  "content-brand-press": $violet-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": $violet-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/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@design-system-rte/core",
-  "version": "0.3.0",
+  "version": "0.7.0",
   "main": "index.js",
   "scripts": {
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "vitest run",
     "build": "npm run build:css-themes",
     "build:css-themes": "ts-node css-theme-generator.ts",
-    "generate:tokens": "ts-node ./tokens/primitives-generator.ts && ts-node ./tokens/tokens-generator.ts",
+    "generate:tokens": "ts-node ./design-tokens/generator.ts",
     "prepublishOnly": "npm run build"
   },
   "keywords": [],
   "author": "",
-  "license": "ISC",
+  "license": "Apache-2.0",
   "description": "Design Tokens, interfaces and utilities for the Design System RTE",
   "publishConfig": {
     "access": "public"
@@ -24,6 +24,7 @@
   "devDependencies": {
     "sass": "^1.89.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4"
   }
 }

package/tokens/_mixins.scss

@@ -1,284 +0,0 @@
-@use 'themes' as *;
-@use 'primitives/colors' as *;
-@use 'shadows' as *;
-@use 'typography' as *;
-@use 'sass:map';
-@use 'sass:color';
-
-$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};
-    }
-}
-
-// Mixins for shadows and inner shadows
-
-@mixin hover-box-shadow($color) {
-    box-shadow: 0 0 0 8px $color;
-}
-
-@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-surface-inner-shadow);
-  }
-  @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 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 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 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 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 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 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 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 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 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 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 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 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);
-  }
-
-// 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;
-}

package/tokens/_shadows.scss

@@ -1,36 +0,0 @@
-$ambient-shadow-position-x: 0;
-$ambient-shadow-position-y: 0;
-$ambient-shadow-blur: 2;
-$ambient-shadow-spread: 0;
-$ambient-shadow-darker-position-x: 0;
-$ambient-shadow-darker-position-y: 0;
-$ambient-shadow-darker-blur: 8;
-$ambient-shadow-darker-spread: 0;
-$inner-shadow-key-position-x: 0;
-$inner-shadow-key-position-y: 1;
-$inner-shadow-key-blur: 4;
-$inner-shadow-key-spread: 0;
-$shadow-1-key-position-x: 0;
-$shadow-1-key-position-y: 1;
-$shadow-1-key-blur: 2;
-$shadow-1-key-spread: 0;
-$shadow-2-key-position-x: 0;
-$shadow-2-key-position-y: 2;
-$shadow-2-key-blur: 4;
-$shadow-2-key-spread: 0;
-$shadow-3-key-position-x: 0;
-$shadow-3-key-position-y: 4;
-$shadow-3-key-blur: 8;
-$shadow-3-key-spread: 0;
-$shadow-4-key-position-x: 0;
-$shadow-4-key-position-y: 8;
-$shadow-4-key-blur: 16;
-$shadow-4-key-spread: 0;
-$shadow-5-key-position-x: 0;
-$shadow-5-key-position-y: 14;
-$shadow-5-key-blur: 28;
-$shadow-5-key-spread: 0;
-$shadow-6-key-position-x: 0;
-$shadow-6-key-position-y: 32;
-$shadow-6-key-blur: 64;
-$shadow-6-key-spread: 0;