Add color palettes (#26271)

src/common/style/derived-css-vars.ts

@@ -18,7 +18,43 @@ const _extractCssVars = (
   return variables;
 };
 
-export const extractVar = (css: CSSResult, varName: string) => {
+/**
+ * Recursively resolves a CSS variable reference from a base variable map.
+ *
+ * If the value of the specified variable in `baseVars` is itself a CSS variable reference
+ * (i.e., starts with `var(`), this function will recursively resolve the reference until
+ * it finds a concrete value or reaches an undefined variable.
+ *
+ * @param varName - The name of the CSS variable to resolve.
+ * @param baseVars - A record mapping variable names to their values or references.
+ * @returns The resolved value of the variable, or `undefined` if not found.
+ */
+const extractVarFromBase = (
+  varName: string,
+  baseVars: Record<string, string>
+): string | undefined => {
+  if (baseVars[varName] && baseVars[varName].startsWith("var(")) {
+    const baseVarName = baseVars[varName]
+      .substring(6, baseVars[varName].length - 1)
+      .trim();
+    return extractVarFromBase(baseVarName, baseVars);
+  }
+  return baseVars[varName];
+};
+
+/**
+ * Extracts the value of a CSS custom property (CSS variable) from a given CSSResult object.
+ *
+ * @param css - The CSSResult object containing the CSS string to search.
+ * @param varName - The name of the CSS variable (without the leading '--') to extract.
+ * @param baseVars - (Optional) A record of base variable names and their values, used to resolve variables that reference other variables via `var()`.
+ * @returns The value of the CSS variable if found, otherwise an empty string. If the variable references another variable and `baseVars` is provided, attempts to resolve it from `baseVars`.
+ */
+export const extractVar = (
+  css: CSSResult,
+  varName: string,
+  baseVars?: Record<string, string>
+) => {
   const cssString = css.toString();
   const search = `--${varName}:`;
   const startIndex = cssString.indexOf(search);
@@ -27,10 +63,17 @@ export const extractVar = (css: CSSResult, varName: string) => {
   }
 
   const endIndex = cssString.indexOf(";", startIndex + search.length);
-  return cssString
+  const value = cssString
     .substring(startIndex + search.length, endIndex)
     .replaceAll("}", "")
     .trim();
+
+  if (baseVars && value.startsWith("var(")) {
+    const baseVarName = value.substring(6, value.length - 1).trim();
+    return extractVarFromBase(baseVarName, baseVars) || value;
+  }
+
+  return value;
 };
 
 export const extractVars = (css: CSSResult) => {