working pre-processor

scripts/themes.config.ts

@@ -3,6 +3,7 @@ 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`,
@@ -13,6 +14,7 @@ export const themes: TokenBuildInput[] = [
   },
   {
     filename: 'light-tritanopia',
+    theme: 'light-tritanopia',
     source: [
       `src/tokens/functional/color/light/*.json5`,
       `src/tokens/functional/shadow/light.json5`,

src/PrimerStyleDictionary.ts

@@ -37,7 +37,7 @@ import {
   cssAdvanced,
   jsonFigma,
 } from './formats/index.js'
-import {getModeValue} from './preprocessor/getModeValue.js'
+import {getThemeValue} from './preprocessor/getThemeValue.js'
 
 /**
  * @name {@link PrimerStyleDictionary}
@@ -152,4 +152,4 @@ PrimerStyleDictionary.registerTransform(fontFamilyToCss)
 
 PrimerStyleDictionary.registerTransform(fontFamilyToFigma)
 
-PrimerStyleDictionary.registerPreprocessor(getModeValue)
+PrimerStyleDictionary.registerPreprocessor(getThemeValue)

src/platforms/css.ts

@@ -24,7 +24,7 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
   return {
     prefix,
     buildPath,
-    preprocessors: ['getModeValue'],
+    preprocessors: ['getThemeValue'],
     transforms: [
       'name/pathToKebabCase',
       'color/hex',
@@ -40,6 +40,7 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
     ],
     options: {
       basePxFontSize: 16,
+      theme: options?.theme,
     },
     files: [
       {

src/preprocessor/getThemeValue.ts

@@ -0,0 +1,19 @@
+import type {Dictionary, PlatformConfig, PreprocessedTokens} from 'style-dictionary/types'
+import {transformTokens} from './utilities/transformTokens.js'
+
+export const getThemeValue = {
+  name: 'getThemeValue',
+  preprocessor: (dictionary: Dictionary, config: PlatformConfig): PreprocessedTokens => {
+    const tokens = transformTokens(dictionary, token => {
+      // return early if no theme value is set
+      if (!config.options?.theme || !token.$extensions?.['org.primer.theme']?.[config.options.theme]) return token
+      // token an theme value exist
+      const valueProp = 'value' in token ? 'value' : '$value'
+      return {
+        ...token,
+        [valueProp]: token.$extensions['org.primer.theme'][config.options.theme],
+      }
+    })
+    return tokens
+  },
+}

src/preprocessor/utilities/transformTokens.ts

@@ -0,0 +1,25 @@
+import type {DesignToken} from 'style-dictionary/types'
+/**
+ * jsonToNestedValue
+ * @description creates a nested json tree where every final value is the `.value` prop
+ * @param token StyleDictionary.DesignToken
+ * @returns nested json three
+ */
+export const transformTokens = (
+  token: DesignToken | Record<string, unknown>,
+  transform: (token: DesignToken) => DesignToken,
+) => {
+  // is non-object value
+  if (typeof token !== 'object') return token
+  // is design token
+  if ('$value' in token || 'value' in token) {
+    return transform(token as DesignToken)
+  }
+  // is obj
+  const nextObj = {}
+  for (const [prop, value] of Object.entries(token)) {
+    // @ts-expect-error: can't predict type
+    nextObj[prop] = transformTokens(value, transform)
+  }
+  return nextObj
+}

src/tokens/functional/color/light/app-light.json5

@@ -10,6 +10,10 @@
           group: 'component',
           scopes: ['borderColor'],
         },
+        'org.primer.theme': {
+          light: '{base.color.red.5}',
+          'light-tritanopia': '{base.color.pink.5}',
+        },
       },
     },
   },

src/types/StyleDictionaryConfigGenerator.d.ts

@@ -4,6 +4,7 @@ export type ConfigGeneratorOptions = {
   buildPath: string
   prefix?: string
   themed?: boolean
+  theme?: string
 }
 
 export type StyleDictionaryConfigGenerator = (

src/types/TokenBuildInput.d.ts

@@ -3,6 +3,8 @@ export type TokenBuildInput = {
   filename: string
   // Array of `filepaths` to token files that should be converted and included in the output. Accepts relative or glob paths.
   source: string[]
+  // The mode of the theme
+  theme?: string
   // Array of `filepaths` to token fils that should NOT be included in the output, but should be available to reference during compilation e.g. base color scales
   include: string[]
 }