🐛(tokens) fix token issue

Fix differences between Figma variables and existing tokens. Warned by
color constrast a11y check that failed.

.changeset/dirty-turkeys-bow.md

@@ -0,0 +1,5 @@
+---
+"@gouvfr-lasuite/cunningham-tokens": minor
+---
+
+Fix inconsistency between cunningham tokens and figma variables

packages/tokens/src/bin/cunningham.ts

@@ -346,6 +346,8 @@ const spacings = {
   t: "0.5rem",
   st: "0.25rem",
   "4xs": "0.125rem",
+  "3xs": "0.25rem",
+  "2xs": "0.375rem",
   xxxs: "0.25rem",
   xxs: "0.375rem",
   xs: "0.5rem",
@@ -356,6 +358,8 @@ const spacings = {
   xl: "2.5rem",
   xxl: "3rem",
   xxxl: "3.5rem",
+  "2xl": "3rem",
+  "3xl": "3.5rem",
   "4xl": "4rem",
   "5xl": "4.5rem",
   "6xl": "6rem",
@@ -429,6 +433,14 @@ export const contextuaDefault = {
       tertiary: "ref(globals.colors.gray-025)",
     },
     semantic: {
+      overlay: {
+        primary: "ref(globals.colors.black-050)",
+        "primary-hover": "ref(globals.colors.black-100)",
+      },
+      contextual: {
+        primary: "ref(globals.colors.black-050)",
+        "primary-hover": "ref(globals.colors.black-100)",
+      },
       brand: {
         primary: "ref(globals.colors.brand-550)",
         "primary-hover": "ref(globals.colors.brand-650)",
@@ -445,10 +457,6 @@ export const contextuaDefault = {
         tertiary: "ref(globals.colors.gray-050)",
         "tertiary-hover": "ref(globals.colors.gray-100)",
       },
-      contextual: {
-        primary: "ref(globals.colors.black-050)",
-        "primary-hover": "ref(globals.colors.black-100)",
-      },
       info: {
         primary: "ref(globals.colors.info-550)",
         "primary-hover": "ref(globals.colors.info-650)",
@@ -551,43 +559,46 @@ export const contextuaDefault = {
     logo1: "ref(globals.colors.logo-1)",
     logo2: "ref(globals.colors.logo-2)",
     semantic: {
+      contextual: {
+        primary: "ref(globals.colors.white-950)",
+      },
+      overlay: {
+        primary: "ref(globals.colors.white-950)",
+      },
       brand: {
         primary: "ref(globals.colors.brand-700)",
         secondary: "ref(globals.colors.brand-600)",
-        tertiary: "ref(globals.colors.brand-500)",
+        tertiary: "ref(globals.colors.brand-550)",
         "on-brand": "ref(globals.colors.brand-050)",
       },
       neutral: {
         primary: "ref(globals.colors.gray-850)",
         secondary: "ref(globals.colors.gray-600)",
-        tertiary: "ref(globals.colors.gray-500)",
+        tertiary: "ref(globals.colors.gray-550)",
         "on-neutral": "ref(globals.colors.gray-050)",
       },
-      contextual: {
-        primary: "ref(globals.colors.white-950)",
-      },
       info: {
         primary: "ref(globals.colors.info-700)",
         secondary: "ref(globals.colors.info-600)",
-        tertiary: "ref(globals.colors.info-500)",
+        tertiary: "ref(globals.colors.info-550)",
         "on-info": "ref(globals.colors.info-050)",
       },
       success: {
         primary: "ref(globals.colors.success-700)",
         secondary: "ref(globals.colors.success-600)",
-        tertiary: "ref(globals.colors.success-500)",
+        tertiary: "ref(globals.colors.success-550)",
         "on-success": "ref(globals.colors.success-050)",
       },
       warning: {
         primary: "ref(globals.colors.warning-700)",
         secondary: "ref(globals.colors.warning-600)",
-        tertiary: "ref(globals.colors.warning-500)",
+        tertiary: "ref(globals.colors.warning-550)",
         "on-warning": "ref(globals.colors.warning-050)",
       },
       error: {
         primary: "ref(globals.colors.error-700)",
         secondary: "ref(globals.colors.error-600)",
-        tertiary: "ref(globals.colors.error-500)",
+        tertiary: "ref(globals.colors.error-550)",
         "on-error": "ref(globals.colors.error-050)",
       },
       disabled: {
@@ -598,58 +609,36 @@ export const contextuaDefault = {
     palette: {
       brand: {
         primary: "ref(globals.colors.brand-500)",
-        secondary: "ref(globals.colors.brand-350)",
-        tertiary: "ref(globals.colors.brand-150)",
       },
       red: {
         primary: "ref(globals.colors.red-500)",
-        secondary: "ref(globals.colors.red-350)",
-        tertiary: "ref(globals.colors.red-150)",
       },
       orange: {
         primary: "ref(globals.colors.orange-500)",
-        secondary: "ref(globals.colors.orange-350)",
-        tertiary: "ref(globals.colors.orange-150)",
       },
       brown: {
         primary: "ref(globals.colors.brown-500)",
-        secondary: "ref(globals.colors.brown-350)",
-        tertiary: "ref(globals.colors.brown-150)",
       },
       yellow: {
         primary: "ref(globals.colors.yellow-500)",
-        secondary: "ref(globals.colors.yellow-350)",
-        tertiary: "ref(globals.colors.yellow-150)",
       },
       green: {
         primary: "ref(globals.colors.green-500)",
-        secondary: "ref(globals.colors.green-350)",
-        tertiary: "ref(globals.colors.green-150)",
       },
       "blue-1": {
         primary: "ref(globals.colors.blue-1-500)",
-        secondary: "ref(globals.colors.blue-1-350)",
-        tertiary: "ref(globals.colors.blue-1-150)",
       },
       "blue-2": {
         primary: "ref(globals.colors.blue-2-500)",
-        secondary: "ref(globals.colors.blue-2-350)",
-        tertiary: "ref(globals.colors.blue-2-150)",
       },
       purple: {
         primary: "ref(globals.colors.purple-500)",
-        secondary: "ref(globals.colors.purple-350)",
-        tertiary: "ref(globals.colors.purple-150)",
       },
       pink: {
         primary: "ref(globals.colors.pink-500)",
-        secondary: "ref(globals.colors.pink-350)",
-        tertiary: "ref(globals.colors.pink-150)",
       },
       gray: {
         primary: "ref(globals.colors.gray-500)",
-        secondary: "ref(globals.colors.gray-350)",
-        tertiary: "ref(globals.colors.gray-150)",
       },
     },
   },
@@ -658,14 +647,17 @@ export const contextuaDefault = {
       primary: "ref(globals.colors.gray-100)",
     },
     semantic: {
+      contextual: {
+        primary: "ref(globals.colors.white-200)",
+      },
+      overlay: {
+        primary: "ref(globals.colors.white-200)",
+      },
       brand: {
         primary: "ref(globals.colors.brand-550)",
         secondary: "ref(globals.colors.brand-300)",
         tertiary: "ref(globals.colors.brand-150)",
       },
-      contextual: {
-        primary: "ref(globals.colors.white-200)",
-      },
       neutral: {
         primary: "ref(globals.colors.gray-550)",
         secondary: "ref(globals.colors.gray-300)",
@@ -695,63 +687,6 @@ export const contextuaDefault = {
         primary: "ref(globals.colors.gray-100)",
       },
     },
-    palette: {
-      brand: {
-        primary: "ref(globals.colors.brand-500)",
-        secondary: "ref(globals.colors.brand-350)",
-        tertiary: "ref(globals.colors.brand-150)",
-      },
-      red: {
-        primary: "ref(globals.colors.red-500)",
-        secondary: "ref(globals.colors.red-350)",
-        tertiary: "ref(globals.colors.red-150)",
-      },
-      orange: {
-        primary: "ref(globals.colors.orange-500)",
-        secondary: "ref(globals.colors.orange-350)",
-        tertiary: "ref(globals.colors.orange-150)",
-      },
-      brown: {
-        primary: "ref(globals.colors.brown-500)",
-        secondary: "ref(globals.colors.brown-350)",
-        tertiary: "ref(globals.colors.brown-150)",
-      },
-      yellow: {
-        primary: "ref(globals.colors.yellow-500)",
-        secondary: "ref(globals.colors.yellow-350)",
-        tertiary: "ref(globals.colors.yellow-150)",
-      },
-      green: {
-        primary: "ref(globals.colors.green-500)",
-        secondary: "ref(globals.colors.green-350)",
-        tertiary: "ref(globals.colors.green-150)",
-      },
-      "blue-1": {
-        primary: "ref(globals.colors.blue-1-500)",
-        secondary: "ref(globals.colors.blue-1-350)",
-        tertiary: "ref(globals.colors.blue-1-150)",
-      },
-      "blue-2": {
-        primary: "ref(globals.colors.blue-2-500)",
-        secondary: "ref(globals.colors.blue-2-350)",
-        tertiary: "ref(globals.colors.blue-2-150)",
-      },
-      purple: {
-        primary: "ref(globals.colors.purple-500)",
-        secondary: "ref(globals.colors.purple-350)",
-        tertiary: "ref(globals.colors.purple-150)",
-      },
-      pink: {
-        primary: "ref(globals.colors.pink-500)",
-        secondary: "ref(globals.colors.pink-350)",
-        tertiary: "ref(globals.colors.pink-150)",
-      },
-      gray: {
-        primary: "ref(globals.colors.gray-500)",
-        secondary: "ref(globals.colors.gray-350)",
-        tertiary: "ref(globals.colors.gray-150)",
-      },
-    },
   },
 };
 const defaultTheme = {
@@ -768,6 +703,14 @@ export const contextualDarkTokens = {
       tertiary: "ref(globals.colors.gray-900)",
     },
     semantic: {
+      contextual: {
+        primary: "ref(globals.colors.white-050)",
+        "primary-hover": "ref(globals.colors.white-100)",
+      },
+      overlay: {
+        primary: "ref(globals.colors.white-050)",
+        "primary-hover": "ref(globals.colors.white-100)",
+      },
       brand: {
         primary: "ref(globals.colors.brand-550)",
         "primary-hover": "ref(globals.colors.brand-650)",
@@ -784,10 +727,6 @@ export const contextualDarkTokens = {
         tertiary: "ref(globals.colors.gray-750)",
         "tertiary-hover": "ref(globals.colors.gray-800)",
       },
-      contextual: {
-        primary: "ref(globals.colors.white-050)",
-        "primary-hover": "ref(globals.colors.white-100)",
-      },
       info: {
         primary: "ref(globals.colors.info-550)",
         "primary-hover": "ref(globals.colors.info-650)",
@@ -887,6 +826,12 @@ export const contextualDarkTokens = {
     logo1: "ref(globals.colors.logo-1-dark)",
     logo2: "ref(globals.colors.logo-2-dark)",
     semantic: {
+      contextual: {
+        primary: "ref(globals.colors.black-850)",
+      },
+      overlay: {
+        primary: "ref(globals.colors.black-850)",
+      },
       brand: {
         primary: "ref(globals.colors.brand-050)",
         secondary: "ref(globals.colors.brand-100)",
@@ -899,9 +844,6 @@ export const contextualDarkTokens = {
         tertiary: "ref(globals.colors.gray-250)",
         "on-neutral": "ref(globals.colors.gray-050)",
       },
-      contextual: {
-        primary: "ref(globals.colors.black-850)",
-      },
       info: {
         primary: "ref(globals.colors.info-050)",
         secondary: "ref(globals.colors.info-100)",
@@ -933,59 +875,37 @@ export const contextualDarkTokens = {
     },
     palette: {
       brand: {
-        primary: "ref(globals.colors.brand-350)",
+        primary: "ref(globals.colors.brand-500)",
-        secondary: "ref(globals.colors.brand-450)",
-        tertiary: "ref(globals.colors.brand-550)",
       },
       red: {
-        primary: "ref(globals.colors.red-350)",
+        primary: "ref(globals.colors.red-500)",
-        secondary: "ref(globals.colors.red-450)",
-        tertiary: "ref(globals.colors.red-550)",
       },
       orange: {
-        primary: "ref(globals.colors.orange-350)",
+        primary: "ref(globals.colors.orange-500)",
-        secondary: "ref(globals.colors.orange-450)",
-        tertiary: "ref(globals.colors.orange-550)",
       },
       brown: {
-        primary: "ref(globals.colors.brown-350)",
+        primary: "ref(globals.colors.brown-500)",
-        secondary: "ref(globals.colors.brown-450)",
-        tertiary: "ref(globals.colors.brown-550)",
       },
       yellow: {
-        primary: "ref(globals.colors.yellow-350)",
+        primary: "ref(globals.colors.yellow-500)",
-        secondary: "ref(globals.colors.yellow-450)",
-        tertiary: "ref(globals.colors.yellow-550)",
       },
       green: {
-        primary: "ref(globals.colors.green-350)",
+        primary: "ref(globals.colors.green-500)",
-        secondary: "ref(globals.colors.green-450)",
-        tertiary: "ref(globals.colors.green-550)",
       },
       "blue-1": {
-        primary: "ref(globals.colors.blue-1-350)",
+        primary: "ref(globals.colors.blue-1-500)",
-        secondary: "ref(globals.colors.blue-1-450)",
-        tertiary: "ref(globals.colors.blue-1-550)",
       },
       "blue-2": {
-        primary: "ref(globals.colors.blue-2-350)",
+        primary: "ref(globals.colors.blue-2-500)",
-        secondary: "ref(globals.colors.blue-2-450)",
-        tertiary: "ref(globals.colors.blue-2-550)",
       },
       purple: {
-        primary: "ref(globals.colors.purple-350)",
+        primary: "ref(globals.colors.purple-500)",
-        secondary: "ref(globals.colors.purple-450)",
-        tertiary: "ref(globals.colors.purple-550)",
       },
       pink: {
-        primary: "ref(globals.colors.pink-350)",
+        primary: "ref(globals.colors.pink-500)",
-        secondary: "ref(globals.colors.pink-450)",
-        tertiary: "ref(globals.colors.pink-550)",
       },
       gray: {
-        primary: "ref(globals.colors.gray-350)",
+        primary: "ref(globals.colors.gray-500)",
-        secondary: "ref(globals.colors.gray-450)",
-        tertiary: "ref(globals.colors.gray-550)",
       },
     },
   },
@@ -994,14 +914,17 @@ export const contextualDarkTokens = {
       primary: "ref(globals.colors.gray-750)",
     },
     semantic: {
+      contextual: {
+        primary: "ref(globals.colors.black-200)",
+      },
+      overlay: {
+        primary: "ref(globals.colors.black-200)",
+      },
       brand: {
         primary: "ref(globals.colors.brand-450)",
         secondary: "ref(globals.colors.brand-600)",
         tertiary: "ref(globals.colors.brand-700)",
       },
-      contextual: {
-        primary: "ref(globals.colors.black-200)",
-      },
       neutral: {
         primary: "ref(globals.colors.gray-450)",
         secondary: "ref(globals.colors.gray-600)",
@@ -1031,63 +954,6 @@ export const contextualDarkTokens = {
         primary: "ref(globals.colors.gray-800)",
       },
     },
-    palette: {
-      brand: {
-        primary: "ref(globals.colors.brand-350)",
-        secondary: "ref(globals.colors.brand-450)",
-        tertiary: "ref(globals.colors.brand-550)",
-      },
-      red: {
-        primary: "ref(globals.colors.red-350)",
-        secondary: "ref(globals.colors.red-450)",
-        tertiary: "ref(globals.colors.red-550)",
-      },
-      orange: {
-        primary: "ref(globals.colors.orange-350)",
-        secondary: "ref(globals.colors.orange-450)",
-        tertiary: "ref(globals.colors.orange-550)",
-      },
-      brown: {
-        primary: "ref(globals.colors.brown-350)",
-        secondary: "ref(globals.colors.brown-450)",
-        tertiary: "ref(globals.colors.brown-550)",
-      },
-      yellow: {
-        primary: "ref(globals.colors.yellow-350)",
-        secondary: "ref(globals.colors.yellow-450)",
-        tertiary: "ref(globals.colors.yellow-550)",
-      },
-      green: {
-        primary: "ref(globals.colors.green-350)",
-        secondary: "ref(globals.colors.green-450)",
-        tertiary: "ref(globals.colors.green-550)",
-      },
-      "blue-1": {
-        primary: "ref(globals.colors.blue-1-350)",
-        secondary: "ref(globals.colors.blue-1-450)",
-        tertiary: "ref(globals.colors.blue-1-550)",
-      },
-      "blue-2": {
-        primary: "ref(globals.colors.blue-2-350)",
-        secondary: "ref(globals.colors.blue-2-450)",
-        tertiary: "ref(globals.colors.blue-2-550)",
-      },
-      purple: {
-        primary: "ref(globals.colors.purple-350)",
-        secondary: "ref(globals.colors.purple-450)",
-        tertiary: "ref(globals.colors.purple-550)",
-      },
-      pink: {
-        primary: "ref(globals.colors.pink-350)",
-        secondary: "ref(globals.colors.pink-450)",
-        tertiary: "ref(globals.colors.pink-550)",
-      },
-      gray: {
-        primary: "ref(globals.colors.gray-350)",
-        secondary: "ref(globals.colors.gray-450)",
-        tertiary: "ref(globals.colors.gray-550)",
-      },
-    },
   },
 };
 
@@ -1096,336 +962,8 @@ export default {
     default: defaultTheme,
     dark: {
       globals,
-      contextuals: {
+      contextuals: contextualDarkTokens,
-        background: {
+      components: {},
-          surface: {
-            primary: "ref(globals.colors.gray-800)",
-            secondary: "ref(globals.colors.gray-850)",
-            tertiary: "ref(globals.colors.gray-900)",
-          },
-          semantic: {
-            brand: {
-              primary: "ref(globals.colors.brand-550)",
-              "primary-hover": "ref(globals.colors.brand-650)",
-              secondary: "ref(globals.colors.brand-700)",
-              "secondary-hover": "ref(globals.colors.brand-750)",
-              tertiary: "ref(globals.colors.brand-750)",
-              "tertiary-hover": "ref(globals.colors.brand-800)",
-            },
-            neutral: {
-              primary: "ref(globals.colors.gray-550)",
-              "primary-hover": "ref(globals.colors.gray-650)",
-              secondary: "ref(globals.colors.gray-700)",
-              "secondary-hover": "ref(globals.colors.gray-750)",
-              tertiary: "ref(globals.colors.gray-750)",
-              "tertiary-hover": "ref(globals.colors.gray-800)",
-            },
-            contextual: {
-              primary: "ref(globals.colors.white-050)",
-              "primary-hover": "ref(globals.colors.white-100)",
-            },
-            info: {
-              primary: "ref(globals.colors.info-550)",
-              "primary-hover": "ref(globals.colors.info-650)",
-              secondary: "ref(globals.colors.info-700)",
-              "secondary-hover": "ref(globals.colors.info-750)",
-              tertiary: "ref(globals.colors.info-750)",
-              "tertiary-hover": "ref(globals.colors.info-800)",
-            },
-            success: {
-              primary: "ref(globals.colors.success-550)",
-              "primary-hover": "ref(globals.colors.success-650)",
-              secondary: "ref(globals.colors.success-700)",
-              "secondary-hover": "ref(globals.colors.success-750)",
-              tertiary: "ref(globals.colors.success-750)",
-              "tertiary-hover": "ref(globals.colors.success-800)",
-            },
-            warning: {
-              primary: "ref(globals.colors.warning-550)",
-              "primary-hover": "ref(globals.colors.warning-650)",
-              secondary: "ref(globals.colors.warning-700)",
-              "secondary-hover": "ref(globals.colors.warning-750)",
-              tertiary: "ref(globals.colors.warning-750)",
-              "tertiary-hover": "ref(globals.colors.warning-800)",
-            },
-            error: {
-              primary: "ref(globals.colors.error-550)",
-              "primary-hover": "ref(globals.colors.error-650)",
-              secondary: "ref(globals.colors.error-700)",
-              "secondary-hover": "ref(globals.colors.error-750)",
-              tertiary: "ref(globals.colors.error-750)",
-              "tertiary-hover": "ref(globals.colors.error-800)",
-            },
-            disabled: {
-              primary: "ref(globals.colors.gray-750)",
-              secondary: "ref(globals.colors.gray-800)",
-            },
-          },
-          palette: {
-            brand: {
-              primary: "ref(globals.colors.brand-350)",
-              secondary: "ref(globals.colors.brand-450)",
-              tertiary: "ref(globals.colors.brand-550)",
-            },
-            red: {
-              primary: "ref(globals.colors.red-350)",
-              secondary: "ref(globals.colors.red-450)",
-              tertiary: "ref(globals.colors.red-550)",
-            },
-            orange: {
-              primary: "ref(globals.colors.orange-350)",
-              secondary: "ref(globals.colors.orange-450)",
-              tertiary: "ref(globals.colors.orange-550)",
-            },
-            brown: {
-              primary: "ref(globals.colors.brown-350)",
-              secondary: "ref(globals.colors.brown-450)",
-              tertiary: "ref(globals.colors.brown-550)",
-            },
-            yellow: {
-              primary: "ref(globals.colors.yellow-350)",
-              secondary: "ref(globals.colors.yellow-450)",
-              tertiary: "ref(globals.colors.yellow-550)",
-            },
-            green: {
-              primary: "ref(globals.colors.green-350)",
-              secondary: "ref(globals.colors.green-450)",
-              tertiary: "ref(globals.colors.green-550)",
-            },
-            "blue-1": {
-              primary: "ref(globals.colors.blue-1-350)",
-              secondary: "ref(globals.colors.blue-1-450)",
-              tertiary: "ref(globals.colors.blue-1-550)",
-            },
-            "blue-2": {
-              primary: "ref(globals.colors.blue-2-350)",
-              secondary: "ref(globals.colors.blue-2-450)",
-              tertiary: "ref(globals.colors.blue-2-550)",
-            },
-            purple: {
-              primary: "ref(globals.colors.purple-350)",
-              secondary: "ref(globals.colors.purple-450)",
-              tertiary: "ref(globals.colors.purple-550)",
-            },
-            pink: {
-              primary: "ref(globals.colors.pink-350)",
-              secondary: "ref(globals.colors.pink-450)",
-              tertiary: "ref(globals.colors.pink-550)",
-            },
-            gray: {
-              primary: "ref(globals.colors.gray-350)",
-              secondary: "ref(globals.colors.gray-450)",
-              tertiary: "ref(globals.colors.gray-550)",
-            },
-          },
-        },
-        content: {
-          logo1: "ref(globals.colors.logo-1-dark)",
-          logo2: "ref(globals.colors.logo-2-dark)",
-          semantic: {
-            brand: {
-              primary: "ref(globals.colors.brand-050)",
-              secondary: "ref(globals.colors.brand-100)",
-              tertiary: "ref(globals.colors.brand-250)",
-              "on-brand": "ref(globals.colors.brand-050)",
-            },
-            neutral: {
-              primary: "ref(globals.colors.gray-050)",
-              secondary: "ref(globals.colors.gray-100)",
-              tertiary: "ref(globals.colors.gray-250)",
-              "on-neutral": "ref(globals.colors.gray-050)",
-            },
-            contextual: {
-              primary: "ref(globals.colors.black-850)",
-            },
-            info: {
-              primary: "ref(globals.colors.info-050)",
-              secondary: "ref(globals.colors.info-100)",
-              tertiary: "ref(globals.colors.info-250)",
-              "on-info": "ref(globals.colors.info-050)",
-            },
-            success: {
-              primary: "ref(globals.colors.success-050)",
-              secondary: "ref(globals.colors.success-100)",
-              tertiary: "ref(globals.colors.success-250)",
-              "on-success": "ref(globals.colors.success-050)",
-            },
-            warning: {
-              primary: "ref(globals.colors.warning-050)",
-              secondary: "ref(globals.colors.warning-100)",
-              tertiary: "ref(globals.colors.warning-250)",
-              "on-warning": "ref(globals.colors.warning-050)",
-            },
-            error: {
-              primary: "ref(globals.colors.error-050)",
-              secondary: "ref(globals.colors.error-100)",
-              tertiary: "ref(globals.colors.error-250)",
-              "on-error": "ref(globals.colors.error-050)",
-            },
-            disabled: {
-              primary: "ref(globals.colors.gray-600)",
-              secondary: "ref(globals.colors.black-300)",
-            },
-          },
-          palette: {
-            brand: {
-              primary: "ref(globals.colors.brand-350)",
-              secondary: "ref(globals.colors.brand-450)",
-              tertiary: "ref(globals.colors.brand-550)",
-            },
-            red: {
-              primary: "ref(globals.colors.red-350)",
-              secondary: "ref(globals.colors.red-450)",
-              tertiary: "ref(globals.colors.red-550)",
-            },
-            orange: {
-              primary: "ref(globals.colors.orange-350)",
-              secondary: "ref(globals.colors.orange-450)",
-              tertiary: "ref(globals.colors.orange-550)",
-            },
-            brown: {
-              primary: "ref(globals.colors.brown-350)",
-              secondary: "ref(globals.colors.brown-450)",
-              tertiary: "ref(globals.colors.brown-550)",
-            },
-            yellow: {
-              primary: "ref(globals.colors.yellow-350)",
-              secondary: "ref(globals.colors.yellow-450)",
-              tertiary: "ref(globals.colors.yellow-550)",
-            },
-            green: {
-              primary: "ref(globals.colors.green-350)",
-              secondary: "ref(globals.colors.green-450)",
-              tertiary: "ref(globals.colors.green-550)",
-            },
-            "blue-1": {
-              primary: "ref(globals.colors.blue-1-350)",
-              secondary: "ref(globals.colors.blue-1-450)",
-              tertiary: "ref(globals.colors.blue-1-550)",
-            },
-            "blue-2": {
-              primary: "ref(globals.colors.blue-2-350)",
-              secondary: "ref(globals.colors.blue-2-450)",
-              tertiary: "ref(globals.colors.blue-2-550)",
-            },
-            purple: {
-              primary: "ref(globals.colors.purple-350)",
-              secondary: "ref(globals.colors.purple-450)",
-              tertiary: "ref(globals.colors.purple-550)",
-            },
-            pink: {
-              primary: "ref(globals.colors.pink-350)",
-              secondary: "ref(globals.colors.pink-450)",
-              tertiary: "ref(globals.colors.pink-550)",
-            },
-            gray: {
-              primary: "ref(globals.colors.gray-350)",
-              secondary: "ref(globals.colors.gray-450)",
-              tertiary: "ref(globals.colors.gray-550)",
-            },
-          },
-        },
-        border: {
-          surface: {
-            primary: "ref(globals.colors.gray-750)",
-          },
-          semantic: {
-            brand: {
-              primary: "ref(globals.colors.brand-450)",
-              secondary: "ref(globals.colors.brand-600)",
-              tertiary: "ref(globals.colors.brand-700)",
-            },
-            contextual: {
-              primary: "ref(globals.colors.black-200)",
-            },
-            neutral: {
-              primary: "ref(globals.colors.gray-450)",
-              secondary: "ref(globals.colors.gray-600)",
-              tertiary: "ref(globals.colors.gray-700)",
-            },
-            info: {
-              primary: "ref(globals.colors.info-450)",
-              secondary: "ref(globals.colors.info-600)",
-              tertiary: "ref(globals.colors.info-700)",
-            },
-            success: {
-              primary: "ref(globals.colors.success-450)",
-              secondary: "ref(globals.colors.success-600)",
-              tertiary: "ref(globals.colors.success-700)",
-            },
-            warning: {
-              primary: "ref(globals.colors.warning-450)",
-              secondary: "ref(globals.colors.warning-600)",
-              tertiary: "ref(globals.colors.warning-700)",
-            },
-            error: {
-              primary: "ref(globals.colors.error-450)",
-              secondary: "ref(globals.colors.error-600)",
-              tertiary: "ref(globals.colors.error-700)",
-            },
-            disabled: {
-              primary: "ref(globals.colors.gray-800)",
-            },
-          },
-          palette: {
-            brand: {
-              primary: "ref(globals.colors.brand-350)",
-              secondary: "ref(globals.colors.brand-450)",
-              tertiary: "ref(globals.colors.brand-550)",
-            },
-            red: {
-              primary: "ref(globals.colors.red-350)",
-              secondary: "ref(globals.colors.red-450)",
-              tertiary: "ref(globals.colors.red-550)",
-            },
-            orange: {
-              primary: "ref(globals.colors.orange-350)",
-              secondary: "ref(globals.colors.orange-450)",
-              tertiary: "ref(globals.colors.orange-550)",
-            },
-            brown: {
-              primary: "ref(globals.colors.brown-350)",
-              secondary: "ref(globals.colors.brown-450)",
-              tertiary: "ref(globals.colors.brown-550)",
-            },
-            yellow: {
-              primary: "ref(globals.colors.yellow-350)",
-              secondary: "ref(globals.colors.yellow-450)",
-              tertiary: "ref(globals.colors.yellow-550)",
-            },
-            green: {
-              primary: "ref(globals.colors.green-350)",
-              secondary: "ref(globals.colors.green-450)",
-              tertiary: "ref(globals.colors.green-550)",
-            },
-            "blue-1": {
-              primary: "ref(globals.colors.blue-1-350)",
-              secondary: "ref(globals.colors.blue-1-450)",
-              tertiary: "ref(globals.colors.blue-1-550)",
-            },
-            "blue-2": {
-              primary: "ref(globals.colors.blue-2-350)",
-              secondary: "ref(globals.colors.blue-2-450)",
-              tertiary: "ref(globals.colors.blue-2-550)",
-            },
-            purple: {
-              primary: "ref(globals.colors.purple-350)",
-              secondary: "ref(globals.colors.purple-450)",
-              tertiary: "ref(globals.colors.purple-550)",
-            },
-            pink: {
-              primary: "ref(globals.colors.pink-350)",
-              secondary: "ref(globals.colors.pink-450)",
-              tertiary: "ref(globals.colors.pink-550)",
-            },
-            gray: {
-              primary: "ref(globals.colors.gray-350)",
-              secondary: "ref(globals.colors.gray-450)",
-              tertiary: "ref(globals.colors.gray-550)",
-            },
-          },
-        },
-      },
     },
   },
 };

packages/tokens/src/bin/tests/Cunningham.spec.ts

@@ -535,6 +535,8 @@ describe("Cunningham Bin", () => {
 	--c--globals--spacings--t: 0.5rem;
 	--c--globals--spacings--st: 0.25rem;
 	--c--globals--spacings--4xs: 0.125rem;
+	--c--globals--spacings--3xs: 0.25rem;
+	--c--globals--spacings--2xs: 0.375rem;
 	--c--globals--spacings--xxxs: 0.25rem;
 	--c--globals--spacings--xxs: 0.375rem;
 	--c--globals--spacings--xs: 0.5rem;
@@ -545,6 +547,8 @@ describe("Cunningham Bin", () => {
 	--c--globals--spacings--xl: 2.5rem;
 	--c--globals--spacings--xxl: 3rem;
 	--c--globals--spacings--xxxl: 3.5rem;
+	--c--globals--spacings--2xl: 3rem;
+	--c--globals--spacings--3xl: 3.5rem;
 	--c--globals--spacings--4xl: 4rem;
 	--c--globals--spacings--5xl: 4.5rem;
 	--c--globals--spacings--6xl: 6rem;
@@ -558,6 +562,10 @@ describe("Cunningham Bin", () => {
 	--c--contextuals--background--surface--primary: var(--c--globals--colors--gray-000);
 	--c--contextuals--background--surface--secondary: var(--c--globals--colors--gray-000);
 	--c--contextuals--background--surface--tertiary: var(--c--globals--colors--gray-025);
+	--c--contextuals--background--semantic--overlay--primary: var(--c--globals--colors--black-050);
+	--c--contextuals--background--semantic--overlay--primary-hover: var(--c--globals--colors--black-100);
+	--c--contextuals--background--semantic--contextual--primary: var(--c--globals--colors--black-050);
+	--c--contextuals--background--semantic--contextual--primary-hover: var(--c--globals--colors--black-100);
 	--c--contextuals--background--semantic--brand--primary: var(--c--globals--colors--brand-550);
 	--c--contextuals--background--semantic--brand--primary-hover: var(--c--globals--colors--brand-650);
 	--c--contextuals--background--semantic--brand--secondary: var(--c--globals--colors--brand-100);
@@ -570,8 +578,6 @@ describe("Cunningham Bin", () => {
 	--c--contextuals--background--semantic--neutral--secondary-hover: var(--c--globals--colors--gray-150);
 	--c--contextuals--background--semantic--neutral--tertiary: var(--c--globals--colors--gray-050);
 	--c--contextuals--background--semantic--neutral--tertiary-hover: var(--c--globals--colors--gray-100);
-	--c--contextuals--background--semantic--contextual--primary: var(--c--globals--colors--black-050);
-	--c--contextuals--background--semantic--contextual--primary-hover: var(--c--globals--colors--black-100);
 	--c--contextuals--background--semantic--info--primary: var(--c--globals--colors--info-550);
 	--c--contextuals--background--semantic--info--primary-hover: var(--c--globals--colors--info-650);
 	--c--contextuals--background--semantic--info--secondary: var(--c--globals--colors--info-100);
@@ -634,71 +640,51 @@ describe("Cunningham Bin", () => {
 	--c--contextuals--background--text--primary: var(--c--globals--colors--black-050);
 	--c--contextuals--content--logo1: var(--c--globals--colors--logo-1);
 	--c--contextuals--content--logo2: var(--c--globals--colors--logo-2);
+	--c--contextuals--content--semantic--contextual--primary: var(--c--globals--colors--white-950);
+	--c--contextuals--content--semantic--overlay--primary: var(--c--globals--colors--white-950);
 	--c--contextuals--content--semantic--brand--primary: var(--c--globals--colors--brand-700);
 	--c--contextuals--content--semantic--brand--secondary: var(--c--globals--colors--brand-600);
-	--c--contextuals--content--semantic--brand--tertiary: var(--c--globals--colors--brand-500);
+	--c--contextuals--content--semantic--brand--tertiary: var(--c--globals--colors--brand-550);
 	--c--contextuals--content--semantic--brand--on-brand: var(--c--globals--colors--brand-050);
 	--c--contextuals--content--semantic--neutral--primary: var(--c--globals--colors--gray-850);
 	--c--contextuals--content--semantic--neutral--secondary: var(--c--globals--colors--gray-600);
-	--c--contextuals--content--semantic--neutral--tertiary: var(--c--globals--colors--gray-500);
+	--c--contextuals--content--semantic--neutral--tertiary: var(--c--globals--colors--gray-550);
 	--c--contextuals--content--semantic--neutral--on-neutral: var(--c--globals--colors--gray-050);
-	--c--contextuals--content--semantic--contextual--primary: var(--c--globals--colors--white-950);
 	--c--contextuals--content--semantic--info--primary: var(--c--globals--colors--info-700);
 	--c--contextuals--content--semantic--info--secondary: var(--c--globals--colors--info-600);
-	--c--contextuals--content--semantic--info--tertiary: var(--c--globals--colors--info-500);
+	--c--contextuals--content--semantic--info--tertiary: var(--c--globals--colors--info-550);
 	--c--contextuals--content--semantic--info--on-info: var(--c--globals--colors--info-050);
 	--c--contextuals--content--semantic--success--primary: var(--c--globals--colors--success-700);
 	--c--contextuals--content--semantic--success--secondary: var(--c--globals--colors--success-600);
-	--c--contextuals--content--semantic--success--tertiary: var(--c--globals--colors--success-500);
+	--c--contextuals--content--semantic--success--tertiary: var(--c--globals--colors--success-550);
 	--c--contextuals--content--semantic--success--on-success: var(--c--globals--colors--success-050);
 	--c--contextuals--content--semantic--warning--primary: var(--c--globals--colors--warning-700);
 	--c--contextuals--content--semantic--warning--secondary: var(--c--globals--colors--warning-600);
-	--c--contextuals--content--semantic--warning--tertiary: var(--c--globals--colors--warning-500);
+	--c--contextuals--content--semantic--warning--tertiary: var(--c--globals--colors--warning-550);
 	--c--contextuals--content--semantic--warning--on-warning: var(--c--globals--colors--warning-050);
 	--c--contextuals--content--semantic--error--primary: var(--c--globals--colors--error-700);
 	--c--contextuals--content--semantic--error--secondary: var(--c--globals--colors--error-600);
-	--c--contextuals--content--semantic--error--tertiary: var(--c--globals--colors--error-500);
+	--c--contextuals--content--semantic--error--tertiary: var(--c--globals--colors--error-550);
 	--c--contextuals--content--semantic--error--on-error: var(--c--globals--colors--error-050);
 	--c--contextuals--content--semantic--disabled--primary: var(--c--globals--colors--gray-300);
 	--c--contextuals--content--semantic--disabled--secondary: var(--c--globals--colors--white-500);
 	--c--contextuals--content--palette--brand--primary: var(--c--globals--colors--brand-500);
-	--c--contextuals--content--palette--brand--secondary: var(--c--globals--colors--brand-350);
-	--c--contextuals--content--palette--brand--tertiary: var(--c--globals--colors--brand-150);
 	--c--contextuals--content--palette--red--primary: var(--c--globals--colors--red-500);
-	--c--contextuals--content--palette--red--secondary: var(--c--globals--colors--red-350);
-	--c--contextuals--content--palette--red--tertiary: var(--c--globals--colors--red-150);
 	--c--contextuals--content--palette--orange--primary: var(--c--globals--colors--orange-500);
-	--c--contextuals--content--palette--orange--secondary: var(--c--globals--colors--orange-350);
-	--c--contextuals--content--palette--orange--tertiary: var(--c--globals--colors--orange-150);
 	--c--contextuals--content--palette--brown--primary: var(--c--globals--colors--brown-500);
-	--c--contextuals--content--palette--brown--secondary: var(--c--globals--colors--brown-350);
-	--c--contextuals--content--palette--brown--tertiary: var(--c--globals--colors--brown-150);
 	--c--contextuals--content--palette--yellow--primary: var(--c--globals--colors--yellow-500);
-	--c--contextuals--content--palette--yellow--secondary: var(--c--globals--colors--yellow-350);
-	--c--contextuals--content--palette--yellow--tertiary: var(--c--globals--colors--yellow-150);
 	--c--contextuals--content--palette--green--primary: var(--c--globals--colors--green-500);
-	--c--contextuals--content--palette--green--secondary: var(--c--globals--colors--green-350);
-	--c--contextuals--content--palette--green--tertiary: var(--c--globals--colors--green-150);
 	--c--contextuals--content--palette--blue-1--primary: var(--c--globals--colors--blue-1-500);
-	--c--contextuals--content--palette--blue-1--secondary: var(--c--globals--colors--blue-1-350);
-	--c--contextuals--content--palette--blue-1--tertiary: var(--c--globals--colors--blue-1-150);
 	--c--contextuals--content--palette--blue-2--primary: var(--c--globals--colors--blue-2-500);
-	--c--contextuals--content--palette--blue-2--secondary: var(--c--globals--colors--blue-2-350);
-	--c--contextuals--content--palette--blue-2--tertiary: var(--c--globals--colors--blue-2-150);
 	--c--contextuals--content--palette--purple--primary: var(--c--globals--colors--purple-500);
-	--c--contextuals--content--palette--purple--secondary: var(--c--globals--colors--purple-350);
-	--c--contextuals--content--palette--purple--tertiary: var(--c--globals--colors--purple-150);
 	--c--contextuals--content--palette--pink--primary: var(--c--globals--colors--pink-500);
-	--c--contextuals--content--palette--pink--secondary: var(--c--globals--colors--pink-350);
-	--c--contextuals--content--palette--pink--tertiary: var(--c--globals--colors--pink-150);
 	--c--contextuals--content--palette--gray--primary: var(--c--globals--colors--gray-500);
-	--c--contextuals--content--palette--gray--secondary: var(--c--globals--colors--gray-350);
-	--c--contextuals--content--palette--gray--tertiary: var(--c--globals--colors--gray-150);
 	--c--contextuals--border--surface--primary: var(--c--globals--colors--gray-100);
+	--c--contextuals--border--semantic--contextual--primary: var(--c--globals--colors--white-200);
+	--c--contextuals--border--semantic--overlay--primary: var(--c--globals--colors--white-200);
 	--c--contextuals--border--semantic--brand--primary: var(--c--globals--colors--brand-550);
 	--c--contextuals--border--semantic--brand--secondary: var(--c--globals--colors--brand-300);
 	--c--contextuals--border--semantic--brand--tertiary: var(--c--globals--colors--brand-150);
-	--c--contextuals--border--semantic--contextual--primary: var(--c--globals--colors--white-200);
 	--c--contextuals--border--semantic--neutral--primary: var(--c--globals--colors--gray-550);
 	--c--contextuals--border--semantic--neutral--secondary: var(--c--globals--colors--gray-300);
 	--c--contextuals--border--semantic--neutral--tertiary: var(--c--globals--colors--gray-150);
@@ -715,39 +701,6 @@ describe("Cunningham Bin", () => {
 	--c--contextuals--border--semantic--error--secondary: var(--c--globals--colors--error-300);
 	--c--contextuals--border--semantic--error--tertiary: var(--c--globals--colors--error-150);
 	--c--contextuals--border--semantic--disabled--primary: var(--c--globals--colors--gray-100);
-	--c--contextuals--border--palette--brand--primary: var(--c--globals--colors--brand-500);
-	--c--contextuals--border--palette--brand--secondary: var(--c--globals--colors--brand-350);
-	--c--contextuals--border--palette--brand--tertiary: var(--c--globals--colors--brand-150);
-	--c--contextuals--border--palette--red--primary: var(--c--globals--colors--red-500);
-	--c--contextuals--border--palette--red--secondary: var(--c--globals--colors--red-350);
-	--c--contextuals--border--palette--red--tertiary: var(--c--globals--colors--red-150);
-	--c--contextuals--border--palette--orange--primary: var(--c--globals--colors--orange-500);
-	--c--contextuals--border--palette--orange--secondary: var(--c--globals--colors--orange-350);
-	--c--contextuals--border--palette--orange--tertiary: var(--c--globals--colors--orange-150);
-	--c--contextuals--border--palette--brown--primary: var(--c--globals--colors--brown-500);
-	--c--contextuals--border--palette--brown--secondary: var(--c--globals--colors--brown-350);
-	--c--contextuals--border--palette--brown--tertiary: var(--c--globals--colors--brown-150);
-	--c--contextuals--border--palette--yellow--primary: var(--c--globals--colors--yellow-500);
-	--c--contextuals--border--palette--yellow--secondary: var(--c--globals--colors--yellow-350);
-	--c--contextuals--border--palette--yellow--tertiary: var(--c--globals--colors--yellow-150);
-	--c--contextuals--border--palette--green--primary: var(--c--globals--colors--green-500);
-	--c--contextuals--border--palette--green--secondary: var(--c--globals--colors--green-350);
-	--c--contextuals--border--palette--green--tertiary: var(--c--globals--colors--green-150);
-	--c--contextuals--border--palette--blue-1--primary: var(--c--globals--colors--blue-1-500);
-	--c--contextuals--border--palette--blue-1--secondary: var(--c--globals--colors--blue-1-350);
-	--c--contextuals--border--palette--blue-1--tertiary: var(--c--globals--colors--blue-1-150);
-	--c--contextuals--border--palette--blue-2--primary: var(--c--globals--colors--blue-2-500);
-	--c--contextuals--border--palette--blue-2--secondary: var(--c--globals--colors--blue-2-350);
-	--c--contextuals--border--palette--blue-2--tertiary: var(--c--globals--colors--blue-2-150);
-	--c--contextuals--border--palette--purple--primary: var(--c--globals--colors--purple-500);
-	--c--contextuals--border--palette--purple--secondary: var(--c--globals--colors--purple-350);
-	--c--contextuals--border--palette--purple--tertiary: var(--c--globals--colors--purple-150);
-	--c--contextuals--border--palette--pink--primary: var(--c--globals--colors--pink-500);
-	--c--contextuals--border--palette--pink--secondary: var(--c--globals--colors--pink-350);
-	--c--contextuals--border--palette--pink--tertiary: var(--c--globals--colors--pink-150);
-	--c--contextuals--border--palette--gray--primary: var(--c--globals--colors--gray-500);
-	--c--contextuals--border--palette--gray--secondary: var(--c--globals--colors--gray-350);
-	--c--contextuals--border--palette--gray--tertiary: var(--c--globals--colors--gray-150);
 	--c--theme--colors--primary: typescript;
 }
 .cunningham-theme--dark{
@@ -1122,6 +1075,8 @@ describe("Cunningham Bin", () => {
 	--c--globals--spacings--t: 0.5rem;
 	--c--globals--spacings--st: 0.25rem;
 	--c--globals--spacings--4xs: 0.125rem;
+	--c--globals--spacings--3xs: 0.25rem;
+	--c--globals--spacings--2xs: 0.375rem;
 	--c--globals--spacings--xxxs: 0.25rem;
 	--c--globals--spacings--xxs: 0.375rem;
 	--c--globals--spacings--xs: 0.5rem;
@@ -1132,6 +1087,8 @@ describe("Cunningham Bin", () => {
 	--c--globals--spacings--xl: 2.5rem;
 	--c--globals--spacings--xxl: 3rem;
 	--c--globals--spacings--xxxl: 3.5rem;
+	--c--globals--spacings--2xl: 3rem;
+	--c--globals--spacings--3xl: 3.5rem;
 	--c--globals--spacings--4xl: 4rem;
 	--c--globals--spacings--5xl: 4.5rem;
 	--c--globals--spacings--6xl: 6rem;
@@ -1145,6 +1102,10 @@ describe("Cunningham Bin", () => {
 	--c--contextuals--background--surface--primary: var(--c--globals--colors--gray-800);
 	--c--contextuals--background--surface--secondary: var(--c--globals--colors--gray-850);
 	--c--contextuals--background--surface--tertiary: var(--c--globals--colors--gray-900);
+	--c--contextuals--background--semantic--contextual--primary: var(--c--globals--colors--white-050);
+	--c--contextuals--background--semantic--contextual--primary-hover: var(--c--globals--colors--white-100);
+	--c--contextuals--background--semantic--overlay--primary: var(--c--globals--colors--white-050);
+	--c--contextuals--background--semantic--overlay--primary-hover: var(--c--globals--colors--white-100);
 	--c--contextuals--background--semantic--brand--primary: var(--c--globals--colors--brand-550);
 	--c--contextuals--background--semantic--brand--primary-hover: var(--c--globals--colors--brand-650);
 	--c--contextuals--background--semantic--brand--secondary: var(--c--globals--colors--brand-700);
@@ -1157,8 +1118,6 @@ describe("Cunningham Bin", () => {
 	--c--contextuals--background--semantic--neutral--secondary-hover: var(--c--globals--colors--gray-750);
 	--c--contextuals--background--semantic--neutral--tertiary: var(--c--globals--colors--gray-750);
 	--c--contextuals--background--semantic--neutral--tertiary-hover: var(--c--globals--colors--gray-800);
-	--c--contextuals--background--semantic--contextual--primary: var(--c--globals--colors--white-050);
-	--c--contextuals--background--semantic--contextual--primary-hover: var(--c--globals--colors--white-100);
 	--c--contextuals--background--semantic--info--primary: var(--c--globals--colors--info-550);
 	--c--contextuals--background--semantic--info--primary-hover: var(--c--globals--colors--info-650);
 	--c--contextuals--background--semantic--info--secondary: var(--c--globals--colors--info-700);
@@ -1220,6 +1179,8 @@ describe("Cunningham Bin", () => {
 	--c--contextuals--background--palette--gray--tertiary: var(--c--globals--colors--gray-550);
 	--c--contextuals--content--logo1: var(--c--globals--colors--logo-1-dark);
 	--c--contextuals--content--logo2: var(--c--globals--colors--logo-2-dark);
+	--c--contextuals--content--semantic--contextual--primary: var(--c--globals--colors--black-850);
+	--c--contextuals--content--semantic--overlay--primary: var(--c--globals--colors--black-850);
 	--c--contextuals--content--semantic--brand--primary: var(--c--globals--colors--brand-050);
 	--c--contextuals--content--semantic--brand--secondary: var(--c--globals--colors--brand-100);
 	--c--contextuals--content--semantic--brand--tertiary: var(--c--globals--colors--brand-250);
@@ -1228,7 +1189,6 @@ describe("Cunningham Bin", () => {
 	--c--contextuals--content--semantic--neutral--secondary: var(--c--globals--colors--gray-100);
 	--c--contextuals--content--semantic--neutral--tertiary: var(--c--globals--colors--gray-250);
 	--c--contextuals--content--semantic--neutral--on-neutral: var(--c--globals--colors--gray-050);
-	--c--contextuals--content--semantic--contextual--primary: var(--c--globals--colors--black-850);
 	--c--contextuals--content--semantic--info--primary: var(--c--globals--colors--info-050);
 	--c--contextuals--content--semantic--info--secondary: var(--c--globals--colors--info-100);
 	--c--contextuals--content--semantic--info--tertiary: var(--c--globals--colors--info-250);
@@ -1247,44 +1207,23 @@ describe("Cunningham Bin", () => {
 	--c--contextuals--content--semantic--error--on-error: var(--c--globals--colors--error-050);
 	--c--contextuals--content--semantic--disabled--primary: var(--c--globals--colors--gray-600);
 	--c--contextuals--content--semantic--disabled--secondary: var(--c--globals--colors--black-300);
-	--c--contextuals--content--palette--brand--primary: var(--c--globals--colors--brand-350);
+	--c--contextuals--content--palette--brand--primary: var(--c--globals--colors--brand-500);
-	--c--contextuals--content--palette--brand--secondary: var(--c--globals--colors--brand-450);
+	--c--contextuals--content--palette--red--primary: var(--c--globals--colors--red-500);
-	--c--contextuals--content--palette--brand--tertiary: var(--c--globals--colors--brand-550);
+	--c--contextuals--content--palette--orange--primary: var(--c--globals--colors--orange-500);
-	--c--contextuals--content--palette--red--primary: var(--c--globals--colors--red-350);
+	--c--contextuals--content--palette--brown--primary: var(--c--globals--colors--brown-500);
-	--c--contextuals--content--palette--red--secondary: var(--c--globals--colors--red-450);
+	--c--contextuals--content--palette--yellow--primary: var(--c--globals--colors--yellow-500);
-	--c--contextuals--content--palette--red--tertiary: var(--c--globals--colors--red-550);
+	--c--contextuals--content--palette--green--primary: var(--c--globals--colors--green-500);
-	--c--contextuals--content--palette--orange--primary: var(--c--globals--colors--orange-350);
+	--c--contextuals--content--palette--blue-1--primary: var(--c--globals--colors--blue-1-500);
-	--c--contextuals--content--palette--orange--secondary: var(--c--globals--colors--orange-450);
+	--c--contextuals--content--palette--blue-2--primary: var(--c--globals--colors--blue-2-500);
-	--c--contextuals--content--palette--orange--tertiary: var(--c--globals--colors--orange-550);
+	--c--contextuals--content--palette--purple--primary: var(--c--globals--colors--purple-500);
-	--c--contextuals--content--palette--brown--primary: var(--c--globals--colors--brown-350);
+	--c--contextuals--content--palette--pink--primary: var(--c--globals--colors--pink-500);
-	--c--contextuals--content--palette--brown--secondary: var(--c--globals--colors--brown-450);
+	--c--contextuals--content--palette--gray--primary: var(--c--globals--colors--gray-500);
-	--c--contextuals--content--palette--brown--tertiary: var(--c--globals--colors--brown-550);
-	--c--contextuals--content--palette--yellow--primary: var(--c--globals--colors--yellow-350);
-	--c--contextuals--content--palette--yellow--secondary: var(--c--globals--colors--yellow-450);
-	--c--contextuals--content--palette--yellow--tertiary: var(--c--globals--colors--yellow-550);
-	--c--contextuals--content--palette--green--primary: var(--c--globals--colors--green-350);
-	--c--contextuals--content--palette--green--secondary: var(--c--globals--colors--green-450);
-	--c--contextuals--content--palette--green--tertiary: var(--c--globals--colors--green-550);
-	--c--contextuals--content--palette--blue-1--primary: var(--c--globals--colors--blue-1-350);
-	--c--contextuals--content--palette--blue-1--secondary: var(--c--globals--colors--blue-1-450);
-	--c--contextuals--content--palette--blue-1--tertiary: var(--c--globals--colors--blue-1-550);
-	--c--contextuals--content--palette--blue-2--primary: var(--c--globals--colors--blue-2-350);
-	--c--contextuals--content--palette--blue-2--secondary: var(--c--globals--colors--blue-2-450);
-	--c--contextuals--content--palette--blue-2--tertiary: var(--c--globals--colors--blue-2-550);
-	--c--contextuals--content--palette--purple--primary: var(--c--globals--colors--purple-350);
-	--c--contextuals--content--palette--purple--secondary: var(--c--globals--colors--purple-450);
-	--c--contextuals--content--palette--purple--tertiary: var(--c--globals--colors--purple-550);
-	--c--contextuals--content--palette--pink--primary: var(--c--globals--colors--pink-350);
-	--c--contextuals--content--palette--pink--secondary: var(--c--globals--colors--pink-450);
-	--c--contextuals--content--palette--pink--tertiary: var(--c--globals--colors--pink-550);
-	--c--contextuals--content--palette--gray--primary: var(--c--globals--colors--gray-350);
-	--c--contextuals--content--palette--gray--secondary: var(--c--globals--colors--gray-450);
-	--c--contextuals--content--palette--gray--tertiary: var(--c--globals--colors--gray-550);
 	--c--contextuals--border--surface--primary: var(--c--globals--colors--gray-750);
+	--c--contextuals--border--semantic--contextual--primary: var(--c--globals--colors--black-200);
+	--c--contextuals--border--semantic--overlay--primary: var(--c--globals--colors--black-200);
 	--c--contextuals--border--semantic--brand--primary: var(--c--globals--colors--brand-450);
 	--c--contextuals--border--semantic--brand--secondary: var(--c--globals--colors--brand-600);
 	--c--contextuals--border--semantic--brand--tertiary: var(--c--globals--colors--brand-700);
-	--c--contextuals--border--semantic--contextual--primary: var(--c--globals--colors--black-200);
 	--c--contextuals--border--semantic--neutral--primary: var(--c--globals--colors--gray-450);
 	--c--contextuals--border--semantic--neutral--secondary: var(--c--globals--colors--gray-600);
 	--c--contextuals--border--semantic--neutral--tertiary: var(--c--globals--colors--gray-700);
@@ -1301,39 +1240,6 @@ describe("Cunningham Bin", () => {
 	--c--contextuals--border--semantic--error--secondary: var(--c--globals--colors--error-600);
 	--c--contextuals--border--semantic--error--tertiary: var(--c--globals--colors--error-700);
 	--c--contextuals--border--semantic--disabled--primary: var(--c--globals--colors--gray-800);
-	--c--contextuals--border--palette--brand--primary: var(--c--globals--colors--brand-350);
-	--c--contextuals--border--palette--brand--secondary: var(--c--globals--colors--brand-450);
-	--c--contextuals--border--palette--brand--tertiary: var(--c--globals--colors--brand-550);
-	--c--contextuals--border--palette--red--primary: var(--c--globals--colors--red-350);
-	--c--contextuals--border--palette--red--secondary: var(--c--globals--colors--red-450);
-	--c--contextuals--border--palette--red--tertiary: var(--c--globals--colors--red-550);
-	--c--contextuals--border--palette--orange--primary: var(--c--globals--colors--orange-350);
-	--c--contextuals--border--palette--orange--secondary: var(--c--globals--colors--orange-450);
-	--c--contextuals--border--palette--orange--tertiary: var(--c--globals--colors--orange-550);
-	--c--contextuals--border--palette--brown--primary: var(--c--globals--colors--brown-350);
-	--c--contextuals--border--palette--brown--secondary: var(--c--globals--colors--brown-450);
-	--c--contextuals--border--palette--brown--tertiary: var(--c--globals--colors--brown-550);
-	--c--contextuals--border--palette--yellow--primary: var(--c--globals--colors--yellow-350);
-	--c--contextuals--border--palette--yellow--secondary: var(--c--globals--colors--yellow-450);
-	--c--contextuals--border--palette--yellow--tertiary: var(--c--globals--colors--yellow-550);
-	--c--contextuals--border--palette--green--primary: var(--c--globals--colors--green-350);
-	--c--contextuals--border--palette--green--secondary: var(--c--globals--colors--green-450);
-	--c--contextuals--border--palette--green--tertiary: var(--c--globals--colors--green-550);
-	--c--contextuals--border--palette--blue-1--primary: var(--c--globals--colors--blue-1-350);
-	--c--contextuals--border--palette--blue-1--secondary: var(--c--globals--colors--blue-1-450);
-	--c--contextuals--border--palette--blue-1--tertiary: var(--c--globals--colors--blue-1-550);
-	--c--contextuals--border--palette--blue-2--primary: var(--c--globals--colors--blue-2-350);
-	--c--contextuals--border--palette--blue-2--secondary: var(--c--globals--colors--blue-2-450);
-	--c--contextuals--border--palette--blue-2--tertiary: var(--c--globals--colors--blue-2-550);
-	--c--contextuals--border--palette--purple--primary: var(--c--globals--colors--purple-350);
-	--c--contextuals--border--palette--purple--secondary: var(--c--globals--colors--purple-450);
-	--c--contextuals--border--palette--purple--tertiary: var(--c--globals--colors--purple-550);
-	--c--contextuals--border--palette--pink--primary: var(--c--globals--colors--pink-350);
-	--c--contextuals--border--palette--pink--secondary: var(--c--globals--colors--pink-450);
-	--c--contextuals--border--palette--pink--tertiary: var(--c--globals--colors--pink-550);
-	--c--contextuals--border--palette--gray--primary: var(--c--globals--colors--gray-350);
-	--c--contextuals--border--palette--gray--secondary: var(--c--globals--colors--gray-450);
-	--c--contextuals--border--palette--gray--tertiary: var(--c--globals--colors--gray-550);
 }
 "
 `);