From 8fd8f1ca3f4a59b926689ddc321600a5a0c4e0dd Mon Sep 17 00:00:00 2001
From: libertymayc <liberty.curtis@live.co.uk>
Date: Fri, 17 May 2024 11:34:17 -0400
Subject: [PATCH] include fonts and corners from new theme

---
 .../theme/css/characteristics/target-next.css |   2 +-
 packages/theme/css/palette/text-next.css      |  10 +-
 .../json/parsers/getCssVariablesFromDir.js    | 167 +++---
 packages/theme/json/parsers/themeToJson.js    |  28 +-
 packages/theme/json/parsers/toCss.js          |   2 +
 packages/theme/json/theme.json                | 557 +++++++++++++++++-
 6 files changed, 662 insertions(+), 104 deletions(-)

diff --git a/packages/theme/css/characteristics/target-next.css b/packages/theme/css/characteristics/target-next.css
index 496ca8f0c22..29155a8e696 100644
--- a/packages/theme/css/characteristics/target-next.css
+++ b/packages/theme/css/characteristics/target-next.css
@@ -1,4 +1,4 @@
 .salt-theme.salt-theme-next {
-  --salt-target-background-hover: var(--salt-palette-accent-default);
+  --salt-target-background-hover: var(--salt-palette-accent);
   --salt-target-borderColor-hover: var(--salt-palette-accent-weakest);
 }
diff --git a/packages/theme/css/palette/text-next.css b/packages/theme/css/palette/text-next.css
index d9af79d984a..17d4a242d20 100644
--- a/packages/theme/css/palette/text-next.css
+++ b/packages/theme/css/palette/text-next.css
@@ -1,7 +1,13 @@
-.salt-theme-next.salt-theme[data-heading-font="Open Sans"] {
+.salt-theme-next {
+  /* these get missed by parser if not included */
+  --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
+  --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
+}
+
+.salt-theme.salt-theme-next[data-heading-font="Open Sans"] {
   --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
 }
 
-.salt-theme-next.salt-theme[data-heading-font="Amplitude"] {
+.salt-theme.salt-theme-next[data-heading-font="Amplitude"] {
   --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-amplitude);
 }
diff --git a/packages/theme/json/parsers/getCssVariablesFromDir.js b/packages/theme/json/parsers/getCssVariablesFromDir.js
index dd52a0086b1..d77b833b654 100644
--- a/packages/theme/json/parsers/getCssVariablesFromDir.js
+++ b/packages/theme/json/parsers/getCssVariablesFromDir.js
@@ -16,6 +16,14 @@ const lightModeNextRegex =
 const darkModeNextRegex =
   /\.salt-theme-next\[data-mode="dark"\].*?\{(.*?)\}.*?/s;
 const generalThemeNextRegex = /\.salt-theme-next.\{(.*?)\}.*?/s;
+const openSansFontRegex =
+  /\.salt-theme-next\[data-heading-font="Open Sans"\].\{(.*?)\}.*?/s;
+const amplitudeFontRegex =
+  /\.salt-theme-next\[data-heading-font="Amplitude"\].\{(.*?)\}.*?/s;
+const roundedCornerRegex =
+  /\.salt-theme-next\[data-corner="rounded"].\{(.*?)\}.*?/s;
+const sharpCornerRegex =
+  /\.salt-theme-next\[data-corner="sharp"].\{(.*?)\}.*?/s;
 
 function isNonColor(token) {
   const tokenParts = token.split("-");
@@ -41,8 +49,11 @@ function processFile(
     mdVariables,
     ldVariables,
     tdVariables,
-  },
-  nonColors
+    openSansVariables,
+    amplitudeVariables,
+    roundedCornerVariables,
+    sharpCornerVariables,
+  }
 ) {
   // Process CSS files
   const cssContent = fs.readFileSync(filePath, "utf8");
@@ -55,11 +66,19 @@ function processFile(
   let lightContent;
   let darkContent;
   let generalContent;
+  let amplitudeContent;
+  let openSansContent;
+  let roundedCornerContent;
+  let sharpCornerContent;
 
   if (filePath.includes("next")) {
     lightContent = cssContent.match(lightModeNextRegex);
     darkContent = cssContent.match(darkModeNextRegex);
     generalContent = cssContent.match(generalThemeNextRegex);
+    amplitudeContent = cssContent.match(amplitudeFontRegex);
+    openSansContent = cssContent.match(openSansFontRegex);
+    roundedCornerContent = cssContent.match(roundedCornerRegex);
+    sharpCornerContent = cssContent.match(sharpCornerRegex);
   } else {
     lightContent = cssContent.match(lightModeRegex);
     darkContent = cssContent.match(darkModeRegex);
@@ -69,105 +88,84 @@ function processFile(
   if (lightContent) {
     while ((match = cssVariableRegex.exec(lightContent[0])) !== null) {
       const variableName = match[1];
-      if (nonColors) {
-        if (isNonColor(variableName)) {
-          const variableValue = match[2].trim();
-          lightModeVariables[variableName] = variableValue;
-        }
-      } else {
-        const variableValue = match[2].trim();
-        lightModeVariables[variableName] = variableValue;
-      }
+      const variableValue = match[2].trim();
+      lightModeVariables[variableName] = variableValue;
     }
   }
   if (darkContent) {
     while ((match = cssVariableRegex.exec(darkContent[0])) !== null) {
       const variableName = match[1];
-      if (nonColors) {
-        if (isNonColor(variableName)) {
-          const variableValue = match[2].trim();
-          darkModeVariables[variableName] = variableValue;
-        }
-      } else {
-        const variableValue = match[2].trim();
-        darkModeVariables[variableName] = variableValue;
-      }
+      const variableValue = match[2].trim();
+      darkModeVariables[variableName] = variableValue;
     }
   }
   if (hdContent) {
     while ((match = cssVariableRegex.exec(hdContent[0])) !== null) {
       const variableName = match[1];
-      if (nonColors) {
-        if (isNonColor(variableName)) {
-          const variableValue = match[2].trim();
-          hdVariables[variableName] = variableValue;
-        }
-      } else {
-        const variableValue = match[2].trim();
-        hdVariables[variableName] = variableValue;
-      }
+      const variableValue = match[2].trim();
+      hdVariables[variableName] = variableValue;
     }
   }
   if (mdContent) {
     while ((match = cssVariableRegex.exec(mdContent[0])) !== null) {
       const variableName = match[1];
-      if (nonColors) {
-        if (isNonColor(variableName)) {
-          const variableValue = match[2].trim();
-          mdVariables[variableName] = variableValue;
-        }
-      } else {
-        const variableValue = match[2].trim();
-        mdVariables[variableName] = variableValue;
-      }
+      const variableValue = match[2].trim();
+      mdVariables[variableName] = variableValue;
     }
   }
   if (ldContent) {
     while ((match = cssVariableRegex.exec(ldContent[0])) !== null) {
       const variableName = match[1];
-      if (nonColors) {
-        if (isNonColor(variableName)) {
-          const variableValue = match[2].trim();
-          ldVariables[variableName] = variableValue;
-        }
-      } else {
-        const variableValue = match[2].trim();
-        ldVariables[variableName] = variableValue;
-      }
+      const variableValue = match[2].trim();
+      ldVariables[variableName] = variableValue;
     }
   }
   if (tdContent) {
     while ((match = cssVariableRegex.exec(tdContent[0])) !== null) {
       const variableName = match[1];
-      if (nonColors) {
-        if (isNonColor(variableName)) {
-          const variableValue = match[2].trim();
-          tdVariables[variableName] = variableValue;
-        }
-      } else {
-        const variableValue = match[2].trim();
-        tdVariables[variableName] = variableValue;
-      }
+      const variableValue = match[2].trim();
+      tdVariables[variableName] = variableValue;
     }
   }
   if (generalContent) {
     while ((match = cssVariableRegex.exec(generalContent[0])) !== null) {
       const variableName = match[1];
-      if (nonColors) {
-        if (isNonColor(variableName)) {
-          const variableValue = match[2].trim();
-          cssVariables[variableName] = variableValue;
-        }
-      } else {
-        const variableValue = match[2].trim();
-        cssVariables[variableName] = variableValue;
-      }
+      const variableValue = match[2].trim();
+      cssVariables[variableName] = variableValue;
+    }
+  }
+  if (amplitudeContent) {
+    while ((match = cssVariableRegex.exec(amplitudeContent[0])) !== null) {
+      const variableName = match[1];
+      const variableValue = match[2].trim();
+      amplitudeVariables[variableName] = variableValue;
+    }
+  }
+  if (openSansContent) {
+    while ((match = cssVariableRegex.exec(openSansContent[0])) !== null) {
+      const variableName = match[1];
+      const variableValue = match[2].trim();
+      openSansVariables[variableName] = variableValue;
+    }
+  }
+  if (roundedCornerContent) {
+    while ((match = cssVariableRegex.exec(roundedCornerContent[0])) !== null) {
+      const variableName = match[1];
+      const variableValue = match[2].trim();
+      roundedCornerVariables[variableName] = variableValue;
+    }
+  }
+  if (sharpCornerContent) {
+    while ((match = cssVariableRegex.exec(sharpCornerContent[0])) !== null) {
+      const variableName = match[1];
+      const variableValue = match[2].trim();
+      sharpCornerVariables[variableName] = variableValue;
     }
   }
 }
 
 module.exports = {
-  fromDir: function getCssVariablesFromDir(dirPath, nonColors) {
+  fromDir: function getCssVariablesFromDir(dirPath) {
     const cssVariables = {};
     const lightModeVariables = {};
     const darkModeVariables = {};
@@ -175,6 +173,10 @@ module.exports = {
     const mdVariables = {};
     const ldVariables = {};
     const tdVariables = {};
+    const openSansVariables = {};
+    const amplitudeVariables = {};
+    const roundedCornerVariables = {};
+    const sharpCornerVariables = {};
     const files = fs.readdirSync(dirPath);
     const dirFiles = files.map((file) => file.replace(".css", ""));
     files.forEach((file) => {
@@ -189,24 +191,23 @@ module.exports = {
         stats.isFile() &&
         path.extname(file) === ".css" &&
         !dirFiles.includes(`${fileName}-next`) &&
-        fileName !== "fade"
+        fileName !== "fade" // TODO: consider
       ) {
-        processFile(
-          filePath,
-          {
-            cssVariables,
-            lightModeVariables,
-            darkModeVariables,
-            hdVariables,
-            mdVariables,
-            ldVariables,
-            tdVariables,
-          },
-          nonColors
-        );
+        processFile(filePath, {
+          cssVariables,
+          lightModeVariables,
+          darkModeVariables,
+          hdVariables,
+          mdVariables,
+          ldVariables,
+          tdVariables,
+          openSansVariables,
+          amplitudeVariables,
+          roundedCornerVariables,
+          sharpCornerVariables,
+        });
       }
     });
-
     return {
       light: lightModeVariables,
       dark: darkModeVariables,
@@ -215,6 +216,10 @@ module.exports = {
       low: ldVariables,
       touch: tdVariables,
       general: cssVariables,
+      openSans: openSansVariables,
+      amplitude: amplitudeVariables,
+      rounded: roundedCornerVariables,
+      sharp: sharpCornerVariables,
     };
   },
 };
diff --git a/packages/theme/json/parsers/themeToJson.js b/packages/theme/json/parsers/themeToJson.js
index 0411e622180..1587a93799f 100644
--- a/packages/theme/json/parsers/themeToJson.js
+++ b/packages/theme/json/parsers/themeToJson.js
@@ -1,6 +1,6 @@
 const path = require("path");
 const fs = require("fs");
-const { fromDir, fromFile } = require("./getCssVariablesFromDir");
+const { fromDir } = require("./getCssVariablesFromDir");
 const colorFormatSwap = require("./colorFormatSwap");
 
 /* Removes surrounding CSS var('...') function from a token */
@@ -33,6 +33,8 @@ function extractOpacity(color) {
 const jsonTokens = {
   modes: ["$light", "$dark"],
   densities: ["$high", "$medium", "$low", "$touch"],
+  fonts: ["$amplitude", "$openSans"],
+  corners: ["$rounded", "$sharp"],
   palette: {},
   foundations: {},
   characteristics: {},
@@ -347,10 +349,30 @@ function themeToJson() {
     path.resolve(__dirname, "../../css/foundations")
   );
   const characteristicVariables = fromDir(
-    path.resolve(__dirname, "../../css/characteristics"),
-    true
+    path.resolve(__dirname, "../../css/characteristics")
   );
   format({
+    $rounded: {
+      ...paletteVariables.rounded,
+      /* corners are only palette, but adding for safety */
+      ...foundationVariables.rounded,
+      ...characteristicVariables.rounded,
+    },
+    $sharp: {
+      ...paletteVariables.sharp,
+      ...foundationVariables.sharp,
+      ...characteristicVariables.sharp,
+    },
+    $amplitude: {
+      ...paletteVariables.amplitude,
+      ...foundationVariables.amplitude,
+      ...characteristicVariables.amplitude,
+    },
+    $openSans: {
+      ...paletteVariables.openSans,
+      ...foundationVariables.openSans,
+      ...characteristicVariables.openSans,
+    },
     $light: {
       ...paletteVariables.light,
       ...foundationVariables.light,
diff --git a/packages/theme/json/parsers/toCss.js b/packages/theme/json/parsers/toCss.js
index 501fec3ac9d..4d28388cd7d 100644
--- a/packages/theme/json/parsers/toCss.js
+++ b/packages/theme/json/parsers/toCss.js
@@ -172,6 +172,8 @@ function toCSS(themeJson) {
 
   // TODO: characteristics
 
+  // TODO: fonts and corners
+
   let CSS = "";
 
   for (const c of Object.entries(classes)) {
diff --git a/packages/theme/json/theme.json b/packages/theme/json/theme.json
index 5b319762161..ee2643052a6 100644
--- a/packages/theme/json/theme.json
+++ b/packages/theme/json/theme.json
@@ -9,7 +9,62 @@
     "$low",
     "$touch"
   ],
+  "fonts": [
+    "$amplitude",
+    "$openSans"
+  ],
+  "corners": [
+    "$rounded",
+    "$sharp"
+  ],
   "palette": {
+    "corner": {
+      "palette-corner-weaker": {
+        "$value": {
+          "$sharp": "{foundations.curve.curve-0}",
+          "$rounded": "{foundations.curve.curve-50}"
+        },
+        "$type": "dimension"
+      },
+      "palette-corner-weak": {
+        "$value": {
+          "$sharp": "{foundations.curve.curve-0}",
+          "$rounded": "{foundations.curve.curve-100}"
+        },
+        "$type": "dimension"
+      },
+      "palette-corner": {
+        "$value": {
+          "$sharp": "{foundations.curve.curve-0}",
+          "$rounded": "{foundations.curve.curve-150}"
+        },
+        "$type": "dimension"
+      },
+      "palette-corner-strongest": {
+        "$value": {
+          "$sharp": "{foundations.curve.curve-999}",
+          "$rounded": "{foundations.curve.curve-999}"
+        },
+        "$type": "dimension"
+      }
+    },
+    "text": {
+      "palette-text-fontFamily-heading": {
+        "$value": {
+          "$openSans": "{foundations.typography.typography-fontFamily-openSans}",
+          "$amplitude": "{foundations.typography.typography-fontFamily-amplitude}"
+        },
+        "$type": "fontFamily"
+      },
+      "palette-text-fontFamily": {
+        "$value": "{foundations.typography.typography-fontFamily-openSans}",
+        "$type": "fontFamily"
+      },
+      "palette-text-fontFamily-code": {
+        "$value": "{foundations.typography.typography-fontFamily-ptMono}",
+        "$type": "fontFamily"
+      }
+    },
     "accent": {
       "palette-accent": {
         "$value": {
@@ -164,17 +219,24 @@
       },
       "palette-error-border": {
         "$value": {
-          "$dark": "{foundations.color.color-red-500}",
+          "$dark": "{foundations.color.color-red-400}",
           "$light": "{foundations.color.color-red-500}"
         },
         "$type": "color"
       },
-      "palette-error-foreground": {
+      "palette-error-foreground-decorative": {
         "$value": {
-          "$dark": "{foundations.color.color-red-500}",
+          "$dark": "{foundations.color.color-red-400}",
           "$light": "{foundations.color.color-red-500}"
         },
         "$type": "color"
+      },
+      "palette-error-foreground-informative": {
+        "$value": {
+          "$dark": "{foundations.color.color-red-200}",
+          "$light": "{foundations.color.color-red-600}"
+        },
+        "$type": "color"
       }
     },
     "foreground": {
@@ -773,12 +835,19 @@
         },
         "$type": "color"
       },
-      "palette-success-foreground": {
+      "palette-success-foreground-decorative": {
         "$value": {
           "$dark": "{foundations.color.color-green-400}",
           "$light": "{foundations.color.color-green-500}"
         },
         "$type": "color"
+      },
+      "palette-success-foreground-informative": {
+        "$value": {
+          "$dark": "{foundations.color.color-green-200}",
+          "$light": "{foundations.color.color-green-600}"
+        },
+        "$type": "color"
       }
     },
     "warning": {
@@ -1896,11 +1965,15 @@
       }
     },
     "typography": {
-      "typography-fontFamily": {
+      "typography-fontFamily-openSans": {
         "$value": "\"Open Sans\"",
         "$type": "fontFamily"
       },
-      "typography-fontFamily-code": {
+      "typography-fontFamily-amplitude": {
+        "$value": "\"Amplitude\"",
+        "$type": "fontFamily"
+      },
+      "typography-fontFamily-ptMono": {
         "$value": "\"PT Mono\"",
         "$type": "fontFamily"
       },
@@ -2154,7 +2227,7 @@
         "$type": "fontWeight"
       },
       "text-fontFamily": {
-        "$value": "{foundations.typography.typography-fontFamily}",
+        "$value": "{palette.text.palette-text-fontFamily}",
         "$type": "fontFamily"
       },
       "text-fontWeight": {
@@ -2170,7 +2243,7 @@
         "$type": "fontWeight"
       },
       "text-notation-fontFamily": {
-        "$value": "{foundations.typography.typography-fontFamily}",
+        "$value": "{palette.text.palette-text-fontFamily}",
         "$type": "fontFamily"
       },
       "text-notation-fontWeight": {
@@ -2186,7 +2259,7 @@
         "$type": "fontWeight"
       },
       "text-h1-fontFamily": {
-        "$value": "{foundations.typography.typography-fontFamily}",
+        "$value": "{palette.text.palette-text-fontFamily-heading}",
         "$type": "fontFamily"
       },
       "text-h1-fontWeight": {
@@ -2202,7 +2275,7 @@
         "$type": "fontWeight"
       },
       "text-h2-fontFamily": {
-        "$value": "{foundations.typography.typography-fontFamily}",
+        "$value": "{palette.text.palette-text-fontFamily-heading}",
         "$type": "fontFamily"
       },
       "text-h2-fontWeight": {
@@ -2218,7 +2291,7 @@
         "$type": "fontWeight"
       },
       "text-h3-fontFamily": {
-        "$value": "{foundations.typography.typography-fontFamily}",
+        "$value": "{palette.text.palette-text-fontFamily-heading}",
         "$type": "fontFamily"
       },
       "text-h3-fontWeight": {
@@ -2234,7 +2307,7 @@
         "$type": "fontWeight"
       },
       "text-h4-fontFamily": {
-        "$value": "{foundations.typography.typography-fontFamily}",
+        "$value": "{palette.text.palette-text-fontFamily-heading}",
         "$type": "fontFamily"
       },
       "text-h4-fontWeight": {
@@ -2250,7 +2323,7 @@
         "$type": "fontWeight"
       },
       "text-label-fontFamily": {
-        "$value": "{foundations.typography.typography-fontFamily}",
+        "$value": "{palette.text.palette-text-fontFamily}",
         "$type": "fontFamily"
       },
       "text-label-fontWeight": {
@@ -2266,7 +2339,7 @@
         "$type": "fontWeight"
       },
       "text-display1-fontFamily": {
-        "$value": "{foundations.typography.typography-fontFamily}",
+        "$value": "{palette.text.palette-text-fontFamily-heading}",
         "$type": "fontFamily"
       },
       "text-display1-fontWeight": {
@@ -2282,7 +2355,7 @@
         "$type": "fontWeight"
       },
       "text-display2-fontFamily": {
-        "$value": "{foundations.typography.typography-fontFamily}",
+        "$value": "{palette.text.palette-text-fontFamily-heading}",
         "$type": "fontFamily"
       },
       "text-display2-fontWeight": {
@@ -2298,7 +2371,7 @@
         "$type": "fontWeight"
       },
       "text-display3-fontFamily": {
-        "$value": "{foundations.typography.typography-fontFamily}",
+        "$value": "{palette.text.palette-text-fontFamily-heading}",
         "$type": "fontFamily"
       },
       "text-display3-fontWeight": {
@@ -2314,10 +2387,198 @@
         "$type": "fontWeight"
       },
       "text-code-fontFamily": {
-        "$value": "{foundations.typography.typography-fontFamily-code}",
+        "$value": "{palette.text.palette-text-fontFamily-code}",
         "$type": "fontFamily"
       }
     },
+    "accent": {
+      "accent-background": {
+        "$value": "{palette.accent.palette-accent}",
+        "$type": "color"
+      },
+      "accent-borderColor": {
+        "$value": "{palette.accent.palette-accent}",
+        "$type": "color"
+      },
+      "accent-foreground": {
+        "$value": "{palette.foreground.palette-foreground-primary-alt}",
+        "$type": "color"
+      }
+    },
+    "actionable": {
+      "actionable-cta-foreground": {
+        "$value": "{palette.foreground.palette-foreground-primary-alt}",
+        "$type": "color"
+      },
+      "actionable-cta-foreground-hover": {
+        "$value": "{palette.foreground.palette-foreground-invert}",
+        "$type": "color"
+      },
+      "actionable-cta-foreground-active": {
+        "$value": "{palette.foreground.palette-foreground-invert}",
+        "$type": "color"
+      },
+      "actionable-cta-foreground-disabled": {
+        "$value": "{palette.foreground.palette-foreground-primary-alt-disabled}",
+        "$type": "color"
+      },
+      "actionable-cta-background": {
+        "$value": "{palette.accent.palette-accent}",
+        "$type": "color"
+      },
+      "actionable-cta-background-hover": {
+        "$value": "{palette.accent.palette-accent-strong}",
+        "$type": "color"
+      },
+      "actionable-cta-background-active": {
+        "$value": "{palette.accent.palette-accent-stronger}",
+        "$type": "color"
+      },
+      "actionable-cta-background-disabled": {
+        "$value": "{palette.accent.palette-accent-disabled}",
+        "$type": "color"
+      },
+      "actionable-primary-foreground": {
+        "$value": "{palette.foreground.palette-foreground-primary-alt}",
+        "$type": "color"
+      },
+      "actionable-primary-foreground-hover": {
+        "$value": "{palette.foreground.palette-foreground-invert}",
+        "$type": "color"
+      },
+      "actionable-primary-foreground-active": {
+        "$value": "{palette.foreground.palette-foreground-invert}",
+        "$type": "color"
+      },
+      "actionable-primary-foreground-disabled": {
+        "$value": "{palette.foreground.palette-foreground-primary-alt-disabled}",
+        "$type": "color"
+      },
+      "actionable-primary-background": {
+        "$value": "{palette.neutral.palette-neutral}",
+        "$type": "color"
+      },
+      "actionable-primary-background-hover": {
+        "$value": "{palette.neutral.palette-neutral-strong}",
+        "$type": "color"
+      },
+      "actionable-primary-background-active": {
+        "$value": "{palette.neutral.palette-neutral-stronger}",
+        "$type": "color"
+      },
+      "actionable-primary-background-disabled": {
+        "$value": "{palette.neutral.palette-neutral-strong-disabled}",
+        "$type": "color"
+      },
+      "actionable-secondary-foreground": {
+        "$value": "{palette.foreground.palette-foreground-primary}",
+        "$type": "color"
+      },
+      "actionable-secondary-foreground-hover": {
+        "$value": "{palette.foreground.palette-foreground-invert}",
+        "$type": "color"
+      },
+      "actionable-secondary-foreground-active": {
+        "$value": "{palette.foreground.palette-foreground-invert}",
+        "$type": "color"
+      },
+      "actionable-secondary-foreground-disabled": {
+        "$value": "{palette.foreground.palette-foreground-primary-disabled}",
+        "$type": "color"
+      },
+      "actionable-secondary-background": {
+        "$value": "{palette.background.palette-background-none}",
+        "$type": "color"
+      },
+      "actionable-secondary-background-hover": {
+        "$value": "{palette.neutral.palette-neutral-strong}",
+        "$type": "color"
+      },
+      "actionable-secondary-background-active": {
+        "$value": "{palette.neutral.palette-neutral-stronger}",
+        "$type": "color"
+      },
+      "actionable-secondary-background-disabled": {
+        "$value": "{palette.background.palette-background-none}",
+        "$type": "color"
+      }
+    },
+    "container": {
+      "container-primary-background": {
+        "$value": "{palette.background.palette-background-primary}",
+        "$type": "color"
+      },
+      "container-primary-background-disabled": {
+        "$value": "{palette.background.palette-background-primary-disabled}",
+        "$type": "color"
+      },
+      "container-primary-borderColor": {
+        "$value": "{palette.neutral.palette-neutral-weaker}",
+        "$type": "color"
+      },
+      "container-primary-borderColor-disabled": {
+        "$value": "{palette.neutral.palette-neutral-weaker-disabled}",
+        "$type": "color"
+      },
+      "container-secondary-background": {
+        "$value": "{palette.background.palette-background-secondary}",
+        "$type": "color"
+      },
+      "container-secondary-background-disabled": {
+        "$value": "{palette.background.palette-background-secondary-disabled}",
+        "$type": "color"
+      },
+      "container-secondary-borderColor": {
+        "$value": "{palette.neutral.palette-neutral-weaker}",
+        "$type": "color"
+      },
+      "container-secondary-borderColor-disabled": {
+        "$value": "{palette.neutral.palette-neutral-weaker-disabled}",
+        "$type": "color"
+      },
+      "container-tertiary-background": {
+        "$value": "{palette.background.palette-background-tertiary}",
+        "$type": "color"
+      },
+      "container-tertiary-background-disabled": {
+        "$value": "{palette.background.palette-background-tertiary-disabled}",
+        "$type": "color"
+      }
+    },
+    "content": {
+      "content-primary-foreground": {
+        "$value": "{palette.foreground.palette-foreground-primary}",
+        "$type": "color"
+      },
+      "content-primary-foreground-disabled": {
+        "$value": "{palette.foreground.palette-foreground-primary-disabled}",
+        "$type": "color"
+      },
+      "content-secondary-foreground": {
+        "$value": "{palette.foreground.palette-foreground-secondary}",
+        "$type": "color"
+      },
+      "content-secondary-foreground-disabled": {
+        "$value": "{palette.foreground.palette-foreground-secondary-disabled}",
+        "$type": "color"
+      },
+      "content-foreground-hover": {
+        "$value": "{palette.foreground.palette-foreground-hover}",
+        "$type": "color"
+      },
+      "content-foreground-active": {
+        "$value": "{palette.foreground.palette-foreground-active}",
+        "$type": "color"
+      },
+      "content-foreground-visited": {
+        "$value": "{palette.foreground.palette-foreground-visited}",
+        "$type": "color"
+      },
+      "content-foreground-highlight": {
+        "$value": "{palette.accent.palette-accent-weaker}",
+        "$type": "color"
+      }
+    },
     "draggable": {
       "draggable-horizontal-cursor-hover": {
         "$value": "row-resize",
@@ -2343,6 +2604,268 @@
         "$value": "grabbing",
         "$type": "cursor"
       }
+    },
+    "editable": {
+      "editable-borderColor": {
+        "$value": "{palette.neutral.palette-neutral}",
+        "$type": "color"
+      },
+      "editable-borderColor-active": {
+        "$value": "{palette.accent.palette-accent-stronger}",
+        "$type": "color"
+      },
+      "editable-borderColor-disabled": {
+        "$value": "{palette.neutral.palette-neutral-disabled}",
+        "$type": "color"
+      },
+      "editable-borderColor-hover": {
+        "$value": "{palette.accent.palette-accent}",
+        "$type": "color"
+      },
+      "editable-borderColor-readonly": {
+        "$value": "{palette.neutral.palette-neutral-readonly}",
+        "$type": "color"
+      },
+      "editable-primary-background": {
+        "$value": "{palette.background.palette-background-primary}",
+        "$type": "color"
+      },
+      "editable-primary-background-active": {
+        "$value": "{palette.background.palette-background-primary}",
+        "$type": "color"
+      },
+      "editable-primary-background-disabled": {
+        "$value": "{palette.background.palette-background-primary-disabled}",
+        "$type": "color"
+      },
+      "editable-primary-background-hover": {
+        "$value": "{palette.background.palette-background-primary}",
+        "$type": "color"
+      },
+      "editable-primary-background-readonly": {
+        "$value": "{palette.background.palette-background-none}",
+        "$type": "color"
+      },
+      "editable-secondary-background": {
+        "$value": "{palette.background.palette-background-secondary}",
+        "$type": "color"
+      },
+      "editable-secondary-background-active": {
+        "$value": "{palette.background.palette-background-secondary}",
+        "$type": "color"
+      },
+      "editable-secondary-background-disabled": {
+        "$value": "{palette.background.palette-background-secondary-disabled}",
+        "$type": "color"
+      },
+      "editable-secondary-background-hover": {
+        "$value": "{palette.background.palette-background-secondary}",
+        "$type": "color"
+      },
+      "editable-secondary-background-readonly": {
+        "$value": "{palette.background.palette-background-none}",
+        "$type": "color"
+      }
+    },
+    "focused": {
+      "focused-outlineColor": {
+        "$value": "{palette.accent.palette-accent-stronger}",
+        "$type": "color"
+      }
+    },
+    "navigable": {
+      "navigable-indicator-hover": {
+        "$value": "{palette.neutral.palette-neutral}",
+        "$type": "color"
+      },
+      "navigable-indicator-active": {
+        "$value": "{palette.accent.palette-accent}",
+        "$type": "color"
+      },
+      "navigable-background-hover": {
+        "$value": "{palette.navigate.palette-navigate-background-hover}",
+        "$type": "color"
+      }
+    },
+    "overlayable": {
+      "overlayable-background": {
+        "$value": "{palette.background.palette-background-backdrop}",
+        "$type": "color"
+      }
+    },
+    "selectable": {
+      "selectable-borderColor": {
+        "$value": "{palette.neutral.palette-neutral}",
+        "$type": "color"
+      },
+      "selectable-borderColor-hover": {
+        "$value": "{palette.accent.palette-accent-weak}",
+        "$type": "color"
+      },
+      "selectable-borderColor-selected": {
+        "$value": "{palette.accent.palette-accent}",
+        "$type": "color"
+      },
+      "selectable-borderColor-selectedDisabled": {
+        "$value": "{palette.accent.palette-accent-disabled}",
+        "$type": "color"
+      },
+      "selectable-borderColor-disabled": {
+        "$value": "{palette.neutral.palette-neutral-disabled}",
+        "$type": "color"
+      },
+      "selectable-borderColor-readonly": {
+        "$value": "{palette.neutral.palette-neutral-readonly}",
+        "$type": "color"
+      },
+      "selectable-foreground": {
+        "$value": "{palette.neutral.palette-neutral-strong}",
+        "$type": "color"
+      },
+      "selectable-foreground-disabled": {
+        "$value": "{palette.neutral.palette-neutral-strong-disabled}",
+        "$type": "color"
+      },
+      "selectable-foreground-hover": {
+        "$value": "{palette.accent.palette-accent-weak}",
+        "$type": "color"
+      },
+      "selectable-foreground-selected": {
+        "$value": "{palette.accent.palette-accent}",
+        "$type": "color"
+      },
+      "selectable-foreground-selectedDisabled": {
+        "$value": "{palette.accent.palette-accent-disabled}",
+        "$type": "color"
+      },
+      "selectable-background": {
+        "$value": "{palette.background.palette-background-none}",
+        "$type": "color"
+      },
+      "selectable-background-hover": {
+        "$value": "{palette.accent.palette-accent-weakest}",
+        "$type": "color"
+      },
+      "selectable-background-selected": {
+        "$value": "{palette.accent.palette-accent-weaker}",
+        "$type": "color"
+      },
+      "selectable-background-blurSelected": {
+        "$value": "{palette.neutral.palette-neutral-weakest}",
+        "$type": "color"
+      },
+      "selectable-background-disabled": {
+        "$value": "{palette.background.palette-background-none}",
+        "$type": "color"
+      },
+      "selectable-background-selectedDisabled": {
+        "$value": "{palette.accent.palette-accent-weaker-disabled}",
+        "$type": "color"
+      }
+    },
+    "separable": {
+      "separable-primary-borderColor": {
+        "$value": "{palette.neutral.palette-neutral-stronger-primary}",
+        "$type": "color"
+      },
+      "separable-secondary-borderColor": {
+        "$value": "{palette.neutral.palette-neutral-stronger-secondary}",
+        "$type": "color"
+      },
+      "separable-tertiary-borderColor": {
+        "$value": "{palette.neutral.palette-neutral-stronger-tertiary}",
+        "$type": "color"
+      }
+    },
+    "status": {
+      "status-info-foreground": {
+        "$value": "{palette.accent.palette-accent}",
+        "$type": "color"
+      },
+      "status-success-foreground": {
+        "$value": "{palette.positive.palette-positive}",
+        "$type": "color"
+      },
+      "status-warning-foreground": {
+        "$value": "{palette.warning.palette-warning}",
+        "$type": "color"
+      },
+      "status-error-foreground": {
+        "$value": "{palette.negative.palette-negative}",
+        "$type": "color"
+      },
+      "status-static-foreground": {
+        "$value": "{palette.foreground.palette-foreground-secondary}",
+        "$type": "color"
+      },
+      "status-negative-foreground": {
+        "$value": "{palette.negative.palette-negative}",
+        "$type": "color"
+      },
+      "status-positive-foreground": {
+        "$value": "{palette.positive.palette-positive}",
+        "$type": "color"
+      },
+      "status-info-borderColor": {
+        "$value": "{palette.accent.palette-accent}",
+        "$type": "color"
+      },
+      "status-success-borderColor": {
+        "$value": "{palette.positive.palette-positive}",
+        "$type": "color"
+      },
+      "status-warning-borderColor": {
+        "$value": "{palette.warning.palette-warning}",
+        "$type": "color"
+      },
+      "status-error-borderColor": {
+        "$value": "{palette.negative.palette-negative}",
+        "$type": "color"
+      },
+      "status-info-background": {
+        "$value": "{palette.accent.palette-accent-weakest}",
+        "$type": "color"
+      },
+      "status-success-background": {
+        "$value": "{palette.positive.palette-positive-weak}",
+        "$type": "color"
+      },
+      "status-warning-background": {
+        "$value": "{palette.warning.palette-warning-weak}",
+        "$type": "color"
+      },
+      "status-error-background": {
+        "$value": "{palette.negative.palette-negative-weak}",
+        "$type": "color"
+      },
+      "status-success-background-selected": {
+        "$value": "{palette.positive.palette-positive-weak}",
+        "$type": "color"
+      },
+      "status-warning-background-selected": {
+        "$value": "{palette.warning.palette-warning-weak}",
+        "$type": "color"
+      },
+      "status-error-background-selected": {
+        "$value": "{palette.negative.palette-negative-weak}",
+        "$type": "color"
+      }
+    },
+    "target": {
+      "target-background-hover": {
+        "$value": "{palette.accent.palette-accent}",
+        "$type": "color"
+      },
+      "target-borderColor-hover": {
+        "$value": "{palette.accent.palette-accent-weakest}",
+        "$type": "color"
+      }
+    },
+    "track": {
+      "track-borderColor": {
+        "$value": "{palette.neutral.palette-neutral}",
+        "$type": "color"
+      }
     }
   }
 }
\ No newline at end of file