working on preprocessor

primer · Dec 5, 2024 · e5d5522 · e5d5522
1 parent 6ca55d3
commit e5d5522
Show file tree

Hide file tree

Showing 23 changed files with 331 additions and 36 deletions.
diff --git a/.changeset/great-insects-act.md b/.changeset/great-insects-act.md
@@ -0,0 +1,5 @@
+---
+'@primer/primitives': minor
+---
+
+Adding new themeOverride preprocessor
diff --git a/contributor-docs/adrs/adr-004-token-overrides.md b/contributor-docs/adrs/adr-004-token-overrides.md
@@ -2,10 +2,10 @@
 
 ## Status
 
-| Stage    | Status      |
-| -------- | ----------- |
-| Approved | ✅ |
-| Adopted  | 🚧 |
+| Stage    | Status |
+| -------- | ------ |
+| Approved | ✅     |
+| Adopted  | 🚧     |
 
 ## Context
 

diff --git a/scripts/buildFigma.ts b/scripts/buildFigma.ts
@@ -12,10 +12,12 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
   const baseScales = [
     {
       name: 'light',
+      theme: 'light',
       source: [`src/tokens/base/color/light/light.json5`, `src/tokens/base/color/light/display-light.json5`],
     },
     {
       name: 'light-high-constrast',
+      theme: 'light-high-constrast',
       source: [
         `src/tokens/base/color/light/light.json5`,
         `src/tokens/base/color/light/display-light.json5`,
@@ -24,9 +26,11 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
     },
     {
       name: 'dark',
+      theme: 'dark',
       source: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/dark/display-dark.json5`],
     },
     {
+      theme: 'dark-high-constrast',
       name: 'dark-high-constrast',
       source: [
         `src/tokens/base/color/dark/dark.json5`,
@@ -35,6 +39,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
       ],
     },
     {
+      theme: 'dark-dimmed',
       name: 'dark-dimmed',
       source: [
         `src/tokens/base/color/dark/dark.json5`,
@@ -62,7 +67,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
       include,
       platforms: {
         figma: figma(`figma/themes/${filename}.json`, buildOptions.prefix, buildOptions.buildPath, {
-          mode: filename.replaceAll('-', ' '),
+          theme: filename.replaceAll('-', ' '),
         }),
       },
     })
@@ -118,7 +123,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
         `src/tokens/functional/color/light/primitives-light.json5`,
         `src/tokens/functional/color/light/patterns-light.json5`,
       ],
-      mode: 'light',
+      theme: 'light',
     },
     {
       name: 'light-high-contrast',
@@ -130,7 +135,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
         `src/tokens/functional/color/light/primitives-light.json5`,
         `src/tokens/functional/color/light/patterns-light.json5`,
       ],
-      mode: 'light high contrast',
+      theme: 'light high contrast',
     },
     {
       name: 'light-colorblind',
@@ -142,7 +147,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
         `src/tokens/functional/color/light/primitives-light.json5`,
         `src/tokens/functional/color/light/patterns-light.json5`,
       ],
-      mode: 'light colorblind',
+      theme: 'light colorblind',
     },
     {
       name: 'light-tritanopia',
@@ -154,7 +159,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
         `src/tokens/functional/color/light/primitives-light.json5`,
         `src/tokens/functional/color/light/patterns-light.json5`,
       ],
-      mode: 'light tritanopia',
+      theme: 'light tritanopia',
     },
     {
       name: 'dark',
@@ -165,7 +170,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
         `src/tokens/functional/color/dark/primitives-dark.json5`,
         `src/tokens/functional/color/dark/patterns-dark.json5`,
       ],
-      mode: 'dark',
+      theme: 'dark',
     },
     {
       name: 'dark-high-contrast',
@@ -177,7 +182,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
         `src/tokens/functional/color/dark/primitives-dark.json5`,
         `src/tokens/functional/color/dark/patterns-dark.json5`,
       ],
-      mode: 'dark high contrast',
+      theme: 'dark high contrast',
     },
     {
       name: 'dark-dimmed',
@@ -189,7 +194,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
         `src/tokens/functional/color/dark/primitives-dark.json5`,
         `src/tokens/functional/color/dark/patterns-dark.json5`,
       ],
-      mode: 'dark dimmed',
+      theme: 'dark dimmed',
     },
     {
       name: 'dark-colorblind',
@@ -201,7 +206,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
         `src/tokens/functional/color/dark/primitives-dark.json5`,
         `src/tokens/functional/color/dark/patterns-dark.json5`,
       ],
-      mode: 'dark colorblind',
+      theme: 'dark colorblind',
     },
     {
       name: 'dark-tritanopia',
@@ -213,16 +218,16 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
         `src/tokens/functional/color/dark/primitives-dark.json5`,
         `src/tokens/functional/color/dark/patterns-dark.json5`,
       ],
-      mode: 'dark tritanopia',
+      theme: 'dark tritanopia',
     },
   ]
   //
-  for (const {name, source, include, mode} of shadowFiles) {
+  for (const {name, source, include, theme} of shadowFiles) {
     const extended = await PrimerStyleDictionary.extend({
       source,
       include,
       platforms: {
-        figma: figma(`figma/shadows/${name}.json`, buildOptions.prefix, buildOptions.buildPath, {mode}),
+        figma: figma(`figma/shadows/${name}.json`, buildOptions.prefix, buildOptions.buildPath, {theme}),
       },
     })
 
@@ -247,6 +252,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
     group: string
     name: string
   }> = files.flatMap(filePath => JSON.parse(fs.readFileSync(filePath, 'utf8')))
+
   // create a list of groups with collections and modes
   const collections: Record<
     string,
@@ -257,6 +263,9 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
   > = {}
 
   for (const {collection, mode, group} of tokens) {
+    if (!collection) {
+      continue
+    }
     if (!(collection in collections)) {
       collections[collection] = {
         modes: [],
@@ -271,7 +280,6 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
       collections[collection].groups.push(group)
     }
   }
-
   // define the order of the modes
   // we inverse it to deal with the -1 of the indexOf if item is not found in the array: basically anything that is not in the list should come last
   const modeOrder = [

diff --git a/scripts/buildTokens.ts b/scripts/buildTokens.ts
@@ -37,9 +37,16 @@ const getStyleDictionaryConfig: StyleDictionaryConfigGenerator = (
   },
   platforms: Object.fromEntries(
     Object.entries({
-      css: css(`css/${filename}.css`, options.prefix, options.buildPath, {themed: options.themed}),
-      docJson: docJson(`docs/${filename}.json`, options.prefix, options.buildPath),
-      styleLint: styleLint(`styleLint/${filename}.json`, options.prefix, options.buildPath),
+      css: css(`css/${filename}.css`, options.prefix, options.buildPath, {
+        themed: options.themed,
+        theme: options.theme,
+      }),
+      docJson: docJson(`docs/${filename}.json`, options.prefix, options.buildPath, {
+        theme: options.theme,
+      }),
+      styleLint: styleLint(`styleLint/${filename}.json`, options.prefix, options.buildPath, {
+        theme: options.theme,
+      }),
       fallbacks: fallbacks(`fallbacks/${filename}.json`, options.prefix, options.buildPath),
       ...platforms,
     }).filter((entry: [string, unknown]) => entry[1] !== undefined),
@@ -71,14 +78,14 @@ export const buildDesignTokens = async (buildOptions: ConfigGeneratorOptions): P
    * Colors, shadows & borders
    * ----------------------------------- */
   try {
-    for (const {filename, source, include} of themes) {
+    for (const {filename, source, include, theme} of themes) {
       // build functional scales
       const extendedSD = await PrimerStyleDictionary.extend(
         getStyleDictionaryConfig(
           `functional/themes/${filename}`,
           source,
           include,
-          {...buildOptions, themed: true},
+          {...buildOptions, themed: true, theme},
           // disable fallbacks for themes
           {fallbacks: undefined},
         ),

diff --git a/scripts/themes.config.ts b/scripts/themes.config.ts
@@ -3,40 +3,48 @@ import type {TokenBuildInput} from '../src/types/tokenBuildInput.js'
 export const themes: TokenBuildInput[] = [
   {
     filename: 'light',
+    theme: 'light',
     source: [
       `src/tokens/functional/color/light/*.json5`,
       `src/tokens/functional/shadow/light.json5`,
       `src/tokens/functional/border/light.json5`,
+      `src/tokens/functional/color/components/*.json5`,
     ],
     include: [`src/tokens/base/color/light/light.json5`, `src/tokens/base/color/light/display-light.json5`],
   },
   {
     filename: 'light-tritanopia',
+    theme: 'light-tritanopia',
     source: [
       `src/tokens/functional/color/light/*.json5`,
       `src/tokens/functional/shadow/light.json5`,
       `src/tokens/functional/border/light.json5`,
+      `src/tokens/functional/color/components/*.json5`,
       `src/tokens/functional/color/light/overrides/light.tritanopia.json5`,
     ],
     include: [`src/tokens/base/color/light/light.json5`, `src/tokens/base/color/light/display-light.json5`],
   },
   {
     filename: 'light-colorblind',
+    theme: 'light-protanopia-deuteranopia',
     source: [
       `src/tokens/functional/color/light/*.json5`,
       `src/tokens/functional/shadow/light.json5`,
       `src/tokens/functional/border/light.json5`,
+      `src/tokens/functional/color/components/*.json5`,
       `src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5`,
     ],
     include: [`src/tokens/base/color/light/light.json5`, `src/tokens/base/color/light/display-light.json5`],
   },
   {
     filename: 'light-high-contrast',
+    theme: 'light-high-contrast',
     source: [
       `src/tokens/functional/color/light/*.json5`,
-      `src/tokens/functional/color/light/overrides/light.high-contrast.json5`,
       `src/tokens/functional/shadow/light.json5`,
       `src/tokens/functional/border/light.json5`,
+      `src/tokens/functional/color/components/*.json5`,
+      `src/tokens/functional/color/light/overrides/light.high-contrast.json5`,
     ],
     include: [
       `src/tokens/base/color/light/light.json5`,
@@ -46,54 +54,65 @@ export const themes: TokenBuildInput[] = [
   },
   {
     filename: 'dark',
+    theme: 'dark',
     source: [
       `src/tokens/functional/color/dark/*.json5`,
       `src/tokens/functional/shadow/dark.json5`,
       `src/tokens/functional/border/dark.json5`,
+      `src/tokens/functional/color/components/*.json5`,
     ],
     include: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/dark/display-dark.json5`],
   },
   {
     filename: 'dark-dimmed',
+    theme: 'dark-dimmed',
     source: [
       `src/tokens/functional/color/dark/*.json5`,
       `src/tokens/functional/color/dark/overrides/dark.dimmed.json5`,
       `src/tokens/functional/shadow/dark.json5`,
       `src/tokens/functional/border/dark.json5`,
+      `src/tokens/functional/color/components/*.json5`,
     ],
     include: [
       `src/tokens/base/color/dark/dark.json5`,
       `src/tokens/base/color/dark/dark.dimmed.json5`,
       `src/tokens/base/color/dark/display-dark.json5`,
+      `src/tokens/functional/color/components/*.json5`,
     ],
   },
   {
     filename: 'dark-tritanopia',
+    theme: 'dark-tritanopia',
     source: [
       `src/tokens/functional/color/dark/*.json5`,
       `src/tokens/functional/shadow/dark.json5`,
       `src/tokens/functional/border/dark.json5`,
+      `src/tokens/functional/color/components/*.json5`,
       `src/tokens/functional/color/dark/overrides/dark.tritanopia.json5`,
     ],
     include: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/dark/display-dark.json5`],
   },
   {
     filename: 'dark-colorblind',
+    theme: 'dark-protanopia-deuteranopia',
     source: [
       `src/tokens/functional/color/dark/*.json5`,
       `src/tokens/functional/shadow/dark.json5`,
       `src/tokens/functional/border/dark.json5`,
+      `src/tokens/functional/color/components/*.json5`,
       `src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5`,
     ],
     include: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/dark/display-dark.json5`],
   },
   {
     filename: 'dark-high-contrast',
+    theme: 'dark-high-contrast',
     source: [
       `src/tokens/functional/color/dark/*.json5`,
-      `src/tokens/functional/color/dark/overrides/dark.high-contrast.json5`,
       `src/tokens/functional/shadow/dark.json5`,
       `src/tokens/functional/border/dark.json5`,
+      `src/tokens/functional/color/components/*.json5`,
+      `src/tokens/functional/color/dark/overrides/dark.high-contrast.json5`,
     ],
     include: [
       `src/tokens/base/color/dark/dark.json5`,

diff --git a/src/filters/isColor.ts b/src/filters/isColor.ts
@@ -7,8 +7,5 @@ import type {TransformedToken} from 'style-dictionary/types'
  */
 export const isColor = (token: TransformedToken): boolean => {
   const typeValue = token.$type ?? token.type
-  // if (token.path.join('-') === 'control-transparent-bgColor-selected') {
-  //   console.log(typeValue === 'color', token)
-  // }
   return typeValue === 'color'
 }
diff --git a/src/platforms/css.ts b/src/platforms/css.ts
@@ -24,6 +24,7 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
   return {
     prefix,
     buildPath,
+    preprocessors: ['themeOverrides'],
     transforms: [
       'name/pathToKebabCase',
       'color/hex',
@@ -39,6 +40,9 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
     ],
     options: {
       basePxFontSize: 16,
+      themeOverrides: {
+        theme: options?.theme,
+      },
     },
     files: [
       {

diff --git a/src/platforms/docJson.ts b/src/platforms/docJson.ts
@@ -2,9 +2,10 @@ import type {PlatformInitializer} from '../types/platformInitializer.js'
 import {isSource} from '../filters/index.js'
 import type {PlatformConfig} from 'style-dictionary/types'
 
-export const docJson: PlatformInitializer = (outputFile, prefix, buildPath): PlatformConfig => ({
+export const docJson: PlatformInitializer = (outputFile, prefix, buildPath, options): PlatformConfig => ({
   prefix,
   buildPath,
+  preprocessors: ['themeOverrides'],
   transforms: [
     'name/pathToKebabCase',
     'color/hex',
@@ -23,6 +24,9 @@ export const docJson: PlatformInitializer = (outputFile, prefix, buildPath): Pla
       $type: 'type',
       $description: 'description',
     },
+    themeOverrides: {
+      theme: options?.theme,
+    },
   },
   files: [
     {