chore(react-theme): Generate theme tokens using token pipeline

apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Input.stories.mdx

@@ -145,7 +145,7 @@ This table maps v8 `TextField` props to the v9 `Input` equivalent.
 | `onChange`                 | `onChange`                                 | Typescript types have changed                                                        |
 | `onNotifyValidationResult` | n/a                                        | v9 `Input` does not handle validation                                                |
 | `onGetErrorMessage`        | n/a                                        | v9 `Input` does not handle error states                                              |
-| `deferredValidationTime`   | n/a                                        | v9 `Input` does not handle validation                                                  |
+| `deferredValidationTime`   | n/a                                        | v9 `Input` does not handle validation                                                |
 | `className`                | `className`                                |                                                                                      |
 | `inputClassName`           | Use `input` slot                           |                                                                                      |
 | `ariaLabel`                | `aria-label`                               |                                                                                      |

change/@fluentui-react-theme-d0c1d611-9a7f-4ebe-a610-7a585d38212f.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Generate theme tokens using token pipeline",
+  "packageName": "@fluentui/react-theme",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/react-components/react-theme/package.json

@@ -23,6 +23,7 @@
     "test": "jest --passWithNoTests",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
     "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-theme/src && yarn docs",
+    "token-pipeline": "node -r ../../../scripts/ts-node-register ../../../scripts/token-pipeline.ts",
     "type-check": "tsc -b tsconfig.json"
   },
   "devDependencies": {

scripts/token-pipeline.ts

@@ -0,0 +1,58 @@
+import path from 'path';
+import * as fs from 'fs-extra';
+import * as _ from 'lodash';
+
+import { findGitRoot } from './monorepo';
+import execSync from './exec-sync';
+import { createTempDir } from './projects-test';
+
+const themes = ['light', 'dark', 'teamsDark', 'highContrast'] as const;
+const repoRoot = findGitRoot();
+
+function getGeneratedFiles(tmpDir: string) {
+  return [
+    {
+      src: path.join(tmpDir, 'light/react/global-colors.ts'), // the same global colors are generated for all theme, just use light
+      dest: path.join(repoRoot, 'packages/react-components/react-theme/src/global/colors.ts'),
+    },
+    ...themes.map(theme => ({
+      src: path.join(tmpDir, `${theme}/react/alias-colors.ts`),
+      dest: path.join(repoRoot, `packages/react-components/react-theme/src/alias/${theme}Color.ts`),
+    })),
+  ];
+}
+
+function runPipeline(theme: typeof themes[number], pipelineDir: string, outDir: string) {
+  console.log(`Running pipeline for ${theme} theme`);
+
+  // https://github.com/microsoft/fluentui-token-pipeline
+  execSync(
+    `npx transform-tokens --in src/global.json --in src/${_.kebabCase(theme)}.json --out ${outDir}/${theme}`,
+    `Generate tokens for theme:${theme}`,
+    pipelineDir,
+  );
+}
+
+export const tokenPipeline = () => {
+  const tmpDir = createTempDir('theme');
+
+  execSync(
+    'git clone --depth 1 https://github.com/microsoft/fluentui-design-tokens.git',
+    'Clone design tokens repo',
+    tmpDir,
+  );
+  execSync('npm install', 'Install dependencies', path.join(tmpDir, 'fluentui-design-tokens'));
+
+  themes.forEach(theme => {
+    runPipeline(theme, path.join(tmpDir, 'fluentui-design-tokens'), tmpDir);
+  });
+
+  getGeneratedFiles(tmpDir).forEach(file => {
+    console.log(`Copying generated file ${file.src} -> ${file.dest}`);
+    fs.copySync(file.src, file.dest, { overwrite: true });
+  });
+
+  execSync(`npx prettier --write ${path.join(repoRoot, 'packages/react-components/react-theme/src')}`, 'Prettier');
+};
+
+tokenPipeline();