Add precompile step for colorSchemes (#4337)

* Add precompile step for colorSchemes

* ignore generated file in prettier

* Create tasty-spoons-suffer.md

Author: manuelpuyol

.changeset/tasty-spoons-suffer.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add precompile step for colorSchemes

.prettierignore

@@ -7,3 +7,4 @@ storybook-static
 docs/.cache
 docs/public
 **/.next/**
+packages/react/src/legacy-theme/ts/color-schemes.ts

packages/react/package.json

@@ -49,6 +49,7 @@
     "build:docs:preview": "NODE_OPTIONS=--openssl-legacy-provider script/build-docs preview",
     "build:storybook:visual-testing": "storybook build",
     "build:components.json": "tsx script/components-json/build.ts",
+    "build:precompile-color-schemes": "tsx script/precompile-color-schemes.ts",
     "storybook": "storybook",
     "type-check": "tsc --noEmit"
   },

packages/react/script/build

@@ -5,6 +5,9 @@ set -e
 # Clean up
 npm run clean
 
+# Generate color schemes
+npm run build:precompile-color-schemes
+
 # Bundle
 npx rollup -c --bundleConfigAsCjs
 

packages/react/script/precompile-color-schemes.ts

@@ -0,0 +1,28 @@
+import fs from 'fs'
+import path from 'path'
+import {colors} from '../src/legacy-theme/ts/colors'
+import {partitionColors, omitScale} from '../src/utils/theme'
+
+const colorSchemes = Object.entries(colors).reduce((acc, [name, variables]) => {
+  const {colors, shadows} = partitionColors(variables)
+  return {
+    ...acc,
+    [name]: {
+      colors: omitScale(colors),
+      shadows: omitScale(shadows),
+    },
+  }
+}, {})
+
+const colorSchemeFileContent = `// This file is auto-generated by precompile-color-schemes.ts
+// run \`npm run build:precompile-color-schemes\` to regenerate
+
+type Scheme = keyof typeof colors
+type SchemeValue = Record<'colors' | 'shadows', Partial<typeof colors.light>>
+
+const colors = ${JSON.stringify(colorSchemes, null, 2)}
+
+export const colorSchemes: Record<Scheme, SchemeValue> = colors as Record<Scheme, SchemeValue>
+`
+
+fs.writeFileSync(path.join(__dirname, '../src/legacy-theme/ts/color-schemes.ts'), colorSchemeFileContent)

packages/react/src/legacy-theme/ts/color-schemes.ts

@@ -1,6 +1,6 @@
 import type {KeyPaths} from './utils/types/KeyPaths'
-import {colors} from './legacy-theme/ts/colors'
-import {partitionColors, fontStack, omitScale} from './utils/theme'
+import {fontStack} from './utils/theme'
+import {colorSchemes} from './legacy-theme/ts/color-schemes'
 
 const animation = {
   easeOutCubic: 'cubic-bezier(0.33, 1, 0.68, 1)',
@@ -58,23 +58,6 @@ const fontSizes = ['12px', '14px', '16px', '20px', '24px', '32px', '40px', '48px
 
 const space = ['0', '4px', '8px', '16px', '24px', '32px', '40px', '48px', '64px', '80px', '96px', '112px', '128px']
 
-type Scheme = keyof typeof colors
-type SchemeValue = Record<'colors' | 'shadows', Partial<typeof colors.light>>
-
-const colorSchemes: Record<Scheme, SchemeValue> = Object.entries(colors).reduce(
-  (acc, [name, variables]) => {
-    const {colors, shadows} = partitionColors(variables)
-    return {
-      ...acc,
-      [name]: {
-        colors: omitScale(colors),
-        shadows: omitScale(shadows),
-      },
-    }
-  },
-  {} as Record<Scheme, SchemeValue>,
-)
-
 const theme = {
   animation,
   borderWidths,