From 846b09dd5491525be7caf382a5306607bd812413 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Thu, 7 Nov 2024 17:17:41 +0000
Subject: [PATCH 01/35] Some basic stuff

---
 package.json                                  |    2 +
 packages/theme/package.json                   |    3 +-
 packages/theme/scripts/build-json.mjs         |   70 +
 .../tokens/characteristics/theme-next.json    | 1708 +++++++++++++++++
 .../foundation/colors-categorical.tokens.json |  764 ++++++++
 .../tokens/foundation/colors-next.tokens.json |  710 +++++++
 .../tokens/palette/blue-light.tokens.json     |  628 ++++++
 yarn.lock                                     |  329 +++-
 8 files changed, 4208 insertions(+), 6 deletions(-)
 create mode 100644 packages/theme/scripts/build-json.mjs
 create mode 100644 packages/theme/tokens/characteristics/theme-next.json
 create mode 100644 packages/theme/tokens/foundation/colors-categorical.tokens.json
 create mode 100644 packages/theme/tokens/foundation/colors-next.tokens.json
 create mode 100644 packages/theme/tokens/palette/blue-light.tokens.json

diff --git a/package.json b/package.json
index c5c97ebc40..3ba0c301ca 100644
--- a/package.json
+++ b/package.json
@@ -96,6 +96,8 @@
     "react-dom": "^18.3.1",
     "rifm": "^0.12.0",
     "storybook": "^8.4.4",
+    "style-dictionary": "^4.1.4",
+    "style-dictionary-utils": "^4.0.0",
     "stylelint": "^16.0.0",
     "typescript": "4.6.4",
     "vite": "^5.0.0",
diff --git a/packages/theme/package.json b/packages/theme/package.json
index 88e938d58b..f2df6df1bc 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -15,7 +15,8 @@
   ],
   "scripts": {
     "build": "yarn node ./scripts/build.mjs",
-    "build:watch": "yarn node ./scripts/build.mjs --watch"
+    "build:watch": "yarn node ./scripts/build.mjs --watch",
+    "build:json": "yarn node ./scripts/build-json.mjs"
   },
   "devDependencies": {
     "del": "^7.0.0"
diff --git a/packages/theme/scripts/build-json.mjs b/packages/theme/scripts/build-json.mjs
new file mode 100644
index 0000000000..fde9ecad60
--- /dev/null
+++ b/packages/theme/scripts/build-json.mjs
@@ -0,0 +1,70 @@
+import { StyleDictionary } from "style-dictionary-utils";
+
+// TODO: add more styling options here, and theme vs theme next
+function getStyleDictionaryConfig({ mode, density, accent }) {
+  return {
+    source: [
+      //   "./tokens/foundation/test.tokens.json",
+      "./tokens/foundation/**/*.tokens.json",
+      `./tokens/palette/${accent}-${mode}.tokens.json`,
+      //   `./tokens/characteristics/*.tokens.json`,
+      //   "tokens/globals/**/*.tokens.json",
+    ],
+    // usesDtcg: true,
+    platforms: {
+      css: {
+        buildPath: `dist/css/${accent}-${mode}-${density}/`,
+        prefix: "salt",
+        transforms: [
+          "attribute/cti",
+          "name/kebab",
+          // "dimension/pixelToRem",
+          //   "color/hexAlpha", // style-dictionary-utils transform // doesn't work with $value for some reason
+        ],
+        files: [
+          {
+            format: "css/advanced",
+            destination: "variables.css",
+            options: {
+              selector: ".salt-theme.salt-theme-next", // defaults to :root; set to false to disable
+              //   rules: [
+              //     {
+              //       atRule: "@media (min-width: 768px)",
+              //       selector: `body[size="medium"]`, // this will be used instead of body[theme="dark"]`
+              //       matcher: (token) => token.filePath.includes("tablet"), // tokens that match this filter will be added inside the media query
+              //     },
+              //   ],
+              outputReferences: true,
+              usesDtcg: true,
+              formatting: {
+                // prefix: "color", // this defaults to `--`
+              },
+            },
+            // // Use filter to add different `selector` for mode/density/etc.
+            // filter: {},
+          },
+        ],
+      },
+    },
+  };
+}
+
+for await (const mode of ["light"]) {
+  for await (const accent of ["blue"]) {
+    // , "md", "ld", "td"
+    for await (const density of ["hd"]) {
+      const config = getStyleDictionaryConfig({ mode, density, accent });
+      // const myStyleDictionary = new StyleDictionary();
+
+      // const extendedSd = await myStyleDictionary.extend(config);
+
+      // await extendedSd.buildAllPlatforms();
+
+      // const sd = new StyleDictionary(config);
+      // await sd.buildAllPlatforms();
+      const myStyleDictionary = new StyleDictionary();
+      const sd = await myStyleDictionary.extend(config);
+      sd.buildAllPlatforms();
+    }
+  }
+}
diff --git a/packages/theme/tokens/characteristics/theme-next.json b/packages/theme/tokens/characteristics/theme-next.json
new file mode 100644
index 0000000000..7379b6854f
--- /dev/null
+++ b/packages/theme/tokens/characteristics/theme-next.json
@@ -0,0 +1,1708 @@
+{
+  "accent": {
+    "foreground": {
+      "$type": "color",
+      "$value": "{palette-foreground.primary-alt}"
+    },
+    "background": {
+      "$type": "color",
+      "$value": "{palette-accent.default}"
+    },
+    "background-disabled": {
+      "$type": "color",
+      "$value": "{palette-accent.disabled}"
+    },
+    "border": {
+      "$type": "color",
+      "$value": "{palette-accent.default}"
+    }
+  },
+  "actionable": {
+    "accented": {
+      "bold-foreground": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-foreground-hover": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-foreground-active": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-foreground-disabled": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt-disabled}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-accent.default}"
+      },
+      "bold-background-hover": {
+        "$type": "color",
+        "$value": "{palette-accent.action-hover}"
+      },
+      "bold-background-active": {
+        "$type": "color",
+        "$value": "{palette-accent.action-active}"
+      },
+      "bold-background-disabled": {
+        "$type": "color",
+        "$value": "{palette-accent.disabled}"
+      },
+      "bold-border": {
+        "$type": "color",
+        "$value": "{palette-accent.default}"
+      },
+      "bold-border-hover": {
+        "$type": "color",
+        "$value": "{palette-accent.default}"
+      },
+      "bold-border-active": {
+        "$type": "color",
+        "$value": "{palette-accent.default}"
+      },
+      "bold-border-disabled": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      },
+      "foreground": {
+        "$type": "color",
+        "$value": "{palette-accent.strong}"
+      },
+      "foreground-hover": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "foreground-active": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "foreground-disabled": {
+        "$type": "color",
+        "$value": "{palette-accent.strong-disabled}"
+      },
+      "background": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      },
+      "background-hover": {
+        "$type": "color",
+        "$value": "{palette-accent.action-hover}"
+      },
+      "background-active": {
+        "$type": "color",
+        "$value": "{palette-accent.action-active}"
+      },
+      "background-disabled": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{palette-accent.default}"
+      },
+      "border-hover": {
+        "$type": "color",
+        "$value": "{palette-accent.default}"
+      },
+      "border-active": {
+        "$type": "color",
+        "$value": "{palette-accent.default}"
+      },
+      "border-disabled": {
+        "$type": "color",
+        "$value": "{palette-accent.disabled}"
+      },
+      "subtle-foreground": {
+        "$type": "color",
+        "$value": "{palette-accent.strong}"
+      },
+      "subtle-foreground-hover": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "subtle-foreground-active": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "subtle-foreground-disabled": {
+        "$type": "color",
+        "$value": "{palette-accent.strong-disabled}"
+      },
+      "subtle-background": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      },
+      "subtle-background-hover": {
+        "$type": "color",
+        "$value": "{palette-accent.action-hover}"
+      },
+      "subtle-background-active": {
+        "$type": "color",
+        "$value": "{palette-accent.action-active}"
+      },
+      "subtle-background-disabled": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      },
+      "subtle-border": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      },
+      "subtle-border-hover": {
+        "$type": "color",
+        "$value": "{palette-accent.default}"
+      },
+      "subtle-border-active": {
+        "$type": "color",
+        "$value": "{palette-accent.default}"
+      },
+      "subtle-border-disabled": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      }
+    },
+    "bold-foreground": {
+      "$type": "color",
+      "$value": "{palette-foreground.primary-alt}"
+    },
+    "bold-foreground-hover": {
+      "$type": "color",
+      "$value": "{palette-foreground.primary-alt}"
+    },
+    "bold-foreground-active": {
+      "$type": "color",
+      "$value": "{palette-foreground.primary-alt}"
+    },
+    "bold-foreground-disabled": {
+      "$type": "color",
+      "$value": "{palette-foreground.primary-alt-disabled}"
+    },
+    "bold-background": {
+      "$type": "color",
+      "$value": "{palette-neutral.default}"
+    },
+    "bold-background-hover": {
+      "$type": "color",
+      "$value": "{palette-neutral.action-hover}"
+    },
+    "bold-background-active": {
+      "$type": "color",
+      "$value": "{palette-neutral.action-active}"
+    },
+    "bold-background-disabled": {
+      "$type": "color",
+      "$value": "{palette-neutral.disabled}"
+    },
+    "bold-border": {
+      "$type": "color",
+      "$value": "{palette-neutral.default}"
+    },
+    "bold-border-hover": {
+      "$type": "color",
+      "$value": "{palette-neutral.default}"
+    },
+    "bold-border-active": {
+      "$type": "color",
+      "$value": "{palette-neutral.default}"
+    },
+    "bold-border-disabled": {
+      "$type": "color",
+      "$value": "{palette-alpha.none}"
+    },
+    "foreground": {
+      "$type": "color",
+      "$value": "{palette-foreground.primary}"
+    },
+    "foreground-hover": {
+      "$type": "color",
+      "$value": "{palette-foreground.primary-alt}"
+    },
+    "foreground-active": {
+      "$type": "color",
+      "$value": "{palette-foreground.primary-alt}"
+    },
+    "foreground-disabled": {
+      "$type": "color",
+      "$value": "{palette-foreground.primary-disabled}"
+    },
+    "background": {
+      "$type": "color",
+      "$value": "{palette-alpha.none}"
+    },
+    "background-hover": {
+      "$type": "color",
+      "$value": "{palette-neutral.action-hover}"
+    },
+    "background-active": {
+      "$type": "color",
+      "$value": "{palette-neutral.action-active}"
+    },
+    "background-disabled": {
+      "$type": "color",
+      "$value": "{palette-alpha.none}"
+    },
+    "background-readonly": {
+      "$type": "color",
+      "$value": "{palette-neutral.readonly}"
+    },
+    "border": {
+      "$type": "color",
+      "$value": "{palette-neutral.default}"
+    },
+    "border-hover": {
+      "$type": "color",
+      "$value": "{palette-neutral.default}"
+    },
+    "border-active": {
+      "$type": "color",
+      "$value": "{palette-neutral.default}"
+    },
+    "border-disabled": {
+      "$type": "color",
+      "$value": "{palette-neutral.disabled}"
+    },
+    "subtle-foreground": {
+      "$type": "color",
+      "$value": "{palette-foreground.primary}"
+    },
+    "subtle-foreground-hover": {
+      "$type": "color",
+      "$value": "{palette-foreground.primary-alt}"
+    },
+    "subtle-foreground-active": {
+      "$type": "color",
+      "$value": "{palette-foreground.primary-alt}"
+    },
+    "subtle-foreground-disabled": {
+      "$type": "color",
+      "$value": "{palette-foreground.primary-disabled}"
+    },
+    "subtle-background": {
+      "$type": "color",
+      "$value": "{palette-alpha.none}"
+    },
+    "subtle-background-hover": {
+      "$type": "color",
+      "$value": "{palette-neutral.action-hover}"
+    },
+    "subtle-background-active": {
+      "$type": "color",
+      "$value": "{palette-neutral.action-active}"
+    },
+    "subtle-background-disabled": {
+      "$type": "color",
+      "$value": "{palette-alpha.none}"
+    },
+    "subtle-border": {
+      "$type": "color",
+      "$value": "{palette-alpha.none}"
+    },
+    "subtle-border-hover": {
+      "$type": "color",
+      "$value": "{palette-neutral.default}"
+    },
+    "subtle-border-active": {
+      "$type": "color",
+      "$value": "{palette-neutral.default}"
+    },
+    "subtle-border-disabled": {
+      "$type": "color",
+      "$value": "{palette-alpha.none}"
+    },
+    "caution": {
+      "bold-foreground": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-foreground-hover": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-foreground-active": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-foreground-disabled": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt-disabled}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-warning.default}"
+      },
+      "bold-background-hover": {
+        "$type": "color",
+        "$value": "{palette-warning.action-hover}"
+      },
+      "bold-background-active": {
+        "$type": "color",
+        "$value": "{palette-warning.action-active}"
+      },
+      "bold-background-disabled": {
+        "$type": "color",
+        "$value": "{palette-warning.disabled}"
+      },
+      "bold-border": {
+        "$type": "color",
+        "$value": "{palette-warning.default}"
+      },
+      "bold-border-hover": {
+        "$type": "color",
+        "$value": "{palette-warning.default}"
+      },
+      "bold-border-active": {
+        "$type": "color",
+        "$value": "{palette-warning.default}"
+      },
+      "bold-border-disabled": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      },
+      "foreground": {
+        "$type": "color",
+        "$value": "{palette-warning.strong}"
+      },
+      "foreground-hover": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "foreground-active": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "foreground-disabled": {
+        "$type": "color",
+        "$value": "{palette-warning.strong disabled}"
+      },
+      "background": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      },
+      "background-hover": {
+        "$type": "color",
+        "$value": "{palette-warning.action-hover}"
+      },
+      "background-active": {
+        "$type": "color",
+        "$value": "{palette-warning.action-active}"
+      },
+      "background-disabled": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{palette-warning.default}"
+      },
+      "border-hover": {
+        "$type": "color",
+        "$value": "{palette-warning.default}"
+      },
+      "border-active": {
+        "$type": "color",
+        "$value": "{palette-warning.default}"
+      },
+      "border-disabled": {
+        "$type": "color",
+        "$value": "{palette-warning.disabled}"
+      },
+      "subtle-foreground": {
+        "$type": "color",
+        "$value": "{palette-warning.strong}"
+      },
+      "subtle-foreground-hover": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "subtle-foreground-active": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "subtle-foreground-disabled": {
+        "$type": "color",
+        "$value": "{palette-warning.disabled}"
+      },
+      "subtle-background": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      },
+      "subtle-background-hover": {
+        "$type": "color",
+        "$value": "{palette-warning.action-hover}"
+      },
+      "subtle-background-active": {
+        "$type": "color",
+        "$value": "{palette-warning.action-active}"
+      },
+      "subtle-background-disabled": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      },
+      "subtle-border": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      },
+      "subtle-border-hover": {
+        "$type": "color",
+        "$value": "{palette-warning.default}"
+      },
+      "subtle-border-active": {
+        "$type": "color",
+        "$value": "{palette-warning.default}"
+      },
+      "subtle-border-disabled": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      }
+    },
+    "negative": {
+      "bold-foreground": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-foreground-hover": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-foreground-active": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-foreground-disabled": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt-disabled}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-negative.default}"
+      },
+      "bold-background-hover": {
+        "$type": "color",
+        "$value": "{palette-negative.action-hover}"
+      },
+      "bold-background-active": {
+        "$type": "color",
+        "$value": "{palette-negative.action-active}"
+      },
+      "bold-background-disabled": {
+        "$type": "color",
+        "$value": "{palette-negative.disabled}"
+      },
+      "bold-border": {
+        "$type": "color",
+        "$value": "{palette-negative.default}"
+      },
+      "bold-border-hover": {
+        "$type": "color",
+        "$value": "{palette-negative.default}"
+      },
+      "bold-border-active": {
+        "$type": "color",
+        "$value": "{palette-negative.default}"
+      },
+      "bold-border-disabled": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      },
+      "foreground": {
+        "$type": "color",
+        "$value": "{palette-negative.strong}"
+      },
+      "foreground-hover": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "foreground-active": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "foreground-disabled": {
+        "$type": "color",
+        "$value": "{palette-negative.strong disabled}"
+      },
+      "background": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      },
+      "background-hover": {
+        "$type": "color",
+        "$value": "{palette-negative.action-hover}"
+      },
+      "background-active": {
+        "$type": "color",
+        "$value": "{palette-negative.action-active}"
+      },
+      "background-disabled": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{palette-negative.default}"
+      },
+      "border-hover": {
+        "$type": "color",
+        "$value": "{palette-negative.default}"
+      },
+      "border-active": {
+        "$type": "color",
+        "$value": "{palette-negative.default}"
+      },
+      "border-disabled": {
+        "$type": "color",
+        "$value": "{palette-negative.disabled}"
+      },
+      "subtle-foreground": {
+        "$type": "color",
+        "$value": "{palette-negative.strong}"
+      },
+      "subtle-foreground-hover": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "subtle-foreground-active": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "subtle-foreground-disabled": {
+        "$type": "color",
+        "$value": "{palette-negative.strong disabled}"
+      },
+      "subtle-background": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      },
+      "subtle-background-hover": {
+        "$type": "color",
+        "$value": "{palette-negative.action-hover}"
+      },
+      "subtle-background-active": {
+        "$type": "color",
+        "$value": "{palette-negative.action-active}"
+      },
+      "subtle-background-disabled": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      },
+      "subtle-border": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      },
+      "subtle-border-hover": {
+        "$type": "color",
+        "$value": "{palette-negative.default}"
+      },
+      "subtle-border-active": {
+        "$type": "color",
+        "$value": "{palette-negative.default}"
+      },
+      "subtle-border-disabled": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      }
+    },
+    "positive": {
+      "bold-foreground": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-foreground-hover": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-foreground-active": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-foreground-disabled": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt-disabled}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-positive.default}"
+      },
+      "bold-background-hover": {
+        "$type": "color",
+        "$value": "{palette-positive.action-hover}"
+      },
+      "bold-background-active": {
+        "$type": "color",
+        "$value": "{palette-positive.action-active}"
+      },
+      "bold-background-disabled": {
+        "$type": "color",
+        "$value": "{palette-positive.disabled}"
+      },
+      "bold-border": {
+        "$type": "color",
+        "$value": "{palette-positive.default}"
+      },
+      "bold-border-hover": {
+        "$type": "color",
+        "$value": "{palette-positive.default}"
+      },
+      "bold-border-active": {
+        "$type": "color",
+        "$value": "{palette-positive.default}"
+      },
+      "bold-border-disabled": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      },
+      "foreground": {
+        "$type": "color",
+        "$value": "{palette-positive.strong}"
+      },
+      "foreground-hover": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "foreground-active": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "foreground-disabled": {
+        "$type": "color",
+        "$value": "{palette-positive.strong disabled}"
+      },
+      "background": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      },
+      "background-hover": {
+        "$type": "color",
+        "$value": "{palette-positive.action-hover}"
+      },
+      "background-active": {
+        "$type": "color",
+        "$value": "{palette-positive.action-active}"
+      },
+      "background-disabled": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{palette-positive.default}"
+      },
+      "border-hover": {
+        "$type": "color",
+        "$value": "{palette-positive.default}"
+      },
+      "border-active": {
+        "$type": "color",
+        "$value": "{palette-positive.default}"
+      },
+      "border-disabled": {
+        "$type": "color",
+        "$value": "{palette-positive.disabled}"
+      },
+      "subtle-foreground": {
+        "$type": "color",
+        "$value": "{palette-positive.strong}"
+      },
+      "subtle-foreground-hover": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "subtle-foreground-active": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "subtle-foreground-disabled": {
+        "$type": "color",
+        "$value": "{palette-positive.strong disabled}"
+      },
+      "subtle-background": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      },
+      "subtle-background-hover": {
+        "$type": "color",
+        "$value": "{palette-positive.action-hover}"
+      },
+      "subtle-background-active": {
+        "$type": "color",
+        "$value": "{palette-positive.action-active}"
+      },
+      "subtle-background-disabled": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      },
+      "subtle-border": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      },
+      "subtle-border-hover": {
+        "$type": "color",
+        "$value": "{palette-positive.default}"
+      },
+      "subtle-border-active": {
+        "$type": "color",
+        "$value": "{palette-positive.default}"
+      },
+      "subtle-border-disabled": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      }
+    }
+  },
+  "category": {
+    "1": {
+      "subtle-foreground": {
+        "$type": "color",
+        "$value": "{palette-categorical.1.strong}"
+      },
+      "subtle-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.1.weakest}"
+      },
+      "subtle-border": {
+        "$type": "color",
+        "$value": "{palette-categorical.1.default}"
+      },
+      "bold-foreground": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.1.default}"
+      }
+    },
+    "2": {
+      "subtle-foreground": {
+        "$type": "color",
+        "$value": "{palette-categorical.2.strong}"
+      },
+      "subtle-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.2.weakest}"
+      },
+      "subtle-border": {
+        "$type": "color",
+        "$value": "{palette-categorical.2.default}"
+      },
+      "bold-foreground": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.2.default}"
+      }
+    },
+    "3": {
+      "subtle-foreground": {
+        "$type": "color",
+        "$value": "{palette-categorical.3.strong}"
+      },
+      "subtle-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.3.weakest}"
+      },
+      "subtle-border": {
+        "$type": "color",
+        "$value": "{palette-categorical.3.default}"
+      },
+      "bold-foreground": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.3.default}"
+      }
+    },
+    "4": {
+      "subtle-foreground": {
+        "$type": "color",
+        "$value": "{palette-categorical.4.strong}"
+      },
+      "subtle-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.4.weakest}"
+      },
+      "subtle-border": {
+        "$type": "color",
+        "$value": "{palette-categorical.4.default}"
+      },
+      "bold-foreground": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.4.default}"
+      }
+    },
+    "5": {
+      "subtle-foreground": {
+        "$type": "color",
+        "$value": "{palette-categorical.5.strong}"
+      },
+      "subtle-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.5.weakest}"
+      },
+      "subtle-border": {
+        "$type": "color",
+        "$value": "{palette-categorical.5.default}"
+      },
+      "bold-foreground": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.5.default}"
+      }
+    },
+    "6": {
+      "subtle-foreground": {
+        "$type": "color",
+        "$value": "{palette-categorical.6.strong}"
+      },
+      "subtle-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.6.weakest}"
+      },
+      "subtle-border": {
+        "$type": "color",
+        "$value": "{palette-categorical.6.default}"
+      },
+      "bold-foreground": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.6.default}"
+      }
+    },
+    "7": {
+      "subtle-foreground": {
+        "$type": "color",
+        "$value": "{palette-categorical.7.strong}"
+      },
+      "subtle-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.7.weakest}"
+      },
+      "subtle-border": {
+        "$type": "color",
+        "$value": "{palette-categorical.7.default}"
+      },
+      "bold-foreground": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.7.default}"
+      }
+    },
+    "8": {
+      "subtle-foreground": {
+        "$type": "color",
+        "$value": "{palette-categorical.8.strong}"
+      },
+      "subtle-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.8.weakest}"
+      },
+      "subtle-border": {
+        "$type": "color",
+        "$value": "{palette-categorical.8.default}"
+      },
+      "bold-foreground": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.8.default}"
+      }
+    },
+    "9": {
+      "subtle-foreground": {
+        "$type": "color",
+        "$value": "{palette-categorical.9.strong}"
+      },
+      "subtle-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.9.weakest}"
+      },
+      "subtle-border": {
+        "$type": "color",
+        "$value": "{palette-categorical.9.default}"
+      },
+      "bold-foreground": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.9.default}"
+      }
+    },
+    "10": {
+      "subtle-foreground": {
+        "$type": "color",
+        "$value": "{palette-categorical.10.strong}"
+      },
+      "subtle-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.10.weakest}"
+      },
+      "subtle-border": {
+        "$type": "color",
+        "$value": "{palette-categorical.10.default}"
+      },
+      "bold-foreground": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.10.default}"
+      }
+    },
+    "11": {
+      "subtle-foreground": {
+        "$type": "color",
+        "$value": "{palette-categorical.11.strong}"
+      },
+      "subtle-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.11.weakest}"
+      },
+      "subtle-border": {
+        "$type": "color",
+        "$value": "{palette-categorical.11.default}"
+      },
+      "bold-foreground": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.11.default}"
+      }
+    },
+    "12": {
+      "subtle-foreground": {
+        "$type": "color",
+        "$value": "{palette-categorical.12.strong}"
+      },
+      "subtle-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.12.weakest}"
+      },
+      "subtle-border": {
+        "$type": "color",
+        "$value": "{palette-categorical.12.default}"
+      },
+      "bold-foreground": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.12.default}"
+      }
+    },
+    "13": {
+      "subtle-foreground": {
+        "$type": "color",
+        "$value": "{palette-categorical.13.strong}"
+      },
+      "subtle-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.13.weakest}"
+      },
+      "subtle-border": {
+        "$type": "color",
+        "$value": "{palette-categorical.13.default}"
+      },
+      "bold-foreground": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.13.default}"
+      }
+    },
+    "14": {
+      "subtle-foreground": {
+        "$type": "color",
+        "$value": "{palette-categorical.14.strong}"
+      },
+      "subtle-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.14.weakest}"
+      },
+      "subtle-border": {
+        "$type": "color",
+        "$value": "{palette-categorical.14.default}"
+      },
+      "bold-foreground": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.14.default}"
+      }
+    },
+    "15": {
+      "subtle-foreground": {
+        "$type": "color",
+        "$value": "{palette-categorical.15.strong}"
+      },
+      "subtle-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.15.weakest}"
+      },
+      "subtle-border": {
+        "$type": "color",
+        "$value": "{palette-categorical.15.default}"
+      },
+      "bold-foreground": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.15.default}"
+      }
+    },
+    "16": {
+      "subtle-foreground": {
+        "$type": "color",
+        "$value": "{palette-categorical.16.strong}"
+      },
+      "subtle-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.16.weakest}"
+      },
+      "subtle-border": {
+        "$type": "color",
+        "$value": "{palette-categorical.16.default}"
+      },
+      "bold-foreground": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.16.default}"
+      }
+    },
+    "17": {
+      "subtle-foreground": {
+        "$type": "color",
+        "$value": "{palette-categorical.17.strong}"
+      },
+      "subtle-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.17.weakest}"
+      },
+      "subtle-border": {
+        "$type": "color",
+        "$value": "{palette-categorical.17.default}"
+      },
+      "bold-foreground": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.17.default}"
+      }
+    },
+    "18": {
+      "subtle-foreground": {
+        "$type": "color",
+        "$value": "{palette-categorical.18.strong}"
+      },
+      "subtle-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.18.weakest}"
+      },
+      "subtle-border": {
+        "$type": "color",
+        "$value": "{palette-categorical.18.default}"
+      },
+      "bold-foreground": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.18.default}"
+      }
+    },
+    "19": {
+      "subtle-foreground": {
+        "$type": "color",
+        "$value": "{palette-categorical.19.strong}"
+      },
+      "subtle-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.19.weakest}"
+      },
+      "subtle-border": {
+        "$type": "color",
+        "$value": "{palette-categorical.19.default}"
+      },
+      "bold-foreground": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.19.default}"
+      }
+    },
+    "20": {
+      "subtle-foreground": {
+        "$type": "color",
+        "$value": "{palette-categorical.20.strong}"
+      },
+      "subtle-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.20.weakest}"
+      },
+      "subtle-border": {
+        "$type": "color",
+        "$value": "{palette-categorical.20.default}"
+      },
+      "bold-foreground": {
+        "$type": "color",
+        "$value": "{palette-foreground.primary-alt}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-categorical.20.default}"
+      }
+    }
+  },
+  "container": {
+    "primary": {
+      "border": {
+        "$type": "color",
+        "$value": "{palette-alpha.default}"
+      },
+      "border-disabled": {
+        "$type": "color",
+        "$value": "{palette-alpha.weaker}"
+      },
+      "background": {
+        "$type": "color",
+        "$value": "{palette-background.primary}"
+      },
+      "background-disabled": {
+        "$type": "color",
+        "$value": "{palette-background.primary-disabled}"
+      }
+    },
+    "secondary": {
+      "border": {
+        "$type": "color",
+        "$value": "{palette-alpha.default}"
+      },
+      "border-disabled": {
+        "$type": "color",
+        "$value": "{palette-alpha.weaker}"
+      },
+      "background": {
+        "$type": "color",
+        "$value": "{palette-background.secondary}"
+      },
+      "background-disabled": {
+        "$type": "color",
+        "$value": "{palette-background.secondary-disabled}"
+      }
+    },
+    "tertiary": {
+      "border": {
+        "$type": "color",
+        "$value": "{palette-alpha.default}"
+      },
+      "border-disabled": {
+        "$type": "color",
+        "$value": "{palette-alpha.weaker}"
+      },
+      "background": {
+        "$type": "color",
+        "$value": "{palette-background.tertiary}"
+      },
+      "background-disabled": {
+        "$type": "color",
+        "$value": "{palette-background.tertiary-disabled}"
+      }
+    }
+  },
+  "content": {
+    "primary-foreground": {
+      "$type": "color",
+      "$value": "{palette-foreground.primary}"
+    },
+    "primary-foreground-disabled": {
+      "$type": "color",
+      "$value": "{palette-foreground.primary-disabled}"
+    },
+    "secondary-foreground": {
+      "$type": "color",
+      "$value": "{palette-foreground.secondary}"
+    },
+    "secondary-foreground-disabled": {
+      "$type": "color",
+      "$value": "{palette-foreground.secondary-disabled}"
+    },
+    "bold-foreground": {
+      "$type": "color",
+      "$value": "{palette-foreground.primary-alt}"
+    },
+    "bold-foreground-disabled": {
+      "$type": "color",
+      "$value": "{palette-foreground.primary-alt-disabled}"
+    },
+    "foreground-hover": {
+      "$type": "color",
+      "$value": "{palette-foreground.hover}"
+    },
+    "foreground-active": {
+      "$type": "color",
+      "$value": "{palette-foreground.active}"
+    },
+    "foreground-visited": {
+      "$type": "color",
+      "$value": "{palette-foreground.visited}"
+    },
+    "foreground-highlight": {
+      "$type": "color",
+      "$value": "{palette-accent.weaker}"
+    }
+  },
+  "editable": {
+    "border": {
+      "$type": "color",
+      "$value": "{palette-neutral.default}"
+    },
+    "border-hover": {
+      "$type": "color",
+      "$value": "{palette-accent.default}"
+    },
+    "border-active": {
+      "$type": "color",
+      "$value": "{palette-accent.stronger}"
+    },
+    "border-disabled": {
+      "$type": "color",
+      "$value": "{palette-neutral.disabled}"
+    },
+    "border-readonly": {
+      "$type": "color",
+      "$value": "{palette-neutral.readonly}"
+    },
+    "primary": {
+      "background": {
+        "$type": "color",
+        "$value": "{palette-background.primary}"
+      },
+      "background-hover": {
+        "$type": "color",
+        "$value": "{palette-background.primary}"
+      },
+      "background-active": {
+        "$type": "color",
+        "$value": "{palette-background.primary}"
+      },
+      "background-disabled": {
+        "$type": "color",
+        "$value": "{palette-background.primary-disabled}"
+      },
+      "background-readonly": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      }
+    },
+    "secondary": {
+      "background": {
+        "$type": "color",
+        "$value": "{palette-background.secondary}"
+      },
+      "background-hover": {
+        "$type": "color",
+        "$value": "{palette-background.secondary}"
+      },
+      "background-active": {
+        "$type": "color",
+        "$value": "{palette-background.secondary}"
+      },
+      "background-disabled": {
+        "$type": "color",
+        "$value": "{palette-background.secondary-disabled}"
+      },
+      "background-readonly": {
+        "$type": "color",
+        "$value": "{palette-alpha.none}"
+      }
+    }
+  },
+  "focused": {
+    "Outline": {
+      "$type": "color",
+      "$value": "{palette-accent.stronger}"
+    }
+  },
+  "navigable": {
+    "Indicator-hover": {
+      "$type": "color",
+      "$value": "{palette-neutral.default}"
+    },
+    "indicator-active": {
+      "$type": "color",
+      "$value": "{palette-accent.default}"
+    }
+  },
+  "overlayable": {
+    "background": {
+      "$type": "color",
+      "$value": "{palette-alpha.backdrop}"
+    },
+    "background-highlight": {
+      "$type": "color",
+      "$value": "{palette-alpha.default}"
+    },
+    "rangeSelection": {
+      "$type": "color",
+      "$value": "{palette-alpha.weak}"
+    }
+  },
+  "selectable": {
+    "foreground": {
+      "$type": "color",
+      "$value": "{palette-neutral.strong}"
+    },
+    "foreground-hover": {
+      "$type": "color",
+      "$value": "{palette-accent.weak}"
+    },
+    "foreground-selected": {
+      "$type": "color",
+      "$value": "{palette-accent.default}"
+    },
+    "foreground-disabled": {
+      "$type": "color",
+      "$value": "{palette-neutral.strong-disabled}"
+    },
+    "foreground-selectedDisabled": {
+      "$type": "color",
+      "$value": "{palette-accent.disabled}"
+    },
+    "border": {
+      "$type": "color",
+      "$value": "{palette-neutral.default}"
+    },
+    "border-hover": {
+      "$type": "color",
+      "$value": "{palette-accent.weak}"
+    },
+    "border-selected": {
+      "$type": "color",
+      "$value": "{palette-accent.default}"
+    },
+    "border-disabled": {
+      "$type": "color",
+      "$value": "{palette-neutral.disabled}"
+    },
+    "border-selectedDisabled": {
+      "$type": "color",
+      "$value": "{palette-accent.disabled}"
+    },
+    "border-readonly": {
+      "$type": "color",
+      "$value": "{palette-neutral.readonly}"
+    },
+    "background": {
+      "$type": "color",
+      "$value": "{palette-alpha.none}"
+    },
+    "background-hover": {
+      "$type": "color",
+      "$value": "{palette-accent.weakest}"
+    },
+    "background-selected": {
+      "$type": "color",
+      "$value": "{palette-accent.weaker}"
+    },
+    "background-disabled": {
+      "$type": "color",
+      "$value": "{palette-alpha.none}"
+    },
+    "background-blurSelected": {
+      "$type": "color",
+      "$value": "{palette-neutral.weakest}"
+    },
+    "background-selectedDisabled": {
+      "$type": "color",
+      "$value": "{palette-accent.weaker-disabled}"
+    }
+  },
+  "separable": {
+    "Primary-border": {
+      "$type": "color",
+      "$value": "{palette-alpha.strong}"
+    },
+    "secondary-border": {
+      "$type": "color",
+      "$value": "{palette-alpha.default}"
+    },
+    "tertiary-border": {
+      "$type": "color",
+      "$value": "{palette-alpha.weak}"
+    },
+    "foreground": {
+      "$type": "color",
+      "$value": "{palette-foreground.primary}"
+    },
+    "foreground-hover": {
+      "$type": "color",
+      "$value": "{palette-foreground.primary}"
+    },
+    "foreground-active": {
+      "$type": "color",
+      "$value": "{palette-foreground.primary-alt}"
+    },
+    "background": {
+      "$type": "color",
+      "$value": "{palette-alpha.none}"
+    },
+    "background-hover": {
+      "$type": "color",
+      "$value": "{palette-alpha.weak}"
+    },
+    "background-active": {
+      "$type": "color",
+      "$value": "{palette-accent.default}"
+    }
+  },
+  "status": {
+    "error": {
+      "foreground-decorative": {
+        "$type": "color",
+        "$value": "{palette-negative.default}"
+      },
+      "foreground-informative": {
+        "$type": "color",
+        "$value": "{palette-negative.strong}"
+      },
+      "background": {
+        "$type": "color",
+        "$value": "{palette-negative.weakest}"
+      },
+      "background-selected": {
+        "$type": "color",
+        "$value": "{palette-negative.weakest}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-negative.default}"
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{palette-negative.default}"
+      }
+    },
+    "info": {
+      "foreground-decorative": {
+        "$type": "color",
+        "$value": "{palette-info.default}"
+      },
+      "foreground-informative": {
+        "$type": "color",
+        "$value": "{palette-info.strong}"
+      },
+      "background": {
+        "$type": "color",
+        "$value": "{palette-info.weakest}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-info.default}"
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{palette-info.default}"
+      }
+    },
+    "negative": {
+      "foreground-decorative": {
+        "$type": "color",
+        "$value": "{palette-negative.default}"
+      },
+      "foreground-informative": {
+        "$type": "color",
+        "$value": "{palette-negative.strong}"
+      }
+    },
+    "positive": {
+      "foreground-decorative": {
+        "$type": "color",
+        "$value": "{palette-positive.default}"
+      },
+      "foreground-informative": {
+        "$type": "color",
+        "$value": "{palette-positive.strong}"
+      }
+    },
+    "static": {
+      "foreground": {
+        "$type": "color",
+        "$value": "{palette-foreground.secondary}"
+      }
+    },
+    "success": {
+      "foreground-decorative": {
+        "$type": "color",
+        "$value": "{palette-positive.default}"
+      },
+      "foreground-informative": {
+        "$type": "color",
+        "$value": "{palette-positive.strong}"
+      },
+      "background": {
+        "$type": "color",
+        "$value": "{palette-positive.weakest}"
+      },
+      "background-selected": {
+        "$type": "color",
+        "$value": "{palette-positive.weakest}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-positive.default}"
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{palette-positive.default}"
+      }
+    },
+    "warning": {
+      "foreground-decorative": {
+        "$type": "color",
+        "$value": "{palette-warning.default}"
+      },
+      "foreground-informative": {
+        "$type": "color",
+        "$value": "{palette-warning.strong}"
+      },
+      "background": {
+        "$type": "color",
+        "$value": "{palette-warning.weakest}"
+      },
+      "background-selected": {
+        "$type": "color",
+        "$value": "{palette-warning.weakest}"
+      },
+      "bold-background": {
+        "$type": "color",
+        "$value": "{palette-warning.default}"
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{palette-warning.default}"
+      }
+    }
+  },
+  "target": {
+    "border-hover": {
+      "$type": "color",
+      "$value": "{palette-accent.default}"
+    },
+    "background-hover": {
+      "$type": "color",
+      "$value": "{palette-accent.weakest}"
+    }
+  },
+  "text": {
+    "body": {
+      "fontWeight": {
+        "default": {
+          "$type": "number",
+          "$value": "{palette-fontWeight.regular}"
+        },
+        "small": {
+          "$type": "number",
+          "$value": "{palette-fontWeight.light}"
+        },
+        "strong": {
+          "$type": "number",
+          "$value": "{palette-fontWeight.semiBold}"
+        }
+      }
+    },
+    "code": {
+      "fontWeight": {
+        "$type": "number",
+        "$value": "{palette-fontWeight.regular}"
+      }
+    },
+    "notation": {
+      "fontWeight": {
+        "default": {
+          "$type": "number",
+          "$value": "{palette-fontWeight.semiBold}"
+        },
+        "small": {
+          "$type": "number",
+          "$value": "{palette-fontWeight.regular}"
+        },
+        "strong": {
+          "$type": "number",
+          "$value": "{palette-fontWeight.bold}"
+        }
+      }
+    }
+  },
+  "track": {
+    "border": {
+      "$type": "color",
+      "$value": "{palette-alpha.default}"
+    }
+  },
+  "FIGMA ONLY": {
+    "gradient-start": {
+      "$type": "color",
+      "$value": "{palette-accent.none}"
+    },
+    "gradient-end": {
+      "$type": "color",
+      "$value": "{palette-accent.default}"
+    },
+    "jpmorgan": {
+      "foreground": {
+        "$type": "color",
+        "$value": "{palette-FIGMA ONLY.jpmorgan}"
+      }
+    },
+    "chase": {
+      "foreground-informative": {
+        "$type": "color",
+        "$value": "{palette-FIGMA ONLY.chase}"
+      },
+      "foreground-decorative": {
+        "$type": "color",
+        "$value": "{palette-FIGMA ONLY.chase-symbol}"
+      }
+    }
+  }
+}
diff --git a/packages/theme/tokens/foundation/colors-categorical.tokens.json b/packages/theme/tokens/foundation/colors-categorical.tokens.json
new file mode 100644
index 0000000000..fd4220a3d6
--- /dev/null
+++ b/packages/theme/tokens/foundation/colors-categorical.tokens.json
@@ -0,0 +1,764 @@
+{
+  "color": {
+    "aqua": {
+      "100": {
+        "$type": "color",
+        "$value": "#dcf7f7"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#b1e5e5"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#87c8c9"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#5aabad"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#2a8285"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#1f6d6f"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#13585a"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#084446"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#003133"
+      }
+    },
+    "autumn": {
+      "100": {
+        "$type": "color",
+        "$value": "#ffe9d9"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#ffc5a1"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#f2a372"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#de7e40"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#bd5b15"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#994912"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#77370e"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#56270a"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#381700"
+      }
+    },
+    "cider": {
+      "100": {
+        "$type": "color",
+        "$value": "#ffebd9"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#ffc99e"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#f2ac74"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#db8a48"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#ab6528"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#8f521f"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#744015"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#5a2f0d"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#421f00"
+      }
+    },
+    "citrine": {
+      "100": {
+        "$type": "color",
+        "$value": "#fff9d9"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#f0e1a5"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#d1bd73"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#b29c42"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#877410"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#72620c"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#5e5009"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#4a3f06"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#332b00"
+      }
+    },
+    "cobalt": {
+      "100": {
+        "$type": "color",
+        "$value": "#edf4ff"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#c6d3ef"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#9fb3df"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#7694cf"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#4676bf"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#355fa1"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#244885"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#133369"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#001f4f"
+      }
+    },
+    "forest": {
+      "100": {
+        "$type": "color",
+        "$value": "#edfaf5"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#bce8d3"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#8dccae"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#5bb088"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#23855e"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#196f4d"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#0f5a3d"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#06462e"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#00331f"
+      }
+    },
+    "fuchsia": {
+      "100": {
+        "$type": "color",
+        "$value": "#ffe8f7"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#ffbfe5"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#f097cb"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#de6db2"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#c24795"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#a7367d"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#8c2565"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#72134f"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#590039"
+      }
+    },
+    "fur": {
+      "100": {
+        "$type": "color",
+        "$value": "#fff4eb"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#f5d6bf"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#dbb293"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#c2906b"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#996a45"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#825534"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#6b4124"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#552e14"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#401c00"
+      }
+    },
+    "indigo": {
+      "100": {
+        "$type": "color",
+        "$value": "#e7e3ff"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#d0c2fc"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#b4a2f2"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#9581e5"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#7868ce"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#6255aa"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#4d4287"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#393166"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#262047"
+      }
+    },
+    "jade": {
+      "100": {
+        "$type": "color",
+        "$value": "#e1f5e6"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#b3e5bb"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#89c992"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#5cad6a"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#2d8543"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#216f35"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#155a27"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#08461a"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#00330d"
+      }
+    },
+    "lavender": {
+      "100": {
+        "$type": "color",
+        "$value": "#faebfa"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#edc7ed"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#d4a7d4"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#ba86ba"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#946694"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#7e507e"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#693a69"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#542554"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#400f40"
+      }
+    },
+    "lime": {
+      "100": {
+        "$type": "color",
+        "$value": "#eff5dc"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#d7e3a8"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#b6c478"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#92a647"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#667d15"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#556a10"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#45570b"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#354406"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#242e00"
+      }
+    },
+    "ocean": {
+      "100": {
+        "$type": "color",
+        "$value": "#e3fbff"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#b4e5f0"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#83c5d4"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#50a7ba"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#008094"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#006a7a"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#005461"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#00404a"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#002c33"
+      }
+    },
+    "olive": {
+      "100": {
+        "$type": "color",
+        "$value": "#eaf0df"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#d2deb8"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#b4c295"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#95a671"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#6d7c4d"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#58673a"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#445327"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#314015"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#1f2e00"
+      }
+    },
+    "plum": {
+      "100": {
+        "$type": "color",
+        "$value": "#f5e0ff"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#e6b9fa"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#d194eb"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#bc73de"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#9f55c2"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#8343a1"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#693282"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#4f2264"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#371247"
+      }
+    },
+    "rose": {
+      "100": {
+        "$type": "color",
+        "$value": "#ffe3f9"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#fabeed"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#e59ad4"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#d175bd"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#b0569e"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#924382"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#763268"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#5a204e"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#401036"
+      }
+    },
+    "salmon": {
+      "100": {
+        "$type": "color",
+        "$value": "#ffe8e9"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#ffc2c2"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#f09b99"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#de7878"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#bd5558"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#9a4043"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#792c30"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#59191d"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#3b0608"
+      }
+    },
+    "slate": {
+      "100": {
+        "$type": "color",
+        "$value": "#e1e8f7"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#c2cadd"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#a4adc4"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#8691ac"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#697694"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#545f7a"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#404961"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#2c354a"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#1a2133"
+      }
+    },
+    "smoke": {
+      "100": {
+        "$type": "color",
+        "$value": "#f2f5fa"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#d0d3d8"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#b0b3b8"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#909398"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#72757a"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#5d6065"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#494c51"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#35383d"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#23262b"
+      }
+    },
+    "violet": {
+      "100": {
+        "$type": "color",
+        "$value": "#edefff"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#cacbfc"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#a7a9eb"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#868bdb"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#636ebf"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#515a9f"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#3f4780"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#2f3563"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#1f2447"
+      }
+    }
+  }
+}
diff --git a/packages/theme/tokens/foundation/colors-next.tokens.json b/packages/theme/tokens/foundation/colors-next.tokens.json
new file mode 100644
index 0000000000..77c9f28d33
--- /dev/null
+++ b/packages/theme/tokens/foundation/colors-next.tokens.json
@@ -0,0 +1,710 @@
+{
+  "color": {
+    "white": {
+      "$type": "color",
+      "$value": "#ffffff"
+    },
+    "snow": {
+      "$type": "color",
+      "$value": "#ffffff"
+    },
+    "marble": {
+      "$type": "color",
+      "$value": "#f5f7f8"
+    },
+    "limestone": {
+      "$type": "color",
+      "$value": "#faf8f2"
+    },
+    "titanium": {
+      "$type": "color",
+      "$value": "#e2e4e5"
+    },
+    "charcoal": {
+      "$type": "color",
+      "$value": "#474c50"
+    },
+    "leather": {
+      "$type": "color",
+      "$value": "#26292b"
+    },
+    "granite": {
+      "$type": "color",
+      "$value": "#1a2229"
+    },
+    "jet": {
+      "$type": "color",
+      "$value": "#101820"
+    },
+    "black": {
+      "$type": "color",
+      "$value": "#000000"
+    },
+    "gray": {
+      "100": {
+        "$type": "color",
+        "$value": "#f5f7f8"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#d3d5d8"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#b1b5b9"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#91959a"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#72777d"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#5f646a"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#4c5157"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#3a3f44"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#292e33"
+      }
+    },
+    "blue": {
+      "100": {
+        "$type": "color",
+        "$value": "#eaf6ff"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#c7deff"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#9abdf5"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#669ce8"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#0078cf"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#005ea6"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#00457e"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#002d59"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#001736"
+      }
+    },
+    "teal": {
+      "100": {
+        "$type": "color",
+        "$value": "#dbf5f7"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#afe0ed"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#83c0d6"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#4ca1c2"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#1b7f9e"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#12647e"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#094a60"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#033142"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#001b29"
+      }
+    },
+    "green": {
+      "100": {
+        "$type": "color",
+        "$value": "#eaf5f2"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#b8e5d1"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#89ccad"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#53b087"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#00875d"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#006b48"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#005637"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#003f25"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#002915"
+      }
+    },
+    "orange": {
+      "100": {
+        "$type": "color",
+        "$value": "#ffecd9"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#ffc6a1"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#f7a06a"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#e87a38"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#c75300"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#a34400"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#813600"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#612900"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#422000"
+      }
+    },
+    "red": {
+      "100": {
+        "$type": "color",
+        "$value": "#ffecea"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#ffc1ba"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#ff938a"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#ff5d57"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#e52135"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#ba1729"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#910d1e"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#690413"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#450002"
+      }
+    },
+    "purple": {
+      "100": {
+        "$type": "color",
+        "$value": "#f6f0fa"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#f0d6f5"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#daafe0"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#c388cc"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#a25bad"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#85438f"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#682d71"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#491552"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#33003b"
+      }
+    },
+    "alpha": {
+      "white": {
+        "0A": {
+          "$type": "color",
+          "$value": "#ffffff00"
+        },
+        "5A": {
+          "$type": "color",
+          "$value": "#ffffff0d"
+        },
+        "10A": {
+          "$type": "color",
+          "$value": "#ffffff1a"
+        },
+        "15A": {
+          "$type": "color",
+          "$value": "#ffffff26"
+        },
+        "20A": {
+          "$type": "color",
+          "$value": "#ffffff33"
+        },
+        "25A": {
+          "$type": "color",
+          "$value": "#ffffff40"
+        },
+        "30A": {
+          "$type": "color",
+          "$value": "#ffffff4d"
+        },
+        "35A": {
+          "$type": "color",
+          "$value": "#ffffff59"
+        },
+        "40A": {
+          "$type": "color",
+          "$value": "#ffffff66"
+        },
+        "45A": {
+          "$type": "color",
+          "$value": "#ffffff73"
+        },
+        "50A": {
+          "$type": "color",
+          "$value": "#ffffff80"
+        },
+        "55A": {
+          "$type": "color",
+          "$value": "#ffffff8c"
+        },
+        "60A": {
+          "$type": "color",
+          "$value": "#ffffff99"
+        },
+        "65A": {
+          "$type": "color",
+          "$value": "#ffffffa6"
+        },
+        "70A": {
+          "$type": "color",
+          "$value": "#ffffffb2"
+        },
+        "75A": {
+          "$type": "color",
+          "$value": "#ffffffbf"
+        },
+        "80A": {
+          "$type": "color",
+          "$value": "#ffffffcc"
+        }
+      },
+      "snow": {
+        "40A": {
+          "$type": "color",
+          "$value": "#ffffff66"
+        }
+      },
+      "marble": {
+        "40A": {
+          "$type": "color",
+          "$value": "#f2f4f666"
+        }
+      },
+      "limestone": {
+        "40A": {
+          "$type": "color",
+          "$value": "#faf8f266"
+        }
+      },
+      "charcoal": {
+        "40A": {
+          "$type": "color",
+          "$value": "#474c5066"
+        }
+      },
+      "leather": {
+        "40A": {
+          "$type": "color",
+          "$value": "#26292b66"
+        }
+      },
+      "jet": {
+        "40A": {
+          "$type": "color",
+          "$value": "#10182066"
+        }
+      },
+      "black": {
+        "0A": {
+          "$type": "color",
+          "$value": "#00000000"
+        },
+        "5A": {
+          "$type": "color",
+          "$value": "#0000000d"
+        },
+        "10A": {
+          "$type": "color",
+          "$value": "#0000001a"
+        },
+        "15A": {
+          "$type": "color",
+          "$value": "#00000026"
+        },
+        "20A": {
+          "$type": "color",
+          "$value": "#00000033"
+        },
+        "25A": {
+          "$type": "color",
+          "$value": "#00000040"
+        },
+        "30A": {
+          "$type": "color",
+          "$value": "#0000004d"
+        },
+        "35A": {
+          "$type": "color",
+          "$value": "#00000059"
+        },
+        "40A": {
+          "$type": "color",
+          "$value": "#00000066"
+        },
+        "45A": {
+          "$type": "color",
+          "$value": "#00000073"
+        },
+        "50A": {
+          "$type": "color",
+          "$value": "#00000080"
+        },
+        "55A": {
+          "$type": "color",
+          "$value": "#0000008c"
+        },
+        "60A": {
+          "$type": "color",
+          "$value": "#00000099"
+        },
+        "65A": {
+          "$type": "color",
+          "$value": "#000000a6"
+        },
+        "70A": {
+          "$type": "color",
+          "$value": "#000000b2"
+        },
+        "75A": {
+          "$type": "color",
+          "$value": "#000000bf"
+        },
+        "80A": {
+          "$type": "color",
+          "$value": "#000000cc"
+        }
+      },
+      "gray": {
+        "300": {
+          "40A": {
+            "$type": "color",
+            "$value": "#b1b5b966"
+          }
+        },
+        "400": {
+          "10A": {
+            "$type": "color",
+            "$value": "#91959a1a"
+          },
+          "40A": {
+            "$type": "color",
+            "$value": "#91959a66"
+          }
+        },
+        "500": {
+          "0A": {
+            "$type": "color",
+            "$value": "#72777d00"
+          },
+          "10A": {
+            "$type": "color",
+            "$value": "#72777d1a"
+          },
+          "40A": {
+            "$type": "color",
+            "$value": "#72777d66"
+          }
+        },
+        "600": {
+          "10A": {
+            "$type": "color",
+            "$value": "#5f646a1a"
+          },
+          "40A": {
+            "$type": "color",
+            "$value": "#61666c66"
+          }
+        },
+        "700": {
+          "40A": {
+            "$type": "color",
+            "$value": "#4c515766"
+          }
+        }
+      },
+      "blue": {
+        "200": {
+          "40A": {
+            "$type": "color",
+            "$value": "#c7deff66"
+          }
+        },
+        "300": {
+          "40A": {
+            "$type": "color",
+            "$value": "#9abdf566"
+          }
+        },
+        "400": {
+          "40A": {
+            "$type": "color",
+            "$value": "#669ce866"
+          }
+        },
+        "500": {
+          "40A": {
+            "$type": "color",
+            "$value": "#0078cf66"
+          },
+          "0A": {
+            "$type": "color",
+            "$value": "#0078cf00"
+          }
+        },
+        "600": {
+          "40A": {
+            "$type": "color",
+            "$value": "#005ea666"
+          }
+        },
+        "700": {
+          "40A": {
+            "$type": "color",
+            "$value": "#00457e66"
+          }
+        },
+        "800": {
+          "40A": {
+            "$type": "color",
+            "$value": "#002d5966"
+          }
+        }
+      },
+      "teal": {
+        "200": {
+          "40A": {
+            "$type": "color",
+            "$value": "#afe0ed66"
+          }
+        },
+        "300": {
+          "40A": {
+            "$type": "color",
+            "$value": "#83c0d666"
+          }
+        },
+        "400": {
+          "40A": {
+            "$type": "color",
+            "$value": "#4ca1c266"
+          }
+        },
+        "500": {
+          "40A": {
+            "$type": "color",
+            "$value": "#1b7f9e66"
+          },
+          "0A": {
+            "$type": "color",
+            "$value": "#1b7f9e00"
+          }
+        },
+        "600": {
+          "40A": {
+            "$type": "color",
+            "$value": "#12647e66"
+          }
+        },
+        "700": {
+          "40A": {
+            "$type": "color",
+            "$value": "#094a6066"
+          }
+        },
+        "800": {
+          "40A": {
+            "$type": "color",
+            "$value": "#03314266"
+          }
+        }
+      },
+      "green": {
+        "400": {
+          "40A": {
+            "$type": "color",
+            "$value": "#53b08766"
+          }
+        },
+        "500": {
+          "40A": {
+            "$type": "color",
+            "$value": "#00875d66"
+          }
+        },
+        "600": {
+          "40A": {
+            "$type": "color",
+            "$value": "#006b4866"
+          }
+        }
+      },
+      "orange": {
+        "400": {
+          "40A": {
+            "$type": "color",
+            "$value": "#e87a3866"
+          }
+        },
+        "500": {
+          "40A": {
+            "$type": "color",
+            "$value": "#c7530066"
+          }
+        },
+        "600": {
+          "40A": {
+            "$type": "color",
+            "$value": "#a3440066"
+          }
+        }
+      },
+      "red": {
+        "400": {
+          "40A": {
+            "$type": "color",
+            "$value": "#ff5d5766"
+          }
+        },
+        "500": {
+          "40A": {
+            "$type": "color",
+            "$value": "#e5213566"
+          }
+        },
+        "600": {
+          "40A": {
+            "$type": "color",
+            "$value": "#ba172966"
+          }
+        }
+      }
+    },
+    "FIGMA ONLY": {
+      "Chase": {
+        "Black": {
+          "$type": "color",
+          "$value": "#101820"
+        },
+        "Blue": {
+          "$type": "color",
+          "$value": "#005eb8"
+        }
+      },
+      "JPMorgan": {
+        "Brown": {
+          "$type": "color",
+          "$value": "#3a2206"
+        }
+      }
+    }
+  }
+}
diff --git a/packages/theme/tokens/palette/blue-light.tokens.json b/packages/theme/tokens/palette/blue-light.tokens.json
new file mode 100644
index 0000000000..e3ec734d3d
--- /dev/null
+++ b/packages/theme/tokens/palette/blue-light.tokens.json
@@ -0,0 +1,628 @@
+{
+  "palette": {
+    "accent": {
+      "stronger": {
+        "$type": "color",
+        "$value": "{color.blue.700}"
+      },
+      "stronger-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.blue.700.40A}"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "{color.blue.600}"
+      },
+      "strong-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.blue.600.40A}"
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.blue.500}"
+      },
+      "none": {
+        "$type": "color",
+        "$value": "{color.alpha.blue.500.0A}"
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.blue.500.40A}"
+      },
+      "weak": {
+        "$type": "color",
+        "$value": "{color.blue.400}"
+      },
+      "weaker": {
+        "$type": "color",
+        "$value": "{color.blue.200}"
+      },
+      "weaker-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.blue.200.40A}"
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.blue.100}"
+      },
+      "action-hover": {
+        "$type": "color",
+        "$value": "{color.blue.600}"
+      },
+      "action-active": {
+        "$type": "color",
+        "$value": "{color.blue.800}"
+      }
+    },
+    "alpha": {
+      "strong": {
+        "$type": "color",
+        "$value": "{color.alpha.black.45A}"
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.alpha.black.30A}"
+      },
+      "weak": {
+        "$type": "color",
+        "$value": "{color.alpha.black.15A}"
+      },
+      "weaker": {
+        "$type": "color",
+        "$value": "{color.alpha.black.10A}"
+      },
+      "none": {
+        "$type": "color",
+        "$value": "{color.alpha.black.0A}"
+      },
+      "backdrop": {
+        "$type": "color",
+        "$value": "{color.alpha.white.70A}"
+      }
+    },
+    "background": {
+      "primary": {
+        "$type": "color",
+        "$value": "{color.snow}"
+      },
+      "primary-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.snow.40A}"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "{color.marble}"
+      },
+      "secondary-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.marble.40A}"
+      },
+      "tertiary": {
+        "$type": "color",
+        "$value": "{color.limestone}"
+      },
+      "tertiary-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.limestone.40A}"
+      }
+    },
+    "categorical": {
+      "1": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.cobalt.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.cobalt.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.cobalt.100}"
+        }
+      },
+      "2": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.cider.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.cider.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.cider.100}"
+        }
+      },
+      "3": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.plum.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.plum.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.plum.100}"
+        }
+      },
+      "4": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.aqua.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.aqua.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.aqua.100}"
+        }
+      },
+      "5": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.slate.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.slate.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.slate.100}"
+        }
+      },
+      "6": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.rose.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.rose.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.rose.100}"
+        }
+      },
+      "7": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.olive.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.olive.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.olive.100}"
+        }
+      },
+      "8": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.salmon.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.salmon.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.salmon.100}"
+        }
+      },
+      "9": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.indigo.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.indigo.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.indigo.100}"
+        }
+      },
+      "10": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.jade.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.jade.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.jade.100}"
+        }
+      },
+      "11": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.citrine.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.citrine.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.citrine.100}"
+        }
+      },
+      "12": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.autumn.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.autumn.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.autumn.100}"
+        }
+      },
+      "13": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.lavender.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.lavender.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.lavender.100}"
+        }
+      },
+      "14": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.ocean.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.ocean.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.ocean.100}"
+        }
+      },
+      "15": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.smoke.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.smoke.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.smoke.100}"
+        }
+      },
+      "16": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.fuchsia.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.fuchsia.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.fuchsia.100}"
+        }
+      },
+      "17": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.lime.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.lime.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.lime.100}"
+        }
+      },
+      "18": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.fur.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.fur.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.fur.100}"
+        }
+      },
+      "19": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.violet.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.violet.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.violet.100}"
+        }
+      },
+      "20": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.forest.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.forest.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.forest.100}"
+        }
+      }
+    },
+    "foreground": {
+      "primary": {
+        "$type": "color",
+        "$value": "{color.black}"
+      },
+      "primary-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.black.40A}"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "{color.gray.700}"
+      },
+      "secondary-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.700.40A}"
+      },
+      "primary-alt": {
+        "$type": "color",
+        "$value": "{color.white}"
+      },
+      "primary-alt-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.white.40A}"
+      },
+      "hover": {
+        "$type": "color",
+        "$value": "{color.blue.600}"
+      },
+      "active": {
+        "$type": "color",
+        "$value": "{color.blue.700}"
+      },
+      "visited": {
+        "$type": "color",
+        "$value": "{color.purple.800}"
+      }
+    },
+    "info": {
+      "default": {
+        "$type": "color",
+        "$value": "{color.blue.500}"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "{color.blue.600}"
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.blue.100}"
+      }
+    },
+    "negative": {
+      "strong": {
+        "$type": "color",
+        "$value": "{color.red.600}"
+      },
+      "strong disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.red.600.40A}"
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.red.500}"
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.red.500.40A}"
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.red.100}"
+      },
+      "action-hover": {
+        "$type": "color",
+        "$value": "{color.red.600}"
+      },
+      "action-active": {
+        "$type": "color",
+        "$value": "{color.red.800}"
+      }
+    },
+    "neutral": {
+      "strong": {
+        "$type": "color",
+        "$value": "{color.gray.600}"
+      },
+      "strong-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.600.40A}"
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.gray.500}"
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.500.40A}"
+      },
+      "readonly": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.500.10A}"
+      },
+      "weak": {
+        "$type": "color",
+        "$value": "{color.gray.400}"
+      },
+      "weak-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.400.40A}"
+      },
+      "weak-readonly": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.400.10A}"
+      },
+      "weaker": {
+        "$type": "color",
+        "$value": "{color.gray.300}"
+      },
+      "weaker-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.300.40A}"
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.gray.200}"
+      },
+      "action-hover": {
+        "$type": "color",
+        "$value": "{color.gray.600}"
+      },
+      "action-active": {
+        "$type": "color",
+        "$value": "{color.gray.800}"
+      }
+    },
+    "positive": {
+      "strong": {
+        "$type": "color",
+        "$value": "{color.green.600}"
+      },
+      "strong disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.green.600.40A}"
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.green.500}"
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.green.500.40A}"
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.green.100}"
+      },
+      "action-hover": {
+        "$type": "color",
+        "$value": "{color.green.600}"
+      },
+      "action-active": {
+        "$type": "color",
+        "$value": "{color.green.800}"
+      }
+    },
+    "shadow": {
+      "100": {
+        "$type": "color",
+        "$value": "{color.alpha.black.10A}"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "{color.alpha.black.10A}"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "{color.alpha.black.20A}"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "{color.alpha.black.20A}"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "{color.alpha.black.30A}"
+      }
+    },
+    "warning": {
+      "strong": {
+        "$type": "color",
+        "$value": "{color.orange.600}"
+      },
+      "strong disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.orange.600.40A}"
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.orange.500}"
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.orange.500.40A}"
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.orange.100}"
+      },
+      "action-hover": {
+        "$type": "color",
+        "$value": "{color.orange.600}"
+      },
+      "action-active": {
+        "$type": "color",
+        "$value": "{color.orange.800}"
+      }
+    },
+    "FIGMA ONLY": {
+      "jpmorgan": {
+        "$type": "color",
+        "$value": "{color.FIGMA ONLY.JPMorgan.Brown}"
+      },
+      "chase": {
+        "$type": "color",
+        "$value": "{color.FIGMA ONLY.Chase.Black}"
+      },
+      "chase-symbol": {
+        "$type": "color",
+        "$value": "{color.FIGMA ONLY.Chase.Blue}"
+      }
+    },
+    "transparent": {
+      "$type": "color",
+      "$value": "{color.alpha.white.0A}"
+    }
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index e8a3f37bc9..4d2093e70f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1124,6 +1124,46 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@bundled-es-modules/deepmerge@npm:^4.3.1":
+  version: 4.3.1
+  resolution: "@bundled-es-modules/deepmerge@npm:4.3.1"
+  dependencies:
+    deepmerge: "npm:^4.3.1"
+  checksum: 10/b96ad879ec052591ea9f3f3570294ee7a808df9f60c7e21977ee8dbdc3156324de7f85a432c9b290c73fec3519ee169a963002ddec9bc00cbca9582aa092910b
+  languageName: node
+  linkType: hard
+
+"@bundled-es-modules/glob@npm:^10.4.2":
+  version: 10.4.2
+  resolution: "@bundled-es-modules/glob@npm:10.4.2"
+  dependencies:
+    buffer: "npm:^6.0.3"
+    events: "npm:^3.3.0"
+    glob: "npm:^10.4.2"
+    patch-package: "npm:^8.0.0"
+    path: "npm:^0.12.7"
+    stream: "npm:^0.0.3"
+    string_decoder: "npm:^1.3.0"
+    url: "npm:^0.11.3"
+  checksum: 10/7195b81873064c9f1ddfa687f8a36f4ca793b5c1051856792c8c3266944f4ab752316c4e83d265becb08c1b6f4f78655c53193dad2a35a2649f9c51e80f62af4
+  languageName: node
+  linkType: hard
+
+"@bundled-es-modules/memfs@npm:^4.9.4":
+  version: 4.9.4
+  resolution: "@bundled-es-modules/memfs@npm:4.9.4"
+  dependencies:
+    assert: "npm:^2.0.0"
+    buffer: "npm:^6.0.3"
+    events: "npm:^3.3.0"
+    memfs: "npm:^4.9.3"
+    path: "npm:^0.12.7"
+    stream: "npm:^0.0.3"
+    util: "npm:^0.12.5"
+  checksum: 10/a11749ef14593a35610df720ae7ab9ce889c1cd0eff49451f68371913d236604bfc305e6e7bcd37c22438b0124937831a4a4b57c40d176dbdc792ccba99178b2
+  languageName: node
+  linkType: hard
+
 "@bundled-es-modules/statuses@npm:^1.0.1":
   version: 1.0.1
   resolution: "@bundled-es-modules/statuses@npm:1.0.1"
@@ -2422,6 +2462,38 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jsonjoy.com/base64@npm:^1.1.1":
+  version: 1.1.2
+  resolution: "@jsonjoy.com/base64@npm:1.1.2"
+  peerDependencies:
+    tslib: 2
+  checksum: 10/d76bb58eff841c090d9bf69a073611ffa73c40a664ccbcea689f65961f57d7b24051269d06b437e4f6204285d6ba92f50f587c5e95c5f9e4f10b36a2ed4cd0c8
+  languageName: node
+  linkType: hard
+
+"@jsonjoy.com/json-pack@npm:^1.0.3":
+  version: 1.1.0
+  resolution: "@jsonjoy.com/json-pack@npm:1.1.0"
+  dependencies:
+    "@jsonjoy.com/base64": "npm:^1.1.1"
+    "@jsonjoy.com/util": "npm:^1.1.2"
+    hyperdyperid: "npm:^1.2.0"
+    thingies: "npm:^1.20.0"
+  peerDependencies:
+    tslib: 2
+  checksum: 10/cd2776085ad56b470cd53137880b87c2503b07781756c50f1e9f40dd909abeba130a6144d203fcf605ec03dee4cd19bb3424169c8cb588f90a3f06939994c64e
+  languageName: node
+  linkType: hard
+
+"@jsonjoy.com/util@npm:^1.1.2, @jsonjoy.com/util@npm:^1.3.0":
+  version: 1.5.0
+  resolution: "@jsonjoy.com/util@npm:1.5.0"
+  peerDependencies:
+    tslib: 2
+  checksum: 10/5b370183700cb40af52841294ba99c3dfb3dcb7fe2a122e15c737eb908d11392d314b75518874c7d631092bb29658ebe298d174b05baeb1adeb33884b9aa33cf
+  languageName: node
+  linkType: hard
+
 "@lexical/clipboard@npm:0.17.1":
   version: 0.17.1
   resolution: "@lexical/clipboard@npm:0.17.1"
@@ -3374,6 +3446,8 @@ __metadata:
     rollup-plugin-esbuild: "npm:^6.1.1"
     rollup-plugin-postcss: "npm:^4.0.2"
     storybook: "npm:^8.4.4"
+    style-dictionary: "npm:^4.1.4"
+    style-dictionary-utils: "npm:^4.0.0"
     stylelint: "npm:^16.0.0"
     typescript: "npm:4.6.4"
     vite: "npm:^5.0.0"
@@ -5725,6 +5799,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@zip.js/zip.js@npm:^2.7.44":
+  version: 2.7.53
+  resolution: "@zip.js/zip.js@npm:2.7.53"
+  checksum: 10/e74098fee4b21d012878410aa446b44158c958527280fc4bb865fd24c6e4539035a8d4ef054ceccd51eaa849ce0b67baedf20dacf7c8886beecbaa2243899b99
+  languageName: node
+  linkType: hard
+
 "abbrev@npm:1":
   version: 1.1.1
   resolution: "abbrev@npm:1.1.1"
@@ -6107,6 +6188,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"assert@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "assert@npm:2.1.0"
+  dependencies:
+    call-bind: "npm:^1.0.2"
+    is-nan: "npm:^1.3.2"
+    object-is: "npm:^1.1.5"
+    object.assign: "npm:^4.1.4"
+    util: "npm:^0.12.5"
+  checksum: 10/6b9d813c8eef1c0ac13feac5553972e4bd180ae16000d4eb5c0ded2489188737c75a5aacefc97a985008b37502f62fe1bad34da1a7481a54bbfabec3964c8aa7
+  languageName: node
+  linkType: hard
+
 "assertion-error@npm:^2.0.1":
   version: 2.0.1
   resolution: "assertion-error@npm:2.0.1"
@@ -6513,7 +6607,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"call-bind@npm:^1.0.2, call-bind@npm:^1.0.7":
+"call-bind@npm:^1.0.0, call-bind@npm:^1.0.2, call-bind@npm:^1.0.5, call-bind@npm:^1.0.7":
   version: 1.0.7
   resolution: "call-bind@npm:1.0.7"
   dependencies:
@@ -6617,6 +6711,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chalk@npm:^5.3.0":
+  version: 5.3.0
+  resolution: "chalk@npm:5.3.0"
+  checksum: 10/6373caaab21bd64c405bfc4bd9672b145647fc9482657b5ea1d549b3b2765054e9d3d928870cdf764fb4aad67555f5061538ff247b8310f110c5c888d92397ea
+  languageName: node
+  linkType: hard
+
+"change-case@npm:^5.3.0":
+  version: 5.4.4
+  resolution: "change-case@npm:5.4.4"
+  checksum: 10/446e5573f3c854290a91292afef92b957d2e43a928260c91989b482aa860caaa29711b6725fc40c200af68061cbab357b033446d16a17bc5c553636994074e92
+  languageName: node
+  linkType: hard
+
 "character-entities-html4@npm:^2.0.0":
   version: 2.1.0
   resolution: "character-entities-html4@npm:2.1.0"
@@ -6942,6 +7050,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"color2k@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "color2k@npm:2.0.3"
+  checksum: 10/63385b3c43749a96a4edfd5f4d30103f850e5a4ab01ad39ec70bebd940a237ab79cbd2d7b2bf4eede6ef6122a1b904877f628500fdc5521310e39d3572370d6c
+  languageName: node
+  linkType: hard
+
 "colord@npm:^2.9.1, colord@npm:^2.9.3":
   version: 2.9.3
   resolution: "colord@npm:2.9.3"
@@ -7000,6 +7115,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"commander@npm:^8.3.0":
+  version: 8.3.0
+  resolution: "commander@npm:8.3.0"
+  checksum: 10/6b7b5d334483ce24bd73c5dac2eab901a7dbb25fd983ea24a1eeac6e7166bb1967f641546e8abf1920afbde86a45fbfe5812fbc69d0dc451bb45ca416a12a3a3
+  languageName: node
+  linkType: hard
+
 "commander@npm:^9.4.1":
   version: 9.5.0
   resolution: "commander@npm:9.5.0"
@@ -7021,6 +7143,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"component-emitter@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "component-emitter@npm:2.0.0"
+  checksum: 10/017715272fcf82203932237260451df4c7c27e32a51a4a291faf6f503d6ef9e8583add993850cb5b98cc0c1b0846ff0c68938ad3ef1d544f9b480a290e74fb4f
+  languageName: node
+  linkType: hard
+
 "compute-scroll-into-view@npm:^3.0.0":
   version: 3.0.0
   resolution: "compute-scroll-into-view@npm:3.0.0"
@@ -9461,7 +9590,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:^10.0.0, glob@npm:^10.3.10, glob@npm:^10.3.7":
+"glob@npm:^10.0.0, glob@npm:^10.3.10, glob@npm:^10.3.7, glob@npm:^10.4.2":
   version: 10.4.5
   resolution: "glob@npm:10.4.5"
   dependencies:
@@ -9975,6 +10104,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hyperdyperid@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "hyperdyperid@npm:1.2.0"
+  checksum: 10/64abb5568ff17aa08ac0175ae55e46e22831c5552be98acdd1692081db0209f36fff58b31432017b4e1772c178962676a2cc3c54e4d5d7f020d7710cec7ad7a6
+  languageName: node
+  linkType: hard
+
 "iconv-lite@npm:0.6, iconv-lite@npm:^0.6.2":
   version: 0.6.3
   resolution: "iconv-lite@npm:0.6.3"
@@ -10103,6 +10239,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"inherits@npm:2.0.3":
+  version: 2.0.3
+  resolution: "inherits@npm:2.0.3"
+  checksum: 10/8771303d66c51be433b564427c16011a8e3fbc3449f1f11ea50efb30a4369495f1d0e89f0fc12bdec0bd7e49102ced5d137e031d39ea09821cb3c717fcf21e69
+  languageName: node
+  linkType: hard
+
 "ini@npm:2.0.0":
   version: 2.0.0
   resolution: "ini@npm:2.0.0"
@@ -10429,6 +10572,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-nan@npm:^1.3.2":
+  version: 1.3.2
+  resolution: "is-nan@npm:1.3.2"
+  dependencies:
+    call-bind: "npm:^1.0.0"
+    define-properties: "npm:^1.1.3"
+  checksum: 10/1f784d3472c09bc2e47acba7ffd4f6c93b0394479aa613311dc1d70f1bfa72eb0846c81350967722c959ba65811bae222204d6c65856fdce68f31986140c7b0e
+  languageName: node
+  linkType: hard
+
 "is-node-process@npm:^1.0.1, is-node-process@npm:^1.2.0":
   version: 1.2.0
   resolution: "is-node-process@npm:1.2.0"
@@ -10874,6 +11027,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"json-stable-stringify@npm:^1.0.2":
+  version: 1.1.1
+  resolution: "json-stable-stringify@npm:1.1.1"
+  dependencies:
+    call-bind: "npm:^1.0.5"
+    isarray: "npm:^2.0.5"
+    jsonify: "npm:^0.0.1"
+    object-keys: "npm:^1.1.1"
+  checksum: 10/60853c1f63451319b5c7953465a555aa816cf84e60e3ca36b6c05225d8fdc4615127fb4ecb92f9f5ad880c552ab8cbae9a519f78b995e7788d6d89e57afafdeb
+  languageName: node
+  linkType: hard
+
 "json-stringify-safe@npm:~5.0.1":
   version: 5.0.1
   resolution: "json-stringify-safe@npm:5.0.1"
@@ -10915,6 +11080,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jsonify@npm:^0.0.1":
+  version: 0.0.1
+  resolution: "jsonify@npm:0.0.1"
+  checksum: 10/7b86b6f4518582ff1d8b7624ed6c6277affd5246445e864615dbdef843a4057ac58587684faf129ea111eeb80e01c15f0a4d9d03820eb3f3985fa67e81b12398
+  languageName: node
+  linkType: hard
+
 "jsprim@npm:^2.0.2":
   version: 2.0.2
   resolution: "jsprim@npm:2.0.2"
@@ -11728,6 +11900,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"memfs@npm:^4.9.3":
+  version: 4.14.0
+  resolution: "memfs@npm:4.14.0"
+  dependencies:
+    "@jsonjoy.com/json-pack": "npm:^1.0.3"
+    "@jsonjoy.com/util": "npm:^1.3.0"
+    tree-dump: "npm:^1.0.1"
+    tslib: "npm:^2.0.0"
+  checksum: 10/d1a5a38fb8e97cbdff012e47d05c92852484f37a03e9c57b252fdc180c4ffe35ee7ec83acea3be8950e1f13f9152db4d5478124b43f9673f4653e741ba26d584
+  languageName: node
+  linkType: hard
+
 "memoize-one@npm:>=3.1.1 <6":
   version: 5.2.1
   resolution: "memoize-one@npm:5.2.1"
@@ -13550,6 +13734,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"patch-package@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "patch-package@npm:8.0.0"
+  dependencies:
+    "@yarnpkg/lockfile": "npm:^1.1.0"
+    chalk: "npm:^4.1.2"
+    ci-info: "npm:^3.7.0"
+    cross-spawn: "npm:^7.0.3"
+    find-yarn-workspace-root: "npm:^2.0.0"
+    fs-extra: "npm:^9.0.0"
+    json-stable-stringify: "npm:^1.0.2"
+    klaw-sync: "npm:^6.0.0"
+    minimist: "npm:^1.2.6"
+    open: "npm:^7.4.2"
+    rimraf: "npm:^2.6.3"
+    semver: "npm:^7.5.3"
+    slash: "npm:^2.0.0"
+    tmp: "npm:^0.0.33"
+    yaml: "npm:^2.2.2"
+  bin:
+    patch-package: index.js
+  checksum: 10/8714322c35b29266e71c82d58443ce5322400a546a3327f1b8907b8eeb7e366dff33c4fdfbd25e3f0b3a9927189c26e9ac60636ca1e4140d6dbc11cca10f9b5d
+  languageName: node
+  linkType: hard
+
 "path-browserify@npm:^1.0.1":
   version: 1.0.1
   resolution: "path-browserify@npm:1.0.1"
@@ -13616,6 +13825,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-unified@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "path-unified@npm:0.1.0"
+  checksum: 10/6a433dc924a04be67860c09deba737013f4e8834c1514072a8b9e346fb0b50f20bbdc39d37ede1da5d37c9ccb1b1a99faa730750020b056444dcbbbedf722330
+  languageName: node
+  linkType: hard
+
+"path@npm:^0.12.7":
+  version: 0.12.7
+  resolution: "path@npm:0.12.7"
+  dependencies:
+    process: "npm:^0.11.1"
+    util: "npm:^0.10.3"
+  checksum: 10/d49d101f9596613cf4cd1d4ebc4e64ba9a9df5d9cd75a410cfe87a88ce4bf0e2617ff44b92025376f7ecb02e88a6308b27f7f39d810f2335a5126f762487adfb
+  languageName: node
+  linkType: hard
+
 "pathe@npm:^1.1.2":
   version: 1.1.2
   resolution: "pathe@npm:1.1.2"
@@ -14359,7 +14585,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"process@npm:^0.11.10":
+"process@npm:^0.11.1, process@npm:^0.11.10":
   version: 0.11.10
   resolution: "process@npm:0.11.10"
   checksum: 10/dbaa7e8d1d5cf375c36963ff43116772a989ef2bb47c9bdee20f38fd8fc061119cf38140631cf90c781aca4d3f0f0d2c834711952b728953f04fd7d238f59f5b
@@ -14479,6 +14705,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"punycode@npm:^1.4.1":
+  version: 1.4.1
+  resolution: "punycode@npm:1.4.1"
+  checksum: 10/af2700dde1a116791ff8301348ff344c47d6c224e875057237d1b5112035655fb07a6175cfdb8bf0e3a8cdfd2dc82b3a622e0aefd605566c0e949a6d0d1256a4
+  languageName: node
+  linkType: hard
+
 "punycode@npm:^2.1.0, punycode@npm:^2.1.1, punycode@npm:^2.3.1":
   version: 2.3.1
   resolution: "punycode@npm:2.3.1"
@@ -14486,7 +14719,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"qs@npm:6.13.0, qs@npm:^6.10.2":
+"qs@npm:6.13.0, qs@npm:^6.10.2, qs@npm:^6.12.3":
   version: 6.13.0
   resolution: "qs@npm:6.13.0"
   dependencies:
@@ -16142,6 +16375,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stream@npm:^0.0.3":
+  version: 0.0.3
+  resolution: "stream@npm:0.0.3"
+  dependencies:
+    component-emitter: "npm:^2.0.0"
+  checksum: 10/a40db1ce8def8929c689c98c1644288d4099d34be8e8f72853c7cb8e2bae64e90f5c967f79fd792cdf349d8a3baf38f19d99e7f7ff13c35b4f7c5ae1b78c0115
+  languageName: node
+  linkType: hard
+
 "streamsearch@npm:^1.1.0":
   version: 1.1.0
   resolution: "streamsearch@npm:1.1.0"
@@ -16289,6 +16531,39 @@ __metadata:
   languageName: node
   linkType: hard
 
+"style-dictionary-utils@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "style-dictionary-utils@npm:4.0.0"
+  dependencies:
+    color2k: "npm:^2.0.3"
+  peerDependencies:
+    style-dictionary: ^4
+  checksum: 10/b1d5d1c0464e3bcee5d3f4b3d61ccdc4e0ecdf9771fd5d01593c61d8a1d5a246ef0d53b2d45300041ed33086fe5558d51e91b6b9f540cd988cdee6d3389ee9b1
+  languageName: node
+  linkType: hard
+
+"style-dictionary@npm:^4.1.4":
+  version: 4.1.4
+  resolution: "style-dictionary@npm:4.1.4"
+  dependencies:
+    "@bundled-es-modules/deepmerge": "npm:^4.3.1"
+    "@bundled-es-modules/glob": "npm:^10.4.2"
+    "@bundled-es-modules/memfs": "npm:^4.9.4"
+    "@zip.js/zip.js": "npm:^2.7.44"
+    chalk: "npm:^5.3.0"
+    change-case: "npm:^5.3.0"
+    commander: "npm:^8.3.0"
+    is-plain-obj: "npm:^4.1.0"
+    json5: "npm:^2.2.2"
+    patch-package: "npm:^8.0.0"
+    path-unified: "npm:^0.1.0"
+    tinycolor2: "npm:^1.6.0"
+  bin:
+    style-dictionary: bin/style-dictionary.js
+  checksum: 10/2af232c299a06a5b160634d300d4896b4a0f5ef67d4c0792c065962e24b7f17262901db8df1945cda7a4720993ab069db6dda35842b63e7b9890a566ec1992bc
+  languageName: node
+  linkType: hard
+
 "style-inject@npm:^0.3.0":
   version: 0.3.0
   resolution: "style-inject@npm:0.3.0"
@@ -16700,6 +16975,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"thingies@npm:^1.20.0":
+  version: 1.21.0
+  resolution: "thingies@npm:1.21.0"
+  peerDependencies:
+    tslib: ^2
+  checksum: 10/5c3954b67391d1432c252cb7089f29480e2164f06987a63d83c9747aa6999bfc313d6edfce71ed967316a3378dfcaf38f35ea77aaa5d423edaf776b8ff854f83
+  languageName: node
+  linkType: hard
+
 "thread-stream@npm:^2.0.0":
   version: 2.4.1
   resolution: "thread-stream@npm:2.4.1"
@@ -16744,7 +17028,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tinycolor2@npm:^1.4.1, tinycolor2@npm:^1.4.2":
+"tinycolor2@npm:^1.4.1, tinycolor2@npm:^1.4.2, tinycolor2@npm:^1.6.0":
   version: 1.6.0
   resolution: "tinycolor2@npm:1.6.0"
   checksum: 10/066c3acf4f82b81c58a0d3ab85f49407efe95ba87afc3c7a16b1d77625193dfbe10dd46c26d0a263c1137361dd5a6a68bff2fb71def5fb9b9aec940fb030bcd4
@@ -16887,6 +17171,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tree-dump@npm:^1.0.1":
+  version: 1.0.2
+  resolution: "tree-dump@npm:1.0.2"
+  peerDependencies:
+    tslib: 2
+  checksum: 10/ddcde4da9ded8edc2fa77fc9153ef8d7fba9cd5f813db27c30c7039191b50e1512b7106f0f4fe7ccaa3aa69f85b4671eda7ed0b9f9d34781eb26ebe4593ad4eb
+  languageName: node
+  linkType: hard
+
 "tree-kill@npm:1.2.2, tree-kill@npm:^1.2.2":
   version: 1.2.2
   resolution: "tree-kill@npm:1.2.2"
@@ -17011,6 +17304,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:^2.0.0":
+  version: 2.8.1
+  resolution: "tslib@npm:2.8.1"
+  checksum: 10/3e2e043d5c2316461cb54e5c7fe02c30ef6dccb3384717ca22ae5c6b5bc95232a6241df19c622d9c73b809bea33b187f6dbc73030963e29950c2141bc32a79f7
+  languageName: node
+  linkType: hard
+
 "tslib@npm:^2.0.1, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0, tslib@npm:^2.5.0, tslib@npm:^2.6.2":
   version: 2.7.0
   resolution: "tslib@npm:2.7.0"
@@ -17417,6 +17717,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"url@npm:^0.11.3":
+  version: 0.11.4
+  resolution: "url@npm:0.11.4"
+  dependencies:
+    punycode: "npm:^1.4.1"
+    qs: "npm:^6.12.3"
+  checksum: 10/e787d070f0756518b982a4653ef6cdf4d9030d8691eee2d483344faf2b530b71d302287fa63b292299455fea5075c502a5ad5f920cb790e95605847f957a65e4
+  languageName: node
+  linkType: hard
+
 "url@npm:~0.11.0":
   version: 0.11.0
   resolution: "url@npm:0.11.0"
@@ -17461,6 +17771,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"util@npm:^0.10.3":
+  version: 0.10.4
+  resolution: "util@npm:0.10.4"
+  dependencies:
+    inherits: "npm:2.0.3"
+  checksum: 10/1200a1ca2b474758342b3a0c5261c56f14ef09ad7eeaec3e6f449f5776ecdfce09a153cad62652b823e74647cdcfd2918552eadd2434783dfb58dabc5061803a
+  languageName: node
+  linkType: hard
+
 "util@npm:^0.12.5":
   version: 0.12.5
   resolution: "util@npm:0.12.5"

From 0e97aabaccf7e2e9f8832dd8a2739e341307b545 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Mon, 11 Nov 2024 13:13:40 +0000
Subject: [PATCH 02/35] Split palette to multiple files

---
 packages/theme/scripts/build-json.mjs         | 168 ++++++++++++++++--
 ...okens.json => blue-light-next.tokens.json} |   0
 2 files changed, 152 insertions(+), 16 deletions(-)
 rename packages/theme/tokens/palette/{blue-light.tokens.json => blue-light-next.tokens.json} (100%)

diff --git a/packages/theme/scripts/build-json.mjs b/packages/theme/scripts/build-json.mjs
index fde9ecad60..9c7f6dd759 100644
--- a/packages/theme/scripts/build-json.mjs
+++ b/packages/theme/scripts/build-json.mjs
@@ -1,54 +1,126 @@
+import { kebabCase } from "change-case";
 import { StyleDictionary } from "style-dictionary-utils";
 
 // TODO: add more styling options here, and theme vs theme next
 function getStyleDictionaryConfig({ mode, density, accent }) {
+  const paletteNextList = [
+    "accent",
+    "corner",
+    "negative",
+    "text",
+    "alpha",
+    "foreground",
+    "neutral",
+    "warning",
+  ];
+
   return {
     source: [
       //   "./tokens/foundation/test.tokens.json",
       "./tokens/foundation/**/*.tokens.json",
-      `./tokens/palette/${accent}-${mode}.tokens.json`,
+      `./tokens/palette/${accent}-${mode}-*.tokens.json`,
       //   `./tokens/characteristics/*.tokens.json`,
       //   "tokens/globals/**/*.tokens.json",
     ],
     // usesDtcg: true,
     platforms: {
       css: {
-        buildPath: `dist/css/${accent}-${mode}-${density}/`,
+        buildPath: "dist/css/",
         prefix: "salt",
         transforms: [
           "attribute/cti",
-          "name/kebab",
+          "salt-ds/name/kebab", // Custom transform, see below
+          // "name/kebab", // https://github.com/amzn/style-dictionary/blob/0fcf229f78e334a5c6bec55725fe92a8de97590c/lib/common/transforms.js#L320-L325
           // "dimension/pixelToRem",
           //   "color/hexAlpha", // style-dictionary-utils transform // doesn't work with $value for some reason
         ],
         files: [
           {
             format: "css/advanced",
-            destination: "variables.css",
+            destination: "foundation/color.css",
+            options: {
+              selector: ".salt-theme", // defaults to :root; set to false to disable
+              outputReferences: true,
+              usesDtcg: true,
+            },
+            // // Use filter to add different `selector` for mode/density/etc.
+            filter: async (token, options) => {
+              //   console.log(token, options)
+              return (
+                token.filePath.includes("colors-categorical.tokens") ||
+                token.filePath.includes("colors.tokens")
+              );
+            },
+          },
+          {
+            format: "css/advanced",
+            destination: "foundation/color-next.css",
+            options: {
+              selector: ".salt-theme.salt-theme-next", // defaults to :root; set to false to disable
+              outputReferences: true,
+              usesDtcg: true,
+            },
+            // // Use filter to add different `selector` for mode/density/etc.
+            filter: async (token, options) => {
+              console.log(token, options);
+              return (
+                token.filePath.includes("colors-next.tokens") &&
+                token.attributes.category === "color" &&
+                !token.attributes.type === "alpha"
+              );
+            },
+          },
+          {
+            format: "css/advanced",
+            destination: "foundation/alpha-next.css",
             options: {
               selector: ".salt-theme.salt-theme-next", // defaults to :root; set to false to disable
-              //   rules: [
-              //     {
-              //       atRule: "@media (min-width: 768px)",
-              //       selector: `body[size="medium"]`, // this will be used instead of body[theme="dark"]`
-              //       matcher: (token) => token.filePath.includes("tablet"), // tokens that match this filter will be added inside the media query
-              //     },
-              //   ],
               outputReferences: true,
               usesDtcg: true,
-              formatting: {
-                // prefix: "color", // this defaults to `--`
-              },
             },
             // // Use filter to add different `selector` for mode/density/etc.
-            // filter: {},
+            filter: async (token, options) => {
+              console.log(token, options);
+              return (
+                token.filePath.includes("colors-next.tokens") &&
+                token.attributes.category === "color" &&
+                token.attributes.type === "alpha"
+              );
+            },
           },
+          ...paletteNextList.map((paletteNextType) => ({
+            format: "css/advanced",
+            destination: `palette/${paletteNextType}-next.css`,
+            options: {
+              selector: `.salt-theme.salt-theme-next[data-mode="${mode}"][data-accent="${accent}"]`, // defaults to :root
+              outputReferences: true,
+              usesDtcg: true,
+            },
+            // // Use filter to add different `selector` for mode/density/etc.
+            filter: async (token, options) => {
+              //   console.log(token, options); //palette-accent
+              return (
+                // next
+                token.filePath.includes("-next.tokens") &&
+                // platte
+                token.attributes.category === "palette" && // or token.filePath.includes("/palette/") &&
+                //
+                token.attributes.type === paletteNextType
+              );
+            },
+          })),
         ],
       },
     },
   };
 }
 
+// Regexps involved with splitting words in various case formats.
+const SPLIT_LOWER_UPPER_RE = /([\p{Ll}\d])(\p{Lu})/gu;
+const SPLIT_UPPER_UPPER_RE = /(\p{Lu})([\p{Lu}][\p{Ll}])/gu;
+// The replacement value for splits.
+const SPLIT_REPLACE_VALUE = "$1\0$2";
+
 for await (const mode of ["light"]) {
   for await (const accent of ["blue"]) {
     // , "md", "ld", "td"
@@ -62,8 +134,72 @@ for await (const mode of ["light"]) {
 
       // const sd = new StyleDictionary(config);
       // await sd.buildAllPlatforms();
-      const myStyleDictionary = new StyleDictionary();
+      const myStyleDictionary = new StyleDictionary(
+        {},
+        { verbosity: "verbose" },
+      );
+      // Custom transform - https://styledictionary.com/reference/hooks/transforms/
+      myStyleDictionary.registerTransform({
+        name: "salt-ds/name/kebab",
+        type: "name",
+        transitive: true,
+        transform: (token, config) => {
+          // attributes: { category: 'color', type: 'alpha',
+          if (
+            token.path.includes("alpha") &&
+            token.attributes.category === "color" &&
+            token.attributes.type === "alpha"
+          ) {
+            const alphaIndex = token.path.findIndex((p) => p === "alpha");
+            const alphaRemovedPath = [
+              ...token.path.slice(0, alphaIndex),
+              ...token.path.slice(alphaIndex + 1),
+            ];
+            // console.log("Token path with alpha removed", alphaRemovedPath);
+
+            /**
+             * export function kebabCase(input: string, options?: Options) {
+                return noCase(input, { delimiter: "-", ...options });
+              }
+              export function noCase(input: string, options?: Options) {
+                const [prefix, words, suffix] = splitPrefixSuffix(input, options);
+                return (
+                  prefix +
+                  words.map(lowerFactory(options?.locale)).join(options?.delimiter ?? " ") +
+                  suffix
+                );
+              }
+              export function split(value: string) {
+                let result = value.trim();
+
+                result = result
+                  .replace(SPLIT_LOWER_UPPER_RE, SPLIT_REPLACE_VALUE)
+                  .replace(SPLIT_UPPER_UPPER_RE, SPLIT_REPLACE_VALUE);
+
+                result = result.replace(DEFAULT_STRIP_REGEXP, "\0");
+
+                let start = 0;
+                let end = result.length;
+
+                // Trim the delimiter from around the output string.
+                while (result.charAt(start) === "\0") start++;
+                if (start === end) return [];
+                while (result.charAt(end - 1) === "\0") end--;
+
+                return result.slice(start, end).split(/\0/g);
+              }
+
+             */
+            // TODO: Change to not split 30A -> 30-A
+            return kebabCase(
+              [config.prefix].concat(alphaRemovedPath).join(" "),
+            );
+          }
+          return kebabCase([config.prefix].concat(token.path).join(" "));
+        },
+      });
       const sd = await myStyleDictionary.extend(config);
+      //   sd.cleanAllPlatforms();
       sd.buildAllPlatforms();
     }
   }
diff --git a/packages/theme/tokens/palette/blue-light.tokens.json b/packages/theme/tokens/palette/blue-light-next.tokens.json
similarity index 100%
rename from packages/theme/tokens/palette/blue-light.tokens.json
rename to packages/theme/tokens/palette/blue-light-next.tokens.json

From 78e262aaaa34f41c0329b17cf58660106591b428 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Mon, 11 Nov 2024 18:39:05 +0000
Subject: [PATCH 03/35] Multi modes? not working

---
 packages/theme/README.md                      |  12 +
 packages/theme/scripts/build-json.mjs         | 133 ++--
 .../sd-utils/format/css-multi-modes.mjs       |  69 ++
 .../tokens/palette/blue-dark-next.tokens.json | 628 ++++++++++++++++++
 4 files changed, 790 insertions(+), 52 deletions(-)
 create mode 100644 packages/theme/scripts/sd-utils/format/css-multi-modes.mjs
 create mode 100644 packages/theme/tokens/palette/blue-dark-next.tokens.json

diff --git a/packages/theme/README.md b/packages/theme/README.md
index 6a335aa3a1..cb5ca4850b 100644
--- a/packages/theme/README.md
+++ b/packages/theme/README.md
@@ -1 +1,13 @@
 This is a regular package
+
+---
+
+## Tokens
+
+1. Run "Export Color Styles" -> "Export Variables" -> "Json (Experimental)"
+1. Select Collection and Mode on plugin UI
+1. Copy output to corresponding `*.tokens.json` file
+1. Modify color tokens
+   1. prefix value with `color.*`, e.g. replace `"{` to `"{color.`
+   1. remove `categorical.` from , e.g. replace `"{color.categorical` to `"{color`
+   1. add `palette` layer to `palette/*.tokens.json`
diff --git a/packages/theme/scripts/build-json.mjs b/packages/theme/scripts/build-json.mjs
index 9c7f6dd759..04f570ccb6 100644
--- a/packages/theme/scripts/build-json.mjs
+++ b/packages/theme/scripts/build-json.mjs
@@ -1,5 +1,6 @@
 import { kebabCase } from "change-case";
 import { StyleDictionary } from "style-dictionary-utils";
+import { cssMultiModes } from "./sd-utils/format/css-multi-modes.mjs";
 
 // TODO: add more styling options here, and theme vs theme next
 function getStyleDictionaryConfig({ mode, density, accent }) {
@@ -18,7 +19,10 @@ function getStyleDictionaryConfig({ mode, density, accent }) {
     source: [
       //   "./tokens/foundation/test.tokens.json",
       "./tokens/foundation/**/*.tokens.json",
-      `./tokens/palette/${accent}-${mode}-*.tokens.json`,
+      // // Individual palette file output
+      // `./tokens/palette/${accent}-${mode}*.tokens.json`,
+      // // combined palette tokens into single file, handled by custom formatter
+      "./tokens/palette/*.tokens.json",
       //   `./tokens/characteristics/*.tokens.json`,
       //   "tokens/globals/**/*.tokens.json",
     ],
@@ -62,7 +66,7 @@ function getStyleDictionaryConfig({ mode, density, accent }) {
             },
             // // Use filter to add different `selector` for mode/density/etc.
             filter: async (token, options) => {
-              console.log(token, options);
+              // console.log(token, options);
               return (
                 token.filePath.includes("colors-next.tokens") &&
                 token.attributes.category === "color" &&
@@ -80,7 +84,7 @@ function getStyleDictionaryConfig({ mode, density, accent }) {
             },
             // // Use filter to add different `selector` for mode/density/etc.
             filter: async (token, options) => {
-              console.log(token, options);
+              // console.log(token, options);
               return (
                 token.filePath.includes("colors-next.tokens") &&
                 token.attributes.category === "color" &&
@@ -88,13 +92,24 @@ function getStyleDictionaryConfig({ mode, density, accent }) {
               );
             },
           },
+          // TODO: different mode-accent will override each other right now.
+          // Inpire from `atRule` option, to work out multiple modes in a single file?
+          // https://github.com/lukasoppermann/style-dictionary-utils/blob/main/src/format/css-advanced.ts
+          // Not really, SD will warn Collision detected, and only use one value at a time, we need to come up with custom syntax to make this work
           ...paletteNextList.map((paletteNextType) => ({
+            // format: "salt-ds/css/multi-modes",
             format: "css/advanced",
             destination: `palette/${paletteNextType}-next.css`,
             options: {
               selector: `.salt-theme.salt-theme-next[data-mode="${mode}"][data-accent="${accent}"]`, // defaults to :root
               outputReferences: true,
               usesDtcg: true,
+              // rules: modes.map((mode) => ({
+              //   selector: `.salt-theme.salt-theme-next[data-mode="${mode}"][data-accent="${accent}"]`,
+              //   matcher: (token) =>
+              //     token.filePath.includes(mode) &&
+              //     token.filePath.includes(accent),
+              // })),
             },
             // // Use filter to add different `selector` for mode/density/etc.
             filter: async (token, options) => {
@@ -116,30 +131,35 @@ function getStyleDictionaryConfig({ mode, density, accent }) {
 }
 
 // Regexps involved with splitting words in various case formats.
-const SPLIT_LOWER_UPPER_RE = /([\p{Ll}\d])(\p{Lu})/gu;
-const SPLIT_UPPER_UPPER_RE = /(\p{Lu})([\p{Lu}][\p{Ll}])/gu;
+const SPLIT_LOWER_UPPER_RE = /([\p{Ll}\d])(\p{Lu})/gu; // ( lower case + digit ) ( upper case )
+const SPLIT_LOWER_NON_DIGIT_UPPER_RE = /([\p{Ll}])(\p{Lu})/gu; // ( lower case  ) ( upper case )
+const SPLIT_UPPER_UPPER_RE = /(\p{Lu})([\p{Lu}][\p{Ll}])/gu; // ( upper case ) ( [ upper case ] [ lower case ] )
 // The replacement value for splits.
 const SPLIT_REPLACE_VALUE = "$1\0$2";
 
-for await (const mode of ["light"]) {
+// Regexp involved with stripping non-word characters from the result.
+const DEFAULT_STRIP_REGEXP = /[^\p{L}\d]+/giu;
+
+// const modes = ["light", "dark"];
+for await (const mode of ["light", "dark"]) {
   for await (const accent of ["blue"]) {
     // , "md", "ld", "td"
     for await (const density of ["hd"]) {
       const config = getStyleDictionaryConfig({ mode, density, accent });
-      // const myStyleDictionary = new StyleDictionary();
-
-      // const extendedSd = await myStyleDictionary.extend(config);
-
-      // await extendedSd.buildAllPlatforms();
 
-      // const sd = new StyleDictionary(config);
-      // await sd.buildAllPlatforms();
-      const myStyleDictionary = new StyleDictionary(
+      const saltStyleDictionary = new StyleDictionary(
         {},
-        { verbosity: "verbose" },
+        { verbosity: "verbose" }, // for debug
       );
+      // TODO: custom file header - https://styledictionary.com/reference/hooks/file-headers/
+
+      saltStyleDictionary.registerFormat({
+        name: "salt-ds/css/multi-modes",
+        format: cssMultiModes,
+      });
+
       // Custom transform - https://styledictionary.com/reference/hooks/transforms/
-      myStyleDictionary.registerTransform({
+      saltStyleDictionary.registerTransform({
         name: "salt-ds/name/kebab",
         type: "name",
         transitive: true,
@@ -157,48 +177,57 @@ for await (const mode of ["light"]) {
             ];
             // console.log("Token path with alpha removed", alphaRemovedPath);
 
-            /**
-             * export function kebabCase(input: string, options?: Options) {
-                return noCase(input, { delimiter: "-", ...options });
-              }
-              export function noCase(input: string, options?: Options) {
-                const [prefix, words, suffix] = splitPrefixSuffix(input, options);
-                return (
-                  prefix +
-                  words.map(lowerFactory(options?.locale)).join(options?.delimiter ?? " ") +
-                  suffix
-                );
-              }
-              export function split(value: string) {
-                let result = value.trim();
-
-                result = result
-                  .replace(SPLIT_LOWER_UPPER_RE, SPLIT_REPLACE_VALUE)
-                  .replace(SPLIT_UPPER_UPPER_RE, SPLIT_REPLACE_VALUE);
-
-                result = result.replace(DEFAULT_STRIP_REGEXP, "\0");
-
-                let start = 0;
-                let end = result.length;
-
-                // Trim the delimiter from around the output string.
-                while (result.charAt(start) === "\0") start++;
-                if (start === end) return [];
-                while (result.charAt(end - 1) === "\0") end--;
-
-                return result.slice(start, end).split(/\0/g);
-              }
-
-             */
-            // TODO: Change to not split 30A -> 30-A
-            return kebabCase(
+            function splitPrefixSuffix(input) {
+              const splitFn = modifiedSplit;
+              const prefixIndex = 0;
+              const suffixIndex = input.length;
+
+              return [
+                input.slice(0, prefixIndex),
+                splitFn(input.slice(prefixIndex, suffixIndex)),
+                input.slice(suffixIndex),
+              ];
+            }
+
+            function specialKebab(input) {
+              const [prefix, words, suffix] = splitPrefixSuffix(input);
+              return (
+                prefix +
+                words.map((input) => input.toLowerCase()).join("-") +
+                suffix
+              );
+            }
+
+            function modifiedSplit(value) {
+              let result = value.trim();
+
+              result = result
+                // `SPLIT_LOWER_NON_DIGIT_UPPER_RE` changed compare with 'change-case' original split
+                // Change to not split 30A -> 30-A
+                .replace(SPLIT_LOWER_NON_DIGIT_UPPER_RE, SPLIT_REPLACE_VALUE)
+                .replace(SPLIT_UPPER_UPPER_RE, SPLIT_REPLACE_VALUE);
+
+              result = result.replace(DEFAULT_STRIP_REGEXP, "\0");
+
+              let start = 0;
+              let end = result.length;
+
+              // Trim the delimiter from around the output string.
+              while (result.charAt(start) === "\0") start++;
+              if (start === end) return [];
+              while (result.charAt(end - 1) === "\0") end--;
+
+              return result.slice(start, end).split(/\0/g);
+            }
+
+            return specialKebab(
               [config.prefix].concat(alphaRemovedPath).join(" "),
             );
           }
           return kebabCase([config.prefix].concat(token.path).join(" "));
         },
       });
-      const sd = await myStyleDictionary.extend(config);
+      const sd = await saltStyleDictionary.extend(config);
       //   sd.cleanAllPlatforms();
       sd.buildAllPlatforms();
     }
diff --git a/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs b/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs
new file mode 100644
index 0000000000..8048a0ac69
--- /dev/null
+++ b/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs
@@ -0,0 +1,69 @@
+import { format } from "prettier";
+// import type { FormatFn, FormatFnArguments, FormattingOptions, TransformedToken } from 'style-dictionary/types'
+import { fileHeader, formattedVariables } from "style-dictionary/utils";
+
+/**
+ * @param {import("style-dictionary/types").FormatFnArguments} param0
+ * @returns {import("style-dictionary/types").FormatFn}
+ */
+export const cssMultiModes = async ({
+  dictionary: originalDictionary,
+  options = {
+    rules: [],
+  },
+  file,
+}) => {
+  // get options
+  const { outputReferences, formatting, usesDtcg } = options;
+  // selector
+  const defaultSelector =
+    file?.options?.selector !== undefined ? file?.options?.selector : ":root";
+  // get queries from file options
+  const rules = file?.options?.rules || [
+    {
+      selector: undefined,
+      matcher: () => true,
+    },
+  ];
+  // set formatting
+  const mergedFormatting = {
+    commentStyle: "long",
+    ...formatting,
+  };
+  // clone dictioxnary
+  const dictionary = { ...originalDictionary };
+
+  // add file header
+  const output = [await fileHeader({ file })];
+  // add single theme css
+  for (const { selector, matcher } of rules) {
+    let preludes = [selector];
+
+    // remove invalid preludes
+    preludes = preludes.filter(Boolean);
+    // filter tokens to only include the ones that pass the matcher
+    const filteredDictionary = {
+      ...dictionary,
+      allTokens: dictionary.allTokens.filter(matcher || (() => true)),
+    };
+    // early abort if no matches
+    if (!filteredDictionary.allTokens.length) continue;
+    // add tokens into root
+    const css = formattedVariables({
+      format: "css",
+      dictionary: filteredDictionary,
+      outputReferences,
+      formatting: mergedFormatting,
+      usesDtcg,
+    });
+    // additional modes
+    let cssWithSelector = css;
+    for (const prelude of preludes.reverse()) {
+      cssWithSelector = `${prelude} { ${cssWithSelector} }`;
+    }
+    // add css with or without query
+    output.push(cssWithSelector);
+  }
+  // return prettified
+  return format(output.join("\n"), { parser: "css", printWidth: 500 });
+};
diff --git a/packages/theme/tokens/palette/blue-dark-next.tokens.json b/packages/theme/tokens/palette/blue-dark-next.tokens.json
new file mode 100644
index 0000000000..faf5ff1e51
--- /dev/null
+++ b/packages/theme/tokens/palette/blue-dark-next.tokens.json
@@ -0,0 +1,628 @@
+{
+  "palette": {
+    "accent": {
+      "stronger": {
+        "$type": "color",
+        "$value": "{color.blue.300}"
+      },
+      "stronger-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.blue.300.40A}"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "{color.blue.400}"
+      },
+      "strong-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.blue.400.40A}"
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.blue.500}"
+      },
+      "none": {
+        "$type": "color",
+        "$value": "{color.alpha.blue.500.0A}"
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.blue.500.40A}"
+      },
+      "weak": {
+        "$type": "color",
+        "$value": "{color.blue.600}"
+      },
+      "weaker": {
+        "$type": "color",
+        "$value": "{color.blue.800}"
+      },
+      "weaker-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.blue.800.40A}"
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.blue.900}"
+      },
+      "action-hover": {
+        "$type": "color",
+        "$value": "{color.blue.600}"
+      },
+      "action-active": {
+        "$type": "color",
+        "$value": "{color.blue.800}"
+      }
+    },
+    "alpha": {
+      "strong": {
+        "$type": "color",
+        "$value": "{color.alpha.white.45A}"
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.alpha.white.30A}"
+      },
+      "weak": {
+        "$type": "color",
+        "$value": "{color.alpha.white.15A}"
+      },
+      "weaker": {
+        "$type": "color",
+        "$value": "{color.alpha.white.10A}"
+      },
+      "none": {
+        "$type": "color",
+        "$value": "{color.alpha.white.0A}"
+      },
+      "backdrop": {
+        "$type": "color",
+        "$value": "{color.alpha.black.70A}"
+      }
+    },
+    "background": {
+      "primary": {
+        "$type": "color",
+        "$value": "{color.jet}"
+      },
+      "primary-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.jet.40A}"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "{color.granite}"
+      },
+      "secondary-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.charcoal.40A}"
+      },
+      "tertiary": {
+        "$type": "color",
+        "$value": "{color.leather}"
+      },
+      "tertiary-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.leather.40A}"
+      }
+    },
+    "categorical": {
+      "1": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.cobalt.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.cobalt.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.cobalt.900}"
+        }
+      },
+      "2": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.cider.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.cider.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.cider.900}"
+        }
+      },
+      "3": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.plum.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.plum.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.plum.900}"
+        }
+      },
+      "4": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.aqua.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.aqua.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.aqua.900}"
+        }
+      },
+      "5": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.slate.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.slate.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.slate.900}"
+        }
+      },
+      "6": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.rose.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.rose.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.rose.900}"
+        }
+      },
+      "7": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.olive.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.olive.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.olive.900}"
+        }
+      },
+      "8": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.salmon.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.salmon.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.salmon.900}"
+        }
+      },
+      "9": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.indigo.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.indigo.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.indigo.900}"
+        }
+      },
+      "10": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.jade.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.jade.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.jade.900}"
+        }
+      },
+      "11": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.citrine.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.citrine.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.citrine.900}"
+        }
+      },
+      "12": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.autumn.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.autumn.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.autumn.900}"
+        }
+      },
+      "13": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.lavender.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.lavender.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.lavender.900}"
+        }
+      },
+      "14": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.ocean.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.ocean.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.ocean.900}"
+        }
+      },
+      "15": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.smoke.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.smoke.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.smoke.900}"
+        }
+      },
+      "16": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.fuchsia.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.fuchsia.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.fuchsia.900}"
+        }
+      },
+      "17": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.lime.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.lime.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.lime.900}"
+        }
+      },
+      "18": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.fur.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.fur.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.fur.900}"
+        }
+      },
+      "19": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.violet.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.violet.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.violet.900}"
+        }
+      },
+      "20": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.forest.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.forest.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.forest.900}"
+        }
+      }
+    },
+    "foreground": {
+      "primary": {
+        "$type": "color",
+        "$value": "{color.white}"
+      },
+      "primary-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.white.40A}"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "{color.gray.300}"
+      },
+      "secondary-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.300.40A}"
+      },
+      "primary-alt": {
+        "$type": "color",
+        "$value": "{color.white}"
+      },
+      "primary-alt-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.white.40A}"
+      },
+      "hover": {
+        "$type": "color",
+        "$value": "{color.blue.400}"
+      },
+      "active": {
+        "$type": "color",
+        "$value": "{color.blue.300}"
+      },
+      "visited": {
+        "$type": "color",
+        "$value": "{color.purple.200}"
+      }
+    },
+    "info": {
+      "default": {
+        "$type": "color",
+        "$value": "{color.blue.500}"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "{color.blue.400}"
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.blue.900}"
+      }
+    },
+    "negative": {
+      "strong": {
+        "$type": "color",
+        "$value": "{color.red.400}"
+      },
+      "strong disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.red.400.40A}"
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.red.500}"
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.red.500.40A}"
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.red.900}"
+      },
+      "action-hover": {
+        "$type": "color",
+        "$value": "{color.red.600}"
+      },
+      "action-active": {
+        "$type": "color",
+        "$value": "{color.red.800}"
+      }
+    },
+    "neutral": {
+      "strong": {
+        "$type": "color",
+        "$value": "{color.gray.400}"
+      },
+      "strong-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.400.40A}"
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.gray.500}"
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.500.40A}"
+      },
+      "readonly": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.500.10A}"
+      },
+      "weak": {
+        "$type": "color",
+        "$value": "{color.gray.600}"
+      },
+      "weak-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.600.40A}"
+      },
+      "weak-readonly": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.600.10A}"
+      },
+      "weaker": {
+        "$type": "color",
+        "$value": "{color.gray.700}"
+      },
+      "weaker-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.700.40A}"
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.gray.800}"
+      },
+      "action-hover": {
+        "$type": "color",
+        "$value": "{color.gray.600}"
+      },
+      "action-active": {
+        "$type": "color",
+        "$value": "{color.gray.800}"
+      }
+    },
+    "positive": {
+      "strong": {
+        "$type": "color",
+        "$value": "{color.green.400}"
+      },
+      "strong disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.green.400.40A}"
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.green.500}"
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.green.500.40A}"
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.green.900}"
+      },
+      "action-hover": {
+        "$type": "color",
+        "$value": "{color.green.600}"
+      },
+      "action-active": {
+        "$type": "color",
+        "$value": "{color.green.800}"
+      }
+    },
+    "shadow": {
+      "100": {
+        "$type": "color",
+        "$value": "{color.alpha.black.50A}"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "{color.alpha.black.50A}"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "{color.alpha.black.60A}"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "{color.alpha.black.60A}"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "{color.alpha.black.70A}"
+      }
+    },
+    "warning": {
+      "strong": {
+        "$type": "color",
+        "$value": "{color.orange.400}"
+      },
+      "strong disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.orange.400.40A}"
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.orange.500}"
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.orange.500.40A}"
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.orange.900}"
+      },
+      "action-hover": {
+        "$type": "color",
+        "$value": "{color.orange.600}"
+      },
+      "action-active": {
+        "$type": "color",
+        "$value": "{color.orange.800}"
+      }
+    },
+    "FIGMA ONLY": {
+      "jpmorgan": {
+        "$type": "color",
+        "$value": "{color.white}"
+      },
+      "chase": {
+        "$type": "color",
+        "$value": "{color.white}"
+      },
+      "chase-symbol": {
+        "$type": "color",
+        "$value": "{color.white}"
+      }
+    },
+    "transparent": {
+      "$type": "color",
+      "$value": "{color.alpha.black.0A}"
+    }
+  }
+}

From eb055cedcc0bf5a75d61e60efaa839f7af6045e7 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Tue, 19 Nov 2024 15:34:01 +0000
Subject: [PATCH 04/35] kebab case tokens.json

---
 .../tokens/foundation/colors-next.tokens.json | 160 +++++++++---------
 .../tokens/palette/blue-dark-next.tokens.json |  78 ++++-----
 .../palette/blue-light-next.tokens.json       |  84 ++++-----
 3 files changed, 161 insertions(+), 161 deletions(-)

diff --git a/packages/theme/tokens/foundation/colors-next.tokens.json b/packages/theme/tokens/foundation/colors-next.tokens.json
index 77c9f28d33..582c439244 100644
--- a/packages/theme/tokens/foundation/colors-next.tokens.json
+++ b/packages/theme/tokens/foundation/colors-next.tokens.json
@@ -308,224 +308,224 @@
     },
     "alpha": {
       "white": {
-        "0A": {
+        "0-a": {
           "$type": "color",
           "$value": "#ffffff00"
         },
-        "5A": {
+        "5-a": {
           "$type": "color",
           "$value": "#ffffff0d"
         },
-        "10A": {
+        "10-a": {
           "$type": "color",
           "$value": "#ffffff1a"
         },
-        "15A": {
+        "15-a": {
           "$type": "color",
           "$value": "#ffffff26"
         },
-        "20A": {
+        "20-a": {
           "$type": "color",
           "$value": "#ffffff33"
         },
-        "25A": {
+        "25-a": {
           "$type": "color",
           "$value": "#ffffff40"
         },
-        "30A": {
+        "30-a": {
           "$type": "color",
           "$value": "#ffffff4d"
         },
-        "35A": {
+        "35-a": {
           "$type": "color",
           "$value": "#ffffff59"
         },
-        "40A": {
+        "40-a": {
           "$type": "color",
           "$value": "#ffffff66"
         },
-        "45A": {
+        "45-a": {
           "$type": "color",
           "$value": "#ffffff73"
         },
-        "50A": {
+        "50-a": {
           "$type": "color",
           "$value": "#ffffff80"
         },
-        "55A": {
+        "55-a": {
           "$type": "color",
           "$value": "#ffffff8c"
         },
-        "60A": {
+        "60-a": {
           "$type": "color",
           "$value": "#ffffff99"
         },
-        "65A": {
+        "65-a": {
           "$type": "color",
           "$value": "#ffffffa6"
         },
-        "70A": {
+        "70-a": {
           "$type": "color",
           "$value": "#ffffffb2"
         },
-        "75A": {
+        "75-a": {
           "$type": "color",
           "$value": "#ffffffbf"
         },
-        "80A": {
+        "80-a": {
           "$type": "color",
           "$value": "#ffffffcc"
         }
       },
       "snow": {
-        "40A": {
+        "40-a": {
           "$type": "color",
           "$value": "#ffffff66"
         }
       },
       "marble": {
-        "40A": {
+        "40-a": {
           "$type": "color",
           "$value": "#f2f4f666"
         }
       },
       "limestone": {
-        "40A": {
+        "40-a": {
           "$type": "color",
           "$value": "#faf8f266"
         }
       },
       "charcoal": {
-        "40A": {
+        "40-a": {
           "$type": "color",
           "$value": "#474c5066"
         }
       },
       "leather": {
-        "40A": {
+        "40-a": {
           "$type": "color",
           "$value": "#26292b66"
         }
       },
       "jet": {
-        "40A": {
+        "40-a": {
           "$type": "color",
           "$value": "#10182066"
         }
       },
       "black": {
-        "0A": {
+        "0-a": {
           "$type": "color",
           "$value": "#00000000"
         },
-        "5A": {
+        "5-a": {
           "$type": "color",
           "$value": "#0000000d"
         },
-        "10A": {
+        "10-a": {
           "$type": "color",
           "$value": "#0000001a"
         },
-        "15A": {
+        "15-a": {
           "$type": "color",
           "$value": "#00000026"
         },
-        "20A": {
+        "20-a": {
           "$type": "color",
           "$value": "#00000033"
         },
-        "25A": {
+        "25-a": {
           "$type": "color",
           "$value": "#00000040"
         },
-        "30A": {
+        "30-a": {
           "$type": "color",
           "$value": "#0000004d"
         },
-        "35A": {
+        "35-a": {
           "$type": "color",
           "$value": "#00000059"
         },
-        "40A": {
+        "40-a": {
           "$type": "color",
           "$value": "#00000066"
         },
-        "45A": {
+        "45-a": {
           "$type": "color",
           "$value": "#00000073"
         },
-        "50A": {
+        "50-a": {
           "$type": "color",
           "$value": "#00000080"
         },
-        "55A": {
+        "55-a": {
           "$type": "color",
           "$value": "#0000008c"
         },
-        "60A": {
+        "60-a": {
           "$type": "color",
           "$value": "#00000099"
         },
-        "65A": {
+        "65-a": {
           "$type": "color",
           "$value": "#000000a6"
         },
-        "70A": {
+        "70-a": {
           "$type": "color",
           "$value": "#000000b2"
         },
-        "75A": {
+        "75-a": {
           "$type": "color",
           "$value": "#000000bf"
         },
-        "80A": {
+        "80-a": {
           "$type": "color",
           "$value": "#000000cc"
         }
       },
       "gray": {
         "300": {
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#b1b5b966"
           }
         },
         "400": {
-          "10A": {
+          "10-a": {
             "$type": "color",
             "$value": "#91959a1a"
           },
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#91959a66"
           }
         },
         "500": {
-          "0A": {
+          "0-a": {
             "$type": "color",
             "$value": "#72777d00"
           },
-          "10A": {
+          "10-a": {
             "$type": "color",
             "$value": "#72777d1a"
           },
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#72777d66"
           }
         },
         "600": {
-          "10A": {
+          "10-a": {
             "$type": "color",
             "$value": "#5f646a1a"
           },
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#61666c66"
           }
         },
         "700": {
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#4c515766"
           }
@@ -533,47 +533,47 @@
       },
       "blue": {
         "200": {
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#c7deff66"
           }
         },
         "300": {
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#9abdf566"
           }
         },
         "400": {
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#669ce866"
           }
         },
         "500": {
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#0078cf66"
           },
-          "0A": {
+          "0-a": {
             "$type": "color",
             "$value": "#0078cf00"
           }
         },
         "600": {
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#005ea666"
           }
         },
         "700": {
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#00457e66"
           }
         },
         "800": {
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#002d5966"
           }
@@ -581,47 +581,47 @@
       },
       "teal": {
         "200": {
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#afe0ed66"
           }
         },
         "300": {
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#83c0d666"
           }
         },
         "400": {
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#4ca1c266"
           }
         },
         "500": {
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#1b7f9e66"
           },
-          "0A": {
+          "0-a": {
             "$type": "color",
             "$value": "#1b7f9e00"
           }
         },
         "600": {
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#12647e66"
           }
         },
         "700": {
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#094a6066"
           }
         },
         "800": {
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#03314266"
           }
@@ -629,19 +629,19 @@
       },
       "green": {
         "400": {
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#53b08766"
           }
         },
         "500": {
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#00875d66"
           }
         },
         "600": {
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#006b4866"
           }
@@ -649,19 +649,19 @@
       },
       "orange": {
         "400": {
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#e87a3866"
           }
         },
         "500": {
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#c7530066"
           }
         },
         "600": {
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#a3440066"
           }
@@ -669,38 +669,38 @@
       },
       "red": {
         "400": {
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#ff5d5766"
           }
         },
         "500": {
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#e5213566"
           }
         },
         "600": {
-          "40A": {
+          "40-a": {
             "$type": "color",
             "$value": "#ba172966"
           }
         }
       }
     },
-    "FIGMA ONLY": {
-      "Chase": {
-        "Black": {
+    "figma-only": {
+      "chase": {
+        "black": {
           "$type": "color",
           "$value": "#101820"
         },
-        "Blue": {
+        "blue": {
           "$type": "color",
           "$value": "#005eb8"
         }
       },
-      "JPMorgan": {
-        "Brown": {
+      "jp-morgan": {
+        "brown": {
           "$type": "color",
           "$value": "#3a2206"
         }
diff --git a/packages/theme/tokens/palette/blue-dark-next.tokens.json b/packages/theme/tokens/palette/blue-dark-next.tokens.json
index faf5ff1e51..091dfd9c5e 100644
--- a/packages/theme/tokens/palette/blue-dark-next.tokens.json
+++ b/packages/theme/tokens/palette/blue-dark-next.tokens.json
@@ -7,7 +7,7 @@
       },
       "stronger-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.blue.300.40A}"
+        "$value": "{color.alpha.blue.300.40-a}"
       },
       "strong": {
         "$type": "color",
@@ -15,7 +15,7 @@
       },
       "strong-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.blue.400.40A}"
+        "$value": "{color.alpha.blue.400.40-a}"
       },
       "default": {
         "$type": "color",
@@ -23,11 +23,11 @@
       },
       "none": {
         "$type": "color",
-        "$value": "{color.alpha.blue.500.0A}"
+        "$value": "{color.alpha.blue.500.0-a}"
       },
       "disabled": {
         "$type": "color",
-        "$value": "{color.alpha.blue.500.40A}"
+        "$value": "{color.alpha.blue.500.40-a}"
       },
       "weak": {
         "$type": "color",
@@ -39,7 +39,7 @@
       },
       "weaker-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.blue.800.40A}"
+        "$value": "{color.alpha.blue.800.40-a}"
       },
       "weakest": {
         "$type": "color",
@@ -57,27 +57,27 @@
     "alpha": {
       "strong": {
         "$type": "color",
-        "$value": "{color.alpha.white.45A}"
+        "$value": "{color.alpha.white.45-a}"
       },
       "default": {
         "$type": "color",
-        "$value": "{color.alpha.white.30A}"
+        "$value": "{color.alpha.white.30-a}"
       },
       "weak": {
         "$type": "color",
-        "$value": "{color.alpha.white.15A}"
+        "$value": "{color.alpha.white.15-a}"
       },
       "weaker": {
         "$type": "color",
-        "$value": "{color.alpha.white.10A}"
+        "$value": "{color.alpha.white.10-a}"
       },
       "none": {
         "$type": "color",
-        "$value": "{color.alpha.white.0A}"
+        "$value": "{color.alpha.white.0-a}"
       },
       "backdrop": {
         "$type": "color",
-        "$value": "{color.alpha.black.70A}"
+        "$value": "{color.alpha.black.70-a}"
       }
     },
     "background": {
@@ -87,7 +87,7 @@
       },
       "primary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.jet.40A}"
+        "$value": "{color.alpha.jet.40-a}"
       },
       "secondary": {
         "$type": "color",
@@ -95,7 +95,7 @@
       },
       "secondary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.charcoal.40A}"
+        "$value": "{color.alpha.charcoal.40-a}"
       },
       "tertiary": {
         "$type": "color",
@@ -103,7 +103,7 @@
       },
       "tertiary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.leather.40A}"
+        "$value": "{color.alpha.leather.40-a}"
       }
     },
     "categorical": {
@@ -395,7 +395,7 @@
       },
       "primary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.white.40A}"
+        "$value": "{color.alpha.white.40-a}"
       },
       "secondary": {
         "$type": "color",
@@ -403,7 +403,7 @@
       },
       "secondary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.gray.300.40A}"
+        "$value": "{color.alpha.gray.300.40-a}"
       },
       "primary-alt": {
         "$type": "color",
@@ -411,7 +411,7 @@
       },
       "primary-alt-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.white.40A}"
+        "$value": "{color.alpha.white.40-a}"
       },
       "hover": {
         "$type": "color",
@@ -445,9 +445,9 @@
         "$type": "color",
         "$value": "{color.red.400}"
       },
-      "strong disabled": {
+      "strong-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.red.400.40A}"
+        "$value": "{color.alpha.red.400.40-a}"
       },
       "default": {
         "$type": "color",
@@ -455,7 +455,7 @@
       },
       "disabled": {
         "$type": "color",
-        "$value": "{color.alpha.red.500.40A}"
+        "$value": "{color.alpha.red.500.40-a}"
       },
       "weakest": {
         "$type": "color",
@@ -477,7 +477,7 @@
       },
       "strong-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.gray.400.40A}"
+        "$value": "{color.alpha.gray.400.40-a}"
       },
       "default": {
         "$type": "color",
@@ -485,11 +485,11 @@
       },
       "disabled": {
         "$type": "color",
-        "$value": "{color.alpha.gray.500.40A}"
+        "$value": "{color.alpha.gray.500.40-a}"
       },
       "readonly": {
         "$type": "color",
-        "$value": "{color.alpha.gray.500.10A}"
+        "$value": "{color.alpha.gray.500.10-a}"
       },
       "weak": {
         "$type": "color",
@@ -497,11 +497,11 @@
       },
       "weak-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.gray.600.40A}"
+        "$value": "{color.alpha.gray.600.40-a}"
       },
       "weak-readonly": {
         "$type": "color",
-        "$value": "{color.alpha.gray.600.10A}"
+        "$value": "{color.alpha.gray.600.10-a}"
       },
       "weaker": {
         "$type": "color",
@@ -509,7 +509,7 @@
       },
       "weaker-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.gray.700.40A}"
+        "$value": "{color.alpha.gray.700.40-a}"
       },
       "weakest": {
         "$type": "color",
@@ -529,9 +529,9 @@
         "$type": "color",
         "$value": "{color.green.400}"
       },
-      "strong disabled": {
+      "strong-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.green.400.40A}"
+        "$value": "{color.alpha.green.400.40-a}"
       },
       "default": {
         "$type": "color",
@@ -539,7 +539,7 @@
       },
       "disabled": {
         "$type": "color",
-        "$value": "{color.alpha.green.500.40A}"
+        "$value": "{color.alpha.green.500.40-a}"
       },
       "weakest": {
         "$type": "color",
@@ -557,23 +557,23 @@
     "shadow": {
       "100": {
         "$type": "color",
-        "$value": "{color.alpha.black.50A}"
+        "$value": "{color.alpha.black.50-a}"
       },
       "200": {
         "$type": "color",
-        "$value": "{color.alpha.black.50A}"
+        "$value": "{color.alpha.black.50-a}"
       },
       "300": {
         "$type": "color",
-        "$value": "{color.alpha.black.60A}"
+        "$value": "{color.alpha.black.60-a}"
       },
       "400": {
         "$type": "color",
-        "$value": "{color.alpha.black.60A}"
+        "$value": "{color.alpha.black.60-a}"
       },
       "500": {
         "$type": "color",
-        "$value": "{color.alpha.black.70A}"
+        "$value": "{color.alpha.black.70-a}"
       }
     },
     "warning": {
@@ -581,9 +581,9 @@
         "$type": "color",
         "$value": "{color.orange.400}"
       },
-      "strong disabled": {
+      "strong-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.orange.400.40A}"
+        "$value": "{color.alpha.orange.400.40-a}"
       },
       "default": {
         "$type": "color",
@@ -591,7 +591,7 @@
       },
       "disabled": {
         "$type": "color",
-        "$value": "{color.alpha.orange.500.40A}"
+        "$value": "{color.alpha.orange.500.40-a}"
       },
       "weakest": {
         "$type": "color",
@@ -606,7 +606,7 @@
         "$value": "{color.orange.800}"
       }
     },
-    "FIGMA ONLY": {
+    "figma-only": {
       "jpmorgan": {
         "$type": "color",
         "$value": "{color.white}"
@@ -622,7 +622,7 @@
     },
     "transparent": {
       "$type": "color",
-      "$value": "{color.alpha.black.0A}"
+      "$value": "{color.alpha.black.0-a}"
     }
   }
 }
diff --git a/packages/theme/tokens/palette/blue-light-next.tokens.json b/packages/theme/tokens/palette/blue-light-next.tokens.json
index e3ec734d3d..d0e2cf58ff 100644
--- a/packages/theme/tokens/palette/blue-light-next.tokens.json
+++ b/packages/theme/tokens/palette/blue-light-next.tokens.json
@@ -7,7 +7,7 @@
       },
       "stronger-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.blue.700.40A}"
+        "$value": "{color.alpha.blue.700.40-a}"
       },
       "strong": {
         "$type": "color",
@@ -15,7 +15,7 @@
       },
       "strong-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.blue.600.40A}"
+        "$value": "{color.alpha.blue.600.40-a}"
       },
       "default": {
         "$type": "color",
@@ -23,11 +23,11 @@
       },
       "none": {
         "$type": "color",
-        "$value": "{color.alpha.blue.500.0A}"
+        "$value": "{color.alpha.blue.500.0-a}"
       },
       "disabled": {
         "$type": "color",
-        "$value": "{color.alpha.blue.500.40A}"
+        "$value": "{color.alpha.blue.500.40-a}"
       },
       "weak": {
         "$type": "color",
@@ -39,7 +39,7 @@
       },
       "weaker-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.blue.200.40A}"
+        "$value": "{color.alpha.blue.200.40-a}"
       },
       "weakest": {
         "$type": "color",
@@ -57,27 +57,27 @@
     "alpha": {
       "strong": {
         "$type": "color",
-        "$value": "{color.alpha.black.45A}"
+        "$value": "{color.alpha.black.45-a}"
       },
       "default": {
         "$type": "color",
-        "$value": "{color.alpha.black.30A}"
+        "$value": "{color.alpha.black.30-a}"
       },
       "weak": {
         "$type": "color",
-        "$value": "{color.alpha.black.15A}"
+        "$value": "{color.alpha.black.15-a}"
       },
       "weaker": {
         "$type": "color",
-        "$value": "{color.alpha.black.10A}"
+        "$value": "{color.alpha.black.10-a}"
       },
       "none": {
         "$type": "color",
-        "$value": "{color.alpha.black.0A}"
+        "$value": "{color.alpha.black.0-a}"
       },
       "backdrop": {
         "$type": "color",
-        "$value": "{color.alpha.white.70A}"
+        "$value": "{color.alpha.white.70-a}"
       }
     },
     "background": {
@@ -87,7 +87,7 @@
       },
       "primary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.snow.40A}"
+        "$value": "{color.alpha.snow.40-a}"
       },
       "secondary": {
         "$type": "color",
@@ -95,7 +95,7 @@
       },
       "secondary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.marble.40A}"
+        "$value": "{color.alpha.marble.40-a}"
       },
       "tertiary": {
         "$type": "color",
@@ -103,7 +103,7 @@
       },
       "tertiary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.limestone.40A}"
+        "$value": "{color.alpha.limestone.40-a}"
       }
     },
     "categorical": {
@@ -395,7 +395,7 @@
       },
       "primary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.black.40A}"
+        "$value": "{color.alpha.black.40-a}"
       },
       "secondary": {
         "$type": "color",
@@ -403,7 +403,7 @@
       },
       "secondary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.gray.700.40A}"
+        "$value": "{color.alpha.gray.700.40-a}"
       },
       "primary-alt": {
         "$type": "color",
@@ -411,7 +411,7 @@
       },
       "primary-alt-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.white.40A}"
+        "$value": "{color.alpha.white.40-a}"
       },
       "hover": {
         "$type": "color",
@@ -445,9 +445,9 @@
         "$type": "color",
         "$value": "{color.red.600}"
       },
-      "strong disabled": {
+      "strong-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.red.600.40A}"
+        "$value": "{color.alpha.red.600.40-a}"
       },
       "default": {
         "$type": "color",
@@ -455,7 +455,7 @@
       },
       "disabled": {
         "$type": "color",
-        "$value": "{color.alpha.red.500.40A}"
+        "$value": "{color.alpha.red.500.40-a}"
       },
       "weakest": {
         "$type": "color",
@@ -477,7 +477,7 @@
       },
       "strong-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.gray.600.40A}"
+        "$value": "{color.alpha.gray.600.40-a}"
       },
       "default": {
         "$type": "color",
@@ -485,11 +485,11 @@
       },
       "disabled": {
         "$type": "color",
-        "$value": "{color.alpha.gray.500.40A}"
+        "$value": "{color.alpha.gray.500.40-a}"
       },
       "readonly": {
         "$type": "color",
-        "$value": "{color.alpha.gray.500.10A}"
+        "$value": "{color.alpha.gray.500.10-a}"
       },
       "weak": {
         "$type": "color",
@@ -497,11 +497,11 @@
       },
       "weak-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.gray.400.40A}"
+        "$value": "{color.alpha.gray.400.40-a}"
       },
       "weak-readonly": {
         "$type": "color",
-        "$value": "{color.alpha.gray.400.10A}"
+        "$value": "{color.alpha.gray.400.10-a}"
       },
       "weaker": {
         "$type": "color",
@@ -509,7 +509,7 @@
       },
       "weaker-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.gray.300.40A}"
+        "$value": "{color.alpha.gray.300.40-a}"
       },
       "weakest": {
         "$type": "color",
@@ -529,9 +529,9 @@
         "$type": "color",
         "$value": "{color.green.600}"
       },
-      "strong disabled": {
+      "strong-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.green.600.40A}"
+        "$value": "{color.alpha.green.600.40-a}"
       },
       "default": {
         "$type": "color",
@@ -539,7 +539,7 @@
       },
       "disabled": {
         "$type": "color",
-        "$value": "{color.alpha.green.500.40A}"
+        "$value": "{color.alpha.green.500.40-a}"
       },
       "weakest": {
         "$type": "color",
@@ -557,23 +557,23 @@
     "shadow": {
       "100": {
         "$type": "color",
-        "$value": "{color.alpha.black.10A}"
+        "$value": "{color.alpha.black.10-a}"
       },
       "200": {
         "$type": "color",
-        "$value": "{color.alpha.black.10A}"
+        "$value": "{color.alpha.black.10-a}"
       },
       "300": {
         "$type": "color",
-        "$value": "{color.alpha.black.20A}"
+        "$value": "{color.alpha.black.20-a}"
       },
       "400": {
         "$type": "color",
-        "$value": "{color.alpha.black.20A}"
+        "$value": "{color.alpha.black.20-a}"
       },
       "500": {
         "$type": "color",
-        "$value": "{color.alpha.black.30A}"
+        "$value": "{color.alpha.black.30-a}"
       }
     },
     "warning": {
@@ -581,9 +581,9 @@
         "$type": "color",
         "$value": "{color.orange.600}"
       },
-      "strong disabled": {
+      "strong-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.orange.600.40A}"
+        "$value": "{color.alpha.orange.600.40-a}"
       },
       "default": {
         "$type": "color",
@@ -591,7 +591,7 @@
       },
       "disabled": {
         "$type": "color",
-        "$value": "{color.alpha.orange.500.40A}"
+        "$value": "{color.alpha.orange.500.40-a}"
       },
       "weakest": {
         "$type": "color",
@@ -606,23 +606,23 @@
         "$value": "{color.orange.800}"
       }
     },
-    "FIGMA ONLY": {
+    "figma-only": {
       "jpmorgan": {
         "$type": "color",
-        "$value": "{color.FIGMA ONLY.JPMorgan.Brown}"
+        "$value": "{color.figma-only.jp-morgan.brown}"
       },
       "chase": {
         "$type": "color",
-        "$value": "{color.FIGMA ONLY.Chase.Black}"
+        "$value": "{color.figma-only.chase.black}"
       },
       "chase-symbol": {
         "$type": "color",
-        "$value": "{color.FIGMA ONLY.Chase.Blue}"
+        "$value": "{color.figma-only.chase.blue}"
       }
     },
     "transparent": {
       "$type": "color",
-      "$value": "{color.alpha.white.0A}"
+      "$value": "{color.alpha.white.0-a}"
     }
   }
 }

From 1905a776132c23390a8ba83d523bf9c9d25aa6af Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Wed, 20 Nov 2024 15:18:31 +0000
Subject: [PATCH 05/35] Update with $modes working version for
 palette.accent.stronger.$modes

---
 packages/theme/scripts/build-json.mjs         | 236 ++++++-----
 .../sd-utils/format/css-multi-modes.mjs       | 390 +++++++++++++++++-
 .../tokens/palette/blue-dark-next.tokens.json |   6 +-
 3 files changed, 532 insertions(+), 100 deletions(-)

diff --git a/packages/theme/scripts/build-json.mjs b/packages/theme/scripts/build-json.mjs
index 04f570ccb6..5f1f713b32 100644
--- a/packages/theme/scripts/build-json.mjs
+++ b/packages/theme/scripts/build-json.mjs
@@ -3,7 +3,7 @@ import { StyleDictionary } from "style-dictionary-utils";
 import { cssMultiModes } from "./sd-utils/format/css-multi-modes.mjs";
 
 // TODO: add more styling options here, and theme vs theme next
-function getStyleDictionaryConfig({ mode, density, accent }) {
+function getStyleDictionaryConfig({ modes, density, accent }) {
   const paletteNextList = [
     "accent",
     "corner",
@@ -20,9 +20,11 @@ function getStyleDictionaryConfig({ mode, density, accent }) {
       //   "./tokens/foundation/test.tokens.json",
       "./tokens/foundation/**/*.tokens.json",
       // // Individual palette file output
-      // `./tokens/palette/${accent}-${mode}*.tokens.json`,
+
+      "./tokens/palette/blue-dark-next.tokens.json", // TODO: revert to accent-mode aware
+      // `./tokens/palette/${accent}-${mode}-next.tokens.json`,
       // // combined palette tokens into single file, handled by custom formatter
-      "./tokens/palette/*.tokens.json",
+      // "./tokens/palette/**/*.tokens.json",
       //   `./tokens/characteristics/*.tokens.json`,
       //   "tokens/globals/**/*.tokens.json",
     ],
@@ -37,6 +39,8 @@ function getStyleDictionaryConfig({ mode, density, accent }) {
           // "name/kebab", // https://github.com/amzn/style-dictionary/blob/0fcf229f78e334a5c6bec55725fe92a8de97590c/lib/common/transforms.js#L320-L325
           // "dimension/pixelToRem",
           //   "color/hexAlpha", // style-dictionary-utils transform // doesn't work with $value for some reason
+          // // when below is enabled, palette CSS output `--strong disabled` which is invalid, however kebab name transform is being called ....
+          // "salt-ds/value/modes",
         ],
         files: [
           {
@@ -97,30 +101,32 @@ function getStyleDictionaryConfig({ mode, density, accent }) {
           // https://github.com/lukasoppermann/style-dictionary-utils/blob/main/src/format/css-advanced.ts
           // Not really, SD will warn Collision detected, and only use one value at a time, we need to come up with custom syntax to make this work
           ...paletteNextList.map((paletteNextType) => ({
-            // format: "salt-ds/css/multi-modes",
-            format: "css/advanced",
+            format: "salt-ds/css/multi-modes",
+            // format: "css/advanced",
             destination: `palette/${paletteNextType}-next.css`,
             options: {
-              selector: `.salt-theme.salt-theme-next[data-mode="${mode}"][data-accent="${accent}"]`, // defaults to :root
+              // selector: `.salt-theme.salt-theme-next[data-mode="${mode}"][data-accent="${accent}"]`, // defaults to :root
               outputReferences: true,
               usesDtcg: true,
-              // rules: modes.map((mode) => ({
-              //   selector: `.salt-theme.salt-theme-next[data-mode="${mode}"][data-accent="${accent}"]`,
-              //   matcher: (token) =>
-              //     token.filePath.includes(mode) &&
-              //     token.filePath.includes(accent),
-              // })),
+              rules: modes.map((mode) => ({
+                selector: `.salt-theme.salt-theme-next[data-mode="${mode}"][data-accent="${accent}"]`,
+                // matcher: (token) =>
+                //   token.filePath.includes(mode) &&
+                //   token.filePath.includes(accent),
+                modeIdentifier: mode,
+              })),
             },
             // // Use filter to add different `selector` for mode/density/etc.
             filter: async (token, options) => {
-              //   console.log(token, options); //palette-accent
+              console.log("css/advanced filter", token); //palette-accent
+              //  For some reason, attributes "attribute/cti" is not attached to tokens in palette
               return (
                 // next
                 token.filePath.includes("-next.tokens") &&
                 // platte
-                token.attributes.category === "palette" && // or token.filePath.includes("/palette/") &&
+                token.path[0] === "palette" && // or token.filePath.includes("/palette/") &&
                 //
-                token.attributes.type === paletteNextType
+                token.path[1] === paletteNextType
               );
             },
           })),
@@ -140,96 +146,132 @@ const SPLIT_REPLACE_VALUE = "$1\0$2";
 // Regexp involved with stripping non-word characters from the result.
 const DEFAULT_STRIP_REGEXP = /[^\p{L}\d]+/giu;
 
-// const modes = ["light", "dark"];
-for await (const mode of ["light", "dark"]) {
-  for await (const accent of ["blue"]) {
-    // , "md", "ld", "td"
-    for await (const density of ["hd"]) {
-      const config = getStyleDictionaryConfig({ mode, density, accent });
-
-      const saltStyleDictionary = new StyleDictionary(
-        {},
-        { verbosity: "verbose" }, // for debug
-      );
-      // TODO: custom file header - https://styledictionary.com/reference/hooks/file-headers/
-
-      saltStyleDictionary.registerFormat({
-        name: "salt-ds/css/multi-modes",
-        format: cssMultiModes,
-      });
-
-      // Custom transform - https://styledictionary.com/reference/hooks/transforms/
-      saltStyleDictionary.registerTransform({
-        name: "salt-ds/name/kebab",
-        type: "name",
-        transitive: true,
-        transform: (token, config) => {
-          // attributes: { category: 'color', type: 'alpha',
-          if (
-            token.path.includes("alpha") &&
-            token.attributes.category === "color" &&
-            token.attributes.type === "alpha"
-          ) {
-            const alphaIndex = token.path.findIndex((p) => p === "alpha");
-            const alphaRemovedPath = [
-              ...token.path.slice(0, alphaIndex),
-              ...token.path.slice(alphaIndex + 1),
-            ];
-            // console.log("Token path with alpha removed", alphaRemovedPath);
-
-            function splitPrefixSuffix(input) {
-              const splitFn = modifiedSplit;
-              const prefixIndex = 0;
-              const suffixIndex = input.length;
-
-              return [
-                input.slice(0, prefixIndex),
-                splitFn(input.slice(prefixIndex, suffixIndex)),
-                input.slice(suffixIndex),
-              ];
-            }
-
-            function specialKebab(input) {
-              const [prefix, words, suffix] = splitPrefixSuffix(input);
-              return (
-                prefix +
-                words.map((input) => input.toLowerCase()).join("-") +
-                suffix
-              );
-            }
+const modes = ["light", "dark"];
+// for await (const mode of ["dark"]) {
+for await (const accent of ["blue"]) {
+  // , "md", "ld", "td"
+  for await (const density of ["hd"]) {
+    const config = getStyleDictionaryConfig({ modes, density, accent });
 
-            function modifiedSplit(value) {
-              let result = value.trim();
+    const saltStyleDictionary = new StyleDictionary(
+      {},
+      { verbosity: "verbose" }, // for debug
+    );
+    // TODO: custom file header - https://styledictionary.com/reference/hooks/file-headers/
 
-              result = result
-                // `SPLIT_LOWER_NON_DIGIT_UPPER_RE` changed compare with 'change-case' original split
-                // Change to not split 30A -> 30-A
-                .replace(SPLIT_LOWER_NON_DIGIT_UPPER_RE, SPLIT_REPLACE_VALUE)
-                .replace(SPLIT_UPPER_UPPER_RE, SPLIT_REPLACE_VALUE);
+    saltStyleDictionary.registerFormat({
+      name: "salt-ds/css/multi-modes",
+      format: cssMultiModes,
+    });
 
-              result = result.replace(DEFAULT_STRIP_REGEXP, "\0");
+    // TODO: find out why when `value` transform is provided, name is broken
+    // This is currently not used, but would be good to understand regardless
+    saltStyleDictionary.registerTransform({
+      type: "value",
+      // if `transitive` is not here, `transform` is not being called...
+      transitive: true,
+      name: "salt-ds/value/modes",
+      filter: (token, options) => {
+        return token.$modes !== undefined;
+        // const filterCondition =
+        //   token.filePath.includes("-next.tokens") &&
+        //   token.path[0] === "palette";
+        // console.log("salt-ds/value/modes filter", filterCondition, token);
+        // return filterCondition;
+      },
+      transform: (token, _, options) => {
+        console.log("salt-ds/value/modes transform", token);
+        // debugger;
+        if (
+          // token.path.includes("palette")
+          token.attributes.category === "palette" &&
+          token.attributes.type === "accent" &&
+          token.attributes.item === "stronger"
+        ) {
+          console.log("palette accent stronger", token);
+        }
+
+        return token.$modes; // how to work out `.light` here?
+      },
+    });
 
-              let start = 0;
-              let end = result.length;
+    // Custom transform - https://styledictionary.com/reference/hooks/transforms/
+    saltStyleDictionary.registerTransform({
+      name: "salt-ds/name/kebab",
+      type: "name",
+      transitive: true,
+      transform: (token, config) => {
+        // attributes: { category: 'color', type: 'alpha',
+        if (
+          token.path.includes("alpha") &&
+          token.attributes.category === "color" &&
+          token.attributes.type === "alpha"
+        ) {
+          const alphaIndex = token.path.findIndex((p) => p === "alpha");
+          const alphaRemovedPath = [
+            ...token.path.slice(0, alphaIndex),
+            ...token.path.slice(alphaIndex + 1),
+          ];
+          // console.log("Token path with alpha removed", alphaRemovedPath);
 
-              // Trim the delimiter from around the output string.
-              while (result.charAt(start) === "\0") start++;
-              if (start === end) return [];
-              while (result.charAt(end - 1) === "\0") end--;
+          function splitPrefixSuffix(input) {
+            const splitFn = modifiedSplit;
+            const prefixIndex = 0;
+            const suffixIndex = input.length;
 
-              return result.slice(start, end).split(/\0/g);
-            }
+            return [
+              input.slice(0, prefixIndex),
+              splitFn(input.slice(prefixIndex, suffixIndex)),
+              input.slice(suffixIndex),
+            ];
+          }
 
-            return specialKebab(
-              [config.prefix].concat(alphaRemovedPath).join(" "),
+          function specialKebab(input) {
+            const [prefix, words, suffix] = splitPrefixSuffix(input);
+            return (
+              prefix +
+              words.map((input) => input.toLowerCase()).join("-") +
+              suffix
             );
           }
-          return kebabCase([config.prefix].concat(token.path).join(" "));
-        },
-      });
-      const sd = await saltStyleDictionary.extend(config);
-      //   sd.cleanAllPlatforms();
-      sd.buildAllPlatforms();
-    }
+
+          function modifiedSplit(value) {
+            let result = value.trim();
+
+            result = result
+              // `SPLIT_LOWER_NON_DIGIT_UPPER_RE` changed compare with 'change-case' original split
+              // Change to not split 30A -> 30-A
+              .replace(SPLIT_LOWER_NON_DIGIT_UPPER_RE, SPLIT_REPLACE_VALUE)
+              .replace(SPLIT_UPPER_UPPER_RE, SPLIT_REPLACE_VALUE);
+
+            result = result.replace(DEFAULT_STRIP_REGEXP, "\0");
+
+            let start = 0;
+            let end = result.length;
+
+            // Trim the delimiter from around the output string.
+            while (result.charAt(start) === "\0") start++;
+            if (start === end) return [];
+            while (result.charAt(end - 1) === "\0") end--;
+
+            return result.slice(start, end).split(/\0/g);
+          }
+
+          const name = specialKebab(
+            [config.prefix].concat(alphaRemovedPath).join(" "),
+          );
+          console.log("salt-ds/name/kebab specialKebab name", name, token);
+          return name;
+        }
+        const name = kebabCase([config.prefix].concat(token.path).join(" "));
+        console.log("salt-ds/name/kebab name", name, token);
+        return name;
+      },
+    });
+    const sd = await saltStyleDictionary.extend(config);
+    sd.cleanAllPlatforms();
+    sd.buildAllPlatforms();
   }
 }
+// }
+//
diff --git a/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs b/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs
index 8048a0ac69..95619ff2f5 100644
--- a/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs
+++ b/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs
@@ -1,6 +1,40 @@
 import { format } from "prettier";
 // import type { FormatFn, FormatFnArguments, FormattingOptions, TransformedToken } from 'style-dictionary/types'
-import { fileHeader, formattedVariables } from "style-dictionary/utils";
+import {
+  fileHeader,
+  formattedVariables,
+  getReferences,
+  sortByReference,
+  usesReferences,
+} from "style-dictionary/utils";
+
+/**
+ * if token.$modes exists
+ *     if $modes[modeIdentifier]
+ *         replace $value with $mode[option]
+ */
+function replaceModeSpecificValue(token, modeIdentifier) {
+  if (!("$modes" in token)) {
+    return token;
+  }
+
+  if (token.$modes?.[modeIdentifier]) {
+    console.log("replaceModeSpecificValue token.$modes", token);
+    token.$value = token.$modes?.[modeIdentifier];
+  }
+  return token;
+}
+
+// recursively traverse token objects and update
+function updateToken(slice, modifyFn) {
+  modifyFn(slice);
+  Object.values(slice).forEach((value) => {
+    if (typeof value === "object") {
+      updateToken(value, modifyFn);
+    }
+  });
+  return slice;
+}
 
 /**
  * @param {import("style-dictionary/types").FormatFnArguments} param0
@@ -35,15 +69,29 @@ export const cssMultiModes = async ({
 
   // add file header
   const output = [await fileHeader({ file })];
+
+  console.log("salt-ds/css/multi-modes rules", rules);
   // add single theme css
-  for (const { selector, matcher } of rules) {
+  for (const { selector, matcher, modeIdentifier } of rules) {
     let preludes = [selector];
 
     // remove invalid preludes
     preludes = preludes.filter(Boolean);
+
+    //
+    // hack the system a bit:
+    // replace filteredDictionary.tokens, token.original.$value with token.original.$mode
+    // This approach has the consequence of needing all mode values existed given `$value` would be overridden
+    // Otherwise, we need a custom `createPropertyFormatter` which can read values from `$modes` other than `$value`
+    // TODO: can this be overcome by using custom parser and/or custom preprocessor?
+    const updatedTokens = updateToken(dictionary.tokens, (t) =>
+      replaceModeSpecificValue(t, modeIdentifier),
+    );
+
     // filter tokens to only include the ones that pass the matcher
     const filteredDictionary = {
       ...dictionary,
+      tokens: updatedTokens,
       allTokens: dictionary.allTokens.filter(matcher || (() => true)),
     };
     // early abort if no matches
@@ -67,3 +115,341 @@ export const cssMultiModes = async ({
   // return prettified
   return format(output.join("\n"), { parser: "css", printWidth: 500 });
 };
+
+/**
+ * =========== not used below this line, it's here to help experiements
+ */
+
+/**
+ * Copy from style-dictionary@4.1.4: node_modules/style-dictionary/lib/common/formatHelpers/formattedVariables.js
+ * No change apart from pointing to `customCreatePropertyFormatter`
+ *
+ * This is used to create lists of variables like Sass variables or CSS custom properties
+ * @memberof module:formatHelpers
+ * @name formattedVariables
+ * @param {Object} options
+ * @param {String} options.format - What type of variables to output. Options are: css, sass, less, and stylus
+ * @param {Dictionary} options.dictionary - The dictionary object that gets passed to the format method.
+ * @param {OutputReferences} [options.outputReferences] - Whether or not to output references
+ * @param {Boolean} [options.outputReferenceFallbacks] - Whether or not to output a faLLback value for output references
+ * @param {Formatting} [options.formatting] - Custom formatting properties that define parts of a declaration line in code. This will get passed to `formatHelpers` -> `createPropertyformat` and used for the `lineSeparator` between lines of code.
+ * @param {Boolean} [options.themeable] [false] - Whether tokens should default to being themeable.
+ * @param {boolean} [options.usesDtcg] [false] - Whether DTCG token syntax should be uses.
+ * @returns {String}
+ * @example
+ * ```js
+ * StyleDictionary.registerFormat({
+ *   name: 'myCustomFormat',
+ *   format: function({ dictionary, options }) {
+ *     return formattedVariables({
+ *       format: 'less',
+ *       dictionary,
+ *       outputReferences: options.outputReferences
+ *     });
+ *   }
+ * });
+ * ```
+ */
+function customFormattedVariables({
+  format,
+  dictionary,
+  outputReferences = false,
+  outputReferenceFallbacks,
+  formatting = {},
+  themeable = false,
+  usesDtcg = false,
+}) {
+  // typecast, we know that by know the tokens have been transformed
+  let allTokens = /** @type {Token[]} */ (dictionary.allTokens);
+  /** @type {Tokens} */
+  const tokens = dictionary.tokens;
+
+  const { lineSeparator } = Object.assign(
+    {},
+    {
+      lineSeparator: "\n",
+    },
+    formatting,
+  );
+
+  // Some languages are imperative, meaning a variable has to be defined
+  // before it is used. If `outputReferences` is true, check if the token
+  // has a reference, and if it does send it to the end of the array.
+  // We also need to account for nested references, a -> b -> c. They
+  // need to be defined in reverse order: c, b, a so that the reference always
+  // comes after the definition
+  if (outputReferences) {
+    // note: using the spread operator here so we get a new array rather than
+    // mutating the original
+    allTokens = [...allTokens].sort(
+      sortByReference(tokens, {
+        unfilteredTokens: dictionary.unfilteredTokens,
+        usesDtcg,
+      }),
+    );
+  }
+
+  return allTokens
+    .map(
+      customCreatePropertyFormatter({
+        outputReferences,
+        outputReferenceFallbacks,
+        dictionary,
+        format,
+        formatting,
+        themeable,
+        usesDtcg,
+      }),
+    )
+    .filter((strVal) => {
+      return !!strVal;
+    })
+    .join(lineSeparator);
+}
+
+/**
+ * Copy from style-dictionary@4.1.4: node_modules/style-dictionary/lib/common/formatHelpers/createPropertyFormatter.js
+ * Not change.
+ *
+ * Split a string comment by newlines and
+ * convert to multi-line comment if necessary
+ * @param {string} to_ret_token
+ * @param {string} comment
+ * @param {Formatting} options
+ * @returns {string}
+ */
+function customAddComment(to_ret_token, comment, options) {
+  const { commentStyle, indentation } = options;
+  let { commentPosition } = options;
+
+  const commentsByNewLine = comment.split("\n");
+  if (commentsByNewLine.length > 1) {
+    commentPosition = "above";
+  }
+
+  let processedComment;
+  switch (commentStyle) {
+    case "short":
+      if (commentPosition === "inline") {
+        processedComment = `// ${comment}`;
+      } else {
+        processedComment = commentsByNewLine.reduce(
+          (acc, curr) => `${acc}${indentation}// ${curr}\n`,
+          "",
+        );
+        // remove trailing newline
+        processedComment = processedComment.replace(/\n$/g, "");
+      }
+      break;
+    case "long":
+      if (commentsByNewLine.length > 1) {
+        processedComment = commentsByNewLine.reduce(
+          (acc, curr) => `${acc}${indentation} * ${curr}\n`,
+          `${indentation}/**\n`,
+        );
+        processedComment += `${indentation} */`;
+      } else {
+        processedComment = `${commentPosition === "above" ? indentation : ""}/* ${comment} */`;
+      }
+      break;
+  }
+
+  let new_to_ret_token = to_ret_token;
+
+  if (commentPosition === "above") {
+    // put the comment above the token if it's multi-line or if commentStyle ended with -above
+    new_to_ret_token = `${processedComment}\n${to_ret_token}`;
+  } else {
+    new_to_ret_token = `${to_ret_token} ${processedComment}`;
+  }
+
+  return new_to_ret_token;
+}
+
+/**
+ * Copy from style-dictionary@4.1.4: node_modules/style-dictionary/lib/common/formatHelpers/createPropertyFormatter.js
+ *
+ * Creates a function that can be used to format a token. This can be useful
+ * to use as the function on `dictionary.allTokens.map`. The formatting
+ * is configurable either by supplying a `format` option or a `formatting` object
+ * which uses: prefix, indentation, separator, suffix, and commentStyle.
+ * @memberof module:formatHelpers
+ * @name createPropertyFormatter
+ * @example
+ * ```javascript
+ * StyleDictionary.registerFormat({
+ *   name: 'myCustomFormat',
+ *   format: function({ dictionary, options }) {
+ *     const { outputReferences } = options;
+ *     const formatProperty = createPropertyFormatter({
+ *       outputReferences,
+ *       dictionary,
+ *       format: 'css'
+ *     });
+ *     return dictionary.allTokens.map(formatProperty).join('\n');
+ *   }
+ * });
+ * ```
+ * @param {Object} options
+ * @param {OutputReferences} [options.outputReferences] - Whether or not to output references. You will want to pass this from the `options` object sent to the format function.
+ * @param {boolean} [options.outputReferenceFallbacks] - Whether or not to output css variable fallback values when using output references. You will want to pass this from the `options` object sent to the format function.
+ * @param {Dictionary} options.dictionary - The dictionary object sent to the format function
+ * @param {string} [options.format] - Available formats are: 'css', 'sass', 'less', and 'stylus'. If you want to customize the format and can't use one of those predefined formats, use the `formatting` option
+ * @param {Formatting} [options.formatting] - Custom formatting properties that define parts of a declaration line in code. The configurable strings are: `prefix`, `indentation`, `separator`, `suffix`, `lineSeparator`, `fileHeaderTimestamp`, `header`, `footer`, `commentStyle` and `commentPosition`. Those are used to generate a line like this: `${indentation}${prefix}${token.name}${separator} ${prop.value}${suffix}`. The remaining formatting options are used for the fileHeader helper.
+ * @param {boolean} [options.themeable] [false] - Whether tokens should default to being themeable.
+ * @param {boolean} [options.usesDtcg] [false] - Whether DTCG token syntax should be uses.
+ * @returns {(token: import('../../../types/DesignToken.ts').TransformedToken) => string}
+ */
+function customCreatePropertyFormatter({
+  outputReferences = false,
+  outputReferenceFallbacks = false,
+  dictionary,
+  format,
+  formatting = {},
+  themeable = false,
+  usesDtcg = false,
+}) {
+  /** @type {Formatting} */
+  const formatDefaults = {};
+  switch (format) {
+    case "css":
+      formatDefaults.prefix = "--";
+      formatDefaults.indentation = "  ";
+      formatDefaults.separator = ":";
+      break;
+    case "sass":
+      formatDefaults.prefix = "$";
+      formatDefaults.commentStyle = "short";
+      formatDefaults.indentation = "";
+      formatDefaults.separator = ":";
+      break;
+    case "less":
+      formatDefaults.prefix = "@";
+      formatDefaults.commentStyle = "short";
+      formatDefaults.indentation = "";
+      formatDefaults.separator = ":";
+      break;
+    case "stylus":
+      formatDefaults.prefix = "$";
+      formatDefaults.commentStyle = "short";
+      formatDefaults.indentation = "";
+      formatDefaults.separator = "=";
+      break;
+  }
+  const mergedOptions = {
+    ...{
+      prefix: "",
+      commentStyle: "long",
+      commentPosition: "inline",
+      indentation: "",
+      separator: " =",
+      suffix: ";",
+    },
+    ...formatDefaults,
+    ...formatting,
+  };
+  const { prefix, commentStyle, indentation, separator, suffix } =
+    mergedOptions;
+  const { tokens, unfilteredTokens } = dictionary;
+  return (token) => {
+    let to_ret_token = `${indentation}${prefix}${token.name}${separator} `;
+    let value = usesDtcg ? token.$value : token.value;
+    const originalValue = usesDtcg
+      ? token.original.$value
+      : token.original.value;
+
+    const shouldOutputRef =
+      usesReferences(originalValue) &&
+      (typeof outputReferences === "function"
+        ? outputReferences(token, { dictionary, usesDtcg })
+        : outputReferences);
+    /**
+     * A single value can have multiple references either by interpolation:
+     * "value": "{size.border.width.value} solid {color.border.primary.value}"
+     * or if the value is an object:
+     * "value": {
+     *    "size": "{size.border.width.value}",
+     *    "style": "solid",
+     *    "color": "{color.border.primary.value"}
+     * }
+     * This will see if there are references and if there are, replace
+     * the resolved value with the reference's name.
+     */
+    if (shouldOutputRef) {
+      // Formats that use this function expect `value` to be a string
+      // or else you will get '[object Object]' in the output
+      const refs = getReferences(
+        originalValue,
+        tokens,
+        { unfilteredTokens, warnImmediately: false },
+        [],
+      );
+
+      // original can either be an object value, which requires transitive value transformation in web CSS formats
+      // or a different (primitive) type, meaning it can be stringified.
+      const originalIsObject =
+        typeof originalValue === "object" && originalValue !== null;
+
+      if (!originalIsObject) {
+        // TODO: find a better way to deal with object-value tokens and outputting refs
+        // e.g. perhaps it is safer not to output refs when the value is transformed to a non-object
+        // for example for CSS-like formats we always flatten to e.g. strings
+
+        // when original is object value, we replace value by matching ref.value and putting a var instead.
+        // Due to the original.value being an object, it requires transformation, so undoing the transformation
+        // by replacing value with original.value is not possible. (this is the early v3 approach to outputting refs)
+
+        // when original is string value, we replace value by matching original.value and putting a var instead
+        // this is more friendly to transitive transforms that transform the string values (v4 way of outputting refs)
+        value = originalValue;
+      }
+
+      for (const ref of refs) {
+        // value should be a string that contains the resolved reference
+        // because Style Dictionary resolved this in the resolution step.
+        // Here we are undoing that by replacing the value with
+        // the reference's name
+        if (
+          Object.hasOwn(ref, `${usesDtcg ? "$" : ""}value`) &&
+          Object.hasOwn(ref, "name")
+        ) {
+          const refVal = usesDtcg ? ref.$value : ref.value;
+          const replaceFunc = () => {
+            if (format === "css") {
+              if (outputReferenceFallbacks) {
+                return `var(${prefix}${ref.name}, ${refVal})`;
+              }
+              return `var(${prefix}${ref.name})`;
+            }
+            return `${prefix}${ref.name}`;
+          };
+          // TODO: add test
+          // technically speaking a reference can be made to a number or boolean token, in this case we stringify it first
+          value = `${value}`.replace(
+            originalIsObject
+              ? refVal
+              : new RegExp(`{${ref.path.join("\\.")}(\\.\\$?value)?}`, "g"),
+            replaceFunc,
+          );
+        }
+      }
+    }
+
+    to_ret_token += value;
+
+    const themeable_token =
+      typeof token.themeable === "boolean" ? token.themeable : themeable;
+    if (format === "sass" && themeable_token) {
+      to_ret_token += " !default";
+    }
+
+    to_ret_token += suffix;
+
+    const comment = token.$description ?? token.comment;
+    if (comment && commentStyle !== "none") {
+      to_ret_token = customAddComment(to_ret_token, comment, mergedOptions);
+    }
+
+    return to_ret_token;
+  };
+}
diff --git a/packages/theme/tokens/palette/blue-dark-next.tokens.json b/packages/theme/tokens/palette/blue-dark-next.tokens.json
index 091dfd9c5e..c8dfb69092 100644
--- a/packages/theme/tokens/palette/blue-dark-next.tokens.json
+++ b/packages/theme/tokens/palette/blue-dark-next.tokens.json
@@ -3,7 +3,11 @@
     "accent": {
       "stronger": {
         "$type": "color",
-        "$value": "{color.blue.300}"
+        "$value": "{color.blue.300}",
+        "$modes": {
+          "light": "{color.blue.700}",
+          "dark": "{color.blue.300}"
+        }
       },
       "stronger-disabled": {
         "$type": "color",

From a0ba16d36d1bc384b1a384fcef061dd1b2661f38 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Wed, 20 Nov 2024 16:21:23 +0000
Subject: [PATCH 06/35] Add script to combine multiple tokens files into a
 single $modes file

---
 packages/theme/scripts/build-json.mjs         |    5 +-
 .../helpers/combine-tokens-to-modes.mjs       |   61 +
 .../tokens/palette/blue-dark-next.tokens.json |    6 +-
 .../tokens/palette/palette-next.tokens.json   | 1188 +++++++++++++++++
 4 files changed, 1252 insertions(+), 8 deletions(-)
 create mode 100644 packages/theme/scripts/helpers/combine-tokens-to-modes.mjs
 create mode 100644 packages/theme/tokens/palette/palette-next.tokens.json

diff --git a/packages/theme/scripts/build-json.mjs b/packages/theme/scripts/build-json.mjs
index 5f1f713b32..848e0533bc 100644
--- a/packages/theme/scripts/build-json.mjs
+++ b/packages/theme/scripts/build-json.mjs
@@ -21,8 +21,7 @@ function getStyleDictionaryConfig({ modes, density, accent }) {
       "./tokens/foundation/**/*.tokens.json",
       // // Individual palette file output
 
-      "./tokens/palette/blue-dark-next.tokens.json", // TODO: revert to accent-mode aware
-      // `./tokens/palette/${accent}-${mode}-next.tokens.json`,
+      "./tokens/palette/palette-next.tokens.json",
       // // combined palette tokens into single file, handled by custom formatter
       // "./tokens/palette/**/*.tokens.json",
       //   `./tokens/characteristics/*.tokens.json`,
@@ -113,7 +112,7 @@ function getStyleDictionaryConfig({ modes, density, accent }) {
                 // matcher: (token) =>
                 //   token.filePath.includes(mode) &&
                 //   token.filePath.includes(accent),
-                modeIdentifier: mode,
+                modeIdentifier: `${accent}-${mode}`,
               })),
             },
             // // Use filter to add different `selector` for mode/density/etc.
diff --git a/packages/theme/scripts/helpers/combine-tokens-to-modes.mjs b/packages/theme/scripts/helpers/combine-tokens-to-modes.mjs
new file mode 100644
index 0000000000..ba555d54a3
--- /dev/null
+++ b/packages/theme/scripts/helpers/combine-tokens-to-modes.mjs
@@ -0,0 +1,61 @@
+import { readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+
+const files = {
+  // first one would be the default $value
+  "blue-light": "../../tokens/palette/blue-light-next.tokens.json",
+  "blue-dark": "../../tokens/palette/blue-dark-next.tokens.json",
+};
+
+const outputFile = "../../tokens/palette/palette-next.tokens.json";
+
+/**
+ *
+ * @param {string} filePath
+ */
+function readToken(filePath) {
+  const __dirname = import.meta.dirname;
+
+  return JSON.parse(
+    readFileSync(join(__dirname, filePath), { encoding: "utf-8" }),
+  );
+}
+
+function writeToken(token, filePath) {
+  const __dirname = import.meta.dirname;
+
+  writeFileSync(join(__dirname, filePath), JSON.stringify(token, null, "  "), {
+    encoding: "utf-8",
+  });
+}
+
+function addModesValue(mainToken, modeName, modeSpecificToken) {
+  if (!mainToken.$modes) {
+    mainToken.$modes = {};
+  }
+  mainToken.$modes[modeName] = modeSpecificToken.$value;
+}
+
+function iterateToAddModes(tokenObj, modeName, modeTokenObj) {
+  // There shouldn't be any token with $value as well as nested token definations
+  if ("$value" in tokenObj) {
+    addModesValue(tokenObj, modeName, modeTokenObj);
+  } else {
+    for (const [key, nestedToken] of Object.entries(tokenObj)) {
+      // NOTE: This assumes all tokens having the same structure
+      iterateToAddModes(nestedToken, modeName, modeTokenObj[key]);
+    }
+  }
+}
+
+let finalToken = undefined;
+for (const [modeName, filePath] of Object.entries(files)) {
+  if (!finalToken) {
+    finalToken = readToken(filePath);
+  }
+  const modeObj = readToken(filePath);
+  iterateToAddModes(finalToken, modeName, modeObj);
+}
+// console.log(finalToken);
+
+writeToken(finalToken, outputFile);
diff --git a/packages/theme/tokens/palette/blue-dark-next.tokens.json b/packages/theme/tokens/palette/blue-dark-next.tokens.json
index c8dfb69092..091dfd9c5e 100644
--- a/packages/theme/tokens/palette/blue-dark-next.tokens.json
+++ b/packages/theme/tokens/palette/blue-dark-next.tokens.json
@@ -3,11 +3,7 @@
     "accent": {
       "stronger": {
         "$type": "color",
-        "$value": "{color.blue.300}",
-        "$modes": {
-          "light": "{color.blue.700}",
-          "dark": "{color.blue.300}"
-        }
+        "$value": "{color.blue.300}"
       },
       "stronger-disabled": {
         "$type": "color",
diff --git a/packages/theme/tokens/palette/palette-next.tokens.json b/packages/theme/tokens/palette/palette-next.tokens.json
new file mode 100644
index 0000000000..fbbb4e96c7
--- /dev/null
+++ b/packages/theme/tokens/palette/palette-next.tokens.json
@@ -0,0 +1,1188 @@
+{
+  "palette": {
+    "accent": {
+      "stronger": {
+        "$type": "color",
+        "$value": "{color.blue.700}",
+        "$modes": {
+          "blue-light": "{color.blue.700}",
+          "blue-dark": "{color.blue.300}"
+        }
+      },
+      "stronger-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.blue.700.40-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.blue.700.40-a}",
+          "blue-dark": "{color.alpha.blue.300.40-a}"
+        }
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "{color.blue.600}",
+        "$modes": {
+          "blue-light": "{color.blue.600}",
+          "blue-dark": "{color.blue.400}"
+        }
+      },
+      "strong-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.blue.600.40-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.blue.600.40-a}",
+          "blue-dark": "{color.alpha.blue.400.40-a}"
+        }
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.blue.500}",
+        "$modes": {
+          "blue-light": "{color.blue.500}",
+          "blue-dark": "{color.blue.500}"
+        }
+      },
+      "none": {
+        "$type": "color",
+        "$value": "{color.alpha.blue.500.0-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.blue.500.0-a}",
+          "blue-dark": "{color.alpha.blue.500.0-a}"
+        }
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.blue.500.40-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.blue.500.40-a}",
+          "blue-dark": "{color.alpha.blue.500.40-a}"
+        }
+      },
+      "weak": {
+        "$type": "color",
+        "$value": "{color.blue.400}",
+        "$modes": {
+          "blue-light": "{color.blue.400}",
+          "blue-dark": "{color.blue.600}"
+        }
+      },
+      "weaker": {
+        "$type": "color",
+        "$value": "{color.blue.200}",
+        "$modes": {
+          "blue-light": "{color.blue.200}",
+          "blue-dark": "{color.blue.800}"
+        }
+      },
+      "weaker-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.blue.200.40-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.blue.200.40-a}",
+          "blue-dark": "{color.alpha.blue.800.40-a}"
+        }
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.blue.100}",
+        "$modes": {
+          "blue-light": "{color.blue.100}",
+          "blue-dark": "{color.blue.900}"
+        }
+      },
+      "action-hover": {
+        "$type": "color",
+        "$value": "{color.blue.600}",
+        "$modes": {
+          "blue-light": "{color.blue.600}",
+          "blue-dark": "{color.blue.600}"
+        }
+      },
+      "action-active": {
+        "$type": "color",
+        "$value": "{color.blue.800}",
+        "$modes": {
+          "blue-light": "{color.blue.800}",
+          "blue-dark": "{color.blue.800}"
+        }
+      }
+    },
+    "alpha": {
+      "strong": {
+        "$type": "color",
+        "$value": "{color.alpha.black.45-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.black.45-a}",
+          "blue-dark": "{color.alpha.white.45-a}"
+        }
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.alpha.black.30-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.black.30-a}",
+          "blue-dark": "{color.alpha.white.30-a}"
+        }
+      },
+      "weak": {
+        "$type": "color",
+        "$value": "{color.alpha.black.15-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.black.15-a}",
+          "blue-dark": "{color.alpha.white.15-a}"
+        }
+      },
+      "weaker": {
+        "$type": "color",
+        "$value": "{color.alpha.black.10-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.black.10-a}",
+          "blue-dark": "{color.alpha.white.10-a}"
+        }
+      },
+      "none": {
+        "$type": "color",
+        "$value": "{color.alpha.black.0-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.black.0-a}",
+          "blue-dark": "{color.alpha.white.0-a}"
+        }
+      },
+      "backdrop": {
+        "$type": "color",
+        "$value": "{color.alpha.white.70-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.white.70-a}",
+          "blue-dark": "{color.alpha.black.70-a}"
+        }
+      }
+    },
+    "background": {
+      "primary": {
+        "$type": "color",
+        "$value": "{color.snow}",
+        "$modes": {
+          "blue-light": "{color.snow}",
+          "blue-dark": "{color.jet}"
+        }
+      },
+      "primary-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.snow.40-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.snow.40-a}",
+          "blue-dark": "{color.alpha.jet.40-a}"
+        }
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "{color.marble}",
+        "$modes": {
+          "blue-light": "{color.marble}",
+          "blue-dark": "{color.granite}"
+        }
+      },
+      "secondary-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.marble.40-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.marble.40-a}",
+          "blue-dark": "{color.alpha.charcoal.40-a}"
+        }
+      },
+      "tertiary": {
+        "$type": "color",
+        "$value": "{color.limestone}",
+        "$modes": {
+          "blue-light": "{color.limestone}",
+          "blue-dark": "{color.leather}"
+        }
+      },
+      "tertiary-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.limestone.40-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.limestone.40-a}",
+          "blue-dark": "{color.alpha.leather.40-a}"
+        }
+      }
+    },
+    "categorical": {
+      "1": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.cobalt.600}",
+          "$modes": {
+            "blue-light": "{color.cobalt.600}",
+            "blue-dark": "{color.cobalt.400}"
+          }
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.cobalt.500}",
+          "$modes": {
+            "blue-light": "{color.cobalt.500}",
+            "blue-dark": "{color.cobalt.500}"
+          }
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.cobalt.100}",
+          "$modes": {
+            "blue-light": "{color.cobalt.100}",
+            "blue-dark": "{color.cobalt.900}"
+          }
+        }
+      },
+      "2": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.cider.600}",
+          "$modes": {
+            "blue-light": "{color.cider.600}",
+            "blue-dark": "{color.cider.400}"
+          }
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.cider.500}",
+          "$modes": {
+            "blue-light": "{color.cider.500}",
+            "blue-dark": "{color.cider.500}"
+          }
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.cider.100}",
+          "$modes": {
+            "blue-light": "{color.cider.100}",
+            "blue-dark": "{color.cider.900}"
+          }
+        }
+      },
+      "3": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.plum.600}",
+          "$modes": {
+            "blue-light": "{color.plum.600}",
+            "blue-dark": "{color.plum.400}"
+          }
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.plum.500}",
+          "$modes": {
+            "blue-light": "{color.plum.500}",
+            "blue-dark": "{color.plum.500}"
+          }
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.plum.100}",
+          "$modes": {
+            "blue-light": "{color.plum.100}",
+            "blue-dark": "{color.plum.900}"
+          }
+        }
+      },
+      "4": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.aqua.600}",
+          "$modes": {
+            "blue-light": "{color.aqua.600}",
+            "blue-dark": "{color.aqua.400}"
+          }
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.aqua.500}",
+          "$modes": {
+            "blue-light": "{color.aqua.500}",
+            "blue-dark": "{color.aqua.500}"
+          }
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.aqua.100}",
+          "$modes": {
+            "blue-light": "{color.aqua.100}",
+            "blue-dark": "{color.aqua.900}"
+          }
+        }
+      },
+      "5": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.slate.600}",
+          "$modes": {
+            "blue-light": "{color.slate.600}",
+            "blue-dark": "{color.slate.400}"
+          }
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.slate.500}",
+          "$modes": {
+            "blue-light": "{color.slate.500}",
+            "blue-dark": "{color.slate.500}"
+          }
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.slate.100}",
+          "$modes": {
+            "blue-light": "{color.slate.100}",
+            "blue-dark": "{color.slate.900}"
+          }
+        }
+      },
+      "6": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.rose.600}",
+          "$modes": {
+            "blue-light": "{color.rose.600}",
+            "blue-dark": "{color.rose.400}"
+          }
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.rose.500}",
+          "$modes": {
+            "blue-light": "{color.rose.500}",
+            "blue-dark": "{color.rose.500}"
+          }
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.rose.100}",
+          "$modes": {
+            "blue-light": "{color.rose.100}",
+            "blue-dark": "{color.rose.900}"
+          }
+        }
+      },
+      "7": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.olive.600}",
+          "$modes": {
+            "blue-light": "{color.olive.600}",
+            "blue-dark": "{color.olive.400}"
+          }
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.olive.500}",
+          "$modes": {
+            "blue-light": "{color.olive.500}",
+            "blue-dark": "{color.olive.500}"
+          }
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.olive.100}",
+          "$modes": {
+            "blue-light": "{color.olive.100}",
+            "blue-dark": "{color.olive.900}"
+          }
+        }
+      },
+      "8": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.salmon.600}",
+          "$modes": {
+            "blue-light": "{color.salmon.600}",
+            "blue-dark": "{color.salmon.400}"
+          }
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.salmon.500}",
+          "$modes": {
+            "blue-light": "{color.salmon.500}",
+            "blue-dark": "{color.salmon.500}"
+          }
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.salmon.100}",
+          "$modes": {
+            "blue-light": "{color.salmon.100}",
+            "blue-dark": "{color.salmon.900}"
+          }
+        }
+      },
+      "9": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.indigo.600}",
+          "$modes": {
+            "blue-light": "{color.indigo.600}",
+            "blue-dark": "{color.indigo.400}"
+          }
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.indigo.500}",
+          "$modes": {
+            "blue-light": "{color.indigo.500}",
+            "blue-dark": "{color.indigo.500}"
+          }
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.indigo.100}",
+          "$modes": {
+            "blue-light": "{color.indigo.100}",
+            "blue-dark": "{color.indigo.900}"
+          }
+        }
+      },
+      "10": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.jade.600}",
+          "$modes": {
+            "blue-light": "{color.jade.600}",
+            "blue-dark": "{color.jade.400}"
+          }
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.jade.500}",
+          "$modes": {
+            "blue-light": "{color.jade.500}",
+            "blue-dark": "{color.jade.500}"
+          }
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.jade.100}",
+          "$modes": {
+            "blue-light": "{color.jade.100}",
+            "blue-dark": "{color.jade.900}"
+          }
+        }
+      },
+      "11": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.citrine.600}",
+          "$modes": {
+            "blue-light": "{color.citrine.600}",
+            "blue-dark": "{color.citrine.400}"
+          }
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.citrine.500}",
+          "$modes": {
+            "blue-light": "{color.citrine.500}",
+            "blue-dark": "{color.citrine.500}"
+          }
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.citrine.100}",
+          "$modes": {
+            "blue-light": "{color.citrine.100}",
+            "blue-dark": "{color.citrine.900}"
+          }
+        }
+      },
+      "12": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.autumn.600}",
+          "$modes": {
+            "blue-light": "{color.autumn.600}",
+            "blue-dark": "{color.autumn.400}"
+          }
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.autumn.500}",
+          "$modes": {
+            "blue-light": "{color.autumn.500}",
+            "blue-dark": "{color.autumn.500}"
+          }
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.autumn.100}",
+          "$modes": {
+            "blue-light": "{color.autumn.100}",
+            "blue-dark": "{color.autumn.900}"
+          }
+        }
+      },
+      "13": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.lavender.600}",
+          "$modes": {
+            "blue-light": "{color.lavender.600}",
+            "blue-dark": "{color.lavender.400}"
+          }
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.lavender.500}",
+          "$modes": {
+            "blue-light": "{color.lavender.500}",
+            "blue-dark": "{color.lavender.500}"
+          }
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.lavender.100}",
+          "$modes": {
+            "blue-light": "{color.lavender.100}",
+            "blue-dark": "{color.lavender.900}"
+          }
+        }
+      },
+      "14": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.ocean.600}",
+          "$modes": {
+            "blue-light": "{color.ocean.600}",
+            "blue-dark": "{color.ocean.400}"
+          }
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.ocean.500}",
+          "$modes": {
+            "blue-light": "{color.ocean.500}",
+            "blue-dark": "{color.ocean.500}"
+          }
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.ocean.100}",
+          "$modes": {
+            "blue-light": "{color.ocean.100}",
+            "blue-dark": "{color.ocean.900}"
+          }
+        }
+      },
+      "15": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.smoke.600}",
+          "$modes": {
+            "blue-light": "{color.smoke.600}",
+            "blue-dark": "{color.smoke.400}"
+          }
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.smoke.500}",
+          "$modes": {
+            "blue-light": "{color.smoke.500}",
+            "blue-dark": "{color.smoke.500}"
+          }
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.smoke.100}",
+          "$modes": {
+            "blue-light": "{color.smoke.100}",
+            "blue-dark": "{color.smoke.900}"
+          }
+        }
+      },
+      "16": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.fuchsia.600}",
+          "$modes": {
+            "blue-light": "{color.fuchsia.600}",
+            "blue-dark": "{color.fuchsia.400}"
+          }
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.fuchsia.500}",
+          "$modes": {
+            "blue-light": "{color.fuchsia.500}",
+            "blue-dark": "{color.fuchsia.500}"
+          }
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.fuchsia.100}",
+          "$modes": {
+            "blue-light": "{color.fuchsia.100}",
+            "blue-dark": "{color.fuchsia.900}"
+          }
+        }
+      },
+      "17": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.lime.600}",
+          "$modes": {
+            "blue-light": "{color.lime.600}",
+            "blue-dark": "{color.lime.400}"
+          }
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.lime.500}",
+          "$modes": {
+            "blue-light": "{color.lime.500}",
+            "blue-dark": "{color.lime.500}"
+          }
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.lime.100}",
+          "$modes": {
+            "blue-light": "{color.lime.100}",
+            "blue-dark": "{color.lime.900}"
+          }
+        }
+      },
+      "18": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.fur.600}",
+          "$modes": {
+            "blue-light": "{color.fur.600}",
+            "blue-dark": "{color.fur.400}"
+          }
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.fur.500}",
+          "$modes": {
+            "blue-light": "{color.fur.500}",
+            "blue-dark": "{color.fur.500}"
+          }
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.fur.100}",
+          "$modes": {
+            "blue-light": "{color.fur.100}",
+            "blue-dark": "{color.fur.900}"
+          }
+        }
+      },
+      "19": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.violet.600}",
+          "$modes": {
+            "blue-light": "{color.violet.600}",
+            "blue-dark": "{color.violet.400}"
+          }
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.violet.500}",
+          "$modes": {
+            "blue-light": "{color.violet.500}",
+            "blue-dark": "{color.violet.500}"
+          }
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.violet.100}",
+          "$modes": {
+            "blue-light": "{color.violet.100}",
+            "blue-dark": "{color.violet.900}"
+          }
+        }
+      },
+      "20": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.forest.600}",
+          "$modes": {
+            "blue-light": "{color.forest.600}",
+            "blue-dark": "{color.forest.400}"
+          }
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.forest.500}",
+          "$modes": {
+            "blue-light": "{color.forest.500}",
+            "blue-dark": "{color.forest.500}"
+          }
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.forest.100}",
+          "$modes": {
+            "blue-light": "{color.forest.100}",
+            "blue-dark": "{color.forest.900}"
+          }
+        }
+      }
+    },
+    "foreground": {
+      "primary": {
+        "$type": "color",
+        "$value": "{color.black}",
+        "$modes": {
+          "blue-light": "{color.black}",
+          "blue-dark": "{color.white}"
+        }
+      },
+      "primary-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.black.40-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.black.40-a}",
+          "blue-dark": "{color.alpha.white.40-a}"
+        }
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "{color.gray.700}",
+        "$modes": {
+          "blue-light": "{color.gray.700}",
+          "blue-dark": "{color.gray.300}"
+        }
+      },
+      "secondary-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.700.40-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.gray.700.40-a}",
+          "blue-dark": "{color.alpha.gray.300.40-a}"
+        }
+      },
+      "primary-alt": {
+        "$type": "color",
+        "$value": "{color.white}",
+        "$modes": {
+          "blue-light": "{color.white}",
+          "blue-dark": "{color.white}"
+        }
+      },
+      "primary-alt-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.white.40-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.white.40-a}",
+          "blue-dark": "{color.alpha.white.40-a}"
+        }
+      },
+      "hover": {
+        "$type": "color",
+        "$value": "{color.blue.600}",
+        "$modes": {
+          "blue-light": "{color.blue.600}",
+          "blue-dark": "{color.blue.400}"
+        }
+      },
+      "active": {
+        "$type": "color",
+        "$value": "{color.blue.700}",
+        "$modes": {
+          "blue-light": "{color.blue.700}",
+          "blue-dark": "{color.blue.300}"
+        }
+      },
+      "visited": {
+        "$type": "color",
+        "$value": "{color.purple.800}",
+        "$modes": {
+          "blue-light": "{color.purple.800}",
+          "blue-dark": "{color.purple.200}"
+        }
+      }
+    },
+    "info": {
+      "default": {
+        "$type": "color",
+        "$value": "{color.blue.500}",
+        "$modes": {
+          "blue-light": "{color.blue.500}",
+          "blue-dark": "{color.blue.500}"
+        }
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "{color.blue.600}",
+        "$modes": {
+          "blue-light": "{color.blue.600}",
+          "blue-dark": "{color.blue.400}"
+        }
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.blue.100}",
+        "$modes": {
+          "blue-light": "{color.blue.100}",
+          "blue-dark": "{color.blue.900}"
+        }
+      }
+    },
+    "negative": {
+      "strong": {
+        "$type": "color",
+        "$value": "{color.red.600}",
+        "$modes": {
+          "blue-light": "{color.red.600}",
+          "blue-dark": "{color.red.400}"
+        }
+      },
+      "strong-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.red.600.40-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.red.600.40-a}",
+          "blue-dark": "{color.alpha.red.400.40-a}"
+        }
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.red.500}",
+        "$modes": {
+          "blue-light": "{color.red.500}",
+          "blue-dark": "{color.red.500}"
+        }
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.red.500.40-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.red.500.40-a}",
+          "blue-dark": "{color.alpha.red.500.40-a}"
+        }
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.red.100}",
+        "$modes": {
+          "blue-light": "{color.red.100}",
+          "blue-dark": "{color.red.900}"
+        }
+      },
+      "action-hover": {
+        "$type": "color",
+        "$value": "{color.red.600}",
+        "$modes": {
+          "blue-light": "{color.red.600}",
+          "blue-dark": "{color.red.600}"
+        }
+      },
+      "action-active": {
+        "$type": "color",
+        "$value": "{color.red.800}",
+        "$modes": {
+          "blue-light": "{color.red.800}",
+          "blue-dark": "{color.red.800}"
+        }
+      }
+    },
+    "neutral": {
+      "strong": {
+        "$type": "color",
+        "$value": "{color.gray.600}",
+        "$modes": {
+          "blue-light": "{color.gray.600}",
+          "blue-dark": "{color.gray.400}"
+        }
+      },
+      "strong-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.600.40-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.gray.600.40-a}",
+          "blue-dark": "{color.alpha.gray.400.40-a}"
+        }
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.gray.500}",
+        "$modes": {
+          "blue-light": "{color.gray.500}",
+          "blue-dark": "{color.gray.500}"
+        }
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.500.40-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.gray.500.40-a}",
+          "blue-dark": "{color.alpha.gray.500.40-a}"
+        }
+      },
+      "readonly": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.500.10-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.gray.500.10-a}",
+          "blue-dark": "{color.alpha.gray.500.10-a}"
+        }
+      },
+      "weak": {
+        "$type": "color",
+        "$value": "{color.gray.400}",
+        "$modes": {
+          "blue-light": "{color.gray.400}",
+          "blue-dark": "{color.gray.600}"
+        }
+      },
+      "weak-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.400.40-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.gray.400.40-a}",
+          "blue-dark": "{color.alpha.gray.600.40-a}"
+        }
+      },
+      "weak-readonly": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.400.10-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.gray.400.10-a}",
+          "blue-dark": "{color.alpha.gray.600.10-a}"
+        }
+      },
+      "weaker": {
+        "$type": "color",
+        "$value": "{color.gray.300}",
+        "$modes": {
+          "blue-light": "{color.gray.300}",
+          "blue-dark": "{color.gray.700}"
+        }
+      },
+      "weaker-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.300.40-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.gray.300.40-a}",
+          "blue-dark": "{color.alpha.gray.700.40-a}"
+        }
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.gray.200}",
+        "$modes": {
+          "blue-light": "{color.gray.200}",
+          "blue-dark": "{color.gray.800}"
+        }
+      },
+      "action-hover": {
+        "$type": "color",
+        "$value": "{color.gray.600}",
+        "$modes": {
+          "blue-light": "{color.gray.600}",
+          "blue-dark": "{color.gray.600}"
+        }
+      },
+      "action-active": {
+        "$type": "color",
+        "$value": "{color.gray.800}",
+        "$modes": {
+          "blue-light": "{color.gray.800}",
+          "blue-dark": "{color.gray.800}"
+        }
+      }
+    },
+    "positive": {
+      "strong": {
+        "$type": "color",
+        "$value": "{color.green.600}",
+        "$modes": {
+          "blue-light": "{color.green.600}",
+          "blue-dark": "{color.green.400}"
+        }
+      },
+      "strong-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.green.600.40-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.green.600.40-a}",
+          "blue-dark": "{color.alpha.green.400.40-a}"
+        }
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.green.500}",
+        "$modes": {
+          "blue-light": "{color.green.500}",
+          "blue-dark": "{color.green.500}"
+        }
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.green.500.40-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.green.500.40-a}",
+          "blue-dark": "{color.alpha.green.500.40-a}"
+        }
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.green.100}",
+        "$modes": {
+          "blue-light": "{color.green.100}",
+          "blue-dark": "{color.green.900}"
+        }
+      },
+      "action-hover": {
+        "$type": "color",
+        "$value": "{color.green.600}",
+        "$modes": {
+          "blue-light": "{color.green.600}",
+          "blue-dark": "{color.green.600}"
+        }
+      },
+      "action-active": {
+        "$type": "color",
+        "$value": "{color.green.800}",
+        "$modes": {
+          "blue-light": "{color.green.800}",
+          "blue-dark": "{color.green.800}"
+        }
+      }
+    },
+    "shadow": {
+      "100": {
+        "$type": "color",
+        "$value": "{color.alpha.black.10-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.black.10-a}",
+          "blue-dark": "{color.alpha.black.50-a}"
+        }
+      },
+      "200": {
+        "$type": "color",
+        "$value": "{color.alpha.black.10-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.black.10-a}",
+          "blue-dark": "{color.alpha.black.50-a}"
+        }
+      },
+      "300": {
+        "$type": "color",
+        "$value": "{color.alpha.black.20-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.black.20-a}",
+          "blue-dark": "{color.alpha.black.60-a}"
+        }
+      },
+      "400": {
+        "$type": "color",
+        "$value": "{color.alpha.black.20-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.black.20-a}",
+          "blue-dark": "{color.alpha.black.60-a}"
+        }
+      },
+      "500": {
+        "$type": "color",
+        "$value": "{color.alpha.black.30-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.black.30-a}",
+          "blue-dark": "{color.alpha.black.70-a}"
+        }
+      }
+    },
+    "warning": {
+      "strong": {
+        "$type": "color",
+        "$value": "{color.orange.600}",
+        "$modes": {
+          "blue-light": "{color.orange.600}",
+          "blue-dark": "{color.orange.400}"
+        }
+      },
+      "strong-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.orange.600.40-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.orange.600.40-a}",
+          "blue-dark": "{color.alpha.orange.400.40-a}"
+        }
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.orange.500}",
+        "$modes": {
+          "blue-light": "{color.orange.500}",
+          "blue-dark": "{color.orange.500}"
+        }
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.orange.500.40-a}",
+        "$modes": {
+          "blue-light": "{color.alpha.orange.500.40-a}",
+          "blue-dark": "{color.alpha.orange.500.40-a}"
+        }
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.orange.100}",
+        "$modes": {
+          "blue-light": "{color.orange.100}",
+          "blue-dark": "{color.orange.900}"
+        }
+      },
+      "action-hover": {
+        "$type": "color",
+        "$value": "{color.orange.600}",
+        "$modes": {
+          "blue-light": "{color.orange.600}",
+          "blue-dark": "{color.orange.600}"
+        }
+      },
+      "action-active": {
+        "$type": "color",
+        "$value": "{color.orange.800}",
+        "$modes": {
+          "blue-light": "{color.orange.800}",
+          "blue-dark": "{color.orange.800}"
+        }
+      }
+    },
+    "figma-only": {
+      "jpmorgan": {
+        "$type": "color",
+        "$value": "{color.figma-only.jp-morgan.brown}",
+        "$modes": {
+          "blue-light": "{color.figma-only.jp-morgan.brown}",
+          "blue-dark": "{color.white}"
+        }
+      },
+      "chase": {
+        "$type": "color",
+        "$value": "{color.figma-only.chase.black}",
+        "$modes": {
+          "blue-light": "{color.figma-only.chase.black}",
+          "blue-dark": "{color.white}"
+        }
+      },
+      "chase-symbol": {
+        "$type": "color",
+        "$value": "{color.figma-only.chase.blue}",
+        "$modes": {
+          "blue-light": "{color.figma-only.chase.blue}",
+          "blue-dark": "{color.white}"
+        }
+      }
+    },
+    "transparent": {
+      "$type": "color",
+      "$value": "{color.alpha.white.0-a}",
+      "$modes": {
+        "blue-light": "{color.alpha.white.0-a}",
+        "blue-dark": "{color.alpha.black.0-a}"
+      }
+    }
+  }
+}
\ No newline at end of file

From c17bb4ab155e33dc71d5aff62625ddd756e1cc58 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Wed, 20 Nov 2024 16:57:11 +0000
Subject: [PATCH 07/35] Add accent + mode. How to remove accent from uncessary
 css?

---
 packages/theme/scripts/build-json.mjs         | 285 +++----
 .../helpers/combine-tokens-to-modes.mjs       |   2 +
 .../tokens/foundation/colors-next.tokens.json | 148 ++--
 .../tokens/palette/blue-dark-next.tokens.json |  70 +-
 .../palette/blue-light-next.tokens.json       |  70 +-
 .../tokens/palette/palette-next.tokens.json   | 700 ++++++++++++------
 .../tokens/palette/teal-dark-next.tokens.json | 628 ++++++++++++++++
 .../palette/teal-light-next.tokens.json       | 628 ++++++++++++++++
 8 files changed, 2036 insertions(+), 495 deletions(-)
 create mode 100644 packages/theme/tokens/palette/teal-dark-next.tokens.json
 create mode 100644 packages/theme/tokens/palette/teal-light-next.tokens.json

diff --git a/packages/theme/scripts/build-json.mjs b/packages/theme/scripts/build-json.mjs
index 848e0533bc..57ad62c95a 100644
--- a/packages/theme/scripts/build-json.mjs
+++ b/packages/theme/scripts/build-json.mjs
@@ -3,7 +3,7 @@ import { StyleDictionary } from "style-dictionary-utils";
 import { cssMultiModes } from "./sd-utils/format/css-multi-modes.mjs";
 
 // TODO: add more styling options here, and theme vs theme next
-function getStyleDictionaryConfig({ modes, density, accent }) {
+function getStyleDictionaryConfig({ modes, density, accents }) {
   const paletteNextList = [
     "accent",
     "corner",
@@ -99,36 +99,42 @@ function getStyleDictionaryConfig({ modes, density, accent }) {
           // Inpire from `atRule` option, to work out multiple modes in a single file?
           // https://github.com/lukasoppermann/style-dictionary-utils/blob/main/src/format/css-advanced.ts
           // Not really, SD will warn Collision detected, and only use one value at a time, we need to come up with custom syntax to make this work
-          ...paletteNextList.map((paletteNextType) => ({
-            format: "salt-ds/css/multi-modes",
-            // format: "css/advanced",
-            destination: `palette/${paletteNextType}-next.css`,
-            options: {
-              // selector: `.salt-theme.salt-theme-next[data-mode="${mode}"][data-accent="${accent}"]`, // defaults to :root
-              outputReferences: true,
-              usesDtcg: true,
-              rules: modes.map((mode) => ({
-                selector: `.salt-theme.salt-theme-next[data-mode="${mode}"][data-accent="${accent}"]`,
-                // matcher: (token) =>
-                //   token.filePath.includes(mode) &&
-                //   token.filePath.includes(accent),
-                modeIdentifier: `${accent}-${mode}`,
-              })),
-            },
-            // // Use filter to add different `selector` for mode/density/etc.
-            filter: async (token, options) => {
-              console.log("css/advanced filter", token); //palette-accent
-              //  For some reason, attributes "attribute/cti" is not attached to tokens in palette
-              return (
-                // next
-                token.filePath.includes("-next.tokens") &&
-                // platte
-                token.path[0] === "palette" && // or token.filePath.includes("/palette/") &&
-                //
-                token.path[1] === paletteNextType
-              );
-            },
-          })),
+          ...paletteNextList.map((paletteNextType) => {
+            const modeAccentRules = modes.reduce((prev, mode) => {
+              for (const accent of accents) {
+                prev.push({
+                  selector: `.salt-theme.salt-theme-next[data-mode="${mode}"][data-accent="${accent}"]`,
+                  modeIdentifier: `${accent}-${mode}`,
+                });
+              }
+              return prev;
+            }, []);
+            console.log({ modeAccentRules });
+            return {
+              format: "salt-ds/css/multi-modes",
+              // format: "css/advanced",
+              destination: `palette/${paletteNextType}-next.css`,
+              options: {
+                // selector: `.salt-theme.salt-theme-next[data-mode="${mode}"][data-accent="${accent}"]`, // defaults to :root
+                outputReferences: true,
+                usesDtcg: true,
+                rules: modeAccentRules,
+              },
+              // // Use filter to add different `selector` for mode/density/etc.
+              filter: async (token, options) => {
+                console.log("css/advanced filter", token); //palette-accent
+                //  For some reason, attributes "attribute/cti" is not attached to tokens in palette
+                return (
+                  // next
+                  token.filePath.includes("-next.tokens") &&
+                  // platte
+                  token.path[0] === "palette" && // or token.filePath.includes("/palette/") &&
+                  //
+                  token.path[1] === paletteNextType
+                );
+              },
+            };
+          }),
         ],
       },
     },
@@ -146,131 +152,128 @@ const SPLIT_REPLACE_VALUE = "$1\0$2";
 const DEFAULT_STRIP_REGEXP = /[^\p{L}\d]+/giu;
 
 const modes = ["light", "dark"];
+const accents = ["blue", "teal"];
 // for await (const mode of ["dark"]) {
-for await (const accent of ["blue"]) {
-  // , "md", "ld", "td"
-  for await (const density of ["hd"]) {
-    const config = getStyleDictionaryConfig({ modes, density, accent });
+// , "md", "ld", "td"
+for await (const density of ["hd"]) {
+  const config = getStyleDictionaryConfig({ modes, density, accents });
 
-    const saltStyleDictionary = new StyleDictionary(
-      {},
-      { verbosity: "verbose" }, // for debug
-    );
-    // TODO: custom file header - https://styledictionary.com/reference/hooks/file-headers/
+  const saltStyleDictionary = new StyleDictionary(
+    {},
+    { verbosity: "verbose" }, // for debug
+  );
+  // TODO: custom file header - https://styledictionary.com/reference/hooks/file-headers/
 
-    saltStyleDictionary.registerFormat({
-      name: "salt-ds/css/multi-modes",
-      format: cssMultiModes,
-    });
-
-    // TODO: find out why when `value` transform is provided, name is broken
-    // This is currently not used, but would be good to understand regardless
-    saltStyleDictionary.registerTransform({
-      type: "value",
-      // if `transitive` is not here, `transform` is not being called...
-      transitive: true,
-      name: "salt-ds/value/modes",
-      filter: (token, options) => {
-        return token.$modes !== undefined;
-        // const filterCondition =
-        //   token.filePath.includes("-next.tokens") &&
-        //   token.path[0] === "palette";
-        // console.log("salt-ds/value/modes filter", filterCondition, token);
-        // return filterCondition;
-      },
-      transform: (token, _, options) => {
-        console.log("salt-ds/value/modes transform", token);
-        // debugger;
-        if (
-          // token.path.includes("palette")
-          token.attributes.category === "palette" &&
-          token.attributes.type === "accent" &&
-          token.attributes.item === "stronger"
-        ) {
-          console.log("palette accent stronger", token);
-        }
+  saltStyleDictionary.registerFormat({
+    name: "salt-ds/css/multi-modes",
+    format: cssMultiModes,
+  });
 
-        return token.$modes; // how to work out `.light` here?
-      },
-    });
+  // TODO: find out why when `value` transform is provided, name is broken
+  // This is currently not used, but would be good to understand regardless
+  saltStyleDictionary.registerTransform({
+    type: "value",
+    // if `transitive` is not here, `transform` is not being called...
+    transitive: true,
+    name: "salt-ds/value/modes",
+    filter: (token, options) => {
+      return token.$modes !== undefined;
+      // const filterCondition =
+      //   token.filePath.includes("-next.tokens") &&
+      //   token.path[0] === "palette";
+      // console.log("salt-ds/value/modes filter", filterCondition, token);
+      // return filterCondition;
+    },
+    transform: (token, _, options) => {
+      console.log("salt-ds/value/modes transform", token);
+      // debugger;
+      if (
+        // token.path.includes("palette")
+        token.attributes.category === "palette" &&
+        token.attributes.type === "accent" &&
+        token.attributes.item === "stronger"
+      ) {
+        console.log("palette accent stronger", token);
+      }
 
-    // Custom transform - https://styledictionary.com/reference/hooks/transforms/
-    saltStyleDictionary.registerTransform({
-      name: "salt-ds/name/kebab",
-      type: "name",
-      transitive: true,
-      transform: (token, config) => {
-        // attributes: { category: 'color', type: 'alpha',
-        if (
-          token.path.includes("alpha") &&
-          token.attributes.category === "color" &&
-          token.attributes.type === "alpha"
-        ) {
-          const alphaIndex = token.path.findIndex((p) => p === "alpha");
-          const alphaRemovedPath = [
-            ...token.path.slice(0, alphaIndex),
-            ...token.path.slice(alphaIndex + 1),
-          ];
-          // console.log("Token path with alpha removed", alphaRemovedPath);
+      return token.$modes; // how to work out `.light` here?
+    },
+  });
 
-          function splitPrefixSuffix(input) {
-            const splitFn = modifiedSplit;
-            const prefixIndex = 0;
-            const suffixIndex = input.length;
+  // Custom transform - https://styledictionary.com/reference/hooks/transforms/
+  saltStyleDictionary.registerTransform({
+    name: "salt-ds/name/kebab",
+    type: "name",
+    transitive: true,
+    transform: (token, config) => {
+      // attributes: { category: 'color', type: 'alpha',
+      if (
+        token.path.includes("alpha") &&
+        token.attributes.category === "color" &&
+        token.attributes.type === "alpha"
+      ) {
+        const alphaIndex = token.path.findIndex((p) => p === "alpha");
+        const alphaRemovedPath = [
+          ...token.path.slice(0, alphaIndex),
+          ...token.path.slice(alphaIndex + 1),
+        ];
+        // console.log("Token path with alpha removed", alphaRemovedPath);
 
-            return [
-              input.slice(0, prefixIndex),
-              splitFn(input.slice(prefixIndex, suffixIndex)),
-              input.slice(suffixIndex),
-            ];
-          }
+        function splitPrefixSuffix(input) {
+          const splitFn = modifiedSplit;
+          const prefixIndex = 0;
+          const suffixIndex = input.length;
 
-          function specialKebab(input) {
-            const [prefix, words, suffix] = splitPrefixSuffix(input);
-            return (
-              prefix +
-              words.map((input) => input.toLowerCase()).join("-") +
-              suffix
-            );
-          }
+          return [
+            input.slice(0, prefixIndex),
+            splitFn(input.slice(prefixIndex, suffixIndex)),
+            input.slice(suffixIndex),
+          ];
+        }
 
-          function modifiedSplit(value) {
-            let result = value.trim();
+        function specialKebab(input) {
+          const [prefix, words, suffix] = splitPrefixSuffix(input);
+          return (
+            prefix +
+            words.map((input) => input.toLowerCase()).join("-") +
+            suffix
+          );
+        }
 
-            result = result
-              // `SPLIT_LOWER_NON_DIGIT_UPPER_RE` changed compare with 'change-case' original split
-              // Change to not split 30A -> 30-A
-              .replace(SPLIT_LOWER_NON_DIGIT_UPPER_RE, SPLIT_REPLACE_VALUE)
-              .replace(SPLIT_UPPER_UPPER_RE, SPLIT_REPLACE_VALUE);
+        function modifiedSplit(value) {
+          let result = value.trim();
 
-            result = result.replace(DEFAULT_STRIP_REGEXP, "\0");
+          result = result
+            // `SPLIT_LOWER_NON_DIGIT_UPPER_RE` changed compare with 'change-case' original split
+            // Change to not split 30A -> 30-A
+            .replace(SPLIT_LOWER_NON_DIGIT_UPPER_RE, SPLIT_REPLACE_VALUE)
+            .replace(SPLIT_UPPER_UPPER_RE, SPLIT_REPLACE_VALUE);
 
-            let start = 0;
-            let end = result.length;
+          result = result.replace(DEFAULT_STRIP_REGEXP, "\0");
 
-            // Trim the delimiter from around the output string.
-            while (result.charAt(start) === "\0") start++;
-            if (start === end) return [];
-            while (result.charAt(end - 1) === "\0") end--;
+          let start = 0;
+          let end = result.length;
 
-            return result.slice(start, end).split(/\0/g);
-          }
+          // Trim the delimiter from around the output string.
+          while (result.charAt(start) === "\0") start++;
+          if (start === end) return [];
+          while (result.charAt(end - 1) === "\0") end--;
 
-          const name = specialKebab(
-            [config.prefix].concat(alphaRemovedPath).join(" "),
-          );
-          console.log("salt-ds/name/kebab specialKebab name", name, token);
-          return name;
+          return result.slice(start, end).split(/\0/g);
         }
-        const name = kebabCase([config.prefix].concat(token.path).join(" "));
-        console.log("salt-ds/name/kebab name", name, token);
+
+        const name = specialKebab(
+          [config.prefix].concat(alphaRemovedPath).join(" "),
+        );
+        console.log("salt-ds/name/kebab specialKebab name", name, token);
         return name;
-      },
-    });
-    const sd = await saltStyleDictionary.extend(config);
-    sd.cleanAllPlatforms();
-    sd.buildAllPlatforms();
-  }
+      }
+      const name = kebabCase([config.prefix].concat(token.path).join(" "));
+      console.log("salt-ds/name/kebab name", name, token);
+      return name;
+    },
+  });
+  const sd = await saltStyleDictionary.extend(config);
+  sd.cleanAllPlatforms();
+  sd.buildAllPlatforms();
 }
-// }
-//
diff --git a/packages/theme/scripts/helpers/combine-tokens-to-modes.mjs b/packages/theme/scripts/helpers/combine-tokens-to-modes.mjs
index ba555d54a3..e6d75abbab 100644
--- a/packages/theme/scripts/helpers/combine-tokens-to-modes.mjs
+++ b/packages/theme/scripts/helpers/combine-tokens-to-modes.mjs
@@ -5,6 +5,8 @@ const files = {
   // first one would be the default $value
   "blue-light": "../../tokens/palette/blue-light-next.tokens.json",
   "blue-dark": "../../tokens/palette/blue-dark-next.tokens.json",
+  "teal-light": "../../tokens/palette/teal-light-next.tokens.json",
+  "teal-dark": "../../tokens/palette/teal-dark-next.tokens.json",
 };
 
 const outputFile = "../../tokens/palette/palette-next.tokens.json";
diff --git a/packages/theme/tokens/foundation/colors-next.tokens.json b/packages/theme/tokens/foundation/colors-next.tokens.json
index 582c439244..592eeb6fe6 100644
--- a/packages/theme/tokens/foundation/colors-next.tokens.json
+++ b/packages/theme/tokens/foundation/colors-next.tokens.json
@@ -308,224 +308,224 @@
     },
     "alpha": {
       "white": {
-        "0-a": {
+        "0a": {
           "$type": "color",
           "$value": "#ffffff00"
         },
-        "5-a": {
+        "5a": {
           "$type": "color",
           "$value": "#ffffff0d"
         },
-        "10-a": {
+        "10a": {
           "$type": "color",
           "$value": "#ffffff1a"
         },
-        "15-a": {
+        "15a": {
           "$type": "color",
           "$value": "#ffffff26"
         },
-        "20-a": {
+        "20a": {
           "$type": "color",
           "$value": "#ffffff33"
         },
-        "25-a": {
+        "25a": {
           "$type": "color",
           "$value": "#ffffff40"
         },
-        "30-a": {
+        "30a": {
           "$type": "color",
           "$value": "#ffffff4d"
         },
-        "35-a": {
+        "35a": {
           "$type": "color",
           "$value": "#ffffff59"
         },
-        "40-a": {
+        "40a": {
           "$type": "color",
           "$value": "#ffffff66"
         },
-        "45-a": {
+        "45a": {
           "$type": "color",
           "$value": "#ffffff73"
         },
-        "50-a": {
+        "50a": {
           "$type": "color",
           "$value": "#ffffff80"
         },
-        "55-a": {
+        "55a": {
           "$type": "color",
           "$value": "#ffffff8c"
         },
-        "60-a": {
+        "60a": {
           "$type": "color",
           "$value": "#ffffff99"
         },
-        "65-a": {
+        "65a": {
           "$type": "color",
           "$value": "#ffffffa6"
         },
-        "70-a": {
+        "70a": {
           "$type": "color",
           "$value": "#ffffffb2"
         },
-        "75-a": {
+        "75a": {
           "$type": "color",
           "$value": "#ffffffbf"
         },
-        "80-a": {
+        "80a": {
           "$type": "color",
           "$value": "#ffffffcc"
         }
       },
       "snow": {
-        "40-a": {
+        "40a": {
           "$type": "color",
           "$value": "#ffffff66"
         }
       },
       "marble": {
-        "40-a": {
+        "40a": {
           "$type": "color",
           "$value": "#f2f4f666"
         }
       },
       "limestone": {
-        "40-a": {
+        "40a": {
           "$type": "color",
           "$value": "#faf8f266"
         }
       },
       "charcoal": {
-        "40-a": {
+        "40a": {
           "$type": "color",
           "$value": "#474c5066"
         }
       },
       "leather": {
-        "40-a": {
+        "40a": {
           "$type": "color",
           "$value": "#26292b66"
         }
       },
       "jet": {
-        "40-a": {
+        "40a": {
           "$type": "color",
           "$value": "#10182066"
         }
       },
       "black": {
-        "0-a": {
+        "0a": {
           "$type": "color",
           "$value": "#00000000"
         },
-        "5-a": {
+        "5a": {
           "$type": "color",
           "$value": "#0000000d"
         },
-        "10-a": {
+        "10a": {
           "$type": "color",
           "$value": "#0000001a"
         },
-        "15-a": {
+        "15a": {
           "$type": "color",
           "$value": "#00000026"
         },
-        "20-a": {
+        "20a": {
           "$type": "color",
           "$value": "#00000033"
         },
-        "25-a": {
+        "25a": {
           "$type": "color",
           "$value": "#00000040"
         },
-        "30-a": {
+        "30a": {
           "$type": "color",
           "$value": "#0000004d"
         },
-        "35-a": {
+        "35a": {
           "$type": "color",
           "$value": "#00000059"
         },
-        "40-a": {
+        "40a": {
           "$type": "color",
           "$value": "#00000066"
         },
-        "45-a": {
+        "45a": {
           "$type": "color",
           "$value": "#00000073"
         },
-        "50-a": {
+        "50a": {
           "$type": "color",
           "$value": "#00000080"
         },
-        "55-a": {
+        "55a": {
           "$type": "color",
           "$value": "#0000008c"
         },
-        "60-a": {
+        "60a": {
           "$type": "color",
           "$value": "#00000099"
         },
-        "65-a": {
+        "65a": {
           "$type": "color",
           "$value": "#000000a6"
         },
-        "70-a": {
+        "70a": {
           "$type": "color",
           "$value": "#000000b2"
         },
-        "75-a": {
+        "75a": {
           "$type": "color",
           "$value": "#000000bf"
         },
-        "80-a": {
+        "80a": {
           "$type": "color",
           "$value": "#000000cc"
         }
       },
       "gray": {
         "300": {
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#b1b5b966"
           }
         },
         "400": {
-          "10-a": {
+          "10a": {
             "$type": "color",
             "$value": "#91959a1a"
           },
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#91959a66"
           }
         },
         "500": {
-          "0-a": {
+          "0a": {
             "$type": "color",
             "$value": "#72777d00"
           },
-          "10-a": {
+          "10a": {
             "$type": "color",
             "$value": "#72777d1a"
           },
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#72777d66"
           }
         },
         "600": {
-          "10-a": {
+          "10a": {
             "$type": "color",
             "$value": "#5f646a1a"
           },
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#61666c66"
           }
         },
         "700": {
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#4c515766"
           }
@@ -533,47 +533,47 @@
       },
       "blue": {
         "200": {
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#c7deff66"
           }
         },
         "300": {
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#9abdf566"
           }
         },
         "400": {
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#669ce866"
           }
         },
         "500": {
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#0078cf66"
           },
-          "0-a": {
+          "0a": {
             "$type": "color",
             "$value": "#0078cf00"
           }
         },
         "600": {
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#005ea666"
           }
         },
         "700": {
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#00457e66"
           }
         },
         "800": {
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#002d5966"
           }
@@ -581,47 +581,47 @@
       },
       "teal": {
         "200": {
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#afe0ed66"
           }
         },
         "300": {
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#83c0d666"
           }
         },
         "400": {
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#4ca1c266"
           }
         },
         "500": {
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#1b7f9e66"
           },
-          "0-a": {
+          "0a": {
             "$type": "color",
             "$value": "#1b7f9e00"
           }
         },
         "600": {
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#12647e66"
           }
         },
         "700": {
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#094a6066"
           }
         },
         "800": {
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#03314266"
           }
@@ -629,19 +629,19 @@
       },
       "green": {
         "400": {
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#53b08766"
           }
         },
         "500": {
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#00875d66"
           }
         },
         "600": {
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#006b4866"
           }
@@ -649,19 +649,19 @@
       },
       "orange": {
         "400": {
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#e87a3866"
           }
         },
         "500": {
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#c7530066"
           }
         },
         "600": {
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#a3440066"
           }
@@ -669,19 +669,19 @@
       },
       "red": {
         "400": {
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#ff5d5766"
           }
         },
         "500": {
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#e5213566"
           }
         },
         "600": {
-          "40-a": {
+          "40a": {
             "$type": "color",
             "$value": "#ba172966"
           }
diff --git a/packages/theme/tokens/palette/blue-dark-next.tokens.json b/packages/theme/tokens/palette/blue-dark-next.tokens.json
index 091dfd9c5e..49ae5c6655 100644
--- a/packages/theme/tokens/palette/blue-dark-next.tokens.json
+++ b/packages/theme/tokens/palette/blue-dark-next.tokens.json
@@ -7,7 +7,7 @@
       },
       "stronger-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.blue.300.40-a}"
+        "$value": "{color.alpha.blue.300.40a}"
       },
       "strong": {
         "$type": "color",
@@ -15,7 +15,7 @@
       },
       "strong-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.blue.400.40-a}"
+        "$value": "{color.alpha.blue.400.40a}"
       },
       "default": {
         "$type": "color",
@@ -23,11 +23,11 @@
       },
       "none": {
         "$type": "color",
-        "$value": "{color.alpha.blue.500.0-a}"
+        "$value": "{color.alpha.blue.500.0a}"
       },
       "disabled": {
         "$type": "color",
-        "$value": "{color.alpha.blue.500.40-a}"
+        "$value": "{color.alpha.blue.500.40a}"
       },
       "weak": {
         "$type": "color",
@@ -39,7 +39,7 @@
       },
       "weaker-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.blue.800.40-a}"
+        "$value": "{color.alpha.blue.800.40a}"
       },
       "weakest": {
         "$type": "color",
@@ -57,27 +57,27 @@
     "alpha": {
       "strong": {
         "$type": "color",
-        "$value": "{color.alpha.white.45-a}"
+        "$value": "{color.alpha.white.45a}"
       },
       "default": {
         "$type": "color",
-        "$value": "{color.alpha.white.30-a}"
+        "$value": "{color.alpha.white.30a}"
       },
       "weak": {
         "$type": "color",
-        "$value": "{color.alpha.white.15-a}"
+        "$value": "{color.alpha.white.15a}"
       },
       "weaker": {
         "$type": "color",
-        "$value": "{color.alpha.white.10-a}"
+        "$value": "{color.alpha.white.10a}"
       },
       "none": {
         "$type": "color",
-        "$value": "{color.alpha.white.0-a}"
+        "$value": "{color.alpha.white.0a}"
       },
       "backdrop": {
         "$type": "color",
-        "$value": "{color.alpha.black.70-a}"
+        "$value": "{color.alpha.black.70a}"
       }
     },
     "background": {
@@ -87,7 +87,7 @@
       },
       "primary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.jet.40-a}"
+        "$value": "{color.alpha.jet.40a}"
       },
       "secondary": {
         "$type": "color",
@@ -95,7 +95,7 @@
       },
       "secondary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.charcoal.40-a}"
+        "$value": "{color.alpha.charcoal.40a}"
       },
       "tertiary": {
         "$type": "color",
@@ -103,7 +103,7 @@
       },
       "tertiary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.leather.40-a}"
+        "$value": "{color.alpha.leather.40a}"
       }
     },
     "categorical": {
@@ -395,7 +395,7 @@
       },
       "primary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.white.40-a}"
+        "$value": "{color.alpha.white.40a}"
       },
       "secondary": {
         "$type": "color",
@@ -403,7 +403,7 @@
       },
       "secondary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.gray.300.40-a}"
+        "$value": "{color.alpha.gray.300.40a}"
       },
       "primary-alt": {
         "$type": "color",
@@ -411,7 +411,7 @@
       },
       "primary-alt-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.white.40-a}"
+        "$value": "{color.alpha.white.40a}"
       },
       "hover": {
         "$type": "color",
@@ -447,7 +447,7 @@
       },
       "strong-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.red.400.40-a}"
+        "$value": "{color.alpha.red.400.40a}"
       },
       "default": {
         "$type": "color",
@@ -455,7 +455,7 @@
       },
       "disabled": {
         "$type": "color",
-        "$value": "{color.alpha.red.500.40-a}"
+        "$value": "{color.alpha.red.500.40a}"
       },
       "weakest": {
         "$type": "color",
@@ -477,7 +477,7 @@
       },
       "strong-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.gray.400.40-a}"
+        "$value": "{color.alpha.gray.400.40a}"
       },
       "default": {
         "$type": "color",
@@ -485,11 +485,11 @@
       },
       "disabled": {
         "$type": "color",
-        "$value": "{color.alpha.gray.500.40-a}"
+        "$value": "{color.alpha.gray.500.40a}"
       },
       "readonly": {
         "$type": "color",
-        "$value": "{color.alpha.gray.500.10-a}"
+        "$value": "{color.alpha.gray.500.10a}"
       },
       "weak": {
         "$type": "color",
@@ -497,11 +497,11 @@
       },
       "weak-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.gray.600.40-a}"
+        "$value": "{color.alpha.gray.600.40a}"
       },
       "weak-readonly": {
         "$type": "color",
-        "$value": "{color.alpha.gray.600.10-a}"
+        "$value": "{color.alpha.gray.600.10a}"
       },
       "weaker": {
         "$type": "color",
@@ -509,7 +509,7 @@
       },
       "weaker-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.gray.700.40-a}"
+        "$value": "{color.alpha.gray.700.40a}"
       },
       "weakest": {
         "$type": "color",
@@ -531,7 +531,7 @@
       },
       "strong-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.green.400.40-a}"
+        "$value": "{color.alpha.green.400.40a}"
       },
       "default": {
         "$type": "color",
@@ -539,7 +539,7 @@
       },
       "disabled": {
         "$type": "color",
-        "$value": "{color.alpha.green.500.40-a}"
+        "$value": "{color.alpha.green.500.40a}"
       },
       "weakest": {
         "$type": "color",
@@ -557,23 +557,23 @@
     "shadow": {
       "100": {
         "$type": "color",
-        "$value": "{color.alpha.black.50-a}"
+        "$value": "{color.alpha.black.50a}"
       },
       "200": {
         "$type": "color",
-        "$value": "{color.alpha.black.50-a}"
+        "$value": "{color.alpha.black.50a}"
       },
       "300": {
         "$type": "color",
-        "$value": "{color.alpha.black.60-a}"
+        "$value": "{color.alpha.black.60a}"
       },
       "400": {
         "$type": "color",
-        "$value": "{color.alpha.black.60-a}"
+        "$value": "{color.alpha.black.60a}"
       },
       "500": {
         "$type": "color",
-        "$value": "{color.alpha.black.70-a}"
+        "$value": "{color.alpha.black.70a}"
       }
     },
     "warning": {
@@ -583,7 +583,7 @@
       },
       "strong-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.orange.400.40-a}"
+        "$value": "{color.alpha.orange.400.40a}"
       },
       "default": {
         "$type": "color",
@@ -591,7 +591,7 @@
       },
       "disabled": {
         "$type": "color",
-        "$value": "{color.alpha.orange.500.40-a}"
+        "$value": "{color.alpha.orange.500.40a}"
       },
       "weakest": {
         "$type": "color",
@@ -622,7 +622,7 @@
     },
     "transparent": {
       "$type": "color",
-      "$value": "{color.alpha.black.0-a}"
+      "$value": "{color.alpha.black.0a}"
     }
   }
 }
diff --git a/packages/theme/tokens/palette/blue-light-next.tokens.json b/packages/theme/tokens/palette/blue-light-next.tokens.json
index d0e2cf58ff..648f9e69b1 100644
--- a/packages/theme/tokens/palette/blue-light-next.tokens.json
+++ b/packages/theme/tokens/palette/blue-light-next.tokens.json
@@ -7,7 +7,7 @@
       },
       "stronger-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.blue.700.40-a}"
+        "$value": "{color.alpha.blue.700.40a}"
       },
       "strong": {
         "$type": "color",
@@ -15,7 +15,7 @@
       },
       "strong-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.blue.600.40-a}"
+        "$value": "{color.alpha.blue.600.40a}"
       },
       "default": {
         "$type": "color",
@@ -23,11 +23,11 @@
       },
       "none": {
         "$type": "color",
-        "$value": "{color.alpha.blue.500.0-a}"
+        "$value": "{color.alpha.blue.500.0a}"
       },
       "disabled": {
         "$type": "color",
-        "$value": "{color.alpha.blue.500.40-a}"
+        "$value": "{color.alpha.blue.500.40a}"
       },
       "weak": {
         "$type": "color",
@@ -39,7 +39,7 @@
       },
       "weaker-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.blue.200.40-a}"
+        "$value": "{color.alpha.blue.200.40a}"
       },
       "weakest": {
         "$type": "color",
@@ -57,27 +57,27 @@
     "alpha": {
       "strong": {
         "$type": "color",
-        "$value": "{color.alpha.black.45-a}"
+        "$value": "{color.alpha.black.45a}"
       },
       "default": {
         "$type": "color",
-        "$value": "{color.alpha.black.30-a}"
+        "$value": "{color.alpha.black.30a}"
       },
       "weak": {
         "$type": "color",
-        "$value": "{color.alpha.black.15-a}"
+        "$value": "{color.alpha.black.15a}"
       },
       "weaker": {
         "$type": "color",
-        "$value": "{color.alpha.black.10-a}"
+        "$value": "{color.alpha.black.10a}"
       },
       "none": {
         "$type": "color",
-        "$value": "{color.alpha.black.0-a}"
+        "$value": "{color.alpha.black.0a}"
       },
       "backdrop": {
         "$type": "color",
-        "$value": "{color.alpha.white.70-a}"
+        "$value": "{color.alpha.white.70a}"
       }
     },
     "background": {
@@ -87,7 +87,7 @@
       },
       "primary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.snow.40-a}"
+        "$value": "{color.alpha.snow.40a}"
       },
       "secondary": {
         "$type": "color",
@@ -95,7 +95,7 @@
       },
       "secondary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.marble.40-a}"
+        "$value": "{color.alpha.marble.40a}"
       },
       "tertiary": {
         "$type": "color",
@@ -103,7 +103,7 @@
       },
       "tertiary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.limestone.40-a}"
+        "$value": "{color.alpha.limestone.40a}"
       }
     },
     "categorical": {
@@ -395,7 +395,7 @@
       },
       "primary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.black.40-a}"
+        "$value": "{color.alpha.black.40a}"
       },
       "secondary": {
         "$type": "color",
@@ -403,7 +403,7 @@
       },
       "secondary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.gray.700.40-a}"
+        "$value": "{color.alpha.gray.700.40a}"
       },
       "primary-alt": {
         "$type": "color",
@@ -411,7 +411,7 @@
       },
       "primary-alt-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.white.40-a}"
+        "$value": "{color.alpha.white.40a}"
       },
       "hover": {
         "$type": "color",
@@ -447,7 +447,7 @@
       },
       "strong-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.red.600.40-a}"
+        "$value": "{color.alpha.red.600.40a}"
       },
       "default": {
         "$type": "color",
@@ -455,7 +455,7 @@
       },
       "disabled": {
         "$type": "color",
-        "$value": "{color.alpha.red.500.40-a}"
+        "$value": "{color.alpha.red.500.40a}"
       },
       "weakest": {
         "$type": "color",
@@ -477,7 +477,7 @@
       },
       "strong-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.gray.600.40-a}"
+        "$value": "{color.alpha.gray.600.40a}"
       },
       "default": {
         "$type": "color",
@@ -485,11 +485,11 @@
       },
       "disabled": {
         "$type": "color",
-        "$value": "{color.alpha.gray.500.40-a}"
+        "$value": "{color.alpha.gray.500.40a}"
       },
       "readonly": {
         "$type": "color",
-        "$value": "{color.alpha.gray.500.10-a}"
+        "$value": "{color.alpha.gray.500.10a}"
       },
       "weak": {
         "$type": "color",
@@ -497,11 +497,11 @@
       },
       "weak-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.gray.400.40-a}"
+        "$value": "{color.alpha.gray.400.40a}"
       },
       "weak-readonly": {
         "$type": "color",
-        "$value": "{color.alpha.gray.400.10-a}"
+        "$value": "{color.alpha.gray.400.10a}"
       },
       "weaker": {
         "$type": "color",
@@ -509,7 +509,7 @@
       },
       "weaker-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.gray.300.40-a}"
+        "$value": "{color.alpha.gray.300.40a}"
       },
       "weakest": {
         "$type": "color",
@@ -531,7 +531,7 @@
       },
       "strong-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.green.600.40-a}"
+        "$value": "{color.alpha.green.600.40a}"
       },
       "default": {
         "$type": "color",
@@ -539,7 +539,7 @@
       },
       "disabled": {
         "$type": "color",
-        "$value": "{color.alpha.green.500.40-a}"
+        "$value": "{color.alpha.green.500.40a}"
       },
       "weakest": {
         "$type": "color",
@@ -557,23 +557,23 @@
     "shadow": {
       "100": {
         "$type": "color",
-        "$value": "{color.alpha.black.10-a}"
+        "$value": "{color.alpha.black.10a}"
       },
       "200": {
         "$type": "color",
-        "$value": "{color.alpha.black.10-a}"
+        "$value": "{color.alpha.black.10a}"
       },
       "300": {
         "$type": "color",
-        "$value": "{color.alpha.black.20-a}"
+        "$value": "{color.alpha.black.20a}"
       },
       "400": {
         "$type": "color",
-        "$value": "{color.alpha.black.20-a}"
+        "$value": "{color.alpha.black.20a}"
       },
       "500": {
         "$type": "color",
-        "$value": "{color.alpha.black.30-a}"
+        "$value": "{color.alpha.black.30a}"
       }
     },
     "warning": {
@@ -583,7 +583,7 @@
       },
       "strong-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.orange.600.40-a}"
+        "$value": "{color.alpha.orange.600.40a}"
       },
       "default": {
         "$type": "color",
@@ -591,7 +591,7 @@
       },
       "disabled": {
         "$type": "color",
-        "$value": "{color.alpha.orange.500.40-a}"
+        "$value": "{color.alpha.orange.500.40a}"
       },
       "weakest": {
         "$type": "color",
@@ -622,7 +622,7 @@
     },
     "transparent": {
       "$type": "color",
-      "$value": "{color.alpha.white.0-a}"
+      "$value": "{color.alpha.white.0a}"
     }
   }
 }
diff --git a/packages/theme/tokens/palette/palette-next.tokens.json b/packages/theme/tokens/palette/palette-next.tokens.json
index fbbb4e96c7..cf25e77d27 100644
--- a/packages/theme/tokens/palette/palette-next.tokens.json
+++ b/packages/theme/tokens/palette/palette-next.tokens.json
@@ -6,15 +6,19 @@
         "$value": "{color.blue.700}",
         "$modes": {
           "blue-light": "{color.blue.700}",
-          "blue-dark": "{color.blue.300}"
+          "blue-dark": "{color.blue.300}",
+          "teal-light": "{color.teal.700}",
+          "teal-dark": "{color.teal.300}"
         }
       },
       "stronger-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.blue.700.40-a}",
+        "$value": "{color.alpha.blue.700.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.blue.700.40-a}",
-          "blue-dark": "{color.alpha.blue.300.40-a}"
+          "blue-light": "{color.alpha.blue.700.40a}",
+          "blue-dark": "{color.alpha.blue.300.40a}",
+          "teal-light": "{color.alpha.teal.700.40a}",
+          "teal-dark": "{color.alpha.teal.300.40a}"
         }
       },
       "strong": {
@@ -22,15 +26,19 @@
         "$value": "{color.blue.600}",
         "$modes": {
           "blue-light": "{color.blue.600}",
-          "blue-dark": "{color.blue.400}"
+          "blue-dark": "{color.blue.400}",
+          "teal-light": "{color.teal.600}",
+          "teal-dark": "{color.teal.400}"
         }
       },
       "strong-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.blue.600.40-a}",
+        "$value": "{color.alpha.blue.600.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.blue.600.40-a}",
-          "blue-dark": "{color.alpha.blue.400.40-a}"
+          "blue-light": "{color.alpha.blue.600.40a}",
+          "blue-dark": "{color.alpha.blue.400.40a}",
+          "teal-light": "{color.alpha.teal.600.40a}",
+          "teal-dark": "{color.alpha.teal.400.40a}"
         }
       },
       "default": {
@@ -38,23 +46,29 @@
         "$value": "{color.blue.500}",
         "$modes": {
           "blue-light": "{color.blue.500}",
-          "blue-dark": "{color.blue.500}"
+          "blue-dark": "{color.blue.500}",
+          "teal-light": "{color.teal.500}",
+          "teal-dark": "{color.teal.500}"
         }
       },
       "none": {
         "$type": "color",
-        "$value": "{color.alpha.blue.500.0-a}",
+        "$value": "{color.alpha.blue.500.0a}",
         "$modes": {
-          "blue-light": "{color.alpha.blue.500.0-a}",
-          "blue-dark": "{color.alpha.blue.500.0-a}"
+          "blue-light": "{color.alpha.blue.500.0a}",
+          "blue-dark": "{color.alpha.blue.500.0a}",
+          "teal-light": "{color.alpha.teal.500.0a}",
+          "teal-dark": "{color.alpha.teal.500.0a}"
         }
       },
       "disabled": {
         "$type": "color",
-        "$value": "{color.alpha.blue.500.40-a}",
+        "$value": "{color.alpha.blue.500.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.blue.500.40-a}",
-          "blue-dark": "{color.alpha.blue.500.40-a}"
+          "blue-light": "{color.alpha.blue.500.40a}",
+          "blue-dark": "{color.alpha.blue.500.40a}",
+          "teal-light": "{color.alpha.teal.500.40a}",
+          "teal-dark": "{color.alpha.teal.500.40a}"
         }
       },
       "weak": {
@@ -62,7 +76,9 @@
         "$value": "{color.blue.400}",
         "$modes": {
           "blue-light": "{color.blue.400}",
-          "blue-dark": "{color.blue.600}"
+          "blue-dark": "{color.blue.600}",
+          "teal-light": "{color.teal.400}",
+          "teal-dark": "{color.teal.600}"
         }
       },
       "weaker": {
@@ -70,15 +86,19 @@
         "$value": "{color.blue.200}",
         "$modes": {
           "blue-light": "{color.blue.200}",
-          "blue-dark": "{color.blue.800}"
+          "blue-dark": "{color.blue.800}",
+          "teal-light": "{color.teal.200}",
+          "teal-dark": "{color.teal.800}"
         }
       },
       "weaker-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.blue.200.40-a}",
+        "$value": "{color.alpha.blue.200.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.blue.200.40-a}",
-          "blue-dark": "{color.alpha.blue.800.40-a}"
+          "blue-light": "{color.alpha.blue.200.40a}",
+          "blue-dark": "{color.alpha.blue.800.40a}",
+          "teal-light": "{color.alpha.teal.200.40a}",
+          "teal-dark": "{color.alpha.teal.800.40a}"
         }
       },
       "weakest": {
@@ -86,7 +106,9 @@
         "$value": "{color.blue.100}",
         "$modes": {
           "blue-light": "{color.blue.100}",
-          "blue-dark": "{color.blue.900}"
+          "blue-dark": "{color.blue.900}",
+          "teal-light": "{color.teal.100}",
+          "teal-dark": "{color.teal.900}"
         }
       },
       "action-hover": {
@@ -94,7 +116,9 @@
         "$value": "{color.blue.600}",
         "$modes": {
           "blue-light": "{color.blue.600}",
-          "blue-dark": "{color.blue.600}"
+          "blue-dark": "{color.blue.600}",
+          "teal-light": "{color.teal.600}",
+          "teal-dark": "{color.teal.600}"
         }
       },
       "action-active": {
@@ -102,57 +126,71 @@
         "$value": "{color.blue.800}",
         "$modes": {
           "blue-light": "{color.blue.800}",
-          "blue-dark": "{color.blue.800}"
+          "blue-dark": "{color.blue.800}",
+          "teal-light": "{color.teal.800}",
+          "teal-dark": "{color.teal.800}"
         }
       }
     },
     "alpha": {
       "strong": {
         "$type": "color",
-        "$value": "{color.alpha.black.45-a}",
+        "$value": "{color.alpha.black.45a}",
         "$modes": {
-          "blue-light": "{color.alpha.black.45-a}",
-          "blue-dark": "{color.alpha.white.45-a}"
+          "blue-light": "{color.alpha.black.45a}",
+          "blue-dark": "{color.alpha.white.45a}",
+          "teal-light": "{color.alpha.black.45a}",
+          "teal-dark": "{color.alpha.white.45a}"
         }
       },
       "default": {
         "$type": "color",
-        "$value": "{color.alpha.black.30-a}",
+        "$value": "{color.alpha.black.30a}",
         "$modes": {
-          "blue-light": "{color.alpha.black.30-a}",
-          "blue-dark": "{color.alpha.white.30-a}"
+          "blue-light": "{color.alpha.black.30a}",
+          "blue-dark": "{color.alpha.white.30a}",
+          "teal-light": "{color.alpha.black.30a}",
+          "teal-dark": "{color.alpha.white.30a}"
         }
       },
       "weak": {
         "$type": "color",
-        "$value": "{color.alpha.black.15-a}",
+        "$value": "{color.alpha.black.15a}",
         "$modes": {
-          "blue-light": "{color.alpha.black.15-a}",
-          "blue-dark": "{color.alpha.white.15-a}"
+          "blue-light": "{color.alpha.black.15a}",
+          "blue-dark": "{color.alpha.white.15a}",
+          "teal-light": "{color.alpha.black.15a}",
+          "teal-dark": "{color.alpha.white.15a}"
         }
       },
       "weaker": {
         "$type": "color",
-        "$value": "{color.alpha.black.10-a}",
+        "$value": "{color.alpha.black.10a}",
         "$modes": {
-          "blue-light": "{color.alpha.black.10-a}",
-          "blue-dark": "{color.alpha.white.10-a}"
+          "blue-light": "{color.alpha.black.10a}",
+          "blue-dark": "{color.alpha.white.10a}",
+          "teal-light": "{color.alpha.black.10a}",
+          "teal-dark": "{color.alpha.white.10a}"
         }
       },
       "none": {
         "$type": "color",
-        "$value": "{color.alpha.black.0-a}",
+        "$value": "{color.alpha.black.0a}",
         "$modes": {
-          "blue-light": "{color.alpha.black.0-a}",
-          "blue-dark": "{color.alpha.white.0-a}"
+          "blue-light": "{color.alpha.black.0a}",
+          "blue-dark": "{color.alpha.white.0a}",
+          "teal-light": "{color.alpha.black.0a}",
+          "teal-dark": "{color.alpha.white.0a}"
         }
       },
       "backdrop": {
         "$type": "color",
-        "$value": "{color.alpha.white.70-a}",
+        "$value": "{color.alpha.white.70a}",
         "$modes": {
-          "blue-light": "{color.alpha.white.70-a}",
-          "blue-dark": "{color.alpha.black.70-a}"
+          "blue-light": "{color.alpha.white.70a}",
+          "blue-dark": "{color.alpha.black.70a}",
+          "teal-light": "{color.alpha.white.70a}",
+          "teal-dark": "{color.alpha.black.70a}"
         }
       }
     },
@@ -162,15 +200,19 @@
         "$value": "{color.snow}",
         "$modes": {
           "blue-light": "{color.snow}",
-          "blue-dark": "{color.jet}"
+          "blue-dark": "{color.jet}",
+          "teal-light": "{color.snow}",
+          "teal-dark": "{color.jet}"
         }
       },
       "primary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.snow.40-a}",
+        "$value": "{color.alpha.snow.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.snow.40-a}",
-          "blue-dark": "{color.alpha.jet.40-a}"
+          "blue-light": "{color.alpha.snow.40a}",
+          "blue-dark": "{color.alpha.jet.40a}",
+          "teal-light": "{color.alpha.snow.40a}",
+          "teal-dark": "{color.alpha.jet.40a}"
         }
       },
       "secondary": {
@@ -178,15 +220,19 @@
         "$value": "{color.marble}",
         "$modes": {
           "blue-light": "{color.marble}",
-          "blue-dark": "{color.granite}"
+          "blue-dark": "{color.granite}",
+          "teal-light": "{color.marble}",
+          "teal-dark": "{color.granite}"
         }
       },
       "secondary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.marble.40-a}",
+        "$value": "{color.alpha.marble.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.marble.40-a}",
-          "blue-dark": "{color.alpha.charcoal.40-a}"
+          "blue-light": "{color.alpha.marble.40a}",
+          "blue-dark": "{color.alpha.charcoal.40a}",
+          "teal-light": "{color.alpha.marble.40a}",
+          "teal-dark": "{color.alpha.charcoal.40a}"
         }
       },
       "tertiary": {
@@ -194,15 +240,19 @@
         "$value": "{color.limestone}",
         "$modes": {
           "blue-light": "{color.limestone}",
-          "blue-dark": "{color.leather}"
+          "blue-dark": "{color.leather}",
+          "teal-light": "{color.limestone}",
+          "teal-dark": "{color.leather}"
         }
       },
       "tertiary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.limestone.40-a}",
+        "$value": "{color.alpha.limestone.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.limestone.40-a}",
-          "blue-dark": "{color.alpha.leather.40-a}"
+          "blue-light": "{color.alpha.limestone.40a}",
+          "blue-dark": "{color.alpha.leather.40a}",
+          "teal-light": "{color.alpha.limestone.40a}",
+          "teal-dark": "{color.alpha.leather.40a}"
         }
       }
     },
@@ -213,7 +263,9 @@
           "$value": "{color.cobalt.600}",
           "$modes": {
             "blue-light": "{color.cobalt.600}",
-            "blue-dark": "{color.cobalt.400}"
+            "blue-dark": "{color.cobalt.400}",
+            "teal-light": "{color.cobalt.600}",
+            "teal-dark": "{color.cobalt.400}"
           }
         },
         "default": {
@@ -221,7 +273,9 @@
           "$value": "{color.cobalt.500}",
           "$modes": {
             "blue-light": "{color.cobalt.500}",
-            "blue-dark": "{color.cobalt.500}"
+            "blue-dark": "{color.cobalt.500}",
+            "teal-light": "{color.cobalt.500}",
+            "teal-dark": "{color.cobalt.500}"
           }
         },
         "weakest": {
@@ -229,7 +283,9 @@
           "$value": "{color.cobalt.100}",
           "$modes": {
             "blue-light": "{color.cobalt.100}",
-            "blue-dark": "{color.cobalt.900}"
+            "blue-dark": "{color.cobalt.900}",
+            "teal-light": "{color.cobalt.100}",
+            "teal-dark": "{color.cobalt.900}"
           }
         }
       },
@@ -239,7 +295,9 @@
           "$value": "{color.cider.600}",
           "$modes": {
             "blue-light": "{color.cider.600}",
-            "blue-dark": "{color.cider.400}"
+            "blue-dark": "{color.cider.400}",
+            "teal-light": "{color.cider.600}",
+            "teal-dark": "{color.cider.400}"
           }
         },
         "default": {
@@ -247,7 +305,9 @@
           "$value": "{color.cider.500}",
           "$modes": {
             "blue-light": "{color.cider.500}",
-            "blue-dark": "{color.cider.500}"
+            "blue-dark": "{color.cider.500}",
+            "teal-light": "{color.cider.500}",
+            "teal-dark": "{color.cider.500}"
           }
         },
         "weakest": {
@@ -255,7 +315,9 @@
           "$value": "{color.cider.100}",
           "$modes": {
             "blue-light": "{color.cider.100}",
-            "blue-dark": "{color.cider.900}"
+            "blue-dark": "{color.cider.900}",
+            "teal-light": "{color.cider.100}",
+            "teal-dark": "{color.cider.900}"
           }
         }
       },
@@ -265,7 +327,9 @@
           "$value": "{color.plum.600}",
           "$modes": {
             "blue-light": "{color.plum.600}",
-            "blue-dark": "{color.plum.400}"
+            "blue-dark": "{color.plum.400}",
+            "teal-light": "{color.plum.600}",
+            "teal-dark": "{color.plum.400}"
           }
         },
         "default": {
@@ -273,7 +337,9 @@
           "$value": "{color.plum.500}",
           "$modes": {
             "blue-light": "{color.plum.500}",
-            "blue-dark": "{color.plum.500}"
+            "blue-dark": "{color.plum.500}",
+            "teal-light": "{color.plum.500}",
+            "teal-dark": "{color.plum.500}"
           }
         },
         "weakest": {
@@ -281,7 +347,9 @@
           "$value": "{color.plum.100}",
           "$modes": {
             "blue-light": "{color.plum.100}",
-            "blue-dark": "{color.plum.900}"
+            "blue-dark": "{color.plum.900}",
+            "teal-light": "{color.plum.100}",
+            "teal-dark": "{color.plum.900}"
           }
         }
       },
@@ -291,7 +359,9 @@
           "$value": "{color.aqua.600}",
           "$modes": {
             "blue-light": "{color.aqua.600}",
-            "blue-dark": "{color.aqua.400}"
+            "blue-dark": "{color.aqua.400}",
+            "teal-light": "{color.aqua.600}",
+            "teal-dark": "{color.aqua.400}"
           }
         },
         "default": {
@@ -299,7 +369,9 @@
           "$value": "{color.aqua.500}",
           "$modes": {
             "blue-light": "{color.aqua.500}",
-            "blue-dark": "{color.aqua.500}"
+            "blue-dark": "{color.aqua.500}",
+            "teal-light": "{color.aqua.500}",
+            "teal-dark": "{color.aqua.500}"
           }
         },
         "weakest": {
@@ -307,7 +379,9 @@
           "$value": "{color.aqua.100}",
           "$modes": {
             "blue-light": "{color.aqua.100}",
-            "blue-dark": "{color.aqua.900}"
+            "blue-dark": "{color.aqua.900}",
+            "teal-light": "{color.aqua.100}",
+            "teal-dark": "{color.aqua.900}"
           }
         }
       },
@@ -317,7 +391,9 @@
           "$value": "{color.slate.600}",
           "$modes": {
             "blue-light": "{color.slate.600}",
-            "blue-dark": "{color.slate.400}"
+            "blue-dark": "{color.slate.400}",
+            "teal-light": "{color.slate.600}",
+            "teal-dark": "{color.slate.400}"
           }
         },
         "default": {
@@ -325,7 +401,9 @@
           "$value": "{color.slate.500}",
           "$modes": {
             "blue-light": "{color.slate.500}",
-            "blue-dark": "{color.slate.500}"
+            "blue-dark": "{color.slate.500}",
+            "teal-light": "{color.slate.500}",
+            "teal-dark": "{color.slate.500}"
           }
         },
         "weakest": {
@@ -333,7 +411,9 @@
           "$value": "{color.slate.100}",
           "$modes": {
             "blue-light": "{color.slate.100}",
-            "blue-dark": "{color.slate.900}"
+            "blue-dark": "{color.slate.900}",
+            "teal-light": "{color.slate.100}",
+            "teal-dark": "{color.slate.900}"
           }
         }
       },
@@ -343,7 +423,9 @@
           "$value": "{color.rose.600}",
           "$modes": {
             "blue-light": "{color.rose.600}",
-            "blue-dark": "{color.rose.400}"
+            "blue-dark": "{color.rose.400}",
+            "teal-light": "{color.rose.600}",
+            "teal-dark": "{color.rose.400}"
           }
         },
         "default": {
@@ -351,7 +433,9 @@
           "$value": "{color.rose.500}",
           "$modes": {
             "blue-light": "{color.rose.500}",
-            "blue-dark": "{color.rose.500}"
+            "blue-dark": "{color.rose.500}",
+            "teal-light": "{color.rose.500}",
+            "teal-dark": "{color.rose.500}"
           }
         },
         "weakest": {
@@ -359,7 +443,9 @@
           "$value": "{color.rose.100}",
           "$modes": {
             "blue-light": "{color.rose.100}",
-            "blue-dark": "{color.rose.900}"
+            "blue-dark": "{color.rose.900}",
+            "teal-light": "{color.rose.100}",
+            "teal-dark": "{color.rose.900}"
           }
         }
       },
@@ -369,7 +455,9 @@
           "$value": "{color.olive.600}",
           "$modes": {
             "blue-light": "{color.olive.600}",
-            "blue-dark": "{color.olive.400}"
+            "blue-dark": "{color.olive.400}",
+            "teal-light": "{color.olive.600}",
+            "teal-dark": "{color.olive.400}"
           }
         },
         "default": {
@@ -377,7 +465,9 @@
           "$value": "{color.olive.500}",
           "$modes": {
             "blue-light": "{color.olive.500}",
-            "blue-dark": "{color.olive.500}"
+            "blue-dark": "{color.olive.500}",
+            "teal-light": "{color.olive.500}",
+            "teal-dark": "{color.olive.500}"
           }
         },
         "weakest": {
@@ -385,7 +475,9 @@
           "$value": "{color.olive.100}",
           "$modes": {
             "blue-light": "{color.olive.100}",
-            "blue-dark": "{color.olive.900}"
+            "blue-dark": "{color.olive.900}",
+            "teal-light": "{color.olive.100}",
+            "teal-dark": "{color.olive.900}"
           }
         }
       },
@@ -395,7 +487,9 @@
           "$value": "{color.salmon.600}",
           "$modes": {
             "blue-light": "{color.salmon.600}",
-            "blue-dark": "{color.salmon.400}"
+            "blue-dark": "{color.salmon.400}",
+            "teal-light": "{color.salmon.600}",
+            "teal-dark": "{color.salmon.400}"
           }
         },
         "default": {
@@ -403,7 +497,9 @@
           "$value": "{color.salmon.500}",
           "$modes": {
             "blue-light": "{color.salmon.500}",
-            "blue-dark": "{color.salmon.500}"
+            "blue-dark": "{color.salmon.500}",
+            "teal-light": "{color.salmon.500}",
+            "teal-dark": "{color.salmon.500}"
           }
         },
         "weakest": {
@@ -411,7 +507,9 @@
           "$value": "{color.salmon.100}",
           "$modes": {
             "blue-light": "{color.salmon.100}",
-            "blue-dark": "{color.salmon.900}"
+            "blue-dark": "{color.salmon.900}",
+            "teal-light": "{color.salmon.100}",
+            "teal-dark": "{color.salmon.900}"
           }
         }
       },
@@ -421,7 +519,9 @@
           "$value": "{color.indigo.600}",
           "$modes": {
             "blue-light": "{color.indigo.600}",
-            "blue-dark": "{color.indigo.400}"
+            "blue-dark": "{color.indigo.400}",
+            "teal-light": "{color.indigo.600}",
+            "teal-dark": "{color.indigo.400}"
           }
         },
         "default": {
@@ -429,7 +529,9 @@
           "$value": "{color.indigo.500}",
           "$modes": {
             "blue-light": "{color.indigo.500}",
-            "blue-dark": "{color.indigo.500}"
+            "blue-dark": "{color.indigo.500}",
+            "teal-light": "{color.indigo.500}",
+            "teal-dark": "{color.indigo.500}"
           }
         },
         "weakest": {
@@ -437,7 +539,9 @@
           "$value": "{color.indigo.100}",
           "$modes": {
             "blue-light": "{color.indigo.100}",
-            "blue-dark": "{color.indigo.900}"
+            "blue-dark": "{color.indigo.900}",
+            "teal-light": "{color.indigo.100}",
+            "teal-dark": "{color.indigo.900}"
           }
         }
       },
@@ -447,7 +551,9 @@
           "$value": "{color.jade.600}",
           "$modes": {
             "blue-light": "{color.jade.600}",
-            "blue-dark": "{color.jade.400}"
+            "blue-dark": "{color.jade.400}",
+            "teal-light": "{color.jade.600}",
+            "teal-dark": "{color.jade.400}"
           }
         },
         "default": {
@@ -455,7 +561,9 @@
           "$value": "{color.jade.500}",
           "$modes": {
             "blue-light": "{color.jade.500}",
-            "blue-dark": "{color.jade.500}"
+            "blue-dark": "{color.jade.500}",
+            "teal-light": "{color.jade.500}",
+            "teal-dark": "{color.jade.500}"
           }
         },
         "weakest": {
@@ -463,7 +571,9 @@
           "$value": "{color.jade.100}",
           "$modes": {
             "blue-light": "{color.jade.100}",
-            "blue-dark": "{color.jade.900}"
+            "blue-dark": "{color.jade.900}",
+            "teal-light": "{color.jade.100}",
+            "teal-dark": "{color.jade.900}"
           }
         }
       },
@@ -473,7 +583,9 @@
           "$value": "{color.citrine.600}",
           "$modes": {
             "blue-light": "{color.citrine.600}",
-            "blue-dark": "{color.citrine.400}"
+            "blue-dark": "{color.citrine.400}",
+            "teal-light": "{color.citrine.600}",
+            "teal-dark": "{color.citrine.400}"
           }
         },
         "default": {
@@ -481,7 +593,9 @@
           "$value": "{color.citrine.500}",
           "$modes": {
             "blue-light": "{color.citrine.500}",
-            "blue-dark": "{color.citrine.500}"
+            "blue-dark": "{color.citrine.500}",
+            "teal-light": "{color.citrine.500}",
+            "teal-dark": "{color.citrine.500}"
           }
         },
         "weakest": {
@@ -489,7 +603,9 @@
           "$value": "{color.citrine.100}",
           "$modes": {
             "blue-light": "{color.citrine.100}",
-            "blue-dark": "{color.citrine.900}"
+            "blue-dark": "{color.citrine.900}",
+            "teal-light": "{color.citrine.100}",
+            "teal-dark": "{color.citrine.900}"
           }
         }
       },
@@ -499,7 +615,9 @@
           "$value": "{color.autumn.600}",
           "$modes": {
             "blue-light": "{color.autumn.600}",
-            "blue-dark": "{color.autumn.400}"
+            "blue-dark": "{color.autumn.400}",
+            "teal-light": "{color.autumn.600}",
+            "teal-dark": "{color.autumn.400}"
           }
         },
         "default": {
@@ -507,7 +625,9 @@
           "$value": "{color.autumn.500}",
           "$modes": {
             "blue-light": "{color.autumn.500}",
-            "blue-dark": "{color.autumn.500}"
+            "blue-dark": "{color.autumn.500}",
+            "teal-light": "{color.autumn.500}",
+            "teal-dark": "{color.autumn.500}"
           }
         },
         "weakest": {
@@ -515,7 +635,9 @@
           "$value": "{color.autumn.100}",
           "$modes": {
             "blue-light": "{color.autumn.100}",
-            "blue-dark": "{color.autumn.900}"
+            "blue-dark": "{color.autumn.900}",
+            "teal-light": "{color.autumn.100}",
+            "teal-dark": "{color.autumn.900}"
           }
         }
       },
@@ -525,7 +647,9 @@
           "$value": "{color.lavender.600}",
           "$modes": {
             "blue-light": "{color.lavender.600}",
-            "blue-dark": "{color.lavender.400}"
+            "blue-dark": "{color.lavender.400}",
+            "teal-light": "{color.lavender.600}",
+            "teal-dark": "{color.lavender.400}"
           }
         },
         "default": {
@@ -533,7 +657,9 @@
           "$value": "{color.lavender.500}",
           "$modes": {
             "blue-light": "{color.lavender.500}",
-            "blue-dark": "{color.lavender.500}"
+            "blue-dark": "{color.lavender.500}",
+            "teal-light": "{color.lavender.500}",
+            "teal-dark": "{color.lavender.500}"
           }
         },
         "weakest": {
@@ -541,7 +667,9 @@
           "$value": "{color.lavender.100}",
           "$modes": {
             "blue-light": "{color.lavender.100}",
-            "blue-dark": "{color.lavender.900}"
+            "blue-dark": "{color.lavender.900}",
+            "teal-light": "{color.lavender.100}",
+            "teal-dark": "{color.lavender.900}"
           }
         }
       },
@@ -551,7 +679,9 @@
           "$value": "{color.ocean.600}",
           "$modes": {
             "blue-light": "{color.ocean.600}",
-            "blue-dark": "{color.ocean.400}"
+            "blue-dark": "{color.ocean.400}",
+            "teal-light": "{color.ocean.600}",
+            "teal-dark": "{color.ocean.400}"
           }
         },
         "default": {
@@ -559,7 +689,9 @@
           "$value": "{color.ocean.500}",
           "$modes": {
             "blue-light": "{color.ocean.500}",
-            "blue-dark": "{color.ocean.500}"
+            "blue-dark": "{color.ocean.500}",
+            "teal-light": "{color.ocean.500}",
+            "teal-dark": "{color.ocean.500}"
           }
         },
         "weakest": {
@@ -567,7 +699,9 @@
           "$value": "{color.ocean.100}",
           "$modes": {
             "blue-light": "{color.ocean.100}",
-            "blue-dark": "{color.ocean.900}"
+            "blue-dark": "{color.ocean.900}",
+            "teal-light": "{color.ocean.100}",
+            "teal-dark": "{color.ocean.900}"
           }
         }
       },
@@ -577,7 +711,9 @@
           "$value": "{color.smoke.600}",
           "$modes": {
             "blue-light": "{color.smoke.600}",
-            "blue-dark": "{color.smoke.400}"
+            "blue-dark": "{color.smoke.400}",
+            "teal-light": "{color.smoke.600}",
+            "teal-dark": "{color.smoke.400}"
           }
         },
         "default": {
@@ -585,7 +721,9 @@
           "$value": "{color.smoke.500}",
           "$modes": {
             "blue-light": "{color.smoke.500}",
-            "blue-dark": "{color.smoke.500}"
+            "blue-dark": "{color.smoke.500}",
+            "teal-light": "{color.smoke.500}",
+            "teal-dark": "{color.smoke.500}"
           }
         },
         "weakest": {
@@ -593,7 +731,9 @@
           "$value": "{color.smoke.100}",
           "$modes": {
             "blue-light": "{color.smoke.100}",
-            "blue-dark": "{color.smoke.900}"
+            "blue-dark": "{color.smoke.900}",
+            "teal-light": "{color.smoke.100}",
+            "teal-dark": "{color.smoke.900}"
           }
         }
       },
@@ -603,7 +743,9 @@
           "$value": "{color.fuchsia.600}",
           "$modes": {
             "blue-light": "{color.fuchsia.600}",
-            "blue-dark": "{color.fuchsia.400}"
+            "blue-dark": "{color.fuchsia.400}",
+            "teal-light": "{color.fuchsia.600}",
+            "teal-dark": "{color.fuchsia.400}"
           }
         },
         "default": {
@@ -611,7 +753,9 @@
           "$value": "{color.fuchsia.500}",
           "$modes": {
             "blue-light": "{color.fuchsia.500}",
-            "blue-dark": "{color.fuchsia.500}"
+            "blue-dark": "{color.fuchsia.500}",
+            "teal-light": "{color.fuchsia.500}",
+            "teal-dark": "{color.fuchsia.500}"
           }
         },
         "weakest": {
@@ -619,7 +763,9 @@
           "$value": "{color.fuchsia.100}",
           "$modes": {
             "blue-light": "{color.fuchsia.100}",
-            "blue-dark": "{color.fuchsia.900}"
+            "blue-dark": "{color.fuchsia.900}",
+            "teal-light": "{color.fuchsia.100}",
+            "teal-dark": "{color.fuchsia.900}"
           }
         }
       },
@@ -629,7 +775,9 @@
           "$value": "{color.lime.600}",
           "$modes": {
             "blue-light": "{color.lime.600}",
-            "blue-dark": "{color.lime.400}"
+            "blue-dark": "{color.lime.400}",
+            "teal-light": "{color.lime.600}",
+            "teal-dark": "{color.lime.400}"
           }
         },
         "default": {
@@ -637,7 +785,9 @@
           "$value": "{color.lime.500}",
           "$modes": {
             "blue-light": "{color.lime.500}",
-            "blue-dark": "{color.lime.500}"
+            "blue-dark": "{color.lime.500}",
+            "teal-light": "{color.lime.500}",
+            "teal-dark": "{color.lime.500}"
           }
         },
         "weakest": {
@@ -645,7 +795,9 @@
           "$value": "{color.lime.100}",
           "$modes": {
             "blue-light": "{color.lime.100}",
-            "blue-dark": "{color.lime.900}"
+            "blue-dark": "{color.lime.900}",
+            "teal-light": "{color.lime.100}",
+            "teal-dark": "{color.lime.900}"
           }
         }
       },
@@ -655,7 +807,9 @@
           "$value": "{color.fur.600}",
           "$modes": {
             "blue-light": "{color.fur.600}",
-            "blue-dark": "{color.fur.400}"
+            "blue-dark": "{color.fur.400}",
+            "teal-light": "{color.fur.600}",
+            "teal-dark": "{color.fur.400}"
           }
         },
         "default": {
@@ -663,7 +817,9 @@
           "$value": "{color.fur.500}",
           "$modes": {
             "blue-light": "{color.fur.500}",
-            "blue-dark": "{color.fur.500}"
+            "blue-dark": "{color.fur.500}",
+            "teal-light": "{color.fur.500}",
+            "teal-dark": "{color.fur.500}"
           }
         },
         "weakest": {
@@ -671,7 +827,9 @@
           "$value": "{color.fur.100}",
           "$modes": {
             "blue-light": "{color.fur.100}",
-            "blue-dark": "{color.fur.900}"
+            "blue-dark": "{color.fur.900}",
+            "teal-light": "{color.fur.100}",
+            "teal-dark": "{color.fur.900}"
           }
         }
       },
@@ -681,7 +839,9 @@
           "$value": "{color.violet.600}",
           "$modes": {
             "blue-light": "{color.violet.600}",
-            "blue-dark": "{color.violet.400}"
+            "blue-dark": "{color.violet.400}",
+            "teal-light": "{color.violet.600}",
+            "teal-dark": "{color.violet.400}"
           }
         },
         "default": {
@@ -689,7 +849,9 @@
           "$value": "{color.violet.500}",
           "$modes": {
             "blue-light": "{color.violet.500}",
-            "blue-dark": "{color.violet.500}"
+            "blue-dark": "{color.violet.500}",
+            "teal-light": "{color.violet.500}",
+            "teal-dark": "{color.violet.500}"
           }
         },
         "weakest": {
@@ -697,7 +859,9 @@
           "$value": "{color.violet.100}",
           "$modes": {
             "blue-light": "{color.violet.100}",
-            "blue-dark": "{color.violet.900}"
+            "blue-dark": "{color.violet.900}",
+            "teal-light": "{color.violet.100}",
+            "teal-dark": "{color.violet.900}"
           }
         }
       },
@@ -707,7 +871,9 @@
           "$value": "{color.forest.600}",
           "$modes": {
             "blue-light": "{color.forest.600}",
-            "blue-dark": "{color.forest.400}"
+            "blue-dark": "{color.forest.400}",
+            "teal-light": "{color.forest.600}",
+            "teal-dark": "{color.forest.400}"
           }
         },
         "default": {
@@ -715,7 +881,9 @@
           "$value": "{color.forest.500}",
           "$modes": {
             "blue-light": "{color.forest.500}",
-            "blue-dark": "{color.forest.500}"
+            "blue-dark": "{color.forest.500}",
+            "teal-light": "{color.forest.500}",
+            "teal-dark": "{color.forest.500}"
           }
         },
         "weakest": {
@@ -723,7 +891,9 @@
           "$value": "{color.forest.100}",
           "$modes": {
             "blue-light": "{color.forest.100}",
-            "blue-dark": "{color.forest.900}"
+            "blue-dark": "{color.forest.900}",
+            "teal-light": "{color.forest.100}",
+            "teal-dark": "{color.forest.900}"
           }
         }
       }
@@ -734,15 +904,19 @@
         "$value": "{color.black}",
         "$modes": {
           "blue-light": "{color.black}",
-          "blue-dark": "{color.white}"
+          "blue-dark": "{color.white}",
+          "teal-light": "{color.black}",
+          "teal-dark": "{color.white}"
         }
       },
       "primary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.black.40-a}",
+        "$value": "{color.alpha.black.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.black.40-a}",
-          "blue-dark": "{color.alpha.white.40-a}"
+          "blue-light": "{color.alpha.black.40a}",
+          "blue-dark": "{color.alpha.white.40a}",
+          "teal-light": "{color.alpha.black.40a}",
+          "teal-dark": "{color.alpha.white.40a}"
         }
       },
       "secondary": {
@@ -750,15 +924,19 @@
         "$value": "{color.gray.700}",
         "$modes": {
           "blue-light": "{color.gray.700}",
-          "blue-dark": "{color.gray.300}"
+          "blue-dark": "{color.gray.300}",
+          "teal-light": "{color.gray.700}",
+          "teal-dark": "{color.gray.300}"
         }
       },
       "secondary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.gray.700.40-a}",
+        "$value": "{color.alpha.gray.700.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.gray.700.40-a}",
-          "blue-dark": "{color.alpha.gray.300.40-a}"
+          "blue-light": "{color.alpha.gray.700.40a}",
+          "blue-dark": "{color.alpha.gray.300.40a}",
+          "teal-light": "{color.alpha.gray.700.40a}",
+          "teal-dark": "{color.alpha.gray.300.40a}"
         }
       },
       "primary-alt": {
@@ -766,15 +944,19 @@
         "$value": "{color.white}",
         "$modes": {
           "blue-light": "{color.white}",
-          "blue-dark": "{color.white}"
+          "blue-dark": "{color.white}",
+          "teal-light": "{color.white}",
+          "teal-dark": "{color.white}"
         }
       },
       "primary-alt-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.white.40-a}",
+        "$value": "{color.alpha.white.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.white.40-a}",
-          "blue-dark": "{color.alpha.white.40-a}"
+          "blue-light": "{color.alpha.white.40a}",
+          "blue-dark": "{color.alpha.white.40a}",
+          "teal-light": "{color.alpha.white.40a}",
+          "teal-dark": "{color.alpha.white.40a}"
         }
       },
       "hover": {
@@ -782,7 +964,9 @@
         "$value": "{color.blue.600}",
         "$modes": {
           "blue-light": "{color.blue.600}",
-          "blue-dark": "{color.blue.400}"
+          "blue-dark": "{color.blue.400}",
+          "teal-light": "{color.blue.600}",
+          "teal-dark": "{color.blue.400}"
         }
       },
       "active": {
@@ -790,7 +974,9 @@
         "$value": "{color.blue.700}",
         "$modes": {
           "blue-light": "{color.blue.700}",
-          "blue-dark": "{color.blue.300}"
+          "blue-dark": "{color.blue.300}",
+          "teal-light": "{color.blue.700}",
+          "teal-dark": "{color.blue.300}"
         }
       },
       "visited": {
@@ -798,7 +984,9 @@
         "$value": "{color.purple.800}",
         "$modes": {
           "blue-light": "{color.purple.800}",
-          "blue-dark": "{color.purple.200}"
+          "blue-dark": "{color.purple.200}",
+          "teal-light": "{color.purple.800}",
+          "teal-dark": "{color.purple.200}"
         }
       }
     },
@@ -808,7 +996,9 @@
         "$value": "{color.blue.500}",
         "$modes": {
           "blue-light": "{color.blue.500}",
-          "blue-dark": "{color.blue.500}"
+          "blue-dark": "{color.blue.500}",
+          "teal-light": "{color.blue.500}",
+          "teal-dark": "{color.blue.500}"
         }
       },
       "strong": {
@@ -816,7 +1006,9 @@
         "$value": "{color.blue.600}",
         "$modes": {
           "blue-light": "{color.blue.600}",
-          "blue-dark": "{color.blue.400}"
+          "blue-dark": "{color.blue.400}",
+          "teal-light": "{color.blue.600}",
+          "teal-dark": "{color.blue.400}"
         }
       },
       "weakest": {
@@ -824,7 +1016,9 @@
         "$value": "{color.blue.100}",
         "$modes": {
           "blue-light": "{color.blue.100}",
-          "blue-dark": "{color.blue.900}"
+          "blue-dark": "{color.blue.900}",
+          "teal-light": "{color.blue.100}",
+          "teal-dark": "{color.blue.900}"
         }
       }
     },
@@ -834,15 +1028,19 @@
         "$value": "{color.red.600}",
         "$modes": {
           "blue-light": "{color.red.600}",
-          "blue-dark": "{color.red.400}"
+          "blue-dark": "{color.red.400}",
+          "teal-light": "{color.red.600}",
+          "teal-dark": "{color.red.400}"
         }
       },
       "strong-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.red.600.40-a}",
+        "$value": "{color.alpha.red.600.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.red.600.40-a}",
-          "blue-dark": "{color.alpha.red.400.40-a}"
+          "blue-light": "{color.alpha.red.600.40a}",
+          "blue-dark": "{color.alpha.red.400.40a}",
+          "teal-light": "{color.alpha.red.600.40a}",
+          "teal-dark": "{color.alpha.red.400.40a}"
         }
       },
       "default": {
@@ -850,15 +1048,19 @@
         "$value": "{color.red.500}",
         "$modes": {
           "blue-light": "{color.red.500}",
-          "blue-dark": "{color.red.500}"
+          "blue-dark": "{color.red.500}",
+          "teal-light": "{color.red.500}",
+          "teal-dark": "{color.red.500}"
         }
       },
       "disabled": {
         "$type": "color",
-        "$value": "{color.alpha.red.500.40-a}",
+        "$value": "{color.alpha.red.500.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.red.500.40-a}",
-          "blue-dark": "{color.alpha.red.500.40-a}"
+          "blue-light": "{color.alpha.red.500.40a}",
+          "blue-dark": "{color.alpha.red.500.40a}",
+          "teal-light": "{color.alpha.red.500.40a}",
+          "teal-dark": "{color.alpha.red.500.40a}"
         }
       },
       "weakest": {
@@ -866,7 +1068,9 @@
         "$value": "{color.red.100}",
         "$modes": {
           "blue-light": "{color.red.100}",
-          "blue-dark": "{color.red.900}"
+          "blue-dark": "{color.red.900}",
+          "teal-light": "{color.red.100}",
+          "teal-dark": "{color.red.900}"
         }
       },
       "action-hover": {
@@ -874,7 +1078,9 @@
         "$value": "{color.red.600}",
         "$modes": {
           "blue-light": "{color.red.600}",
-          "blue-dark": "{color.red.600}"
+          "blue-dark": "{color.red.600}",
+          "teal-light": "{color.red.600}",
+          "teal-dark": "{color.red.600}"
         }
       },
       "action-active": {
@@ -882,7 +1088,9 @@
         "$value": "{color.red.800}",
         "$modes": {
           "blue-light": "{color.red.800}",
-          "blue-dark": "{color.red.800}"
+          "blue-dark": "{color.red.800}",
+          "teal-light": "{color.red.800}",
+          "teal-dark": "{color.red.800}"
         }
       }
     },
@@ -892,15 +1100,19 @@
         "$value": "{color.gray.600}",
         "$modes": {
           "blue-light": "{color.gray.600}",
-          "blue-dark": "{color.gray.400}"
+          "blue-dark": "{color.gray.400}",
+          "teal-light": "{color.gray.600}",
+          "teal-dark": "{color.gray.400}"
         }
       },
       "strong-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.gray.600.40-a}",
+        "$value": "{color.alpha.gray.600.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.gray.600.40-a}",
-          "blue-dark": "{color.alpha.gray.400.40-a}"
+          "blue-light": "{color.alpha.gray.600.40a}",
+          "blue-dark": "{color.alpha.gray.400.40a}",
+          "teal-light": "{color.alpha.gray.600.40a}",
+          "teal-dark": "{color.alpha.gray.400.40a}"
         }
       },
       "default": {
@@ -908,23 +1120,29 @@
         "$value": "{color.gray.500}",
         "$modes": {
           "blue-light": "{color.gray.500}",
-          "blue-dark": "{color.gray.500}"
+          "blue-dark": "{color.gray.500}",
+          "teal-light": "{color.gray.500}",
+          "teal-dark": "{color.gray.500}"
         }
       },
       "disabled": {
         "$type": "color",
-        "$value": "{color.alpha.gray.500.40-a}",
+        "$value": "{color.alpha.gray.500.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.gray.500.40-a}",
-          "blue-dark": "{color.alpha.gray.500.40-a}"
+          "blue-light": "{color.alpha.gray.500.40a}",
+          "blue-dark": "{color.alpha.gray.500.40a}",
+          "teal-light": "{color.alpha.gray.500.40a}",
+          "teal-dark": "{color.alpha.gray.500.40a}"
         }
       },
       "readonly": {
         "$type": "color",
-        "$value": "{color.alpha.gray.500.10-a}",
+        "$value": "{color.alpha.gray.500.10a}",
         "$modes": {
-          "blue-light": "{color.alpha.gray.500.10-a}",
-          "blue-dark": "{color.alpha.gray.500.10-a}"
+          "blue-light": "{color.alpha.gray.500.10a}",
+          "blue-dark": "{color.alpha.gray.500.10a}",
+          "teal-light": "{color.alpha.gray.500.10a}",
+          "teal-dark": "{color.alpha.gray.500.10a}"
         }
       },
       "weak": {
@@ -932,23 +1150,29 @@
         "$value": "{color.gray.400}",
         "$modes": {
           "blue-light": "{color.gray.400}",
-          "blue-dark": "{color.gray.600}"
+          "blue-dark": "{color.gray.600}",
+          "teal-light": "{color.gray.400}",
+          "teal-dark": "{color.gray.600}"
         }
       },
       "weak-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.gray.400.40-a}",
+        "$value": "{color.alpha.gray.400.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.gray.400.40-a}",
-          "blue-dark": "{color.alpha.gray.600.40-a}"
+          "blue-light": "{color.alpha.gray.400.40a}",
+          "blue-dark": "{color.alpha.gray.600.40a}",
+          "teal-light": "{color.alpha.gray.400.40a}",
+          "teal-dark": "{color.alpha.gray.600.40a}"
         }
       },
       "weak-readonly": {
         "$type": "color",
-        "$value": "{color.alpha.gray.400.10-a}",
+        "$value": "{color.alpha.gray.400.10a}",
         "$modes": {
-          "blue-light": "{color.alpha.gray.400.10-a}",
-          "blue-dark": "{color.alpha.gray.600.10-a}"
+          "blue-light": "{color.alpha.gray.400.10a}",
+          "blue-dark": "{color.alpha.gray.600.10a}",
+          "teal-light": "{color.alpha.gray.400.10a}",
+          "teal-dark": "{color.alpha.gray.600.10a}"
         }
       },
       "weaker": {
@@ -956,15 +1180,19 @@
         "$value": "{color.gray.300}",
         "$modes": {
           "blue-light": "{color.gray.300}",
-          "blue-dark": "{color.gray.700}"
+          "blue-dark": "{color.gray.700}",
+          "teal-light": "{color.gray.300}",
+          "teal-dark": "{color.gray.700}"
         }
       },
       "weaker-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.gray.300.40-a}",
+        "$value": "{color.alpha.gray.300.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.gray.300.40-a}",
-          "blue-dark": "{color.alpha.gray.700.40-a}"
+          "blue-light": "{color.alpha.gray.300.40a}",
+          "blue-dark": "{color.alpha.gray.700.40a}",
+          "teal-light": "{color.alpha.gray.300.40a}",
+          "teal-dark": "{color.alpha.gray.700.40a}"
         }
       },
       "weakest": {
@@ -972,7 +1200,9 @@
         "$value": "{color.gray.200}",
         "$modes": {
           "blue-light": "{color.gray.200}",
-          "blue-dark": "{color.gray.800}"
+          "blue-dark": "{color.gray.800}",
+          "teal-light": "{color.gray.200}",
+          "teal-dark": "{color.gray.800}"
         }
       },
       "action-hover": {
@@ -980,7 +1210,9 @@
         "$value": "{color.gray.600}",
         "$modes": {
           "blue-light": "{color.gray.600}",
-          "blue-dark": "{color.gray.600}"
+          "blue-dark": "{color.gray.600}",
+          "teal-light": "{color.gray.600}",
+          "teal-dark": "{color.gray.600}"
         }
       },
       "action-active": {
@@ -988,7 +1220,9 @@
         "$value": "{color.gray.800}",
         "$modes": {
           "blue-light": "{color.gray.800}",
-          "blue-dark": "{color.gray.800}"
+          "blue-dark": "{color.gray.800}",
+          "teal-light": "{color.gray.800}",
+          "teal-dark": "{color.gray.800}"
         }
       }
     },
@@ -998,15 +1232,19 @@
         "$value": "{color.green.600}",
         "$modes": {
           "blue-light": "{color.green.600}",
-          "blue-dark": "{color.green.400}"
+          "blue-dark": "{color.green.400}",
+          "teal-light": "{color.green.600}",
+          "teal-dark": "{color.green.400}"
         }
       },
       "strong-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.green.600.40-a}",
+        "$value": "{color.alpha.green.600.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.green.600.40-a}",
-          "blue-dark": "{color.alpha.green.400.40-a}"
+          "blue-light": "{color.alpha.green.600.40a}",
+          "blue-dark": "{color.alpha.green.400.40a}",
+          "teal-light": "{color.alpha.green.600.40a}",
+          "teal-dark": "{color.alpha.green.400.40a}"
         }
       },
       "default": {
@@ -1014,15 +1252,19 @@
         "$value": "{color.green.500}",
         "$modes": {
           "blue-light": "{color.green.500}",
-          "blue-dark": "{color.green.500}"
+          "blue-dark": "{color.green.500}",
+          "teal-light": "{color.green.500}",
+          "teal-dark": "{color.green.500}"
         }
       },
       "disabled": {
         "$type": "color",
-        "$value": "{color.alpha.green.500.40-a}",
+        "$value": "{color.alpha.green.500.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.green.500.40-a}",
-          "blue-dark": "{color.alpha.green.500.40-a}"
+          "blue-light": "{color.alpha.green.500.40a}",
+          "blue-dark": "{color.alpha.green.500.40a}",
+          "teal-light": "{color.alpha.green.500.40a}",
+          "teal-dark": "{color.alpha.green.500.40a}"
         }
       },
       "weakest": {
@@ -1030,7 +1272,9 @@
         "$value": "{color.green.100}",
         "$modes": {
           "blue-light": "{color.green.100}",
-          "blue-dark": "{color.green.900}"
+          "blue-dark": "{color.green.900}",
+          "teal-light": "{color.green.100}",
+          "teal-dark": "{color.green.900}"
         }
       },
       "action-hover": {
@@ -1038,7 +1282,9 @@
         "$value": "{color.green.600}",
         "$modes": {
           "blue-light": "{color.green.600}",
-          "blue-dark": "{color.green.600}"
+          "blue-dark": "{color.green.600}",
+          "teal-light": "{color.green.600}",
+          "teal-dark": "{color.green.600}"
         }
       },
       "action-active": {
@@ -1046,49 +1292,61 @@
         "$value": "{color.green.800}",
         "$modes": {
           "blue-light": "{color.green.800}",
-          "blue-dark": "{color.green.800}"
+          "blue-dark": "{color.green.800}",
+          "teal-light": "{color.green.800}",
+          "teal-dark": "{color.green.800}"
         }
       }
     },
     "shadow": {
       "100": {
         "$type": "color",
-        "$value": "{color.alpha.black.10-a}",
+        "$value": "{color.alpha.black.10a}",
         "$modes": {
-          "blue-light": "{color.alpha.black.10-a}",
-          "blue-dark": "{color.alpha.black.50-a}"
+          "blue-light": "{color.alpha.black.10a}",
+          "blue-dark": "{color.alpha.black.50a}",
+          "teal-light": "{color.alpha.black.10a}",
+          "teal-dark": "{color.alpha.black.50a}"
         }
       },
       "200": {
         "$type": "color",
-        "$value": "{color.alpha.black.10-a}",
+        "$value": "{color.alpha.black.10a}",
         "$modes": {
-          "blue-light": "{color.alpha.black.10-a}",
-          "blue-dark": "{color.alpha.black.50-a}"
+          "blue-light": "{color.alpha.black.10a}",
+          "blue-dark": "{color.alpha.black.50a}",
+          "teal-light": "{color.alpha.black.10a}",
+          "teal-dark": "{color.alpha.black.50a}"
         }
       },
       "300": {
         "$type": "color",
-        "$value": "{color.alpha.black.20-a}",
+        "$value": "{color.alpha.black.20a}",
         "$modes": {
-          "blue-light": "{color.alpha.black.20-a}",
-          "blue-dark": "{color.alpha.black.60-a}"
+          "blue-light": "{color.alpha.black.20a}",
+          "blue-dark": "{color.alpha.black.60a}",
+          "teal-light": "{color.alpha.black.20a}",
+          "teal-dark": "{color.alpha.black.60a}"
         }
       },
       "400": {
         "$type": "color",
-        "$value": "{color.alpha.black.20-a}",
+        "$value": "{color.alpha.black.20a}",
         "$modes": {
-          "blue-light": "{color.alpha.black.20-a}",
-          "blue-dark": "{color.alpha.black.60-a}"
+          "blue-light": "{color.alpha.black.20a}",
+          "blue-dark": "{color.alpha.black.60a}",
+          "teal-light": "{color.alpha.black.20a}",
+          "teal-dark": "{color.alpha.black.60a}"
         }
       },
       "500": {
         "$type": "color",
-        "$value": "{color.alpha.black.30-a}",
+        "$value": "{color.alpha.black.30a}",
         "$modes": {
-          "blue-light": "{color.alpha.black.30-a}",
-          "blue-dark": "{color.alpha.black.70-a}"
+          "blue-light": "{color.alpha.black.30a}",
+          "blue-dark": "{color.alpha.black.70a}",
+          "teal-light": "{color.alpha.black.30a}",
+          "teal-dark": "{color.alpha.black.70a}"
         }
       }
     },
@@ -1098,15 +1356,19 @@
         "$value": "{color.orange.600}",
         "$modes": {
           "blue-light": "{color.orange.600}",
-          "blue-dark": "{color.orange.400}"
+          "blue-dark": "{color.orange.400}",
+          "teal-light": "{color.orange.600}",
+          "teal-dark": "{color.orange.400}"
         }
       },
       "strong-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.orange.600.40-a}",
+        "$value": "{color.alpha.orange.600.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.orange.600.40-a}",
-          "blue-dark": "{color.alpha.orange.400.40-a}"
+          "blue-light": "{color.alpha.orange.600.40a}",
+          "blue-dark": "{color.alpha.orange.400.40a}",
+          "teal-light": "{color.alpha.orange.600.40a}",
+          "teal-dark": "{color.alpha.orange.400.40a}"
         }
       },
       "default": {
@@ -1114,15 +1376,19 @@
         "$value": "{color.orange.500}",
         "$modes": {
           "blue-light": "{color.orange.500}",
-          "blue-dark": "{color.orange.500}"
+          "blue-dark": "{color.orange.500}",
+          "teal-light": "{color.orange.500}",
+          "teal-dark": "{color.orange.500}"
         }
       },
       "disabled": {
         "$type": "color",
-        "$value": "{color.alpha.orange.500.40-a}",
+        "$value": "{color.alpha.orange.500.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.orange.500.40-a}",
-          "blue-dark": "{color.alpha.orange.500.40-a}"
+          "blue-light": "{color.alpha.orange.500.40a}",
+          "blue-dark": "{color.alpha.orange.500.40a}",
+          "teal-light": "{color.alpha.orange.500.40a}",
+          "teal-dark": "{color.alpha.orange.500.40a}"
         }
       },
       "weakest": {
@@ -1130,7 +1396,9 @@
         "$value": "{color.orange.100}",
         "$modes": {
           "blue-light": "{color.orange.100}",
-          "blue-dark": "{color.orange.900}"
+          "blue-dark": "{color.orange.900}",
+          "teal-light": "{color.orange.100}",
+          "teal-dark": "{color.orange.900}"
         }
       },
       "action-hover": {
@@ -1138,7 +1406,9 @@
         "$value": "{color.orange.600}",
         "$modes": {
           "blue-light": "{color.orange.600}",
-          "blue-dark": "{color.orange.600}"
+          "blue-dark": "{color.orange.600}",
+          "teal-light": "{color.orange.600}",
+          "teal-dark": "{color.orange.600}"
         }
       },
       "action-active": {
@@ -1146,7 +1416,9 @@
         "$value": "{color.orange.800}",
         "$modes": {
           "blue-light": "{color.orange.800}",
-          "blue-dark": "{color.orange.800}"
+          "blue-dark": "{color.orange.800}",
+          "teal-light": "{color.orange.800}",
+          "teal-dark": "{color.orange.800}"
         }
       }
     },
@@ -1156,7 +1428,9 @@
         "$value": "{color.figma-only.jp-morgan.brown}",
         "$modes": {
           "blue-light": "{color.figma-only.jp-morgan.brown}",
-          "blue-dark": "{color.white}"
+          "blue-dark": "{color.white}",
+          "teal-light": "{color.figma-only.jp-morgan.brown}",
+          "teal-dark": "{color.white}"
         }
       },
       "chase": {
@@ -1164,7 +1438,9 @@
         "$value": "{color.figma-only.chase.black}",
         "$modes": {
           "blue-light": "{color.figma-only.chase.black}",
-          "blue-dark": "{color.white}"
+          "blue-dark": "{color.white}",
+          "teal-light": "{color.figma-only.chase.black}",
+          "teal-dark": "{color.white}"
         }
       },
       "chase-symbol": {
@@ -1172,16 +1448,20 @@
         "$value": "{color.figma-only.chase.blue}",
         "$modes": {
           "blue-light": "{color.figma-only.chase.blue}",
-          "blue-dark": "{color.white}"
+          "blue-dark": "{color.white}",
+          "teal-light": "{color.figma-only.chase.blue}",
+          "teal-dark": "{color.white}"
         }
       }
     },
     "transparent": {
       "$type": "color",
-      "$value": "{color.alpha.white.0-a}",
+      "$value": "{color.alpha.white.0a}",
       "$modes": {
-        "blue-light": "{color.alpha.white.0-a}",
-        "blue-dark": "{color.alpha.black.0-a}"
+        "blue-light": "{color.alpha.white.0a}",
+        "blue-dark": "{color.alpha.black.0a}",
+        "teal-light": "{color.alpha.white.0a}",
+        "teal-dark": "{color.alpha.black.0a}"
       }
     }
   }
diff --git a/packages/theme/tokens/palette/teal-dark-next.tokens.json b/packages/theme/tokens/palette/teal-dark-next.tokens.json
new file mode 100644
index 0000000000..dbfdd22f29
--- /dev/null
+++ b/packages/theme/tokens/palette/teal-dark-next.tokens.json
@@ -0,0 +1,628 @@
+{
+  "palette": {
+    "accent": {
+      "stronger": {
+        "$type": "color",
+        "$value": "{color.teal.300}"
+      },
+      "stronger-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.teal.300.40a}"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "{color.teal.400}"
+      },
+      "strong-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.teal.400.40a}"
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.teal.500}"
+      },
+      "none": {
+        "$type": "color",
+        "$value": "{color.alpha.teal.500.0a}"
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.teal.500.40a}"
+      },
+      "weak": {
+        "$type": "color",
+        "$value": "{color.teal.600}"
+      },
+      "weaker": {
+        "$type": "color",
+        "$value": "{color.teal.800}"
+      },
+      "weaker-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.teal.800.40a}"
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.teal.900}"
+      },
+      "action-hover": {
+        "$type": "color",
+        "$value": "{color.teal.600}"
+      },
+      "action-active": {
+        "$type": "color",
+        "$value": "{color.teal.800}"
+      }
+    },
+    "alpha": {
+      "strong": {
+        "$type": "color",
+        "$value": "{color.alpha.white.45a}"
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.alpha.white.30a}"
+      },
+      "weak": {
+        "$type": "color",
+        "$value": "{color.alpha.white.15a}"
+      },
+      "weaker": {
+        "$type": "color",
+        "$value": "{color.alpha.white.10a}"
+      },
+      "none": {
+        "$type": "color",
+        "$value": "{color.alpha.white.0a}"
+      },
+      "backdrop": {
+        "$type": "color",
+        "$value": "{color.alpha.black.70a}"
+      }
+    },
+    "background": {
+      "primary": {
+        "$type": "color",
+        "$value": "{color.jet}"
+      },
+      "primary-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.jet.40a}"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "{color.granite}"
+      },
+      "secondary-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.charcoal.40a}"
+      },
+      "tertiary": {
+        "$type": "color",
+        "$value": "{color.leather}"
+      },
+      "tertiary-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.leather.40a}"
+      }
+    },
+    "categorical": {
+      "1": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.cobalt.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.cobalt.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.cobalt.900}"
+        }
+      },
+      "2": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.cider.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.cider.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.cider.900}"
+        }
+      },
+      "3": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.plum.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.plum.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.plum.900}"
+        }
+      },
+      "4": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.aqua.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.aqua.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.aqua.900}"
+        }
+      },
+      "5": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.slate.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.slate.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.slate.900}"
+        }
+      },
+      "6": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.rose.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.rose.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.rose.900}"
+        }
+      },
+      "7": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.olive.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.olive.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.olive.900}"
+        }
+      },
+      "8": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.salmon.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.salmon.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.salmon.900}"
+        }
+      },
+      "9": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.indigo.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.indigo.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.indigo.900}"
+        }
+      },
+      "10": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.jade.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.jade.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.jade.900}"
+        }
+      },
+      "11": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.citrine.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.citrine.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.citrine.900}"
+        }
+      },
+      "12": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.autumn.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.autumn.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.autumn.900}"
+        }
+      },
+      "13": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.lavender.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.lavender.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.lavender.900}"
+        }
+      },
+      "14": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.ocean.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.ocean.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.ocean.900}"
+        }
+      },
+      "15": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.smoke.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.smoke.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.smoke.900}"
+        }
+      },
+      "16": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.fuchsia.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.fuchsia.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.fuchsia.900}"
+        }
+      },
+      "17": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.lime.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.lime.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.lime.900}"
+        }
+      },
+      "18": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.fur.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.fur.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.fur.900}"
+        }
+      },
+      "19": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.violet.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.violet.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.violet.900}"
+        }
+      },
+      "20": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.forest.400}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.forest.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.forest.900}"
+        }
+      }
+    },
+    "foreground": {
+      "primary": {
+        "$type": "color",
+        "$value": "{color.white}"
+      },
+      "primary-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.white.40a}"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "{color.gray.300}"
+      },
+      "secondary-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.300.40a}"
+      },
+      "primary-alt": {
+        "$type": "color",
+        "$value": "{color.white}"
+      },
+      "primary-alt-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.white.40a}"
+      },
+      "hover": {
+        "$type": "color",
+        "$value": "{color.blue.400}"
+      },
+      "active": {
+        "$type": "color",
+        "$value": "{color.blue.300}"
+      },
+      "visited": {
+        "$type": "color",
+        "$value": "{color.purple.200}"
+      }
+    },
+    "info": {
+      "default": {
+        "$type": "color",
+        "$value": "{color.blue.500}"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "{color.blue.400}"
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.blue.900}"
+      }
+    },
+    "negative": {
+      "strong": {
+        "$type": "color",
+        "$value": "{color.red.400}"
+      },
+      "strong-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.red.400.40a}"
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.red.500}"
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.red.500.40a}"
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.red.900}"
+      },
+      "action-hover": {
+        "$type": "color",
+        "$value": "{color.red.600}"
+      },
+      "action-active": {
+        "$type": "color",
+        "$value": "{color.red.800}"
+      }
+    },
+    "neutral": {
+      "strong": {
+        "$type": "color",
+        "$value": "{color.gray.400}"
+      },
+      "strong-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.400.40a}"
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.gray.500}"
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.500.40a}"
+      },
+      "readonly": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.500.10a}"
+      },
+      "weak": {
+        "$type": "color",
+        "$value": "{color.gray.600}"
+      },
+      "weak-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.600.40a}"
+      },
+      "weak-readonly": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.600.10a}"
+      },
+      "weaker": {
+        "$type": "color",
+        "$value": "{color.gray.700}"
+      },
+      "weaker-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.700.40a}"
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.gray.800}"
+      },
+      "action-hover": {
+        "$type": "color",
+        "$value": "{color.gray.600}"
+      },
+      "action-active": {
+        "$type": "color",
+        "$value": "{color.gray.800}"
+      }
+    },
+    "positive": {
+      "strong": {
+        "$type": "color",
+        "$value": "{color.green.400}"
+      },
+      "strong-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.green.400.40a}"
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.green.500}"
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.green.500.40a}"
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.green.900}"
+      },
+      "action-hover": {
+        "$type": "color",
+        "$value": "{color.green.600}"
+      },
+      "action-active": {
+        "$type": "color",
+        "$value": "{color.green.800}"
+      }
+    },
+    "shadow": {
+      "100": {
+        "$type": "color",
+        "$value": "{color.alpha.black.50a}"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "{color.alpha.black.50a}"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "{color.alpha.black.60a}"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "{color.alpha.black.60a}"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "{color.alpha.black.70a}"
+      }
+    },
+    "warning": {
+      "strong": {
+        "$type": "color",
+        "$value": "{color.orange.400}"
+      },
+      "strong-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.orange.400.40a}"
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.orange.500}"
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.orange.500.40a}"
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.orange.900}"
+      },
+      "action-hover": {
+        "$type": "color",
+        "$value": "{color.orange.600}"
+      },
+      "action-active": {
+        "$type": "color",
+        "$value": "{color.orange.800}"
+      }
+    },
+    "figma-only": {
+      "jpmorgan": {
+        "$type": "color",
+        "$value": "{color.white}"
+      },
+      "chase": {
+        "$type": "color",
+        "$value": "{color.white}"
+      },
+      "chase-symbol": {
+        "$type": "color",
+        "$value": "{color.white}"
+      }
+    },
+    "transparent": {
+      "$type": "color",
+      "$value": "{color.alpha.black.0a}"
+    }
+  }
+}
diff --git a/packages/theme/tokens/palette/teal-light-next.tokens.json b/packages/theme/tokens/palette/teal-light-next.tokens.json
new file mode 100644
index 0000000000..e8256b83ad
--- /dev/null
+++ b/packages/theme/tokens/palette/teal-light-next.tokens.json
@@ -0,0 +1,628 @@
+{
+  "palette": {
+    "accent": {
+      "stronger": {
+        "$type": "color",
+        "$value": "{color.teal.700}"
+      },
+      "stronger-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.teal.700.40a}"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "{color.teal.600}"
+      },
+      "strong-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.teal.600.40a}"
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.teal.500}"
+      },
+      "none": {
+        "$type": "color",
+        "$value": "{color.alpha.teal.500.0a}"
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.teal.500.40a}"
+      },
+      "weak": {
+        "$type": "color",
+        "$value": "{color.teal.400}"
+      },
+      "weaker": {
+        "$type": "color",
+        "$value": "{color.teal.200}"
+      },
+      "weaker-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.teal.200.40a}"
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.teal.100}"
+      },
+      "action-hover": {
+        "$type": "color",
+        "$value": "{color.teal.600}"
+      },
+      "action-active": {
+        "$type": "color",
+        "$value": "{color.teal.800}"
+      }
+    },
+    "alpha": {
+      "strong": {
+        "$type": "color",
+        "$value": "{color.alpha.black.45a}"
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.alpha.black.30a}"
+      },
+      "weak": {
+        "$type": "color",
+        "$value": "{color.alpha.black.15a}"
+      },
+      "weaker": {
+        "$type": "color",
+        "$value": "{color.alpha.black.10a}"
+      },
+      "none": {
+        "$type": "color",
+        "$value": "{color.alpha.black.0a}"
+      },
+      "backdrop": {
+        "$type": "color",
+        "$value": "{color.alpha.white.70a}"
+      }
+    },
+    "background": {
+      "primary": {
+        "$type": "color",
+        "$value": "{color.snow}"
+      },
+      "primary-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.snow.40a}"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "{color.marble}"
+      },
+      "secondary-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.marble.40a}"
+      },
+      "tertiary": {
+        "$type": "color",
+        "$value": "{color.limestone}"
+      },
+      "tertiary-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.limestone.40a}"
+      }
+    },
+    "categorical": {
+      "1": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.cobalt.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.cobalt.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.cobalt.100}"
+        }
+      },
+      "2": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.cider.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.cider.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.cider.100}"
+        }
+      },
+      "3": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.plum.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.plum.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.plum.100}"
+        }
+      },
+      "4": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.aqua.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.aqua.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.aqua.100}"
+        }
+      },
+      "5": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.slate.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.slate.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.slate.100}"
+        }
+      },
+      "6": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.rose.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.rose.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.rose.100}"
+        }
+      },
+      "7": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.olive.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.olive.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.olive.100}"
+        }
+      },
+      "8": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.salmon.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.salmon.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.salmon.100}"
+        }
+      },
+      "9": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.indigo.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.indigo.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.indigo.100}"
+        }
+      },
+      "10": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.jade.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.jade.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.jade.100}"
+        }
+      },
+      "11": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.citrine.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.citrine.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.citrine.100}"
+        }
+      },
+      "12": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.autumn.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.autumn.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.autumn.100}"
+        }
+      },
+      "13": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.lavender.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.lavender.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.lavender.100}"
+        }
+      },
+      "14": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.ocean.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.ocean.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.ocean.100}"
+        }
+      },
+      "15": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.smoke.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.smoke.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.smoke.100}"
+        }
+      },
+      "16": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.fuchsia.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.fuchsia.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.fuchsia.100}"
+        }
+      },
+      "17": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.lime.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.lime.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.lime.100}"
+        }
+      },
+      "18": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.fur.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.fur.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.fur.100}"
+        }
+      },
+      "19": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.violet.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.violet.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.violet.100}"
+        }
+      },
+      "20": {
+        "strong": {
+          "$type": "color",
+          "$value": "{color.forest.600}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{color.forest.500}"
+        },
+        "weakest": {
+          "$type": "color",
+          "$value": "{color.forest.100}"
+        }
+      }
+    },
+    "foreground": {
+      "primary": {
+        "$type": "color",
+        "$value": "{color.black}"
+      },
+      "primary-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.black.40a}"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "{color.gray.700}"
+      },
+      "secondary-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.700.40a}"
+      },
+      "primary-alt": {
+        "$type": "color",
+        "$value": "{color.white}"
+      },
+      "primary-alt-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.white.40a}"
+      },
+      "hover": {
+        "$type": "color",
+        "$value": "{color.blue.600}"
+      },
+      "active": {
+        "$type": "color",
+        "$value": "{color.blue.700}"
+      },
+      "visited": {
+        "$type": "color",
+        "$value": "{color.purple.800}"
+      }
+    },
+    "info": {
+      "default": {
+        "$type": "color",
+        "$value": "{color.blue.500}"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "{color.blue.600}"
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.blue.100}"
+      }
+    },
+    "negative": {
+      "strong": {
+        "$type": "color",
+        "$value": "{color.red.600}"
+      },
+      "strong-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.red.600.40a}"
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.red.500}"
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.red.500.40a}"
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.red.100}"
+      },
+      "action-hover": {
+        "$type": "color",
+        "$value": "{color.red.600}"
+      },
+      "action-active": {
+        "$type": "color",
+        "$value": "{color.red.800}"
+      }
+    },
+    "neutral": {
+      "strong": {
+        "$type": "color",
+        "$value": "{color.gray.600}"
+      },
+      "strong-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.600.40a}"
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.gray.500}"
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.500.40a}"
+      },
+      "readonly": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.500.10a}"
+      },
+      "weak": {
+        "$type": "color",
+        "$value": "{color.gray.400}"
+      },
+      "weak-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.400.40a}"
+      },
+      "weak-readonly": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.400.10a}"
+      },
+      "weaker": {
+        "$type": "color",
+        "$value": "{color.gray.300}"
+      },
+      "weaker-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.gray.300.40a}"
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.gray.200}"
+      },
+      "action-hover": {
+        "$type": "color",
+        "$value": "{color.gray.600}"
+      },
+      "action-active": {
+        "$type": "color",
+        "$value": "{color.gray.800}"
+      }
+    },
+    "positive": {
+      "strong": {
+        "$type": "color",
+        "$value": "{color.green.600}"
+      },
+      "strong-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.green.600.40a}"
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.green.500}"
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.green.500.40a}"
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.green.100}"
+      },
+      "action-hover": {
+        "$type": "color",
+        "$value": "{color.green.600}"
+      },
+      "action-active": {
+        "$type": "color",
+        "$value": "{color.green.800}"
+      }
+    },
+    "shadow": {
+      "100": {
+        "$type": "color",
+        "$value": "{color.alpha.black.10a}"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "{color.alpha.black.10a}"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "{color.alpha.black.20a}"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "{color.alpha.black.20a}"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "{color.alpha.black.30a}"
+      }
+    },
+    "warning": {
+      "strong": {
+        "$type": "color",
+        "$value": "{color.orange.600}"
+      },
+      "strong-disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.orange.600.40a}"
+      },
+      "default": {
+        "$type": "color",
+        "$value": "{color.orange.500}"
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.alpha.orange.500.40a}"
+      },
+      "weakest": {
+        "$type": "color",
+        "$value": "{color.orange.100}"
+      },
+      "action-hover": {
+        "$type": "color",
+        "$value": "{color.orange.600}"
+      },
+      "action-active": {
+        "$type": "color",
+        "$value": "{color.orange.800}"
+      }
+    },
+    "figma-only": {
+      "jpmorgan": {
+        "$type": "color",
+        "$value": "{color.figma-only.jp-morgan.brown}"
+      },
+      "chase": {
+        "$type": "color",
+        "$value": "{color.figma-only.chase.black}"
+      },
+      "chase-symbol": {
+        "$type": "color",
+        "$value": "{color.figma-only.chase.blue}"
+      }
+    },
+    "transparent": {
+      "$type": "color",
+      "$value": "{color.alpha.white.0a}"
+    }
+  }
+}

From 8c5b2a7e8f63b97077212c5c567d0ca6584bcb48 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:19:12 +0000
Subject: [PATCH 08/35] Add todo

---
 packages/theme/scripts/build-json.mjs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/theme/scripts/build-json.mjs b/packages/theme/scripts/build-json.mjs
index 57ad62c95a..71a3cf90d9 100644
--- a/packages/theme/scripts/build-json.mjs
+++ b/packages/theme/scripts/build-json.mjs
@@ -95,12 +95,13 @@ function getStyleDictionaryConfig({ modes, density, accents }) {
               );
             },
           },
-          // TODO: different mode-accent will override each other right now.
           // Inpire from `atRule` option, to work out multiple modes in a single file?
           // https://github.com/lukasoppermann/style-dictionary-utils/blob/main/src/format/css-advanced.ts
           // Not really, SD will warn Collision detected, and only use one value at a time, we need to come up with custom syntax to make this work
           ...paletteNextList.map((paletteNextType) => {
             const modeAccentRules = modes.reduce((prev, mode) => {
+              // TODO: restructure `./palette/` files to per palette family, so that only those needing 4 combination (accents * modes) will generate 4 block of CSS code?
+              // Or - should it be smarter when combining modes?
               for (const accent of accents) {
                 prev.push({
                   selector: `.salt-theme.salt-theme-next[data-mode="${mode}"][data-accent="${accent}"]`,

From c9ce60b27f489e8aa6f23bb3a894dccce3a442e1 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Thu, 21 Nov 2024 12:16:32 +0000
Subject: [PATCH 09/35] refactor kebab, remove -default suffix

---
 packages/theme/scripts/build-json.mjs         | 80 +---------------
 .../scripts/sd-utils/transform/kebab.mjs      | 94 +++++++++++++++++++
 2 files changed, 96 insertions(+), 78 deletions(-)
 create mode 100644 packages/theme/scripts/sd-utils/transform/kebab.mjs

diff --git a/packages/theme/scripts/build-json.mjs b/packages/theme/scripts/build-json.mjs
index 71a3cf90d9..ad55d114ed 100644
--- a/packages/theme/scripts/build-json.mjs
+++ b/packages/theme/scripts/build-json.mjs
@@ -1,6 +1,6 @@
-import { kebabCase } from "change-case";
 import { StyleDictionary } from "style-dictionary-utils";
 import { cssMultiModes } from "./sd-utils/format/css-multi-modes.mjs";
+import { saltKebab } from "./sd-utils/transform/kebab.mjs";
 
 // TODO: add more styling options here, and theme vs theme next
 function getStyleDictionaryConfig({ modes, density, accents }) {
@@ -142,16 +142,6 @@ function getStyleDictionaryConfig({ modes, density, accents }) {
   };
 }
 
-// Regexps involved with splitting words in various case formats.
-const SPLIT_LOWER_UPPER_RE = /([\p{Ll}\d])(\p{Lu})/gu; // ( lower case + digit ) ( upper case )
-const SPLIT_LOWER_NON_DIGIT_UPPER_RE = /([\p{Ll}])(\p{Lu})/gu; // ( lower case  ) ( upper case )
-const SPLIT_UPPER_UPPER_RE = /(\p{Lu})([\p{Lu}][\p{Ll}])/gu; // ( upper case ) ( [ upper case ] [ lower case ] )
-// The replacement value for splits.
-const SPLIT_REPLACE_VALUE = "$1\0$2";
-
-// Regexp involved with stripping non-word characters from the result.
-const DEFAULT_STRIP_REGEXP = /[^\p{L}\d]+/giu;
-
 const modes = ["light", "dark"];
 const accents = ["blue", "teal"];
 // for await (const mode of ["dark"]) {
@@ -206,73 +196,7 @@ for await (const density of ["hd"]) {
     name: "salt-ds/name/kebab",
     type: "name",
     transitive: true,
-    transform: (token, config) => {
-      // attributes: { category: 'color', type: 'alpha',
-      if (
-        token.path.includes("alpha") &&
-        token.attributes.category === "color" &&
-        token.attributes.type === "alpha"
-      ) {
-        const alphaIndex = token.path.findIndex((p) => p === "alpha");
-        const alphaRemovedPath = [
-          ...token.path.slice(0, alphaIndex),
-          ...token.path.slice(alphaIndex + 1),
-        ];
-        // console.log("Token path with alpha removed", alphaRemovedPath);
-
-        function splitPrefixSuffix(input) {
-          const splitFn = modifiedSplit;
-          const prefixIndex = 0;
-          const suffixIndex = input.length;
-
-          return [
-            input.slice(0, prefixIndex),
-            splitFn(input.slice(prefixIndex, suffixIndex)),
-            input.slice(suffixIndex),
-          ];
-        }
-
-        function specialKebab(input) {
-          const [prefix, words, suffix] = splitPrefixSuffix(input);
-          return (
-            prefix +
-            words.map((input) => input.toLowerCase()).join("-") +
-            suffix
-          );
-        }
-
-        function modifiedSplit(value) {
-          let result = value.trim();
-
-          result = result
-            // `SPLIT_LOWER_NON_DIGIT_UPPER_RE` changed compare with 'change-case' original split
-            // Change to not split 30A -> 30-A
-            .replace(SPLIT_LOWER_NON_DIGIT_UPPER_RE, SPLIT_REPLACE_VALUE)
-            .replace(SPLIT_UPPER_UPPER_RE, SPLIT_REPLACE_VALUE);
-
-          result = result.replace(DEFAULT_STRIP_REGEXP, "\0");
-
-          let start = 0;
-          let end = result.length;
-
-          // Trim the delimiter from around the output string.
-          while (result.charAt(start) === "\0") start++;
-          if (start === end) return [];
-          while (result.charAt(end - 1) === "\0") end--;
-
-          return result.slice(start, end).split(/\0/g);
-        }
-
-        const name = specialKebab(
-          [config.prefix].concat(alphaRemovedPath).join(" "),
-        );
-        console.log("salt-ds/name/kebab specialKebab name", name, token);
-        return name;
-      }
-      const name = kebabCase([config.prefix].concat(token.path).join(" "));
-      console.log("salt-ds/name/kebab name", name, token);
-      return name;
-    },
+    transform: saltKebab,
   });
   const sd = await saltStyleDictionary.extend(config);
   sd.cleanAllPlatforms();
diff --git a/packages/theme/scripts/sd-utils/transform/kebab.mjs b/packages/theme/scripts/sd-utils/transform/kebab.mjs
new file mode 100644
index 0000000000..c70e7869f9
--- /dev/null
+++ b/packages/theme/scripts/sd-utils/transform/kebab.mjs
@@ -0,0 +1,94 @@
+// Regexps involved with splitting words in various case formats.
+const SPLIT_LOWER_UPPER_RE = /([\p{Ll}\d])(\p{Lu})/gu; // ( lower case + digit ) ( upper case )
+const SPLIT_LOWER_NON_DIGIT_UPPER_RE = /([\p{Ll}])(\p{Lu})/gu; // ( lower case  ) ( upper case )
+const SPLIT_UPPER_UPPER_RE = /(\p{Lu})([\p{Lu}][\p{Ll}])/gu; // ( upper case ) ( [ upper case ] [ lower case ] )
+// The replacement value for splits.
+const SPLIT_REPLACE_VALUE = "$1\0$2";
+
+// Regexp involved with stripping non-word characters from the result.
+const DEFAULT_STRIP_REGEXP = /[^\p{L}\d]+/giu;
+
+// console.log("Token path with alpha removed", alphaRemovedPath);
+
+function splitPrefixSuffix(input) {
+  const splitFn = modifiedSplit;
+  const prefixIndex = 0;
+  const suffixIndex = input.length;
+
+  return [
+    input.slice(0, prefixIndex),
+    splitFn(input.slice(prefixIndex, suffixIndex)),
+    input.slice(suffixIndex),
+  ];
+}
+
+/**
+ * Modified version of kebabCase from 'change-case', where '40A' will be '40a' instead of '40-a'
+ * @param {string} input
+ * @returns
+ */
+function specialKebab(input) {
+  const [prefix, words, suffix] = splitPrefixSuffix(input);
+  return prefix + words.map((input) => input.toLowerCase()).join("-") + suffix;
+}
+
+/**
+ *
+ * @param {string} value
+ * @returns
+ */
+function modifiedSplit(value) {
+  let result = value.trim();
+
+  result = result
+    // `SPLIT_LOWER_NON_DIGIT_UPPER_RE` changed compare with 'change-case' original split
+    // Change to not split 30A -> 30-A
+    .replace(SPLIT_LOWER_NON_DIGIT_UPPER_RE, SPLIT_REPLACE_VALUE)
+    .replace(SPLIT_UPPER_UPPER_RE, SPLIT_REPLACE_VALUE);
+
+  result = result.replace(DEFAULT_STRIP_REGEXP, "\0");
+
+  let start = 0;
+  let end = result.length;
+
+  // Trim the delimiter from around the output string.
+  while (result.charAt(start) === "\0") start++;
+  if (start === end) return [];
+  while (result.charAt(end - 1) === "\0") end--;
+
+  return result.slice(start, end).split(/\0/g);
+}
+
+/**
+ *
+ * @param {string} name
+ */
+function removeDefaultSuffix(name) {
+  return name.replace(/-default$/, "");
+}
+
+export const saltKebab = (token, config) => {
+  // attributes: { category: 'color', type: 'alpha',
+  if (
+    token.path.includes("alpha") &&
+    token.attributes.category === "color" &&
+    token.attributes.type === "alpha"
+  ) {
+    const alphaIndex = token.path.findIndex((p) => p === "alpha");
+    const alphaRemovedPath = [
+      ...token.path.slice(0, alphaIndex),
+      ...token.path.slice(alphaIndex + 1),
+    ];
+
+    const name = removeDefaultSuffix(
+      specialKebab([config.prefix].concat(alphaRemovedPath).join(" ")),
+    );
+    console.log("salt-ds/name/kebab specialKebab name", name, token);
+    return name;
+  }
+  const name = removeDefaultSuffix(
+    specialKebab([config.prefix].concat(token.path).join(" ")),
+  );
+  console.log("salt-ds/name/kebab name", name, token);
+  return name;
+};

From 0d2a94cf920a58b7223aaf793a4ea70252ee4e8f Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Thu, 21 Nov 2024 12:20:52 +0000
Subject: [PATCH 10/35] Refactor transform to standalone file

---
 packages/theme/scripts/build-json.mjs         | 41 +++----------------
 .../transform/{kebab.mjs => name-kebab.mjs}   |  8 +++-
 .../sd-utils/transform/value-modes.mjs        | 28 +++++++++++++
 3 files changed, 40 insertions(+), 37 deletions(-)
 rename packages/theme/scripts/sd-utils/transform/{kebab.mjs => name-kebab.mjs} (94%)
 create mode 100644 packages/theme/scripts/sd-utils/transform/value-modes.mjs

diff --git a/packages/theme/scripts/build-json.mjs b/packages/theme/scripts/build-json.mjs
index ad55d114ed..009a5ff752 100644
--- a/packages/theme/scripts/build-json.mjs
+++ b/packages/theme/scripts/build-json.mjs
@@ -1,6 +1,7 @@
 import { StyleDictionary } from "style-dictionary-utils";
 import { cssMultiModes } from "./sd-utils/format/css-multi-modes.mjs";
-import { saltKebab } from "./sd-utils/transform/kebab.mjs";
+import { saltNameKebab } from "./sd-utils/transform/name-kebab.mjs";
+import { saltValueModes } from "./sd-utils/transform/value-modes.mjs";
 
 // TODO: add more styling options here, and theme vs theme next
 function getStyleDictionaryConfig({ modes, density, accents }) {
@@ -95,7 +96,7 @@ function getStyleDictionaryConfig({ modes, density, accents }) {
               );
             },
           },
-          // Inpire from `atRule` option, to work out multiple modes in a single file?
+          // Inspire from `atRule` option, to work out multiple modes in a single file?
           // https://github.com/lukasoppermann/style-dictionary-utils/blob/main/src/format/css-advanced.ts
           // Not really, SD will warn Collision detected, and only use one value at a time, we need to come up with custom syntax to make this work
           ...paletteNextList.map((paletteNextType) => {
@@ -162,42 +163,10 @@ for await (const density of ["hd"]) {
 
   // TODO: find out why when `value` transform is provided, name is broken
   // This is currently not used, but would be good to understand regardless
-  saltStyleDictionary.registerTransform({
-    type: "value",
-    // if `transitive` is not here, `transform` is not being called...
-    transitive: true,
-    name: "salt-ds/value/modes",
-    filter: (token, options) => {
-      return token.$modes !== undefined;
-      // const filterCondition =
-      //   token.filePath.includes("-next.tokens") &&
-      //   token.path[0] === "palette";
-      // console.log("salt-ds/value/modes filter", filterCondition, token);
-      // return filterCondition;
-    },
-    transform: (token, _, options) => {
-      console.log("salt-ds/value/modes transform", token);
-      // debugger;
-      if (
-        // token.path.includes("palette")
-        token.attributes.category === "palette" &&
-        token.attributes.type === "accent" &&
-        token.attributes.item === "stronger"
-      ) {
-        console.log("palette accent stronger", token);
-      }
-
-      return token.$modes; // how to work out `.light` here?
-    },
-  });
+  saltStyleDictionary.registerTransform(saltValueModes);
 
   // Custom transform - https://styledictionary.com/reference/hooks/transforms/
-  saltStyleDictionary.registerTransform({
-    name: "salt-ds/name/kebab",
-    type: "name",
-    transitive: true,
-    transform: saltKebab,
-  });
+  saltStyleDictionary.registerTransform(saltNameKebab);
   const sd = await saltStyleDictionary.extend(config);
   sd.cleanAllPlatforms();
   sd.buildAllPlatforms();
diff --git a/packages/theme/scripts/sd-utils/transform/kebab.mjs b/packages/theme/scripts/sd-utils/transform/name-kebab.mjs
similarity index 94%
rename from packages/theme/scripts/sd-utils/transform/kebab.mjs
rename to packages/theme/scripts/sd-utils/transform/name-kebab.mjs
index c70e7869f9..a4a061d509 100644
--- a/packages/theme/scripts/sd-utils/transform/kebab.mjs
+++ b/packages/theme/scripts/sd-utils/transform/name-kebab.mjs
@@ -67,7 +67,7 @@ function removeDefaultSuffix(name) {
   return name.replace(/-default$/, "");
 }
 
-export const saltKebab = (token, config) => {
+const saltKebab = (token, config) => {
   // attributes: { category: 'color', type: 'alpha',
   if (
     token.path.includes("alpha") &&
@@ -92,3 +92,9 @@ export const saltKebab = (token, config) => {
   console.log("salt-ds/name/kebab name", name, token);
   return name;
 };
+export const saltNameKebab = {
+  name: "salt-ds/name/kebab",
+  type: "name",
+  transitive: true,
+  transform: saltKebab,
+};
diff --git a/packages/theme/scripts/sd-utils/transform/value-modes.mjs b/packages/theme/scripts/sd-utils/transform/value-modes.mjs
new file mode 100644
index 0000000000..6db94eb0ec
--- /dev/null
+++ b/packages/theme/scripts/sd-utils/transform/value-modes.mjs
@@ -0,0 +1,28 @@
+export const saltValueModes = {
+  type: "value",
+  // if `transitive` is not here, `transform` is not being called...
+  transitive: true,
+  name: "salt-ds/value/modes",
+  filter: (token, options) => {
+    return token.$modes !== undefined;
+    // const filterCondition =
+    //   token.filePath.includes("-next.tokens") &&
+    //   token.path[0] === "palette";
+    // console.log("salt-ds/value/modes filter", filterCondition, token);
+    // return filterCondition;
+  },
+  transform: (token, _, options) => {
+    console.log("salt-ds/value/modes transform", token);
+    // debugger;
+    if (
+      // token.path.includes("palette")
+      token.attributes.category === "palette" &&
+      token.attributes.type === "accent" &&
+      token.attributes.item === "stronger"
+    ) {
+      console.log("palette accent stronger", token);
+    }
+
+    return token.$modes; // how to work out `.light` here?
+  },
+};

From 554417ef3f95316a00cb3a00738491ab388e4d05 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Thu, 21 Nov 2024 12:23:52 +0000
Subject: [PATCH 11/35] Update readme instructions

---
 packages/theme/.gitignore | 1 +
 packages/theme/README.md  | 7 ++++---
 2 files changed, 5 insertions(+), 3 deletions(-)
 create mode 100644 packages/theme/.gitignore

diff --git a/packages/theme/.gitignore b/packages/theme/.gitignore
new file mode 100644
index 0000000000..bf0824e596
--- /dev/null
+++ b/packages/theme/.gitignore
@@ -0,0 +1 @@
+*.log
\ No newline at end of file
diff --git a/packages/theme/README.md b/packages/theme/README.md
index cb5ca4850b..3b4b54e92f 100644
--- a/packages/theme/README.md
+++ b/packages/theme/README.md
@@ -4,10 +4,11 @@ This is a regular package
 
 ## Tokens
 
-1. Run "Export Color Styles" -> "Export Variables" -> "Json (Experimental)"
+1. Run "Export Color Styles" -> "Export Variables" -> "Json (Experimental)" from [PR#51](https://github.com/jpmorganchase/Figma-Plugins-and-Widgets/pull/51)
 1. Select Collection and Mode on plugin UI
+   1. Add "Additional Root Key (Optional)"
+      - Colors library: 'color'
+      - Palette library: 'palette'
 1. Copy output to corresponding `*.tokens.json` file
 1. Modify color tokens
-   1. prefix value with `color.*`, e.g. replace `"{` to `"{color.`
    1. remove `categorical.` from , e.g. replace `"{color.categorical` to `"{color`
-   1. add `palette` layer to `palette/*.tokens.json`

From 366d364715c1e540bcc50040a10e5be2c5d05d56 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Thu, 21 Nov 2024 15:13:12 +0000
Subject: [PATCH 12/35] Reduce number of css when blue/teal mode doesn't matter
 for palette

---
 packages/theme/scripts/build-json.mjs         |  47 +-
 .../helpers/combine-tokens-to-modes.mjs       |  33 +
 .../tokens/palette/palette-next.tokens.json   | 762 ++++++------------
 3 files changed, 325 insertions(+), 517 deletions(-)

diff --git a/packages/theme/scripts/build-json.mjs b/packages/theme/scripts/build-json.mjs
index 009a5ff752..8978161335 100644
--- a/packages/theme/scripts/build-json.mjs
+++ b/packages/theme/scripts/build-json.mjs
@@ -96,11 +96,9 @@ function getStyleDictionaryConfig({ modes, density, accents }) {
               );
             },
           },
-          // Inspire from `atRule` option, to work out multiple modes in a single file?
-          // https://github.com/lukasoppermann/style-dictionary-utils/blob/main/src/format/css-advanced.ts
-          // Not really, SD will warn Collision detected, and only use one value at a time, we need to come up with custom syntax to make this work
+          // 2 sets of palette files set, one with 4 $modes ('blue/teal-light/dark'), one with 2 $modes ('light/dark')
           ...paletteNextList.map((paletteNextType) => {
-            const modeAccentRules = modes.reduce((prev, mode) => {
+            const accentModeRules = modes.reduce((prev, mode) => {
               // TODO: restructure `./palette/` files to per palette family, so that only those needing 4 combination (accents * modes) will generate 4 block of CSS code?
               // Or - should it be smarter when combining modes?
               for (const accent of accents) {
@@ -111,16 +109,45 @@ function getStyleDictionaryConfig({ modes, density, accents }) {
               }
               return prev;
             }, []);
-            console.log({ modeAccentRules });
+
+            return {
+              format: "salt-ds/css/multi-modes",
+              destination: `palette/${paletteNextType}-next.css`,
+              options: {
+                outputReferences: true,
+                usesDtcg: true,
+                rules: accentModeRules,
+              },
+              // // Use filter to add different `selector` for mode/density/etc.
+              filter: async (token, options) => {
+                console.log("css/advanced filter", token); //palette-accent
+                //  For some reason, attributes "attribute/cti" is not attached to tokens in palette
+                return (
+                  // next
+                  token.filePath.includes("-next.tokens") &&
+                  // platte
+                  token.path[0] === "palette" && // or token.filePath.includes("/palette/") &&
+                  //
+                  token.path[1] === paletteNextType &&
+                  // dirty way to match 'blue/teal-light/dark'
+                  Object.keys(token.$modes).every((x) => x.includes("-"))
+                );
+              },
+            };
+          }),
+          ...paletteNextList.map((paletteNextType) => {
+            const modeOnlyRules = modes.map((mode) => ({
+              selector: `.salt-theme.salt-theme-next[data-mode="${mode}"]`,
+              modeIdentifier: mode,
+            }));
+
             return {
               format: "salt-ds/css/multi-modes",
-              // format: "css/advanced",
               destination: `palette/${paletteNextType}-next.css`,
               options: {
-                // selector: `.salt-theme.salt-theme-next[data-mode="${mode}"][data-accent="${accent}"]`, // defaults to :root
                 outputReferences: true,
                 usesDtcg: true,
-                rules: modeAccentRules,
+                rules: modeOnlyRules,
               },
               // // Use filter to add different `selector` for mode/density/etc.
               filter: async (token, options) => {
@@ -132,7 +159,9 @@ function getStyleDictionaryConfig({ modes, density, accents }) {
                   // platte
                   token.path[0] === "palette" && // or token.filePath.includes("/palette/") &&
                   //
-                  token.path[1] === paletteNextType
+                  token.path[1] === paletteNextType &&
+                  // dirty way to NOT match 'blue/teal-light/dark'
+                  !Object.keys(token.$modes).every((x) => x.includes("-"))
                 );
               },
             };
diff --git a/packages/theme/scripts/helpers/combine-tokens-to-modes.mjs b/packages/theme/scripts/helpers/combine-tokens-to-modes.mjs
index e6d75abbab..c1a31f9586 100644
--- a/packages/theme/scripts/helpers/combine-tokens-to-modes.mjs
+++ b/packages/theme/scripts/helpers/combine-tokens-to-modes.mjs
@@ -38,10 +38,43 @@ function addModesValue(mainToken, modeName, modeSpecificToken) {
   mainToken.$modes[modeName] = modeSpecificToken.$value;
 }
 
+function dedupeModesValue(token) {
+  console.log("dedupeModesValue", token);
+  // super specific to Salt accent/mode for now, split by "-", e.g. "blue-light" & "teal-light" can be potentially combined
+  const {
+    "blue-light": blueLightValue,
+    "teal-light": tealLightValue,
+    ...rest1
+  } = token.$modes;
+
+  if (blueLightValue && blueLightValue === tealLightValue) {
+    token.$modes = {
+      light: blueLightValue,
+      ...rest1,
+    };
+  }
+  console.log("rest1", token);
+
+  const {
+    "blue-dark": blueDarkValue,
+    "teal-dark": tealDarkValue,
+    ...rest2
+  } = token.$modes;
+
+  if (blueDarkValue && blueDarkValue === tealDarkValue) {
+    token.$modes = {
+      ...rest2,
+      dark: blueDarkValue,
+    };
+  }
+  console.log("rest2", token);
+}
+
 function iterateToAddModes(tokenObj, modeName, modeTokenObj) {
   // There shouldn't be any token with $value as well as nested token definations
   if ("$value" in tokenObj) {
     addModesValue(tokenObj, modeName, modeTokenObj);
+    dedupeModesValue(tokenObj);
   } else {
     for (const [key, nestedToken] of Object.entries(tokenObj)) {
       // NOTE: This assumes all tokens having the same structure
diff --git a/packages/theme/tokens/palette/palette-next.tokens.json b/packages/theme/tokens/palette/palette-next.tokens.json
index cf25e77d27..17d3457da0 100644
--- a/packages/theme/tokens/palette/palette-next.tokens.json
+++ b/packages/theme/tokens/palette/palette-next.tokens.json
@@ -137,60 +137,48 @@
         "$type": "color",
         "$value": "{color.alpha.black.45a}",
         "$modes": {
-          "blue-light": "{color.alpha.black.45a}",
-          "blue-dark": "{color.alpha.white.45a}",
-          "teal-light": "{color.alpha.black.45a}",
-          "teal-dark": "{color.alpha.white.45a}"
+          "light": "{color.alpha.black.45a}",
+          "dark": "{color.alpha.white.45a}"
         }
       },
       "default": {
         "$type": "color",
         "$value": "{color.alpha.black.30a}",
         "$modes": {
-          "blue-light": "{color.alpha.black.30a}",
-          "blue-dark": "{color.alpha.white.30a}",
-          "teal-light": "{color.alpha.black.30a}",
-          "teal-dark": "{color.alpha.white.30a}"
+          "light": "{color.alpha.black.30a}",
+          "dark": "{color.alpha.white.30a}"
         }
       },
       "weak": {
         "$type": "color",
         "$value": "{color.alpha.black.15a}",
         "$modes": {
-          "blue-light": "{color.alpha.black.15a}",
-          "blue-dark": "{color.alpha.white.15a}",
-          "teal-light": "{color.alpha.black.15a}",
-          "teal-dark": "{color.alpha.white.15a}"
+          "light": "{color.alpha.black.15a}",
+          "dark": "{color.alpha.white.15a}"
         }
       },
       "weaker": {
         "$type": "color",
         "$value": "{color.alpha.black.10a}",
         "$modes": {
-          "blue-light": "{color.alpha.black.10a}",
-          "blue-dark": "{color.alpha.white.10a}",
-          "teal-light": "{color.alpha.black.10a}",
-          "teal-dark": "{color.alpha.white.10a}"
+          "light": "{color.alpha.black.10a}",
+          "dark": "{color.alpha.white.10a}"
         }
       },
       "none": {
         "$type": "color",
         "$value": "{color.alpha.black.0a}",
         "$modes": {
-          "blue-light": "{color.alpha.black.0a}",
-          "blue-dark": "{color.alpha.white.0a}",
-          "teal-light": "{color.alpha.black.0a}",
-          "teal-dark": "{color.alpha.white.0a}"
+          "light": "{color.alpha.black.0a}",
+          "dark": "{color.alpha.white.0a}"
         }
       },
       "backdrop": {
         "$type": "color",
         "$value": "{color.alpha.white.70a}",
         "$modes": {
-          "blue-light": "{color.alpha.white.70a}",
-          "blue-dark": "{color.alpha.black.70a}",
-          "teal-light": "{color.alpha.white.70a}",
-          "teal-dark": "{color.alpha.black.70a}"
+          "light": "{color.alpha.white.70a}",
+          "dark": "{color.alpha.black.70a}"
         }
       }
     },
@@ -199,60 +187,48 @@
         "$type": "color",
         "$value": "{color.snow}",
         "$modes": {
-          "blue-light": "{color.snow}",
-          "blue-dark": "{color.jet}",
-          "teal-light": "{color.snow}",
-          "teal-dark": "{color.jet}"
+          "light": "{color.snow}",
+          "dark": "{color.jet}"
         }
       },
       "primary-disabled": {
         "$type": "color",
         "$value": "{color.alpha.snow.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.snow.40a}",
-          "blue-dark": "{color.alpha.jet.40a}",
-          "teal-light": "{color.alpha.snow.40a}",
-          "teal-dark": "{color.alpha.jet.40a}"
+          "light": "{color.alpha.snow.40a}",
+          "dark": "{color.alpha.jet.40a}"
         }
       },
       "secondary": {
         "$type": "color",
         "$value": "{color.marble}",
         "$modes": {
-          "blue-light": "{color.marble}",
-          "blue-dark": "{color.granite}",
-          "teal-light": "{color.marble}",
-          "teal-dark": "{color.granite}"
+          "light": "{color.marble}",
+          "dark": "{color.granite}"
         }
       },
       "secondary-disabled": {
         "$type": "color",
         "$value": "{color.alpha.marble.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.marble.40a}",
-          "blue-dark": "{color.alpha.charcoal.40a}",
-          "teal-light": "{color.alpha.marble.40a}",
-          "teal-dark": "{color.alpha.charcoal.40a}"
+          "light": "{color.alpha.marble.40a}",
+          "dark": "{color.alpha.charcoal.40a}"
         }
       },
       "tertiary": {
         "$type": "color",
         "$value": "{color.limestone}",
         "$modes": {
-          "blue-light": "{color.limestone}",
-          "blue-dark": "{color.leather}",
-          "teal-light": "{color.limestone}",
-          "teal-dark": "{color.leather}"
+          "light": "{color.limestone}",
+          "dark": "{color.leather}"
         }
       },
       "tertiary-disabled": {
         "$type": "color",
         "$value": "{color.alpha.limestone.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.limestone.40a}",
-          "blue-dark": "{color.alpha.leather.40a}",
-          "teal-light": "{color.alpha.limestone.40a}",
-          "teal-dark": "{color.alpha.leather.40a}"
+          "light": "{color.alpha.limestone.40a}",
+          "dark": "{color.alpha.leather.40a}"
         }
       }
     },
@@ -262,30 +238,24 @@
           "$type": "color",
           "$value": "{color.cobalt.600}",
           "$modes": {
-            "blue-light": "{color.cobalt.600}",
-            "blue-dark": "{color.cobalt.400}",
-            "teal-light": "{color.cobalt.600}",
-            "teal-dark": "{color.cobalt.400}"
+            "light": "{color.cobalt.600}",
+            "dark": "{color.cobalt.400}"
           }
         },
         "default": {
           "$type": "color",
           "$value": "{color.cobalt.500}",
           "$modes": {
-            "blue-light": "{color.cobalt.500}",
-            "blue-dark": "{color.cobalt.500}",
-            "teal-light": "{color.cobalt.500}",
-            "teal-dark": "{color.cobalt.500}"
+            "light": "{color.cobalt.500}",
+            "dark": "{color.cobalt.500}"
           }
         },
         "weakest": {
           "$type": "color",
           "$value": "{color.cobalt.100}",
           "$modes": {
-            "blue-light": "{color.cobalt.100}",
-            "blue-dark": "{color.cobalt.900}",
-            "teal-light": "{color.cobalt.100}",
-            "teal-dark": "{color.cobalt.900}"
+            "light": "{color.cobalt.100}",
+            "dark": "{color.cobalt.900}"
           }
         }
       },
@@ -294,30 +264,24 @@
           "$type": "color",
           "$value": "{color.cider.600}",
           "$modes": {
-            "blue-light": "{color.cider.600}",
-            "blue-dark": "{color.cider.400}",
-            "teal-light": "{color.cider.600}",
-            "teal-dark": "{color.cider.400}"
+            "light": "{color.cider.600}",
+            "dark": "{color.cider.400}"
           }
         },
         "default": {
           "$type": "color",
           "$value": "{color.cider.500}",
           "$modes": {
-            "blue-light": "{color.cider.500}",
-            "blue-dark": "{color.cider.500}",
-            "teal-light": "{color.cider.500}",
-            "teal-dark": "{color.cider.500}"
+            "light": "{color.cider.500}",
+            "dark": "{color.cider.500}"
           }
         },
         "weakest": {
           "$type": "color",
           "$value": "{color.cider.100}",
           "$modes": {
-            "blue-light": "{color.cider.100}",
-            "blue-dark": "{color.cider.900}",
-            "teal-light": "{color.cider.100}",
-            "teal-dark": "{color.cider.900}"
+            "light": "{color.cider.100}",
+            "dark": "{color.cider.900}"
           }
         }
       },
@@ -326,30 +290,24 @@
           "$type": "color",
           "$value": "{color.plum.600}",
           "$modes": {
-            "blue-light": "{color.plum.600}",
-            "blue-dark": "{color.plum.400}",
-            "teal-light": "{color.plum.600}",
-            "teal-dark": "{color.plum.400}"
+            "light": "{color.plum.600}",
+            "dark": "{color.plum.400}"
           }
         },
         "default": {
           "$type": "color",
           "$value": "{color.plum.500}",
           "$modes": {
-            "blue-light": "{color.plum.500}",
-            "blue-dark": "{color.plum.500}",
-            "teal-light": "{color.plum.500}",
-            "teal-dark": "{color.plum.500}"
+            "light": "{color.plum.500}",
+            "dark": "{color.plum.500}"
           }
         },
         "weakest": {
           "$type": "color",
           "$value": "{color.plum.100}",
           "$modes": {
-            "blue-light": "{color.plum.100}",
-            "blue-dark": "{color.plum.900}",
-            "teal-light": "{color.plum.100}",
-            "teal-dark": "{color.plum.900}"
+            "light": "{color.plum.100}",
+            "dark": "{color.plum.900}"
           }
         }
       },
@@ -358,30 +316,24 @@
           "$type": "color",
           "$value": "{color.aqua.600}",
           "$modes": {
-            "blue-light": "{color.aqua.600}",
-            "blue-dark": "{color.aqua.400}",
-            "teal-light": "{color.aqua.600}",
-            "teal-dark": "{color.aqua.400}"
+            "light": "{color.aqua.600}",
+            "dark": "{color.aqua.400}"
           }
         },
         "default": {
           "$type": "color",
           "$value": "{color.aqua.500}",
           "$modes": {
-            "blue-light": "{color.aqua.500}",
-            "blue-dark": "{color.aqua.500}",
-            "teal-light": "{color.aqua.500}",
-            "teal-dark": "{color.aqua.500}"
+            "light": "{color.aqua.500}",
+            "dark": "{color.aqua.500}"
           }
         },
         "weakest": {
           "$type": "color",
           "$value": "{color.aqua.100}",
           "$modes": {
-            "blue-light": "{color.aqua.100}",
-            "blue-dark": "{color.aqua.900}",
-            "teal-light": "{color.aqua.100}",
-            "teal-dark": "{color.aqua.900}"
+            "light": "{color.aqua.100}",
+            "dark": "{color.aqua.900}"
           }
         }
       },
@@ -390,30 +342,24 @@
           "$type": "color",
           "$value": "{color.slate.600}",
           "$modes": {
-            "blue-light": "{color.slate.600}",
-            "blue-dark": "{color.slate.400}",
-            "teal-light": "{color.slate.600}",
-            "teal-dark": "{color.slate.400}"
+            "light": "{color.slate.600}",
+            "dark": "{color.slate.400}"
           }
         },
         "default": {
           "$type": "color",
           "$value": "{color.slate.500}",
           "$modes": {
-            "blue-light": "{color.slate.500}",
-            "blue-dark": "{color.slate.500}",
-            "teal-light": "{color.slate.500}",
-            "teal-dark": "{color.slate.500}"
+            "light": "{color.slate.500}",
+            "dark": "{color.slate.500}"
           }
         },
         "weakest": {
           "$type": "color",
           "$value": "{color.slate.100}",
           "$modes": {
-            "blue-light": "{color.slate.100}",
-            "blue-dark": "{color.slate.900}",
-            "teal-light": "{color.slate.100}",
-            "teal-dark": "{color.slate.900}"
+            "light": "{color.slate.100}",
+            "dark": "{color.slate.900}"
           }
         }
       },
@@ -422,30 +368,24 @@
           "$type": "color",
           "$value": "{color.rose.600}",
           "$modes": {
-            "blue-light": "{color.rose.600}",
-            "blue-dark": "{color.rose.400}",
-            "teal-light": "{color.rose.600}",
-            "teal-dark": "{color.rose.400}"
+            "light": "{color.rose.600}",
+            "dark": "{color.rose.400}"
           }
         },
         "default": {
           "$type": "color",
           "$value": "{color.rose.500}",
           "$modes": {
-            "blue-light": "{color.rose.500}",
-            "blue-dark": "{color.rose.500}",
-            "teal-light": "{color.rose.500}",
-            "teal-dark": "{color.rose.500}"
+            "light": "{color.rose.500}",
+            "dark": "{color.rose.500}"
           }
         },
         "weakest": {
           "$type": "color",
           "$value": "{color.rose.100}",
           "$modes": {
-            "blue-light": "{color.rose.100}",
-            "blue-dark": "{color.rose.900}",
-            "teal-light": "{color.rose.100}",
-            "teal-dark": "{color.rose.900}"
+            "light": "{color.rose.100}",
+            "dark": "{color.rose.900}"
           }
         }
       },
@@ -454,30 +394,24 @@
           "$type": "color",
           "$value": "{color.olive.600}",
           "$modes": {
-            "blue-light": "{color.olive.600}",
-            "blue-dark": "{color.olive.400}",
-            "teal-light": "{color.olive.600}",
-            "teal-dark": "{color.olive.400}"
+            "light": "{color.olive.600}",
+            "dark": "{color.olive.400}"
           }
         },
         "default": {
           "$type": "color",
           "$value": "{color.olive.500}",
           "$modes": {
-            "blue-light": "{color.olive.500}",
-            "blue-dark": "{color.olive.500}",
-            "teal-light": "{color.olive.500}",
-            "teal-dark": "{color.olive.500}"
+            "light": "{color.olive.500}",
+            "dark": "{color.olive.500}"
           }
         },
         "weakest": {
           "$type": "color",
           "$value": "{color.olive.100}",
           "$modes": {
-            "blue-light": "{color.olive.100}",
-            "blue-dark": "{color.olive.900}",
-            "teal-light": "{color.olive.100}",
-            "teal-dark": "{color.olive.900}"
+            "light": "{color.olive.100}",
+            "dark": "{color.olive.900}"
           }
         }
       },
@@ -486,30 +420,24 @@
           "$type": "color",
           "$value": "{color.salmon.600}",
           "$modes": {
-            "blue-light": "{color.salmon.600}",
-            "blue-dark": "{color.salmon.400}",
-            "teal-light": "{color.salmon.600}",
-            "teal-dark": "{color.salmon.400}"
+            "light": "{color.salmon.600}",
+            "dark": "{color.salmon.400}"
           }
         },
         "default": {
           "$type": "color",
           "$value": "{color.salmon.500}",
           "$modes": {
-            "blue-light": "{color.salmon.500}",
-            "blue-dark": "{color.salmon.500}",
-            "teal-light": "{color.salmon.500}",
-            "teal-dark": "{color.salmon.500}"
+            "light": "{color.salmon.500}",
+            "dark": "{color.salmon.500}"
           }
         },
         "weakest": {
           "$type": "color",
           "$value": "{color.salmon.100}",
           "$modes": {
-            "blue-light": "{color.salmon.100}",
-            "blue-dark": "{color.salmon.900}",
-            "teal-light": "{color.salmon.100}",
-            "teal-dark": "{color.salmon.900}"
+            "light": "{color.salmon.100}",
+            "dark": "{color.salmon.900}"
           }
         }
       },
@@ -518,30 +446,24 @@
           "$type": "color",
           "$value": "{color.indigo.600}",
           "$modes": {
-            "blue-light": "{color.indigo.600}",
-            "blue-dark": "{color.indigo.400}",
-            "teal-light": "{color.indigo.600}",
-            "teal-dark": "{color.indigo.400}"
+            "light": "{color.indigo.600}",
+            "dark": "{color.indigo.400}"
           }
         },
         "default": {
           "$type": "color",
           "$value": "{color.indigo.500}",
           "$modes": {
-            "blue-light": "{color.indigo.500}",
-            "blue-dark": "{color.indigo.500}",
-            "teal-light": "{color.indigo.500}",
-            "teal-dark": "{color.indigo.500}"
+            "light": "{color.indigo.500}",
+            "dark": "{color.indigo.500}"
           }
         },
         "weakest": {
           "$type": "color",
           "$value": "{color.indigo.100}",
           "$modes": {
-            "blue-light": "{color.indigo.100}",
-            "blue-dark": "{color.indigo.900}",
-            "teal-light": "{color.indigo.100}",
-            "teal-dark": "{color.indigo.900}"
+            "light": "{color.indigo.100}",
+            "dark": "{color.indigo.900}"
           }
         }
       },
@@ -550,30 +472,24 @@
           "$type": "color",
           "$value": "{color.jade.600}",
           "$modes": {
-            "blue-light": "{color.jade.600}",
-            "blue-dark": "{color.jade.400}",
-            "teal-light": "{color.jade.600}",
-            "teal-dark": "{color.jade.400}"
+            "light": "{color.jade.600}",
+            "dark": "{color.jade.400}"
           }
         },
         "default": {
           "$type": "color",
           "$value": "{color.jade.500}",
           "$modes": {
-            "blue-light": "{color.jade.500}",
-            "blue-dark": "{color.jade.500}",
-            "teal-light": "{color.jade.500}",
-            "teal-dark": "{color.jade.500}"
+            "light": "{color.jade.500}",
+            "dark": "{color.jade.500}"
           }
         },
         "weakest": {
           "$type": "color",
           "$value": "{color.jade.100}",
           "$modes": {
-            "blue-light": "{color.jade.100}",
-            "blue-dark": "{color.jade.900}",
-            "teal-light": "{color.jade.100}",
-            "teal-dark": "{color.jade.900}"
+            "light": "{color.jade.100}",
+            "dark": "{color.jade.900}"
           }
         }
       },
@@ -582,30 +498,24 @@
           "$type": "color",
           "$value": "{color.citrine.600}",
           "$modes": {
-            "blue-light": "{color.citrine.600}",
-            "blue-dark": "{color.citrine.400}",
-            "teal-light": "{color.citrine.600}",
-            "teal-dark": "{color.citrine.400}"
+            "light": "{color.citrine.600}",
+            "dark": "{color.citrine.400}"
           }
         },
         "default": {
           "$type": "color",
           "$value": "{color.citrine.500}",
           "$modes": {
-            "blue-light": "{color.citrine.500}",
-            "blue-dark": "{color.citrine.500}",
-            "teal-light": "{color.citrine.500}",
-            "teal-dark": "{color.citrine.500}"
+            "light": "{color.citrine.500}",
+            "dark": "{color.citrine.500}"
           }
         },
         "weakest": {
           "$type": "color",
           "$value": "{color.citrine.100}",
           "$modes": {
-            "blue-light": "{color.citrine.100}",
-            "blue-dark": "{color.citrine.900}",
-            "teal-light": "{color.citrine.100}",
-            "teal-dark": "{color.citrine.900}"
+            "light": "{color.citrine.100}",
+            "dark": "{color.citrine.900}"
           }
         }
       },
@@ -614,30 +524,24 @@
           "$type": "color",
           "$value": "{color.autumn.600}",
           "$modes": {
-            "blue-light": "{color.autumn.600}",
-            "blue-dark": "{color.autumn.400}",
-            "teal-light": "{color.autumn.600}",
-            "teal-dark": "{color.autumn.400}"
+            "light": "{color.autumn.600}",
+            "dark": "{color.autumn.400}"
           }
         },
         "default": {
           "$type": "color",
           "$value": "{color.autumn.500}",
           "$modes": {
-            "blue-light": "{color.autumn.500}",
-            "blue-dark": "{color.autumn.500}",
-            "teal-light": "{color.autumn.500}",
-            "teal-dark": "{color.autumn.500}"
+            "light": "{color.autumn.500}",
+            "dark": "{color.autumn.500}"
           }
         },
         "weakest": {
           "$type": "color",
           "$value": "{color.autumn.100}",
           "$modes": {
-            "blue-light": "{color.autumn.100}",
-            "blue-dark": "{color.autumn.900}",
-            "teal-light": "{color.autumn.100}",
-            "teal-dark": "{color.autumn.900}"
+            "light": "{color.autumn.100}",
+            "dark": "{color.autumn.900}"
           }
         }
       },
@@ -646,30 +550,24 @@
           "$type": "color",
           "$value": "{color.lavender.600}",
           "$modes": {
-            "blue-light": "{color.lavender.600}",
-            "blue-dark": "{color.lavender.400}",
-            "teal-light": "{color.lavender.600}",
-            "teal-dark": "{color.lavender.400}"
+            "light": "{color.lavender.600}",
+            "dark": "{color.lavender.400}"
           }
         },
         "default": {
           "$type": "color",
           "$value": "{color.lavender.500}",
           "$modes": {
-            "blue-light": "{color.lavender.500}",
-            "blue-dark": "{color.lavender.500}",
-            "teal-light": "{color.lavender.500}",
-            "teal-dark": "{color.lavender.500}"
+            "light": "{color.lavender.500}",
+            "dark": "{color.lavender.500}"
           }
         },
         "weakest": {
           "$type": "color",
           "$value": "{color.lavender.100}",
           "$modes": {
-            "blue-light": "{color.lavender.100}",
-            "blue-dark": "{color.lavender.900}",
-            "teal-light": "{color.lavender.100}",
-            "teal-dark": "{color.lavender.900}"
+            "light": "{color.lavender.100}",
+            "dark": "{color.lavender.900}"
           }
         }
       },
@@ -678,30 +576,24 @@
           "$type": "color",
           "$value": "{color.ocean.600}",
           "$modes": {
-            "blue-light": "{color.ocean.600}",
-            "blue-dark": "{color.ocean.400}",
-            "teal-light": "{color.ocean.600}",
-            "teal-dark": "{color.ocean.400}"
+            "light": "{color.ocean.600}",
+            "dark": "{color.ocean.400}"
           }
         },
         "default": {
           "$type": "color",
           "$value": "{color.ocean.500}",
           "$modes": {
-            "blue-light": "{color.ocean.500}",
-            "blue-dark": "{color.ocean.500}",
-            "teal-light": "{color.ocean.500}",
-            "teal-dark": "{color.ocean.500}"
+            "light": "{color.ocean.500}",
+            "dark": "{color.ocean.500}"
           }
         },
         "weakest": {
           "$type": "color",
           "$value": "{color.ocean.100}",
           "$modes": {
-            "blue-light": "{color.ocean.100}",
-            "blue-dark": "{color.ocean.900}",
-            "teal-light": "{color.ocean.100}",
-            "teal-dark": "{color.ocean.900}"
+            "light": "{color.ocean.100}",
+            "dark": "{color.ocean.900}"
           }
         }
       },
@@ -710,30 +602,24 @@
           "$type": "color",
           "$value": "{color.smoke.600}",
           "$modes": {
-            "blue-light": "{color.smoke.600}",
-            "blue-dark": "{color.smoke.400}",
-            "teal-light": "{color.smoke.600}",
-            "teal-dark": "{color.smoke.400}"
+            "light": "{color.smoke.600}",
+            "dark": "{color.smoke.400}"
           }
         },
         "default": {
           "$type": "color",
           "$value": "{color.smoke.500}",
           "$modes": {
-            "blue-light": "{color.smoke.500}",
-            "blue-dark": "{color.smoke.500}",
-            "teal-light": "{color.smoke.500}",
-            "teal-dark": "{color.smoke.500}"
+            "light": "{color.smoke.500}",
+            "dark": "{color.smoke.500}"
           }
         },
         "weakest": {
           "$type": "color",
           "$value": "{color.smoke.100}",
           "$modes": {
-            "blue-light": "{color.smoke.100}",
-            "blue-dark": "{color.smoke.900}",
-            "teal-light": "{color.smoke.100}",
-            "teal-dark": "{color.smoke.900}"
+            "light": "{color.smoke.100}",
+            "dark": "{color.smoke.900}"
           }
         }
       },
@@ -742,30 +628,24 @@
           "$type": "color",
           "$value": "{color.fuchsia.600}",
           "$modes": {
-            "blue-light": "{color.fuchsia.600}",
-            "blue-dark": "{color.fuchsia.400}",
-            "teal-light": "{color.fuchsia.600}",
-            "teal-dark": "{color.fuchsia.400}"
+            "light": "{color.fuchsia.600}",
+            "dark": "{color.fuchsia.400}"
           }
         },
         "default": {
           "$type": "color",
           "$value": "{color.fuchsia.500}",
           "$modes": {
-            "blue-light": "{color.fuchsia.500}",
-            "blue-dark": "{color.fuchsia.500}",
-            "teal-light": "{color.fuchsia.500}",
-            "teal-dark": "{color.fuchsia.500}"
+            "light": "{color.fuchsia.500}",
+            "dark": "{color.fuchsia.500}"
           }
         },
         "weakest": {
           "$type": "color",
           "$value": "{color.fuchsia.100}",
           "$modes": {
-            "blue-light": "{color.fuchsia.100}",
-            "blue-dark": "{color.fuchsia.900}",
-            "teal-light": "{color.fuchsia.100}",
-            "teal-dark": "{color.fuchsia.900}"
+            "light": "{color.fuchsia.100}",
+            "dark": "{color.fuchsia.900}"
           }
         }
       },
@@ -774,30 +654,24 @@
           "$type": "color",
           "$value": "{color.lime.600}",
           "$modes": {
-            "blue-light": "{color.lime.600}",
-            "blue-dark": "{color.lime.400}",
-            "teal-light": "{color.lime.600}",
-            "teal-dark": "{color.lime.400}"
+            "light": "{color.lime.600}",
+            "dark": "{color.lime.400}"
           }
         },
         "default": {
           "$type": "color",
           "$value": "{color.lime.500}",
           "$modes": {
-            "blue-light": "{color.lime.500}",
-            "blue-dark": "{color.lime.500}",
-            "teal-light": "{color.lime.500}",
-            "teal-dark": "{color.lime.500}"
+            "light": "{color.lime.500}",
+            "dark": "{color.lime.500}"
           }
         },
         "weakest": {
           "$type": "color",
           "$value": "{color.lime.100}",
           "$modes": {
-            "blue-light": "{color.lime.100}",
-            "blue-dark": "{color.lime.900}",
-            "teal-light": "{color.lime.100}",
-            "teal-dark": "{color.lime.900}"
+            "light": "{color.lime.100}",
+            "dark": "{color.lime.900}"
           }
         }
       },
@@ -806,30 +680,24 @@
           "$type": "color",
           "$value": "{color.fur.600}",
           "$modes": {
-            "blue-light": "{color.fur.600}",
-            "blue-dark": "{color.fur.400}",
-            "teal-light": "{color.fur.600}",
-            "teal-dark": "{color.fur.400}"
+            "light": "{color.fur.600}",
+            "dark": "{color.fur.400}"
           }
         },
         "default": {
           "$type": "color",
           "$value": "{color.fur.500}",
           "$modes": {
-            "blue-light": "{color.fur.500}",
-            "blue-dark": "{color.fur.500}",
-            "teal-light": "{color.fur.500}",
-            "teal-dark": "{color.fur.500}"
+            "light": "{color.fur.500}",
+            "dark": "{color.fur.500}"
           }
         },
         "weakest": {
           "$type": "color",
           "$value": "{color.fur.100}",
           "$modes": {
-            "blue-light": "{color.fur.100}",
-            "blue-dark": "{color.fur.900}",
-            "teal-light": "{color.fur.100}",
-            "teal-dark": "{color.fur.900}"
+            "light": "{color.fur.100}",
+            "dark": "{color.fur.900}"
           }
         }
       },
@@ -838,30 +706,24 @@
           "$type": "color",
           "$value": "{color.violet.600}",
           "$modes": {
-            "blue-light": "{color.violet.600}",
-            "blue-dark": "{color.violet.400}",
-            "teal-light": "{color.violet.600}",
-            "teal-dark": "{color.violet.400}"
+            "light": "{color.violet.600}",
+            "dark": "{color.violet.400}"
           }
         },
         "default": {
           "$type": "color",
           "$value": "{color.violet.500}",
           "$modes": {
-            "blue-light": "{color.violet.500}",
-            "blue-dark": "{color.violet.500}",
-            "teal-light": "{color.violet.500}",
-            "teal-dark": "{color.violet.500}"
+            "light": "{color.violet.500}",
+            "dark": "{color.violet.500}"
           }
         },
         "weakest": {
           "$type": "color",
           "$value": "{color.violet.100}",
           "$modes": {
-            "blue-light": "{color.violet.100}",
-            "blue-dark": "{color.violet.900}",
-            "teal-light": "{color.violet.100}",
-            "teal-dark": "{color.violet.900}"
+            "light": "{color.violet.100}",
+            "dark": "{color.violet.900}"
           }
         }
       },
@@ -870,30 +732,24 @@
           "$type": "color",
           "$value": "{color.forest.600}",
           "$modes": {
-            "blue-light": "{color.forest.600}",
-            "blue-dark": "{color.forest.400}",
-            "teal-light": "{color.forest.600}",
-            "teal-dark": "{color.forest.400}"
+            "light": "{color.forest.600}",
+            "dark": "{color.forest.400}"
           }
         },
         "default": {
           "$type": "color",
           "$value": "{color.forest.500}",
           "$modes": {
-            "blue-light": "{color.forest.500}",
-            "blue-dark": "{color.forest.500}",
-            "teal-light": "{color.forest.500}",
-            "teal-dark": "{color.forest.500}"
+            "light": "{color.forest.500}",
+            "dark": "{color.forest.500}"
           }
         },
         "weakest": {
           "$type": "color",
           "$value": "{color.forest.100}",
           "$modes": {
-            "blue-light": "{color.forest.100}",
-            "blue-dark": "{color.forest.900}",
-            "teal-light": "{color.forest.100}",
-            "teal-dark": "{color.forest.900}"
+            "light": "{color.forest.100}",
+            "dark": "{color.forest.900}"
           }
         }
       }
@@ -903,90 +759,72 @@
         "$type": "color",
         "$value": "{color.black}",
         "$modes": {
-          "blue-light": "{color.black}",
-          "blue-dark": "{color.white}",
-          "teal-light": "{color.black}",
-          "teal-dark": "{color.white}"
+          "light": "{color.black}",
+          "dark": "{color.white}"
         }
       },
       "primary-disabled": {
         "$type": "color",
         "$value": "{color.alpha.black.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.black.40a}",
-          "blue-dark": "{color.alpha.white.40a}",
-          "teal-light": "{color.alpha.black.40a}",
-          "teal-dark": "{color.alpha.white.40a}"
+          "light": "{color.alpha.black.40a}",
+          "dark": "{color.alpha.white.40a}"
         }
       },
       "secondary": {
         "$type": "color",
         "$value": "{color.gray.700}",
         "$modes": {
-          "blue-light": "{color.gray.700}",
-          "blue-dark": "{color.gray.300}",
-          "teal-light": "{color.gray.700}",
-          "teal-dark": "{color.gray.300}"
+          "light": "{color.gray.700}",
+          "dark": "{color.gray.300}"
         }
       },
       "secondary-disabled": {
         "$type": "color",
         "$value": "{color.alpha.gray.700.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.gray.700.40a}",
-          "blue-dark": "{color.alpha.gray.300.40a}",
-          "teal-light": "{color.alpha.gray.700.40a}",
-          "teal-dark": "{color.alpha.gray.300.40a}"
+          "light": "{color.alpha.gray.700.40a}",
+          "dark": "{color.alpha.gray.300.40a}"
         }
       },
       "primary-alt": {
         "$type": "color",
         "$value": "{color.white}",
         "$modes": {
-          "blue-light": "{color.white}",
-          "blue-dark": "{color.white}",
-          "teal-light": "{color.white}",
-          "teal-dark": "{color.white}"
+          "light": "{color.white}",
+          "dark": "{color.white}"
         }
       },
       "primary-alt-disabled": {
         "$type": "color",
         "$value": "{color.alpha.white.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.white.40a}",
-          "blue-dark": "{color.alpha.white.40a}",
-          "teal-light": "{color.alpha.white.40a}",
-          "teal-dark": "{color.alpha.white.40a}"
+          "light": "{color.alpha.white.40a}",
+          "dark": "{color.alpha.white.40a}"
         }
       },
       "hover": {
         "$type": "color",
         "$value": "{color.blue.600}",
         "$modes": {
-          "blue-light": "{color.blue.600}",
-          "blue-dark": "{color.blue.400}",
-          "teal-light": "{color.blue.600}",
-          "teal-dark": "{color.blue.400}"
+          "light": "{color.blue.600}",
+          "dark": "{color.blue.400}"
         }
       },
       "active": {
         "$type": "color",
         "$value": "{color.blue.700}",
         "$modes": {
-          "blue-light": "{color.blue.700}",
-          "blue-dark": "{color.blue.300}",
-          "teal-light": "{color.blue.700}",
-          "teal-dark": "{color.blue.300}"
+          "light": "{color.blue.700}",
+          "dark": "{color.blue.300}"
         }
       },
       "visited": {
         "$type": "color",
         "$value": "{color.purple.800}",
         "$modes": {
-          "blue-light": "{color.purple.800}",
-          "blue-dark": "{color.purple.200}",
-          "teal-light": "{color.purple.800}",
-          "teal-dark": "{color.purple.200}"
+          "light": "{color.purple.800}",
+          "dark": "{color.purple.200}"
         }
       }
     },
@@ -995,30 +833,24 @@
         "$type": "color",
         "$value": "{color.blue.500}",
         "$modes": {
-          "blue-light": "{color.blue.500}",
-          "blue-dark": "{color.blue.500}",
-          "teal-light": "{color.blue.500}",
-          "teal-dark": "{color.blue.500}"
+          "light": "{color.blue.500}",
+          "dark": "{color.blue.500}"
         }
       },
       "strong": {
         "$type": "color",
         "$value": "{color.blue.600}",
         "$modes": {
-          "blue-light": "{color.blue.600}",
-          "blue-dark": "{color.blue.400}",
-          "teal-light": "{color.blue.600}",
-          "teal-dark": "{color.blue.400}"
+          "light": "{color.blue.600}",
+          "dark": "{color.blue.400}"
         }
       },
       "weakest": {
         "$type": "color",
         "$value": "{color.blue.100}",
         "$modes": {
-          "blue-light": "{color.blue.100}",
-          "blue-dark": "{color.blue.900}",
-          "teal-light": "{color.blue.100}",
-          "teal-dark": "{color.blue.900}"
+          "light": "{color.blue.100}",
+          "dark": "{color.blue.900}"
         }
       }
     },
@@ -1027,70 +859,56 @@
         "$type": "color",
         "$value": "{color.red.600}",
         "$modes": {
-          "blue-light": "{color.red.600}",
-          "blue-dark": "{color.red.400}",
-          "teal-light": "{color.red.600}",
-          "teal-dark": "{color.red.400}"
+          "light": "{color.red.600}",
+          "dark": "{color.red.400}"
         }
       },
       "strong-disabled": {
         "$type": "color",
         "$value": "{color.alpha.red.600.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.red.600.40a}",
-          "blue-dark": "{color.alpha.red.400.40a}",
-          "teal-light": "{color.alpha.red.600.40a}",
-          "teal-dark": "{color.alpha.red.400.40a}"
+          "light": "{color.alpha.red.600.40a}",
+          "dark": "{color.alpha.red.400.40a}"
         }
       },
       "default": {
         "$type": "color",
         "$value": "{color.red.500}",
         "$modes": {
-          "blue-light": "{color.red.500}",
-          "blue-dark": "{color.red.500}",
-          "teal-light": "{color.red.500}",
-          "teal-dark": "{color.red.500}"
+          "light": "{color.red.500}",
+          "dark": "{color.red.500}"
         }
       },
       "disabled": {
         "$type": "color",
         "$value": "{color.alpha.red.500.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.red.500.40a}",
-          "blue-dark": "{color.alpha.red.500.40a}",
-          "teal-light": "{color.alpha.red.500.40a}",
-          "teal-dark": "{color.alpha.red.500.40a}"
+          "light": "{color.alpha.red.500.40a}",
+          "dark": "{color.alpha.red.500.40a}"
         }
       },
       "weakest": {
         "$type": "color",
         "$value": "{color.red.100}",
         "$modes": {
-          "blue-light": "{color.red.100}",
-          "blue-dark": "{color.red.900}",
-          "teal-light": "{color.red.100}",
-          "teal-dark": "{color.red.900}"
+          "light": "{color.red.100}",
+          "dark": "{color.red.900}"
         }
       },
       "action-hover": {
         "$type": "color",
         "$value": "{color.red.600}",
         "$modes": {
-          "blue-light": "{color.red.600}",
-          "blue-dark": "{color.red.600}",
-          "teal-light": "{color.red.600}",
-          "teal-dark": "{color.red.600}"
+          "light": "{color.red.600}",
+          "dark": "{color.red.600}"
         }
       },
       "action-active": {
         "$type": "color",
         "$value": "{color.red.800}",
         "$modes": {
-          "blue-light": "{color.red.800}",
-          "blue-dark": "{color.red.800}",
-          "teal-light": "{color.red.800}",
-          "teal-dark": "{color.red.800}"
+          "light": "{color.red.800}",
+          "dark": "{color.red.800}"
         }
       }
     },
@@ -1099,130 +917,104 @@
         "$type": "color",
         "$value": "{color.gray.600}",
         "$modes": {
-          "blue-light": "{color.gray.600}",
-          "blue-dark": "{color.gray.400}",
-          "teal-light": "{color.gray.600}",
-          "teal-dark": "{color.gray.400}"
+          "light": "{color.gray.600}",
+          "dark": "{color.gray.400}"
         }
       },
       "strong-disabled": {
         "$type": "color",
         "$value": "{color.alpha.gray.600.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.gray.600.40a}",
-          "blue-dark": "{color.alpha.gray.400.40a}",
-          "teal-light": "{color.alpha.gray.600.40a}",
-          "teal-dark": "{color.alpha.gray.400.40a}"
+          "light": "{color.alpha.gray.600.40a}",
+          "dark": "{color.alpha.gray.400.40a}"
         }
       },
       "default": {
         "$type": "color",
         "$value": "{color.gray.500}",
         "$modes": {
-          "blue-light": "{color.gray.500}",
-          "blue-dark": "{color.gray.500}",
-          "teal-light": "{color.gray.500}",
-          "teal-dark": "{color.gray.500}"
+          "light": "{color.gray.500}",
+          "dark": "{color.gray.500}"
         }
       },
       "disabled": {
         "$type": "color",
         "$value": "{color.alpha.gray.500.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.gray.500.40a}",
-          "blue-dark": "{color.alpha.gray.500.40a}",
-          "teal-light": "{color.alpha.gray.500.40a}",
-          "teal-dark": "{color.alpha.gray.500.40a}"
+          "light": "{color.alpha.gray.500.40a}",
+          "dark": "{color.alpha.gray.500.40a}"
         }
       },
       "readonly": {
         "$type": "color",
         "$value": "{color.alpha.gray.500.10a}",
         "$modes": {
-          "blue-light": "{color.alpha.gray.500.10a}",
-          "blue-dark": "{color.alpha.gray.500.10a}",
-          "teal-light": "{color.alpha.gray.500.10a}",
-          "teal-dark": "{color.alpha.gray.500.10a}"
+          "light": "{color.alpha.gray.500.10a}",
+          "dark": "{color.alpha.gray.500.10a}"
         }
       },
       "weak": {
         "$type": "color",
         "$value": "{color.gray.400}",
         "$modes": {
-          "blue-light": "{color.gray.400}",
-          "blue-dark": "{color.gray.600}",
-          "teal-light": "{color.gray.400}",
-          "teal-dark": "{color.gray.600}"
+          "light": "{color.gray.400}",
+          "dark": "{color.gray.600}"
         }
       },
       "weak-disabled": {
         "$type": "color",
         "$value": "{color.alpha.gray.400.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.gray.400.40a}",
-          "blue-dark": "{color.alpha.gray.600.40a}",
-          "teal-light": "{color.alpha.gray.400.40a}",
-          "teal-dark": "{color.alpha.gray.600.40a}"
+          "light": "{color.alpha.gray.400.40a}",
+          "dark": "{color.alpha.gray.600.40a}"
         }
       },
       "weak-readonly": {
         "$type": "color",
         "$value": "{color.alpha.gray.400.10a}",
         "$modes": {
-          "blue-light": "{color.alpha.gray.400.10a}",
-          "blue-dark": "{color.alpha.gray.600.10a}",
-          "teal-light": "{color.alpha.gray.400.10a}",
-          "teal-dark": "{color.alpha.gray.600.10a}"
+          "light": "{color.alpha.gray.400.10a}",
+          "dark": "{color.alpha.gray.600.10a}"
         }
       },
       "weaker": {
         "$type": "color",
         "$value": "{color.gray.300}",
         "$modes": {
-          "blue-light": "{color.gray.300}",
-          "blue-dark": "{color.gray.700}",
-          "teal-light": "{color.gray.300}",
-          "teal-dark": "{color.gray.700}"
+          "light": "{color.gray.300}",
+          "dark": "{color.gray.700}"
         }
       },
       "weaker-disabled": {
         "$type": "color",
         "$value": "{color.alpha.gray.300.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.gray.300.40a}",
-          "blue-dark": "{color.alpha.gray.700.40a}",
-          "teal-light": "{color.alpha.gray.300.40a}",
-          "teal-dark": "{color.alpha.gray.700.40a}"
+          "light": "{color.alpha.gray.300.40a}",
+          "dark": "{color.alpha.gray.700.40a}"
         }
       },
       "weakest": {
         "$type": "color",
         "$value": "{color.gray.200}",
         "$modes": {
-          "blue-light": "{color.gray.200}",
-          "blue-dark": "{color.gray.800}",
-          "teal-light": "{color.gray.200}",
-          "teal-dark": "{color.gray.800}"
+          "light": "{color.gray.200}",
+          "dark": "{color.gray.800}"
         }
       },
       "action-hover": {
         "$type": "color",
         "$value": "{color.gray.600}",
         "$modes": {
-          "blue-light": "{color.gray.600}",
-          "blue-dark": "{color.gray.600}",
-          "teal-light": "{color.gray.600}",
-          "teal-dark": "{color.gray.600}"
+          "light": "{color.gray.600}",
+          "dark": "{color.gray.600}"
         }
       },
       "action-active": {
         "$type": "color",
         "$value": "{color.gray.800}",
         "$modes": {
-          "blue-light": "{color.gray.800}",
-          "blue-dark": "{color.gray.800}",
-          "teal-light": "{color.gray.800}",
-          "teal-dark": "{color.gray.800}"
+          "light": "{color.gray.800}",
+          "dark": "{color.gray.800}"
         }
       }
     },
@@ -1231,70 +1023,56 @@
         "$type": "color",
         "$value": "{color.green.600}",
         "$modes": {
-          "blue-light": "{color.green.600}",
-          "blue-dark": "{color.green.400}",
-          "teal-light": "{color.green.600}",
-          "teal-dark": "{color.green.400}"
+          "light": "{color.green.600}",
+          "dark": "{color.green.400}"
         }
       },
       "strong-disabled": {
         "$type": "color",
         "$value": "{color.alpha.green.600.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.green.600.40a}",
-          "blue-dark": "{color.alpha.green.400.40a}",
-          "teal-light": "{color.alpha.green.600.40a}",
-          "teal-dark": "{color.alpha.green.400.40a}"
+          "light": "{color.alpha.green.600.40a}",
+          "dark": "{color.alpha.green.400.40a}"
         }
       },
       "default": {
         "$type": "color",
         "$value": "{color.green.500}",
         "$modes": {
-          "blue-light": "{color.green.500}",
-          "blue-dark": "{color.green.500}",
-          "teal-light": "{color.green.500}",
-          "teal-dark": "{color.green.500}"
+          "light": "{color.green.500}",
+          "dark": "{color.green.500}"
         }
       },
       "disabled": {
         "$type": "color",
         "$value": "{color.alpha.green.500.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.green.500.40a}",
-          "blue-dark": "{color.alpha.green.500.40a}",
-          "teal-light": "{color.alpha.green.500.40a}",
-          "teal-dark": "{color.alpha.green.500.40a}"
+          "light": "{color.alpha.green.500.40a}",
+          "dark": "{color.alpha.green.500.40a}"
         }
       },
       "weakest": {
         "$type": "color",
         "$value": "{color.green.100}",
         "$modes": {
-          "blue-light": "{color.green.100}",
-          "blue-dark": "{color.green.900}",
-          "teal-light": "{color.green.100}",
-          "teal-dark": "{color.green.900}"
+          "light": "{color.green.100}",
+          "dark": "{color.green.900}"
         }
       },
       "action-hover": {
         "$type": "color",
         "$value": "{color.green.600}",
         "$modes": {
-          "blue-light": "{color.green.600}",
-          "blue-dark": "{color.green.600}",
-          "teal-light": "{color.green.600}",
-          "teal-dark": "{color.green.600}"
+          "light": "{color.green.600}",
+          "dark": "{color.green.600}"
         }
       },
       "action-active": {
         "$type": "color",
         "$value": "{color.green.800}",
         "$modes": {
-          "blue-light": "{color.green.800}",
-          "blue-dark": "{color.green.800}",
-          "teal-light": "{color.green.800}",
-          "teal-dark": "{color.green.800}"
+          "light": "{color.green.800}",
+          "dark": "{color.green.800}"
         }
       }
     },
@@ -1303,50 +1081,40 @@
         "$type": "color",
         "$value": "{color.alpha.black.10a}",
         "$modes": {
-          "blue-light": "{color.alpha.black.10a}",
-          "blue-dark": "{color.alpha.black.50a}",
-          "teal-light": "{color.alpha.black.10a}",
-          "teal-dark": "{color.alpha.black.50a}"
+          "light": "{color.alpha.black.10a}",
+          "dark": "{color.alpha.black.50a}"
         }
       },
       "200": {
         "$type": "color",
         "$value": "{color.alpha.black.10a}",
         "$modes": {
-          "blue-light": "{color.alpha.black.10a}",
-          "blue-dark": "{color.alpha.black.50a}",
-          "teal-light": "{color.alpha.black.10a}",
-          "teal-dark": "{color.alpha.black.50a}"
+          "light": "{color.alpha.black.10a}",
+          "dark": "{color.alpha.black.50a}"
         }
       },
       "300": {
         "$type": "color",
         "$value": "{color.alpha.black.20a}",
         "$modes": {
-          "blue-light": "{color.alpha.black.20a}",
-          "blue-dark": "{color.alpha.black.60a}",
-          "teal-light": "{color.alpha.black.20a}",
-          "teal-dark": "{color.alpha.black.60a}"
+          "light": "{color.alpha.black.20a}",
+          "dark": "{color.alpha.black.60a}"
         }
       },
       "400": {
         "$type": "color",
         "$value": "{color.alpha.black.20a}",
         "$modes": {
-          "blue-light": "{color.alpha.black.20a}",
-          "blue-dark": "{color.alpha.black.60a}",
-          "teal-light": "{color.alpha.black.20a}",
-          "teal-dark": "{color.alpha.black.60a}"
+          "light": "{color.alpha.black.20a}",
+          "dark": "{color.alpha.black.60a}"
         }
       },
       "500": {
         "$type": "color",
         "$value": "{color.alpha.black.30a}",
         "$modes": {
-          "blue-light": "{color.alpha.black.30a}",
-          "blue-dark": "{color.alpha.black.70a}",
-          "teal-light": "{color.alpha.black.30a}",
-          "teal-dark": "{color.alpha.black.70a}"
+          "light": "{color.alpha.black.30a}",
+          "dark": "{color.alpha.black.70a}"
         }
       }
     },
@@ -1355,70 +1123,56 @@
         "$type": "color",
         "$value": "{color.orange.600}",
         "$modes": {
-          "blue-light": "{color.orange.600}",
-          "blue-dark": "{color.orange.400}",
-          "teal-light": "{color.orange.600}",
-          "teal-dark": "{color.orange.400}"
+          "light": "{color.orange.600}",
+          "dark": "{color.orange.400}"
         }
       },
       "strong-disabled": {
         "$type": "color",
         "$value": "{color.alpha.orange.600.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.orange.600.40a}",
-          "blue-dark": "{color.alpha.orange.400.40a}",
-          "teal-light": "{color.alpha.orange.600.40a}",
-          "teal-dark": "{color.alpha.orange.400.40a}"
+          "light": "{color.alpha.orange.600.40a}",
+          "dark": "{color.alpha.orange.400.40a}"
         }
       },
       "default": {
         "$type": "color",
         "$value": "{color.orange.500}",
         "$modes": {
-          "blue-light": "{color.orange.500}",
-          "blue-dark": "{color.orange.500}",
-          "teal-light": "{color.orange.500}",
-          "teal-dark": "{color.orange.500}"
+          "light": "{color.orange.500}",
+          "dark": "{color.orange.500}"
         }
       },
       "disabled": {
         "$type": "color",
         "$value": "{color.alpha.orange.500.40a}",
         "$modes": {
-          "blue-light": "{color.alpha.orange.500.40a}",
-          "blue-dark": "{color.alpha.orange.500.40a}",
-          "teal-light": "{color.alpha.orange.500.40a}",
-          "teal-dark": "{color.alpha.orange.500.40a}"
+          "light": "{color.alpha.orange.500.40a}",
+          "dark": "{color.alpha.orange.500.40a}"
         }
       },
       "weakest": {
         "$type": "color",
         "$value": "{color.orange.100}",
         "$modes": {
-          "blue-light": "{color.orange.100}",
-          "blue-dark": "{color.orange.900}",
-          "teal-light": "{color.orange.100}",
-          "teal-dark": "{color.orange.900}"
+          "light": "{color.orange.100}",
+          "dark": "{color.orange.900}"
         }
       },
       "action-hover": {
         "$type": "color",
         "$value": "{color.orange.600}",
         "$modes": {
-          "blue-light": "{color.orange.600}",
-          "blue-dark": "{color.orange.600}",
-          "teal-light": "{color.orange.600}",
-          "teal-dark": "{color.orange.600}"
+          "light": "{color.orange.600}",
+          "dark": "{color.orange.600}"
         }
       },
       "action-active": {
         "$type": "color",
         "$value": "{color.orange.800}",
         "$modes": {
-          "blue-light": "{color.orange.800}",
-          "blue-dark": "{color.orange.800}",
-          "teal-light": "{color.orange.800}",
-          "teal-dark": "{color.orange.800}"
+          "light": "{color.orange.800}",
+          "dark": "{color.orange.800}"
         }
       }
     },
@@ -1427,30 +1181,24 @@
         "$type": "color",
         "$value": "{color.figma-only.jp-morgan.brown}",
         "$modes": {
-          "blue-light": "{color.figma-only.jp-morgan.brown}",
-          "blue-dark": "{color.white}",
-          "teal-light": "{color.figma-only.jp-morgan.brown}",
-          "teal-dark": "{color.white}"
+          "light": "{color.figma-only.jp-morgan.brown}",
+          "dark": "{color.white}"
         }
       },
       "chase": {
         "$type": "color",
         "$value": "{color.figma-only.chase.black}",
         "$modes": {
-          "blue-light": "{color.figma-only.chase.black}",
-          "blue-dark": "{color.white}",
-          "teal-light": "{color.figma-only.chase.black}",
-          "teal-dark": "{color.white}"
+          "light": "{color.figma-only.chase.black}",
+          "dark": "{color.white}"
         }
       },
       "chase-symbol": {
         "$type": "color",
         "$value": "{color.figma-only.chase.blue}",
         "$modes": {
-          "blue-light": "{color.figma-only.chase.blue}",
-          "blue-dark": "{color.white}",
-          "teal-light": "{color.figma-only.chase.blue}",
-          "teal-dark": "{color.white}"
+          "light": "{color.figma-only.chase.blue}",
+          "dark": "{color.white}"
         }
       }
     },
@@ -1458,10 +1206,8 @@
       "$type": "color",
       "$value": "{color.alpha.white.0a}",
       "$modes": {
-        "blue-light": "{color.alpha.white.0a}",
-        "blue-dark": "{color.alpha.black.0a}",
-        "teal-light": "{color.alpha.white.0a}",
-        "teal-dark": "{color.alpha.black.0a}"
+        "light": "{color.alpha.white.0a}",
+        "dark": "{color.alpha.black.0a}"
       }
     }
   }

From d15268e8cf83a1b4426727e58c6544250fb8b848 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Thu, 21 Nov 2024 16:51:44 +0000
Subject: [PATCH 13/35] Fix characteristics palette token

---
 .../tokens/characteristics/theme-next.json    | 818 +++++++++---------
 1 file changed, 409 insertions(+), 409 deletions(-)

diff --git a/packages/theme/tokens/characteristics/theme-next.json b/packages/theme/tokens/characteristics/theme-next.json
index 7379b6854f..0eaaccb3fe 100644
--- a/packages/theme/tokens/characteristics/theme-next.json
+++ b/packages/theme/tokens/characteristics/theme-next.json
@@ -2,752 +2,752 @@
   "accent": {
     "foreground": {
       "$type": "color",
-      "$value": "{palette-foreground.primary-alt}"
+      "$value": "{palette.foreground.primary-alt}"
     },
     "background": {
       "$type": "color",
-      "$value": "{palette-accent.default}"
+      "$value": "{palette.accent.default}"
     },
     "background-disabled": {
       "$type": "color",
-      "$value": "{palette-accent.disabled}"
+      "$value": "{palette.accent.disabled}"
     },
     "border": {
       "$type": "color",
-      "$value": "{palette-accent.default}"
+      "$value": "{palette.accent.default}"
     }
   },
   "actionable": {
     "accented": {
       "bold-foreground": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-foreground-hover": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-foreground-active": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-foreground-disabled": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt-disabled}"
+        "$value": "{palette.foreground.primary-alt-disabled}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-accent.default}"
+        "$value": "{palette.accent.default}"
       },
       "bold-background-hover": {
         "$type": "color",
-        "$value": "{palette-accent.action-hover}"
+        "$value": "{palette.accent.action-hover}"
       },
       "bold-background-active": {
         "$type": "color",
-        "$value": "{palette-accent.action-active}"
+        "$value": "{palette.accent.action-active}"
       },
       "bold-background-disabled": {
         "$type": "color",
-        "$value": "{palette-accent.disabled}"
+        "$value": "{palette.accent.disabled}"
       },
       "bold-border": {
         "$type": "color",
-        "$value": "{palette-accent.default}"
+        "$value": "{palette.accent.default}"
       },
       "bold-border-hover": {
         "$type": "color",
-        "$value": "{palette-accent.default}"
+        "$value": "{palette.accent.default}"
       },
       "bold-border-active": {
         "$type": "color",
-        "$value": "{palette-accent.default}"
+        "$value": "{palette.accent.default}"
       },
       "bold-border-disabled": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       },
       "foreground": {
         "$type": "color",
-        "$value": "{palette-accent.strong}"
+        "$value": "{palette.accent.strong}"
       },
       "foreground-hover": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "foreground-active": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "foreground-disabled": {
         "$type": "color",
-        "$value": "{palette-accent.strong-disabled}"
+        "$value": "{palette.accent.strong-disabled}"
       },
       "background": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       },
       "background-hover": {
         "$type": "color",
-        "$value": "{palette-accent.action-hover}"
+        "$value": "{palette.accent.action-hover}"
       },
       "background-active": {
         "$type": "color",
-        "$value": "{palette-accent.action-active}"
+        "$value": "{palette.accent.action-active}"
       },
       "background-disabled": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       },
       "border": {
         "$type": "color",
-        "$value": "{palette-accent.default}"
+        "$value": "{palette.accent.default}"
       },
       "border-hover": {
         "$type": "color",
-        "$value": "{palette-accent.default}"
+        "$value": "{palette.accent.default}"
       },
       "border-active": {
         "$type": "color",
-        "$value": "{palette-accent.default}"
+        "$value": "{palette.accent.default}"
       },
       "border-disabled": {
         "$type": "color",
-        "$value": "{palette-accent.disabled}"
+        "$value": "{palette.accent.disabled}"
       },
       "subtle-foreground": {
         "$type": "color",
-        "$value": "{palette-accent.strong}"
+        "$value": "{palette.accent.strong}"
       },
       "subtle-foreground-hover": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "subtle-foreground-active": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "subtle-foreground-disabled": {
         "$type": "color",
-        "$value": "{palette-accent.strong-disabled}"
+        "$value": "{palette.accent.strong-disabled}"
       },
       "subtle-background": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       },
       "subtle-background-hover": {
         "$type": "color",
-        "$value": "{palette-accent.action-hover}"
+        "$value": "{palette.accent.action-hover}"
       },
       "subtle-background-active": {
         "$type": "color",
-        "$value": "{palette-accent.action-active}"
+        "$value": "{palette.accent.action-active}"
       },
       "subtle-background-disabled": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       },
       "subtle-border": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       },
       "subtle-border-hover": {
         "$type": "color",
-        "$value": "{palette-accent.default}"
+        "$value": "{palette.accent.default}"
       },
       "subtle-border-active": {
         "$type": "color",
-        "$value": "{palette-accent.default}"
+        "$value": "{palette.accent.default}"
       },
       "subtle-border-disabled": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       }
     },
     "bold-foreground": {
       "$type": "color",
-      "$value": "{palette-foreground.primary-alt}"
+      "$value": "{palette.foreground.primary-alt}"
     },
     "bold-foreground-hover": {
       "$type": "color",
-      "$value": "{palette-foreground.primary-alt}"
+      "$value": "{palette.foreground.primary-alt}"
     },
     "bold-foreground-active": {
       "$type": "color",
-      "$value": "{palette-foreground.primary-alt}"
+      "$value": "{palette.foreground.primary-alt}"
     },
     "bold-foreground-disabled": {
       "$type": "color",
-      "$value": "{palette-foreground.primary-alt-disabled}"
+      "$value": "{palette.foreground.primary-alt-disabled}"
     },
     "bold-background": {
       "$type": "color",
-      "$value": "{palette-neutral.default}"
+      "$value": "{palette.neutral.default}"
     },
     "bold-background-hover": {
       "$type": "color",
-      "$value": "{palette-neutral.action-hover}"
+      "$value": "{palette.neutral.action-hover}"
     },
     "bold-background-active": {
       "$type": "color",
-      "$value": "{palette-neutral.action-active}"
+      "$value": "{palette.neutral.action-active}"
     },
     "bold-background-disabled": {
       "$type": "color",
-      "$value": "{palette-neutral.disabled}"
+      "$value": "{palette.neutral.disabled}"
     },
     "bold-border": {
       "$type": "color",
-      "$value": "{palette-neutral.default}"
+      "$value": "{palette.neutral.default}"
     },
     "bold-border-hover": {
       "$type": "color",
-      "$value": "{palette-neutral.default}"
+      "$value": "{palette.neutral.default}"
     },
     "bold-border-active": {
       "$type": "color",
-      "$value": "{palette-neutral.default}"
+      "$value": "{palette.neutral.default}"
     },
     "bold-border-disabled": {
       "$type": "color",
-      "$value": "{palette-alpha.none}"
+      "$value": "{palette.alpha.none}"
     },
     "foreground": {
       "$type": "color",
-      "$value": "{palette-foreground.primary}"
+      "$value": "{palette.foreground.primary}"
     },
     "foreground-hover": {
       "$type": "color",
-      "$value": "{palette-foreground.primary-alt}"
+      "$value": "{palette.foreground.primary-alt}"
     },
     "foreground-active": {
       "$type": "color",
-      "$value": "{palette-foreground.primary-alt}"
+      "$value": "{palette.foreground.primary-alt}"
     },
     "foreground-disabled": {
       "$type": "color",
-      "$value": "{palette-foreground.primary-disabled}"
+      "$value": "{palette.foreground.primary-disabled}"
     },
     "background": {
       "$type": "color",
-      "$value": "{palette-alpha.none}"
+      "$value": "{palette.alpha.none}"
     },
     "background-hover": {
       "$type": "color",
-      "$value": "{palette-neutral.action-hover}"
+      "$value": "{palette.neutral.action-hover}"
     },
     "background-active": {
       "$type": "color",
-      "$value": "{palette-neutral.action-active}"
+      "$value": "{palette.neutral.action-active}"
     },
     "background-disabled": {
       "$type": "color",
-      "$value": "{palette-alpha.none}"
+      "$value": "{palette.alpha.none}"
     },
     "background-readonly": {
       "$type": "color",
-      "$value": "{palette-neutral.readonly}"
+      "$value": "{palette.neutral.readonly}"
     },
     "border": {
       "$type": "color",
-      "$value": "{palette-neutral.default}"
+      "$value": "{palette.neutral.default}"
     },
     "border-hover": {
       "$type": "color",
-      "$value": "{palette-neutral.default}"
+      "$value": "{palette.neutral.default}"
     },
     "border-active": {
       "$type": "color",
-      "$value": "{palette-neutral.default}"
+      "$value": "{palette.neutral.default}"
     },
     "border-disabled": {
       "$type": "color",
-      "$value": "{palette-neutral.disabled}"
+      "$value": "{palette.neutral.disabled}"
     },
     "subtle-foreground": {
       "$type": "color",
-      "$value": "{palette-foreground.primary}"
+      "$value": "{palette.foreground.primary}"
     },
     "subtle-foreground-hover": {
       "$type": "color",
-      "$value": "{palette-foreground.primary-alt}"
+      "$value": "{palette.foreground.primary-alt}"
     },
     "subtle-foreground-active": {
       "$type": "color",
-      "$value": "{palette-foreground.primary-alt}"
+      "$value": "{palette.foreground.primary-alt}"
     },
     "subtle-foreground-disabled": {
       "$type": "color",
-      "$value": "{palette-foreground.primary-disabled}"
+      "$value": "{palette.foreground.primary-disabled}"
     },
     "subtle-background": {
       "$type": "color",
-      "$value": "{palette-alpha.none}"
+      "$value": "{palette.alpha.none}"
     },
     "subtle-background-hover": {
       "$type": "color",
-      "$value": "{palette-neutral.action-hover}"
+      "$value": "{palette.neutral.action-hover}"
     },
     "subtle-background-active": {
       "$type": "color",
-      "$value": "{palette-neutral.action-active}"
+      "$value": "{palette.neutral.action-active}"
     },
     "subtle-background-disabled": {
       "$type": "color",
-      "$value": "{palette-alpha.none}"
+      "$value": "{palette.alpha.none}"
     },
     "subtle-border": {
       "$type": "color",
-      "$value": "{palette-alpha.none}"
+      "$value": "{palette.alpha.none}"
     },
     "subtle-border-hover": {
       "$type": "color",
-      "$value": "{palette-neutral.default}"
+      "$value": "{palette.neutral.default}"
     },
     "subtle-border-active": {
       "$type": "color",
-      "$value": "{palette-neutral.default}"
+      "$value": "{palette.neutral.default}"
     },
     "subtle-border-disabled": {
       "$type": "color",
-      "$value": "{palette-alpha.none}"
+      "$value": "{palette.alpha.none}"
     },
     "caution": {
       "bold-foreground": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-foreground-hover": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-foreground-active": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-foreground-disabled": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt-disabled}"
+        "$value": "{palette.foreground.primary-alt-disabled}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-warning.default}"
+        "$value": "{palette.warning.default}"
       },
       "bold-background-hover": {
         "$type": "color",
-        "$value": "{palette-warning.action-hover}"
+        "$value": "{palette.warning.action-hover}"
       },
       "bold-background-active": {
         "$type": "color",
-        "$value": "{palette-warning.action-active}"
+        "$value": "{palette.warning.action-active}"
       },
       "bold-background-disabled": {
         "$type": "color",
-        "$value": "{palette-warning.disabled}"
+        "$value": "{palette.warning.disabled}"
       },
       "bold-border": {
         "$type": "color",
-        "$value": "{palette-warning.default}"
+        "$value": "{palette.warning.default}"
       },
       "bold-border-hover": {
         "$type": "color",
-        "$value": "{palette-warning.default}"
+        "$value": "{palette.warning.default}"
       },
       "bold-border-active": {
         "$type": "color",
-        "$value": "{palette-warning.default}"
+        "$value": "{palette.warning.default}"
       },
       "bold-border-disabled": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       },
       "foreground": {
         "$type": "color",
-        "$value": "{palette-warning.strong}"
+        "$value": "{palette.warning.strong}"
       },
       "foreground-hover": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "foreground-active": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "foreground-disabled": {
         "$type": "color",
-        "$value": "{palette-warning.strong disabled}"
+        "$value": "{palette.warning.strong-disabled}"
       },
       "background": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       },
       "background-hover": {
         "$type": "color",
-        "$value": "{palette-warning.action-hover}"
+        "$value": "{palette.warning.action-hover}"
       },
       "background-active": {
         "$type": "color",
-        "$value": "{palette-warning.action-active}"
+        "$value": "{palette.warning.action-active}"
       },
       "background-disabled": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       },
       "border": {
         "$type": "color",
-        "$value": "{palette-warning.default}"
+        "$value": "{palette.warning.default}"
       },
       "border-hover": {
         "$type": "color",
-        "$value": "{palette-warning.default}"
+        "$value": "{palette.warning.default}"
       },
       "border-active": {
         "$type": "color",
-        "$value": "{palette-warning.default}"
+        "$value": "{palette.warning.default}"
       },
       "border-disabled": {
         "$type": "color",
-        "$value": "{palette-warning.disabled}"
+        "$value": "{palette.warning.disabled}"
       },
       "subtle-foreground": {
         "$type": "color",
-        "$value": "{palette-warning.strong}"
+        "$value": "{palette.warning.strong}"
       },
       "subtle-foreground-hover": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "subtle-foreground-active": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "subtle-foreground-disabled": {
         "$type": "color",
-        "$value": "{palette-warning.disabled}"
+        "$value": "{palette.warning.disabled}"
       },
       "subtle-background": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       },
       "subtle-background-hover": {
         "$type": "color",
-        "$value": "{palette-warning.action-hover}"
+        "$value": "{palette.warning.action-hover}"
       },
       "subtle-background-active": {
         "$type": "color",
-        "$value": "{palette-warning.action-active}"
+        "$value": "{palette.warning.action-active}"
       },
       "subtle-background-disabled": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       },
       "subtle-border": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       },
       "subtle-border-hover": {
         "$type": "color",
-        "$value": "{palette-warning.default}"
+        "$value": "{palette.warning.default}"
       },
       "subtle-border-active": {
         "$type": "color",
-        "$value": "{palette-warning.default}"
+        "$value": "{palette.warning.default}"
       },
       "subtle-border-disabled": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       }
     },
     "negative": {
       "bold-foreground": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-foreground-hover": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-foreground-active": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-foreground-disabled": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt-disabled}"
+        "$value": "{palette.foreground.primary-alt-disabled}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-negative.default}"
+        "$value": "{palette.negative.default}"
       },
       "bold-background-hover": {
         "$type": "color",
-        "$value": "{palette-negative.action-hover}"
+        "$value": "{palette.negative.action-hover}"
       },
       "bold-background-active": {
         "$type": "color",
-        "$value": "{palette-negative.action-active}"
+        "$value": "{palette.negative.action-active}"
       },
       "bold-background-disabled": {
         "$type": "color",
-        "$value": "{palette-negative.disabled}"
+        "$value": "{palette.negative.disabled}"
       },
       "bold-border": {
         "$type": "color",
-        "$value": "{palette-negative.default}"
+        "$value": "{palette.negative.default}"
       },
       "bold-border-hover": {
         "$type": "color",
-        "$value": "{palette-negative.default}"
+        "$value": "{palette.negative.default}"
       },
       "bold-border-active": {
         "$type": "color",
-        "$value": "{palette-negative.default}"
+        "$value": "{palette.negative.default}"
       },
       "bold-border-disabled": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       },
       "foreground": {
         "$type": "color",
-        "$value": "{palette-negative.strong}"
+        "$value": "{palette.negative.strong}"
       },
       "foreground-hover": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "foreground-active": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "foreground-disabled": {
         "$type": "color",
-        "$value": "{palette-negative.strong disabled}"
+        "$value": "{palette.negative.strong-disabled}"
       },
       "background": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       },
       "background-hover": {
         "$type": "color",
-        "$value": "{palette-negative.action-hover}"
+        "$value": "{palette.negative.action-hover}"
       },
       "background-active": {
         "$type": "color",
-        "$value": "{palette-negative.action-active}"
+        "$value": "{palette.negative.action-active}"
       },
       "background-disabled": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       },
       "border": {
         "$type": "color",
-        "$value": "{palette-negative.default}"
+        "$value": "{palette.negative.default}"
       },
       "border-hover": {
         "$type": "color",
-        "$value": "{palette-negative.default}"
+        "$value": "{palette.negative.default}"
       },
       "border-active": {
         "$type": "color",
-        "$value": "{palette-negative.default}"
+        "$value": "{palette.negative.default}"
       },
       "border-disabled": {
         "$type": "color",
-        "$value": "{palette-negative.disabled}"
+        "$value": "{palette.negative.disabled}"
       },
       "subtle-foreground": {
         "$type": "color",
-        "$value": "{palette-negative.strong}"
+        "$value": "{palette.negative.strong}"
       },
       "subtle-foreground-hover": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "subtle-foreground-active": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "subtle-foreground-disabled": {
         "$type": "color",
-        "$value": "{palette-negative.strong disabled}"
+        "$value": "{palette.negative.strong-disabled}"
       },
       "subtle-background": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       },
       "subtle-background-hover": {
         "$type": "color",
-        "$value": "{palette-negative.action-hover}"
+        "$value": "{palette.negative.action-hover}"
       },
       "subtle-background-active": {
         "$type": "color",
-        "$value": "{palette-negative.action-active}"
+        "$value": "{palette.negative.action-active}"
       },
       "subtle-background-disabled": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       },
       "subtle-border": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       },
       "subtle-border-hover": {
         "$type": "color",
-        "$value": "{palette-negative.default}"
+        "$value": "{palette.negative.default}"
       },
       "subtle-border-active": {
         "$type": "color",
-        "$value": "{palette-negative.default}"
+        "$value": "{palette.negative.default}"
       },
       "subtle-border-disabled": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       }
     },
     "positive": {
       "bold-foreground": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-foreground-hover": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-foreground-active": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-foreground-disabled": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt-disabled}"
+        "$value": "{palette.foreground.primary-alt-disabled}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-positive.default}"
+        "$value": "{palette.positive.default}"
       },
       "bold-background-hover": {
         "$type": "color",
-        "$value": "{palette-positive.action-hover}"
+        "$value": "{palette.positive.action-hover}"
       },
       "bold-background-active": {
         "$type": "color",
-        "$value": "{palette-positive.action-active}"
+        "$value": "{palette.positive.action-active}"
       },
       "bold-background-disabled": {
         "$type": "color",
-        "$value": "{palette-positive.disabled}"
+        "$value": "{palette.positive.disabled}"
       },
       "bold-border": {
         "$type": "color",
-        "$value": "{palette-positive.default}"
+        "$value": "{palette.positive.default}"
       },
       "bold-border-hover": {
         "$type": "color",
-        "$value": "{palette-positive.default}"
+        "$value": "{palette.positive.default}"
       },
       "bold-border-active": {
         "$type": "color",
-        "$value": "{palette-positive.default}"
+        "$value": "{palette.positive.default}"
       },
       "bold-border-disabled": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       },
       "foreground": {
         "$type": "color",
-        "$value": "{palette-positive.strong}"
+        "$value": "{palette.positive.strong}"
       },
       "foreground-hover": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "foreground-active": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "foreground-disabled": {
         "$type": "color",
-        "$value": "{palette-positive.strong disabled}"
+        "$value": "{palette.positive.strong-disabled}"
       },
       "background": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       },
       "background-hover": {
         "$type": "color",
-        "$value": "{palette-positive.action-hover}"
+        "$value": "{palette.positive.action-hover}"
       },
       "background-active": {
         "$type": "color",
-        "$value": "{palette-positive.action-active}"
+        "$value": "{palette.positive.action-active}"
       },
       "background-disabled": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       },
       "border": {
         "$type": "color",
-        "$value": "{palette-positive.default}"
+        "$value": "{palette.positive.default}"
       },
       "border-hover": {
         "$type": "color",
-        "$value": "{palette-positive.default}"
+        "$value": "{palette.positive.default}"
       },
       "border-active": {
         "$type": "color",
-        "$value": "{palette-positive.default}"
+        "$value": "{palette.positive.default}"
       },
       "border-disabled": {
         "$type": "color",
-        "$value": "{palette-positive.disabled}"
+        "$value": "{palette.positive.disabled}"
       },
       "subtle-foreground": {
         "$type": "color",
-        "$value": "{palette-positive.strong}"
+        "$value": "{palette.positive.strong}"
       },
       "subtle-foreground-hover": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "subtle-foreground-active": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "subtle-foreground-disabled": {
         "$type": "color",
-        "$value": "{palette-positive.strong disabled}"
+        "$value": "{palette.positive.strong-disabled}"
       },
       "subtle-background": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       },
       "subtle-background-hover": {
         "$type": "color",
-        "$value": "{palette-positive.action-hover}"
+        "$value": "{palette.positive.action-hover}"
       },
       "subtle-background-active": {
         "$type": "color",
-        "$value": "{palette-positive.action-active}"
+        "$value": "{palette.positive.action-active}"
       },
       "subtle-background-disabled": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       },
       "subtle-border": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       },
       "subtle-border-hover": {
         "$type": "color",
-        "$value": "{palette-positive.default}"
+        "$value": "{palette.positive.default}"
       },
       "subtle-border-active": {
         "$type": "color",
-        "$value": "{palette-positive.default}"
+        "$value": "{palette.positive.default}"
       },
       "subtle-border-disabled": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       }
     }
   },
@@ -755,441 +755,441 @@
     "1": {
       "subtle-foreground": {
         "$type": "color",
-        "$value": "{palette-categorical.1.strong}"
+        "$value": "{palette.categorical.1.strong}"
       },
       "subtle-background": {
         "$type": "color",
-        "$value": "{palette-categorical.1.weakest}"
+        "$value": "{palette.categorical.1.weakest}"
       },
       "subtle-border": {
         "$type": "color",
-        "$value": "{palette-categorical.1.default}"
+        "$value": "{palette.categorical.1.default}"
       },
       "bold-foreground": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-categorical.1.default}"
+        "$value": "{palette.categorical.1.default}"
       }
     },
     "2": {
       "subtle-foreground": {
         "$type": "color",
-        "$value": "{palette-categorical.2.strong}"
+        "$value": "{palette.categorical.2.strong}"
       },
       "subtle-background": {
         "$type": "color",
-        "$value": "{palette-categorical.2.weakest}"
+        "$value": "{palette.categorical.2.weakest}"
       },
       "subtle-border": {
         "$type": "color",
-        "$value": "{palette-categorical.2.default}"
+        "$value": "{palette.categorical.2.default}"
       },
       "bold-foreground": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-categorical.2.default}"
+        "$value": "{palette.categorical.2.default}"
       }
     },
     "3": {
       "subtle-foreground": {
         "$type": "color",
-        "$value": "{palette-categorical.3.strong}"
+        "$value": "{palette.categorical.3.strong}"
       },
       "subtle-background": {
         "$type": "color",
-        "$value": "{palette-categorical.3.weakest}"
+        "$value": "{palette.categorical.3.weakest}"
       },
       "subtle-border": {
         "$type": "color",
-        "$value": "{palette-categorical.3.default}"
+        "$value": "{palette.categorical.3.default}"
       },
       "bold-foreground": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-categorical.3.default}"
+        "$value": "{palette.categorical.3.default}"
       }
     },
     "4": {
       "subtle-foreground": {
         "$type": "color",
-        "$value": "{palette-categorical.4.strong}"
+        "$value": "{palette.categorical.4.strong}"
       },
       "subtle-background": {
         "$type": "color",
-        "$value": "{palette-categorical.4.weakest}"
+        "$value": "{palette.categorical.4.weakest}"
       },
       "subtle-border": {
         "$type": "color",
-        "$value": "{palette-categorical.4.default}"
+        "$value": "{palette.categorical.4.default}"
       },
       "bold-foreground": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-categorical.4.default}"
+        "$value": "{palette.categorical.4.default}"
       }
     },
     "5": {
       "subtle-foreground": {
         "$type": "color",
-        "$value": "{palette-categorical.5.strong}"
+        "$value": "{palette.categorical.5.strong}"
       },
       "subtle-background": {
         "$type": "color",
-        "$value": "{palette-categorical.5.weakest}"
+        "$value": "{palette.categorical.5.weakest}"
       },
       "subtle-border": {
         "$type": "color",
-        "$value": "{palette-categorical.5.default}"
+        "$value": "{palette.categorical.5.default}"
       },
       "bold-foreground": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-categorical.5.default}"
+        "$value": "{palette.categorical.5.default}"
       }
     },
     "6": {
       "subtle-foreground": {
         "$type": "color",
-        "$value": "{palette-categorical.6.strong}"
+        "$value": "{palette.categorical.6.strong}"
       },
       "subtle-background": {
         "$type": "color",
-        "$value": "{palette-categorical.6.weakest}"
+        "$value": "{palette.categorical.6.weakest}"
       },
       "subtle-border": {
         "$type": "color",
-        "$value": "{palette-categorical.6.default}"
+        "$value": "{palette.categorical.6.default}"
       },
       "bold-foreground": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-categorical.6.default}"
+        "$value": "{palette.categorical.6.default}"
       }
     },
     "7": {
       "subtle-foreground": {
         "$type": "color",
-        "$value": "{palette-categorical.7.strong}"
+        "$value": "{palette.categorical.7.strong}"
       },
       "subtle-background": {
         "$type": "color",
-        "$value": "{palette-categorical.7.weakest}"
+        "$value": "{palette.categorical.7.weakest}"
       },
       "subtle-border": {
         "$type": "color",
-        "$value": "{palette-categorical.7.default}"
+        "$value": "{palette.categorical.7.default}"
       },
       "bold-foreground": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-categorical.7.default}"
+        "$value": "{palette.categorical.7.default}"
       }
     },
     "8": {
       "subtle-foreground": {
         "$type": "color",
-        "$value": "{palette-categorical.8.strong}"
+        "$value": "{palette.categorical.8.strong}"
       },
       "subtle-background": {
         "$type": "color",
-        "$value": "{palette-categorical.8.weakest}"
+        "$value": "{palette.categorical.8.weakest}"
       },
       "subtle-border": {
         "$type": "color",
-        "$value": "{palette-categorical.8.default}"
+        "$value": "{palette.categorical.8.default}"
       },
       "bold-foreground": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-categorical.8.default}"
+        "$value": "{palette.categorical.8.default}"
       }
     },
     "9": {
       "subtle-foreground": {
         "$type": "color",
-        "$value": "{palette-categorical.9.strong}"
+        "$value": "{palette.categorical.9.strong}"
       },
       "subtle-background": {
         "$type": "color",
-        "$value": "{palette-categorical.9.weakest}"
+        "$value": "{palette.categorical.9.weakest}"
       },
       "subtle-border": {
         "$type": "color",
-        "$value": "{palette-categorical.9.default}"
+        "$value": "{palette.categorical.9.default}"
       },
       "bold-foreground": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-categorical.9.default}"
+        "$value": "{palette.categorical.9.default}"
       }
     },
     "10": {
       "subtle-foreground": {
         "$type": "color",
-        "$value": "{palette-categorical.10.strong}"
+        "$value": "{palette.categorical.10.strong}"
       },
       "subtle-background": {
         "$type": "color",
-        "$value": "{palette-categorical.10.weakest}"
+        "$value": "{palette.categorical.10.weakest}"
       },
       "subtle-border": {
         "$type": "color",
-        "$value": "{palette-categorical.10.default}"
+        "$value": "{palette.categorical.10.default}"
       },
       "bold-foreground": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-categorical.10.default}"
+        "$value": "{palette.categorical.10.default}"
       }
     },
     "11": {
       "subtle-foreground": {
         "$type": "color",
-        "$value": "{palette-categorical.11.strong}"
+        "$value": "{palette.categorical.11.strong}"
       },
       "subtle-background": {
         "$type": "color",
-        "$value": "{palette-categorical.11.weakest}"
+        "$value": "{palette.categorical.11.weakest}"
       },
       "subtle-border": {
         "$type": "color",
-        "$value": "{palette-categorical.11.default}"
+        "$value": "{palette.categorical.11.default}"
       },
       "bold-foreground": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-categorical.11.default}"
+        "$value": "{palette.categorical.11.default}"
       }
     },
     "12": {
       "subtle-foreground": {
         "$type": "color",
-        "$value": "{palette-categorical.12.strong}"
+        "$value": "{palette.categorical.12.strong}"
       },
       "subtle-background": {
         "$type": "color",
-        "$value": "{palette-categorical.12.weakest}"
+        "$value": "{palette.categorical.12.weakest}"
       },
       "subtle-border": {
         "$type": "color",
-        "$value": "{palette-categorical.12.default}"
+        "$value": "{palette.categorical.12.default}"
       },
       "bold-foreground": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-categorical.12.default}"
+        "$value": "{palette.categorical.12.default}"
       }
     },
     "13": {
       "subtle-foreground": {
         "$type": "color",
-        "$value": "{palette-categorical.13.strong}"
+        "$value": "{palette.categorical.13.strong}"
       },
       "subtle-background": {
         "$type": "color",
-        "$value": "{palette-categorical.13.weakest}"
+        "$value": "{palette.categorical.13.weakest}"
       },
       "subtle-border": {
         "$type": "color",
-        "$value": "{palette-categorical.13.default}"
+        "$value": "{palette.categorical.13.default}"
       },
       "bold-foreground": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-categorical.13.default}"
+        "$value": "{palette.categorical.13.default}"
       }
     },
     "14": {
       "subtle-foreground": {
         "$type": "color",
-        "$value": "{palette-categorical.14.strong}"
+        "$value": "{palette.categorical.14.strong}"
       },
       "subtle-background": {
         "$type": "color",
-        "$value": "{palette-categorical.14.weakest}"
+        "$value": "{palette.categorical.14.weakest}"
       },
       "subtle-border": {
         "$type": "color",
-        "$value": "{palette-categorical.14.default}"
+        "$value": "{palette.categorical.14.default}"
       },
       "bold-foreground": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-categorical.14.default}"
+        "$value": "{palette.categorical.14.default}"
       }
     },
     "15": {
       "subtle-foreground": {
         "$type": "color",
-        "$value": "{palette-categorical.15.strong}"
+        "$value": "{palette.categorical.15.strong}"
       },
       "subtle-background": {
         "$type": "color",
-        "$value": "{palette-categorical.15.weakest}"
+        "$value": "{palette.categorical.15.weakest}"
       },
       "subtle-border": {
         "$type": "color",
-        "$value": "{palette-categorical.15.default}"
+        "$value": "{palette.categorical.15.default}"
       },
       "bold-foreground": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-categorical.15.default}"
+        "$value": "{palette.categorical.15.default}"
       }
     },
     "16": {
       "subtle-foreground": {
         "$type": "color",
-        "$value": "{palette-categorical.16.strong}"
+        "$value": "{palette.categorical.16.strong}"
       },
       "subtle-background": {
         "$type": "color",
-        "$value": "{palette-categorical.16.weakest}"
+        "$value": "{palette.categorical.16.weakest}"
       },
       "subtle-border": {
         "$type": "color",
-        "$value": "{palette-categorical.16.default}"
+        "$value": "{palette.categorical.16.default}"
       },
       "bold-foreground": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-categorical.16.default}"
+        "$value": "{palette.categorical.16.default}"
       }
     },
     "17": {
       "subtle-foreground": {
         "$type": "color",
-        "$value": "{palette-categorical.17.strong}"
+        "$value": "{palette.categorical.17.strong}"
       },
       "subtle-background": {
         "$type": "color",
-        "$value": "{palette-categorical.17.weakest}"
+        "$value": "{palette.categorical.17.weakest}"
       },
       "subtle-border": {
         "$type": "color",
-        "$value": "{palette-categorical.17.default}"
+        "$value": "{palette.categorical.17.default}"
       },
       "bold-foreground": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-categorical.17.default}"
+        "$value": "{palette.categorical.17.default}"
       }
     },
     "18": {
       "subtle-foreground": {
         "$type": "color",
-        "$value": "{palette-categorical.18.strong}"
+        "$value": "{palette.categorical.18.strong}"
       },
       "subtle-background": {
         "$type": "color",
-        "$value": "{palette-categorical.18.weakest}"
+        "$value": "{palette.categorical.18.weakest}"
       },
       "subtle-border": {
         "$type": "color",
-        "$value": "{palette-categorical.18.default}"
+        "$value": "{palette.categorical.18.default}"
       },
       "bold-foreground": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-categorical.18.default}"
+        "$value": "{palette.categorical.18.default}"
       }
     },
     "19": {
       "subtle-foreground": {
         "$type": "color",
-        "$value": "{palette-categorical.19.strong}"
+        "$value": "{palette.categorical.19.strong}"
       },
       "subtle-background": {
         "$type": "color",
-        "$value": "{palette-categorical.19.weakest}"
+        "$value": "{palette.categorical.19.weakest}"
       },
       "subtle-border": {
         "$type": "color",
-        "$value": "{palette-categorical.19.default}"
+        "$value": "{palette.categorical.19.default}"
       },
       "bold-foreground": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-categorical.19.default}"
+        "$value": "{palette.categorical.19.default}"
       }
     },
     "20": {
       "subtle-foreground": {
         "$type": "color",
-        "$value": "{palette-categorical.20.strong}"
+        "$value": "{palette.categorical.20.strong}"
       },
       "subtle-background": {
         "$type": "color",
-        "$value": "{palette-categorical.20.weakest}"
+        "$value": "{palette.categorical.20.weakest}"
       },
       "subtle-border": {
         "$type": "color",
-        "$value": "{palette-categorical.20.default}"
+        "$value": "{palette.categorical.20.default}"
       },
       "bold-foreground": {
         "$type": "color",
-        "$value": "{palette-foreground.primary-alt}"
+        "$value": "{palette.foreground.primary-alt}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-categorical.20.default}"
+        "$value": "{palette.categorical.20.default}"
       }
     }
   },
@@ -1197,478 +1197,478 @@
     "primary": {
       "border": {
         "$type": "color",
-        "$value": "{palette-alpha.default}"
+        "$value": "{palette.alpha.default}"
       },
       "border-disabled": {
         "$type": "color",
-        "$value": "{palette-alpha.weaker}"
+        "$value": "{palette.alpha.weaker}"
       },
       "background": {
         "$type": "color",
-        "$value": "{palette-background.primary}"
+        "$value": "{palette.background.primary}"
       },
       "background-disabled": {
         "$type": "color",
-        "$value": "{palette-background.primary-disabled}"
+        "$value": "{palette.background.primary-disabled}"
       }
     },
     "secondary": {
       "border": {
         "$type": "color",
-        "$value": "{palette-alpha.default}"
+        "$value": "{palette.alpha.default}"
       },
       "border-disabled": {
         "$type": "color",
-        "$value": "{palette-alpha.weaker}"
+        "$value": "{palette.alpha.weaker}"
       },
       "background": {
         "$type": "color",
-        "$value": "{palette-background.secondary}"
+        "$value": "{palette.background.secondary}"
       },
       "background-disabled": {
         "$type": "color",
-        "$value": "{palette-background.secondary-disabled}"
+        "$value": "{palette.background.secondary-disabled}"
       }
     },
     "tertiary": {
       "border": {
         "$type": "color",
-        "$value": "{palette-alpha.default}"
+        "$value": "{palette.alpha.default}"
       },
       "border-disabled": {
         "$type": "color",
-        "$value": "{palette-alpha.weaker}"
+        "$value": "{palette.alpha.weaker}"
       },
       "background": {
         "$type": "color",
-        "$value": "{palette-background.tertiary}"
+        "$value": "{palette.background.tertiary}"
       },
       "background-disabled": {
         "$type": "color",
-        "$value": "{palette-background.tertiary-disabled}"
+        "$value": "{palette.background.tertiary-disabled}"
       }
     }
   },
   "content": {
     "primary-foreground": {
       "$type": "color",
-      "$value": "{palette-foreground.primary}"
+      "$value": "{palette.foreground.primary}"
     },
     "primary-foreground-disabled": {
       "$type": "color",
-      "$value": "{palette-foreground.primary-disabled}"
+      "$value": "{palette.foreground.primary-disabled}"
     },
     "secondary-foreground": {
       "$type": "color",
-      "$value": "{palette-foreground.secondary}"
+      "$value": "{palette.foreground.secondary}"
     },
     "secondary-foreground-disabled": {
       "$type": "color",
-      "$value": "{palette-foreground.secondary-disabled}"
+      "$value": "{palette.foreground.secondary-disabled}"
     },
     "bold-foreground": {
       "$type": "color",
-      "$value": "{palette-foreground.primary-alt}"
+      "$value": "{palette.foreground.primary-alt}"
     },
     "bold-foreground-disabled": {
       "$type": "color",
-      "$value": "{palette-foreground.primary-alt-disabled}"
+      "$value": "{palette.foreground.primary-alt-disabled}"
     },
     "foreground-hover": {
       "$type": "color",
-      "$value": "{palette-foreground.hover}"
+      "$value": "{palette.foreground.hover}"
     },
     "foreground-active": {
       "$type": "color",
-      "$value": "{palette-foreground.active}"
+      "$value": "{palette.foreground.active}"
     },
     "foreground-visited": {
       "$type": "color",
-      "$value": "{palette-foreground.visited}"
+      "$value": "{palette.foreground.visited}"
     },
     "foreground-highlight": {
       "$type": "color",
-      "$value": "{palette-accent.weaker}"
+      "$value": "{palette.accent.weaker}"
     }
   },
   "editable": {
     "border": {
       "$type": "color",
-      "$value": "{palette-neutral.default}"
+      "$value": "{palette.neutral.default}"
     },
     "border-hover": {
       "$type": "color",
-      "$value": "{palette-accent.default}"
+      "$value": "{palette.accent.default}"
     },
     "border-active": {
       "$type": "color",
-      "$value": "{palette-accent.stronger}"
+      "$value": "{palette.accent.stronger}"
     },
     "border-disabled": {
       "$type": "color",
-      "$value": "{palette-neutral.disabled}"
+      "$value": "{palette.neutral.disabled}"
     },
     "border-readonly": {
       "$type": "color",
-      "$value": "{palette-neutral.readonly}"
+      "$value": "{palette.neutral.readonly}"
     },
     "primary": {
       "background": {
         "$type": "color",
-        "$value": "{palette-background.primary}"
+        "$value": "{palette.background.primary}"
       },
       "background-hover": {
         "$type": "color",
-        "$value": "{palette-background.primary}"
+        "$value": "{palette.background.primary}"
       },
       "background-active": {
         "$type": "color",
-        "$value": "{palette-background.primary}"
+        "$value": "{palette.background.primary}"
       },
       "background-disabled": {
         "$type": "color",
-        "$value": "{palette-background.primary-disabled}"
+        "$value": "{palette.background.primary-disabled}"
       },
       "background-readonly": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       }
     },
     "secondary": {
       "background": {
         "$type": "color",
-        "$value": "{palette-background.secondary}"
+        "$value": "{palette.background.secondary}"
       },
       "background-hover": {
         "$type": "color",
-        "$value": "{palette-background.secondary}"
+        "$value": "{palette.background.secondary}"
       },
       "background-active": {
         "$type": "color",
-        "$value": "{palette-background.secondary}"
+        "$value": "{palette.background.secondary}"
       },
       "background-disabled": {
         "$type": "color",
-        "$value": "{palette-background.secondary-disabled}"
+        "$value": "{palette.background.secondary-disabled}"
       },
       "background-readonly": {
         "$type": "color",
-        "$value": "{palette-alpha.none}"
+        "$value": "{palette.alpha.none}"
       }
     }
   },
   "focused": {
-    "Outline": {
+    "outline": {
       "$type": "color",
-      "$value": "{palette-accent.stronger}"
+      "$value": "{palette.accent.stronger}"
     }
   },
   "navigable": {
-    "Indicator-hover": {
+    "indicator-hover": {
       "$type": "color",
-      "$value": "{palette-neutral.default}"
+      "$value": "{palette.neutral.default}"
     },
     "indicator-active": {
       "$type": "color",
-      "$value": "{palette-accent.default}"
+      "$value": "{palette.accent.default}"
     }
   },
   "overlayable": {
     "background": {
       "$type": "color",
-      "$value": "{palette-alpha.backdrop}"
+      "$value": "{palette.alpha.backdrop}"
     },
     "background-highlight": {
       "$type": "color",
-      "$value": "{palette-alpha.default}"
+      "$value": "{palette.alpha.default}"
     },
-    "rangeSelection": {
+    "range-selection": {
       "$type": "color",
-      "$value": "{palette-alpha.weak}"
+      "$value": "{palette.alpha.weak}"
     }
   },
   "selectable": {
     "foreground": {
       "$type": "color",
-      "$value": "{palette-neutral.strong}"
+      "$value": "{palette.neutral.strong}"
     },
     "foreground-hover": {
       "$type": "color",
-      "$value": "{palette-accent.weak}"
+      "$value": "{palette.accent.weak}"
     },
     "foreground-selected": {
       "$type": "color",
-      "$value": "{palette-accent.default}"
+      "$value": "{palette.accent.default}"
     },
     "foreground-disabled": {
       "$type": "color",
-      "$value": "{palette-neutral.strong-disabled}"
+      "$value": "{palette.neutral.strong-disabled}"
     },
-    "foreground-selectedDisabled": {
+    "foreground-selected-disabled": {
       "$type": "color",
-      "$value": "{palette-accent.disabled}"
+      "$value": "{palette.accent.disabled}"
     },
     "border": {
       "$type": "color",
-      "$value": "{palette-neutral.default}"
+      "$value": "{palette.neutral.default}"
     },
     "border-hover": {
       "$type": "color",
-      "$value": "{palette-accent.weak}"
+      "$value": "{palette.accent.weak}"
     },
     "border-selected": {
       "$type": "color",
-      "$value": "{palette-accent.default}"
+      "$value": "{palette.accent.default}"
     },
     "border-disabled": {
       "$type": "color",
-      "$value": "{palette-neutral.disabled}"
+      "$value": "{palette.neutral.disabled}"
     },
-    "border-selectedDisabled": {
+    "border-selected-disabled": {
       "$type": "color",
-      "$value": "{palette-accent.disabled}"
+      "$value": "{palette.accent.disabled}"
     },
     "border-readonly": {
       "$type": "color",
-      "$value": "{palette-neutral.readonly}"
+      "$value": "{palette.neutral.readonly}"
     },
     "background": {
       "$type": "color",
-      "$value": "{palette-alpha.none}"
+      "$value": "{palette.alpha.none}"
     },
     "background-hover": {
       "$type": "color",
-      "$value": "{palette-accent.weakest}"
+      "$value": "{palette.accent.weakest}"
     },
     "background-selected": {
       "$type": "color",
-      "$value": "{palette-accent.weaker}"
+      "$value": "{palette.accent.weaker}"
     },
     "background-disabled": {
       "$type": "color",
-      "$value": "{palette-alpha.none}"
+      "$value": "{palette.alpha.none}"
     },
-    "background-blurSelected": {
+    "background-blur-selected": {
       "$type": "color",
-      "$value": "{palette-neutral.weakest}"
+      "$value": "{palette.neutral.weakest}"
     },
-    "background-selectedDisabled": {
+    "background-selected-disabled": {
       "$type": "color",
-      "$value": "{palette-accent.weaker-disabled}"
+      "$value": "{palette.accent.weaker-disabled}"
     }
   },
   "separable": {
-    "Primary-border": {
+    "primary-border": {
       "$type": "color",
-      "$value": "{palette-alpha.strong}"
+      "$value": "{palette.alpha.strong}"
     },
     "secondary-border": {
       "$type": "color",
-      "$value": "{palette-alpha.default}"
+      "$value": "{palette.alpha.default}"
     },
     "tertiary-border": {
       "$type": "color",
-      "$value": "{palette-alpha.weak}"
+      "$value": "{palette.alpha.weak}"
     },
     "foreground": {
       "$type": "color",
-      "$value": "{palette-foreground.primary}"
+      "$value": "{palette.foreground.primary}"
     },
     "foreground-hover": {
       "$type": "color",
-      "$value": "{palette-foreground.primary}"
+      "$value": "{palette.foreground.primary}"
     },
     "foreground-active": {
       "$type": "color",
-      "$value": "{palette-foreground.primary-alt}"
+      "$value": "{palette.foreground.primary-alt}"
     },
     "background": {
       "$type": "color",
-      "$value": "{palette-alpha.none}"
+      "$value": "{palette.alpha.none}"
     },
     "background-hover": {
       "$type": "color",
-      "$value": "{palette-alpha.weak}"
+      "$value": "{palette.alpha.weak}"
     },
     "background-active": {
       "$type": "color",
-      "$value": "{palette-accent.default}"
+      "$value": "{palette.accent.default}"
     }
   },
   "status": {
     "error": {
       "foreground-decorative": {
         "$type": "color",
-        "$value": "{palette-negative.default}"
+        "$value": "{palette.negative.default}"
       },
       "foreground-informative": {
         "$type": "color",
-        "$value": "{palette-negative.strong}"
+        "$value": "{palette.negative.strong}"
       },
       "background": {
         "$type": "color",
-        "$value": "{palette-negative.weakest}"
+        "$value": "{palette.negative.weakest}"
       },
       "background-selected": {
         "$type": "color",
-        "$value": "{palette-negative.weakest}"
+        "$value": "{palette.negative.weakest}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-negative.default}"
+        "$value": "{palette.negative.default}"
       },
       "border": {
         "$type": "color",
-        "$value": "{palette-negative.default}"
+        "$value": "{palette.negative.default}"
       }
     },
     "info": {
       "foreground-decorative": {
         "$type": "color",
-        "$value": "{palette-info.default}"
+        "$value": "{palette.info.default}"
       },
       "foreground-informative": {
         "$type": "color",
-        "$value": "{palette-info.strong}"
+        "$value": "{palette.info.strong}"
       },
       "background": {
         "$type": "color",
-        "$value": "{palette-info.weakest}"
+        "$value": "{palette.info.weakest}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-info.default}"
+        "$value": "{palette.info.default}"
       },
       "border": {
         "$type": "color",
-        "$value": "{palette-info.default}"
+        "$value": "{palette.info.default}"
       }
     },
     "negative": {
       "foreground-decorative": {
         "$type": "color",
-        "$value": "{palette-negative.default}"
+        "$value": "{palette.negative.default}"
       },
       "foreground-informative": {
         "$type": "color",
-        "$value": "{palette-negative.strong}"
+        "$value": "{palette.negative.strong}"
       }
     },
     "positive": {
       "foreground-decorative": {
         "$type": "color",
-        "$value": "{palette-positive.default}"
+        "$value": "{palette.positive.default}"
       },
       "foreground-informative": {
         "$type": "color",
-        "$value": "{palette-positive.strong}"
+        "$value": "{palette.positive.strong}"
       }
     },
     "static": {
       "foreground": {
         "$type": "color",
-        "$value": "{palette-foreground.secondary}"
+        "$value": "{palette.foreground.secondary}"
       }
     },
     "success": {
       "foreground-decorative": {
         "$type": "color",
-        "$value": "{palette-positive.default}"
+        "$value": "{palette.positive.default}"
       },
       "foreground-informative": {
         "$type": "color",
-        "$value": "{palette-positive.strong}"
+        "$value": "{palette.positive.strong}"
       },
       "background": {
         "$type": "color",
-        "$value": "{palette-positive.weakest}"
+        "$value": "{palette.positive.weakest}"
       },
       "background-selected": {
         "$type": "color",
-        "$value": "{palette-positive.weakest}"
+        "$value": "{palette.positive.weakest}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-positive.default}"
+        "$value": "{palette.positive.default}"
       },
       "border": {
         "$type": "color",
-        "$value": "{palette-positive.default}"
+        "$value": "{palette.positive.default}"
       }
     },
     "warning": {
       "foreground-decorative": {
         "$type": "color",
-        "$value": "{palette-warning.default}"
+        "$value": "{palette.warning.default}"
       },
       "foreground-informative": {
         "$type": "color",
-        "$value": "{palette-warning.strong}"
+        "$value": "{palette.warning.strong}"
       },
       "background": {
         "$type": "color",
-        "$value": "{palette-warning.weakest}"
+        "$value": "{palette.warning.weakest}"
       },
       "background-selected": {
         "$type": "color",
-        "$value": "{palette-warning.weakest}"
+        "$value": "{palette.warning.weakest}"
       },
       "bold-background": {
         "$type": "color",
-        "$value": "{palette-warning.default}"
+        "$value": "{palette.warning.default}"
       },
       "border": {
         "$type": "color",
-        "$value": "{palette-warning.default}"
+        "$value": "{palette.warning.default}"
       }
     }
   },
   "target": {
     "border-hover": {
       "$type": "color",
-      "$value": "{palette-accent.default}"
+      "$value": "{palette.accent.default}"
     },
     "background-hover": {
       "$type": "color",
-      "$value": "{palette-accent.weakest}"
+      "$value": "{palette.accent.weakest}"
     }
   },
   "text": {
     "body": {
-      "fontWeight": {
+      "font-weight": {
         "default": {
           "$type": "number",
-          "$value": "{palette-fontWeight.regular}"
+          "$value": "{palette.font-weight.regular}"
         },
         "small": {
           "$type": "number",
-          "$value": "{palette-fontWeight.light}"
+          "$value": "{palette.font-weight.light}"
         },
         "strong": {
           "$type": "number",
-          "$value": "{palette-fontWeight.semiBold}"
+          "$value": "{palette.font-weight.semi-bold}"
         }
       }
     },
     "code": {
-      "fontWeight": {
+      "font-weight": {
         "$type": "number",
-        "$value": "{palette-fontWeight.regular}"
+        "$value": "{palette.font-weight.regular}"
       }
     },
     "notation": {
-      "fontWeight": {
+      "font-weight": {
         "default": {
           "$type": "number",
-          "$value": "{palette-fontWeight.semiBold}"
+          "$value": "{palette.font-weight.semi-bold}"
         },
         "small": {
           "$type": "number",
-          "$value": "{palette-fontWeight.regular}"
+          "$value": "{palette.font-weight.regular}"
         },
         "strong": {
           "$type": "number",
-          "$value": "{palette-fontWeight.bold}"
+          "$value": "{palette.font-weight.bold}"
         }
       }
     }
@@ -1676,32 +1676,32 @@
   "track": {
     "border": {
       "$type": "color",
-      "$value": "{palette-alpha.default}"
+      "$value": "{palette.alpha.default}"
     }
   },
-  "FIGMA ONLY": {
+  "figma-only": {
     "gradient-start": {
       "$type": "color",
-      "$value": "{palette-accent.none}"
+      "$value": "{palette.accent.none}"
     },
     "gradient-end": {
       "$type": "color",
-      "$value": "{palette-accent.default}"
+      "$value": "{palette.accent.default}"
     },
     "jpmorgan": {
       "foreground": {
         "$type": "color",
-        "$value": "{palette-FIGMA ONLY.jpmorgan}"
+        "$value": "{palette.figma-only.jpmorgan}"
       }
     },
     "chase": {
       "foreground-informative": {
         "$type": "color",
-        "$value": "{palette-FIGMA ONLY.chase}"
+        "$value": "{palette.figma-only.chase}"
       },
       "foreground-decorative": {
         "$type": "color",
-        "$value": "{palette-FIGMA ONLY.chase-symbol}"
+        "$value": "{palette.figma-only.chase-symbol}"
       }
     }
   }

From 0c73fdc828c43a900c9c208d6f3b46be5a973e78 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Mon, 25 Nov 2024 15:38:45 +0000
Subject: [PATCH 14/35] Exclude figma only token in platform filtes filter

---
 packages/theme/scripts/build-json.mjs | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/theme/scripts/build-json.mjs b/packages/theme/scripts/build-json.mjs
index 8978161335..35f04e06ca 100644
--- a/packages/theme/scripts/build-json.mjs
+++ b/packages/theme/scripts/build-json.mjs
@@ -55,8 +55,9 @@ function getStyleDictionaryConfig({ modes, density, accents }) {
             filter: async (token, options) => {
               //   console.log(token, options)
               return (
-                token.filePath.includes("colors-categorical.tokens") ||
-                token.filePath.includes("colors.tokens")
+                (token.filePath.includes("colors-categorical.tokens") ||
+                  token.filePath.includes("colors.tokens")) &&
+                token.attributes.type !== "figma-only"
               );
             },
           },
@@ -74,7 +75,7 @@ function getStyleDictionaryConfig({ modes, density, accents }) {
               return (
                 token.filePath.includes("colors-next.tokens") &&
                 token.attributes.category === "color" &&
-                !token.attributes.type === "alpha"
+                token.attributes.type !== "figma-only"
               );
             },
           },
@@ -92,7 +93,8 @@ function getStyleDictionaryConfig({ modes, density, accents }) {
               return (
                 token.filePath.includes("colors-next.tokens") &&
                 token.attributes.category === "color" &&
-                token.attributes.type === "alpha"
+                token.attributes.type === "alpha" &&
+                token.attributes.type !== "figma-only"
               );
             },
           },
@@ -130,7 +132,8 @@ function getStyleDictionaryConfig({ modes, density, accents }) {
                   //
                   token.path[1] === paletteNextType &&
                   // dirty way to match 'blue/teal-light/dark'
-                  Object.keys(token.$modes).every((x) => x.includes("-"))
+                  Object.keys(token.$modes).every((x) => x.includes("-")) &&
+                  token.attributes.type !== "figma-only"
                 );
               },
             };
@@ -161,7 +164,8 @@ function getStyleDictionaryConfig({ modes, density, accents }) {
                   //
                   token.path[1] === paletteNextType &&
                   // dirty way to NOT match 'blue/teal-light/dark'
-                  !Object.keys(token.$modes).every((x) => x.includes("-"))
+                  !Object.keys(token.$modes).every((x) => x.includes("-")) &&
+                  token.attributes.type !== "figma-only"
                 );
               },
             };

From 0017785c9529dda6ebe0b0741eeb3db7ba4c1a20 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Mon, 25 Nov 2024 15:38:49 +0000
Subject: [PATCH 15/35] Add readme

---
 packages/theme/README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/theme/README.md b/packages/theme/README.md
index 3b4b54e92f..2c4166887a 100644
--- a/packages/theme/README.md
+++ b/packages/theme/README.md
@@ -12,3 +12,7 @@ This is a regular package
 1. Copy output to corresponding `*.tokens.json` file
 1. Modify color tokens
    1. remove `categorical.` from , e.g. replace `"{color.categorical` to `"{color`
+
+TODOs
+
+- [ ] Custom value tranformer for `foundation/alpha-next.css` tokens, to achieve `rgba` syntax from `packages/theme/css/foundations/alpha-next.css`

From 6e5bc15739bc25f603d3df75e5267c7b1d8df50d Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Mon, 25 Nov 2024 16:32:49 +0000
Subject: [PATCH 16/35] Refactor files to standalone file

---
 packages/theme/scripts/build-json.mjs         | 137 ++----------------
 .../sd-utils/files/theme-next-tokens.mjs      | 113 +++++++++++++++
 .../scripts/sd-utils/files/theme-tokens.mjs   |  18 +++
 3 files changed, 141 insertions(+), 127 deletions(-)
 create mode 100644 packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
 create mode 100644 packages/theme/scripts/sd-utils/files/theme-tokens.mjs

diff --git a/packages/theme/scripts/build-json.mjs b/packages/theme/scripts/build-json.mjs
index 35f04e06ca..e577a2b720 100644
--- a/packages/theme/scripts/build-json.mjs
+++ b/packages/theme/scripts/build-json.mjs
@@ -1,4 +1,10 @@
 import { StyleDictionary } from "style-dictionary-utils";
+import {
+  foundationAlphaNextFile,
+  foundationColorsNextFile,
+  paletteNextFiles,
+} from "./sd-utils/files/theme-next-tokens.mjs";
+import { foundationCategoricalFile } from "./sd-utils/files/theme-tokens.mjs";
 import { cssMultiModes } from "./sd-utils/format/css-multi-modes.mjs";
 import { saltNameKebab } from "./sd-utils/transform/name-kebab.mjs";
 import { saltValueModes } from "./sd-utils/transform/value-modes.mjs";
@@ -43,133 +49,10 @@ function getStyleDictionaryConfig({ modes, density, accents }) {
           // "salt-ds/value/modes",
         ],
         files: [
-          {
-            format: "css/advanced",
-            destination: "foundation/color.css",
-            options: {
-              selector: ".salt-theme", // defaults to :root; set to false to disable
-              outputReferences: true,
-              usesDtcg: true,
-            },
-            // // Use filter to add different `selector` for mode/density/etc.
-            filter: async (token, options) => {
-              //   console.log(token, options)
-              return (
-                (token.filePath.includes("colors-categorical.tokens") ||
-                  token.filePath.includes("colors.tokens")) &&
-                token.attributes.type !== "figma-only"
-              );
-            },
-          },
-          {
-            format: "css/advanced",
-            destination: "foundation/color-next.css",
-            options: {
-              selector: ".salt-theme.salt-theme-next", // defaults to :root; set to false to disable
-              outputReferences: true,
-              usesDtcg: true,
-            },
-            // // Use filter to add different `selector` for mode/density/etc.
-            filter: async (token, options) => {
-              // console.log(token, options);
-              return (
-                token.filePath.includes("colors-next.tokens") &&
-                token.attributes.category === "color" &&
-                token.attributes.type !== "figma-only"
-              );
-            },
-          },
-          {
-            format: "css/advanced",
-            destination: "foundation/alpha-next.css",
-            options: {
-              selector: ".salt-theme.salt-theme-next", // defaults to :root; set to false to disable
-              outputReferences: true,
-              usesDtcg: true,
-            },
-            // // Use filter to add different `selector` for mode/density/etc.
-            filter: async (token, options) => {
-              // console.log(token, options);
-              return (
-                token.filePath.includes("colors-next.tokens") &&
-                token.attributes.category === "color" &&
-                token.attributes.type === "alpha" &&
-                token.attributes.type !== "figma-only"
-              );
-            },
-          },
-          // 2 sets of palette files set, one with 4 $modes ('blue/teal-light/dark'), one with 2 $modes ('light/dark')
-          ...paletteNextList.map((paletteNextType) => {
-            const accentModeRules = modes.reduce((prev, mode) => {
-              // TODO: restructure `./palette/` files to per palette family, so that only those needing 4 combination (accents * modes) will generate 4 block of CSS code?
-              // Or - should it be smarter when combining modes?
-              for (const accent of accents) {
-                prev.push({
-                  selector: `.salt-theme.salt-theme-next[data-mode="${mode}"][data-accent="${accent}"]`,
-                  modeIdentifier: `${accent}-${mode}`,
-                });
-              }
-              return prev;
-            }, []);
-
-            return {
-              format: "salt-ds/css/multi-modes",
-              destination: `palette/${paletteNextType}-next.css`,
-              options: {
-                outputReferences: true,
-                usesDtcg: true,
-                rules: accentModeRules,
-              },
-              // // Use filter to add different `selector` for mode/density/etc.
-              filter: async (token, options) => {
-                console.log("css/advanced filter", token); //palette-accent
-                //  For some reason, attributes "attribute/cti" is not attached to tokens in palette
-                return (
-                  // next
-                  token.filePath.includes("-next.tokens") &&
-                  // platte
-                  token.path[0] === "palette" && // or token.filePath.includes("/palette/") &&
-                  //
-                  token.path[1] === paletteNextType &&
-                  // dirty way to match 'blue/teal-light/dark'
-                  Object.keys(token.$modes).every((x) => x.includes("-")) &&
-                  token.attributes.type !== "figma-only"
-                );
-              },
-            };
-          }),
-          ...paletteNextList.map((paletteNextType) => {
-            const modeOnlyRules = modes.map((mode) => ({
-              selector: `.salt-theme.salt-theme-next[data-mode="${mode}"]`,
-              modeIdentifier: mode,
-            }));
-
-            return {
-              format: "salt-ds/css/multi-modes",
-              destination: `palette/${paletteNextType}-next.css`,
-              options: {
-                outputReferences: true,
-                usesDtcg: true,
-                rules: modeOnlyRules,
-              },
-              // // Use filter to add different `selector` for mode/density/etc.
-              filter: async (token, options) => {
-                console.log("css/advanced filter", token); //palette-accent
-                //  For some reason, attributes "attribute/cti" is not attached to tokens in palette
-                return (
-                  // next
-                  token.filePath.includes("-next.tokens") &&
-                  // platte
-                  token.path[0] === "palette" && // or token.filePath.includes("/palette/") &&
-                  //
-                  token.path[1] === paletteNextType &&
-                  // dirty way to NOT match 'blue/teal-light/dark'
-                  !Object.keys(token.$modes).every((x) => x.includes("-")) &&
-                  token.attributes.type !== "figma-only"
-                );
-              },
-            };
-          }),
+          foundationCategoricalFile,
+          foundationColorsNextFile,
+          foundationAlphaNextFile,
+          ...paletteNextFiles,
         ],
       },
     },
diff --git a/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs b/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
new file mode 100644
index 0000000000..f924857a90
--- /dev/null
+++ b/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
@@ -0,0 +1,113 @@
+export const foundationColorsNextFile = {
+  format: "css/advanced",
+  destination: "foundation/color-next.css",
+  options: {
+    selector: ".salt-theme.salt-theme-next", // defaults to :root; set to false to disable
+    outputReferences: true,
+    usesDtcg: true,
+  },
+  // // Use filter to add different `selector` for mode/density/etc.
+  filter: async (token, options) => {
+    // console.log(token, options);
+    return (
+      token.filePath.includes("colors-next.tokens") &&
+      token.attributes.category === "color" &&
+      token.attributes.type !== "figma-only"
+    );
+  },
+};
+
+export const foundationAlphaNextFile = {
+  format: "css/advanced",
+  destination: "foundation/alpha-next.css",
+  options: {
+    selector: ".salt-theme.salt-theme-next", // defaults to :root; set to false to disable
+    outputReferences: true,
+    usesDtcg: true,
+  },
+  // // Use filter to add different `selector` for mode/density/etc.
+  filter: async (token, options) => {
+    // console.log(token, options);
+    return (
+      token.filePath.includes("colors-next.tokens") &&
+      token.attributes.category === "color" &&
+      token.attributes.type === "alpha" &&
+      token.attributes.type !== "figma-only"
+    );
+  },
+};
+
+// 2 sets of palette files set, one with 4 $modes ('blue/teal-light/dark'), one with 2 $modes ('light/dark')
+export const paletteNextFiles = [
+  ...paletteNextList.map((paletteNextType) => {
+    const accentModeRules = modes.reduce((prev, mode) => {
+      // TODO: restructure `./palette/` files to per palette family, so that only those needing 4 combination (accents * modes) will generate 4 block of CSS code?
+      // Or - should it be smarter when combining modes?
+      for (const accent of accents) {
+        prev.push({
+          selector: `.salt-theme.salt-theme-next[data-mode="${mode}"][data-accent="${accent}"]`,
+          modeIdentifier: `${accent}-${mode}`,
+        });
+      }
+      return prev;
+    }, []);
+
+    return {
+      format: "salt-ds/css/multi-modes",
+      destination: `palette/${paletteNextType}-next.css`,
+      options: {
+        outputReferences: true,
+        usesDtcg: true,
+        rules: accentModeRules,
+      },
+      // // Use filter to add different `selector` for mode/density/etc.
+      filter: async (token, options) => {
+        console.log("css/advanced filter", token); //palette-accent
+        //  For some reason, attributes "attribute/cti" is not attached to tokens in palette
+        return (
+          // next
+          token.filePath.includes("-next.tokens") &&
+          // platte
+          token.path[0] === "palette" && // or token.filePath.includes("/palette/") &&
+          //
+          token.path[1] === paletteNextType &&
+          // dirty way to match 'blue/teal-light/dark'
+          Object.keys(token.$modes).every((x) => x.includes("-")) &&
+          token.attributes.type !== "figma-only"
+        );
+      },
+    };
+  }),
+  ...paletteNextList.map((paletteNextType) => {
+    const modeOnlyRules = modes.map((mode) => ({
+      selector: `.salt-theme.salt-theme-next[data-mode="${mode}"]`,
+      modeIdentifier: mode,
+    }));
+
+    return {
+      format: "salt-ds/css/multi-modes",
+      destination: `palette/${paletteNextType}-next.css`,
+      options: {
+        outputReferences: true,
+        usesDtcg: true,
+        rules: modeOnlyRules,
+      },
+      // // Use filter to add different `selector` for mode/density/etc.
+      filter: async (token, options) => {
+        console.log("css/advanced filter", token); //palette-accent
+        //  For some reason, attributes "attribute/cti" is not attached to tokens in palette
+        return (
+          // next
+          token.filePath.includes("-next.tokens") &&
+          // platte
+          token.path[0] === "palette" && // or token.filePath.includes("/palette/") &&
+          //
+          token.path[1] === paletteNextType &&
+          // dirty way to NOT match 'blue/teal-light/dark'
+          !Object.keys(token.$modes).every((x) => x.includes("-")) &&
+          token.attributes.type !== "figma-only"
+        );
+      },
+    };
+  }),
+];
diff --git a/packages/theme/scripts/sd-utils/files/theme-tokens.mjs b/packages/theme/scripts/sd-utils/files/theme-tokens.mjs
new file mode 100644
index 0000000000..1b9be7fedd
--- /dev/null
+++ b/packages/theme/scripts/sd-utils/files/theme-tokens.mjs
@@ -0,0 +1,18 @@
+export const foundationCategoricalFile = {
+  format: "css/advanced",
+  destination: "foundation/color.css",
+  options: {
+    selector: ".salt-theme", // defaults to :root; set to false to disable
+    outputReferences: true,
+    usesDtcg: true,
+  },
+  // // Use filter to add different `selector` for mode/density/etc.
+  filter: async (token, options) => {
+    //   console.log(token, options)
+    return (
+      (token.filePath.includes("colors-categorical.tokens") ||
+        token.filePath.includes("colors.tokens")) &&
+      token.attributes.type !== "figma-only"
+    );
+  },
+};

From f8cb876c120cac2c1a8806c4f64674fa7f90dd35 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Mon, 25 Nov 2024 17:21:20 +0000
Subject: [PATCH 17/35] Fix build after refactor

---
 packages/theme/scripts/build-json.mjs             | 15 ++-------------
 .../scripts/sd-utils/files/theme-next-tokens.mjs  | 13 ++++++++++++-
 .../scripts/sd-utils/format/css-multi-modes.mjs   |  2 +-
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/theme/scripts/build-json.mjs b/packages/theme/scripts/build-json.mjs
index e577a2b720..55ae61b4e2 100644
--- a/packages/theme/scripts/build-json.mjs
+++ b/packages/theme/scripts/build-json.mjs
@@ -2,7 +2,7 @@ import { StyleDictionary } from "style-dictionary-utils";
 import {
   foundationAlphaNextFile,
   foundationColorsNextFile,
-  paletteNextFiles,
+  getPaletteNextFiles,
 } from "./sd-utils/files/theme-next-tokens.mjs";
 import { foundationCategoricalFile } from "./sd-utils/files/theme-tokens.mjs";
 import { cssMultiModes } from "./sd-utils/format/css-multi-modes.mjs";
@@ -11,17 +11,6 @@ import { saltValueModes } from "./sd-utils/transform/value-modes.mjs";
 
 // TODO: add more styling options here, and theme vs theme next
 function getStyleDictionaryConfig({ modes, density, accents }) {
-  const paletteNextList = [
-    "accent",
-    "corner",
-    "negative",
-    "text",
-    "alpha",
-    "foreground",
-    "neutral",
-    "warning",
-  ];
-
   return {
     source: [
       //   "./tokens/foundation/test.tokens.json",
@@ -52,7 +41,7 @@ function getStyleDictionaryConfig({ modes, density, accents }) {
           foundationCategoricalFile,
           foundationColorsNextFile,
           foundationAlphaNextFile,
-          ...paletteNextFiles,
+          ...getPaletteNextFiles({ modes, density, accents }),
         ],
       },
     },
diff --git a/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs b/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
index f924857a90..ddeb5fa8a4 100644
--- a/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
+++ b/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
@@ -37,8 +37,19 @@ export const foundationAlphaNextFile = {
   },
 };
 
+const paletteNextList = [
+  "accent",
+  "corner",
+  "negative",
+  "text",
+  "alpha",
+  "foreground",
+  "neutral",
+  "warning",
+];
+
 // 2 sets of palette files set, one with 4 $modes ('blue/teal-light/dark'), one with 2 $modes ('light/dark')
-export const paletteNextFiles = [
+export const getPaletteNextFiles = ({ modes, density, accents }) => [
   ...paletteNextList.map((paletteNextType) => {
     const accentModeRules = modes.reduce((prev, mode) => {
       // TODO: restructure `./palette/` files to per palette family, so that only those needing 4 combination (accents * modes) will generate 4 block of CSS code?
diff --git a/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs b/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs
index 95619ff2f5..5651f1a475 100644
--- a/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs
+++ b/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs
@@ -19,7 +19,7 @@ function replaceModeSpecificValue(token, modeIdentifier) {
   }
 
   if (token.$modes?.[modeIdentifier]) {
-    console.log("replaceModeSpecificValue token.$modes", token);
+    // console.log("replaceModeSpecificValue token.$modes", token);
     token.$value = token.$modes?.[modeIdentifier];
   }
   return token;

From 1707cc15eeb756058c9c788bad6cdb5b3c1308da Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Mon, 25 Nov 2024 17:46:38 +0000
Subject: [PATCH 18/35] Adds characteristics files

---
 packages/theme/scripts/build-json.mjs         |  5 +-
 .../sd-utils/files/theme-next-tokens.mjs      | 58 +++++++++++++++++--
 .../scripts/sd-utils/files/theme-tokens.mjs   |  2 +-
 ...theme-next.json => theme-next.tokens.json} |  0
 .../theme/tokens/palette/text.tokens.json     | 26 +++++++++
 5 files changed, 85 insertions(+), 6 deletions(-)
 rename packages/theme/tokens/characteristics/{theme-next.json => theme-next.tokens.json} (100%)
 create mode 100644 packages/theme/tokens/palette/text.tokens.json

diff --git a/packages/theme/scripts/build-json.mjs b/packages/theme/scripts/build-json.mjs
index 55ae61b4e2..db2f47aabd 100644
--- a/packages/theme/scripts/build-json.mjs
+++ b/packages/theme/scripts/build-json.mjs
@@ -2,6 +2,7 @@ import { StyleDictionary } from "style-dictionary-utils";
 import {
   foundationAlphaNextFile,
   foundationColorsNextFile,
+  getCharacteristicsNextFiles,
   getPaletteNextFiles,
 } from "./sd-utils/files/theme-next-tokens.mjs";
 import { foundationCategoricalFile } from "./sd-utils/files/theme-tokens.mjs";
@@ -17,10 +18,11 @@ function getStyleDictionaryConfig({ modes, density, accents }) {
       "./tokens/foundation/**/*.tokens.json",
       // // Individual palette file output
 
+      "./tokens/palette/text.tokens.json",
       "./tokens/palette/palette-next.tokens.json",
       // // combined palette tokens into single file, handled by custom formatter
       // "./tokens/palette/**/*.tokens.json",
-      //   `./tokens/characteristics/*.tokens.json`,
+      "./tokens/characteristics/*.tokens.json",
       //   "tokens/globals/**/*.tokens.json",
     ],
     // usesDtcg: true,
@@ -42,6 +44,7 @@ function getStyleDictionaryConfig({ modes, density, accents }) {
           foundationColorsNextFile,
           foundationAlphaNextFile,
           ...getPaletteNextFiles({ modes, density, accents }),
+          ...getCharacteristicsNextFiles(),
         ],
       },
     },
diff --git a/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs b/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
index ddeb5fa8a4..b0a035c01a 100644
--- a/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
+++ b/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
@@ -1,6 +1,6 @@
 export const foundationColorsNextFile = {
   format: "css/advanced",
-  destination: "foundation/color-next.css",
+  destination: "foundations/color-next.css",
   options: {
     selector: ".salt-theme.salt-theme-next", // defaults to :root; set to false to disable
     outputReferences: true,
@@ -12,6 +12,8 @@ export const foundationColorsNextFile = {
     return (
       token.filePath.includes("colors-next.tokens") &&
       token.attributes.category === "color" &&
+      // alpha is covered in `foundationAlphaNextFile`
+      token.attributes.type !== "alpha" &&
       token.attributes.type !== "figma-only"
     );
   },
@@ -19,7 +21,7 @@ export const foundationColorsNextFile = {
 
 export const foundationAlphaNextFile = {
   format: "css/advanced",
-  destination: "foundation/alpha-next.css",
+  destination: "foundations/alpha-next.css",
   options: {
     selector: ".salt-theme.salt-theme-next", // defaults to :root; set to false to disable
     outputReferences: true,
@@ -73,7 +75,7 @@ export const getPaletteNextFiles = ({ modes, density, accents }) => [
       },
       // // Use filter to add different `selector` for mode/density/etc.
       filter: async (token, options) => {
-        console.log("css/advanced filter", token); //palette-accent
+        // console.log("css/advanced filter", token); //palette-accent
         //  For some reason, attributes "attribute/cti" is not attached to tokens in palette
         return (
           // next
@@ -105,7 +107,7 @@ export const getPaletteNextFiles = ({ modes, density, accents }) => [
       },
       // // Use filter to add different `selector` for mode/density/etc.
       filter: async (token, options) => {
-        console.log("css/advanced filter", token); //palette-accent
+        // console.log("css/advanced filter", token); //palette-accent
         //  For some reason, attributes "attribute/cti" is not attached to tokens in palette
         return (
           // next
@@ -122,3 +124,51 @@ export const getPaletteNextFiles = ({ modes, density, accents }) => [
     };
   }),
 ];
+
+const characteristicsNextList = [
+  "accent",
+  "editable",
+  "separable",
+  "actionable",
+  "focused",
+  "status",
+  "category",
+  "navigable",
+  "target",
+  "container",
+  "overlayable",
+  "text",
+  "content",
+  "selectable",
+  "track",
+];
+
+export const getCharacteristicsNextFiles = () =>
+  characteristicsNextList.map((charType) => {
+    return {
+      format: "css/advanced",
+      destination: `characteristics/${charType}-next.css`,
+      options: {
+        outputReferences: true,
+        usesDtcg: true,
+      },
+      filter: async (token, options) => {
+        console.log(
+          "getCharacteristicsNextFiles filter",
+          token.filePath,
+          token.path,
+          token.attributes,
+        );
+        return (
+          // next
+          token.filePath.includes("characteristics/theme-next.tokens") &&
+          //
+          token.attributes.category === charType
+
+          // Only deal with color for now
+          // token.$type === "color"
+          // token.attributes.type !== "figma-only"
+        );
+      },
+    };
+  });
diff --git a/packages/theme/scripts/sd-utils/files/theme-tokens.mjs b/packages/theme/scripts/sd-utils/files/theme-tokens.mjs
index 1b9be7fedd..e5456c518c 100644
--- a/packages/theme/scripts/sd-utils/files/theme-tokens.mjs
+++ b/packages/theme/scripts/sd-utils/files/theme-tokens.mjs
@@ -1,6 +1,6 @@
 export const foundationCategoricalFile = {
   format: "css/advanced",
-  destination: "foundation/color.css",
+  destination: "foundations/color.css",
   options: {
     selector: ".salt-theme", // defaults to :root; set to false to disable
     outputReferences: true,
diff --git a/packages/theme/tokens/characteristics/theme-next.json b/packages/theme/tokens/characteristics/theme-next.tokens.json
similarity index 100%
rename from packages/theme/tokens/characteristics/theme-next.json
rename to packages/theme/tokens/characteristics/theme-next.tokens.json
diff --git a/packages/theme/tokens/palette/text.tokens.json b/packages/theme/tokens/palette/text.tokens.json
new file mode 100644
index 0000000000..9f5eb5bca3
--- /dev/null
+++ b/packages/theme/tokens/palette/text.tokens.json
@@ -0,0 +1,26 @@
+{
+  "palette": {
+    "font-weight": {
+      "light": {
+        "$type": "number",
+        "$value": 300
+      },
+      "regular": {
+        "$type": "number",
+        "$value": 400
+      },
+      "medium": {
+        "$type": "number",
+        "$value": 500
+      },
+      "semi-bold": {
+        "$type": "number",
+        "$value": 600
+      },
+      "bold": {
+        "$type": "number",
+        "$value": 700
+      }
+    }
+  }
+}

From 02a881459e8539cc2b04d7e875814c3b800e80ca Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Tue, 26 Nov 2024 09:46:11 +0000
Subject: [PATCH 19/35] Move palette tokens into src folder

---
 .../theme/tokens/palette/{ => src}/blue-dark-next.tokens.json     | 0
 .../theme/tokens/palette/{ => src}/blue-light-next.tokens.json    | 0
 .../theme/tokens/palette/{ => src}/teal-dark-next.tokens.json     | 0
 .../theme/tokens/palette/{ => src}/teal-light-next.tokens.json    | 0
 4 files changed, 0 insertions(+), 0 deletions(-)
 rename packages/theme/tokens/palette/{ => src}/blue-dark-next.tokens.json (100%)
 rename packages/theme/tokens/palette/{ => src}/blue-light-next.tokens.json (100%)
 rename packages/theme/tokens/palette/{ => src}/teal-dark-next.tokens.json (100%)
 rename packages/theme/tokens/palette/{ => src}/teal-light-next.tokens.json (100%)

diff --git a/packages/theme/tokens/palette/blue-dark-next.tokens.json b/packages/theme/tokens/palette/src/blue-dark-next.tokens.json
similarity index 100%
rename from packages/theme/tokens/palette/blue-dark-next.tokens.json
rename to packages/theme/tokens/palette/src/blue-dark-next.tokens.json
diff --git a/packages/theme/tokens/palette/blue-light-next.tokens.json b/packages/theme/tokens/palette/src/blue-light-next.tokens.json
similarity index 100%
rename from packages/theme/tokens/palette/blue-light-next.tokens.json
rename to packages/theme/tokens/palette/src/blue-light-next.tokens.json
diff --git a/packages/theme/tokens/palette/teal-dark-next.tokens.json b/packages/theme/tokens/palette/src/teal-dark-next.tokens.json
similarity index 100%
rename from packages/theme/tokens/palette/teal-dark-next.tokens.json
rename to packages/theme/tokens/palette/src/teal-dark-next.tokens.json
diff --git a/packages/theme/tokens/palette/teal-light-next.tokens.json b/packages/theme/tokens/palette/src/teal-light-next.tokens.json
similarity index 100%
rename from packages/theme/tokens/palette/teal-light-next.tokens.json
rename to packages/theme/tokens/palette/src/teal-light-next.tokens.json

From 55952128f017003f311313cceb660ad5730b6ffd Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Tue, 26 Nov 2024 09:46:43 +0000
Subject: [PATCH 20/35] Fix script

---
 .../theme/scripts/helpers/combine-tokens-to-modes.mjs     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/theme/scripts/helpers/combine-tokens-to-modes.mjs b/packages/theme/scripts/helpers/combine-tokens-to-modes.mjs
index c1a31f9586..4fee7fb6a7 100644
--- a/packages/theme/scripts/helpers/combine-tokens-to-modes.mjs
+++ b/packages/theme/scripts/helpers/combine-tokens-to-modes.mjs
@@ -3,10 +3,10 @@ import { join } from "node:path";
 
 const files = {
   // first one would be the default $value
-  "blue-light": "../../tokens/palette/blue-light-next.tokens.json",
-  "blue-dark": "../../tokens/palette/blue-dark-next.tokens.json",
-  "teal-light": "../../tokens/palette/teal-light-next.tokens.json",
-  "teal-dark": "../../tokens/palette/teal-dark-next.tokens.json",
+  "blue-light": "../../tokens/palette/src/blue-light-next.tokens.json",
+  "blue-dark": "../../tokens/palette/src/blue-dark-next.tokens.json",
+  "teal-light": "../../tokens/palette/src/teal-light-next.tokens.json",
+  "teal-dark": "../../tokens/palette/src/teal-dark-next.tokens.json",
 };
 
 const outputFile = "../../tokens/palette/palette-next.tokens.json";

From c91e552c229eb78d10ee22d2241359adb09b02f7 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Tue, 26 Nov 2024 16:35:22 +0000
Subject: [PATCH 21/35] Add curve-next tokens

---
 packages/theme/scripts/build-json.mjs         |   57 +-
 .../helpers/combine-tokens-to-modes.mjs       |   35 +-
 .../sd-utils/files/theme-next-tokens.mjs      |   58 +-
 .../sd-utils/format/css-multi-modes.mjs       |    4 +-
 .../scripts/sd-utils/transform/name-kebab.mjs |    4 +-
 .../sd-utils/transform/value-modes.mjs        |   35 +
 .../foundation/foundations-next.tokens.json   | 1090 +++++++++++++++++
 .../foundation/src/high-next.tokens.json      |  472 +++++++
 .../foundation/src/low-next.tokens.json       |  472 +++++++
 .../foundation/src/medium-next.tokens.json    |  472 +++++++
 .../foundation/src/touch-next.tokens.json     |  472 +++++++
 11 files changed, 3116 insertions(+), 55 deletions(-)
 create mode 100644 packages/theme/tokens/foundation/foundations-next.tokens.json
 create mode 100644 packages/theme/tokens/foundation/src/high-next.tokens.json
 create mode 100644 packages/theme/tokens/foundation/src/low-next.tokens.json
 create mode 100644 packages/theme/tokens/foundation/src/medium-next.tokens.json
 create mode 100644 packages/theme/tokens/foundation/src/touch-next.tokens.json

diff --git a/packages/theme/scripts/build-json.mjs b/packages/theme/scripts/build-json.mjs
index db2f47aabd..1795cf7fce 100644
--- a/packages/theme/scripts/build-json.mjs
+++ b/packages/theme/scripts/build-json.mjs
@@ -3,19 +3,23 @@ import {
   foundationAlphaNextFile,
   foundationColorsNextFile,
   getCharacteristicsNextFiles,
+  getFoundationCurveNextFile,
   getPaletteNextFiles,
 } from "./sd-utils/files/theme-next-tokens.mjs";
 import { foundationCategoricalFile } from "./sd-utils/files/theme-tokens.mjs";
 import { cssMultiModes } from "./sd-utils/format/css-multi-modes.mjs";
 import { saltNameKebab } from "./sd-utils/transform/name-kebab.mjs";
-import { saltValueModes } from "./sd-utils/transform/value-modes.mjs";
+import {
+  saltValueModes,
+  saltValuePx,
+} from "./sd-utils/transform/value-modes.mjs";
 
 // TODO: add more styling options here, and theme vs theme next
-function getStyleDictionaryConfig({ modes, density, accents }) {
+function getStyleDictionaryConfig({ modes, densities, accents }) {
   return {
     source: [
       //   "./tokens/foundation/test.tokens.json",
-      "./tokens/foundation/**/*.tokens.json",
+      "./tokens/foundation/*.tokens.json", // not include foundation/src/*
       // // Individual palette file output
 
       "./tokens/palette/text.tokens.json",
@@ -33,6 +37,7 @@ function getStyleDictionaryConfig({ modes, density, accents }) {
         transforms: [
           "attribute/cti",
           "salt-ds/name/kebab", // Custom transform, see below
+          "salt-ds/value/px",
           // "name/kebab", // https://github.com/amzn/style-dictionary/blob/0fcf229f78e334a5c6bec55725fe92a8de97590c/lib/common/transforms.js#L320-L325
           // "dimension/pixelToRem",
           //   "color/hexAlpha", // style-dictionary-utils transform // doesn't work with $value for some reason
@@ -43,7 +48,8 @@ function getStyleDictionaryConfig({ modes, density, accents }) {
           foundationCategoricalFile,
           foundationColorsNextFile,
           foundationAlphaNextFile,
-          ...getPaletteNextFiles({ modes, density, accents }),
+          getFoundationCurveNextFile({ densities }),
+          ...getPaletteNextFiles({ modes, densities, accents }),
           ...getCharacteristicsNextFiles(),
         ],
       },
@@ -53,29 +59,28 @@ function getStyleDictionaryConfig({ modes, density, accents }) {
 
 const modes = ["light", "dark"];
 const accents = ["blue", "teal"];
-// for await (const mode of ["dark"]) {
-// , "md", "ld", "td"
-for await (const density of ["hd"]) {
-  const config = getStyleDictionaryConfig({ modes, density, accents });
+const densities = ["high", "medium", "low", "touch"];
 
-  const saltStyleDictionary = new StyleDictionary(
-    {},
-    { verbosity: "verbose" }, // for debug
-  );
-  // TODO: custom file header - https://styledictionary.com/reference/hooks/file-headers/
+const config = getStyleDictionaryConfig({ modes, densities, accents });
 
-  saltStyleDictionary.registerFormat({
-    name: "salt-ds/css/multi-modes",
-    format: cssMultiModes,
-  });
+const saltStyleDictionary = new StyleDictionary(
+  {},
+  { verbosity: "verbose" }, // for debug
+);
+// TODO: custom file header - https://styledictionary.com/reference/hooks/file-headers/
 
-  // TODO: find out why when `value` transform is provided, name is broken
-  // This is currently not used, but would be good to understand regardless
-  saltStyleDictionary.registerTransform(saltValueModes);
+saltStyleDictionary.registerFormat({
+  name: "salt-ds/css/multi-modes",
+  format: cssMultiModes,
+});
 
-  // Custom transform - https://styledictionary.com/reference/hooks/transforms/
-  saltStyleDictionary.registerTransform(saltNameKebab);
-  const sd = await saltStyleDictionary.extend(config);
-  sd.cleanAllPlatforms();
-  sd.buildAllPlatforms();
-}
+// TODO: find out why when `value` transform is provided, name is broken
+// This is currently not used, but would be good to understand regardless
+saltStyleDictionary.registerTransform(saltValueModes);
+saltStyleDictionary.registerTransform(saltValuePx);
+
+// Custom transform - https://styledictionary.com/reference/hooks/transforms/
+saltStyleDictionary.registerTransform(saltNameKebab);
+const sd = await saltStyleDictionary.extend(config);
+sd.cleanAllPlatforms();
+sd.buildAllPlatforms();
diff --git a/packages/theme/scripts/helpers/combine-tokens-to-modes.mjs b/packages/theme/scripts/helpers/combine-tokens-to-modes.mjs
index 4fee7fb6a7..888a8bee11 100644
--- a/packages/theme/scripts/helpers/combine-tokens-to-modes.mjs
+++ b/packages/theme/scripts/helpers/combine-tokens-to-modes.mjs
@@ -1,15 +1,25 @@
 import { readFileSync, writeFileSync } from "node:fs";
 import { join } from "node:path";
 
-const files = {
+const paletteModesFiles = {
   // first one would be the default $value
   "blue-light": "../../tokens/palette/src/blue-light-next.tokens.json",
   "blue-dark": "../../tokens/palette/src/blue-dark-next.tokens.json",
   "teal-light": "../../tokens/palette/src/teal-light-next.tokens.json",
   "teal-dark": "../../tokens/palette/src/teal-dark-next.tokens.json",
 };
+const outputPaletteFile = "../../tokens/palette/palette-next.tokens.json";
 
-const outputFile = "../../tokens/palette/palette-next.tokens.json";
+const foundationDensitiesFiles = {
+  // first one would be the default $value
+  md: "../../tokens/foundation/src/medium-next.tokens.json",
+  hd: "../../tokens/foundation/src/high-next.tokens.json",
+  ld: "../../tokens/foundation/src/low-next.tokens.json",
+  td: "../../tokens/foundation/src/touch-next.tokens.json",
+};
+
+const outputFoundationFile =
+  "../../tokens/foundation/foundations-next.tokens.json";
 
 /**
  *
@@ -83,14 +93,19 @@ function iterateToAddModes(tokenObj, modeName, modeTokenObj) {
   }
 }
 
-let finalToken = undefined;
-for (const [modeName, filePath] of Object.entries(files)) {
-  if (!finalToken) {
-    finalToken = readToken(filePath);
+function combineTokens(inputFiles, outputFile) {
+  let finalPaletteToken = undefined;
+  for (const [modeName, filePath] of Object.entries(inputFiles)) {
+    if (!finalPaletteToken) {
+      finalPaletteToken = readToken(filePath);
+    }
+    const modeObj = readToken(filePath);
+    iterateToAddModes(finalPaletteToken, modeName, modeObj);
   }
-  const modeObj = readToken(filePath);
-  iterateToAddModes(finalToken, modeName, modeObj);
+  // console.log(finalToken);
+
+  writeToken(finalPaletteToken, outputFile);
 }
-// console.log(finalToken);
 
-writeToken(finalToken, outputFile);
+combineTokens(paletteModesFiles, outputPaletteFile);
+combineTokens(foundationDensitiesFiles, outputFoundationFile);
diff --git a/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs b/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
index b0a035c01a..5e981231e4 100644
--- a/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
+++ b/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
@@ -39,6 +39,38 @@ export const foundationAlphaNextFile = {
   },
 };
 
+const densityMap = {
+  high: "hd",
+  medium: "md",
+  low: "ld",
+  touch: "td",
+};
+
+export const getFoundationCurveNextFile = ({ densities }) => {
+  const densitiesRules = densities.map((density) => ({
+    selector: `.salt-density-${density}`,
+    modeIdentifier: densityMap[density],
+  }));
+
+  return {
+    format: "salt-ds/css/multi-modes",
+    destination: "foundations/curve-next.css",
+    options: {
+      outputReferences: true,
+      usesDtcg: true,
+      rules: densitiesRules,
+    },
+    // // Use filter to add different `selector` for mode/density/etc.
+    filter: async (token, options) => {
+      // console.log(token, options);
+      return (
+        token.filePath.includes("foundations-next.tokens") &&
+        token.attributes.category === "curve"
+      );
+    },
+  };
+};
+
 const paletteNextList = [
   "accent",
   "corner",
@@ -51,7 +83,7 @@ const paletteNextList = [
 ];
 
 // 2 sets of palette files set, one with 4 $modes ('blue/teal-light/dark'), one with 2 $modes ('light/dark')
-export const getPaletteNextFiles = ({ modes, density, accents }) => [
+export const getPaletteNextFiles = ({ modes, densities, accents }) => [
   ...paletteNextList.map((paletteNextType) => {
     const accentModeRules = modes.reduce((prev, mode) => {
       // TODO: restructure `./palette/` files to per palette family, so that only those needing 4 combination (accents * modes) will generate 4 block of CSS code?
@@ -144,30 +176,28 @@ const characteristicsNextList = [
 ];
 
 export const getCharacteristicsNextFiles = () =>
-  characteristicsNextList.map((charType) => {
+  characteristicsNextList.map((characteristicFamily) => {
     return {
       format: "css/advanced",
-      destination: `characteristics/${charType}-next.css`,
+      destination: `characteristics/${characteristicFamily}-next.css`,
       options: {
+        selector: ".salt-theme.salt-theme-next",
         outputReferences: true,
         usesDtcg: true,
       },
       filter: async (token, options) => {
-        console.log(
-          "getCharacteristicsNextFiles filter",
-          token.filePath,
-          token.path,
-          token.attributes,
-        );
+        // console.log(
+        //   "getCharacteristicsNextFiles filter",
+        //   token.filePath,
+        //   token.path,
+        //   token.attributes,
+        // );
         return (
           // next
           token.filePath.includes("characteristics/theme-next.tokens") &&
           //
-          token.attributes.category === charType
-
-          // Only deal with color for now
-          // token.$type === "color"
-          // token.attributes.type !== "figma-only"
+          token.attributes.category === characteristicFamily &&
+          !token.path.includes("figma-only")
         );
       },
     };
diff --git a/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs b/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs
index 5651f1a475..4cb6ad50c3 100644
--- a/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs
+++ b/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs
@@ -50,8 +50,6 @@ export const cssMultiModes = async ({
   // get options
   const { outputReferences, formatting, usesDtcg } = options;
   // selector
-  const defaultSelector =
-    file?.options?.selector !== undefined ? file?.options?.selector : ":root";
   // get queries from file options
   const rules = file?.options?.rules || [
     {
@@ -113,7 +111,7 @@ export const cssMultiModes = async ({
     output.push(cssWithSelector);
   }
   // return prettified
-  return format(output.join("\n"), { parser: "css", printWidth: 500 });
+  return format(output.join("\n\n"), { parser: "css", printWidth: 500 });
 };
 
 /**
diff --git a/packages/theme/scripts/sd-utils/transform/name-kebab.mjs b/packages/theme/scripts/sd-utils/transform/name-kebab.mjs
index a4a061d509..3a446e979b 100644
--- a/packages/theme/scripts/sd-utils/transform/name-kebab.mjs
+++ b/packages/theme/scripts/sd-utils/transform/name-kebab.mjs
@@ -83,13 +83,13 @@ const saltKebab = (token, config) => {
     const name = removeDefaultSuffix(
       specialKebab([config.prefix].concat(alphaRemovedPath).join(" ")),
     );
-    console.log("salt-ds/name/kebab specialKebab name", name, token);
+    // console.log("salt-ds/name/kebab specialKebab name", name, token);
     return name;
   }
   const name = removeDefaultSuffix(
     specialKebab([config.prefix].concat(token.path).join(" ")),
   );
-  console.log("salt-ds/name/kebab name", name, token);
+  // console.log("salt-ds/name/kebab name", name, token);
   return name;
 };
 export const saltNameKebab = {
diff --git a/packages/theme/scripts/sd-utils/transform/value-modes.mjs b/packages/theme/scripts/sd-utils/transform/value-modes.mjs
index 6db94eb0ec..e359ba7628 100644
--- a/packages/theme/scripts/sd-utils/transform/value-modes.mjs
+++ b/packages/theme/scripts/sd-utils/transform/value-modes.mjs
@@ -1,3 +1,4 @@
+/** Not used */
 export const saltValueModes = {
   type: "value",
   // if `transitive` is not here, `transform` is not being called...
@@ -26,3 +27,37 @@ export const saltValueModes = {
     return token.$modes; // how to work out `.light` here?
   },
 };
+
+function isNumber(token, options) {
+  // console.log("salt-ds/value/px isNumber", JSON.stringify(token));
+  return typeof (options.usesDtcg ? token.$value : token.value) === "number";
+}
+
+export const saltValuePx = {
+  name: "salt-ds/value/px",
+  type: "value",
+  filter: (token, options) => isNumber(token, options),
+  transform: (token, _, options) => {
+    // this is a "hack"..? for those getting value from "salt-ds/css/multi-modes"
+    // value should be transformed on $modes as well
+    if (token.$modes) {
+      for (const mode of Object.keys(token.$modes)) {
+        const modeValue = token.$modes[mode];
+        if (isNumber(modeValue, options)) {
+          token.$modes[mode] = `${modeValue}px`;
+        }
+      }
+    }
+
+    const value = options.usesDtcg ? token.$value : token.value;
+    const parsedVal = Number.parseFloat(value);
+    if (Number.isNaN(parsedVal)) throwSizeError(token.name, value, "px");
+    // console.log(
+    //   "salt-ds/value/px transform",
+    //   "parsedVal",
+    //   parsedVal,
+    //   JSON.stringify(token),
+    // );
+    return `${parsedVal}px`;
+  },
+};
diff --git a/packages/theme/tokens/foundation/foundations-next.tokens.json b/packages/theme/tokens/foundation/foundations-next.tokens.json
new file mode 100644
index 0000000000..4ab12ee398
--- /dev/null
+++ b/packages/theme/tokens/foundation/foundations-next.tokens.json
@@ -0,0 +1,1090 @@
+{
+  "curve": {
+    "0": {
+      "$type": "number",
+      "$value": 0,
+      "$modes": {
+        "md": 0,
+        "hd": 0,
+        "ld": 0,
+        "td": 0
+      }
+    },
+    "50": {
+      "$type": "number",
+      "$value": 2,
+      "$modes": {
+        "md": 2,
+        "hd": 1,
+        "ld": 3,
+        "td": 4
+      }
+    },
+    "100": {
+      "$type": "number",
+      "$value": 4,
+      "$modes": {
+        "md": 4,
+        "hd": 2,
+        "ld": 6,
+        "td": 8
+      }
+    },
+    "150": {
+      "$type": "number",
+      "$value": 6,
+      "$modes": {
+        "md": 6,
+        "hd": 3,
+        "ld": 9,
+        "td": 12
+      }
+    },
+    "999": {
+      "$type": "number",
+      "$value": 999,
+      "$modes": {
+        "md": 999,
+        "hd": 999,
+        "ld": 999,
+        "td": 999
+      }
+    }
+  },
+  "text": {
+    "display1": {
+      "font-size": {
+        "$type": "number",
+        "$value": 68,
+        "$modes": {
+          "md": 68,
+          "hd": 54,
+          "ld": 84,
+          "td": 102
+        }
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 88,
+        "$modes": {
+          "md": 88,
+          "hd": 70,
+          "ld": 109,
+          "td": 133
+        }
+      }
+    },
+    "display2": {
+      "font-size": {
+        "$type": "number",
+        "$value": 54,
+        "$modes": {
+          "md": 54,
+          "hd": 42,
+          "ld": 68,
+          "td": 84
+        }
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 70,
+        "$modes": {
+          "md": 70,
+          "hd": 55,
+          "ld": 88,
+          "td": 109
+        }
+      }
+    },
+    "display3": {
+      "font-size": {
+        "$type": "number",
+        "$value": 42,
+        "$modes": {
+          "md": 42,
+          "hd": 32,
+          "ld": 54,
+          "td": 68
+        }
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 55,
+        "$modes": {
+          "md": 55,
+          "hd": 42,
+          "ld": 70,
+          "td": 88
+        }
+      }
+    },
+    "display4": {
+      "font-size": {
+        "$type": "number",
+        "$value": 32,
+        "$modes": {
+          "md": 32,
+          "hd": 24,
+          "ld": 42,
+          "td": 54
+        }
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 42,
+        "$modes": {
+          "md": 42,
+          "hd": 32,
+          "ld": 55,
+          "td": 70
+        }
+      }
+    },
+    "h1": {
+      "font-size": {
+        "$type": "number",
+        "$value": 24,
+        "$modes": {
+          "md": 24,
+          "hd": 18,
+          "ld": 32,
+          "td": 42
+        }
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 32,
+        "$modes": {
+          "md": 32,
+          "hd": 24,
+          "ld": 42,
+          "td": 55
+        }
+      }
+    },
+    "h2": {
+      "font-size": {
+        "$type": "number",
+        "$value": 18,
+        "$modes": {
+          "md": 18,
+          "hd": 14,
+          "ld": 24,
+          "td": 32
+        }
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 24,
+        "$modes": {
+          "md": 24,
+          "hd": 18,
+          "ld": 32,
+          "td": 42
+        }
+      }
+    },
+    "h3": {
+      "font-size": {
+        "$type": "number",
+        "$value": 14,
+        "$modes": {
+          "md": 14,
+          "hd": 12,
+          "ld": 18,
+          "td": 24
+        }
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 18,
+        "$modes": {
+          "md": 18,
+          "hd": 16,
+          "ld": 24,
+          "td": 32
+        }
+      }
+    },
+    "h4": {
+      "font-size": {
+        "$type": "number",
+        "$value": 12,
+        "$modes": {
+          "md": 12,
+          "hd": 11,
+          "ld": 14,
+          "td": 16
+        }
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 16,
+        "$modes": {
+          "md": 16,
+          "hd": 14,
+          "ld": 18,
+          "td": 20
+        }
+      }
+    },
+    "body": {
+      "font-size": {
+        "$type": "number",
+        "$value": 12,
+        "$modes": {
+          "md": 12,
+          "hd": 11,
+          "ld": 14,
+          "td": 16
+        }
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 16,
+        "$modes": {
+          "md": 16,
+          "hd": 14,
+          "ld": 18,
+          "td": 20
+        }
+      }
+    },
+    "label": {
+      "font-size": {
+        "$type": "number",
+        "$value": 11,
+        "$modes": {
+          "md": 11,
+          "hd": 10,
+          "ld": 12,
+          "td": 14
+        }
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 14,
+        "$modes": {
+          "md": 14,
+          "hd": 13,
+          "ld": 16,
+          "td": 18
+        }
+      }
+    },
+    "notation": {
+      "font-size": {
+        "$type": "number",
+        "$value": 10,
+        "$modes": {
+          "md": 10,
+          "hd": 8,
+          "ld": 12,
+          "td": 14
+        }
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 13,
+        "$modes": {
+          "md": 13,
+          "hd": 10,
+          "ld": 16,
+          "td": 18
+        }
+      }
+    },
+    "action": {
+      "font-size": {
+        "$type": "number",
+        "$value": 12,
+        "$modes": {
+          "md": 12,
+          "hd": 11,
+          "ld": 14,
+          "td": 16
+        }
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 16,
+        "$modes": {
+          "md": 16,
+          "hd": 14,
+          "ld": 18,
+          "td": 20
+        }
+      }
+    },
+    "code": {
+      "font-size": {
+        "$type": "number",
+        "$value": 12,
+        "$modes": {
+          "md": 12,
+          "hd": 11,
+          "ld": 14,
+          "td": 16
+        }
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 16,
+        "$modes": {
+          "md": 16,
+          "hd": 14,
+          "ld": 18,
+          "td": 20
+        }
+      }
+    }
+  },
+  "shadow": {
+    "100": {
+      "x-axis": {
+        "$type": "number",
+        "$value": 0,
+        "$modes": {
+          "md": 0,
+          "hd": 0,
+          "ld": 0,
+          "td": 0
+        }
+      },
+      "y-axis": {
+        "$type": "number",
+        "$value": 1,
+        "$modes": {
+          "md": 1,
+          "hd": 1,
+          "ld": 1,
+          "td": 1
+        }
+      },
+      "blur": {
+        "$type": "number",
+        "$value": 3,
+        "$modes": {
+          "md": 3,
+          "hd": 3,
+          "ld": 3,
+          "td": 3
+        }
+      }
+    },
+    "200": {
+      "x-axis": {
+        "$type": "number",
+        "$value": 0,
+        "$modes": {
+          "md": 0,
+          "hd": 0,
+          "ld": 0,
+          "td": 0
+        }
+      },
+      "y-axis": {
+        "$type": "number",
+        "$value": 2,
+        "$modes": {
+          "md": 2,
+          "hd": 2,
+          "ld": 2,
+          "td": 2
+        }
+      },
+      "blur": {
+        "$type": "number",
+        "$value": 4,
+        "$modes": {
+          "md": 4,
+          "hd": 4,
+          "ld": 4,
+          "td": 4
+        }
+      }
+    },
+    "300": {
+      "x-axis": {
+        "$type": "number",
+        "$value": 0,
+        "$modes": {
+          "md": 0,
+          "hd": 0,
+          "ld": 0,
+          "td": 0
+        }
+      },
+      "y-axis": {
+        "$type": "number",
+        "$value": 4,
+        "$modes": {
+          "md": 4,
+          "hd": 4,
+          "ld": 4,
+          "td": 4
+        }
+      },
+      "blur": {
+        "$type": "number",
+        "$value": 8,
+        "$modes": {
+          "md": 8,
+          "hd": 8,
+          "ld": 8,
+          "td": 8
+        }
+      }
+    },
+    "400": {
+      "x-axis": {
+        "$type": "number",
+        "$value": 0,
+        "$modes": {
+          "md": 0,
+          "hd": 0,
+          "ld": 0,
+          "td": 0
+        }
+      },
+      "y-axis": {
+        "$type": "number",
+        "$value": 6,
+        "$modes": {
+          "md": 6,
+          "hd": 6,
+          "ld": 6,
+          "td": 6
+        }
+      },
+      "blur": {
+        "$type": "number",
+        "$value": 10,
+        "$modes": {
+          "md": 10,
+          "hd": 10,
+          "ld": 10,
+          "td": 10
+        }
+      }
+    },
+    "500": {
+      "x-axis": {
+        "$type": "number",
+        "$value": 0,
+        "$modes": {
+          "md": 0,
+          "hd": 0,
+          "ld": 0,
+          "td": 0
+        }
+      },
+      "y-axis": {
+        "$type": "number",
+        "$value": 12,
+        "$modes": {
+          "md": 12,
+          "hd": 12,
+          "ld": 12,
+          "td": 12
+        }
+      },
+      "blur": {
+        "$type": "number",
+        "$value": 40,
+        "$modes": {
+          "md": 40,
+          "hd": 40,
+          "ld": 40,
+          "td": 40
+        }
+      }
+    }
+  },
+  "size": {
+    "adornment": {
+      "$type": "number",
+      "$value": 8,
+      "$modes": {
+        "md": 8,
+        "hd": 6,
+        "ld": 10,
+        "td": 12
+      }
+    },
+    "bar": {
+      "$type": "number",
+      "$value": 4,
+      "$modes": {
+        "md": 4,
+        "hd": 2,
+        "ld": 6,
+        "td": 8
+      }
+    },
+    "bar-small": {
+      "$type": "number",
+      "$value": 2,
+      "$modes": {
+        "md": 2,
+        "hd": 2,
+        "ld": 2,
+        "td": 2
+      }
+    },
+    "bar-strong": {
+      "$type": "number",
+      "$value": 8,
+      "$modes": {
+        "md": 8,
+        "hd": 4,
+        "ld": 12,
+        "td": 16
+      }
+    },
+    "base": {
+      "$type": "number",
+      "$value": 28,
+      "$modes": {
+        "md": 28,
+        "hd": 20,
+        "ld": 36,
+        "td": 44
+      }
+    },
+    "border": {
+      "$type": "number",
+      "$value": 1,
+      "$modes": {
+        "md": 1,
+        "hd": 1,
+        "ld": 1,
+        "td": 1
+      }
+    },
+    "border-strong": {
+      "$type": "number",
+      "$value": 2,
+      "$modes": {
+        "md": 2,
+        "hd": 2,
+        "ld": 2,
+        "td": 2
+      }
+    },
+    "border-stronger": {
+      "$type": "number",
+      "$value": 4,
+      "$modes": {
+        "md": 4,
+        "hd": 4,
+        "ld": 4,
+        "td": 4
+      }
+    },
+    "grid-status-indicator-size": {
+      "$type": "number",
+      "$value": 6,
+      "$modes": {
+        "md": 6,
+        "hd": 5,
+        "ld": 7,
+        "td": 9
+      }
+    },
+    "icon": {
+      "$type": "number",
+      "$value": 12,
+      "$modes": {
+        "md": 12,
+        "hd": 12,
+        "ld": 14,
+        "td": 16
+      }
+    },
+    "indicator": {
+      "$type": "number",
+      "$value": 3,
+      "$modes": {
+        "md": 3,
+        "hd": 2,
+        "ld": 4,
+        "td": 5
+      }
+    },
+    "modifier": {
+      "$type": "number",
+      "$value": 10,
+      "$modes": {
+        "md": 10,
+        "hd": 8,
+        "ld": 12,
+        "td": 14
+      }
+    },
+    "selectable": {
+      "$type": "number",
+      "$value": 14,
+      "$modes": {
+        "md": 14,
+        "hd": 12,
+        "ld": 16,
+        "td": 18
+      }
+    }
+  },
+  "spacing": {
+    "25": {
+      "$type": "number",
+      "$value": 2,
+      "$modes": {
+        "md": 2,
+        "hd": 1,
+        "ld": 3,
+        "td": 4
+      }
+    },
+    "50": {
+      "$type": "number",
+      "$value": 4,
+      "$modes": {
+        "md": 4,
+        "hd": 2,
+        "ld": 6,
+        "td": 8
+      }
+    },
+    "75": {
+      "$type": "number",
+      "$value": 6,
+      "$modes": {
+        "md": 6,
+        "hd": 3,
+        "ld": 9,
+        "td": 12
+      }
+    },
+    "100": {
+      "$type": "number",
+      "$value": 8,
+      "$modes": {
+        "md": 8,
+        "hd": 4,
+        "ld": 12,
+        "td": 16
+      }
+    },
+    "150": {
+      "$type": "number",
+      "$value": 12,
+      "$modes": {
+        "md": 12,
+        "hd": 6,
+        "ld": 18,
+        "td": 24
+      }
+    },
+    "200": {
+      "$type": "number",
+      "$value": 16,
+      "$modes": {
+        "md": 16,
+        "hd": 8,
+        "ld": 24,
+        "td": 32
+      }
+    },
+    "250": {
+      "$type": "number",
+      "$value": 20,
+      "$modes": {
+        "md": 20,
+        "hd": 10,
+        "ld": 30,
+        "td": 40
+      }
+    },
+    "300": {
+      "$type": "number",
+      "$value": 24,
+      "$modes": {
+        "md": 24,
+        "hd": 12,
+        "ld": 36,
+        "td": 48
+      }
+    },
+    "350": {
+      "$type": "number",
+      "$value": 28,
+      "$modes": {
+        "md": 28,
+        "hd": 14,
+        "ld": 42,
+        "td": 56
+      }
+    },
+    "400": {
+      "$type": "number",
+      "$value": 32,
+      "$modes": {
+        "md": 32,
+        "hd": 16,
+        "ld": 48,
+        "td": 54
+      }
+    }
+  },
+  "breakpoint-columns": {
+    "extra-small": {
+      "$type": "number",
+      "$value": 2,
+      "$modes": {
+        "md": 2,
+        "hd": 2,
+        "ld": 1,
+        "td": 1
+      }
+    },
+    "small": {
+      "$type": "number",
+      "$value": 4,
+      "$modes": {
+        "md": 4,
+        "hd": 4,
+        "ld": 2,
+        "td": 2
+      }
+    },
+    "medium": {
+      "$type": "number",
+      "$value": 6,
+      "$modes": {
+        "md": 6,
+        "hd": 6,
+        "ld": 4,
+        "td": 4
+      }
+    },
+    "large": {
+      "$type": "number",
+      "$value": 8,
+      "$modes": {
+        "md": 8,
+        "hd": 8,
+        "ld": 6,
+        "td": 6
+      }
+    },
+    "extra-large": {
+      "$type": "number",
+      "$value": 12,
+      "$modes": {
+        "md": 12,
+        "hd": 12,
+        "ld": 8,
+        "td": 8
+      }
+    }
+  },
+  "figma-only": {
+    "curve": {
+      "default-minus-size-border": {
+        "$type": "number",
+        "$value": 5,
+        "$modes": {
+          "md": 5,
+          "hd": 2,
+          "ld": 8,
+          "td": 11
+        }
+      }
+    },
+    "size": {
+      "adornment-width": {
+        "$type": "number",
+        "$value": 16,
+        "$modes": {
+          "md": 16,
+          "hd": 12,
+          "ld": 20,
+          "td": 24
+        }
+      },
+      "base-minus-spacing-100": {
+        "$type": "number",
+        "$value": 20,
+        "$modes": {
+          "md": 20,
+          "hd": 16,
+          "ld": 24,
+          "td": 28
+        }
+      },
+      "base-plus-spacing-100": {
+        "$type": "number",
+        "$value": 36,
+        "$modes": {
+          "md": 36,
+          "hd": 24,
+          "ld": 48,
+          "td": 60
+        }
+      },
+      "base-plus-spacing-100-plus-border": {
+        "$type": "number",
+        "$value": 37,
+        "$modes": {
+          "md": 37,
+          "hd": 25,
+          "ld": 49,
+          "td": 61
+        }
+      },
+      "base-x150percent": {
+        "$type": "number",
+        "$value": 42,
+        "$modes": {
+          "md": 42,
+          "hd": 30,
+          "ld": 54,
+          "td": 66
+        }
+      },
+      "base-x200percent": {
+        "$type": "number",
+        "$value": 56,
+        "$modes": {
+          "md": 56,
+          "hd": 40,
+          "ld": 72,
+          "td": 88
+        }
+      },
+      "base-x350percent": {
+        "$type": "number",
+        "$value": 98,
+        "$modes": {
+          "md": 98,
+          "hd": 70,
+          "ld": 126,
+          "td": 154
+        }
+      },
+      "base-x400percent": {
+        "$type": "number",
+        "$value": 112,
+        "$modes": {
+          "md": 112,
+          "hd": 80,
+          "ld": 144,
+          "td": 176
+        }
+      },
+      "base-x250percent": {
+        "$type": "number",
+        "$value": 70,
+        "$modes": {
+          "md": 70,
+          "hd": 50,
+          "ld": 90,
+          "td": 110
+        }
+      },
+      "base-x300percent": {
+        "$type": "number",
+        "$value": 84,
+        "$modes": {
+          "md": 84,
+          "hd": 60,
+          "ld": 108,
+          "td": 132
+        }
+      },
+      "compact-base": {
+        "$type": "number",
+        "$value": 28,
+        "$modes": {
+          "md": 28,
+          "hd": 16,
+          "ld": 36,
+          "td": 44
+        }
+      },
+      "compact-base-plus-spacing-100-plus-border": {
+        "$type": "number",
+        "$value": 37,
+        "$modes": {
+          "md": 37,
+          "hd": 21,
+          "ld": 49,
+          "td": 61
+        }
+      },
+      "icon-x150percent": {
+        "$type": "number",
+        "$value": 18,
+        "$modes": {
+          "md": 18,
+          "hd": 15,
+          "ld": 21,
+          "td": 24
+        }
+      },
+      "icon-x200percent": {
+        "$type": "number",
+        "$value": 24,
+        "$modes": {
+          "md": 24,
+          "hd": 20,
+          "ld": 28,
+          "td": 32
+        }
+      },
+      "icon-x250percent": {
+        "$type": "number",
+        "$value": 30,
+        "$modes": {
+          "md": 30,
+          "hd": 25,
+          "ld": 35,
+          "td": 40
+        }
+      },
+      "icon-x300percent": {
+        "$type": "number",
+        "$value": 36,
+        "$modes": {
+          "md": 36,
+          "hd": 30,
+          "ld": 42,
+          "td": 48
+        }
+      },
+      "icon-x350percent": {
+        "$type": "number",
+        "$value": 42,
+        "$modes": {
+          "md": 42,
+          "hd": 35,
+          "ld": 49,
+          "td": 56
+        }
+      },
+      "icon-x400percent": {
+        "$type": "number",
+        "$value": 48,
+        "$modes": {
+          "md": 48,
+          "hd": 40,
+          "ld": 56,
+          "td": 64
+        }
+      },
+      "flag-width-x100percent": {
+        "$type": "number",
+        "$value": 41,
+        "$modes": {
+          "md": 41,
+          "hd": 29,
+          "ld": 52,
+          "td": 64
+        }
+      },
+      "flag-width-x150percent": {
+        "$type": "number",
+        "$value": 61,
+        "$modes": {
+          "md": 61,
+          "hd": 44,
+          "ld": 78,
+          "td": 96
+        }
+      },
+      "flag-width-x200percent": {
+        "$type": "number",
+        "$value": 81,
+        "$modes": {
+          "md": 81,
+          "hd": 58,
+          "ld": 104,
+          "td": 128
+        }
+      },
+      "flag-width-x250percent": {
+        "$type": "number",
+        "$value": 102,
+        "$modes": {
+          "md": 102,
+          "hd": 73,
+          "ld": 131,
+          "td": 160
+        }
+      },
+      "flag-width-x300percent": {
+        "$type": "number",
+        "$value": 122,
+        "$modes": {
+          "md": 122,
+          "hd": 87,
+          "ld": 157,
+          "td": 191
+        }
+      },
+      "flag-width-x350percent": {
+        "$type": "number",
+        "$value": 142,
+        "$modes": {
+          "md": 142,
+          "hd": 102,
+          "ld": 183,
+          "td": 223
+        }
+      },
+      "flag-width-x400percent": {
+        "$type": "number",
+        "$value": 162,
+        "$modes": {
+          "md": 162,
+          "hd": 115,
+          "ld": 191,
+          "td": 255
+        }
+      }
+    },
+    "text": {
+      "notation": {
+        "font-size-x200percent": {
+          "$type": "number",
+          "$value": 20,
+          "$modes": {
+            "md": 20,
+            "hd": 16,
+            "ld": 24,
+            "td": 28
+          }
+        },
+        "font-size-x300percent": {
+          "$type": "number",
+          "$value": 30,
+          "$modes": {
+            "md": 30,
+            "hd": 24,
+            "ld": 36,
+            "td": 42
+          }
+        },
+        "font-size-x400percent": {
+          "$type": "number",
+          "$value": 40,
+          "$modes": {
+            "md": 40,
+            "hd": 32,
+            "ld": 48,
+            "td": 56
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/theme/tokens/foundation/src/high-next.tokens.json b/packages/theme/tokens/foundation/src/high-next.tokens.json
new file mode 100644
index 0000000000..301fb50383
--- /dev/null
+++ b/packages/theme/tokens/foundation/src/high-next.tokens.json
@@ -0,0 +1,472 @@
+{
+  "curve": {
+    "0": {
+      "$type": "number",
+      "$value": 0
+    },
+    "50": {
+      "$type": "number",
+      "$value": 1
+    },
+    "100": {
+      "$type": "number",
+      "$value": 2
+    },
+    "150": {
+      "$type": "number",
+      "$value": 3
+    },
+    "999": {
+      "$type": "number",
+      "$value": 999
+    }
+  },
+  "text": {
+    "display1": {
+      "font-size": {
+        "$type": "number",
+        "$value": 54
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 70
+      }
+    },
+    "display2": {
+      "font-size": {
+        "$type": "number",
+        "$value": 42
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 55
+      }
+    },
+    "display3": {
+      "font-size": {
+        "$type": "number",
+        "$value": 32
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 42
+      }
+    },
+    "display4": {
+      "font-size": {
+        "$type": "number",
+        "$value": 24
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 32
+      }
+    },
+    "h1": {
+      "font-size": {
+        "$type": "number",
+        "$value": 18
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 24
+      }
+    },
+    "h2": {
+      "font-size": {
+        "$type": "number",
+        "$value": 14
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 18
+      }
+    },
+    "h3": {
+      "font-size": {
+        "$type": "number",
+        "$value": 12
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 16
+      }
+    },
+    "h4": {
+      "font-size": {
+        "$type": "number",
+        "$value": 11
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 14
+      }
+    },
+    "body": {
+      "font-size": {
+        "$type": "number",
+        "$value": 11
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 14
+      }
+    },
+    "label": {
+      "font-size": {
+        "$type": "number",
+        "$value": 10
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 13
+      }
+    },
+    "notation": {
+      "font-size": {
+        "$type": "number",
+        "$value": 8
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 10
+      }
+    },
+    "action": {
+      "font-size": {
+        "$type": "number",
+        "$value": 11
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 14
+      }
+    },
+    "code": {
+      "font-size": {
+        "$type": "number",
+        "$value": 11
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 14
+      }
+    }
+  },
+  "shadow": {
+    "100": {
+      "x-axis": {
+        "$type": "number",
+        "$value": 0
+      },
+      "y-axis": {
+        "$type": "number",
+        "$value": 1
+      },
+      "blur": {
+        "$type": "number",
+        "$value": 3
+      }
+    },
+    "200": {
+      "x-axis": {
+        "$type": "number",
+        "$value": 0
+      },
+      "y-axis": {
+        "$type": "number",
+        "$value": 2
+      },
+      "blur": {
+        "$type": "number",
+        "$value": 4
+      }
+    },
+    "300": {
+      "x-axis": {
+        "$type": "number",
+        "$value": 0
+      },
+      "y-axis": {
+        "$type": "number",
+        "$value": 4
+      },
+      "blur": {
+        "$type": "number",
+        "$value": 8
+      }
+    },
+    "400": {
+      "x-axis": {
+        "$type": "number",
+        "$value": 0
+      },
+      "y-axis": {
+        "$type": "number",
+        "$value": 6
+      },
+      "blur": {
+        "$type": "number",
+        "$value": 10
+      }
+    },
+    "500": {
+      "x-axis": {
+        "$type": "number",
+        "$value": 0
+      },
+      "y-axis": {
+        "$type": "number",
+        "$value": 12
+      },
+      "blur": {
+        "$type": "number",
+        "$value": 40
+      }
+    }
+  },
+  "size": {
+    "adornment": {
+      "$type": "number",
+      "$value": 6
+    },
+    "bar": {
+      "$type": "number",
+      "$value": 2
+    },
+    "bar-small": {
+      "$type": "number",
+      "$value": 2
+    },
+    "bar-strong": {
+      "$type": "number",
+      "$value": 4
+    },
+    "base": {
+      "$type": "number",
+      "$value": 20
+    },
+    "border": {
+      "$type": "number",
+      "$value": 1
+    },
+    "border-strong": {
+      "$type": "number",
+      "$value": 2
+    },
+    "border-stronger": {
+      "$type": "number",
+      "$value": 4
+    },
+    "grid-status-indicator-size": {
+      "$type": "number",
+      "$value": 5
+    },
+    "icon": {
+      "$type": "number",
+      "$value": 12
+    },
+    "indicator": {
+      "$type": "number",
+      "$value": 2
+    },
+    "modifier": {
+      "$type": "number",
+      "$value": 8
+    },
+    "selectable": {
+      "$type": "number",
+      "$value": 12
+    }
+  },
+  "spacing": {
+    "25": {
+      "$type": "number",
+      "$value": 1
+    },
+    "50": {
+      "$type": "number",
+      "$value": 2
+    },
+    "75": {
+      "$type": "number",
+      "$value": 3
+    },
+    "100": {
+      "$type": "number",
+      "$value": 4
+    },
+    "150": {
+      "$type": "number",
+      "$value": 6
+    },
+    "200": {
+      "$type": "number",
+      "$value": 8
+    },
+    "250": {
+      "$type": "number",
+      "$value": 10
+    },
+    "300": {
+      "$type": "number",
+      "$value": 12
+    },
+    "350": {
+      "$type": "number",
+      "$value": 14
+    },
+    "400": {
+      "$type": "number",
+      "$value": 16
+    }
+  },
+  "breakpoint-columns": {
+    "extra-small": {
+      "$type": "number",
+      "$value": 2
+    },
+    "small": {
+      "$type": "number",
+      "$value": 4
+    },
+    "medium": {
+      "$type": "number",
+      "$value": 6
+    },
+    "large": {
+      "$type": "number",
+      "$value": 8
+    },
+    "extra-large": {
+      "$type": "number",
+      "$value": 12
+    }
+  },
+  "figma-only": {
+    "curve": {
+      "default-minus-size-border": {
+        "$type": "number",
+        "$value": 2
+      }
+    },
+    "size": {
+      "adornment-width": {
+        "$type": "number",
+        "$value": 12
+      },
+      "base-minus-spacing-100": {
+        "$type": "number",
+        "$value": 16
+      },
+      "base-plus-spacing-100": {
+        "$type": "number",
+        "$value": 24
+      },
+      "base-plus-spacing-100-plus-border": {
+        "$type": "number",
+        "$value": 25
+      },
+      "base-x150percent": {
+        "$type": "number",
+        "$value": 30
+      },
+      "base-x200percent": {
+        "$type": "number",
+        "$value": 40
+      },
+      "base-x350percent": {
+        "$type": "number",
+        "$value": 70
+      },
+      "base-x400percent": {
+        "$type": "number",
+        "$value": 80
+      },
+      "base-x250percent": {
+        "$type": "number",
+        "$value": 50
+      },
+      "base-x300percent": {
+        "$type": "number",
+        "$value": 60
+      },
+      "compact-base": {
+        "$type": "number",
+        "$value": 16
+      },
+      "compact-base-plus-spacing-100-plus-border": {
+        "$type": "number",
+        "$value": 21
+      },
+      "icon-x150percent": {
+        "$type": "number",
+        "$value": 15
+      },
+      "icon-x200percent": {
+        "$type": "number",
+        "$value": 20
+      },
+      "icon-x250percent": {
+        "$type": "number",
+        "$value": 25
+      },
+      "icon-x300percent": {
+        "$type": "number",
+        "$value": 30
+      },
+      "icon-x350percent": {
+        "$type": "number",
+        "$value": 35
+      },
+      "icon-x400percent": {
+        "$type": "number",
+        "$value": 40
+      },
+      "flag-width-x100percent": {
+        "$type": "number",
+        "$value": 29
+      },
+      "flag-width-x150percent": {
+        "$type": "number",
+        "$value": 44
+      },
+      "flag-width-x200percent": {
+        "$type": "number",
+        "$value": 58
+      },
+      "flag-width-x250percent": {
+        "$type": "number",
+        "$value": 73
+      },
+      "flag-width-x300percent": {
+        "$type": "number",
+        "$value": 87
+      },
+      "flag-width-x350percent": {
+        "$type": "number",
+        "$value": 102
+      },
+      "flag-width-x400percent": {
+        "$type": "number",
+        "$value": 115
+      }
+    },
+    "text": {
+      "notation": {
+        "font-size-x200percent": {
+          "$type": "number",
+          "$value": 16
+        },
+        "font-size-x300percent": {
+          "$type": "number",
+          "$value": 24
+        },
+        "font-size-x400percent": {
+          "$type": "number",
+          "$value": 32
+        }
+      }
+    }
+  }
+}
diff --git a/packages/theme/tokens/foundation/src/low-next.tokens.json b/packages/theme/tokens/foundation/src/low-next.tokens.json
new file mode 100644
index 0000000000..ae6c1c834f
--- /dev/null
+++ b/packages/theme/tokens/foundation/src/low-next.tokens.json
@@ -0,0 +1,472 @@
+{
+  "curve": {
+    "0": {
+      "$type": "number",
+      "$value": 0
+    },
+    "50": {
+      "$type": "number",
+      "$value": 3
+    },
+    "100": {
+      "$type": "number",
+      "$value": 6
+    },
+    "150": {
+      "$type": "number",
+      "$value": 9
+    },
+    "999": {
+      "$type": "number",
+      "$value": 999
+    }
+  },
+  "text": {
+    "display1": {
+      "font-size": {
+        "$type": "number",
+        "$value": 84
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 109
+      }
+    },
+    "display2": {
+      "font-size": {
+        "$type": "number",
+        "$value": 68
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 88
+      }
+    },
+    "display3": {
+      "font-size": {
+        "$type": "number",
+        "$value": 54
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 70
+      }
+    },
+    "display4": {
+      "font-size": {
+        "$type": "number",
+        "$value": 42
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 55
+      }
+    },
+    "h1": {
+      "font-size": {
+        "$type": "number",
+        "$value": 32
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 42
+      }
+    },
+    "h2": {
+      "font-size": {
+        "$type": "number",
+        "$value": 24
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 32
+      }
+    },
+    "h3": {
+      "font-size": {
+        "$type": "number",
+        "$value": 18
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 24
+      }
+    },
+    "h4": {
+      "font-size": {
+        "$type": "number",
+        "$value": 14
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 18
+      }
+    },
+    "body": {
+      "font-size": {
+        "$type": "number",
+        "$value": 14
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 18
+      }
+    },
+    "label": {
+      "font-size": {
+        "$type": "number",
+        "$value": 12
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 16
+      }
+    },
+    "notation": {
+      "font-size": {
+        "$type": "number",
+        "$value": 12
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 16
+      }
+    },
+    "action": {
+      "font-size": {
+        "$type": "number",
+        "$value": 14
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 18
+      }
+    },
+    "code": {
+      "font-size": {
+        "$type": "number",
+        "$value": 14
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 18
+      }
+    }
+  },
+  "shadow": {
+    "100": {
+      "x-axis": {
+        "$type": "number",
+        "$value": 0
+      },
+      "y-axis": {
+        "$type": "number",
+        "$value": 1
+      },
+      "blur": {
+        "$type": "number",
+        "$value": 3
+      }
+    },
+    "200": {
+      "x-axis": {
+        "$type": "number",
+        "$value": 0
+      },
+      "y-axis": {
+        "$type": "number",
+        "$value": 2
+      },
+      "blur": {
+        "$type": "number",
+        "$value": 4
+      }
+    },
+    "300": {
+      "x-axis": {
+        "$type": "number",
+        "$value": 0
+      },
+      "y-axis": {
+        "$type": "number",
+        "$value": 4
+      },
+      "blur": {
+        "$type": "number",
+        "$value": 8
+      }
+    },
+    "400": {
+      "x-axis": {
+        "$type": "number",
+        "$value": 0
+      },
+      "y-axis": {
+        "$type": "number",
+        "$value": 6
+      },
+      "blur": {
+        "$type": "number",
+        "$value": 10
+      }
+    },
+    "500": {
+      "x-axis": {
+        "$type": "number",
+        "$value": 0
+      },
+      "y-axis": {
+        "$type": "number",
+        "$value": 12
+      },
+      "blur": {
+        "$type": "number",
+        "$value": 40
+      }
+    }
+  },
+  "size": {
+    "adornment": {
+      "$type": "number",
+      "$value": 10
+    },
+    "bar": {
+      "$type": "number",
+      "$value": 6
+    },
+    "bar-small": {
+      "$type": "number",
+      "$value": 2
+    },
+    "bar-strong": {
+      "$type": "number",
+      "$value": 12
+    },
+    "base": {
+      "$type": "number",
+      "$value": 36
+    },
+    "border": {
+      "$type": "number",
+      "$value": 1
+    },
+    "border-strong": {
+      "$type": "number",
+      "$value": 2
+    },
+    "border-stronger": {
+      "$type": "number",
+      "$value": 4
+    },
+    "grid-status-indicator-size": {
+      "$type": "number",
+      "$value": 7
+    },
+    "icon": {
+      "$type": "number",
+      "$value": 14
+    },
+    "indicator": {
+      "$type": "number",
+      "$value": 4
+    },
+    "modifier": {
+      "$type": "number",
+      "$value": 12
+    },
+    "selectable": {
+      "$type": "number",
+      "$value": 16
+    }
+  },
+  "spacing": {
+    "25": {
+      "$type": "number",
+      "$value": 3
+    },
+    "50": {
+      "$type": "number",
+      "$value": 6
+    },
+    "75": {
+      "$type": "number",
+      "$value": 9
+    },
+    "100": {
+      "$type": "number",
+      "$value": 12
+    },
+    "150": {
+      "$type": "number",
+      "$value": 18
+    },
+    "200": {
+      "$type": "number",
+      "$value": 24
+    },
+    "250": {
+      "$type": "number",
+      "$value": 30
+    },
+    "300": {
+      "$type": "number",
+      "$value": 36
+    },
+    "350": {
+      "$type": "number",
+      "$value": 42
+    },
+    "400": {
+      "$type": "number",
+      "$value": 48
+    }
+  },
+  "breakpoint-columns": {
+    "extra-small": {
+      "$type": "number",
+      "$value": 1
+    },
+    "small": {
+      "$type": "number",
+      "$value": 2
+    },
+    "medium": {
+      "$type": "number",
+      "$value": 4
+    },
+    "large": {
+      "$type": "number",
+      "$value": 6
+    },
+    "extra-large": {
+      "$type": "number",
+      "$value": 8
+    }
+  },
+  "figma-only": {
+    "curve": {
+      "default-minus-size-border": {
+        "$type": "number",
+        "$value": 8
+      }
+    },
+    "size": {
+      "adornment-width": {
+        "$type": "number",
+        "$value": 20
+      },
+      "base-minus-spacing-100": {
+        "$type": "number",
+        "$value": 24
+      },
+      "base-plus-spacing-100": {
+        "$type": "number",
+        "$value": 48
+      },
+      "base-plus-spacing-100-plus-border": {
+        "$type": "number",
+        "$value": 49
+      },
+      "base-x150percent": {
+        "$type": "number",
+        "$value": 54
+      },
+      "base-x200percent": {
+        "$type": "number",
+        "$value": 72
+      },
+      "base-x350percent": {
+        "$type": "number",
+        "$value": 126
+      },
+      "base-x400percent": {
+        "$type": "number",
+        "$value": 144
+      },
+      "base-x250percent": {
+        "$type": "number",
+        "$value": 90
+      },
+      "base-x300percent": {
+        "$type": "number",
+        "$value": 108
+      },
+      "compact-base": {
+        "$type": "number",
+        "$value": 36
+      },
+      "compact-base-plus-spacing-100-plus-border": {
+        "$type": "number",
+        "$value": 49
+      },
+      "icon-x150percent": {
+        "$type": "number",
+        "$value": 21
+      },
+      "icon-x200percent": {
+        "$type": "number",
+        "$value": 28
+      },
+      "icon-x250percent": {
+        "$type": "number",
+        "$value": 35
+      },
+      "icon-x300percent": {
+        "$type": "number",
+        "$value": 42
+      },
+      "icon-x350percent": {
+        "$type": "number",
+        "$value": 49
+      },
+      "icon-x400percent": {
+        "$type": "number",
+        "$value": 56
+      },
+      "flag-width-x100percent": {
+        "$type": "number",
+        "$value": 52
+      },
+      "flag-width-x150percent": {
+        "$type": "number",
+        "$value": 78
+      },
+      "flag-width-x200percent": {
+        "$type": "number",
+        "$value": 104
+      },
+      "flag-width-x250percent": {
+        "$type": "number",
+        "$value": 131
+      },
+      "flag-width-x300percent": {
+        "$type": "number",
+        "$value": 157
+      },
+      "flag-width-x350percent": {
+        "$type": "number",
+        "$value": 183
+      },
+      "flag-width-x400percent": {
+        "$type": "number",
+        "$value": 191
+      }
+    },
+    "text": {
+      "notation": {
+        "font-size-x200percent": {
+          "$type": "number",
+          "$value": 24
+        },
+        "font-size-x300percent": {
+          "$type": "number",
+          "$value": 36
+        },
+        "font-size-x400percent": {
+          "$type": "number",
+          "$value": 48
+        }
+      }
+    }
+  }
+}
diff --git a/packages/theme/tokens/foundation/src/medium-next.tokens.json b/packages/theme/tokens/foundation/src/medium-next.tokens.json
new file mode 100644
index 0000000000..b5f47b9538
--- /dev/null
+++ b/packages/theme/tokens/foundation/src/medium-next.tokens.json
@@ -0,0 +1,472 @@
+{
+  "curve": {
+    "0": {
+      "$type": "number",
+      "$value": 0
+    },
+    "50": {
+      "$type": "number",
+      "$value": 2
+    },
+    "100": {
+      "$type": "number",
+      "$value": 4
+    },
+    "150": {
+      "$type": "number",
+      "$value": 6
+    },
+    "999": {
+      "$type": "number",
+      "$value": 999
+    }
+  },
+  "text": {
+    "display1": {
+      "font-size": {
+        "$type": "number",
+        "$value": 68
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 88
+      }
+    },
+    "display2": {
+      "font-size": {
+        "$type": "number",
+        "$value": 54
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 70
+      }
+    },
+    "display3": {
+      "font-size": {
+        "$type": "number",
+        "$value": 42
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 55
+      }
+    },
+    "display4": {
+      "font-size": {
+        "$type": "number",
+        "$value": 32
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 42
+      }
+    },
+    "h1": {
+      "font-size": {
+        "$type": "number",
+        "$value": 24
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 32
+      }
+    },
+    "h2": {
+      "font-size": {
+        "$type": "number",
+        "$value": 18
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 24
+      }
+    },
+    "h3": {
+      "font-size": {
+        "$type": "number",
+        "$value": 14
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 18
+      }
+    },
+    "h4": {
+      "font-size": {
+        "$type": "number",
+        "$value": 12
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 16
+      }
+    },
+    "body": {
+      "font-size": {
+        "$type": "number",
+        "$value": 12
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 16
+      }
+    },
+    "label": {
+      "font-size": {
+        "$type": "number",
+        "$value": 11
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 14
+      }
+    },
+    "notation": {
+      "font-size": {
+        "$type": "number",
+        "$value": 10
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 13
+      }
+    },
+    "action": {
+      "font-size": {
+        "$type": "number",
+        "$value": 12
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 16
+      }
+    },
+    "code": {
+      "font-size": {
+        "$type": "number",
+        "$value": 12
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 16
+      }
+    }
+  },
+  "shadow": {
+    "100": {
+      "x-axis": {
+        "$type": "number",
+        "$value": 0
+      },
+      "y-axis": {
+        "$type": "number",
+        "$value": 1
+      },
+      "blur": {
+        "$type": "number",
+        "$value": 3
+      }
+    },
+    "200": {
+      "x-axis": {
+        "$type": "number",
+        "$value": 0
+      },
+      "y-axis": {
+        "$type": "number",
+        "$value": 2
+      },
+      "blur": {
+        "$type": "number",
+        "$value": 4
+      }
+    },
+    "300": {
+      "x-axis": {
+        "$type": "number",
+        "$value": 0
+      },
+      "y-axis": {
+        "$type": "number",
+        "$value": 4
+      },
+      "blur": {
+        "$type": "number",
+        "$value": 8
+      }
+    },
+    "400": {
+      "x-axis": {
+        "$type": "number",
+        "$value": 0
+      },
+      "y-axis": {
+        "$type": "number",
+        "$value": 6
+      },
+      "blur": {
+        "$type": "number",
+        "$value": 10
+      }
+    },
+    "500": {
+      "x-axis": {
+        "$type": "number",
+        "$value": 0
+      },
+      "y-axis": {
+        "$type": "number",
+        "$value": 12
+      },
+      "blur": {
+        "$type": "number",
+        "$value": 40
+      }
+    }
+  },
+  "size": {
+    "adornment": {
+      "$type": "number",
+      "$value": 8
+    },
+    "bar": {
+      "$type": "number",
+      "$value": 4
+    },
+    "bar-small": {
+      "$type": "number",
+      "$value": 2
+    },
+    "bar-strong": {
+      "$type": "number",
+      "$value": 8
+    },
+    "base": {
+      "$type": "number",
+      "$value": 28
+    },
+    "border": {
+      "$type": "number",
+      "$value": 1
+    },
+    "border-strong": {
+      "$type": "number",
+      "$value": 2
+    },
+    "border-stronger": {
+      "$type": "number",
+      "$value": 4
+    },
+    "grid-status-indicator-size": {
+      "$type": "number",
+      "$value": 6
+    },
+    "icon": {
+      "$type": "number",
+      "$value": 12
+    },
+    "indicator": {
+      "$type": "number",
+      "$value": 3
+    },
+    "modifier": {
+      "$type": "number",
+      "$value": 10
+    },
+    "selectable": {
+      "$type": "number",
+      "$value": 14
+    }
+  },
+  "spacing": {
+    "25": {
+      "$type": "number",
+      "$value": 2
+    },
+    "50": {
+      "$type": "number",
+      "$value": 4
+    },
+    "75": {
+      "$type": "number",
+      "$value": 6
+    },
+    "100": {
+      "$type": "number",
+      "$value": 8
+    },
+    "150": {
+      "$type": "number",
+      "$value": 12
+    },
+    "200": {
+      "$type": "number",
+      "$value": 16
+    },
+    "250": {
+      "$type": "number",
+      "$value": 20
+    },
+    "300": {
+      "$type": "number",
+      "$value": 24
+    },
+    "350": {
+      "$type": "number",
+      "$value": 28
+    },
+    "400": {
+      "$type": "number",
+      "$value": 32
+    }
+  },
+  "breakpoint-columns": {
+    "extra-small": {
+      "$type": "number",
+      "$value": 2
+    },
+    "small": {
+      "$type": "number",
+      "$value": 4
+    },
+    "medium": {
+      "$type": "number",
+      "$value": 6
+    },
+    "large": {
+      "$type": "number",
+      "$value": 8
+    },
+    "extra-large": {
+      "$type": "number",
+      "$value": 12
+    }
+  },
+  "figma-only": {
+    "curve": {
+      "default-minus-size-border": {
+        "$type": "number",
+        "$value": 5
+      }
+    },
+    "size": {
+      "adornment-width": {
+        "$type": "number",
+        "$value": 16
+      },
+      "base-minus-spacing-100": {
+        "$type": "number",
+        "$value": 20
+      },
+      "base-plus-spacing-100": {
+        "$type": "number",
+        "$value": 36
+      },
+      "base-plus-spacing-100-plus-border": {
+        "$type": "number",
+        "$value": 37
+      },
+      "base-x150percent": {
+        "$type": "number",
+        "$value": 42
+      },
+      "base-x200percent": {
+        "$type": "number",
+        "$value": 56
+      },
+      "base-x350percent": {
+        "$type": "number",
+        "$value": 98
+      },
+      "base-x400percent": {
+        "$type": "number",
+        "$value": 112
+      },
+      "base-x250percent": {
+        "$type": "number",
+        "$value": 70
+      },
+      "base-x300percent": {
+        "$type": "number",
+        "$value": 84
+      },
+      "compact-base": {
+        "$type": "number",
+        "$value": 28
+      },
+      "compact-base-plus-spacing-100-plus-border": {
+        "$type": "number",
+        "$value": 37
+      },
+      "icon-x150percent": {
+        "$type": "number",
+        "$value": 18
+      },
+      "icon-x200percent": {
+        "$type": "number",
+        "$value": 24
+      },
+      "icon-x250percent": {
+        "$type": "number",
+        "$value": 30
+      },
+      "icon-x300percent": {
+        "$type": "number",
+        "$value": 36
+      },
+      "icon-x350percent": {
+        "$type": "number",
+        "$value": 42
+      },
+      "icon-x400percent": {
+        "$type": "number",
+        "$value": 48
+      },
+      "flag-width-x100percent": {
+        "$type": "number",
+        "$value": 41
+      },
+      "flag-width-x150percent": {
+        "$type": "number",
+        "$value": 61
+      },
+      "flag-width-x200percent": {
+        "$type": "number",
+        "$value": 81
+      },
+      "flag-width-x250percent": {
+        "$type": "number",
+        "$value": 102
+      },
+      "flag-width-x300percent": {
+        "$type": "number",
+        "$value": 122
+      },
+      "flag-width-x350percent": {
+        "$type": "number",
+        "$value": 142
+      },
+      "flag-width-x400percent": {
+        "$type": "number",
+        "$value": 162
+      }
+    },
+    "text": {
+      "notation": {
+        "font-size-x200percent": {
+          "$type": "number",
+          "$value": 20
+        },
+        "font-size-x300percent": {
+          "$type": "number",
+          "$value": 30
+        },
+        "font-size-x400percent": {
+          "$type": "number",
+          "$value": 40
+        }
+      }
+    }
+  }
+}
diff --git a/packages/theme/tokens/foundation/src/touch-next.tokens.json b/packages/theme/tokens/foundation/src/touch-next.tokens.json
new file mode 100644
index 0000000000..cf756bcaa2
--- /dev/null
+++ b/packages/theme/tokens/foundation/src/touch-next.tokens.json
@@ -0,0 +1,472 @@
+{
+  "curve": {
+    "0": {
+      "$type": "number",
+      "$value": 0
+    },
+    "50": {
+      "$type": "number",
+      "$value": 4
+    },
+    "100": {
+      "$type": "number",
+      "$value": 8
+    },
+    "150": {
+      "$type": "number",
+      "$value": 12
+    },
+    "999": {
+      "$type": "number",
+      "$value": 999
+    }
+  },
+  "text": {
+    "display1": {
+      "font-size": {
+        "$type": "number",
+        "$value": 102
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 133
+      }
+    },
+    "display2": {
+      "font-size": {
+        "$type": "number",
+        "$value": 84
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 109
+      }
+    },
+    "display3": {
+      "font-size": {
+        "$type": "number",
+        "$value": 68
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 88
+      }
+    },
+    "display4": {
+      "font-size": {
+        "$type": "number",
+        "$value": 54
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 70
+      }
+    },
+    "h1": {
+      "font-size": {
+        "$type": "number",
+        "$value": 42
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 55
+      }
+    },
+    "h2": {
+      "font-size": {
+        "$type": "number",
+        "$value": 32
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 42
+      }
+    },
+    "h3": {
+      "font-size": {
+        "$type": "number",
+        "$value": 24
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 32
+      }
+    },
+    "h4": {
+      "font-size": {
+        "$type": "number",
+        "$value": 16
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 20
+      }
+    },
+    "body": {
+      "font-size": {
+        "$type": "number",
+        "$value": 16
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 20
+      }
+    },
+    "label": {
+      "font-size": {
+        "$type": "number",
+        "$value": 14
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 18
+      }
+    },
+    "notation": {
+      "font-size": {
+        "$type": "number",
+        "$value": 14
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 18
+      }
+    },
+    "action": {
+      "font-size": {
+        "$type": "number",
+        "$value": 16
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 20
+      }
+    },
+    "code": {
+      "font-size": {
+        "$type": "number",
+        "$value": 16
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": 20
+      }
+    }
+  },
+  "shadow": {
+    "100": {
+      "x-axis": {
+        "$type": "number",
+        "$value": 0
+      },
+      "y-axis": {
+        "$type": "number",
+        "$value": 1
+      },
+      "blur": {
+        "$type": "number",
+        "$value": 3
+      }
+    },
+    "200": {
+      "x-axis": {
+        "$type": "number",
+        "$value": 0
+      },
+      "y-axis": {
+        "$type": "number",
+        "$value": 2
+      },
+      "blur": {
+        "$type": "number",
+        "$value": 4
+      }
+    },
+    "300": {
+      "x-axis": {
+        "$type": "number",
+        "$value": 0
+      },
+      "y-axis": {
+        "$type": "number",
+        "$value": 4
+      },
+      "blur": {
+        "$type": "number",
+        "$value": 8
+      }
+    },
+    "400": {
+      "x-axis": {
+        "$type": "number",
+        "$value": 0
+      },
+      "y-axis": {
+        "$type": "number",
+        "$value": 6
+      },
+      "blur": {
+        "$type": "number",
+        "$value": 10
+      }
+    },
+    "500": {
+      "x-axis": {
+        "$type": "number",
+        "$value": 0
+      },
+      "y-axis": {
+        "$type": "number",
+        "$value": 12
+      },
+      "blur": {
+        "$type": "number",
+        "$value": 40
+      }
+    }
+  },
+  "size": {
+    "adornment": {
+      "$type": "number",
+      "$value": 12
+    },
+    "bar": {
+      "$type": "number",
+      "$value": 8
+    },
+    "bar-small": {
+      "$type": "number",
+      "$value": 2
+    },
+    "bar-strong": {
+      "$type": "number",
+      "$value": 16
+    },
+    "base": {
+      "$type": "number",
+      "$value": 44
+    },
+    "border": {
+      "$type": "number",
+      "$value": 1
+    },
+    "border-strong": {
+      "$type": "number",
+      "$value": 2
+    },
+    "border-stronger": {
+      "$type": "number",
+      "$value": 4
+    },
+    "grid-status-indicator-size": {
+      "$type": "number",
+      "$value": 9
+    },
+    "icon": {
+      "$type": "number",
+      "$value": 16
+    },
+    "indicator": {
+      "$type": "number",
+      "$value": 5
+    },
+    "modifier": {
+      "$type": "number",
+      "$value": 14
+    },
+    "selectable": {
+      "$type": "number",
+      "$value": 18
+    }
+  },
+  "spacing": {
+    "25": {
+      "$type": "number",
+      "$value": 4
+    },
+    "50": {
+      "$type": "number",
+      "$value": 8
+    },
+    "75": {
+      "$type": "number",
+      "$value": 12
+    },
+    "100": {
+      "$type": "number",
+      "$value": 16
+    },
+    "150": {
+      "$type": "number",
+      "$value": 24
+    },
+    "200": {
+      "$type": "number",
+      "$value": 32
+    },
+    "250": {
+      "$type": "number",
+      "$value": 40
+    },
+    "300": {
+      "$type": "number",
+      "$value": 48
+    },
+    "350": {
+      "$type": "number",
+      "$value": 56
+    },
+    "400": {
+      "$type": "number",
+      "$value": 54
+    }
+  },
+  "breakpoint-columns": {
+    "extra-small": {
+      "$type": "number",
+      "$value": 1
+    },
+    "small": {
+      "$type": "number",
+      "$value": 2
+    },
+    "medium": {
+      "$type": "number",
+      "$value": 4
+    },
+    "large": {
+      "$type": "number",
+      "$value": 6
+    },
+    "extra-large": {
+      "$type": "number",
+      "$value": 8
+    }
+  },
+  "figma-only": {
+    "curve": {
+      "default-minus-size-border": {
+        "$type": "number",
+        "$value": 11
+      }
+    },
+    "size": {
+      "adornment-width": {
+        "$type": "number",
+        "$value": 24
+      },
+      "base-minus-spacing-100": {
+        "$type": "number",
+        "$value": 28
+      },
+      "base-plus-spacing-100": {
+        "$type": "number",
+        "$value": 60
+      },
+      "base-plus-spacing-100-plus-border": {
+        "$type": "number",
+        "$value": 61
+      },
+      "base-x150percent": {
+        "$type": "number",
+        "$value": 66
+      },
+      "base-x200percent": {
+        "$type": "number",
+        "$value": 88
+      },
+      "base-x350percent": {
+        "$type": "number",
+        "$value": 154
+      },
+      "base-x400percent": {
+        "$type": "number",
+        "$value": 176
+      },
+      "base-x250percent": {
+        "$type": "number",
+        "$value": 110
+      },
+      "base-x300percent": {
+        "$type": "number",
+        "$value": 132
+      },
+      "compact-base": {
+        "$type": "number",
+        "$value": 44
+      },
+      "compact-base-plus-spacing-100-plus-border": {
+        "$type": "number",
+        "$value": 61
+      },
+      "icon-x150percent": {
+        "$type": "number",
+        "$value": 24
+      },
+      "icon-x200percent": {
+        "$type": "number",
+        "$value": 32
+      },
+      "icon-x250percent": {
+        "$type": "number",
+        "$value": 40
+      },
+      "icon-x300percent": {
+        "$type": "number",
+        "$value": 48
+      },
+      "icon-x350percent": {
+        "$type": "number",
+        "$value": 56
+      },
+      "icon-x400percent": {
+        "$type": "number",
+        "$value": 64
+      },
+      "flag-width-x100percent": {
+        "$type": "number",
+        "$value": 64
+      },
+      "flag-width-x150percent": {
+        "$type": "number",
+        "$value": 96
+      },
+      "flag-width-x200percent": {
+        "$type": "number",
+        "$value": 128
+      },
+      "flag-width-x250percent": {
+        "$type": "number",
+        "$value": 160
+      },
+      "flag-width-x300percent": {
+        "$type": "number",
+        "$value": 191
+      },
+      "flag-width-x350percent": {
+        "$type": "number",
+        "$value": 223
+      },
+      "flag-width-x400percent": {
+        "$type": "number",
+        "$value": 255
+      }
+    },
+    "text": {
+      "notation": {
+        "font-size-x200percent": {
+          "$type": "number",
+          "$value": 28
+        },
+        "font-size-x300percent": {
+          "$type": "number",
+          "$value": 42
+        },
+        "font-size-x400percent": {
+          "$type": "number",
+          "$value": 56
+        }
+      }
+    }
+  }
+}

From e5e36edf34c35c0b5116f45c4292662c0530102a Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Tue, 26 Nov 2024 16:38:48 +0000
Subject: [PATCH 22/35] Biome fix

---
 .../theme/scripts/helpers/combine-tokens-to-modes.mjs | 11 ++++++++---
 .../tokens/foundation/foundations-next.tokens.json    |  2 +-
 .../theme/tokens/palette/palette-next.tokens.json     |  2 +-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/theme/scripts/helpers/combine-tokens-to-modes.mjs b/packages/theme/scripts/helpers/combine-tokens-to-modes.mjs
index 888a8bee11..2438f302e7 100644
--- a/packages/theme/scripts/helpers/combine-tokens-to-modes.mjs
+++ b/packages/theme/scripts/helpers/combine-tokens-to-modes.mjs
@@ -36,9 +36,14 @@ function readToken(filePath) {
 function writeToken(token, filePath) {
   const __dirname = import.meta.dirname;
 
-  writeFileSync(join(__dirname, filePath), JSON.stringify(token, null, "  "), {
-    encoding: "utf-8",
-  });
+  writeFileSync(
+    join(__dirname, filePath),
+    // biome-ignore lint/style/useTemplate: <explanation>
+    JSON.stringify(token, null, "  ") + "\n",
+    {
+      encoding: "utf-8",
+    },
+  );
 }
 
 function addModesValue(mainToken, modeName, modeSpecificToken) {
diff --git a/packages/theme/tokens/foundation/foundations-next.tokens.json b/packages/theme/tokens/foundation/foundations-next.tokens.json
index 4ab12ee398..1f4f92ac44 100644
--- a/packages/theme/tokens/foundation/foundations-next.tokens.json
+++ b/packages/theme/tokens/foundation/foundations-next.tokens.json
@@ -1087,4 +1087,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/theme/tokens/palette/palette-next.tokens.json b/packages/theme/tokens/palette/palette-next.tokens.json
index 17d3457da0..b340831f6d 100644
--- a/packages/theme/tokens/palette/palette-next.tokens.json
+++ b/packages/theme/tokens/palette/palette-next.tokens.json
@@ -1211,4 +1211,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}

From 805cc0a2f996da14fd3c675a7ca5a3abc45eea2b Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Fri, 29 Nov 2024 10:34:47 +0000
Subject: [PATCH 23/35] Build into existing css palette/-next.css

---
 packages/theme/css/palette/accent-next.css    | 28 +++++++++++--------
 packages/theme/css/palette/alpha-next.css     | 14 ++++++----
 .../theme/css/palette/foreground-next.css     |  9 ++++--
 packages/theme/css/palette/negative-next.css  | 20 +++++++------
 packages/theme/css/palette/neutral-next.css   | 21 +++++++-------
 packages/theme/css/palette/warning-next.css   | 16 +++++++----
 packages/theme/scripts/build-json.mjs         | 15 ++++++++--
 .../sd-utils/files/theme-next-tokens.mjs      |  5 ++--
 .../sd-utils/format/css-multi-modes.mjs       | 22 +++++++--------
 ....json => characteristics-next.tokens.json} |  0
 ...json => rest-foundations-next.tokens.json} |  0
 11 files changed, 90 insertions(+), 60 deletions(-)
 rename packages/theme/tokens/characteristics/{theme-next.tokens.json => characteristics-next.tokens.json} (100%)
 rename packages/theme/tokens/foundation/{foundations-next.tokens.json => rest-foundations-next.tokens.json} (100%)

diff --git a/packages/theme/css/palette/accent-next.css b/packages/theme/css/palette/accent-next.css
index 400fad72c3..75476934cf 100644
--- a/packages/theme/css/palette/accent-next.css
+++ b/packages/theme/css/palette/accent-next.css
@@ -1,63 +1,67 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
 .salt-theme.salt-theme-next[data-mode="light"][data-accent="blue"] {
   --salt-palette-accent: var(--salt-color-blue-500);
+  --salt-palette-accent-action-active: var(--salt-color-blue-800);
+  --salt-palette-accent-action-hover: var(--salt-color-blue-600);
   --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
+  --salt-palette-accent-none: var(--salt-color-blue-500-0a);
   --salt-palette-accent-strong: var(--salt-color-blue-600);
   --salt-palette-accent-strong-disabled: var(--salt-color-blue-600-40a);
   --salt-palette-accent-stronger: var(--salt-color-blue-700);
   --salt-palette-accent-stronger-disabled: var(--salt-color-blue-700-40a);
-  --salt-palette-accent-strongest: var(--salt-color-blue-800);
   --salt-palette-accent-weak: var(--salt-color-blue-400);
   --salt-palette-accent-weaker: var(--salt-color-blue-200);
   --salt-palette-accent-weaker-disabled: var(--salt-color-blue-200-40a);
   --salt-palette-accent-weakest: var(--salt-color-blue-100);
-  --salt-palette-accent-action-hover: var(--salt-color-blue-600);
-  --salt-palette-accent-action-active: var(--salt-color-blue-800);
 }
 
 .salt-theme.salt-theme-next[data-mode="dark"][data-accent="blue"] {
   --salt-palette-accent: var(--salt-color-blue-500);
+  --salt-palette-accent-action-active: var(--salt-color-blue-800);
+  --salt-palette-accent-action-hover: var(--salt-color-blue-600);
   --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
+  --salt-palette-accent-none: var(--salt-color-blue-500-0a);
   --salt-palette-accent-strong: var(--salt-color-blue-400);
   --salt-palette-accent-strong-disabled: var(--salt-color-blue-400-40a);
   --salt-palette-accent-stronger: var(--salt-color-blue-300);
   --salt-palette-accent-stronger-disabled: var(--salt-color-blue-300-40a);
-  --salt-palette-accent-strongest: var(--salt-color-blue-200);
   --salt-palette-accent-weak: var(--salt-color-blue-600);
   --salt-palette-accent-weaker: var(--salt-color-blue-800);
   --salt-palette-accent-weaker-disabled: var(--salt-color-blue-800-40a);
   --salt-palette-accent-weakest: var(--salt-color-blue-900);
-  --salt-palette-accent-action-hover: var(--salt-color-blue-600);
-  --salt-palette-accent-action-active: var(--salt-color-blue-800);
 }
 
 .salt-theme.salt-theme-next[data-mode="light"][data-accent="teal"] {
   --salt-palette-accent: var(--salt-color-teal-500);
+  --salt-palette-accent-action-active: var(--salt-color-teal-800);
+  --salt-palette-accent-action-hover: var(--salt-color-teal-600);
   --salt-palette-accent-disabled: var(--salt-color-teal-500-40a);
+  --salt-palette-accent-none: var(--salt-color-teal-500-0a);
   --salt-palette-accent-strong: var(--salt-color-teal-600);
   --salt-palette-accent-strong-disabled: var(--salt-color-teal-600-40a);
   --salt-palette-accent-stronger: var(--salt-color-teal-700);
   --salt-palette-accent-stronger-disabled: var(--salt-color-teal-700-40a);
-  --salt-palette-accent-strongest: var(--salt-color-teal-800);
   --salt-palette-accent-weak: var(--salt-color-teal-400);
   --salt-palette-accent-weaker: var(--salt-color-teal-200);
   --salt-palette-accent-weaker-disabled: var(--salt-color-teal-200-40a);
   --salt-palette-accent-weakest: var(--salt-color-teal-100);
-  --salt-palette-accent-action-hover: var(--salt-color-teal-600);
-  --salt-palette-accent-action-active: var(--salt-color-teal-800);
 }
 
 .salt-theme.salt-theme-next[data-mode="dark"][data-accent="teal"] {
   --salt-palette-accent: var(--salt-color-teal-500);
+  --salt-palette-accent-action-active: var(--salt-color-teal-800);
+  --salt-palette-accent-action-hover: var(--salt-color-teal-600);
   --salt-palette-accent-disabled: var(--salt-color-teal-500-40a);
+  --salt-palette-accent-none: var(--salt-color-teal-500-0a);
   --salt-palette-accent-strong: var(--salt-color-teal-400);
   --salt-palette-accent-strong-disabled: var(--salt-color-teal-400-40a);
   --salt-palette-accent-stronger: var(--salt-color-teal-300);
   --salt-palette-accent-stronger-disabled: var(--salt-color-teal-300-40a);
-  --salt-palette-accent-strongest: var(--salt-color-teal-200);
   --salt-palette-accent-weak: var(--salt-color-teal-600);
   --salt-palette-accent-weaker: var(--salt-color-teal-800);
   --salt-palette-accent-weaker-disabled: var(--salt-color-teal-800-40a);
   --salt-palette-accent-weakest: var(--salt-color-teal-900);
-  --salt-palette-accent-action-hover: var(--salt-color-teal-600);
-  --salt-palette-accent-action-active: var(--salt-color-teal-800);
 }
diff --git a/packages/theme/css/palette/alpha-next.css b/packages/theme/css/palette/alpha-next.css
index 698cbfc3a8..88d0ffcbfc 100644
--- a/packages/theme/css/palette/alpha-next.css
+++ b/packages/theme/css/palette/alpha-next.css
@@ -1,19 +1,21 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
 .salt-theme.salt-theme-next[data-mode="light"] {
   --salt-palette-alpha: var(--salt-color-black-30a);
+  --salt-palette-alpha-backdrop: var(--salt-color-white-70a);
+  --salt-palette-alpha-none: var(--salt-color-black-0a);
   --salt-palette-alpha-strong: var(--salt-color-black-45a);
   --salt-palette-alpha-weak: var(--salt-color-black-15a);
   --salt-palette-alpha-weaker: var(--salt-color-black-10a);
-
-  --salt-palette-alpha-backdrop: var(--salt-color-white-70a);
-  --salt-palette-alpha-none: transparent;
 }
 
 .salt-theme.salt-theme-next[data-mode="dark"] {
   --salt-palette-alpha: var(--salt-color-white-30a);
+  --salt-palette-alpha-backdrop: var(--salt-color-black-70a);
+  --salt-palette-alpha-none: var(--salt-color-white-0a);
   --salt-palette-alpha-strong: var(--salt-color-white-45a);
   --salt-palette-alpha-weak: var(--salt-color-white-15a);
   --salt-palette-alpha-weaker: var(--salt-color-white-10a);
-
-  --salt-palette-alpha-backdrop: var(--salt-color-black-70a);
-  --salt-palette-alpha-none: transparent;
 }
diff --git a/packages/theme/css/palette/foreground-next.css b/packages/theme/css/palette/foreground-next.css
index c895249723..e74eab76c5 100644
--- a/packages/theme/css/palette/foreground-next.css
+++ b/packages/theme/css/palette/foreground-next.css
@@ -1,21 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
 .salt-theme.salt-theme-next[data-mode="light"] {
   --salt-palette-foreground-active: var(--salt-color-blue-700);
   --salt-palette-foreground-hover: var(--salt-color-blue-600);
   --salt-palette-foreground-primary: var(--salt-color-black);
-  --salt-palette-foreground-primary-disabled: var(--salt-color-black-40a);
   --salt-palette-foreground-primary-alt: var(--salt-color-white);
   --salt-palette-foreground-primary-alt-disabled: var(--salt-color-white-40a);
+  --salt-palette-foreground-primary-disabled: var(--salt-color-black-40a);
   --salt-palette-foreground-secondary: var(--salt-color-gray-700);
   --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-700-40a);
   --salt-palette-foreground-visited: var(--salt-color-purple-800);
 }
+
 .salt-theme.salt-theme-next[data-mode="dark"] {
   --salt-palette-foreground-active: var(--salt-color-blue-300);
   --salt-palette-foreground-hover: var(--salt-color-blue-400);
   --salt-palette-foreground-primary: var(--salt-color-white);
-  --salt-palette-foreground-primary-disabled: var(--salt-color-white-40a);
   --salt-palette-foreground-primary-alt: var(--salt-color-white);
   --salt-palette-foreground-primary-alt-disabled: var(--salt-color-white-40a);
+  --salt-palette-foreground-primary-disabled: var(--salt-color-white-40a);
   --salt-palette-foreground-secondary: var(--salt-color-gray-300);
   --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-300-40a);
   --salt-palette-foreground-visited: var(--salt-color-purple-200);
diff --git a/packages/theme/css/palette/negative-next.css b/packages/theme/css/palette/negative-next.css
index 2a3685b078..8849616833 100644
--- a/packages/theme/css/palette/negative-next.css
+++ b/packages/theme/css/palette/negative-next.css
@@ -1,19 +1,23 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
 .salt-theme.salt-theme-next[data-mode="light"] {
   --salt-palette-negative: var(--salt-color-red-500);
-  --salt-palette-negative-strong: var(--salt-color-red-600);
-  --salt-palette-negative-strong-disabled: var(--salt-color-red-600-40a);
-  --salt-palette-negative-weak: var(--salt-color-red-100);
-  --salt-palette-negative-action-hover: var(--salt-color-red-600);
   --salt-palette-negative-action-active: var(--salt-color-red-800);
+  --salt-palette-negative-action-hover: var(--salt-color-red-600);
   --salt-palette-negative-disabled: var(--salt-color-red-500-40a);
+  --salt-palette-negative-strong: var(--salt-color-red-600);
+  --salt-palette-negative-strong-disabled: var(--salt-color-red-600-40a);
+  --salt-palette-negative-weakest: var(--salt-color-red-100);
 }
 
 .salt-theme.salt-theme-next[data-mode="dark"] {
   --salt-palette-negative: var(--salt-color-red-500);
-  --salt-palette-negative-strong: var(--salt-color-red-400);
-  --salt-palette-negative-strong-disabled: var(--salt-color-red-400-40a);
-  --salt-palette-negative-weak: var(--salt-color-red-900);
-  --salt-palette-negative-action-hover: var(--salt-color-red-600);
   --salt-palette-negative-action-active: var(--salt-color-red-800);
+  --salt-palette-negative-action-hover: var(--salt-color-red-600);
   --salt-palette-negative-disabled: var(--salt-color-red-500-40a);
+  --salt-palette-negative-strong: var(--salt-color-red-400);
+  --salt-palette-negative-strong-disabled: var(--salt-color-red-400-40a);
+  --salt-palette-negative-weakest: var(--salt-color-red-900);
 }
diff --git a/packages/theme/css/palette/neutral-next.css b/packages/theme/css/palette/neutral-next.css
index ada53feec3..7a92000e77 100644
--- a/packages/theme/css/palette/neutral-next.css
+++ b/packages/theme/css/palette/neutral-next.css
@@ -1,34 +1,35 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
 .salt-theme.salt-theme-next[data-mode="light"] {
   --salt-palette-neutral: var(--salt-color-gray-500);
+  --salt-palette-neutral-action-active: var(--salt-color-gray-800);
+  --salt-palette-neutral-action-hover: var(--salt-color-gray-600);
   --salt-palette-neutral-disabled: var(--salt-color-gray-500-40a);
   --salt-palette-neutral-readonly: var(--salt-color-gray-500-10a);
   --salt-palette-neutral-strong: var(--salt-color-gray-600);
   --salt-palette-neutral-strong-disabled: var(--salt-color-gray-600-40a);
-  --salt-palette-neutral-stronger: var(--salt-color-gray-700);
-  --salt-palette-neutral-strongest: var(--salt-color-gray-800);
   --salt-palette-neutral-weak: var(--salt-color-gray-400);
   --salt-palette-neutral-weak-disabled: var(--salt-color-gray-400-40a);
+  --salt-palette-neutral-weak-readonly: var(--salt-color-gray-400-10a);
   --salt-palette-neutral-weaker: var(--salt-color-gray-300);
   --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-300-40a);
-  --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-300-10a);
   --salt-palette-neutral-weakest: var(--salt-color-gray-200);
-  --salt-palette-neutral-action-hover: var(--salt-color-gray-600);
-  --salt-palette-neutral-action-active: var(--salt-color-gray-800);
 }
+
 .salt-theme.salt-theme-next[data-mode="dark"] {
   --salt-palette-neutral: var(--salt-color-gray-500);
+  --salt-palette-neutral-action-active: var(--salt-color-gray-800);
+  --salt-palette-neutral-action-hover: var(--salt-color-gray-600);
   --salt-palette-neutral-disabled: var(--salt-color-gray-500-40a);
   --salt-palette-neutral-readonly: var(--salt-color-gray-500-10a);
   --salt-palette-neutral-strong: var(--salt-color-gray-400);
   --salt-palette-neutral-strong-disabled: var(--salt-color-gray-400-40a);
-  --salt-palette-neutral-stronger: var(--salt-color-gray-300);
-  --salt-palette-neutral-strongest: var(--salt-color-gray-200);
   --salt-palette-neutral-weak: var(--salt-color-gray-600);
   --salt-palette-neutral-weak-disabled: var(--salt-color-gray-600-40a);
+  --salt-palette-neutral-weak-readonly: var(--salt-color-gray-600-10a);
   --salt-palette-neutral-weaker: var(--salt-color-gray-700);
   --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-700-40a);
-  --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-700-10a);
   --salt-palette-neutral-weakest: var(--salt-color-gray-800);
-  --salt-palette-neutral-action-hover: var(--salt-color-gray-600);
-  --salt-palette-neutral-action-active: var(--salt-color-gray-800);
 }
diff --git a/packages/theme/css/palette/warning-next.css b/packages/theme/css/palette/warning-next.css
index 3cc642d850..0228076aa9 100644
--- a/packages/theme/css/palette/warning-next.css
+++ b/packages/theme/css/palette/warning-next.css
@@ -1,19 +1,23 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
 .salt-theme.salt-theme-next[data-mode="light"] {
   --salt-palette-warning: var(--salt-color-orange-500);
+  --salt-palette-warning-action-active: var(--salt-color-orange-800);
+  --salt-palette-warning-action-hover: var(--salt-color-orange-600);
   --salt-palette-warning-disabled: var(--salt-color-orange-500-40a);
   --salt-palette-warning-strong: var(--salt-color-orange-600);
   --salt-palette-warning-strong-disabled: var(--salt-color-orange-600-40a);
-  --salt-palette-warning-weak: var(--salt-color-orange-100);
-  --salt-palette-warning-action-hover: var(--salt-color-orange-600);
-  --salt-palette-warning-action-active: var(--salt-color-orange-800);
+  --salt-palette-warning-weakest: var(--salt-color-orange-100);
 }
 
 .salt-theme.salt-theme-next[data-mode="dark"] {
   --salt-palette-warning: var(--salt-color-orange-500);
+  --salt-palette-warning-action-active: var(--salt-color-orange-800);
+  --salt-palette-warning-action-hover: var(--salt-color-orange-600);
   --salt-palette-warning-disabled: var(--salt-color-orange-500-40a);
   --salt-palette-warning-strong: var(--salt-color-orange-400);
   --salt-palette-warning-strong-disabled: var(--salt-color-orange-400-40a);
-  --salt-palette-warning-weak: var(--salt-color-orange-900);
-  --salt-palette-warning-action-hover: var(--salt-color-orange-600);
-  --salt-palette-warning-action-active: var(--salt-color-orange-800);
+  --salt-palette-warning-weakest: var(--salt-color-orange-900);
 }
diff --git a/packages/theme/scripts/build-json.mjs b/packages/theme/scripts/build-json.mjs
index 1795cf7fce..ec1229f20f 100644
--- a/packages/theme/scripts/build-json.mjs
+++ b/packages/theme/scripts/build-json.mjs
@@ -31,7 +31,8 @@ function getStyleDictionaryConfig({ modes, densities, accents }) {
     ],
     // usesDtcg: true,
     platforms: {
-      css: {
+      // Use this to build into local /dist folder to test things, another block below should build to actual /css folder
+      cssTest: {
         buildPath: "dist/css/",
         prefix: "salt",
         transforms: [
@@ -53,6 +54,16 @@ function getStyleDictionaryConfig({ modes, densities, accents }) {
           ...getCharacteristicsNextFiles(),
         ],
       },
+      cssProd: {
+        buildPath: "css/",
+        prefix: "salt",
+        transforms: [
+          "attribute/cti",
+          "salt-ds/name/kebab", // Custom transform, see below
+          "salt-ds/value/px",
+        ],
+        files: [...getPaletteNextFiles({ modes, densities, accents })],
+      },
     },
   };
 }
@@ -82,5 +93,5 @@ saltStyleDictionary.registerTransform(saltValuePx);
 // Custom transform - https://styledictionary.com/reference/hooks/transforms/
 saltStyleDictionary.registerTransform(saltNameKebab);
 const sd = await saltStyleDictionary.extend(config);
-sd.cleanAllPlatforms();
+// sd.cleanAllPlatforms();
 sd.buildAllPlatforms();
diff --git a/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs b/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
index 5e981231e4..a6fd72f02c 100644
--- a/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
+++ b/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
@@ -71,6 +71,7 @@ export const getFoundationCurveNextFile = ({ densities }) => {
   };
 };
 
+// TODO: this is not the complete list yet
 const paletteNextList = [
   "accent",
   "corner",
@@ -85,10 +86,10 @@ const paletteNextList = [
 // 2 sets of palette files set, one with 4 $modes ('blue/teal-light/dark'), one with 2 $modes ('light/dark')
 export const getPaletteNextFiles = ({ modes, densities, accents }) => [
   ...paletteNextList.map((paletteNextType) => {
-    const accentModeRules = modes.reduce((prev, mode) => {
+    const accentModeRules = accents.reduce((prev, accent) => {
       // TODO: restructure `./palette/` files to per palette family, so that only those needing 4 combination (accents * modes) will generate 4 block of CSS code?
       // Or - should it be smarter when combining modes?
-      for (const accent of accents) {
+      for (const mode of modes) {
         prev.push({
           selector: `.salt-theme.salt-theme-next[data-mode="${mode}"][data-accent="${accent}"]`,
           modeIdentifier: `${accent}-${mode}`,
diff --git a/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs b/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs
index 4cb6ad50c3..840927f946 100644
--- a/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs
+++ b/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs
@@ -71,12 +71,6 @@ export const cssMultiModes = async ({
   console.log("salt-ds/css/multi-modes rules", rules);
   // add single theme css
   for (const { selector, matcher, modeIdentifier } of rules) {
-    let preludes = [selector];
-
-    // remove invalid preludes
-    preludes = preludes.filter(Boolean);
-
-    //
     // hack the system a bit:
     // replace filteredDictionary.tokens, token.original.$value with token.original.$mode
     // This approach has the consequence of needing all mode values existed given `$value` would be overridden
@@ -101,12 +95,16 @@ export const cssMultiModes = async ({
       outputReferences,
       formatting: mergedFormatting,
       usesDtcg,
-    });
-    // additional modes
-    let cssWithSelector = css;
-    for (const prelude of preludes.reverse()) {
-      cssWithSelector = `${prelude} { ${cssWithSelector} }`;
-    }
+    })
+      .split("\n")
+      .sort((a, b) => {
+        // Sort by names before ":"
+        return a.split(":")[0].localeCompare(b.split(":")[0]);
+      })
+      .join("\n");
+
+    const cssWithSelector = `${selector} { ${css} }`;
+
     // add css with or without query
     output.push(cssWithSelector);
   }
diff --git a/packages/theme/tokens/characteristics/theme-next.tokens.json b/packages/theme/tokens/characteristics/characteristics-next.tokens.json
similarity index 100%
rename from packages/theme/tokens/characteristics/theme-next.tokens.json
rename to packages/theme/tokens/characteristics/characteristics-next.tokens.json
diff --git a/packages/theme/tokens/foundation/foundations-next.tokens.json b/packages/theme/tokens/foundation/rest-foundations-next.tokens.json
similarity index 100%
rename from packages/theme/tokens/foundation/foundations-next.tokens.json
rename to packages/theme/tokens/foundation/rest-foundations-next.tokens.json

From 90e5bc2bb3a6946b662b27a91f11f4b7d6a94f62 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Fri, 29 Nov 2024 10:44:58 +0000
Subject: [PATCH 24/35] Reorder color.tokens, add background prefix to some
 colors

---
 .../tokens/foundation/colors-next.tokens.json | 114 +++++++++---------
 1 file changed, 58 insertions(+), 56 deletions(-)

diff --git a/packages/theme/tokens/foundation/colors-next.tokens.json b/packages/theme/tokens/foundation/colors-next.tokens.json
index 592eeb6fe6..5a8c5a034f 100644
--- a/packages/theme/tokens/foundation/colors-next.tokens.json
+++ b/packages/theme/tokens/foundation/colors-next.tokens.json
@@ -4,42 +4,6 @@
       "$type": "color",
       "$value": "#ffffff"
     },
-    "snow": {
-      "$type": "color",
-      "$value": "#ffffff"
-    },
-    "marble": {
-      "$type": "color",
-      "$value": "#f5f7f8"
-    },
-    "limestone": {
-      "$type": "color",
-      "$value": "#faf8f2"
-    },
-    "titanium": {
-      "$type": "color",
-      "$value": "#e2e4e5"
-    },
-    "charcoal": {
-      "$type": "color",
-      "$value": "#474c50"
-    },
-    "leather": {
-      "$type": "color",
-      "$value": "#26292b"
-    },
-    "granite": {
-      "$type": "color",
-      "$value": "#1a2229"
-    },
-    "jet": {
-      "$type": "color",
-      "$value": "#101820"
-    },
-    "black": {
-      "$type": "color",
-      "$value": "#000000"
-    },
     "gray": {
       "100": {
         "$type": "color",
@@ -78,6 +42,10 @@
         "$value": "#292e33"
       }
     },
+    "black": {
+      "$type": "color",
+      "$value": "#000000"
+    },
     "blue": {
       "100": {
         "$type": "color",
@@ -116,80 +84,80 @@
         "$value": "#001736"
       }
     },
-    "teal": {
+    "green": {
       "100": {
         "$type": "color",
-        "$value": "#dbf5f7"
+        "$value": "#eaf5f2"
       },
       "200": {
         "$type": "color",
-        "$value": "#afe0ed"
+        "$value": "#b8e5d1"
       },
       "300": {
         "$type": "color",
-        "$value": "#83c0d6"
+        "$value": "#89ccad"
       },
       "400": {
         "$type": "color",
-        "$value": "#4ca1c2"
+        "$value": "#53b087"
       },
       "500": {
         "$type": "color",
-        "$value": "#1b7f9e"
+        "$value": "#00875d"
       },
       "600": {
         "$type": "color",
-        "$value": "#12647e"
+        "$value": "#006b48"
       },
       "700": {
         "$type": "color",
-        "$value": "#094a60"
+        "$value": "#005637"
       },
       "800": {
         "$type": "color",
-        "$value": "#033142"
+        "$value": "#003f25"
       },
       "900": {
         "$type": "color",
-        "$value": "#001b29"
+        "$value": "#002915"
       }
     },
-    "green": {
+    "teal": {
       "100": {
         "$type": "color",
-        "$value": "#eaf5f2"
+        "$value": "#dbf5f7"
       },
       "200": {
         "$type": "color",
-        "$value": "#b8e5d1"
+        "$value": "#afe0ed"
       },
       "300": {
         "$type": "color",
-        "$value": "#89ccad"
+        "$value": "#83c0d6"
       },
       "400": {
         "$type": "color",
-        "$value": "#53b087"
+        "$value": "#4ca1c2"
       },
       "500": {
         "$type": "color",
-        "$value": "#00875d"
+        "$value": "#1b7f9e"
       },
       "600": {
         "$type": "color",
-        "$value": "#006b48"
+        "$value": "#12647e"
       },
       "700": {
         "$type": "color",
-        "$value": "#005637"
+        "$value": "#094a60"
       },
       "800": {
         "$type": "color",
-        "$value": "#003f25"
+        "$value": "#033142"
       },
       "900": {
         "$type": "color",
-        "$value": "#002915"
+        "$value": "#001b29"
       }
     },
     "orange": {
@@ -688,6 +656,40 @@
         }
       }
     },
+    "background": {
+      "snow": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "marble": {
+        "$type": "color",
+        "$value": "#f5f7f8"
+      },
+      "limestone": {
+        "$type": "color",
+        "$value": "#faf8f2"
+      },
+      "titanium": {
+        "$type": "color",
+        "$value": "#e2e4e5"
+      },
+      "charcoal": {
+        "$type": "color",
+        "$value": "#474c50"
+      },
+      "jet": {
+        "$type": "color",
+        "$value": "#101820"
+      },
+      "granite": {
+        "$type": "color",
+        "$value": "#1a2229"
+      },
+      "leather": {
+        "$type": "color",
+        "$value": "#26292b"
+      }
+    },
     "figma-only": {
       "chase": {
         "black": {

From 7e675a9221e46f9dbafb8b6e6db2d0e2e0252219 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Fri, 29 Nov 2024 10:51:46 +0000
Subject: [PATCH 25/35] add alph.background prefix to some colors

---
 .../tokens/foundation/colors-next.tokens.json | 74 ++++++++++---------
 .../tokens/palette/palette-next.tokens.json   | 36 ++++-----
 .../palette/src/blue-dark-next.tokens.json    | 12 +--
 .../palette/src/blue-light-next.tokens.json   | 12 +--
 .../palette/src/teal-dark-next.tokens.json    | 12 +--
 .../palette/src/teal-light-next.tokens.json   | 12 +--
 6 files changed, 80 insertions(+), 78 deletions(-)

diff --git a/packages/theme/tokens/foundation/colors-next.tokens.json b/packages/theme/tokens/foundation/colors-next.tokens.json
index 5a8c5a034f..bfc84c5938 100644
--- a/packages/theme/tokens/foundation/colors-next.tokens.json
+++ b/packages/theme/tokens/foundation/colors-next.tokens.json
@@ -345,42 +345,6 @@
           "$value": "#ffffffcc"
         }
       },
-      "snow": {
-        "40a": {
-          "$type": "color",
-          "$value": "#ffffff66"
-        }
-      },
-      "marble": {
-        "40a": {
-          "$type": "color",
-          "$value": "#f2f4f666"
-        }
-      },
-      "limestone": {
-        "40a": {
-          "$type": "color",
-          "$value": "#faf8f266"
-        }
-      },
-      "charcoal": {
-        "40a": {
-          "$type": "color",
-          "$value": "#474c5066"
-        }
-      },
-      "leather": {
-        "40a": {
-          "$type": "color",
-          "$value": "#26292b66"
-        }
-      },
-      "jet": {
-        "40a": {
-          "$type": "color",
-          "$value": "#10182066"
-        }
-      },
       "black": {
         "0a": {
           "$type": "color",
@@ -654,6 +618,44 @@
             "$value": "#ba172966"
           }
         }
+      },
+      "background": {
+        "snow": {
+          "40a": {
+            "$type": "color",
+            "$value": "#ffffff66"
+          }
+        },
+        "marble": {
+          "40a": {
+            "$type": "color",
+            "$value": "#f2f4f666"
+          }
+        },
+        "limestone": {
+          "40a": {
+            "$type": "color",
+            "$value": "#faf8f266"
+          }
+        },
+        "charcoal": {
+          "40a": {
+            "$type": "color",
+            "$value": "#474c5066"
+          }
+        },
+        "leather": {
+          "40a": {
+            "$type": "color",
+            "$value": "#26292b66"
+          }
+        },
+        "jet": {
+          "40a": {
+            "$type": "color",
+            "$value": "#10182066"
+          }
+        }
       }
     },
     "background": {
diff --git a/packages/theme/tokens/palette/palette-next.tokens.json b/packages/theme/tokens/palette/palette-next.tokens.json
index b340831f6d..d993ab681b 100644
--- a/packages/theme/tokens/palette/palette-next.tokens.json
+++ b/packages/theme/tokens/palette/palette-next.tokens.json
@@ -185,50 +185,50 @@
     "background": {
       "primary": {
         "$type": "color",
-        "$value": "{color.snow}",
+        "$value": "{color.background.snow}",
         "$modes": {
-          "light": "{color.snow}",
-          "dark": "{color.jet}"
+          "light": "{color.background.snow}",
+          "dark": "{color.background.jet}"
         }
       },
       "primary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.snow.40a}",
+        "$value": "{color.alpha.background.snow.40a}",
         "$modes": {
-          "light": "{color.alpha.snow.40a}",
-          "dark": "{color.alpha.jet.40a}"
+          "light": "{color.alpha.background.snow.40a}",
+          "dark": "{color.alpha.background.jet.40a}"
         }
       },
       "secondary": {
         "$type": "color",
-        "$value": "{color.marble}",
+        "$value": "{color.background.marble}",
         "$modes": {
-          "light": "{color.marble}",
-          "dark": "{color.granite}"
+          "light": "{color.background.marble}",
+          "dark": "{color.background.granite}"
         }
       },
       "secondary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.marble.40a}",
+        "$value": "{color.alpha.background.marble.40a}",
         "$modes": {
-          "light": "{color.alpha.marble.40a}",
-          "dark": "{color.alpha.charcoal.40a}"
+          "light": "{color.alpha.background.marble.40a}",
+          "dark": "{color.alpha.background.charcoal.40a}"
         }
       },
       "tertiary": {
         "$type": "color",
-        "$value": "{color.limestone}",
+        "$value": "{color.background.limestone}",
         "$modes": {
-          "light": "{color.limestone}",
-          "dark": "{color.leather}"
+          "light": "{color.background.limestone}",
+          "dark": "{color.background.leather}"
         }
       },
       "tertiary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.limestone.40a}",
+        "$value": "{color.alpha.background.limestone.40a}",
         "$modes": {
-          "light": "{color.alpha.limestone.40a}",
-          "dark": "{color.alpha.leather.40a}"
+          "light": "{color.alpha.background.limestone.40a}",
+          "dark": "{color.alpha.background.leather.40a}"
         }
       }
     },
diff --git a/packages/theme/tokens/palette/src/blue-dark-next.tokens.json b/packages/theme/tokens/palette/src/blue-dark-next.tokens.json
index 49ae5c6655..351613e48c 100644
--- a/packages/theme/tokens/palette/src/blue-dark-next.tokens.json
+++ b/packages/theme/tokens/palette/src/blue-dark-next.tokens.json
@@ -83,27 +83,27 @@
     "background": {
       "primary": {
         "$type": "color",
-        "$value": "{color.jet}"
+        "$value": "{color.background.jet}"
       },
       "primary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.jet.40a}"
+        "$value": "{color.alpha.background.jet.40a}"
       },
       "secondary": {
         "$type": "color",
-        "$value": "{color.granite}"
+        "$value": "{color.background.granite}"
       },
       "secondary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.charcoal.40a}"
+        "$value": "{color.alpha.background.charcoal.40a}"
       },
       "tertiary": {
         "$type": "color",
-        "$value": "{color.leather}"
+        "$value": "{color.background.leather}"
       },
       "tertiary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.leather.40a}"
+        "$value": "{color.alpha.background.leather.40a}"
       }
     },
     "categorical": {
diff --git a/packages/theme/tokens/palette/src/blue-light-next.tokens.json b/packages/theme/tokens/palette/src/blue-light-next.tokens.json
index 648f9e69b1..c2bfff9e50 100644
--- a/packages/theme/tokens/palette/src/blue-light-next.tokens.json
+++ b/packages/theme/tokens/palette/src/blue-light-next.tokens.json
@@ -83,27 +83,27 @@
     "background": {
       "primary": {
         "$type": "color",
-        "$value": "{color.snow}"
+        "$value": "{color.background.snow}"
       },
       "primary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.snow.40a}"
+        "$value": "{color.alpha.background.snow.40a}"
       },
       "secondary": {
         "$type": "color",
-        "$value": "{color.marble}"
+        "$value": "{color.background.marble}"
       },
       "secondary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.marble.40a}"
+        "$value": "{color.alpha.background.marble.40a}"
       },
       "tertiary": {
         "$type": "color",
-        "$value": "{color.limestone}"
+        "$value": "{color.background.limestone}"
       },
       "tertiary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.limestone.40a}"
+        "$value": "{color.alpha.background.limestone.40a}"
       }
     },
     "categorical": {
diff --git a/packages/theme/tokens/palette/src/teal-dark-next.tokens.json b/packages/theme/tokens/palette/src/teal-dark-next.tokens.json
index dbfdd22f29..adc49a3f24 100644
--- a/packages/theme/tokens/palette/src/teal-dark-next.tokens.json
+++ b/packages/theme/tokens/palette/src/teal-dark-next.tokens.json
@@ -83,27 +83,27 @@
     "background": {
       "primary": {
         "$type": "color",
-        "$value": "{color.jet}"
+        "$value": "{color.background.jet}"
       },
       "primary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.jet.40a}"
+        "$value": "{color.alpha.background.jet.40a}"
       },
       "secondary": {
         "$type": "color",
-        "$value": "{color.granite}"
+        "$value": "{color.background.granite}"
       },
       "secondary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.charcoal.40a}"
+        "$value": "{color.alpha.background.charcoal.40a}"
       },
       "tertiary": {
         "$type": "color",
-        "$value": "{color.leather}"
+        "$value": "{color.background.leather}"
       },
       "tertiary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.leather.40a}"
+        "$value": "{color.alpha.background.leather.40a}"
       }
     },
     "categorical": {
diff --git a/packages/theme/tokens/palette/src/teal-light-next.tokens.json b/packages/theme/tokens/palette/src/teal-light-next.tokens.json
index e8256b83ad..8248b9c5fa 100644
--- a/packages/theme/tokens/palette/src/teal-light-next.tokens.json
+++ b/packages/theme/tokens/palette/src/teal-light-next.tokens.json
@@ -83,27 +83,27 @@
     "background": {
       "primary": {
         "$type": "color",
-        "$value": "{color.snow}"
+        "$value": "{color.background.snow}"
       },
       "primary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.snow.40a}"
+        "$value": "{color.alpha.background.snow.40a}"
       },
       "secondary": {
         "$type": "color",
-        "$value": "{color.marble}"
+        "$value": "{color.background.marble}"
       },
       "secondary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.marble.40a}"
+        "$value": "{color.alpha.background.marble.40a}"
       },
       "tertiary": {
         "$type": "color",
-        "$value": "{color.limestone}"
+        "$value": "{color.background.limestone}"
       },
       "tertiary-disabled": {
         "$type": "color",
-        "$value": "{color.alpha.limestone.40a}"
+        "$value": "{color.alpha.background.limestone.40a}"
       }
     },
     "categorical": {

From e463c6e9664b0b2983dc101cee3d9f61e1d003b3 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Fri, 29 Nov 2024 10:54:18 +0000
Subject: [PATCH 26/35] Add foundation color/alpha next to prod css

---
 packages/theme/README.md                      |   4 +-
 packages/theme/css/foundations/alpha-next.css | 131 ++++++++++--------
 packages/theme/css/foundations/color-next.css |   4 +
 packages/theme/scripts/build-json.mjs         |   8 +-
 .../tokens/foundation/colors-next.tokens.json | 128 ++++++++---------
 5 files changed, 155 insertions(+), 120 deletions(-)

diff --git a/packages/theme/README.md b/packages/theme/README.md
index 2c4166887a..ce1832e1a6 100644
--- a/packages/theme/README.md
+++ b/packages/theme/README.md
@@ -12,7 +12,9 @@ This is a regular package
 1. Copy output to corresponding `*.tokens.json` file
 1. Modify color tokens
    1. remove `categorical.` from , e.g. replace `"{color.categorical` to `"{color`
+   1. added `background.` to a few background color raw tokens
 
 TODOs
 
-- [ ] Custom value tranformer for `foundation/alpha-next.css` tokens, to achieve `rgba` syntax from `packages/theme/css/foundations/alpha-next.css`
+- [ ] Custom value tranformer for `foundation/alpha-next.css` tokens, to achieve `rgba` syntax from `packages/theme/css/foundations/alpha-next.css`? Or this may not be needed given we generate these values
+- [ ] Better `alpha` foundation color generation, maybe use custom opacity modifier instead
diff --git a/packages/theme/css/foundations/alpha-next.css b/packages/theme/css/foundations/alpha-next.css
index 48bdb0bcf2..e0bd357970 100644
--- a/packages/theme/css/foundations/alpha-next.css
+++ b/packages/theme/css/foundations/alpha-next.css
@@ -1,57 +1,80 @@
-/* 
-TODO: discuss whether this should be an actual file, or should inline these values.
-con: If we offer these values, then it could misleading that we're offering all these values
+/**
+ * Do not edit directly, this file was auto-generated.
  */
+
 .salt-theme.salt-theme-next {
-  --salt-color-white-10a: rgba(var(--salt-color-white-rgb), 0.1);
-  --salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
-  --salt-color-white-20a: rgba(var(--salt-color-white-rgb), 0.2);
-  --salt-color-white-30a: rgba(var(--salt-color-white-rgb), 0.3);
-  --salt-color-white-40a: rgba(var(--salt-color-white-rgb), 0.4);
-  --salt-color-white-45a: rgba(var(--salt-color-white-rgb), 0.45);
-  --salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7);
-  --salt-color-black-10a: rgba(var(--salt-color-black-rgb), 0.1);
-  --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
-  --salt-color-black-20a: rgba(var(--salt-color-black-rgb), 0.2);
-  --salt-color-black-30a: rgba(var(--salt-color-black-rgb), 0.3);
-  --salt-color-black-40a: rgba(var(--salt-color-black-rgb), 0.4);
-  --salt-color-black-45a: rgba(var(--salt-color-black-rgb), 0.45);
-  --salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7);
-  --salt-color-blue-200-40a: rgba(var(--salt-color-blue-200-rgb), 0.4);
-  --salt-color-blue-300-40a: rgba(var(--salt-color-blue-300-rgb), 0.4);
-  --salt-color-blue-400-40a: rgba(var(--salt-color-blue-400-rgb), 0.4);
-  --salt-color-blue-500-40a: rgba(var(--salt-color-blue-500-rgb), 0.4);
-  --salt-color-blue-600-40a: rgba(var(--salt-color-blue-600-rgb), 0.4);
-  --salt-color-blue-700-40a: rgba(var(--salt-color-blue-700-rgb), 0.4);
-  --salt-color-blue-800-40a: rgba(var(--salt-color-blue-800-rgb), 0.4);
-  --salt-color-gray-300-10a: rgba(var(--salt-color-gray-300-rgb), 0.1);
-  --salt-color-gray-300-40a: rgba(var(--salt-color-gray-300-rgb), 0.4);
-  --salt-color-gray-400-40a: rgba(var(--salt-color-gray-400-rgb), 0.4);
-  --salt-color-gray-500-10a: rgba(var(--salt-color-gray-500-rgb), 0.1);
-  --salt-color-gray-500-40a: rgba(var(--salt-color-gray-500-rgb), 0.4);
-  --salt-color-gray-600-40a: rgba(var(--salt-color-gray-600-rgb), 0.4);
-  --salt-color-gray-700-10a: rgba(var(--salt-color-gray-700-rgb), 0.1);
-  --salt-color-gray-700-40a: rgba(var(--salt-color-gray-700-rgb), 0.4);
-  --salt-color-green-400-40a: rgba(var(--salt-color-green-400-rgb), 0.4);
-  --salt-color-green-500-40a: rgba(var(--salt-color-green-500-rgb), 0.4);
-  --salt-color-green-600-40a: rgba(var(--salt-color-green-600-rgb), 0.4);
-  --salt-color-orange-400-40a: rgba(var(--salt-color-orange-400-rgb), 0.4);
-  --salt-color-orange-500-40a: rgba(var(--salt-color-orange-500-rgb), 0.4);
-  --salt-color-orange-600-40a: rgba(var(--salt-color-orange-600-rgb), 0.4);
-  --salt-color-red-400-40a: rgba(var(--salt-color-red-400-rgb), 0.4);
-  --salt-color-red-500-40a: rgba(var(--salt-color-red-500-rgb), 0.4);
-  --salt-color-red-600-40a: rgba(var(--salt-color-red-600-rgb), 0.4);
-  --salt-color-teal-200-40a: rgba(var(--salt-color-teal-200-rgb), 0.4);
-  --salt-color-teal-300-40a: rgba(var(--salt-color-teal-300-rgb), 0.4);
-  --salt-color-teal-400-40a: rgba(var(--salt-color-teal-400-rgb), 0.4);
-  --salt-color-teal-500-40a: rgba(var(--salt-color-teal-500-rgb), 0.4);
-  --salt-color-teal-600-40a: rgba(var(--salt-color-teal-600-rgb), 0.4);
-  --salt-color-teal-700-40a: rgba(var(--salt-color-teal-700-rgb), 0.4);
-  --salt-color-teal-800-40a: rgba(var(--salt-color-teal-800-rgb), 0.4);
-  --salt-color-background-snow-40a: rgba(var(--salt-color-background-snow-rgb), 0.4);
-  --salt-color-background-marble-40a: rgba(var(--salt-color-background-marble-rgb), 0.4);
-  --salt-color-background-limestone-40a: rgba(var(--salt-color-background-limestone-rgb), 0.4);
-  --salt-color-background-granite-40a: rgba(var(--salt-color-background-granite-rgb), 0.4);
-  --salt-color-background-jet-40a: rgba(var(--salt-color-background-jet-rgb), 0.4);
-  --salt-color-background-leather-40a: rgba(var(--salt-color-background-leather-rgb), 0.4);
+  --salt-color-white-0a: rgba(255, 255, 255, 0);
+  --salt-color-white-5a: rgba(255, 255, 255, 0.05);
+  --salt-color-white-10a: rgba(255, 255, 255, 0.1);
+  --salt-color-white-15a: rgba(255, 255, 255, 0.15);
+  --salt-color-white-20a: rgba(255, 255, 255, 0.2);
+  --salt-color-white-25a: rgba(255, 255, 255, 0.25);
+  --salt-color-white-30a: rgba(255, 255, 255, 0.3);
+  --salt-color-white-35a: rgba(255, 255, 255, 0.35);
+  --salt-color-white-40a: rgba(255, 255, 255, 0.4);
+  --salt-color-white-45a: rgba(255, 255, 255, 0.45);
+  --salt-color-white-50a: rgba(255, 255, 255, 0.5);
+  --salt-color-white-55a: rgba(255, 255, 255, 0.55);
+  --salt-color-white-60a: rgba(255, 255, 255, 0.6);
+  --salt-color-white-65a: rgba(255, 255, 255, 0.65);
+  --salt-color-white-70a: rgba(255, 255, 255, 0.7);
+  --salt-color-white-75a: rgba(255, 255, 255, 0.75);
+  --salt-color-white-80a: rgba(255, 255, 255, 0.8);
+  --salt-color-black-0a: rgba(0, 0, 0, 0);
+  --salt-color-black-5a: rgba(0, 0, 0, 0.05);
+  --salt-color-black-10a: rgba(0, 0, 0, 0.1);
+  --salt-color-black-15a: rgba(0, 0, 0, 0.15);
+  --salt-color-black-20a: rgba(0, 0, 0, 0.2);
+  --salt-color-black-25a: rgba(0, 0, 0, 0.25);
+  --salt-color-black-30a: rgba(0, 0, 0, 0.3);
+  --salt-color-black-35a: rgba(0, 0, 0, 0.35);
+  --salt-color-black-40a: rgba(0, 0, 0, 0.4);
+  --salt-color-black-45a: rgba(0, 0, 0, 0.45);
+  --salt-color-black-50a: rgba(0, 0, 0, 0.5);
+  --salt-color-black-55a: rgba(0, 0, 0, 0.55);
+  --salt-color-black-60a: rgba(0, 0, 0, 0.6);
+  --salt-color-black-65a: rgba(0, 0, 0, 0.65);
+  --salt-color-black-70a: rgba(0, 0, 0, 0.7);
+  --salt-color-black-75a: rgba(0, 0, 0, 0.75);
+  --salt-color-black-80a: rgba(0, 0, 0, 0.8);
+  --salt-color-blue-200-40a: rgba(199, 222, 255, 0.4);
+  --salt-color-blue-300-40a: rgba(154, 189, 245, 0.4);
+  --salt-color-blue-400-40a: rgba(102, 156, 232, 0.4);
+  --salt-color-blue-500-40a: rgba(0, 120, 207, 0.4);
+  --salt-color-blue-500-0a: rgba(0, 120, 207, 0);
+  --salt-color-blue-600-40a: rgba(0, 94, 166, 0.4);
+  --salt-color-blue-700-40a: rgba(0, 69, 126, 0.4);
+  --salt-color-blue-800-40a: rgba(0, 45, 89, 0.4);
+  --salt-color-gray-300-40a: rgba(177, 181, 185, 0.4);
+  --salt-color-gray-400-10a: rgba(145, 149, 154, 0.1);
+  --salt-color-gray-400-40a: rgba(145, 149, 154, 0.4);
+  --salt-color-gray-500-0a: rgba(114, 119, 125, 0);
+  --salt-color-gray-500-10a: rgba(114, 119, 125, 0.1);
+  --salt-color-gray-500-40a: rgba(114, 119, 125, 0.4);
+  --salt-color-gray-600-10a: rgba(95, 100, 106, 0.1);
+  --salt-color-gray-600-40a: rgba(97, 102, 108, 0.4);
+  --salt-color-gray-700-40a: rgba(76, 81, 87, 0.4);
+  --salt-color-orange-400-40a: rgba(232, 122, 56, 0.4);
+  --salt-color-orange-500-40a: rgba(199, 83, 0, 0.4);
+  --salt-color-orange-600-40a: rgba(163, 68, 0, 0.4);
+  --salt-color-red-400-40a: rgba(255, 93, 87, 0.4);
+  --salt-color-red-500-40a: rgba(229, 33, 53, 0.4);
+  --salt-color-red-600-40a: rgba(186, 23, 41, 0.4);
+  --salt-color-teal-200-40a: rgba(175, 224, 237, 0.4);
+  --salt-color-teal-300-40a: rgba(131, 192, 214, 0.4);
+  --salt-color-teal-400-40a: rgba(76, 161, 194, 0.4);
+  --salt-color-teal-500-40a: rgba(27, 127, 158, 0.4);
+  --salt-color-teal-500-0a: rgba(27, 127, 158, 0);
+  --salt-color-teal-600-40a: rgba(18, 100, 126, 0.4);
+  --salt-color-teal-700-40a: rgba(9, 74, 96, 0.4);
+  --salt-color-teal-800-40a: rgba(3, 49, 66, 0.4);
+  --salt-color-green-400-40a: rgba(83, 176, 135, 0.4);
+  --salt-color-green-500-40a: rgba(0, 135, 93, 0.4);
+  --salt-color-green-600-40a: rgba(0, 107, 72, 0.4);
+  --salt-color-background-snow-40a: rgba(255, 255, 255, 0.4);
+  --salt-color-background-marble-40a: rgba(242, 244, 246, 0.4);
+  --salt-color-background-limestone-40a: rgba(250, 248, 242, 0.4);
+  --salt-color-background-charcoal-40a: rgba(71, 76, 80, 0.4);
+  --salt-color-background-leather-40a: rgba(38, 41, 43, 0.4);
+  --salt-color-background-jet-40a: rgba(16, 24, 32, 0.4);
 }
diff --git a/packages/theme/css/foundations/color-next.css b/packages/theme/css/foundations/color-next.css
index b1e45082a3..ed4ad4e708 100644
--- a/packages/theme/css/foundations/color-next.css
+++ b/packages/theme/css/foundations/color-next.css
@@ -1,3 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
 .salt-theme.salt-theme-next {
   --salt-color-white-rgb: 255, 255, 255;
   --salt-color-gray-100-rgb: 245, 247, 248;
diff --git a/packages/theme/scripts/build-json.mjs b/packages/theme/scripts/build-json.mjs
index ec1229f20f..113f0c41d7 100644
--- a/packages/theme/scripts/build-json.mjs
+++ b/packages/theme/scripts/build-json.mjs
@@ -39,6 +39,7 @@ function getStyleDictionaryConfig({ modes, densities, accents }) {
           "attribute/cti",
           "salt-ds/name/kebab", // Custom transform, see below
           "salt-ds/value/px",
+          "color/rgb",
           // "name/kebab", // https://github.com/amzn/style-dictionary/blob/0fcf229f78e334a5c6bec55725fe92a8de97590c/lib/common/transforms.js#L320-L325
           // "dimension/pixelToRem",
           //   "color/hexAlpha", // style-dictionary-utils transform // doesn't work with $value for some reason
@@ -61,8 +62,13 @@ function getStyleDictionaryConfig({ modes, densities, accents }) {
           "attribute/cti",
           "salt-ds/name/kebab", // Custom transform, see below
           "salt-ds/value/px",
+          "color/rgb",
+        ],
+        files: [
+          foundationColorsNextFile,
+          foundationAlphaNextFile,
+          ...getPaletteNextFiles({ modes, densities, accents }),
         ],
-        files: [...getPaletteNextFiles({ modes, densities, accents })],
       },
     },
   };
diff --git a/packages/theme/tokens/foundation/colors-next.tokens.json b/packages/theme/tokens/foundation/colors-next.tokens.json
index bfc84c5938..0d6f990de0 100644
--- a/packages/theme/tokens/foundation/colors-next.tokens.json
+++ b/packages/theme/tokens/foundation/colors-next.tokens.json
@@ -415,6 +415,54 @@
           "$value": "#000000cc"
         }
       },
+      "blue": {
+        "200": {
+          "40a": {
+            "$type": "color",
+            "$value": "#c7deff66"
+          }
+        },
+        "300": {
+          "40a": {
+            "$type": "color",
+            "$value": "#9abdf566"
+          }
+        },
+        "400": {
+          "40a": {
+            "$type": "color",
+            "$value": "#669ce866"
+          }
+        },
+        "500": {
+          "40a": {
+            "$type": "color",
+            "$value": "#0078cf66"
+          },
+          "0a": {
+            "$type": "color",
+            "$value": "#0078cf00"
+          }
+        },
+        "600": {
+          "40a": {
+            "$type": "color",
+            "$value": "#005ea666"
+          }
+        },
+        "700": {
+          "40a": {
+            "$type": "color",
+            "$value": "#00457e66"
+          }
+        },
+        "800": {
+          "40a": {
+            "$type": "color",
+            "$value": "#002d5966"
+          }
+        }
+      },
       "gray": {
         "300": {
           "40a": {
@@ -463,51 +511,43 @@
           }
         }
       },
-      "blue": {
-        "200": {
-          "40a": {
-            "$type": "color",
-            "$value": "#c7deff66"
-          }
-        },
-        "300": {
-          "40a": {
-            "$type": "color",
-            "$value": "#9abdf566"
-          }
-        },
+      "orange": {
         "400": {
           "40a": {
             "$type": "color",
-            "$value": "#669ce866"
+            "$value": "#e87a3866"
           }
         },
         "500": {
           "40a": {
             "$type": "color",
-            "$value": "#0078cf66"
-          },
-          "0a": {
-            "$type": "color",
-            "$value": "#0078cf00"
+            "$value": "#c7530066"
           }
         },
         "600": {
           "40a": {
             "$type": "color",
-            "$value": "#005ea666"
+            "$value": "#a3440066"
+          }
+        }
+      },
+      "red": {
+        "400": {
+          "40a": {
+            "$type": "color",
+            "$value": "#ff5d5766"
           }
         },
-        "700": {
+        "500": {
           "40a": {
             "$type": "color",
-            "$value": "#00457e66"
+            "$value": "#e5213566"
           }
         },
-        "800": {
+        "600": {
           "40a": {
             "$type": "color",
-            "$value": "#002d5966"
+            "$value": "#ba172966"
           }
         }
       },
@@ -579,46 +619,6 @@
           }
         }
       },
-      "orange": {
-        "400": {
-          "40a": {
-            "$type": "color",
-            "$value": "#e87a3866"
-          }
-        },
-        "500": {
-          "40a": {
-            "$type": "color",
-            "$value": "#c7530066"
-          }
-        },
-        "600": {
-          "40a": {
-            "$type": "color",
-            "$value": "#a3440066"
-          }
-        }
-      },
-      "red": {
-        "400": {
-          "40a": {
-            "$type": "color",
-            "$value": "#ff5d5766"
-          }
-        },
-        "500": {
-          "40a": {
-            "$type": "color",
-            "$value": "#e5213566"
-          }
-        },
-        "600": {
-          "40a": {
-            "$type": "color",
-            "$value": "#ba172966"
-          }
-        }
-      },
       "background": {
         "snow": {
           "40a": {

From 732e3ae14a77deccb610d69e6d7b9790bf4176b7 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Fri, 29 Nov 2024 11:12:16 +0000
Subject: [PATCH 27/35] Add slash to tooling/ts package.json

---
 tooling/typescript-turbosnap/package.json | 1 +
 yarn.lock                                 | 1 +
 2 files changed, 2 insertions(+)

diff --git a/tooling/typescript-turbosnap/package.json b/tooling/typescript-turbosnap/package.json
index 8e4ee064b5..a9586f9093 100644
--- a/tooling/typescript-turbosnap/package.json
+++ b/tooling/typescript-turbosnap/package.json
@@ -4,6 +4,7 @@
   "main": "./src/index.ts",
   "version": "1.0.0",
   "dependencies": {
+    "slash": "^4.0.0",
     "ts-morph": "^15.1.0"
   },
   "peerDependencies": {
diff --git a/yarn.lock b/yarn.lock
index 4d2093e70f..5128658b6d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -17983,6 +17983,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "vite-plugin-typescript-turbosnap@workspace:tooling/typescript-turbosnap"
   dependencies:
+    slash: "npm:^4.0.0"
     ts-morph: "npm:^15.1.0"
   peerDependencies:
     vite: ^3.0.0

From bd3ae6cf278845fd788b909a611e32dd19f04eaa Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Fri, 29 Nov 2024 11:22:46 +0000
Subject: [PATCH 28/35] Use out of box `css/variables` format

---
 packages/theme/css/foundations/alpha-next.css |  1 +
 packages/theme/css/foundations/color-next.css |  1 +
 .../sd-utils/files/theme-next-tokens.mjs      | 21 ++++++++++++++++---
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/theme/css/foundations/alpha-next.css b/packages/theme/css/foundations/alpha-next.css
index e0bd357970..37820527df 100644
--- a/packages/theme/css/foundations/alpha-next.css
+++ b/packages/theme/css/foundations/alpha-next.css
@@ -1,4 +1,5 @@
 /**
+ * Generated by `scripts/build-json.mjs`
  * Do not edit directly, this file was auto-generated.
  */
 
diff --git a/packages/theme/css/foundations/color-next.css b/packages/theme/css/foundations/color-next.css
index ed4ad4e708..7a817447d0 100644
--- a/packages/theme/css/foundations/color-next.css
+++ b/packages/theme/css/foundations/color-next.css
@@ -1,4 +1,5 @@
 /**
+ * Generated by `scripts/build-json.mjs`
  * Do not edit directly, this file was auto-generated.
  */
 
diff --git a/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs b/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
index a6fd72f02c..aed1ecf78e 100644
--- a/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
+++ b/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
@@ -1,10 +1,13 @@
 export const foundationColorsNextFile = {
-  format: "css/advanced",
+  format: "css/variables",
   destination: "foundations/color-next.css",
   options: {
     selector: ".salt-theme.salt-theme-next", // defaults to :root; set to false to disable
     outputReferences: true,
     usesDtcg: true,
+    formatting: {
+      header: "/**\n * Generated by `scripts/build-json.mjs`\n",
+    },
   },
   // // Use filter to add different `selector` for mode/density/etc.
   filter: async (token, options) => {
@@ -20,12 +23,15 @@ export const foundationColorsNextFile = {
 };
 
 export const foundationAlphaNextFile = {
-  format: "css/advanced",
+  format: "css/variables",
   destination: "foundations/alpha-next.css",
   options: {
     selector: ".salt-theme.salt-theme-next", // defaults to :root; set to false to disable
     outputReferences: true,
     usesDtcg: true,
+    formatting: {
+      header: "/**\n * Generated by `scripts/build-json.mjs`\n",
+    },
   },
   // // Use filter to add different `selector` for mode/density/etc.
   filter: async (token, options) => {
@@ -59,6 +65,9 @@ export const getFoundationCurveNextFile = ({ densities }) => {
       outputReferences: true,
       usesDtcg: true,
       rules: densitiesRules,
+      formatting: {
+        header: "/**\n * Generated by `scripts/build-json.mjs`\n",
+      },
     },
     // // Use filter to add different `selector` for mode/density/etc.
     filter: async (token, options) => {
@@ -105,6 +114,9 @@ export const getPaletteNextFiles = ({ modes, densities, accents }) => [
         outputReferences: true,
         usesDtcg: true,
         rules: accentModeRules,
+        formatting: {
+          header: "/**\n * Generated by `scripts/build-json.mjs`\n",
+        },
       },
       // // Use filter to add different `selector` for mode/density/etc.
       filter: async (token, options) => {
@@ -179,12 +191,15 @@ const characteristicsNextList = [
 export const getCharacteristicsNextFiles = () =>
   characteristicsNextList.map((characteristicFamily) => {
     return {
-      format: "css/advanced",
+      format: "css/variables",
       destination: `characteristics/${characteristicFamily}-next.css`,
       options: {
         selector: ".salt-theme.salt-theme-next",
         outputReferences: true,
         usesDtcg: true,
+        formatting: {
+          header: "/**\n * Generated by `scripts/build-json.mjs`\n",
+        },
       },
       filter: async (token, options) => {
         // console.log(

From 5e28cb10e49d53c5a418009dc20276912bd8f8af Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Fri, 29 Nov 2024 11:33:39 +0000
Subject: [PATCH 29/35] Add formatting to cssMultiModes

---
 packages/theme/css/palette/accent-next.css                 | 1 +
 packages/theme/scripts/sd-utils/format/css-multi-modes.mjs | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/theme/css/palette/accent-next.css b/packages/theme/css/palette/accent-next.css
index 75476934cf..0ee372aec3 100644
--- a/packages/theme/css/palette/accent-next.css
+++ b/packages/theme/css/palette/accent-next.css
@@ -1,4 +1,5 @@
 /**
+ * Generated by `scripts/build-json.mjs`
  * Do not edit directly, this file was auto-generated.
  */
 
diff --git a/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs b/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs
index 840927f946..557493e107 100644
--- a/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs
+++ b/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs
@@ -66,7 +66,9 @@ export const cssMultiModes = async ({
   const dictionary = { ...originalDictionary };
 
   // add file header
-  const output = [await fileHeader({ file })];
+  const output = [
+    await fileHeader({ file, formatting: mergedFormatting, options }),
+  ];
 
   console.log("salt-ds/css/multi-modes rules", rules);
   // add single theme css

From a7d22210a112fae7da467e532c59ca99715b9665 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Fri, 29 Nov 2024 11:36:13 +0000
Subject: [PATCH 30/35] Add remaining header formatting

---
 packages/theme/css/palette/alpha-next.css                   | 1 +
 packages/theme/css/palette/foreground-next.css              | 1 +
 packages/theme/css/palette/negative-next.css                | 1 +
 packages/theme/css/palette/neutral-next.css                 | 1 +
 packages/theme/css/palette/warning-next.css                 | 1 +
 packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs | 3 +++
 6 files changed, 8 insertions(+)

diff --git a/packages/theme/css/palette/alpha-next.css b/packages/theme/css/palette/alpha-next.css
index 88d0ffcbfc..0923a1af36 100644
--- a/packages/theme/css/palette/alpha-next.css
+++ b/packages/theme/css/palette/alpha-next.css
@@ -1,4 +1,5 @@
 /**
+ * Generated by `scripts/build-json.mjs`
  * Do not edit directly, this file was auto-generated.
  */
 
diff --git a/packages/theme/css/palette/foreground-next.css b/packages/theme/css/palette/foreground-next.css
index e74eab76c5..4291b41d0d 100644
--- a/packages/theme/css/palette/foreground-next.css
+++ b/packages/theme/css/palette/foreground-next.css
@@ -1,4 +1,5 @@
 /**
+ * Generated by `scripts/build-json.mjs`
  * Do not edit directly, this file was auto-generated.
  */
 
diff --git a/packages/theme/css/palette/negative-next.css b/packages/theme/css/palette/negative-next.css
index 8849616833..380f08e57f 100644
--- a/packages/theme/css/palette/negative-next.css
+++ b/packages/theme/css/palette/negative-next.css
@@ -1,4 +1,5 @@
 /**
+ * Generated by `scripts/build-json.mjs`
  * Do not edit directly, this file was auto-generated.
  */
 
diff --git a/packages/theme/css/palette/neutral-next.css b/packages/theme/css/palette/neutral-next.css
index 7a92000e77..04d740f71e 100644
--- a/packages/theme/css/palette/neutral-next.css
+++ b/packages/theme/css/palette/neutral-next.css
@@ -1,4 +1,5 @@
 /**
+ * Generated by `scripts/build-json.mjs`
  * Do not edit directly, this file was auto-generated.
  */
 
diff --git a/packages/theme/css/palette/warning-next.css b/packages/theme/css/palette/warning-next.css
index 0228076aa9..c9351f4726 100644
--- a/packages/theme/css/palette/warning-next.css
+++ b/packages/theme/css/palette/warning-next.css
@@ -1,4 +1,5 @@
 /**
+ * Generated by `scripts/build-json.mjs`
  * Do not edit directly, this file was auto-generated.
  */
 
diff --git a/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs b/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
index aed1ecf78e..449612a41d 100644
--- a/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
+++ b/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
@@ -149,6 +149,9 @@ export const getPaletteNextFiles = ({ modes, densities, accents }) => [
         outputReferences: true,
         usesDtcg: true,
         rules: modeOnlyRules,
+        formatting: {
+          header: "/**\n * Generated by `scripts/build-json.mjs`\n",
+        },
       },
       // // Use filter to add different `selector` for mode/density/etc.
       filter: async (token, options) => {

From fb7b2424b5d6b8ffcd7cc7791a5e5d2641c2f647 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Fri, 29 Nov 2024 11:39:12 +0000
Subject: [PATCH 31/35] Adds more palette next css

---
 .../theme/css/palette/background-next.css     |  8 ++++++-
 packages/theme/css/palette/info-next.css      | 10 +++++++--
 packages/theme/css/palette/positive-next.css  | 22 ++++++++++++-------
 .../sd-utils/files/theme-next-tokens.mjs      |  3 +++
 4 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/packages/theme/css/palette/background-next.css b/packages/theme/css/palette/background-next.css
index d9c8651d29..270ef49688 100644
--- a/packages/theme/css/palette/background-next.css
+++ b/packages/theme/css/palette/background-next.css
@@ -1,3 +1,8 @@
+/**
+ * Generated by `scripts/build-json.mjs`
+ * Do not edit directly, this file was auto-generated.
+ */
+
 .salt-theme.salt-theme-next[data-mode="light"] {
   --salt-palette-background-primary: var(--salt-color-background-snow);
   --salt-palette-background-primary-disabled: var(--salt-color-background-snow-40a);
@@ -6,11 +11,12 @@
   --salt-palette-background-tertiary: var(--salt-color-background-limestone);
   --salt-palette-background-tertiary-disabled: var(--salt-color-background-limestone-40a);
 }
+
 .salt-theme.salt-theme-next[data-mode="dark"] {
   --salt-palette-background-primary: var(--salt-color-background-jet);
   --salt-palette-background-primary-disabled: var(--salt-color-background-jet-40a);
   --salt-palette-background-secondary: var(--salt-color-background-granite);
-  --salt-palette-background-secondary-disabled: var(--salt-color-background-granite-40a);
+  --salt-palette-background-secondary-disabled: var(--salt-color-background-charcoal-40a);
   --salt-palette-background-tertiary: var(--salt-color-background-leather);
   --salt-palette-background-tertiary-disabled: var(--salt-color-background-leather-40a);
 }
diff --git a/packages/theme/css/palette/info-next.css b/packages/theme/css/palette/info-next.css
index 08e2cab857..fab2f3794c 100644
--- a/packages/theme/css/palette/info-next.css
+++ b/packages/theme/css/palette/info-next.css
@@ -1,10 +1,16 @@
+/**
+ * Generated by `scripts/build-json.mjs`
+ * Do not edit directly, this file was auto-generated.
+ */
+
 .salt-theme.salt-theme-next[data-mode="light"] {
   --salt-palette-info: var(--salt-color-blue-500);
   --salt-palette-info-strong: var(--salt-color-blue-600);
-  --salt-palette-info-weak: var(--salt-color-blue-100);
+  --salt-palette-info-weakest: var(--salt-color-blue-100);
 }
+
 .salt-theme.salt-theme-next[data-mode="dark"] {
   --salt-palette-info: var(--salt-color-blue-500);
   --salt-palette-info-strong: var(--salt-color-blue-400);
-  --salt-palette-info-weak: var(--salt-color-blue-900);
+  --salt-palette-info-weakest: var(--salt-color-blue-900);
 }
diff --git a/packages/theme/css/palette/positive-next.css b/packages/theme/css/palette/positive-next.css
index 9009591873..7bb2996f07 100644
--- a/packages/theme/css/palette/positive-next.css
+++ b/packages/theme/css/palette/positive-next.css
@@ -1,18 +1,24 @@
+/**
+ * Generated by `scripts/build-json.mjs`
+ * Do not edit directly, this file was auto-generated.
+ */
+
 .salt-theme.salt-theme-next[data-mode="light"] {
   --salt-palette-positive: var(--salt-color-green-500);
-  --salt-palette-positive-strong: var(--salt-color-green-600);
-  --salt-palette-positive-strong-disabled: var(--salt-color-green-600-40a);
-  --salt-palette-positive-weak: var(--salt-color-green-100);
-  --salt-palette-positive-action-hover: var(--salt-color-green-600);
   --salt-palette-positive-action-active: var(--salt-color-green-800);
+  --salt-palette-positive-action-hover: var(--salt-color-green-600);
   --salt-palette-positive-disabled: var(--salt-color-green-500-40a);
+  --salt-palette-positive-strong: var(--salt-color-green-600);
+  --salt-palette-positive-strong-disabled: var(--salt-color-green-600-40a);
+  --salt-palette-positive-weakest: var(--salt-color-green-100);
 }
+
 .salt-theme.salt-theme-next[data-mode="dark"] {
   --salt-palette-positive: var(--salt-color-green-500);
-  --salt-palette-positive-strong: var(--salt-color-green-400);
-  --salt-palette-positive-strong-disabled: var(--salt-color-green-400-40a);
-  --salt-palette-positive-weak: var(--salt-color-green-900);
-  --salt-palette-positive-action-hover: var(--salt-color-green-600);
   --salt-palette-positive-action-active: var(--salt-color-green-800);
+  --salt-palette-positive-action-hover: var(--salt-color-green-600);
   --salt-palette-positive-disabled: var(--salt-color-green-500-40a);
+  --salt-palette-positive-strong: var(--salt-color-green-400);
+  --salt-palette-positive-strong-disabled: var(--salt-color-green-400-40a);
+  --salt-palette-positive-weakest: var(--salt-color-green-900);
 }
diff --git a/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs b/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
index 449612a41d..3093f69d24 100644
--- a/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
+++ b/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
@@ -83,6 +83,9 @@ export const getFoundationCurveNextFile = ({ densities }) => {
 // TODO: this is not the complete list yet
 const paletteNextList = [
   "accent",
+  "background",
+  "info",
+  "positive",
   "corner",
   "negative",
   "text",

From c6310405a189cc7a13c0e0c48022d2d1df80571b Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Fri, 29 Nov 2024 11:48:38 +0000
Subject: [PATCH 32/35] Rename script name

---
 packages/theme/package.json                                 | 2 +-
 packages/theme/scripts/{build-json.mjs => gen-css-json.mjs} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename packages/theme/scripts/{build-json.mjs => gen-css-json.mjs} (100%)

diff --git a/packages/theme/package.json b/packages/theme/package.json
index f2df6df1bc..84503cfdbe 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -16,7 +16,7 @@
   "scripts": {
     "build": "yarn node ./scripts/build.mjs",
     "build:watch": "yarn node ./scripts/build.mjs --watch",
-    "build:json": "yarn node ./scripts/build-json.mjs"
+    "gen:css-json": "yarn node ./scripts/gen-css-json.mjs"
   },
   "devDependencies": {
     "del": "^7.0.0"
diff --git a/packages/theme/scripts/build-json.mjs b/packages/theme/scripts/gen-css-json.mjs
similarity index 100%
rename from packages/theme/scripts/build-json.mjs
rename to packages/theme/scripts/gen-css-json.mjs

From 85b24531c5395fb63524cfa87a85fb1e24fc69ca Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Fri, 29 Nov 2024 14:33:53 +0000
Subject: [PATCH 33/35] Fix salt-ds/value/px

---
 packages/theme/README.md                      | 19 -------------------
 packages/theme/css/foundations/curve-next.css | 13 +++++++++----
 packages/theme/scripts/gen-css-json.mjs       |  3 ++-
 .../sd-utils/files/theme-next-tokens.mjs      |  2 +-
 .../sd-utils/format/css-multi-modes.mjs       |  7 +++++--
 .../sd-utils/transform/value-modes.mjs        |  4 +++-
 6 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/packages/theme/README.md b/packages/theme/README.md
index ce1832e1a6..6a335aa3a1 100644
--- a/packages/theme/README.md
+++ b/packages/theme/README.md
@@ -1,20 +1 @@
 This is a regular package
-
----
-
-## Tokens
-
-1. Run "Export Color Styles" -> "Export Variables" -> "Json (Experimental)" from [PR#51](https://github.com/jpmorganchase/Figma-Plugins-and-Widgets/pull/51)
-1. Select Collection and Mode on plugin UI
-   1. Add "Additional Root Key (Optional)"
-      - Colors library: 'color'
-      - Palette library: 'palette'
-1. Copy output to corresponding `*.tokens.json` file
-1. Modify color tokens
-   1. remove `categorical.` from , e.g. replace `"{color.categorical` to `"{color`
-   1. added `background.` to a few background color raw tokens
-
-TODOs
-
-- [ ] Custom value tranformer for `foundation/alpha-next.css` tokens, to achieve `rgba` syntax from `packages/theme/css/foundations/alpha-next.css`? Or this may not be needed given we generate these values
-- [ ] Better `alpha` foundation color generation, maybe use custom opacity modifier instead
diff --git a/packages/theme/css/foundations/curve-next.css b/packages/theme/css/foundations/curve-next.css
index d424b9610c..1633b08ec5 100644
--- a/packages/theme/css/foundations/curve-next.css
+++ b/packages/theme/css/foundations/curve-next.css
@@ -1,5 +1,10 @@
+/**
+ * Generated by `scripts/build-json.mjs`
+ * Do not edit directly, this file was auto-generated.
+ */
+
 .salt-density-high {
-  --salt-curve-0: 0;
+  --salt-curve-0: 0px;
   --salt-curve-50: 1px;
   --salt-curve-100: 2px;
   --salt-curve-150: 3px;
@@ -7,7 +12,7 @@
 }
 
 .salt-density-medium {
-  --salt-curve-0: 0;
+  --salt-curve-0: 0px;
   --salt-curve-50: 2px;
   --salt-curve-100: 4px;
   --salt-curve-150: 6px;
@@ -15,7 +20,7 @@
 }
 
 .salt-density-low {
-  --salt-curve-0: 0;
+  --salt-curve-0: 0px;
   --salt-curve-50: 3px;
   --salt-curve-100: 6px;
   --salt-curve-150: 9px;
@@ -23,7 +28,7 @@
 }
 
 .salt-density-touch {
-  --salt-curve-0: 0;
+  --salt-curve-0: 0px;
   --salt-curve-50: 4px;
   --salt-curve-100: 8px;
   --salt-curve-150: 12px;
diff --git a/packages/theme/scripts/gen-css-json.mjs b/packages/theme/scripts/gen-css-json.mjs
index 113f0c41d7..8b566b3214 100644
--- a/packages/theme/scripts/gen-css-json.mjs
+++ b/packages/theme/scripts/gen-css-json.mjs
@@ -38,7 +38,7 @@ function getStyleDictionaryConfig({ modes, densities, accents }) {
         transforms: [
           "attribute/cti",
           "salt-ds/name/kebab", // Custom transform, see below
-          "salt-ds/value/px",
+          "salt-ds/value/px", // add px for $modes, not working for some reason
           "color/rgb",
           // "name/kebab", // https://github.com/amzn/style-dictionary/blob/0fcf229f78e334a5c6bec55725fe92a8de97590c/lib/common/transforms.js#L320-L325
           // "dimension/pixelToRem",
@@ -67,6 +67,7 @@ function getStyleDictionaryConfig({ modes, densities, accents }) {
         files: [
           foundationColorsNextFile,
           foundationAlphaNextFile,
+          getFoundationCurveNextFile({ densities }),
           ...getPaletteNextFiles({ modes, densities, accents }),
         ],
       },
diff --git a/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs b/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
index 3093f69d24..cb8f0a21d6 100644
--- a/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
+++ b/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
@@ -216,7 +216,7 @@ export const getCharacteristicsNextFiles = () =>
         // );
         return (
           // next
-          token.filePath.includes("characteristics/theme-next.tokens") &&
+          token.filePath.includes("characteristics/") &&
           //
           token.attributes.category === characteristicFamily &&
           !token.path.includes("figma-only")
diff --git a/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs b/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs
index 557493e107..62e29ad41e 100644
--- a/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs
+++ b/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs
@@ -100,8 +100,11 @@ export const cssMultiModes = async ({
     })
       .split("\n")
       .sort((a, b) => {
-        // Sort by names before ":"
-        return a.split(":")[0].localeCompare(b.split(":")[0]);
+        // Sort by names before ":", use Collator to sort by number values
+        return new Intl.Collator("en", { numeric: true }).compare(
+          a.split(":")[0],
+          b.split(":")[0],
+        );
       })
       .join("\n");
 
diff --git a/packages/theme/scripts/sd-utils/transform/value-modes.mjs b/packages/theme/scripts/sd-utils/transform/value-modes.mjs
index e359ba7628..0f2580a1c5 100644
--- a/packages/theme/scripts/sd-utils/transform/value-modes.mjs
+++ b/packages/theme/scripts/sd-utils/transform/value-modes.mjs
@@ -40,10 +40,12 @@ export const saltValuePx = {
   transform: (token, _, options) => {
     // this is a "hack"..? for those getting value from "salt-ds/css/multi-modes"
     // value should be transformed on $modes as well
+    // console.log("salt-ds/value/px transform", JSON.stringify(token));
+
     if (token.$modes) {
       for (const mode of Object.keys(token.$modes)) {
         const modeValue = token.$modes[mode];
-        if (isNumber(modeValue, options)) {
+        if (typeof modeValue === "number") {
           token.$modes[mode] = `${modeValue}px`;
         }
       }

From 49bbf8e9e9bcd9bad2c4418a349673224513d5ab Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Fri, 29 Nov 2024 14:36:50 +0000
Subject: [PATCH 34/35] Update file header comment

---
 packages/theme/css/foundations/alpha-next.css        |  2 +-
 packages/theme/css/foundations/color-next.css        |  2 +-
 packages/theme/css/foundations/curve-next.css        |  2 +-
 packages/theme/css/palette/accent-next.css           |  2 +-
 packages/theme/css/palette/alpha-next.css            |  2 +-
 packages/theme/css/palette/background-next.css       |  2 +-
 packages/theme/css/palette/foreground-next.css       |  2 +-
 packages/theme/css/palette/info-next.css             |  2 +-
 packages/theme/css/palette/negative-next.css         |  2 +-
 packages/theme/css/palette/neutral-next.css          |  2 +-
 packages/theme/css/palette/positive-next.css         |  2 +-
 packages/theme/css/palette/warning-next.css          |  2 +-
 .../scripts/sd-utils/files/theme-next-tokens.mjs     | 12 ++++++------
 13 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/theme/css/foundations/alpha-next.css b/packages/theme/css/foundations/alpha-next.css
index 37820527df..94aae3607e 100644
--- a/packages/theme/css/foundations/alpha-next.css
+++ b/packages/theme/css/foundations/alpha-next.css
@@ -1,5 +1,5 @@
 /**
- * Generated by `scripts/build-json.mjs`
+ * Generated by `scripts/gen-css-json.mjs`
  * Do not edit directly, this file was auto-generated.
  */
 
diff --git a/packages/theme/css/foundations/color-next.css b/packages/theme/css/foundations/color-next.css
index 7a817447d0..2a277b677b 100644
--- a/packages/theme/css/foundations/color-next.css
+++ b/packages/theme/css/foundations/color-next.css
@@ -1,5 +1,5 @@
 /**
- * Generated by `scripts/build-json.mjs`
+ * Generated by `scripts/gen-css-json.mjs`
  * Do not edit directly, this file was auto-generated.
  */
 
diff --git a/packages/theme/css/foundations/curve-next.css b/packages/theme/css/foundations/curve-next.css
index 1633b08ec5..9c625e4cbe 100644
--- a/packages/theme/css/foundations/curve-next.css
+++ b/packages/theme/css/foundations/curve-next.css
@@ -1,5 +1,5 @@
 /**
- * Generated by `scripts/build-json.mjs`
+ * Generated by `scripts/gen-css-json.mjs`
  * Do not edit directly, this file was auto-generated.
  */
 
diff --git a/packages/theme/css/palette/accent-next.css b/packages/theme/css/palette/accent-next.css
index 0ee372aec3..3ab57cd1d9 100644
--- a/packages/theme/css/palette/accent-next.css
+++ b/packages/theme/css/palette/accent-next.css
@@ -1,5 +1,5 @@
 /**
- * Generated by `scripts/build-json.mjs`
+ * Generated by `scripts/gen-css-json.mjs`
  * Do not edit directly, this file was auto-generated.
  */
 
diff --git a/packages/theme/css/palette/alpha-next.css b/packages/theme/css/palette/alpha-next.css
index 0923a1af36..74e3c06306 100644
--- a/packages/theme/css/palette/alpha-next.css
+++ b/packages/theme/css/palette/alpha-next.css
@@ -1,5 +1,5 @@
 /**
- * Generated by `scripts/build-json.mjs`
+ * Generated by `scripts/gen-css-json.mjs`
  * Do not edit directly, this file was auto-generated.
  */
 
diff --git a/packages/theme/css/palette/background-next.css b/packages/theme/css/palette/background-next.css
index 270ef49688..830b5ca6bc 100644
--- a/packages/theme/css/palette/background-next.css
+++ b/packages/theme/css/palette/background-next.css
@@ -1,5 +1,5 @@
 /**
- * Generated by `scripts/build-json.mjs`
+ * Generated by `scripts/gen-css-json.mjs`
  * Do not edit directly, this file was auto-generated.
  */
 
diff --git a/packages/theme/css/palette/foreground-next.css b/packages/theme/css/palette/foreground-next.css
index 4291b41d0d..da69f5a8f7 100644
--- a/packages/theme/css/palette/foreground-next.css
+++ b/packages/theme/css/palette/foreground-next.css
@@ -1,5 +1,5 @@
 /**
- * Generated by `scripts/build-json.mjs`
+ * Generated by `scripts/gen-css-json.mjs`
  * Do not edit directly, this file was auto-generated.
  */
 
diff --git a/packages/theme/css/palette/info-next.css b/packages/theme/css/palette/info-next.css
index fab2f3794c..922db23dd3 100644
--- a/packages/theme/css/palette/info-next.css
+++ b/packages/theme/css/palette/info-next.css
@@ -1,5 +1,5 @@
 /**
- * Generated by `scripts/build-json.mjs`
+ * Generated by `scripts/gen-css-json.mjs`
  * Do not edit directly, this file was auto-generated.
  */
 
diff --git a/packages/theme/css/palette/negative-next.css b/packages/theme/css/palette/negative-next.css
index 380f08e57f..3506a3d779 100644
--- a/packages/theme/css/palette/negative-next.css
+++ b/packages/theme/css/palette/negative-next.css
@@ -1,5 +1,5 @@
 /**
- * Generated by `scripts/build-json.mjs`
+ * Generated by `scripts/gen-css-json.mjs`
  * Do not edit directly, this file was auto-generated.
  */
 
diff --git a/packages/theme/css/palette/neutral-next.css b/packages/theme/css/palette/neutral-next.css
index 04d740f71e..02688e30d3 100644
--- a/packages/theme/css/palette/neutral-next.css
+++ b/packages/theme/css/palette/neutral-next.css
@@ -1,5 +1,5 @@
 /**
- * Generated by `scripts/build-json.mjs`
+ * Generated by `scripts/gen-css-json.mjs`
  * Do not edit directly, this file was auto-generated.
  */
 
diff --git a/packages/theme/css/palette/positive-next.css b/packages/theme/css/palette/positive-next.css
index 7bb2996f07..865cdc9f58 100644
--- a/packages/theme/css/palette/positive-next.css
+++ b/packages/theme/css/palette/positive-next.css
@@ -1,5 +1,5 @@
 /**
- * Generated by `scripts/build-json.mjs`
+ * Generated by `scripts/gen-css-json.mjs`
  * Do not edit directly, this file was auto-generated.
  */
 
diff --git a/packages/theme/css/palette/warning-next.css b/packages/theme/css/palette/warning-next.css
index c9351f4726..18fab72b2c 100644
--- a/packages/theme/css/palette/warning-next.css
+++ b/packages/theme/css/palette/warning-next.css
@@ -1,5 +1,5 @@
 /**
- * Generated by `scripts/build-json.mjs`
+ * Generated by `scripts/gen-css-json.mjs`
  * Do not edit directly, this file was auto-generated.
  */
 
diff --git a/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs b/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
index cb8f0a21d6..b09b7c5071 100644
--- a/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
+++ b/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
@@ -6,7 +6,7 @@ export const foundationColorsNextFile = {
     outputReferences: true,
     usesDtcg: true,
     formatting: {
-      header: "/**\n * Generated by `scripts/build-json.mjs`\n",
+      header: "/**\n * Generated by `scripts/gen-css-json.mjs`\n",
     },
   },
   // // Use filter to add different `selector` for mode/density/etc.
@@ -30,7 +30,7 @@ export const foundationAlphaNextFile = {
     outputReferences: true,
     usesDtcg: true,
     formatting: {
-      header: "/**\n * Generated by `scripts/build-json.mjs`\n",
+      header: "/**\n * Generated by `scripts/gen-css-json.mjs`\n",
     },
   },
   // // Use filter to add different `selector` for mode/density/etc.
@@ -66,7 +66,7 @@ export const getFoundationCurveNextFile = ({ densities }) => {
       usesDtcg: true,
       rules: densitiesRules,
       formatting: {
-        header: "/**\n * Generated by `scripts/build-json.mjs`\n",
+        header: "/**\n * Generated by `scripts/gen-css-json.mjs`\n",
       },
     },
     // // Use filter to add different `selector` for mode/density/etc.
@@ -118,7 +118,7 @@ export const getPaletteNextFiles = ({ modes, densities, accents }) => [
         usesDtcg: true,
         rules: accentModeRules,
         formatting: {
-          header: "/**\n * Generated by `scripts/build-json.mjs`\n",
+          header: "/**\n * Generated by `scripts/gen-css-json.mjs`\n",
         },
       },
       // // Use filter to add different `selector` for mode/density/etc.
@@ -153,7 +153,7 @@ export const getPaletteNextFiles = ({ modes, densities, accents }) => [
         usesDtcg: true,
         rules: modeOnlyRules,
         formatting: {
-          header: "/**\n * Generated by `scripts/build-json.mjs`\n",
+          header: "/**\n * Generated by `scripts/gen-css-json.mjs`\n",
         },
       },
       // // Use filter to add different `selector` for mode/density/etc.
@@ -204,7 +204,7 @@ export const getCharacteristicsNextFiles = () =>
         outputReferences: true,
         usesDtcg: true,
         formatting: {
-          header: "/**\n * Generated by `scripts/build-json.mjs`\n",
+          header: "/**\n * Generated by `scripts/gen-css-json.mjs`\n",
         },
       },
       filter: async (token, options) => {

From 4cc2d7f51d00c3dba2eb1dabadd6315713d702da Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Fri, 6 Dec 2024 14:13:57 +0000
Subject: [PATCH 35/35] Add auto-gen color-next.css

---
 packages/theme/css/foundations/color-next.css | 219 ++++++------------
 1 file changed, 73 insertions(+), 146 deletions(-)

diff --git a/packages/theme/css/foundations/color-next.css b/packages/theme/css/foundations/color-next.css
index 2a277b677b..0142d55d55 100644
--- a/packages/theme/css/foundations/color-next.css
+++ b/packages/theme/css/foundations/color-next.css
@@ -4,150 +4,77 @@
  */
 
 .salt-theme.salt-theme-next {
-  --salt-color-white-rgb: 255, 255, 255;
-  --salt-color-gray-100-rgb: 245, 247, 248;
-  --salt-color-gray-200-rgb: 211, 213, 216;
-  --salt-color-gray-300-rgb: 177, 181, 185;
-  --salt-color-gray-400-rgb: 145, 149, 154;
-  --salt-color-gray-500-rgb: 114, 119, 125;
-  --salt-color-gray-600-rgb: 95, 100, 106;
-  --salt-color-gray-700-rgb: 76, 81, 87;
-  --salt-color-gray-800-rgb: 58, 63, 68;
-  --salt-color-gray-900-rgb: 41, 46, 51;
-  --salt-color-black-rgb: 0, 0, 0;
-  --salt-color-blue-100-rgb: 234, 246, 255;
-  --salt-color-blue-200-rgb: 199, 222, 255;
-  --salt-color-blue-300-rgb: 154, 189, 245;
-  --salt-color-blue-400-rgb: 102, 156, 232;
-  --salt-color-blue-500-rgb: 0, 120, 207;
-  --salt-color-blue-600-rgb: 0, 94, 166;
-  --salt-color-blue-700-rgb: 0, 69, 126;
-  --salt-color-blue-800-rgb: 0, 45, 89;
-  --salt-color-blue-900-rgb: 0, 23, 54;
-  --salt-color-green-100-rgb: 234, 245, 242;
-  --salt-color-green-200-rgb: 184, 229, 209;
-  --salt-color-green-300-rgb: 137, 204, 173;
-  --salt-color-green-400-rgb: 83, 176, 135;
-  --salt-color-green-500-rgb: 0, 135, 93;
-  --salt-color-green-600-rgb: 0, 107, 72;
-  --salt-color-green-700-rgb: 0, 86, 55;
-  --salt-color-green-800-rgb: 0, 63, 37;
-  --salt-color-green-900-rgb: 0, 41, 21;
-  --salt-color-teal-100-rgb: 219, 245, 247;
-  --salt-color-teal-200-rgb: 175, 224, 237;
-  --salt-color-teal-300-rgb: 131, 192, 214;
-  --salt-color-teal-400-rgb: 76, 161, 194;
-  --salt-color-teal-500-rgb: 27, 127, 158;
-  --salt-color-teal-600-rgb: 18, 100, 126;
-  --salt-color-teal-700-rgb: 9, 74, 96;
-  --salt-color-teal-800-rgb: 3, 49, 66;
-  --salt-color-teal-900-rgb: 0, 27, 41;
-  --salt-color-orange-100-rgb: 255, 236, 217;
-  --salt-color-orange-200-rgb: 255, 198, 161;
-  --salt-color-orange-300-rgb: 247, 160, 106;
-  --salt-color-orange-400-rgb: 232, 122, 56;
-  --salt-color-orange-500-rgb: 199, 83, 0;
-  --salt-color-orange-600-rgb: 163, 68, 0;
-  --salt-color-orange-700-rgb: 129, 54, 0;
-  --salt-color-orange-800-rgb: 97, 41, 0;
-  --salt-color-orange-900-rgb: 66, 32, 0;
-  --salt-color-red-100-rgb: 255, 236, 234;
-  --salt-color-red-200-rgb: 255, 193, 186;
-  --salt-color-red-300-rgb: 255, 147, 138;
-  --salt-color-red-400-rgb: 255, 93, 87;
-  --salt-color-red-500-rgb: 229, 33, 53;
-  --salt-color-red-600-rgb: 186, 23, 41;
-  --salt-color-red-700-rgb: 145, 13, 30;
-  --salt-color-red-800-rgb: 105, 4, 19;
-  --salt-color-red-900-rgb: 69, 0, 2;
-  --salt-color-purple-100-rgb: 246, 240, 250;
-  --salt-color-purple-200-rgb: 240, 214, 245;
-  --salt-color-purple-300-rgb: 218, 175, 224;
-  --salt-color-purple-400-rgb: 195, 136, 204;
-  --salt-color-purple-500-rgb: 162, 91, 173;
-  --salt-color-purple-600-rgb: 133, 67, 143;
-  --salt-color-purple-700-rgb: 104, 45, 113;
-  --salt-color-purple-800-rgb: 73, 21, 82;
-  --salt-color-purple-900-rgb: 51, 0, 59;
-  --salt-color-background-snow-rgb: 255, 255, 255;
-  --salt-color-background-marble-rgb: 245, 247, 248;
-  --salt-color-background-limestone-rgb: 250, 248, 242;
-  --salt-color-background-titanium-rgb: 226, 228, 229;
-  --salt-color-background-jet-rgb: 16, 24, 32;
-  --salt-color-background-granite-rgb: 26, 34, 41;
-  --salt-color-background-leather-rgb: 38, 41, 43;
-  --salt-color-logo-brown-rgb: 58, 34, 6;
-  --salt-color-white: rgb(var(--salt-color-white-rgb));
-  --salt-color-gray-100: rgb(var(--salt-color-gray-100-rgb));
-  --salt-color-gray-200: rgb(var(--salt-color-gray-200-rgb));
-  --salt-color-gray-300: rgb(var(--salt-color-gray-300-rgb));
-  --salt-color-gray-400: rgb(var(--salt-color-gray-400-rgb));
-  --salt-color-gray-500: rgb(var(--salt-color-gray-500-rgb));
-  --salt-color-gray-600: rgb(var(--salt-color-gray-600-rgb));
-  --salt-color-gray-700: rgb(var(--salt-color-gray-700-rgb));
-  --salt-color-gray-800: rgb(var(--salt-color-gray-800-rgb));
-  --salt-color-gray-900: rgb(var(--salt-color-gray-900-rgb));
-  --salt-color-black: rgb(var(--salt-color-black-rgb));
-  --salt-color-blue-100: rgb(var(--salt-color-blue-100-rgb));
-  --salt-color-blue-200: rgb(var(--salt-color-blue-200-rgb));
-  --salt-color-blue-300: rgb(var(--salt-color-blue-300-rgb));
-  --salt-color-blue-400: rgb(var(--salt-color-blue-400-rgb));
-  --salt-color-blue-500: rgb(var(--salt-color-blue-500-rgb));
-  --salt-color-blue-600: rgb(var(--salt-color-blue-600-rgb));
-  --salt-color-blue-700: rgb(var(--salt-color-blue-700-rgb));
-  --salt-color-blue-800: rgb(var(--salt-color-blue-800-rgb));
-  --salt-color-blue-900: rgb(var(--salt-color-blue-900-rgb));
-  --salt-color-green-100: rgb(var(--salt-color-green-100-rgb));
-  --salt-color-green-200: rgb(var(--salt-color-green-200-rgb));
-  --salt-color-green-300: rgb(var(--salt-color-green-300-rgb));
-  --salt-color-green-400: rgb(var(--salt-color-green-400-rgb));
-  --salt-color-green-500: rgb(var(--salt-color-green-500-rgb));
-  --salt-color-green-600: rgb(var(--salt-color-green-600-rgb));
-  --salt-color-green-700: rgb(var(--salt-color-green-700-rgb));
-  --salt-color-green-800: rgb(var(--salt-color-green-800-rgb));
-  --salt-color-green-900: rgb(var(--salt-color-green-900-rgb));
-  --salt-color-teal-100: rgb(var(--salt-color-teal-100-rgb));
-  --salt-color-teal-200: rgb(var(--salt-color-teal-200-rgb));
-  --salt-color-teal-300: rgb(var(--salt-color-teal-300-rgb));
-  --salt-color-teal-400: rgb(var(--salt-color-teal-400-rgb));
-  --salt-color-teal-500: rgb(var(--salt-color-teal-500-rgb));
-  --salt-color-teal-600: rgb(var(--salt-color-teal-600-rgb));
-  --salt-color-teal-700: rgb(var(--salt-color-teal-700-rgb));
-  --salt-color-teal-800: rgb(var(--salt-color-teal-800-rgb));
-  --salt-color-teal-900: rgb(var(--salt-color-teal-900-rgb));
-  --salt-color-orange-100: rgb(var(--salt-color-orange-100-rgb));
-  --salt-color-orange-200: rgb(var(--salt-color-orange-200-rgb));
-  --salt-color-orange-300: rgb(var(--salt-color-orange-300-rgb));
-  --salt-color-orange-400: rgb(var(--salt-color-orange-400-rgb));
-  --salt-color-orange-500: rgb(var(--salt-color-orange-500-rgb));
-  --salt-color-orange-600: rgb(var(--salt-color-orange-600-rgb));
-  --salt-color-orange-700: rgb(var(--salt-color-orange-700-rgb));
-  --salt-color-orange-800: rgb(var(--salt-color-orange-800-rgb));
-  --salt-color-orange-900: rgb(var(--salt-color-orange-900-rgb));
-  --salt-color-red-100: rgb(var(--salt-color-red-100-rgb));
-  --salt-color-red-200: rgb(var(--salt-color-red-200-rgb));
-  --salt-color-red-300: rgb(var(--salt-color-red-300-rgb));
-  --salt-color-red-400: rgb(var(--salt-color-red-400-rgb));
-  --salt-color-red-500: rgb(var(--salt-color-red-500-rgb));
-  --salt-color-red-600: rgb(var(--salt-color-red-600-rgb));
-  --salt-color-red-700: rgb(var(--salt-color-red-700-rgb));
-  --salt-color-red-800: rgb(var(--salt-color-red-800-rgb));
-  --salt-color-red-900: rgb(var(--salt-color-red-900-rgb));
-  --salt-color-purple-100: rgb(var(--salt-color-purple-100-rgb));
-  --salt-color-purple-200: rgb(var(--salt-color-purple-200-rgb));
-  --salt-color-purple-300: rgb(var(--salt-color-purple-300-rgb));
-  --salt-color-purple-400: rgb(var(--salt-color-purple-400-rgb));
-  --salt-color-purple-500: rgb(var(--salt-color-purple-500-rgb));
-  --salt-color-purple-600: rgb(var(--salt-color-purple-600-rgb));
-  --salt-color-purple-700: rgb(var(--salt-color-purple-700-rgb));
-  --salt-color-purple-800: rgb(var(--salt-color-purple-800-rgb));
-  --salt-color-purple-900: rgb(var(--salt-color-purple-900-rgb));
-  --salt-color-background-snow: rgb(var(--salt-color-background-snow-rgb));
-  --salt-color-background-marble: rgb(var(--salt-color-background-marble-rgb));
-  --salt-color-background-limestone: rgb(var(--salt-color-background-limestone-rgb));
-  --salt-color-background-titanium: rgb(var(--salt-color-background-titanium-rgb));
-  --salt-color-background-jet: rgb(var(--salt-color-background-jet-rgb));
-  --salt-color-background-granite: rgb(var(--salt-color-background-granite-rgb));
-  --salt-color-background-leather: rgb(var(--salt-color-background-leather-rgb));
-  --salt-color-logo-brown: rgb(var(--salt-color-logo-brown-rgb));
+  --salt-color-white: rgb(255, 255, 255);
+  --salt-color-gray-100: rgb(245, 247, 248);
+  --salt-color-gray-200: rgb(211, 213, 216);
+  --salt-color-gray-300: rgb(177, 181, 185);
+  --salt-color-gray-400: rgb(145, 149, 154);
+  --salt-color-gray-500: rgb(114, 119, 125);
+  --salt-color-gray-600: rgb(95, 100, 106);
+  --salt-color-gray-700: rgb(76, 81, 87);
+  --salt-color-gray-800: rgb(58, 63, 68);
+  --salt-color-gray-900: rgb(41, 46, 51);
+  --salt-color-black: rgb(0, 0, 0);
+  --salt-color-blue-100: rgb(234, 246, 255);
+  --salt-color-blue-200: rgb(199, 222, 255);
+  --salt-color-blue-300: rgb(154, 189, 245);
+  --salt-color-blue-400: rgb(102, 156, 232);
+  --salt-color-blue-500: rgb(0, 120, 207);
+  --salt-color-blue-600: rgb(0, 94, 166);
+  --salt-color-blue-700: rgb(0, 69, 126);
+  --salt-color-blue-800: rgb(0, 45, 89);
+  --salt-color-blue-900: rgb(0, 23, 54);
+  --salt-color-green-100: rgb(234, 245, 242);
+  --salt-color-green-200: rgb(184, 229, 209);
+  --salt-color-green-300: rgb(137, 204, 173);
+  --salt-color-green-400: rgb(83, 176, 135);
+  --salt-color-green-500: rgb(0, 135, 93);
+  --salt-color-green-600: rgb(0, 107, 72);
+  --salt-color-green-700: rgb(0, 86, 55);
+  --salt-color-green-800: rgb(0, 63, 37);
+  --salt-color-green-900: rgb(0, 41, 21);
+  --salt-color-teal-100: rgb(219, 245, 247);
+  --salt-color-teal-200: rgb(175, 224, 237);
+  --salt-color-teal-300: rgb(131, 192, 214);
+  --salt-color-teal-400: rgb(76, 161, 194);
+  --salt-color-teal-500: rgb(27, 127, 158);
+  --salt-color-teal-600: rgb(18, 100, 126);
+  --salt-color-teal-700: rgb(9, 74, 96);
+  --salt-color-teal-800: rgb(3, 49, 66);
+  --salt-color-teal-900: rgb(0, 27, 41);
+  --salt-color-orange-100: rgb(255, 236, 217);
+  --salt-color-orange-200: rgb(255, 198, 161);
+  --salt-color-orange-300: rgb(247, 160, 106);
+  --salt-color-orange-400: rgb(232, 122, 56);
+  --salt-color-orange-500: rgb(199, 83, 0);
+  --salt-color-orange-600: rgb(163, 68, 0);
+  --salt-color-orange-700: rgb(129, 54, 0);
+  --salt-color-orange-800: rgb(97, 41, 0);
+  --salt-color-orange-900: rgb(66, 32, 0);
+  --salt-color-red-100: rgb(255, 236, 234);
+  --salt-color-red-200: rgb(255, 193, 186);
+  --salt-color-red-300: rgb(255, 147, 138);
+  --salt-color-red-400: rgb(255, 93, 87);
+  --salt-color-red-500: rgb(229, 33, 53);
+  --salt-color-red-600: rgb(186, 23, 41);
+  --salt-color-red-700: rgb(145, 13, 30);
+  --salt-color-red-800: rgb(105, 4, 19);
+  --salt-color-red-900: rgb(69, 0, 2);
+  --salt-color-purple-100: rgb(246, 240, 250);
+  --salt-color-purple-200: rgb(240, 214, 245);
+  --salt-color-purple-300: rgb(218, 175, 224);
+  --salt-color-purple-400: rgb(195, 136, 204);
+  --salt-color-purple-500: rgb(162, 91, 173);
+  --salt-color-purple-600: rgb(133, 67, 143);
+  --salt-color-purple-700: rgb(104, 45, 113);
+  --salt-color-purple-800: rgb(73, 21, 82);
+  --salt-color-purple-900: rgb(51, 0, 59);
+  --salt-color-background-snow: rgb(255, 255, 255);
+  --salt-color-background-marble: rgb(245, 247, 248);
+  --salt-color-background-limestone: rgb(250, 248, 242);
+  --salt-color-background-titanium: rgb(226, 228, 229);
+  --salt-color-background-charcoal: rgb(71, 76, 80);
+  --salt-color-background-jet: rgb(16, 24, 32);
+  --salt-color-background-granite: rgb(26, 34, 41);
+  --salt-color-background-leather: rgb(38, 41, 43);
 }