Initial resolve theme refs exploration

polaris-tokens/scripts/toValues.ts

@@ -18,18 +18,11 @@ export async function toValues() {
   await fs.promises.writeFile(
     path.join(outputDir, 'index.ts'),
     [
+      "import {resolveThemeRefs} from '../src/themes/utils';",
       `export * from '../src/index';`,
       Object.entries(themeDefault).map(createExport),
       createExport(['tokens', themeDefault]),
-      createExport([
-        'themes',
-        Object.fromEntries(
-          Object.entries(metaThemes).map(([themeName, metaTheme]) => [
-            themeName,
-            extractMetaThemeValues(metaTheme),
-          ]),
-        ),
-      ]),
+      createExportThemes(),
     ]
       .flat()
       .join('\n'),
@@ -39,3 +32,16 @@ export async function toValues() {
 function createExport(entry: [string | number, any]) {
   return `export const ${entry[0]} = ${JSON.stringify(entry[1])} as const;`;
 }
+
+function createExportThemes() {
+  const themes = Object.entries(metaThemes)
+    .map(([themeName, metaTheme]) => {
+      const theme = extractMetaThemeValues(metaTheme);
+      const themeJSON = JSON.stringify(theme, null, 2);
+
+      return `'${themeName}': resolveThemeRefs(${themeJSON})`;
+    })
+    .join(',\n');
+
+  return `export const themes = {\n${themes}\n} as const;`;
+}

polaris-tokens/src/themes/utils.ts

@@ -11,6 +11,7 @@ import type {
   MetaThemePartialShape,
   MetaTokenGroupShape,
   ThemeName,
+  Theme,
 } from './types';
 import {themeNameLightUplift} from './constants';
 import {metaThemeBase} from './base';
@@ -54,3 +55,32 @@ export function extractMetaThemeValues<T extends MetaThemeShape>(metaTheme: T) {
     ),
   ) as ExtractMetaThemeValues<T>;
 }
+
+/**
+ * Private utility to resolve references within the theme object by:
+ * 1. Traversing each token group.
+ * 2. Identifying token values starting with `var(--p-`.
+ * 3. Replacing these values with a getter function that returns the resolved value.
+ * 4. Returning the mutated theme object.
+ */
+export function resolveThemeRefs<T extends Theme>(theme: T): T {
+  Object.keys(theme).forEach((tokenGroupName) => {
+    const tokenGroupRef = theme[tokenGroupName as keyof Theme];
+
+    Object.entries(tokenGroupRef).forEach(([tokenName, tokenValue]) => {
+      if (tokenValue.startsWith('var(--p-')) {
+        const tokenNameRef = tokenValue.slice(8, -1);
+        const tokenGroupNameRef = tokenNameRef.split('-')[0];
+
+        Object.defineProperty(tokenGroupRef, tokenName, {
+          get() {
+            return (theme as any)[tokenGroupNameRef][tokenNameRef] as string;
+          },
+          enumerable: true,
+        });
+      }
+    });
+  });
+
+  return theme;
+}