Adding all color modes to figma export (#805)

* adding color modes

* update schema validation

Author: lukasoppermann

.changeset/early-guests-sort.md

@@ -0,0 +1,5 @@
+---
+'@primer/primitives': patch
+---
+
+Adding exports for all colormodes for Figma

scripts/buildPlatforms/buildFigma.ts

@@ -14,10 +14,22 @@ export const buildFigma = (buildOptions: ConfigGeneratorOptions): void => {
       name: 'light',
       source: [`src/tokens/base/color/light/light.json5`],
     },
+    {
+      name: 'light-high-constrast',
+      source: [`src/tokens/base/color/light/light.json5`, `src/tokens/base/color/light/light.high-contrast.json5`],
+    },
     {
       name: 'dark',
       source: [`src/tokens/base/color/dark/dark.json5`],
     },
+    {
+      name: 'dark-high-constrast',
+      source: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/dark/dark.high-contrast.json5`],
+    },
+    {
+      name: 'dark-dimmed',
+      source: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/dark/dark.dimmed.json5`],
+    },
   ]
 
   for (const {name, source} of baseScales) {
@@ -30,18 +42,16 @@ export const buildFigma = (buildOptions: ConfigGeneratorOptions): void => {
   }
   //
   for (const {filename, source, include} of themes) {
-    if (['light', 'dark'].includes(filename)) {
-      // build functional scales
-      PrimerStyleDictionary.extend({
-        source,
-        include,
-        platforms: {
-          figma: figma(`figma/themes/${filename}.json`, buildOptions.prefix, buildOptions.buildPath, {
-            mode: filename,
-          }),
-        },
-      }).buildAllPlatforms()
-    }
+    // build functional scales
+    PrimerStyleDictionary.extend({
+      source,
+      include,
+      platforms: {
+        figma: figma(`figma/themes/${filename}.json`, buildOptions.prefix, buildOptions.buildPath, {
+          mode: filename.replaceAll('-', ' '),
+        }),
+      },
+    }).buildAllPlatforms()
   }
   /** -----------------------------------
    * Size tokens
@@ -109,7 +119,17 @@ export const buildFigma = (buildOptions: ConfigGeneratorOptions): void => {
 
   // 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 = ['light', 'dark'].reverse()
+  const modeOrder = [
+    'light',
+    'dark',
+    'dark dimmed',
+    'light high contrast',
+    'dark high contrast',
+    'light colorblind',
+    'dark colorblind',
+    'light tritanopia',
+    'dark tritanopia',
+  ].reverse()
   // sort modes in the order defined above
   for (const collection in collections) {
     collections[collection].modes.sort((a, b) => modeOrder.indexOf(b) - modeOrder.indexOf(a))

src/schemas/collectionSchema.test.ts

@@ -3,8 +3,10 @@ import {collection, mode} from './collections'
 describe('Schema: collection', () => {
   const collections = collection([
     'base/color/light',
+    'base/color/light-high-contrast',
     'base/color/dark',
     'base/color/dark-dimmed',
+    'base/color/dark-high-contrast',
     'mode',
     'pattern/mode',
   ])
@@ -26,7 +28,17 @@ describe('Schema: collection', () => {
 })
 
 describe('Schema: mode', () => {
-  const modes = mode(['light', 'dark'])
+  const modes = mode([
+    'light',
+    'dark',
+    'dark dimmed',
+    'light high contrast',
+    'dark high contrast',
+    'light colorblind',
+    'dark colorblind',
+    'light tritanopia',
+    'dark tritanopia',
+  ])
 
   it('passes on valid values', () => {
     expect(modes.safeParse('light').success).toStrictEqual(true)

src/schemas/collections.ts

@@ -4,8 +4,10 @@ import {schemaErrorMessage} from '../utilities/schemaErrorMessage'
 
 type Collections =
   | 'base/color/light'
+  | 'base/color/light-high-contrast'
   | 'base/color/dark'
   | 'base/color/dark-dimmed'
+  | 'base/color/dark-high-contrast'
   | 'mode'
   | 'pattern/mode'
   | 'base/size'
@@ -24,7 +26,16 @@ export const collection = (collections: Collections[]) => {
   )
 }
 
-type Modes = 'light' | 'dark'
+type Modes =
+  | 'light'
+  | 'dark'
+  | 'dark dimmed'
+  | 'light high contrast'
+  | 'dark high contrast'
+  | 'light colorblind'
+  | 'dark colorblind'
+  | 'light tritanopia'
+  | 'dark tritanopia'
 
 export const mode = (modes: Modes[]) => {
   return z.string().refine(

src/schemas/colorToken.ts

@@ -24,12 +24,24 @@ export const colorToken = baseToken
         'org.primer.figma': z.object({
           collection: collection([
             'base/color/light',
+            'base/color/light-high-contrast',
             'base/color/dark',
             'base/color/dark-dimmed',
+            'base/color/dark-high-contrast',
             'mode',
             'pattern/mode',
           ]).optional(),
-          mode: mode(['light', 'dark']).optional(),
+          mode: mode([
+            'light',
+            'dark',
+            'dark dimmed',
+            'light high contrast',
+            'dark high contrast',
+            'light colorblind',
+            'dark colorblind',
+            'light tritanopia',
+            'dark tritanopia',
+          ]).optional(),
           scopes: scopes(['all', 'bgColor', 'fgColor', 'borderColor']).optional(),
         }),
       })

src/schemas/scopes.ts

@@ -2,8 +2,8 @@ import {z} from 'zod'
 import {joinFriendly} from '../utilities/joinFriendly'
 import {schemaErrorMessage} from '../utilities/schemaErrorMessage'
 
-export type ValidScope = 'all' | 'bgColor' | 'fgColor' | 'borderColor' | 'size' | 'gap' | 'radius'
-const validScopes: ValidScope[] = ['all', 'bgColor', 'fgColor', 'borderColor', 'size', 'gap', 'radius']
+export type ValidScope = 'all' | 'bgColor' | 'fgColor' | 'borderColor' | 'size' | 'gap' | 'radius' | 'effectColor'
+const validScopes: ValidScope[] = ['all', 'bgColor', 'fgColor', 'borderColor', 'size', 'gap', 'radius', 'effectColor']
 
 export const scopes = (scopeSubset?: ValidScope[]) => {
   const scopeArray = scopeSubset ?? validScopes