wcs-core 7.0.0 → 7.2.0

package/design-tokens/dist/sncf-reseau.json

@@ -6382,6 +6382,33 @@
               "base"
             ]
           },
+          "base-on-secondary": {
+            "$description": "Border color on focus for base elements when placed on secondary or dark background",
+            "$type": "color",
+            "$value": "#ffffff",
+            "filePath": "design-tokens/tokens/sncf-reseau-semantic.json",
+            "isSource": false,
+            "original": {
+              "$description": "Border color on focus for base elements when placed on secondary or dark background",
+              "$type": "color",
+              "$value": "{primitive.color.neutral.0}"
+            },
+            "name": "wcs-semantic-color-border-focus-base-on-secondary",
+            "attributes": {
+              "category": "semantic",
+              "type": "color",
+              "item": "border",
+              "subitem": "focus",
+              "state": "base-on-secondary"
+            },
+            "path": [
+              "semantic",
+              "color",
+              "border",
+              "focus",
+              "base-on-secondary"
+            ]
+          },
           "alt": {
             "$description": "Alternative border color on focus for control elements like input, select, textarea...",
             "$type": "color",
@@ -6408,6 +6435,33 @@
               "focus",
               "alt"
             ]
+          },
+          "alt-on-secondary": {
+            "$description": "Alternative border color on focus for control elements when placed on secondary or dark background",
+            "$type": "color",
+            "$value": "#ffffff",
+            "filePath": "design-tokens/tokens/sncf-reseau-semantic.json",
+            "isSource": false,
+            "original": {
+              "$description": "Alternative border color on focus for control elements when placed on secondary or dark background",
+              "$type": "color",
+              "$value": "{primitive.color.neutral.0}"
+            },
+            "name": "wcs-semantic-color-border-focus-alt-on-secondary",
+            "attributes": {
+              "category": "semantic",
+              "type": "color",
+              "item": "border",
+              "subitem": "focus",
+              "state": "alt-on-secondary"
+            },
+            "path": [
+              "semantic",
+              "color",
+              "border",
+              "focus",
+              "alt-on-secondary"
+            ]
           }
         },
         "control": {

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

@@ -0,0 +1,550 @@
+/**
+ * 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(0, 43, 40, 0.4);
+  --wcs-primitive-color-vert-100: #f7fdf6;
+  --wcs-primitive-color-vert-200: #e7fce5;
+  --wcs-primitive-color-vert-300: #d3ffcf;
+  --wcs-primitive-color-vert-400: #bbffbe; /* Vert Raisin */
+  --wcs-primitive-color-vert-500: #34e88e; /* Vert Primavera */
+  --wcs-primitive-color-vert-600: #00856b;
+  --wcs-primitive-color-vert-700: #065654; /* Vert Pin */
+  --wcs-primitive-color-vert-800: #043e3d;
+  --wcs-primitive-color-vert-900: #002b28; /* Vert Jaspe */
+  --wcs-primitive-color-bleu-100: #eff8ff;
+  --wcs-primitive-color-bleu-200: #dff2ff;
+  --wcs-primitive-color-bleu-300: #b0dfff; /* Bleu Polaire */
+  --wcs-primitive-color-bleu-400: #3390ff; /* Bleu Azur */
+  --wcs-primitive-color-bleu-500: #00468c; /* Bleu Ocean */
+  --wcs-primitive-color-bleu-600: #002346; /* Bleu Nuit */
+  --wcs-primitive-color-jaune-100: #fffdf5;
+  --wcs-primitive-color-jaune-200: #fff9dd;
+  --wcs-primitive-color-jaune-300: #ffefab; /* Jaune Sable */
+  --wcs-primitive-color-jaune-400: #ffd245; /* Jaune Soleil */
+  --wcs-primitive-color-jaune-500: #664400; /* Marron Roche */
+  --wcs-primitive-color-orange-100: #fff6f0; /* Orange Bisque */
+  --wcs-primitive-color-orange-200: #ffd2a9; /* Ocre Rocheuse */
+  --wcs-primitive-color-orange-300: #ff6833; /* Orange Sanguinaire */
+  --wcs-primitive-color-orange-400: #7c1a00; /* Rouge Basque */
+  --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-border-secondary: rgba(6, 86, 84, 0.2); /* Secondary border color */
+  --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-vert-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-120); /* 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-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-400); /* Warning border color */
+  --wcs-semantic-color-border-information: var(--wcs-primitive-color-bleu-500); /* Information border color */
+  --wcs-semantic-color-border-success: var(--wcs-primitive-color-vert-500); /* Success border color */
+  --wcs-semantic-color-border-action-secondary-hover: var(--wcs-primitive-color-vert-900); /* Hover border color for secondary elements like button, dropdown... */
+  --wcs-semantic-color-border-action-secondary-press: var(--wcs-primitive-color-vert-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-vert-900); /* 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-vert-800); /* 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-vert-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-vert-900); /* 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-vert-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-vert-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-vert-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-500); /* Default information background color */
+  --wcs-semantic-color-background-action-information-hover: var(--wcs-primitive-color-bleu-600); /* Hovered information background color */
+  --wcs-semantic-color-background-action-information-press: var(--wcs-primitive-color-bleu-600); /* 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-700); /* Default success background color */
+  --wcs-semantic-color-background-action-success-hover: var(--wcs-primitive-color-vert-800); /* Hovered success background color */
+  --wcs-semantic-color-background-action-success-press: var(--wcs-primitive-color-vert-900); /* 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-400); /* Default warning background color */
+  --wcs-semantic-color-background-action-warning-hover: var(--wcs-primitive-color-jaune-500); /* Hovered warning background color */
+  --wcs-semantic-color-background-action-warning-press: var(--wcs-primitive-color-jaune-500); /* 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-vert-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-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-500); /* 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-700); /* 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-jaune-400); /* Default warning background color */
+  --wcs-semantic-color-background-surface-warning-light: var(--wcs-primitive-color-jaune-300); /* Light warning background color */
+  --wcs-semantic-color-background-surface-warning-lighter: var(--wcs-primitive-color-jaune-200); /* Lighter warning background color */
+  --wcs-semantic-color-background-surface-warning-lightest: var(--wcs-primitive-color-jaune-100); /* Lightest warning background color */
+  --wcs-semantic-color-background-surface-accent-light: var(--wcs-primitive-color-vert-300); /* Light accent background color, used by nav-item indicator and grid rows */
+  --wcs-semantic-color-background-surface-accent-lighter: var(--wcs-primitive-color-vert-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-vert-100); /* Lightest accent background color, used by segmented-button background (radio options) */
+  --wcs-semantic-color-background-surface-accent-dark: var(--wcs-primitive-color-vert-600); /* Dark accent background color */
+  --wcs-semantic-color-background-surface-accent-darker: var(--wcs-primitive-color-vert-700); /* Darker accent background color */
+  --wcs-semantic-color-background-surface-accent-darkest: var(--wcs-primitive-color-vert-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-500); /* Warning foreground color */
+  --wcs-semantic-color-foreground-information: var(--wcs-primitive-color-bleu-500); /* 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-vert-900); /* 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-vert-900); /* The layer on top of a secondary background when hovered */
+  --wcs-semantic-color-foreground-action-secondary-press: var(--wcs-primitive-color-vert-900); /* The layer on top of a secondary background when pressed */
+  --wcs-semantic-color-foreground-action-tertiary-hover: var(--wcs-primitive-color-vert-900); /* The layer on top of a tertiary background when hovered */
+  --wcs-semantic-color-foreground-action-tertiary-press: var(--wcs-primitive-color-vert-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-hover: var(--wcs-primitive-color-vert-900); /* 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-vert-300);
+    --wcs-switch-dot-color-disabled: var(--wcs-primitive-color-neutral-600);
+}
+
+:root wcs-footer {
+    --wcs-footer-background-color: var(--wcs-primitive-color-vert-700);
+}
+
+:root wcs-galactic {
+    --wcs-galactic-background-color: var(--wcs-primitive-color-vert-900);
+}
+
+:root wcs-galactic-menu {
+    --wcs-semantic-color-border-focus-base: var(--wcs-semantic-color-border-focus-base-on-secondary);
+}
+
+/* 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-700);
+    --wcs-semantic-color-background-surface-brand: var(--wcs-primitive-color-vert-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-vert-700);
+    --wcs-semantic-color-foreground-action-tertiary-default: var(--wcs-primitive-color-vert-700);
+
+    --wcs-semantic-color-border-action-secondary-default: var(--wcs-primitive-color-vert-700);
+
+    --wcs-semantic-color-ripple-action-primary: var(--wcs-primitive-color-neutral-0);
+    --wcs-semantic-color-ripple-action-secondary: var(--wcs-primitive-color-vert-700);
+    --wcs-semantic-color-ripple-action-tertiary: var(--wcs-primitive-color-vert-700);
+}
+
+:root .wcs-warning {
+    --wcs-semantic-color-background-action-primary-default: var(--wcs-primitive-color-jaune-400);
+    --wcs-semantic-color-background-surface-brand: var(--wcs-primitive-color-jaune-400);
+
+    --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-400);
+    --wcs-semantic-color-foreground-action-tertiary-default: var(--wcs-primitive-color-jaune-400);
+
+    --wcs-semantic-color-border-action-secondary-default: var(--wcs-primitive-color-jaune-400);
+
+    --wcs-semantic-color-ripple-action-primary: var(--wcs-primitive-color-neutral-800);
+    --wcs-semantic-color-ripple-action-secondary: var(--wcs-primitive-color-jaune-400);
+    --wcs-semantic-color-ripple-action-tertiary: var(--wcs-primitive-color-jaune-400);
+}
+
+:root .wcs-info {
+    --wcs-semantic-color-background-action-primary-default: var(--wcs-primitive-color-bleu-500);
+    --wcs-semantic-color-background-surface-brand: var(--wcs-primitive-color-bleu-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-bleu-500);
+    --wcs-semantic-color-foreground-action-tertiary-default: var(--wcs-primitive-color-bleu-500);
+
+    --wcs-semantic-color-border-action-secondary-default: var(--wcs-primitive-color-bleu-500);
+
+    --wcs-semantic-color-ripple-action-primary: var(--wcs-primitive-color-neutral-0);
+    --wcs-semantic-color-ripple-action-secondary: var(--wcs-primitive-color-bleu-500);
+    --wcs-semantic-color-ripple-action-tertiary: var(--wcs-primitive-color-bleu-500);
+}
+
+:root .wcs-critical {
+    --wcs-semantic-color-background-action-primary-default: var(--wcs-primitive-color-critical-500);
+    --wcs-semantic-color-background-surface-brand: var(--wcs-primitive-color-critical-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-critical-500);
+    --wcs-semantic-color-foreground-action-tertiary-default: var(--wcs-primitive-color-critical-500);
+
+    --wcs-semantic-color-border-action-secondary-default: var(--wcs-primitive-color-critical-500);
+
+    --wcs-semantic-color-ripple-action-primary: var(--wcs-primitive-color-neutral-0);
+    --wcs-semantic-color-ripple-action-secondary: var(--wcs-primitive-color-critical-500);
+    --wcs-semantic-color-ripple-action-tertiary: var(--wcs-primitive-color-critical-500);
+}
+
+/* wcs-danger is deprecated, use wcs-critical instead */
+:root .wcs-danger {
+    --wcs-semantic-color-background-action-primary-default: var(--wcs-primitive-color-critical-500);
+    --wcs-semantic-color-background-surface-brand: var(--wcs-primitive-color-critical-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-critical-500);
+    --wcs-semantic-color-foreground-action-tertiary-default: var(--wcs-primitive-color-critical-500);
+
+    --wcs-semantic-color-border-action-secondary-default: var(--wcs-primitive-color-critical-500);
+
+    --wcs-semantic-color-ripple-action-primary: var(--wcs-primitive-color-neutral-0);
+    --wcs-semantic-color-ripple-action-secondary: var(--wcs-primitive-color-critical-500);
+    --wcs-semantic-color-ripple-action-tertiary: var(--wcs-primitive-color-critical-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);
+}