wcs-core 7.2.2 → 7.4.0

package/README.md

@@ -18,6 +18,8 @@ It is built using  [Stencil](https://github.com/ionic-team/stencil) and document
 
 If you read this documentation on GitHub, only the development branch is updated at the moment. We use the [GitLab project](https://gitlab.com/SNCF/wcs/) for WCS development and releases.
 
+We support the latest version (and LTS if applicable) of the following browsers : Chrome, Firefox, Safari, Edge, Opera.
+
 ## Documentation archives
 
 If you are looking for the documentation of a specific version, you can find using the following links (we only keep the latest version of each major version) :
@@ -58,7 +60,7 @@ You can get a preview of what's planned for the following versions using our [bo
 
 Consult the [changelog](https://wcs.dev.sncf/?path=/docs/documentation-changelog--documentation) to know what's going on.
 
-### Example usage
+## Example usage
 
 There are example projects under `example` folder for angular and react.
 
@@ -95,7 +97,7 @@ npm run start
 
 If you have any question, don't hesitate to [fill an issue](https://gitlab.com/SNCF/wcs/-/issues/new).
 
-### Install in your project
+## Install in your project
 
 You can refer to the [official WCS documentation](https://wcs.dev.sncf/?path=/docs/documentation-getting-started-angular--documentation)
 to use the lib with Angular or React. For other, StencilJS offers many integrations with different JS frameworks.
@@ -106,9 +108,11 @@ You can refer to [their official documentation](https://stenciljs.com/docs/overv
 
 ### Bug, Feature request, etc...
 
-Don't hesitate to [fill in an issue](https://gitlab.com/SNCF/wcs/-/issues/new) and we'll discuss about it.
+Don't hesitate to [fill in an issue](https://gitlab.com/SNCF/wcs/-/issues/new) and we'll discuss it.
 If you want to contribute code, please fill in an issue first so we can handle it properly.
 
+Also, if you are an SNCF employee, you can join the `Web Components` group on Teams to discuss with us. We prefer to discuss in the open and easily searchable issues tracker on GitLab when possible, but we understand that some discussions are better suited for a chat or too sensitive to be public.
+
 ### Starting the project
 
 ```sh
@@ -123,22 +127,20 @@ npm start -- --filter select
 
 ### Test
 
-The project uses stencil built-in facility for testing : https://stenciljs.com/docs/testing-overview.
+The project uses stencil playwright built-in facility for testing : https://stenciljs.com/docs/testing/playwright/overview.
 
 We encourage doing TDD on functional components. To launch the tests suite simply launch :
 
 ```sh
-npm run test:watch
+npm run test:playwright:ui
 # Or if you simply want to run them once
 npm test
 ```
 
-To launch a specific suite of tests you can simply launch
+To launch a specific suite of tests you can simply launch it in the UI playwright mode
 
 ```sh
-npm run test:e2e:file path_to_tests_file
-# Example: you must be at the root of the project
-npm run test:e2e:file src/components/tabs/tabs.e2e.ts
+npm run test:playwright:ui
 ```
 
 ### License

package/design-tokens/dist/sncf-groupe-root-scoped.css

@@ -151,14 +151,14 @@
   --wcs-primitive-color-neutral-800: #333333;
   --wcs-primitive-color-neutral-900: #121212;
   --wcs-primitive-color-neutral-1000: #000000;
-  --wcs-primitive-color-critical-100: #fcf3f3; /* Rouge Feu 100 */
-  --wcs-primitive-color-critical-200: #f9e7e7; /* Rouge Feu 200 */
-  --wcs-primitive-color-critical-300: #f4cfcf; /* Rouge Feu 300 */
-  --wcs-primitive-color-critical-400: #e38686; /* Rouge Feu 400 */
-  --wcs-primitive-color-critical-500: #c80e0e; /* Rouge Feu 500 */
-  --wcs-primitive-color-critical-600: #960b0b; /* Rouge Feu 600 */
-  --wcs-primitive-color-critical-700: #640707; /* Rouge Feu 700 */
-  --wcs-primitive-color-critical-800: #320404; /* Rouge Feu 800 */
+  --wcs-primitive-color-critical-100: #fcf3f3; /** Rouge Feu 100 */
+  --wcs-primitive-color-critical-200: #f9e7e7; /** Rouge Feu 200 */
+  --wcs-primitive-color-critical-300: #f4cfcf; /** Rouge Feu 300 */
+  --wcs-primitive-color-critical-400: #e38686; /** Rouge Feu 400 */
+  --wcs-primitive-color-critical-500: #c80e0e; /** Rouge Feu 500 */
+  --wcs-primitive-color-critical-600: #960b0b; /** Rouge Feu 600 */
+  --wcs-primitive-color-critical-700: #640707; /** Rouge Feu 700 */
+  --wcs-primitive-color-critical-800: #320404; /** Rouge Feu 800 */
   --wcs-primitive-font-size-250: 10px;
   --wcs-primitive-font-size-275: 11px;
   --wcs-primitive-font-size-300: 12px;
@@ -210,227 +210,227 @@
   --wcs-primitive-breakpoints-high-definition: 1280px;
   --wcs-primitive-breakpoints-widescreen: 1440px;
   --wcs-primitive-breakpoints-fullhd: 1920px;
-  --wcs-semantic-border-radius-none: 0; /* No border-radius */
-  --wcs-semantic-border-width-none: 0; /* No border */
-  --wcs-semantic-border-style-focus-base: dashed; /* Focus style for base elements like button, dropdown, counter, switch... */
-  --wcs-semantic-border-style-focus-control: solid; /* Focus style for control elements like input, select, textarea... */
-  --wcs-semantic-color-text-inverse: #ffffff; /* Inverse color for contrast (mostly white) */
-  --wcs-semantic-font-size-base: 16px; /* Base font size, equivalent to 1rem */
-  --wcs-semantic-font-size-s: 15px; /* Smaller font size */
-  --wcs-semantic-font-size-m: 16px; /* Medium font size, equivalent to base font-size */
-  --wcs-semantic-font-size-l: 17px; /* Larger font size */
-  --wcs-semantic-font-style-control-placeholder: normal; /* Placeholder font-size (previously in italic) */
+  --wcs-semantic-border-radius-none: 0; /** No border-radius */
+  --wcs-semantic-border-width-none: 0; /** No border */
+  --wcs-semantic-border-style-focus-base: dashed; /** Focus style for base elements like button, dropdown, counter, switch... */
+  --wcs-semantic-border-style-focus-control: solid; /** Focus style for control elements like input, select, textarea... */
+  --wcs-semantic-color-text-inverse: #ffffff; /** Inverse color for contrast (mostly white) */
+  --wcs-semantic-font-size-base: 16px; /** Base font size, equivalent to 1rem */
+  --wcs-semantic-font-size-s: 15px; /** Smaller font size */
+  --wcs-semantic-font-size-m: 16px; /** Medium font size, equivalent to base font-size */
+  --wcs-semantic-font-size-l: 17px; /** Larger font size */
+  --wcs-semantic-font-style-control-placeholder: normal; /** Placeholder font-size (previously in italic) */
   --wcs-primitive-size-base: var(--wcs-primitive-size-80);
   --wcs-primitive-color-primary: var(--wcs-primitive-color-bleu-700);
-  --wcs-semantic-size-base: var(--wcs-primitive-size-80); /* Base size for calculation */
-  --wcs-semantic-size-xl: var(--wcs-primitive-size-560); /* Size XL for multi-size components */
-  --wcs-semantic-size-l: var(--wcs-primitive-size-480); /* Size L for multi-size components */
-  --wcs-semantic-size-m: var(--wcs-primitive-size-400); /* Size M for multi-size components (default) */
-  --wcs-semantic-size-s: var(--wcs-primitive-size-320); /* Size S for multi-size components */
-  --wcs-semantic-size-xs: var(--wcs-primitive-size-240); /* Size XS for multi-size components */
-  --wcs-semantic-border-radius-base: var(--wcs-primitive-size-100); /* Base border-radius */
-  --wcs-semantic-border-radius-full: var(--wcs-primitive-size-max); /* Circular, full rounded border-radius */
-  --wcs-semantic-border-width-default: var(--wcs-primitive-size-10); /* Default border-width */
-  --wcs-semantic-border-width-large: var(--wcs-primitive-size-20); /* Larger border-width, used for focus border especially */
-  --wcs-semantic-border-width-larger: var(--wcs-primitive-size-40); /* Largest border-width */
-  --wcs-semantic-color-border-brand: var(--wcs-primitive-color-bleu-700); /* Brand border color */
-  --wcs-semantic-color-border-primary: var(--wcs-primitive-color-neutral-600); /* Primary border color */
-  --wcs-semantic-color-border-secondary: var(--wcs-primitive-color-neutral-300); /* Secondary border color */
-  --wcs-semantic-color-border-disabled: var(--wcs-primitive-color-neutral-400); /* Disabled border color */
-  --wcs-semantic-color-border-selected: var(--wcs-primitive-color-bleu-700); /* Selected border color */
-  --wcs-semantic-color-border-critical: var(--wcs-primitive-color-critical-500); /* Critical border color */
-  --wcs-semantic-color-border-warning: var(--wcs-primitive-color-ambre-500); /* Warning border color */
-  --wcs-semantic-color-border-information: var(--wcs-primitive-color-bleu-800); /* Information border color */
-  --wcs-semantic-color-border-success: var(--wcs-primitive-color-vert-500); /* Success border color */
-  --wcs-semantic-color-border-action-secondary-default: var(--wcs-primitive-color-bleu-700); /* Default border color for secondary elements like button, dropdown... */
-  --wcs-semantic-color-border-action-secondary-hover: var(--wcs-primitive-color-bleu-800); /* Hover border color for secondary elements like button, dropdown... */
-  --wcs-semantic-color-border-action-secondary-press: var(--wcs-primitive-color-bleu-900); /* Pressed border color for secondary elements like button, dropdown... */
-  --wcs-semantic-color-border-action-secondary-disabled: var(--wcs-primitive-color-neutral-300); /* Disabled border color for secondary elements like button, dropdown... */
-  --wcs-semantic-color-border-focus-base: var(--wcs-primitive-color-bleu-800); /* Border color on focus for base elements like button, dropdown, counter, switch... */
-  --wcs-semantic-color-border-focus-base-on-secondary: var(--wcs-primitive-color-neutral-0); /* Border color on focus for base elements when placed on secondary or dark background */
-  --wcs-semantic-color-border-focus-alt: var(--wcs-primitive-color-bleu-700); /* Alternative border color on focus for control elements like input, select, textarea... */
-  --wcs-semantic-color-border-focus-alt-on-secondary: var(--wcs-primitive-color-neutral-0); /* Alternative border color on focus for control elements when placed on secondary or dark background */
-  --wcs-semantic-color-border-control-indicator-default: var(--wcs-primitive-color-neutral-600); /* Default border color of a form-field indicator: radio, checkbox */
-  --wcs-semantic-color-border-control-indicator-selected: var(--wcs-primitive-color-bleu-700); /* Selected border color of a form-field indicator: radio, checkbox */
-  --wcs-semantic-color-border-control-indicator-hover: var(--wcs-primitive-color-bleu-600); /* Hovered border color of a form-field indicator: radio, checkbox */
-  --wcs-semantic-color-background-action-primary-default: var(--wcs-primitive-color-bleu-700); /* Default primary background for elements like button, dropdown... */
-  --wcs-semantic-color-background-action-primary-disabled: var(--wcs-primitive-color-neutral-200); /* Disabled primary background for element like a button, dropdown, switch... */
-  --wcs-semantic-color-background-action-primary-hover: var(--wcs-primitive-color-bleu-800); /* Can be used by primary elements which must have a hover state (button, dropdown...) */
-  --wcs-semantic-color-background-action-primary-press: var(--wcs-primitive-color-bleu-900); /* Can be used by primary elements which must have a press (CSS active) state (nav-item) */
-  --wcs-semantic-color-background-action-primary-selected-default: var(--wcs-primitive-color-bleu-900); /* Can be used by primary elements which must have a selected state (nav-item) */
-  --wcs-semantic-color-background-action-primary-selected-hover: var(--wcs-primitive-color-bleu-900); /* Can be used by primary elements which must have a hover state while selected (nav-item) */
-  --wcs-semantic-color-background-action-primary-selected-press: var(--wcs-primitive-color-bleu-900); /* Can be used by primary elements which must have a hover state while pressed (nav-item) */
-  --wcs-semantic-color-background-action-secondary-default: var(--wcs-primitive-color-transparent); /* Default secondary background for elements like button, dropdown... */
-  --wcs-semantic-color-background-action-secondary-disabled: var(--wcs-primitive-color-transparent); /* Disabled secondary background for element like a button, dropdown, switch... */
-  --wcs-semantic-color-background-action-secondary-selected-disabled: var(--wcs-primitive-color-neutral-0); /* Background of a disabled active secondary action (select option) */
-  --wcs-semantic-color-background-action-secondary-focus: var(--wcs-primitive-color-transparent); /* Background of a focused secondary action (button, select option) */
-  --wcs-semantic-color-background-action-tertiary-default: var(--wcs-primitive-color-transparent); /* Default tertiary background for elements like button, dropdown... */
-  --wcs-semantic-color-background-action-tertiary-disabled: var(--wcs-primitive-color-transparent); /* Disabled tertiary background for element like a button, dropdown, switch... */
-  --wcs-semantic-color-background-action-neutral-default: var(--wcs-primitive-color-transparent); /* Default neutral background for elements like dropdown menu item */
-  --wcs-semantic-color-background-action-neutral-hover: var(--wcs-primitive-color-neutral-100); /* Hovered neutral background for element like dropdown menu item */
-  --wcs-semantic-color-background-action-neutral-press: var(--wcs-primitive-color-neutral-300); /* Pressed neutral background for element like dropdown menu item */
-  --wcs-semantic-color-background-action-neutral-disabled: var(--wcs-primitive-color-transparent); /* Disabled neutral background for element like dropdown menu item */
-  --wcs-semantic-color-background-action-critical-default: var(--wcs-primitive-color-critical-500); /* Default critical background color */
-  --wcs-semantic-color-background-action-critical-hover: var(--wcs-primitive-color-critical-600); /* Hovered critical background color */
-  --wcs-semantic-color-background-action-critical-press: var(--wcs-primitive-color-critical-700); /* Pressed critical background color */
-  --wcs-semantic-color-background-action-critical-disabled: var(--wcs-primitive-color-neutral-200); /* Disabled success background color */
-  --wcs-semantic-color-background-action-information-default: var(--wcs-primitive-color-bleu-600); /* Default information background color */
-  --wcs-semantic-color-background-action-information-hover: var(--wcs-primitive-color-bleu-700); /* Hovered information background color */
-  --wcs-semantic-color-background-action-information-press: var(--wcs-primitive-color-bleu-800); /* Pressed information background color */
-  --wcs-semantic-color-background-action-information-disabled: var(--wcs-primitive-color-neutral-200); /* Disabled success background color */
-  --wcs-semantic-color-background-action-success-default: var(--wcs-primitive-color-vert-500); /* Default success background color */
-  --wcs-semantic-color-background-action-success-hover: var(--wcs-primitive-color-vert-600); /* Hovered success background color */
-  --wcs-semantic-color-background-action-success-press: var(--wcs-primitive-color-vert-800); /* Pressed success background color */
-  --wcs-semantic-color-background-action-success-disabled: var(--wcs-primitive-color-neutral-200); /* Disabled success background color */
-  --wcs-semantic-color-background-action-warning-default: var(--wcs-primitive-color-ambre-500); /* Default warning background color */
-  --wcs-semantic-color-background-action-warning-hover: var(--wcs-primitive-color-ambre-600); /* Hovered warning background color */
-  --wcs-semantic-color-background-action-warning-press: var(--wcs-primitive-color-ambre-700); /* Pressed warning background color */
-  --wcs-semantic-color-background-action-warning-disabled: var(--wcs-primitive-color-neutral-200); /* Disabled warning background color */
-  --wcs-semantic-color-background-control-default: var(--wcs-primitive-color-transparent); /* Default background of control like input, select, textarea... */
-  --wcs-semantic-color-background-control-disabled: var(--wcs-primitive-color-transparent); /* Disabled background of control like input, select, textarea... */
-  --wcs-semantic-color-background-control-indicator-selected: var(--wcs-primitive-color-bleu-700); /* Selected background color of a form-field indicator: radio, checkbox */
-  --wcs-semantic-color-background-control-indicator-hover: var(--wcs-primitive-color-bleu-800); /* Hovered background color of a form-field indicator: radio, checkbox */
-  --wcs-semantic-color-background-control-indicator-disabled: var(--wcs-primitive-color-neutral-300); /* Disabled background color of a form-field indicator: radio, checkbox */
-  --wcs-semantic-color-background-surface-brand: var(--wcs-primitive-color-bleu-700); /* Brand background color for surface */
-  --wcs-semantic-color-background-surface-body: var(--wcs-primitive-color-neutral-0); /* Body background color */
-  --wcs-semantic-color-background-surface-primary: var(--wcs-primitive-color-neutral-0); /* Background of a surface like a card, modal, overlay of a select... */
-  --wcs-semantic-color-background-surface-secondary: var(--wcs-primitive-color-neutral-100); /* Background of a secondary surface like a switch, counter... */
-  --wcs-semantic-color-background-surface-tertiary: var(--wcs-primitive-color-neutral-300); /* Tertiary background (used for background of prefix and suffix of control, also in other components) */
-  --wcs-semantic-color-background-surface-inverse: var(--wcs-primitive-color-neutral-800); /* Inverse background for contrast (mostly black) */
-  --wcs-semantic-color-background-surface-critical-default: var(--wcs-primitive-color-critical-500); /* Default critical background color */
-  --wcs-semantic-color-background-surface-critical-light: var(--wcs-primitive-color-critical-300); /* Light critical background color */
-  --wcs-semantic-color-background-surface-critical-lighter: var(--wcs-primitive-color-critical-200); /* Lighter critical background color */
-  --wcs-semantic-color-background-surface-critical-lightest: var(--wcs-primitive-color-critical-100); /* Lightest critical background color */
-  --wcs-semantic-color-background-surface-information-default: var(--wcs-primitive-color-bleu-700); /* Default information background color */
-  --wcs-semantic-color-background-surface-information-light: var(--wcs-primitive-color-bleu-300); /* Light information background color */
-  --wcs-semantic-color-background-surface-information-lighter: var(--wcs-primitive-color-bleu-200); /* Lighter information background color */
-  --wcs-semantic-color-background-surface-information-lightest: var(--wcs-primitive-color-bleu-100); /* Lightest information background color */
-  --wcs-semantic-color-background-surface-success-default: var(--wcs-primitive-color-vert-600); /* Default success background color */
-  --wcs-semantic-color-background-surface-success-light: var(--wcs-primitive-color-vert-300); /* Light success background color */
-  --wcs-semantic-color-background-surface-success-lighter: var(--wcs-primitive-color-vert-200); /* Lighter success background color */
-  --wcs-semantic-color-background-surface-success-lightest: var(--wcs-primitive-color-vert-100); /* Lightest success background color */
-  --wcs-semantic-color-background-surface-warning-default: var(--wcs-primitive-color-ambre-500); /* Default warning background color */
-  --wcs-semantic-color-background-surface-warning-light: var(--wcs-primitive-color-ambre-300); /* Light warning background color */
-  --wcs-semantic-color-background-surface-warning-lighter: var(--wcs-primitive-color-ambre-200); /* Lighter warning background color */
-  --wcs-semantic-color-background-surface-warning-lightest: var(--wcs-primitive-color-ambre-100); /* Lightest warning background color */
-  --wcs-semantic-color-background-surface-accent-light: var(--wcs-primitive-color-bleu-300); /* Light accent background color, used by nav-item indicator and grid rows */
-  --wcs-semantic-color-background-surface-accent-lighter: var(--wcs-primitive-color-bleu-200); /* Lighter accent background color, used by grid rows and segmented-button background (radio options) */
-  --wcs-semantic-color-background-surface-accent-lightest: var(--wcs-primitive-color-bleu-100); /* Lightest accent background color, used by segmented-button background (radio options) */
-  --wcs-semantic-color-background-surface-accent-dark: var(--wcs-primitive-color-bleu-600); /* Dark accent background color */
-  --wcs-semantic-color-background-surface-accent-darker: var(--wcs-primitive-color-bleu-700); /* Darker accent background color */
-  --wcs-semantic-color-background-surface-accent-darkest: var(--wcs-primitive-color-bleu-800); /* Darkest accent background color */
-  --wcs-semantic-color-background-backdrop: var(--wcs-primitive-color-backdrop); /* The layer behind a surface (modal) */
-  --wcs-semantic-color-foreground-brand: var(--wcs-primitive-color-bleu-700); /* Brand foreground color */
-  --wcs-semantic-color-foreground-primary: var(--wcs-primitive-color-neutral-0); /* Primary foreground color */
-  --wcs-semantic-color-foreground-disabled: var(--wcs-primitive-color-neutral-400); /* Disabled foreground color */
-  --wcs-semantic-color-foreground-critical: var(--wcs-primitive-color-critical-500); /* Critical foreground color */
-  --wcs-semantic-color-foreground-warning: var(--wcs-primitive-color-ambre-700); /* Warning foreground color */
-  --wcs-semantic-color-foreground-information: var(--wcs-primitive-color-bleu-800); /* Information foreground color */
-  --wcs-semantic-color-foreground-success: var(--wcs-primitive-color-vert-500); /* Success foreground color */
-  --wcs-semantic-color-foreground-on-accent: var(--wcs-primitive-color-bleu-700); /* Foreground color on top of an accent background */
-  --wcs-semantic-color-foreground-inverse: var(--wcs-primitive-color-neutral-800); /* Inverse foreground for contrast (mostly black) */
-  --wcs-semantic-color-foreground-action-secondary-default: var(--wcs-primitive-color-bleu-700); /* The layer on top of a secondary background */
-  --wcs-semantic-color-foreground-action-secondary-hover: var(--wcs-primitive-color-bleu-800); /* The layer on top of a secondary background when hovered */
-  --wcs-semantic-color-foreground-action-secondary-press: var(--wcs-primitive-color-bleu-900); /* The layer on top of a secondary background when pressed */
-  --wcs-semantic-color-foreground-action-tertiary-default: var(--wcs-primitive-color-bleu-700); /* The layer on top of a tertiary background */
-  --wcs-semantic-color-foreground-action-tertiary-hover: var(--wcs-primitive-color-bleu-800); /* The layer on top of a tertiary background when hovered */
-  --wcs-semantic-color-foreground-action-tertiary-press: var(--wcs-primitive-color-bleu-900); /* The layer on top of a tertiary background when pressed */
-  --wcs-semantic-color-foreground-action-critical-default: var(--wcs-primitive-color-neutral-0); /* Default critical foreground color */
-  --wcs-semantic-color-foreground-action-critical-hover: var(--wcs-primitive-color-neutral-0); /* Hovered critical foreground color */
-  --wcs-semantic-color-foreground-action-critical-press: var(--wcs-primitive-color-neutral-0); /* Pressed critical foreground color */
-  --wcs-semantic-color-foreground-action-information-default: var(--wcs-primitive-color-neutral-0); /* Default information foreground color */
-  --wcs-semantic-color-foreground-action-information-hover: var(--wcs-primitive-color-neutral-0); /* Hovered information foreground color */
-  --wcs-semantic-color-foreground-action-information-press: var(--wcs-primitive-color-neutral-0); /* Pressed information foreground color */
-  --wcs-semantic-color-foreground-action-success-default: var(--wcs-primitive-color-neutral-0); /* Default success foreground color */
-  --wcs-semantic-color-foreground-action-success-hover: var(--wcs-primitive-color-neutral-0); /* Hovered success foreground color */
-  --wcs-semantic-color-foreground-action-success-press: var(--wcs-primitive-color-neutral-0); /* Pressed success foreground color */
-  --wcs-semantic-color-foreground-action-warning-default: var(--wcs-primitive-color-neutral-0); /* Default warning foreground color */
-  --wcs-semantic-color-foreground-action-warning-hover: var(--wcs-primitive-color-neutral-0); /* Hovered warning foreground color */
-  --wcs-semantic-color-foreground-action-warning-press: var(--wcs-primitive-color-neutral-0); /* Pressed warning foreground color */
-  --wcs-semantic-color-foreground-control-indicator-selected: var(--wcs-primitive-color-neutral-0); /* Selected foreground color of a form-field indicator: radio, checkbox */
-  --wcs-semantic-color-foreground-control-indicator-hover: var(--wcs-primitive-color-neutral-0); /* Hovered foreground color of a form-field indicator: radio, checkbox */
-  --wcs-semantic-color-foreground-control-indicator-disabled: var(--wcs-primitive-color-neutral-0); /* Disabled foreground color of a form-field indicator: radio, checkbox */
-  --wcs-semantic-color-text-primary: var(--wcs-primitive-color-neutral-800); /* Primary color for text like heading, label */
-  --wcs-semantic-color-text-secondary: var(--wcs-primitive-color-neutral-700); /* Secondary color for text like paragraph */
-  --wcs-semantic-color-text-tertiary: var(--wcs-primitive-color-neutral-600); /* Tertiary color for text like placeholder */
-  --wcs-semantic-color-text-disabled: var(--wcs-primitive-color-neutral-400); /* Disabled color for text */
-  --wcs-semantic-color-text-critical: var(--wcs-primitive-color-critical-500); /* Main color to indicate an error state */
-  --wcs-semantic-color-text-link-default: var(--wcs-primitive-color-bleu-700); /* Default text color for link */
-  --wcs-semantic-color-text-link-hover: var(--wcs-primitive-color-bleu-800); /* Hovered text color for link */
-  --wcs-semantic-color-text-link-visited: var(--wcs-primitive-color-bleu-700); /* Visited text color for link */
-  --wcs-semantic-color-text-link-disabled: var(--wcs-primitive-color-neutral-400); /* Disabled text color for link */
-  --wcs-semantic-color-text-link-inverse: var(--wcs-primitive-color-neutral-0); /* Inverse text color for link */
-  --wcs-semantic-color-ripple-action-primary: var(--wcs-primitive-color-neutral-0); /* Ripple applied to an primary action background (on a button, dropdown...) */
-  --wcs-semantic-color-ripple-action-secondary: var(--wcs-primitive-color-bleu-700); /* Ripple applied to an secondary action background (on a button, dropdown...) */
-  --wcs-semantic-color-ripple-action-tertiary: var(--wcs-primitive-color-bleu-700); /* Ripple applied to an secondary action background (on a button, dropdown...) */
-  --wcs-semantic-color-ripple-control: var(--wcs-primitive-color-bleu-700); /* Ripple applied to an control (select) */
-  --wcs-semantic-font-size-heading-1: var(--wcs-primitive-font-size-1050); /* Level 1 title heading */
-  --wcs-semantic-font-size-heading-2: var(--wcs-primitive-font-size-900); /* Level 2 title heading */
-  --wcs-semantic-font-size-heading-3: var(--wcs-primitive-font-size-750); /* Level 3 title heading */
-  --wcs-semantic-font-size-heading-4: var(--wcs-primitive-font-size-600); /* Level 4 title heading */
-  --wcs-semantic-font-size-heading-5: var(--wcs-primitive-font-size-500); /* Level 5 title heading */
-  --wcs-semantic-font-size-heading-6: var(--wcs-primitive-font-size-450); /* Level 6 title heading */
-  --wcs-semantic-font-size-body-1: var(--wcs-primitive-font-size-500); /* Body text for introduction or catchphrases */
-  --wcs-semantic-font-size-body-2: var(--wcs-primitive-font-size-450); /* Body text only for news, blog for a more comfortable reading */
-  --wcs-semantic-font-size-body-3: var(--wcs-primitive-font-size-400); /* Default body text for common paragraphs */
-  --wcs-semantic-font-size-label-1: var(--wcs-primitive-font-size-400); /* Text used for buttons, links or other standard-sized actions */
-  --wcs-semantic-font-size-label-2: var(--wcs-primitive-font-size-350); /* Text used for buttons, links or other smaller-sized actions */
-  --wcs-semantic-font-size-label-3: var(--wcs-primitive-font-size-300); /* Text used for buttons, links or other even-smaller-sized actions */
-  --wcs-semantic-font-size-caption-1: var(--wcs-primitive-font-size-400); /* Use for minor mentions, captions or other information */
-  --wcs-semantic-font-size-caption-2: var(--wcs-primitive-font-size-350); /* Use for even-minor mentions, captions or other information */
-  --wcs-semantic-font-size-caption-3: var(--wcs-primitive-font-size-300); /* Use for even-more-minor mentions, captions or other information */
-  --wcs-semantic-font-line-height-base: var(--wcs-primitive-font-line-height-100); /* Base line-height */
-  --wcs-semantic-font-line-height-medium: var(--wcs-primitive-font-line-height-120); /* Higher line-height */
-  --wcs-semantic-font-line-height-large: var(--wcs-primitive-font-line-height-140); /* Highest line-height */
-  --wcs-semantic-font-weight-black: var(--wcs-primitive-font-weight-900); /* Avenir Black font weight */
-  --wcs-semantic-font-weight-heavy: var(--wcs-primitive-font-weight-800); /* Avenir Heavy font weight */
-  --wcs-semantic-font-weight-medium: var(--wcs-primitive-font-weight-500); /* Avenir Medium font weight */
-  --wcs-semantic-font-weight-roman: var(--wcs-primitive-font-weight-400); /* Avenir Roman font weight */
-  --wcs-semantic-font-weight-book: var(--wcs-primitive-font-weight-300); /* Avenir Book font weight */
-  --wcs-semantic-font-weight-light: var(--wcs-primitive-font-weight-100); /* Avenir Light font weight */
-  --wcs-semantic-spacing-small: var(--wcs-primitive-size-40); /* Small spacing */
-  --wcs-semantic-spacing-large: var(--wcs-primitive-size-160); /* Large spacing */
-  --wcs-semantic-spacing-base-025: var(--wcs-primitive-spacing-2); /* Base spacing x0.25 */
-  --wcs-semantic-spacing-base-05: var(--wcs-primitive-spacing-4); /* Base spacing x0.5 */
-  --wcs-semantic-spacing-base-150: var(--wcs-primitive-spacing-12); /* Base spacing x1.5 */
-  --wcs-semantic-spacing-base-200: var(--wcs-primitive-spacing-16); /* Base spacing x2 */
-  --wcs-semantic-spacing-base-250: var(--wcs-primitive-spacing-20); /* Base spacing x2.5 */
-  --wcs-semantic-spacing-base-300: var(--wcs-primitive-spacing-24); /* Base spacing x3 */
-  --wcs-semantic-spacing-base-400: var(--wcs-primitive-spacing-32); /* Base spacing x4 */
-  --wcs-semantic-spacing-base-500: var(--wcs-primitive-spacing-40); /* Base spacing x5 */
-  --wcs-semantic-spacing-base-600: var(--wcs-primitive-spacing-48); /* Base spacing x6 */
-  --wcs-semantic-spacing-base-700: var(--wcs-primitive-spacing-56); /* Base spacing x7 */
-  --wcs-semantic-spacing-base-800: var(--wcs-primitive-spacing-64); /* Base spacing x8 */
-  --wcs-semantic-spacing-base-900: var(--wcs-primitive-spacing-72); /* Base spacing x9 */
-  --wcs-semantic-spacing-base-1000: var(--wcs-primitive-spacing-80); /* Base spacing x10 */
-  --wcs-semantic-spacing-base-1100: var(--wcs-primitive-spacing-88); /* Base spacing x11 */
-  --wcs-semantic-spacing-base-1200: var(--wcs-primitive-spacing-96); /* Base spacing x12 */
-  --wcs-semantic-motion-duration-feedback-fast: var(--wcs-primitive-duration-50); /* Motion duration for faster feedbacks */
-  --wcs-semantic-motion-duration-feedback-base: var(--wcs-primitive-duration-150); /* Motion duration for feedbacks like transitions for moving arrows, transitioning backgrounds */
-  --wcs-semantic-motion-duration-feedback-slow: var(--wcs-primitive-duration-200); /* Motion duration for slow feedbacks */
-  --wcs-semantic-motion-duration-feedback-slower: var(--wcs-primitive-duration-350); /* Motion duration for slower feedbacks */
-  --wcs-semantic-motion-duration-animation-fast: var(--wcs-primitive-duration-1000); /* Motion duration for fast animations like spinner growing mode */
-  --wcs-semantic-motion-duration-animation-base: var(--wcs-primitive-duration-1500); /* Motion duration for long animations like spinner, skeleton */
-  --wcs-semantic-motion-duration-animation-slow: var(--wcs-primitive-duration-2000); /* Motion duration for slow animations */
-  --wcs-semantic-color-border-control-focus: var(--wcs-semantic-color-border-focus-alt); /* Focus border color for control elements like input, select, textarea... */
-  --wcs-semantic-color-border-control-indicator-disabled: var(--wcs-semantic-color-border-disabled); /* Disabled border color of a form-field indicator: radio, checkbox */
-  --wcs-semantic-color-background-action-secondary-hover: var(--wcs-semantic-color-background-surface-accent-lightest); /* Can be used by secondary elements which must have a hover state (button, dropdown...) */
-  --wcs-semantic-color-background-action-secondary-press: var(--wcs-semantic-color-background-surface-accent-lighter); /* Can be used by secondary elements which must have a press state (button, dropdown...) */
-  --wcs-semantic-color-background-action-secondary-selected-default: var(--wcs-semantic-color-background-surface-accent-lightest); /* Background of an active secondary action (select option) */
-  --wcs-semantic-color-background-action-secondary-selected-hover: var(--wcs-semantic-color-background-surface-accent-lighter); /* Background of a hovered active secondary action (select option) */
-  --wcs-semantic-color-background-action-secondary-selected-press: var(--wcs-semantic-color-background-surface-accent-light); /* Background of a pressed (CSS active) secondary action (select option) */
-  --wcs-semantic-color-background-action-tertiary-hover: var(--wcs-semantic-color-background-surface-accent-lightest); /* Can be used by tertiary elements which must have a hover state (button, dropdown...) */
-  --wcs-semantic-color-background-action-tertiary-press: var(--wcs-semantic-color-background-surface-accent-lighter); /* Can be used by tertiary elements which must have a press state (button, dropdown...) */
-  --wcs-semantic-color-background-control-readonly: var(--wcs-semantic-color-background-surface-secondary); /* Readonly background of control like input, select, textarea... */
-  --wcs-semantic-color-background-control-indicator-default: var(--wcs-semantic-color-background-surface-secondary); /* Default background color of a form-field indicator: radio, checkbox */
-  --wcs-semantic-color-foreground-action-primary-default: var(--wcs-semantic-color-foreground-primary); /* The layer on top of a primary background */
-  --wcs-semantic-color-foreground-action-primary-hover: var(--wcs-semantic-color-foreground-primary); /* The layer on top of a primary background when hovered */
-  --wcs-semantic-color-foreground-action-primary-press: var(--wcs-semantic-color-foreground-primary); /* The layer on top of a primary background when pressed */
-  --wcs-semantic-color-foreground-action-neutral-default: var(--wcs-semantic-color-text-primary); /* Default neutral foreground for elements like dropdown menu item */
-  --wcs-semantic-color-foreground-action-neutral-hover: var(--wcs-semantic-color-text-primary); /* Hovered neutral foreground for element like dropdown menu item */
-  --wcs-semantic-color-foreground-action-neutral-press: var(--wcs-semantic-color-text-primary); /* Pressed neutral foreground for element like dropdown menu item */
-  --wcs-semantic-color-text-link-neutral: var(--wcs-semantic-color-text-primary); /* Active text color for link */
-  --wcs-semantic-spacing-base: var(--wcs-semantic-size-base); /* Base spacing, can be used for calculation */
+  --wcs-semantic-size-base: var(--wcs-primitive-size-80); /** Base size for calculation */
+  --wcs-semantic-size-xl: var(--wcs-primitive-size-560); /** Size XL for multi-size components */
+  --wcs-semantic-size-l: var(--wcs-primitive-size-480); /** Size L for multi-size components */
+  --wcs-semantic-size-m: var(--wcs-primitive-size-400); /** Size M for multi-size components (default) */
+  --wcs-semantic-size-s: var(--wcs-primitive-size-320); /** Size S for multi-size components */
+  --wcs-semantic-size-xs: var(--wcs-primitive-size-240); /** Size XS for multi-size components */
+  --wcs-semantic-border-radius-base: var(--wcs-primitive-size-100); /** Base border-radius */
+  --wcs-semantic-border-radius-full: var(--wcs-primitive-size-max); /** Circular, full rounded border-radius */
+  --wcs-semantic-border-width-default: var(--wcs-primitive-size-10); /** Default border-width */
+  --wcs-semantic-border-width-large: var(--wcs-primitive-size-20); /** Larger border-width, used for focus border especially */
+  --wcs-semantic-border-width-larger: var(--wcs-primitive-size-40); /** Largest border-width */
+  --wcs-semantic-color-border-brand: var(--wcs-primitive-color-bleu-700); /** Brand border color */
+  --wcs-semantic-color-border-primary: var(--wcs-primitive-color-neutral-600); /** Primary border color */
+  --wcs-semantic-color-border-secondary: var(--wcs-primitive-color-neutral-300); /** Secondary border color */
+  --wcs-semantic-color-border-disabled: var(--wcs-primitive-color-neutral-400); /** Disabled border color */
+  --wcs-semantic-color-border-selected: var(--wcs-primitive-color-bleu-700); /** Selected border color */
+  --wcs-semantic-color-border-critical: var(--wcs-primitive-color-critical-500); /** Critical border color */
+  --wcs-semantic-color-border-warning: var(--wcs-primitive-color-ambre-500); /** Warning border color */
+  --wcs-semantic-color-border-information: var(--wcs-primitive-color-bleu-800); /** Information border color */
+  --wcs-semantic-color-border-success: var(--wcs-primitive-color-vert-500); /** Success border color */
+  --wcs-semantic-color-border-action-secondary-default: var(--wcs-primitive-color-bleu-700); /** Default border color for secondary elements like button, dropdown... */
+  --wcs-semantic-color-border-action-secondary-hover: var(--wcs-primitive-color-bleu-800); /** Hover border color for secondary elements like button, dropdown... */
+  --wcs-semantic-color-border-action-secondary-press: var(--wcs-primitive-color-bleu-900); /** Pressed border color for secondary elements like button, dropdown... */
+  --wcs-semantic-color-border-action-secondary-disabled: var(--wcs-primitive-color-neutral-300); /** Disabled border color for secondary elements like button, dropdown... */
+  --wcs-semantic-color-border-focus-base: var(--wcs-primitive-color-bleu-800); /** Border color on focus for base elements like button, dropdown, counter, switch... */
+  --wcs-semantic-color-border-focus-base-on-secondary: var(--wcs-primitive-color-neutral-0); /** Border color on focus for base elements when placed on secondary or dark background */
+  --wcs-semantic-color-border-focus-alt: var(--wcs-primitive-color-bleu-700); /** Alternative border color on focus for control elements like input, select, textarea... */
+  --wcs-semantic-color-border-focus-alt-on-secondary: var(--wcs-primitive-color-neutral-0); /** Alternative border color on focus for control elements when placed on secondary or dark background */
+  --wcs-semantic-color-border-control-indicator-default: var(--wcs-primitive-color-neutral-600); /** Default border color of a form-field indicator: radio, checkbox */
+  --wcs-semantic-color-border-control-indicator-selected: var(--wcs-primitive-color-bleu-700); /** Selected border color of a form-field indicator: radio, checkbox */
+  --wcs-semantic-color-border-control-indicator-hover: var(--wcs-primitive-color-bleu-600); /** Hovered border color of a form-field indicator: radio, checkbox */
+  --wcs-semantic-color-background-action-primary-default: var(--wcs-primitive-color-bleu-700); /** Default primary background for elements like button, dropdown... */
+  --wcs-semantic-color-background-action-primary-disabled: var(--wcs-primitive-color-neutral-200); /** Disabled primary background for element like a button, dropdown, switch... */
+  --wcs-semantic-color-background-action-primary-hover: var(--wcs-primitive-color-bleu-800); /** Can be used by primary elements which must have a hover state (button, dropdown...) */
+  --wcs-semantic-color-background-action-primary-press: var(--wcs-primitive-color-bleu-900); /** Can be used by primary elements which must have a press (CSS active) state (nav-item) */
+  --wcs-semantic-color-background-action-primary-selected-default: var(--wcs-primitive-color-bleu-900); /** Can be used by primary elements which must have a selected state (nav-item) */
+  --wcs-semantic-color-background-action-primary-selected-hover: var(--wcs-primitive-color-bleu-900); /** Can be used by primary elements which must have a hover state while selected (nav-item) */
+  --wcs-semantic-color-background-action-primary-selected-press: var(--wcs-primitive-color-bleu-900); /** Can be used by primary elements which must have a hover state while pressed (nav-item) */
+  --wcs-semantic-color-background-action-secondary-default: var(--wcs-primitive-color-transparent); /** Default secondary background for elements like button, dropdown... */
+  --wcs-semantic-color-background-action-secondary-disabled: var(--wcs-primitive-color-transparent); /** Disabled secondary background for element like a button, dropdown, switch... */
+  --wcs-semantic-color-background-action-secondary-selected-disabled: var(--wcs-primitive-color-neutral-0); /** Background of a disabled active secondary action (select option) */
+  --wcs-semantic-color-background-action-secondary-focus: var(--wcs-primitive-color-transparent); /** Background of a focused secondary action (button, select option) */
+  --wcs-semantic-color-background-action-tertiary-default: var(--wcs-primitive-color-transparent); /** Default tertiary background for elements like button, dropdown... */
+  --wcs-semantic-color-background-action-tertiary-disabled: var(--wcs-primitive-color-transparent); /** Disabled tertiary background for element like a button, dropdown, switch... */
+  --wcs-semantic-color-background-action-neutral-default: var(--wcs-primitive-color-transparent); /** Default neutral background for elements like dropdown menu item */
+  --wcs-semantic-color-background-action-neutral-hover: var(--wcs-primitive-color-neutral-100); /** Hovered neutral background for element like dropdown menu item */
+  --wcs-semantic-color-background-action-neutral-press: var(--wcs-primitive-color-neutral-300); /** Pressed neutral background for element like dropdown menu item */
+  --wcs-semantic-color-background-action-neutral-disabled: var(--wcs-primitive-color-transparent); /** Disabled neutral background for element like dropdown menu item */
+  --wcs-semantic-color-background-action-critical-default: var(--wcs-primitive-color-critical-500); /** Default critical background color */
+  --wcs-semantic-color-background-action-critical-hover: var(--wcs-primitive-color-critical-600); /** Hovered critical background color */
+  --wcs-semantic-color-background-action-critical-press: var(--wcs-primitive-color-critical-700); /** Pressed critical background color */
+  --wcs-semantic-color-background-action-critical-disabled: var(--wcs-primitive-color-neutral-200); /** Disabled success background color */
+  --wcs-semantic-color-background-action-information-default: var(--wcs-primitive-color-bleu-600); /** Default information background color */
+  --wcs-semantic-color-background-action-information-hover: var(--wcs-primitive-color-bleu-700); /** Hovered information background color */
+  --wcs-semantic-color-background-action-information-press: var(--wcs-primitive-color-bleu-800); /** Pressed information background color */
+  --wcs-semantic-color-background-action-information-disabled: var(--wcs-primitive-color-neutral-200); /** Disabled success background color */
+  --wcs-semantic-color-background-action-success-default: var(--wcs-primitive-color-vert-500); /** Default success background color */
+  --wcs-semantic-color-background-action-success-hover: var(--wcs-primitive-color-vert-600); /** Hovered success background color */
+  --wcs-semantic-color-background-action-success-press: var(--wcs-primitive-color-vert-800); /** Pressed success background color */
+  --wcs-semantic-color-background-action-success-disabled: var(--wcs-primitive-color-neutral-200); /** Disabled success background color */
+  --wcs-semantic-color-background-action-warning-default: var(--wcs-primitive-color-ambre-500); /** Default warning background color */
+  --wcs-semantic-color-background-action-warning-hover: var(--wcs-primitive-color-ambre-600); /** Hovered warning background color */
+  --wcs-semantic-color-background-action-warning-press: var(--wcs-primitive-color-ambre-700); /** Pressed warning background color */
+  --wcs-semantic-color-background-action-warning-disabled: var(--wcs-primitive-color-neutral-200); /** Disabled warning background color */
+  --wcs-semantic-color-background-control-default: var(--wcs-primitive-color-transparent); /** Default background of control like input, select, textarea... */
+  --wcs-semantic-color-background-control-disabled: var(--wcs-primitive-color-transparent); /** Disabled background of control like input, select, textarea... */
+  --wcs-semantic-color-background-control-indicator-selected: var(--wcs-primitive-color-bleu-700); /** Selected background color of a form-field indicator: radio, checkbox */
+  --wcs-semantic-color-background-control-indicator-hover: var(--wcs-primitive-color-bleu-800); /** Hovered background color of a form-field indicator: radio, checkbox */
+  --wcs-semantic-color-background-control-indicator-disabled: var(--wcs-primitive-color-neutral-300); /** Disabled background color of a form-field indicator: radio, checkbox */
+  --wcs-semantic-color-background-surface-brand: var(--wcs-primitive-color-bleu-700); /** Brand background color for surface */
+  --wcs-semantic-color-background-surface-body: var(--wcs-primitive-color-neutral-0); /** Body background color */
+  --wcs-semantic-color-background-surface-primary: var(--wcs-primitive-color-neutral-0); /** Background of a surface like a card, modal, overlay of a select... */
+  --wcs-semantic-color-background-surface-secondary: var(--wcs-primitive-color-neutral-100); /** Background of a secondary surface like a switch, counter... */
+  --wcs-semantic-color-background-surface-tertiary: var(--wcs-primitive-color-neutral-300); /** Tertiary background (used for background of prefix and suffix of control, also in other components) */
+  --wcs-semantic-color-background-surface-inverse: var(--wcs-primitive-color-neutral-800); /** Inverse background for contrast (mostly black) */
+  --wcs-semantic-color-background-surface-critical-default: var(--wcs-primitive-color-critical-500); /** Default critical background color */
+  --wcs-semantic-color-background-surface-critical-light: var(--wcs-primitive-color-critical-300); /** Light critical background color */
+  --wcs-semantic-color-background-surface-critical-lighter: var(--wcs-primitive-color-critical-200); /** Lighter critical background color */
+  --wcs-semantic-color-background-surface-critical-lightest: var(--wcs-primitive-color-critical-100); /** Lightest critical background color */
+  --wcs-semantic-color-background-surface-information-default: var(--wcs-primitive-color-bleu-700); /** Default information background color */
+  --wcs-semantic-color-background-surface-information-light: var(--wcs-primitive-color-bleu-300); /** Light information background color */
+  --wcs-semantic-color-background-surface-information-lighter: var(--wcs-primitive-color-bleu-200); /** Lighter information background color */
+  --wcs-semantic-color-background-surface-information-lightest: var(--wcs-primitive-color-bleu-100); /** Lightest information background color */
+  --wcs-semantic-color-background-surface-success-default: var(--wcs-primitive-color-vert-600); /** Default success background color */
+  --wcs-semantic-color-background-surface-success-light: var(--wcs-primitive-color-vert-300); /** Light success background color */
+  --wcs-semantic-color-background-surface-success-lighter: var(--wcs-primitive-color-vert-200); /** Lighter success background color */
+  --wcs-semantic-color-background-surface-success-lightest: var(--wcs-primitive-color-vert-100); /** Lightest success background color */
+  --wcs-semantic-color-background-surface-warning-default: var(--wcs-primitive-color-ambre-500); /** Default warning background color */
+  --wcs-semantic-color-background-surface-warning-light: var(--wcs-primitive-color-ambre-300); /** Light warning background color */
+  --wcs-semantic-color-background-surface-warning-lighter: var(--wcs-primitive-color-ambre-200); /** Lighter warning background color */
+  --wcs-semantic-color-background-surface-warning-lightest: var(--wcs-primitive-color-ambre-100); /** Lightest warning background color */
+  --wcs-semantic-color-background-surface-accent-light: var(--wcs-primitive-color-bleu-300); /** Light accent background color, used by nav-item indicator and grid rows */
+  --wcs-semantic-color-background-surface-accent-lighter: var(--wcs-primitive-color-bleu-200); /** Lighter accent background color, used by grid rows and segmented-button background (radio options) */
+  --wcs-semantic-color-background-surface-accent-lightest: var(--wcs-primitive-color-bleu-100); /** Lightest accent background color, used by segmented-button background (radio options) */
+  --wcs-semantic-color-background-surface-accent-dark: var(--wcs-primitive-color-bleu-600); /** Dark accent background color */
+  --wcs-semantic-color-background-surface-accent-darker: var(--wcs-primitive-color-bleu-700); /** Darker accent background color */
+  --wcs-semantic-color-background-surface-accent-darkest: var(--wcs-primitive-color-bleu-800); /** Darkest accent background color */
+  --wcs-semantic-color-background-backdrop: var(--wcs-primitive-color-backdrop); /** The layer behind a surface (modal) */
+  --wcs-semantic-color-foreground-brand: var(--wcs-primitive-color-bleu-700); /** Brand foreground color */
+  --wcs-semantic-color-foreground-primary: var(--wcs-primitive-color-neutral-0); /** Primary foreground color */
+  --wcs-semantic-color-foreground-disabled: var(--wcs-primitive-color-neutral-400); /** Disabled foreground color */
+  --wcs-semantic-color-foreground-critical: var(--wcs-primitive-color-critical-500); /** Critical foreground color */
+  --wcs-semantic-color-foreground-warning: var(--wcs-primitive-color-ambre-700); /** Warning foreground color */
+  --wcs-semantic-color-foreground-information: var(--wcs-primitive-color-bleu-800); /** Information foreground color */
+  --wcs-semantic-color-foreground-success: var(--wcs-primitive-color-vert-500); /** Success foreground color */
+  --wcs-semantic-color-foreground-on-accent: var(--wcs-primitive-color-bleu-700); /** Foreground color on top of an accent background */
+  --wcs-semantic-color-foreground-inverse: var(--wcs-primitive-color-neutral-800); /** Inverse foreground for contrast (mostly black) */
+  --wcs-semantic-color-foreground-action-secondary-default: var(--wcs-primitive-color-bleu-700); /** The layer on top of a secondary background */
+  --wcs-semantic-color-foreground-action-secondary-hover: var(--wcs-primitive-color-bleu-800); /** The layer on top of a secondary background when hovered */
+  --wcs-semantic-color-foreground-action-secondary-press: var(--wcs-primitive-color-bleu-900); /** The layer on top of a secondary background when pressed */
+  --wcs-semantic-color-foreground-action-tertiary-default: var(--wcs-primitive-color-bleu-700); /** The layer on top of a tertiary background */
+  --wcs-semantic-color-foreground-action-tertiary-hover: var(--wcs-primitive-color-bleu-800); /** The layer on top of a tertiary background when hovered */
+  --wcs-semantic-color-foreground-action-tertiary-press: var(--wcs-primitive-color-bleu-900); /** The layer on top of a tertiary background when pressed */
+  --wcs-semantic-color-foreground-action-critical-default: var(--wcs-primitive-color-neutral-0); /** Default critical foreground color */
+  --wcs-semantic-color-foreground-action-critical-hover: var(--wcs-primitive-color-neutral-0); /** Hovered critical foreground color */
+  --wcs-semantic-color-foreground-action-critical-press: var(--wcs-primitive-color-neutral-0); /** Pressed critical foreground color */
+  --wcs-semantic-color-foreground-action-information-default: var(--wcs-primitive-color-neutral-0); /** Default information foreground color */
+  --wcs-semantic-color-foreground-action-information-hover: var(--wcs-primitive-color-neutral-0); /** Hovered information foreground color */
+  --wcs-semantic-color-foreground-action-information-press: var(--wcs-primitive-color-neutral-0); /** Pressed information foreground color */
+  --wcs-semantic-color-foreground-action-success-default: var(--wcs-primitive-color-neutral-0); /** Default success foreground color */
+  --wcs-semantic-color-foreground-action-success-hover: var(--wcs-primitive-color-neutral-0); /** Hovered success foreground color */
+  --wcs-semantic-color-foreground-action-success-press: var(--wcs-primitive-color-neutral-0); /** Pressed success foreground color */
+  --wcs-semantic-color-foreground-action-warning-default: var(--wcs-primitive-color-neutral-0); /** Default warning foreground color */
+  --wcs-semantic-color-foreground-action-warning-hover: var(--wcs-primitive-color-neutral-0); /** Hovered warning foreground color */
+  --wcs-semantic-color-foreground-action-warning-press: var(--wcs-primitive-color-neutral-0); /** Pressed warning foreground color */
+  --wcs-semantic-color-foreground-control-indicator-selected: var(--wcs-primitive-color-neutral-0); /** Selected foreground color of a form-field indicator: radio, checkbox */
+  --wcs-semantic-color-foreground-control-indicator-hover: var(--wcs-primitive-color-neutral-0); /** Hovered foreground color of a form-field indicator: radio, checkbox */
+  --wcs-semantic-color-foreground-control-indicator-disabled: var(--wcs-primitive-color-neutral-0); /** Disabled foreground color of a form-field indicator: radio, checkbox */
+  --wcs-semantic-color-text-primary: var(--wcs-primitive-color-neutral-800); /** Primary color for text like heading, label */
+  --wcs-semantic-color-text-secondary: var(--wcs-primitive-color-neutral-700); /** Secondary color for text like paragraph */
+  --wcs-semantic-color-text-tertiary: var(--wcs-primitive-color-neutral-600); /** Tertiary color for text like placeholder */
+  --wcs-semantic-color-text-disabled: var(--wcs-primitive-color-neutral-400); /** Disabled color for text */
+  --wcs-semantic-color-text-critical: var(--wcs-primitive-color-critical-500); /** Main color to indicate an error state */
+  --wcs-semantic-color-text-link-default: var(--wcs-primitive-color-bleu-700); /** Default text color for link */
+  --wcs-semantic-color-text-link-hover: var(--wcs-primitive-color-bleu-800); /** Hovered text color for link */
+  --wcs-semantic-color-text-link-visited: var(--wcs-primitive-color-bleu-700); /** Visited text color for link */
+  --wcs-semantic-color-text-link-disabled: var(--wcs-primitive-color-neutral-400); /** Disabled text color for link */
+  --wcs-semantic-color-text-link-inverse: var(--wcs-primitive-color-neutral-0); /** Inverse text color for link */
+  --wcs-semantic-color-ripple-action-primary: var(--wcs-primitive-color-neutral-0); /** Ripple applied to an primary action background (on a button, dropdown...) */
+  --wcs-semantic-color-ripple-action-secondary: var(--wcs-primitive-color-bleu-700); /** Ripple applied to an secondary action background (on a button, dropdown...) */
+  --wcs-semantic-color-ripple-action-tertiary: var(--wcs-primitive-color-bleu-700); /** Ripple applied to an secondary action background (on a button, dropdown...) */
+  --wcs-semantic-color-ripple-control: var(--wcs-primitive-color-bleu-700); /** Ripple applied to an control (select) */
+  --wcs-semantic-font-size-heading-1: var(--wcs-primitive-font-size-1050); /** Level 1 title heading */
+  --wcs-semantic-font-size-heading-2: var(--wcs-primitive-font-size-900); /** Level 2 title heading */
+  --wcs-semantic-font-size-heading-3: var(--wcs-primitive-font-size-750); /** Level 3 title heading */
+  --wcs-semantic-font-size-heading-4: var(--wcs-primitive-font-size-600); /** Level 4 title heading */
+  --wcs-semantic-font-size-heading-5: var(--wcs-primitive-font-size-500); /** Level 5 title heading */
+  --wcs-semantic-font-size-heading-6: var(--wcs-primitive-font-size-450); /** Level 6 title heading */
+  --wcs-semantic-font-size-body-1: var(--wcs-primitive-font-size-500); /** Body text for introduction or catchphrases */
+  --wcs-semantic-font-size-body-2: var(--wcs-primitive-font-size-450); /** Body text only for news, blog for a more comfortable reading */
+  --wcs-semantic-font-size-body-3: var(--wcs-primitive-font-size-400); /** Default body text for common paragraphs */
+  --wcs-semantic-font-size-label-1: var(--wcs-primitive-font-size-400); /** Text used for buttons, links or other standard-sized actions */
+  --wcs-semantic-font-size-label-2: var(--wcs-primitive-font-size-350); /** Text used for buttons, links or other smaller-sized actions */
+  --wcs-semantic-font-size-label-3: var(--wcs-primitive-font-size-300); /** Text used for buttons, links or other even-smaller-sized actions */
+  --wcs-semantic-font-size-caption-1: var(--wcs-primitive-font-size-400); /** Use for minor mentions, captions or other information */
+  --wcs-semantic-font-size-caption-2: var(--wcs-primitive-font-size-350); /** Use for even-minor mentions, captions or other information */
+  --wcs-semantic-font-size-caption-3: var(--wcs-primitive-font-size-300); /** Use for even-more-minor mentions, captions or other information */
+  --wcs-semantic-font-line-height-base: var(--wcs-primitive-font-line-height-100); /** Base line-height */
+  --wcs-semantic-font-line-height-medium: var(--wcs-primitive-font-line-height-120); /** Higher line-height */
+  --wcs-semantic-font-line-height-large: var(--wcs-primitive-font-line-height-140); /** Highest line-height */
+  --wcs-semantic-font-weight-black: var(--wcs-primitive-font-weight-900); /** Avenir Black font weight */
+  --wcs-semantic-font-weight-heavy: var(--wcs-primitive-font-weight-800); /** Avenir Heavy font weight */
+  --wcs-semantic-font-weight-medium: var(--wcs-primitive-font-weight-500); /** Avenir Medium font weight */
+  --wcs-semantic-font-weight-roman: var(--wcs-primitive-font-weight-400); /** Avenir Roman font weight */
+  --wcs-semantic-font-weight-book: var(--wcs-primitive-font-weight-300); /** Avenir Book font weight */
+  --wcs-semantic-font-weight-light: var(--wcs-primitive-font-weight-100); /** Avenir Light font weight */
+  --wcs-semantic-spacing-small: var(--wcs-primitive-size-40); /** Small spacing */
+  --wcs-semantic-spacing-large: var(--wcs-primitive-size-160); /** Large spacing */
+  --wcs-semantic-spacing-base-025: var(--wcs-primitive-spacing-2); /** Base spacing x0.25 */
+  --wcs-semantic-spacing-base-05: var(--wcs-primitive-spacing-4); /** Base spacing x0.5 */
+  --wcs-semantic-spacing-base-150: var(--wcs-primitive-spacing-12); /** Base spacing x1.5 */
+  --wcs-semantic-spacing-base-200: var(--wcs-primitive-spacing-16); /** Base spacing x2 */
+  --wcs-semantic-spacing-base-250: var(--wcs-primitive-spacing-20); /** Base spacing x2.5 */
+  --wcs-semantic-spacing-base-300: var(--wcs-primitive-spacing-24); /** Base spacing x3 */
+  --wcs-semantic-spacing-base-400: var(--wcs-primitive-spacing-32); /** Base spacing x4 */
+  --wcs-semantic-spacing-base-500: var(--wcs-primitive-spacing-40); /** Base spacing x5 */
+  --wcs-semantic-spacing-base-600: var(--wcs-primitive-spacing-48); /** Base spacing x6 */
+  --wcs-semantic-spacing-base-700: var(--wcs-primitive-spacing-56); /** Base spacing x7 */
+  --wcs-semantic-spacing-base-800: var(--wcs-primitive-spacing-64); /** Base spacing x8 */
+  --wcs-semantic-spacing-base-900: var(--wcs-primitive-spacing-72); /** Base spacing x9 */
+  --wcs-semantic-spacing-base-1000: var(--wcs-primitive-spacing-80); /** Base spacing x10 */
+  --wcs-semantic-spacing-base-1100: var(--wcs-primitive-spacing-88); /** Base spacing x11 */
+  --wcs-semantic-spacing-base-1200: var(--wcs-primitive-spacing-96); /** Base spacing x12 */
+  --wcs-semantic-motion-duration-feedback-fast: var(--wcs-primitive-duration-50); /** Motion duration for faster feedbacks */
+  --wcs-semantic-motion-duration-feedback-base: var(--wcs-primitive-duration-150); /** Motion duration for feedbacks like transitions for moving arrows, transitioning backgrounds */
+  --wcs-semantic-motion-duration-feedback-slow: var(--wcs-primitive-duration-200); /** Motion duration for slow feedbacks */
+  --wcs-semantic-motion-duration-feedback-slower: var(--wcs-primitive-duration-350); /** Motion duration for slower feedbacks */
+  --wcs-semantic-motion-duration-animation-fast: var(--wcs-primitive-duration-1000); /** Motion duration for fast animations like spinner growing mode */
+  --wcs-semantic-motion-duration-animation-base: var(--wcs-primitive-duration-1500); /** Motion duration for long animations like spinner, skeleton */
+  --wcs-semantic-motion-duration-animation-slow: var(--wcs-primitive-duration-2000); /** Motion duration for slow animations */
+  --wcs-semantic-color-border-control-focus: var(--wcs-semantic-color-border-focus-alt); /** Focus border color for control elements like input, select, textarea... */
+  --wcs-semantic-color-border-control-indicator-disabled: var(--wcs-semantic-color-border-disabled); /** Disabled border color of a form-field indicator: radio, checkbox */
+  --wcs-semantic-color-background-action-secondary-hover: var(--wcs-semantic-color-background-surface-accent-lightest); /** Can be used by secondary elements which must have a hover state (button, dropdown...) */
+  --wcs-semantic-color-background-action-secondary-press: var(--wcs-semantic-color-background-surface-accent-lighter); /** Can be used by secondary elements which must have a press state (button, dropdown...) */
+  --wcs-semantic-color-background-action-secondary-selected-default: var(--wcs-semantic-color-background-surface-accent-lightest); /** Background of an active secondary action (select option) */
+  --wcs-semantic-color-background-action-secondary-selected-hover: var(--wcs-semantic-color-background-surface-accent-lighter); /** Background of a hovered active secondary action (select option) */
+  --wcs-semantic-color-background-action-secondary-selected-press: var(--wcs-semantic-color-background-surface-accent-light); /** Background of a pressed (CSS active) secondary action (select option) */
+  --wcs-semantic-color-background-action-tertiary-hover: var(--wcs-semantic-color-background-surface-accent-lightest); /** Can be used by tertiary elements which must have a hover state (button, dropdown...) */
+  --wcs-semantic-color-background-action-tertiary-press: var(--wcs-semantic-color-background-surface-accent-lighter); /** Can be used by tertiary elements which must have a press state (button, dropdown...) */
+  --wcs-semantic-color-background-control-readonly: var(--wcs-semantic-color-background-surface-secondary); /** Readonly background of control like input, select, textarea... */
+  --wcs-semantic-color-background-control-indicator-default: var(--wcs-semantic-color-background-surface-secondary); /** Default background color of a form-field indicator: radio, checkbox */
+  --wcs-semantic-color-foreground-action-primary-default: var(--wcs-semantic-color-foreground-primary); /** The layer on top of a primary background */
+  --wcs-semantic-color-foreground-action-primary-hover: var(--wcs-semantic-color-foreground-primary); /** The layer on top of a primary background when hovered */
+  --wcs-semantic-color-foreground-action-primary-press: var(--wcs-semantic-color-foreground-primary); /** The layer on top of a primary background when pressed */
+  --wcs-semantic-color-foreground-action-neutral-default: var(--wcs-semantic-color-text-primary); /** Default neutral foreground for elements like dropdown menu item */
+  --wcs-semantic-color-foreground-action-neutral-hover: var(--wcs-semantic-color-text-primary); /** Hovered neutral foreground for element like dropdown menu item */
+  --wcs-semantic-color-foreground-action-neutral-press: var(--wcs-semantic-color-text-primary); /** Pressed neutral foreground for element like dropdown menu item */
+  --wcs-semantic-color-text-link-neutral: var(--wcs-semantic-color-text-primary); /** Active text color for link */
+  --wcs-semantic-spacing-base: var(--wcs-semantic-size-base); /** Base spacing, can be used for calculation */
 }
 
 /* Components Overrides */