UN-4290 [FEAT] Move the v1 menus onto design tokens

frontend/biome.json

@@ -177,6 +177,10 @@
         }
       }
     },
+    {
+      "includes": ["src/v1/styles/tokens.css"],
+      "formatter": { "enabled": false }
+    },
     {
       "includes": ["src/**", "!src/v1/**"],
       "linter": {

frontend/package.json

@@ -78,8 +78,9 @@
     "lint:all": "biome check --write src/",
     "lint:changed": "(git diff --name-only --diff-filter=ACMR; git ls-files --others --exclude-standard) | grep -E '\\.[jt]sx?$' | sed 's|^frontend/||' | sort -u | xargs -r biome check --write",
     "typecheck": "tsc --noEmit",
+    "tokens:v1": "node scripts/build-v1-tokens.mjs",
     "typecheck:v1": "node scripts/check-v1.mjs --files && tsc -p src/v1/tsconfig.json",
-    "lint:v1": "biome lint src/v1/ && node scripts/check-v1.mjs --code",
+    "lint:v1": "biome lint src/v1/ && node scripts/check-v1.mjs --code && node scripts/check-v1-styles.mjs",
     "test:v1": "vitest run --dir src/v1 --passWithNoTests && node --test test-fixtures/v1-boundary/boundary.fixtures.mjs scripts/v1-plugins.fixtures.mjs"
   },
   "browserslist": {
@@ -96,6 +97,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.13",
+    "@tailwindcss/node": "4.3.3",
     "@tailwindcss/postcss": "^4",
     "@tailwindcss/typography": "^0.5.20",
     "@tailwindcss/vite": "^4",

frontend/scripts/build-v1-tokens.mjs

@@ -0,0 +1,40 @@
+import fs from "node:fs";
+import { registerHooks } from "node:module";
+import path from "node:path";
+
+// Node's ESM resolver needs file extensions; v1 source imports siblings without
+// them (`./theme`), as Vite and tsc expect. Retry such relative imports as `.ts`.
+registerHooks({
+  resolve(specifier, context, nextResolve) {
+    try {
+      return nextResolve(specifier, context);
+    } catch (error) {
+      if (specifier.startsWith(".") && !path.extname(specifier)) {
+        return nextResolve(`${specifier}.ts`, context);
+      }
+      throw error;
+    }
+  },
+});
+
+const { renderTokensCss } = await import("../src/v1/lib/tokens.ts");
+const { TOKENS } = await import("../src/v1/styles/tokens.ts");
+const out = path.join(
+  import.meta.dirname,
+  "..",
+  "src",
+  "v1",
+  "styles",
+  "tokens.css",
+);
+const css = renderTokensCss(TOKENS);
+if (process.argv.includes("--check")) {
+  if (fs.readFileSync(out, "utf8") !== css) {
+    console.error(
+      "src/v1/styles/tokens.css is stale; run `bun run tokens:v1`.",
+    );
+    process.exit(1);
+  }
+} else {
+  fs.writeFileSync(out, css);
+}