add schema validation and improvement for figma attribute

primer · Nov 25, 2024 · 6c46b74 · 6c46b74
1 parent 9326e3b
commit 6c46b74
Show file tree

Hide file tree

Showing 15 changed files with 68 additions and 59 deletions.
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),

diff --git a/scripts/themes.config.ts b/scripts/themes.config.ts
@@ -8,7 +8,7 @@ export const themes: TokenBuildInput[] = [
       `src/tokens/functional/color/light/*.json5`,
       `src/tokens/functional/shadow/light.json5`,
       `src/tokens/functional/border/light.json5`,
-      `src/tokens/functional/color/testComponent.json5`,
+      `src/tokens/functional/color/components/*.json5`,
     ],
     include: [`src/tokens/base/color/light/light.json5`, `src/tokens/base/color/light/display-light.json5`],
   },
@@ -19,12 +19,14 @@ export const themes: TokenBuildInput[] = [
       `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`,
@@ -35,6 +37,7 @@ export const themes: TokenBuildInput[] = [
   },
   {
     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`,
@@ -49,6 +52,7 @@ export const themes: TokenBuildInput[] = [
   },
   {
     filename: 'dark',
+    theme: 'dark',
     source: [
       `src/tokens/functional/color/dark/*.json5`,
       `src/tokens/functional/shadow/dark.json5`,
@@ -59,6 +63,7 @@ export const themes: TokenBuildInput[] = [
   },
   {
     filename: 'dark-dimmed',
+    theme: 'dark-dimmed',
     source: [
       `src/tokens/functional/color/dark/*.json5`,
       `src/tokens/functional/color/dark/overrides/dark.dimmed.json5`,
@@ -73,6 +78,7 @@ export const themes: TokenBuildInput[] = [
   },
   {
     filename: 'dark-tritanopia',
+    theme: 'dark-tritanopia',
     source: [
       `src/tokens/functional/color/dark/*.json5`,
       `src/tokens/functional/shadow/dark.json5`,
@@ -83,6 +89,7 @@ export const themes: TokenBuildInput[] = [
   },
   {
     filename: 'dark-colorblind',
+    theme: 'dark-protanopia-deuteranopia',
     source: [
       `src/tokens/functional/color/dark/*.json5`,
       `src/tokens/functional/shadow/dark.json5`,
@@ -93,6 +100,7 @@ export const themes: TokenBuildInput[] = [
   },
   {
     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`,

diff --git a/src/platforms/docJson.ts b/src/platforms/docJson.ts
@@ -5,6 +5,7 @@ import type {PlatformConfig} from 'style-dictionary/types'
 export const docJson: PlatformInitializer = (outputFile, prefix, buildPath): PlatformConfig => ({
   prefix,
   buildPath,
+  preprocessors: ['getThemeValue'],
   transforms: [
     'name/pathToKebabCase',
     'color/hex',

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: ['getThemeValue'],
   transforms: [
     'color/rgbaFloat',
     'fontFamily/figma',

diff --git a/src/platforms/javascript.ts b/src/platforms/javascript.ts
@@ -5,6 +5,7 @@ import {isSource} from '../filters/index.js'
 export const javascript: PlatformInitializer = (outputFile, prefix, buildPath): PlatformConfig => ({
   prefix,
   buildPath,
+  preprocessors: ['getThemeValue'],
   transforms: [
     'color/hex',
     'color/hexMix',

diff --git a/src/platforms/json.ts b/src/platforms/json.ts
@@ -5,6 +5,7 @@ import type {PlatformConfig} from 'style-dictionary/types'
 export const json: PlatformInitializer = (outputFile, prefix, buildPath): PlatformConfig => ({
   prefix,
   buildPath,
+  preprocessors: ['getThemeValue'],
   transforms: [
     'color/hex',
     'color/hexMix',

diff --git a/src/platforms/styleLint.ts b/src/platforms/styleLint.ts
@@ -5,6 +5,7 @@ import type {PlatformConfig} from 'style-dictionary/types'
 export const styleLint: PlatformInitializer = (outputFile, prefix, buildPath): PlatformConfig => ({
   prefix,
   buildPath,
+  preprocessors: ['getThemeValue'],
   transforms: [
     'name/pathToKebabCase',
     'color/hex',

diff --git a/src/platforms/typeDefinitions.ts b/src/platforms/typeDefinitions.ts
@@ -6,6 +6,7 @@ import type {PlatformConfig} from 'style-dictionary/types'
 export const typeDefinitions: PlatformInitializer = (outputFile, prefix, buildPath): PlatformConfig => ({
   prefix,
   buildPath,
+  preprocessors: ['getThemeValue'],
   transforms: [
     'color/hex',
     'shadow/css',

diff --git a/src/platforms/typescript.ts b/src/platforms/typescript.ts
@@ -5,6 +5,7 @@ import {isSource} from '../filters/index.js'
 export const typescript: PlatformInitializer = (outputFile, prefix, buildPath): PlatformConfig => ({
   prefix,
   buildPath,
+  preprocessors: ['getThemeValue'],
   transforms: [
     'color/hex',
     'color/hexMix',

diff --git a/src/schemas/colorToken.ts b/src/schemas/colorToken.ts
@@ -47,6 +47,32 @@ export const colorToken = baseToken
             scopes: scopes(['all', 'bgColor', 'fgColor', 'borderColor', 'effectColor']).optional(),
           })
           .optional(),
+        'org.primer.theme': z
+          .object(
+            {
+              light: z.union([colorHexValue, referenceValue]).optional(),
+              'light-tritanopia': z.union([colorHexValue, referenceValue]).optional(),
+              'light-deutranopia-protanopia': z.union([colorHexValue, referenceValue]).optional(),
+              'light-high-contrast': z.union([colorHexValue, referenceValue]).optional(),
+              dark: z.union([colorHexValue, referenceValue]).optional(),
+              'dark-tritanopia': z.union([colorHexValue, referenceValue]).optional(),
+              'dark-deutranopia-protanopia': z.union([colorHexValue, referenceValue]).optional(),
+              'dark-high-contrast': z.union([colorHexValue, referenceValue]).optional(),
+              'dark-dimmed': z.union([colorHexValue, referenceValue]).optional(),
+            },
+            {
+              errorMap: e => {
+                if (e.code === 'unrecognized_keys') {
+                  return {
+                    message: `Unrecognized key: "${e.keys.join(', ')}", must be one of: light, light-tritanopia, light-deutranopia-protanopia, light-high-contrast, dark, dark-tritanopia, dark-deutranopia-protanopia, dark-high-contrast, dark-dimmed`,
+                  }
+                }
+                return {message: `Error: ${e.code}`}
+              },
+            },
+          )
+          .strict()
+          .optional(),
       })
       .optional(),
   })

diff --git a/src/tokens/functional/color/components/topicTag.json5 b/src/tokens/functional/color/components/topicTag.json5
@@ -0,0 +1,15 @@
+{
+  topicTag: {
+    borderColor: {
+      $value: '{base.color.transparent}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'component',
+          scopes: ['borderColor'],
+        },
+      },
+    },
+  },
+}
diff --git a/src/tokens/functional/color/dark/app-dark.json5 b/src/tokens/functional/color/dark/app-dark.json5
@@ -1,18 +1,4 @@
 {
-  topicTag: {
-    borderColor: {
-      $value: '{base.color.transparent}',
-      $type: 'color',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'mode',
-          mode: 'dark',
-          group: 'component',
-          scopes: ['borderColor'],
-        },
-      },
-    },
-  },
   highlight: {
     neutral: {
       bgColor: {

diff --git a/src/tokens/functional/color/light/app-light.json5 b/src/tokens/functional/color/light/app-light.json5
@@ -1,22 +1,4 @@
 {
-  topicTag: {
-    borderColor: {
-      $value: '{base.color.transparent}',
-      $type: 'color',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'mode',
-          mode: 'light',
-          group: 'component',
-          scopes: ['borderColor'],
-        },
-        'org.primer.theme': {
-          light: '{base.color.red.5}',
-          'light-tritanopia': '{base.color.pink.5}',
-        },
-      },
-    },
-  },
   highlight: {
     neutral: {
       bgColor: {

diff --git a/src/tokens/functional/color/testComponent.json5 b/src/tokens/functional/color/testComponent.json5
diff --git a/src/transformers/figmaAttributes.ts b/src/transformers/figmaAttributes.ts
@@ -70,7 +70,7 @@ export const figmaAttributes: Transform = {
   transform: (token: TransformedToken, platform: PlatformConfig = {}) => {
     const {mode, collection, scopes, group, codeSyntax} = token.$extensions?.['org.primer.figma'] || {}
     return {
-      mode: platform.options?.mode || mode || 'default',
+      mode: platform.options?.theme || mode || 'default',
       collection,
       group: group || collection,
       scopes: getScopes(scopes),