working on preprocessor

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

Hide file tree

Showing 21 changed files with 366 additions and 18 deletions.
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/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/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: [
     {

diff --git a/src/platforms/figma.ts b/src/platforms/figma.ts
@@ -23,6 +23,7 @@ const validFigmaToken = async (token: TransformedToken, options: Config) => {
 export const figma: PlatformInitializer = (outputFile, prefix, buildPath, options): PlatformConfig => ({
   prefix,
   buildPath,
+  preprocessors: ['themeOverrides'],
   transforms: [
     'color/rgbaFloat',
     'fontFamily/figma',
@@ -42,7 +43,11 @@ export const figma: PlatformInitializer = (outputFile, prefix, buildPath, option
       'fontStack/sansSerifDisplay': 'SF Pro Display',
       'fontStack/monospace': 'SF Mono',
     },
+    // should this object be spread here?
     ...options,
+    themeOverrides: {
+      theme: options?.theme,
+    },
   },
   files: [
     {

diff --git a/src/platforms/javascript.ts b/src/platforms/javascript.ts
@@ -2,9 +2,10 @@ import type {PlatformInitializer} from '../types/platformInitializer.js'
 import type {PlatformConfig} from 'style-dictionary/types'
 import {isSource} from '../filters/index.js'
 
-export const javascript: PlatformInitializer = (outputFile, prefix, buildPath): PlatformConfig => ({
+export const javascript: PlatformInitializer = (outputFile, prefix, buildPath, options): PlatformConfig => ({
   prefix,
   buildPath,
+  preprocessors: ['themeOverrides'],
   transforms: [
     'color/hex',
     'color/hexMix',
@@ -18,6 +19,9 @@ export const javascript: PlatformInitializer = (outputFile, prefix, buildPath):
   options: {
     showFileHeader: false,
     basePxFontSize: 16,
+    themeOverrides: {
+      theme: options?.theme,
+    },
   },
   files: [
     {

diff --git a/src/platforms/json.ts b/src/platforms/json.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 json: PlatformInitializer = (outputFile, prefix, buildPath): PlatformConfig => ({
+export const json: PlatformInitializer = (outputFile, prefix, buildPath, options): PlatformConfig => ({
   prefix,
   buildPath,
+  preprocessors: ['themeOverrides'],
   transforms: [
     'color/hex',
     'color/hexMix',
@@ -17,6 +18,9 @@ export const json: PlatformInitializer = (outputFile, prefix, buildPath): Platfo
   ],
   options: {
     basePxFontSize: 16,
+    themeOverrides: {
+      theme: options?.theme,
+    },
   },
   files: [
     {

diff --git a/src/platforms/styleLint.ts b/src/platforms/styleLint.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 styleLint: PlatformInitializer = (outputFile, prefix, buildPath): PlatformConfig => ({
+export const styleLint: PlatformInitializer = (outputFile, prefix, buildPath, options): PlatformConfig => ({
   prefix,
   buildPath,
+  preprocessors: ['themeOverrides'],
   transforms: [
     'name/pathToKebabCase',
     'color/hex',
@@ -18,6 +19,9 @@ export const styleLint: PlatformInitializer = (outputFile, prefix, buildPath): P
   ],
   options: {
     basePxFontSize: 16,
+    themeOverrides: {
+      theme: options?.theme,
+    },
   },
   files: [
     {

diff --git a/src/platforms/typeDefinitions.ts b/src/platforms/typeDefinitions.ts
@@ -3,9 +3,10 @@ import {isSource} from '../filters/index.js'
 import {upperCaseFirstCharacter} from '../utilities/index.js'
 import type {PlatformConfig} from 'style-dictionary/types'
 
-export const typeDefinitions: PlatformInitializer = (outputFile, prefix, buildPath): PlatformConfig => ({
+export const typeDefinitions: PlatformInitializer = (outputFile, prefix, buildPath, options): PlatformConfig => ({
   prefix,
   buildPath,
+  preprocessors: ['themeOverrides'],
   transforms: [
     'color/hex',
     'shadow/css',
@@ -23,6 +24,9 @@ export const typeDefinitions: PlatformInitializer = (outputFile, prefix, buildPa
       options: {
         tokenTypesPath: './src/types/',
         moduleName: `${upperCaseFirstCharacter(outputFile)}DesignTokens`,
+        themeOverrides: {
+          theme: options?.theme,
+        },
       },
     },
   ],

diff --git a/src/platforms/typescript.ts b/src/platforms/typescript.ts
@@ -2,9 +2,10 @@ import type {PlatformInitializer} from '../types/platformInitializer.js'
 import type {PlatformConfig} from 'style-dictionary/types'
 import {isSource} from '../filters/index.js'
 
-export const typescript: PlatformInitializer = (outputFile, prefix, buildPath): PlatformConfig => ({
+export const typescript: PlatformInitializer = (outputFile, prefix, buildPath, options): PlatformConfig => ({
   prefix,
   buildPath,
+  preprocessors: ['themeOverrides'],
   transforms: [
     'color/hex',
     'color/hexMix',
@@ -18,6 +19,9 @@ export const typescript: PlatformInitializer = (outputFile, prefix, buildPath):
   options: {
     showFileHeader: false,
     basePxFontSize: 16,
+    themeOverrides: {
+      theme: options?.theme,
+    },
   },
   files: [
     {