wcs-core 7.0.0 → 7.2.0

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

@@ -0,0 +1,652 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --wcs-primitive-size-10: 1px;
+  --wcs-primitive-size-20: 2px;
+  --wcs-primitive-size-40: 4px;
+  --wcs-primitive-size-60: 6px;
+  --wcs-primitive-size-80: 8px;
+  --wcs-primitive-size-100: 10px;
+  --wcs-primitive-size-120: 12px;
+  --wcs-primitive-size-140: 14px;
+  --wcs-primitive-size-160: 16px;
+  --wcs-primitive-size-180: 18px;
+  --wcs-primitive-size-200: 20px;
+  --wcs-primitive-size-240: 24px;
+  --wcs-primitive-size-280: 28px;
+  --wcs-primitive-size-300: 30px;
+  --wcs-primitive-size-320: 32px;
+  --wcs-primitive-size-360: 36px;
+  --wcs-primitive-size-400: 40px;
+  --wcs-primitive-size-420: 42px;
+  --wcs-primitive-size-480: 48px;
+  --wcs-primitive-size-560: 56px;
+  --wcs-primitive-size-640: 64px;
+  --wcs-primitive-size-720: 72px;
+  --wcs-primitive-size-800: 80px;
+  --wcs-primitive-size-1200: 120px;
+  --wcs-primitive-size-none: 0px;
+  --wcs-primitive-size-max: 10000px;
+  --wcs-primitive-spacing-0: 0px;
+  --wcs-primitive-spacing-2: 2px;
+  --wcs-primitive-spacing-4: 4px;
+  --wcs-primitive-spacing-6: 6px;
+  --wcs-primitive-spacing-8: 8px;
+  --wcs-primitive-spacing-12: 12px;
+  --wcs-primitive-spacing-16: 16px;
+  --wcs-primitive-spacing-20: 20px;
+  --wcs-primitive-spacing-24: 24px;
+  --wcs-primitive-spacing-32: 32px;
+  --wcs-primitive-spacing-40: 40px;
+  --wcs-primitive-spacing-48: 48px;
+  --wcs-primitive-spacing-56: 56px;
+  --wcs-primitive-spacing-64: 64px;
+  --wcs-primitive-spacing-72: 72px;
+  --wcs-primitive-spacing-80: 80px;
+  --wcs-primitive-spacing-88: 88px;
+  --wcs-primitive-spacing-96: 96px;
+  --wcs-primitive-spacing-104: 104px;
+  --wcs-primitive-spacing-112: 112px;
+  --wcs-primitive-spacing-120: 120px;
+  --wcs-primitive-spacing-128: 128px;
+  --wcs-primitive-spacing-136: 136px;
+  --wcs-primitive-spacing-144: 144px;
+  --wcs-primitive-color-transparent: rgba(0, 0, 0, 0);
+  --wcs-primitive-color-backdrop: rgba(10, 20, 49, 0.4);
+  --wcs-primitive-color-bleu-acier-100: #f4f6fc;
+  --wcs-primitive-color-bleu-acier-200: #e9edf9;
+  --wcs-primitive-color-bleu-acier-300: #d4dcf3;
+  --wcs-primitive-color-bleu-acier-400: #92a7e1;
+  --wcs-primitive-color-bleu-acier-500: #264fc4;
+  --wcs-primitive-color-bleu-acier-600: #1d3b93;
+  --wcs-primitive-color-bleu-acier-700: #132862;
+  --wcs-primitive-color-bleu-acier-800: #0a1431;
+  --wcs-primitive-color-bleu-cobalt-100: #f6f7fe;
+  --wcs-primitive-color-bleu-cobalt-200: #edf0fe;
+  --wcs-primitive-color-bleu-cobalt-300: #dce1fd;
+  --wcs-primitive-color-bleu-cobalt-400: #a7b3fa;
+  --wcs-primitive-color-bleu-cobalt-500: #5068f5;
+  --wcs-primitive-color-bleu-cobalt-600: #3c4eb8;
+  --wcs-primitive-color-bleu-cobalt-700: #28347b;
+  --wcs-primitive-color-bleu-cobalt-800: #141a3d;
+  --wcs-primitive-color-bleu-givre-100: #f2fbfb;
+  --wcs-primitive-color-bleu-givre-200: #e5f7f8;
+  --wcs-primitive-color-bleu-givre-300: #cceff0;
+  --wcs-primitive-color-bleu-givre-400: #80d7da;
+  --wcs-primitive-color-bleu-givre-500: #00afb5;
+  --wcs-primitive-color-bleu-givre-600: #008388;
+  --wcs-primitive-color-bleu-givre-700: #00585b;
+  --wcs-primitive-color-bleu-givre-800: #002c2d;
+  --wcs-primitive-color-vert-sapin-100: #f2f6f6;
+  --wcs-primitive-color-vert-sapin-200: #e6eeed;
+  --wcs-primitive-color-vert-sapin-300: #ccdcda;
+  --wcs-primitive-color-vert-sapin-400: #80a8a3;
+  --wcs-primitive-color-vert-sapin-500: #015147;
+  --wcs-primitive-color-vert-sapin-600: #013d35;
+  --wcs-primitive-color-vert-sapin-700: #012924;
+  --wcs-primitive-color-vert-sapin-800: #001412;
+  --wcs-primitive-color-vert-trefle-100: #f2f9f7;
+  --wcs-primitive-color-vert-trefle-200: #e5f2ee;
+  --wcs-primitive-color-vert-trefle-300: #cce6dd;
+  --wcs-primitive-color-vert-trefle-400: #80bfaa;
+  --wcs-primitive-color-vert-trefle-500: #008056;
+  --wcs-primitive-color-vert-trefle-600: #006041;
+  --wcs-primitive-color-vert-trefle-700: #00402b;
+  --wcs-primitive-color-vert-trefle-800: #002016;
+  --wcs-primitive-color-vert-lichen-100: #f8fbf4;
+  --wcs-primitive-color-vert-lichen-200: #f2f7e9;
+  --wcs-primitive-color-vert-lichen-300: #e4f0d4;
+  --wcs-primitive-color-vert-lichen-400: #bcd993;
+  --wcs-primitive-color-vert-lichen-500: #7ab327;
+  --wcs-primitive-color-vert-lichen-600: #5c861d;
+  --wcs-primitive-color-vert-lichen-700: #3d5a14;
+  --wcs-primitive-color-vert-lichen-800: #1f2d0a;
+  --wcs-primitive-color-jaune-or-100: #fffbf2;
+  --wcs-primitive-color-jaune-or-200: #fff7e5;
+  --wcs-primitive-color-jaune-or-300: #ffefcc;
+  --wcs-primitive-color-jaune-or-400: #ffd880;
+  --wcs-primitive-color-jaune-or-500: #ffb100;
+  --wcs-primitive-color-jaune-or-600: #bf8500;
+  --wcs-primitive-color-jaune-or-700: #805900;
+  --wcs-primitive-color-jaune-or-800: #402c00;
+  --wcs-primitive-color-orange-mecanique-100: #fdf6f4;
+  --wcs-primitive-color-orange-mecanique-200: #fceee8;
+  --wcs-primitive-color-orange-mecanique-300: #f8dcd2;
+  --wcs-primitive-color-orange-mecanique-400: #efa88e;
+  --wcs-primitive-color-orange-mecanique-500: #de511d;
+  --wcs-primitive-color-orange-mecanique-600: #a63d16;
+  --wcs-primitive-color-orange-mecanique-700: #6f290f;
+  --wcs-primitive-color-orange-mecanique-800: #381407;
+  --wcs-primitive-color-rouge-feu-100: #fcf3f3;
+  --wcs-primitive-color-rouge-feu-200: #f9e7e7;
+  --wcs-primitive-color-rouge-feu-300: #f4cfcf;
+  --wcs-primitive-color-rouge-feu-400: #e38686;
+  --wcs-primitive-color-rouge-feu-500: #c80e0e;
+  --wcs-primitive-color-rouge-feu-600: #960b0b;
+  --wcs-primitive-color-rouge-feu-700: #640707;
+  --wcs-primitive-color-rouge-feu-800: #320404;
+  --wcs-primitive-color-rose-vif-100: #fef2fb;
+  --wcs-primitive-color-rose-vif-200: #fee5f8;
+  --wcs-primitive-color-rose-vif-300: #fcccf0;
+  --wcs-primitive-color-rose-vif-400: #f880da;
+  --wcs-primitive-color-rose-vif-500: #f100b5;
+  --wcs-primitive-color-rose-vif-600: #b50088;
+  --wcs-primitive-color-rose-vif-700: #79005b;
+  --wcs-primitive-color-rose-vif-800: #3c002d;
+  --wcs-primitive-color-rose-rubis-100: #fcf2f7;
+  --wcs-primitive-color-rose-rubis-200: #f9e5f0;
+  --wcs-primitive-color-rose-rubis-300: #f3cce1;
+  --wcs-primitive-color-rose-rubis-400: #e180b3;
+  --wcs-primitive-color-rose-rubis-500: #c30067;
+  --wcs-primitive-color-rose-rubis-600: #92004d;
+  --wcs-primitive-color-rose-rubis-700: #620034;
+  --wcs-primitive-color-rose-rubis-800: #31001a;
+  --wcs-primitive-color-violet-lie-de-vin-100: #f9f2f7;
+  --wcs-primitive-color-violet-lie-de-vin-200: #f2e5ef;
+  --wcs-primitive-color-violet-lie-de-vin-300: #e6cce0;
+  --wcs-primitive-color-violet-lie-de-vin-400: #bf80b1;
+  --wcs-primitive-color-violet-lie-de-vin-500: #800064;
+  --wcs-primitive-color-violet-lie-de-vin-600: #60004b;
+  --wcs-primitive-color-violet-lie-de-vin-700: #400032;
+  --wcs-primitive-color-violet-lie-de-vin-800: #200019;
+  --wcs-primitive-color-violet-electrique-100: #f9f4ff;
+  --wcs-primitive-color-violet-electrique-200: #f4e9fe;
+  --wcs-primitive-color-violet-electrique-300: #e9d3fe;
+  --wcs-primitive-color-violet-electrique-400: #c791fd;
+  --wcs-primitive-color-violet-electrique-500: #9024fa;
+  --wcs-primitive-color-violet-electrique-600: #6c1bbb;
+  --wcs-primitive-color-violet-electrique-700: #48127d;
+  --wcs-primitive-color-violet-electrique-800: #24093f;
+  --wcs-primitive-color-alpha-light-005: rgba(255, 255, 255, 0.05);
+  --wcs-primitive-color-alpha-light-010: rgba(255, 255, 255, 0.1);
+  --wcs-primitive-color-alpha-light-020: rgba(255, 255, 255, 0.2);
+  --wcs-primitive-color-alpha-light-030: rgba(255, 255, 255, 0.3);
+  --wcs-primitive-color-alpha-light-040: rgba(255, 255, 255, 0.4);
+  --wcs-primitive-color-alpha-light-050: rgba(255, 255, 255, 0.5);
+  --wcs-primitive-color-alpha-light-060: rgba(255, 255, 255, 0.6);
+  --wcs-primitive-color-alpha-light-070: rgba(255, 255, 255, 0.7);
+  --wcs-primitive-color-alpha-light-080: rgba(255, 255, 255, 0.8);
+  --wcs-primitive-color-alpha-light-090: rgba(255, 255, 255, 0.9);
+  --wcs-primitive-color-alpha-dark-005: rgba(0, 0, 0, 0.05);
+  --wcs-primitive-color-alpha-dark-010: rgba(0, 0, 0, 0.1);
+  --wcs-primitive-color-alpha-dark-020: rgba(0, 0, 0, 0.2);
+  --wcs-primitive-color-alpha-dark-030: rgba(0, 0, 0, 0.3);
+  --wcs-primitive-color-alpha-dark-040: rgba(0, 0, 0, 0.4);
+  --wcs-primitive-color-alpha-dark-050: rgba(0, 0, 0, 0.5);
+  --wcs-primitive-color-alpha-dark-060: rgba(0, 0, 0, 0.6);
+  --wcs-primitive-color-alpha-dark-070: rgba(0, 0, 0, 0.7);
+  --wcs-primitive-color-alpha-dark-080: rgba(0, 0, 0, 0.8);
+  --wcs-primitive-color-alpha-dark-090: rgba(0, 0, 0, 0.9);
+  --wcs-primitive-color-neutral-0: #ffffff;
+  --wcs-primitive-color-neutral-100: #f4f5f6;
+  --wcs-primitive-color-neutral-200: #f2f2f2;
+  --wcs-primitive-color-neutral-300: #d7d7d7;
+  --wcs-primitive-color-neutral-400: #b9b9b9;
+  --wcs-primitive-color-neutral-500: #a0a0a0;
+  --wcs-primitive-color-neutral-600: #747678;
+  --wcs-primitive-color-neutral-700: #4d4f53;
+  --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-font-size-250: 10px;
+  --wcs-primitive-font-size-275: 11px;
+  --wcs-primitive-font-size-300: 12px;
+  --wcs-primitive-font-size-325: 13px;
+  --wcs-primitive-font-size-350: 14px;
+  --wcs-primitive-font-size-400: 16px;
+  --wcs-primitive-font-size-450: 18px;
+  --wcs-primitive-font-size-500: 20px;
+  --wcs-primitive-font-size-550: 22px;
+  --wcs-primitive-font-size-600: 24px;
+  --wcs-primitive-font-size-700: 28px;
+  --wcs-primitive-font-size-750: 30px;
+  --wcs-primitive-font-size-800: 32px;
+  --wcs-primitive-font-size-900: 36px;
+  --wcs-primitive-font-size-1000: 40px;
+  --wcs-primitive-font-size-1050: 42px;
+  --wcs-primitive-font-size-1100: 44px;
+  --wcs-primitive-font-size-1200: 48px;
+  --wcs-primitive-font-size-1300: 52px;
+  --wcs-primitive-font-size-1400: 56px;
+  --wcs-primitive-font-size-1500: 60px;
+  --wcs-primitive-font-size-1600: 64px;
+  --wcs-primitive-font-size-1700: 68px;
+  --wcs-primitive-font-size-1800: 72px;
+  --wcs-primitive-font-weight-100: 100;
+  --wcs-primitive-font-weight-300: 300;
+  --wcs-primitive-font-weight-400: 400;
+  --wcs-primitive-font-weight-500: 500;
+  --wcs-primitive-font-weight-800: 800;
+  --wcs-primitive-font-weight-900: 900;
+  --wcs-primitive-font-line-height-100: 1;
+  --wcs-primitive-font-line-height-110: 1.1;
+  --wcs-primitive-font-line-height-120: 1.2;
+  --wcs-primitive-font-line-height-140: 1.4;
+  --wcs-primitive-duration-0: 0ms;
+  --wcs-primitive-duration-50: 50ms;
+  --wcs-primitive-duration-100: 100ms;
+  --wcs-primitive-duration-150: 150ms;
+  --wcs-primitive-duration-200: 200ms;
+  --wcs-primitive-duration-300: 300ms;
+  --wcs-primitive-duration-350: 350ms;
+  --wcs-primitive-duration-400: 400ms;
+  --wcs-primitive-duration-1000: 1000ms;
+  --wcs-primitive-duration-1500: 1500ms;
+  --wcs-primitive-duration-2000: 2000ms;
+  --wcs-primitive-breakpoints-mobile: 320px;
+  --wcs-primitive-breakpoints-tablet: 769px;
+  --wcs-primitive-breakpoints-desktop: 1024px;
+  --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-primitive-size-base: var(--wcs-primitive-size-80);
+  --wcs-primitive-color-primary: var(--wcs-primitive-color-bleu-acier-500);
+  --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-40); /* 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-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-critical: var(--wcs-primitive-color-critical-500); /* Critical border color */
+  --wcs-semantic-color-border-warning: var(--wcs-primitive-color-jaune-or-500); /* Warning border color */
+  --wcs-semantic-color-border-information: var(--wcs-primitive-color-bleu-acier-800); /* Information border color */
+  --wcs-semantic-color-border-success: var(--wcs-primitive-color-vert-trefle-500); /* Success border color */
+  --wcs-semantic-color-border-action-secondary-hover: var(--wcs-primitive-color-bleu-acier-600); /* Hover border color for secondary elements like button, dropdown... */
+  --wcs-semantic-color-border-action-secondary-press: var(--wcs-primitive-color-bleu-acier-700); /* 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-acier-600); /* 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-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-hover: var(--wcs-primitive-color-bleu-acier-600); /* Hovered border color of a form-field indicator: radio, checkbox */
+  --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-acier-600); /* 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-acier-700); /* Can be used by primary elements which must have a press state (nav-item) */
+  --wcs-semantic-color-background-action-primary-selected-default: var(--wcs-primitive-color-bleu-acier-700); /* 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-acier-700); /* 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-acier-700); /* 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-cobalt-600); /* Default information background color */
+  --wcs-semantic-color-background-action-information-hover: var(--wcs-primitive-color-bleu-cobalt-700); /* Hovered information background color */
+  --wcs-semantic-color-background-action-information-press: var(--wcs-primitive-color-bleu-cobalt-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-trefle-500); /* Default success background color */
+  --wcs-semantic-color-background-action-success-hover: var(--wcs-primitive-color-vert-trefle-600); /* Hovered success background color */
+  --wcs-semantic-color-background-action-success-press: var(--wcs-primitive-color-vert-trefle-700); /* 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-jaune-or-500); /* Default warning background color */
+  --wcs-semantic-color-background-action-warning-hover: var(--wcs-primitive-color-jaune-or-600); /* Hovered warning background color */
+  --wcs-semantic-color-background-action-warning-press: var(--wcs-primitive-color-jaune-or-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-hover: var(--wcs-primitive-color-bleu-acier-600); /* 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-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-acier-700); /* Default information background color */
+  --wcs-semantic-color-background-surface-information-light: var(--wcs-primitive-color-bleu-acier-200); /* Light information background color */
+  --wcs-semantic-color-background-surface-information-lighter: var(--wcs-primitive-color-bleu-acier-200); /* Lighter information background color */
+  --wcs-semantic-color-background-surface-information-lightest: var(--wcs-primitive-color-bleu-acier-100); /* Lightest information background color */
+  --wcs-semantic-color-background-surface-success-default: var(--wcs-primitive-color-vert-trefle-600); /* Default success background color */
+  --wcs-semantic-color-background-surface-success-light: var(--wcs-primitive-color-vert-trefle-300); /* Light success background color */
+  --wcs-semantic-color-background-surface-success-lighter: var(--wcs-primitive-color-vert-trefle-200); /* Lighter success background color */
+  --wcs-semantic-color-background-surface-success-lightest: var(--wcs-primitive-color-vert-trefle-100); /* Lightest success background color */
+  --wcs-semantic-color-background-surface-warning-default: var(--wcs-primitive-color-jaune-or-500); /* Default warning background color */
+  --wcs-semantic-color-background-surface-warning-light: var(--wcs-primitive-color-jaune-or-300); /* Light warning background color */
+  --wcs-semantic-color-background-surface-warning-lighter: var(--wcs-primitive-color-jaune-or-200); /* Lighter warning background color */
+  --wcs-semantic-color-background-surface-warning-lightest: var(--wcs-primitive-color-jaune-or-100); /* Lightest warning background color */
+  --wcs-semantic-color-background-surface-accent-light: var(--wcs-primitive-color-bleu-givre-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-givre-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-givre-100); /* Lightest accent background color, used by segmented-button background (radio options) */
+  --wcs-semantic-color-background-surface-accent-dark: var(--wcs-primitive-color-bleu-cobalt-600); /* Dark accent background color */
+  --wcs-semantic-color-background-surface-accent-darker: var(--wcs-primitive-color-bleu-cobalt-700); /* Darker accent background color */
+  --wcs-semantic-color-background-surface-accent-darkest: var(--wcs-primitive-color-bleu-acier-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-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-jaune-or-700); /* Warning foreground color */
+  --wcs-semantic-color-foreground-information: var(--wcs-primitive-color-bleu-acier-800); /* Information foreground color */
+  --wcs-semantic-color-foreground-success: var(--wcs-primitive-color-vert-trefle-500); /* Success foreground color */
+  --wcs-semantic-color-foreground-on-accent: var(--wcs-primitive-color-bleu-givre-800); /* 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-hover: var(--wcs-primitive-color-bleu-acier-600); /* The layer on top of a secondary background when hovered */
+  --wcs-semantic-color-foreground-action-secondary-press: var(--wcs-primitive-color-bleu-acier-700); /* The layer on top of a secondary background when pressed */
+  --wcs-semantic-color-foreground-action-tertiary-hover: var(--wcs-primitive-color-bleu-acier-600); /* The layer on top of a tertiary background when hovered */
+  --wcs-semantic-color-foreground-action-tertiary-press: var(--wcs-primitive-color-bleu-acier-700); /* 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-hover: var(--wcs-primitive-color-bleu-acier-600); /* Hovered 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-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); /* Base motion duration for fast animations like spinner growing mode */
+  --wcs-semantic-motion-duration-animation-base: var(--wcs-primitive-duration-1500); /* Base 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-brand: var(--wcs-primitive-color-primary); /* Brand border color */
+  --wcs-semantic-color-border-selected: var(--wcs-primitive-color-primary); /* Selected border color */
+  --wcs-semantic-color-border-action-secondary-default: var(--wcs-primitive-color-primary); /* Default border color for secondary elements like button, dropdown... */
+  --wcs-semantic-color-border-focus-alt: var(--wcs-primitive-color-primary); /* Alternative border color on focus for control elements like input, select, textarea... */
+  --wcs-semantic-color-border-control-indicator-selected: var(--wcs-primitive-color-primary); /* Selected border color of a form-field indicator: radio, checkbox */
+  --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-primary-default: var(--wcs-primitive-color-primary); /* Default primary background for elements like button, dropdown... */
+  --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-background-control-indicator-selected: var(--wcs-primitive-color-primary); /* Selected background color of a form-field indicator: radio, checkbox */
+  --wcs-semantic-color-background-surface-brand: var(--wcs-primitive-color-primary); /* Brand background color for surface */
+  --wcs-semantic-color-foreground-brand: var(--wcs-primitive-color-primary); /* Brand foreground color */
+  --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-secondary-default: var(--wcs-primitive-color-primary); /* The layer on top of a secondary background */
+  --wcs-semantic-color-foreground-action-tertiary-default: var(--wcs-primitive-color-primary); /* The layer on top of a tertiary background */
+  --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-default: var(--wcs-primitive-color-primary); /* Default text color for link */
+  --wcs-semantic-color-text-link-neutral: var(--wcs-semantic-color-text-primary); /* Active text color for link */
+  --wcs-semantic-color-text-link-visited: var(--wcs-primitive-color-primary); /* Visited text color for link */
+  --wcs-semantic-color-ripple-action-secondary: var(--wcs-primitive-color-primary); /* Ripple applied to an secondary action background (on a button, dropdown...) */
+  --wcs-semantic-color-ripple-action-tertiary: var(--wcs-primitive-color-primary); /* Ripple applied to an secondary action background (on a button, dropdown...) */
+  --wcs-semantic-color-ripple-control: var(--wcs-primitive-color-primary); /* Ripple applied to an control (select) */
+  --wcs-semantic-spacing-base: var(--wcs-semantic-size-base); /* Base spacing, can be used for calculation */
+  --wcs-semantic-color-border-control-focus: var(--wcs-semantic-color-border-focus-alt); /* Focus border color for control elements like input, select, textarea... */
+}
+
+/* Components Overrides */
+:root wcs-switch {
+    --wcs-switch-dot-color-default: var(--wcs-primitive-color-neutral-600);
+    --wcs-switch-dot-color-selected: var(--wcs-primitive-color-neutral-0);
+    --wcs-switch-dot-color-disabled: var(--wcs-primitive-color-neutral-600);
+}
+
+:root wcs-footer {
+    --wcs-footer-background-color: var(--wcs-primitive-color-neutral-0);
+    --wcs-footer-text-color: var(--wcs-semantic-color-text-primary);
+    --wcs-footer-link-text-color: var(--wcs-semantic-color-text-primary);
+    --wcs-footer-link-text-color-hover: var(--wcs-semantic-color-text-primary);
+}
+
+:root wcs-galactic {
+    --wcs-galactic-background-color: var(--wcs-primitive-color-bleu-givre-100);
+    --wcs-galactic-text-color: var(--wcs-semantic-color-text-primary);
+
+    /* To enforce contrast color on dropdown / buttons added in the galactic slot */
+    --wcs-semantic-color-foreground-action-tertiary-default: var(--wcs-semantic-color-text-primary);
+}
+
+:root wcs-galactic-menu {
+    --wcs-galactic-menu-background-color: var(--wcs-primitive-color-bleu-givre-300);
+    --wcs-semantic-color-border-focus-base: var(--wcs-semantic-color-border-focus-base-on-secondary);
+}
+
+:root wcs-horizontal-stepper {
+    --wcs-semantic-color-background-surface-brand-default: var(--wcs-semantic-color-background-action-primary-default);
+}
+
+:root wcs-tabs {
+    --wcs-tabs-indicator-height: calc(var(--wcs-semantic-size-base) / 4);
+    --wcs-tabs-indicator-border-radius: 0;
+}
+
+:root wcs-switch {
+    --wcs-switch-dot-size: 1.25rem;
+    --wcs-switch-padding-horizontal: 0.125rem;
+}
+
+/* wcs-tooltip */
+:root .tippy-box[data-theme~='dark'] {
+    --wcs-semantic-color-text-primary: var(--wcs-semantic-color-text-inverse);
+    --wcs-semantic-color-border-focus-base: var(--wcs-semantic-color-border-focus-base-on-secondary);
+    --wcs-semantic-color-border-focus-alt: var(--wcs-semantic-color-border-focus-alt-on-secondary);
+}
+
+:root .wcs-secondary {
+    --wcs-semantic-color-background-action-primary-default: var(--wcs-primitive-color-neutral-700);
+    --wcs-semantic-color-background-surface-brand: var(--wcs-primitive-color-neutral-700);
+
+    --wcs-semantic-color-foreground-action-primary-default: var(--wcs-primitive-color-neutral-0);
+    --wcs-semantic-color-foreground-action-secondary-default: var(--wcs-primitive-color-neutral-700);
+    --wcs-semantic-color-foreground-action-tertiary-default: var(--wcs-primitive-color-neutral-700);
+
+    --wcs-semantic-color-border-action-secondary-default: var(--wcs-primitive-color-neutral-700);
+
+    --wcs-semantic-color-ripple-action-primary: var(--wcs-primitive-color-neutral-0);
+    --wcs-semantic-color-ripple-action-secondary: var(--wcs-primitive-color-neutral-700);
+    --wcs-semantic-color-ripple-action-tertiary: var(--wcs-primitive-color-neutral-700);
+}
+
+:root .wcs-success {
+    --wcs-semantic-color-background-action-primary-default: var(--wcs-primitive-color-vert-lichen-500);
+    --wcs-semantic-color-background-surface-brand: var(--wcs-primitive-color-vert-lichen-500);
+
+    --wcs-semantic-color-foreground-action-primary-default: var(--wcs-primitive-color-neutral-800);
+    --wcs-semantic-color-foreground-action-secondary-default: var(--wcs-primitive-color-vert-lichen-500);
+    --wcs-semantic-color-foreground-action-tertiary-default: var(--wcs-primitive-color-vert-lichen-500);
+
+    --wcs-semantic-color-border-action-secondary-default: var(--wcs-primitive-color-vert-lichen-500);
+
+    --wcs-semantic-color-ripple-action-primary: var(--wcs-primitive-color-neutral-800);
+    --wcs-semantic-color-ripple-action-secondary: var(--wcs-primitive-color-vert-lichen-500);
+    --wcs-semantic-color-ripple-action-tertiary: var(--wcs-primitive-color-vert-lichen-500);
+}
+
+:root .wcs-warning {
+    --wcs-semantic-color-background-action-primary-default: var(--wcs-primitive-color-jaune-or-500);
+    --wcs-semantic-color-background-surface-brand: var(--wcs-primitive-color-jaune-or-500);
+
+    --wcs-semantic-color-foreground-primary: var(--wcs-primitive-color-neutral-900);
+    --wcs-semantic-color-foreground-action-primary-default: var(--wcs-primitive-color-neutral-800);
+    --wcs-semantic-color-foreground-action-secondary-default: var(--wcs-primitive-color-jaune-or-500);
+    --wcs-semantic-color-foreground-action-tertiary-default: var(--wcs-primitive-color-jaune-or-500);
+
+    --wcs-semantic-color-border-action-secondary-default: var(--wcs-primitive-color-jaune-or-500);
+
+    --wcs-semantic-color-ripple-action-primary: var(--wcs-primitive-color-neutral-800);
+    --wcs-semantic-color-ripple-action-secondary: var(--wcs-primitive-color-jaune-or-500);
+    --wcs-semantic-color-ripple-action-tertiary: var(--wcs-primitive-color-jaune-or-500);
+}
+
+:root .wcs-info {
+    --wcs-semantic-color-background-action-primary-default: var(--wcs-primitive-color-bleu-cobalt-600);
+    --wcs-semantic-color-background-surface-brand: var(--wcs-primitive-color-bleu-cobalt-600);
+
+    --wcs-semantic-color-foreground-action-primary-default: var(--wcs-primitive-color-neutral-0);
+    --wcs-semantic-color-foreground-action-secondary-default: var(--wcs-primitive-color-bleu-cobalt-600);
+    --wcs-semantic-color-foreground-action-tertiary-default: var(--wcs-primitive-color-bleu-cobalt-600);
+
+    --wcs-semantic-color-border-action-secondary-default: var(--wcs-primitive-color-bleu-cobalt-600);
+
+    --wcs-semantic-color-ripple-action-primary: var(--wcs-primitive-color-neutral-0);
+    --wcs-semantic-color-ripple-action-secondary: var(--wcs-primitive-color-bleu-cobalt-600);
+    --wcs-semantic-color-ripple-action-tertiary: var(--wcs-primitive-color-bleu-cobalt-600);
+}
+
+:root .wcs-critical {
+    --wcs-semantic-color-background-action-primary-default: var(--wcs-primitive-color-rouge-feu-500);
+    --wcs-semantic-color-background-surface-brand: var(--wcs-primitive-color-rouge-feu-500);
+
+    --wcs-semantic-color-background-action-neutral-default: var(--wcs-primitive-color-critical-100);
+    --wcs-semantic-color-background-action-neutral-hover: var(--wcs-primitive-color-critical-200);
+    --wcs-semantic-color-background-action-neutral-press: var(--wcs-primitive-color-critical-300);
+
+    --wcs-semantic-color-foreground-action-neutral-default: var(--wcs-primitive-color-critical-500);
+    --wcs-semantic-color-foreground-action-neutral-hover: var(--wcs-primitive-color-critical-500);
+    --wcs-semantic-color-foreground-action-neutral-press: var(--wcs-primitive-color-critical-600);
+
+    --wcs-semantic-color-foreground-action-primary-default: var(--wcs-primitive-color-neutral-0);
+    --wcs-semantic-color-foreground-action-secondary-default: var(--wcs-primitive-color-rouge-feu-500);
+    --wcs-semantic-color-foreground-action-tertiary-default: var(--wcs-primitive-color-rouge-feu-500);
+
+    --wcs-semantic-color-border-action-secondary-default: var(--wcs-primitive-color-rouge-feu-500);
+
+    --wcs-semantic-color-ripple-action-primary: var(--wcs-primitive-color-neutral-0);
+    --wcs-semantic-color-ripple-action-secondary: var(--wcs-primitive-color-rouge-feu-500);
+    --wcs-semantic-color-ripple-action-tertiary: var(--wcs-primitive-color-rouge-feu-500);
+}
+
+/* wcs-danger is deprecated, use wcs-critical instead */
+:root .wcs-danger {
+    --wcs-semantic-color-background-action-primary-default: var(--wcs-primitive-color-rouge-feu-500);
+    --wcs-semantic-color-background-surface-brand: var(--wcs-primitive-color-rouge-feu-500);
+
+    --wcs-semantic-color-foreground-action-primary-default: var(--wcs-primitive-color-neutral-0);
+    --wcs-semantic-color-foreground-action-secondary-default: var(--wcs-primitive-color-rouge-feu-500);
+    --wcs-semantic-color-foreground-action-tertiary-default: var(--wcs-primitive-color-rouge-feu-500);
+
+    --wcs-semantic-color-border-action-secondary-default: var(--wcs-primitive-color-rouge-feu-500);
+
+    --wcs-semantic-color-ripple-action-primary: var(--wcs-primitive-color-neutral-0);
+    --wcs-semantic-color-ripple-action-secondary: var(--wcs-primitive-color-rouge-feu-500);
+    --wcs-semantic-color-ripple-action-tertiary: var(--wcs-primitive-color-rouge-feu-500);
+}
+
+:root .wcs-dark {
+    --wcs-semantic-color-background-action-primary-default: var(--wcs-primitive-color-neutral-700);
+    --wcs-semantic-color-background-surface-brand: var(--wcs-primitive-color-neutral-700);
+
+    --wcs-semantic-color-foreground-action-primary-default: var(--wcs-primitive-color-neutral-0);
+    --wcs-semantic-color-foreground-action-secondary-default: var(--wcs-primitive-color-neutral-700);
+    --wcs-semantic-color-foreground-action-tertiary-default: var(--wcs-primitive-color-neutral-700);
+
+    --wcs-semantic-color-border-action-secondary-default: var(--wcs-primitive-color-neutral-700);
+
+    --wcs-semantic-color-ripple-action-primary: var(--wcs-primitive-color-neutral-0);
+    --wcs-semantic-color-ripple-action-secondary: var(--wcs-primitive-color-neutral-700);
+    --wcs-semantic-color-ripple-action-tertiary: var(--wcs-primitive-color-neutral-700);
+}
+
+:root .wcs-light {
+    --wcs-semantic-color-background-action-primary-default: var(--wcs-primitive-color-neutral-200);
+    --wcs-semantic-color-background-surface-brand: var(--wcs-primitive-color-neutral-200);
+    --wcs-semantic-color-foreground-primary: var(--wcs-primitive-color-neutral-900);
+
+    --wcs-semantic-color-foreground-action-primary-default: var(--wcs-primitive-color-neutral-800);
+    --wcs-semantic-color-foreground-action-secondary-default: var(--wcs-primitive-color-neutral-200);
+    --wcs-semantic-color-foreground-action-tertiary-default: var(--wcs-primitive-color-neutral-200);
+
+    --wcs-semantic-color-border-action-secondary-default: var(--wcs-primitive-color-neutral-200);
+
+    --wcs-semantic-color-ripple-action-primary: var(--wcs-primitive-color-neutral-800);
+    --wcs-semantic-color-ripple-action-secondary: var(--wcs-primitive-color-neutral-200);
+    --wcs-semantic-color-ripple-action-tertiary: var(--wcs-primitive-color-neutral-200);
+}