fallback (#1130)

Author: lukasoppermann

scripts/buildFigma.ts

@@ -3,6 +3,7 @@ import {PrimerStyleDictionary} from '../src/primerStyleDictionary.js'
 import {themes} from './themes.config.js'
 import {figma} from '../src/platforms/index.js'
 import type {ConfigGeneratorOptions} from '../src/types/styleDictionaryConfigGenerator.js'
+import {getFallbackTheme} from './utilities/getFallbackTheme.js'
 
 const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> => {
   /** -----------------------------------
@@ -225,7 +226,9 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
       source,
       include,
       platforms: {
-        figma: figma(`figma/shadows/${name}.json`, buildOptions.prefix, buildOptions.buildPath, {theme}),
+        figma: figma(`figma/shadows/${name}.json`, buildOptions.prefix, buildOptions.buildPath, {
+          theme: [theme, getFallbackTheme(theme)],
+        }),
       },
     })
 

scripts/buildTokens.ts

@@ -10,6 +10,7 @@ import type {TokenBuildInput} from '../src/types/tokenBuildInput.js'
 import glob from 'fast-glob'
 import {themes} from './themes.config.js'
 import fs from 'fs'
+import {getFallbackTheme} from './utilities/getFallbackTheme.js'
 
 /**
  * getStyleDictionaryConfig
@@ -39,10 +40,10 @@ const getStyleDictionaryConfig: StyleDictionaryConfigGenerator = (
     Object.entries({
       css: css(`css/${filename}.css`, options.prefix, options.buildPath, {
         themed: options.themed,
-        theme: options.theme,
+        theme: [options.theme, getFallbackTheme(options.theme)],
       }),
       docJson: docJson(`docs/${filename}.json`, options.prefix, options.buildPath, {
-        theme: options.theme,
+        theme: [options.theme, getFallbackTheme(options.theme)],
       }),
       styleLint: styleLint(`styleLint/${filename}.json`, options.prefix, options.buildPath, {
         theme: options.theme,
@@ -66,7 +67,7 @@ export const buildDesignTokens = async (buildOptions: ConfigGeneratorOptions): P
         platforms: {
           css: css(`internalCss/${filename}.css`, buildOptions.prefix, buildOptions.buildPath, {
             themed: true,
-            theme,
+            theme: [theme, getFallbackTheme(theme)],
           }),
         },
       })
@@ -88,7 +89,7 @@ export const buildDesignTokens = async (buildOptions: ConfigGeneratorOptions): P
           `functional/themes/${filename}`,
           source,
           include,
-          {...buildOptions, themed: true, theme},
+          {...buildOptions, themed: true, theme: [theme, getFallbackTheme(theme)]},
           // disable fallbacks for themes
           {fallbacks: undefined},
         ),

scripts/diffThemes.ts

@@ -1,32 +1,41 @@
 import {PrimerStyleDictionary} from '../src/primerStyleDictionary.js'
-import {flattenTokens} from 'style-dictionary/utils'
 import {themes as themesConfigArray} from './themes.config.js'
 import type {Dictionary} from 'style-dictionary/types'
 
 const tokenNameArray = ({dictionary}: {dictionary: Dictionary}) =>
   dictionary.allTokens.map(({name}: {name: string}) => name)
 
 const themesArray = await Promise.all(
-  themesConfigArray.map(async ({filename, source, include}): Promise<[string, string[]]> => {
+  themesConfigArray.map(async ({filename, source, include, theme}): Promise<[string, string[]]> => {
     const sd = await PrimerStyleDictionary.extend({
       source,
       include,
+      log: {
+        warnings: 'disabled', // 'warn' | 'error' | 'disabled'
+        verbosity: 'verbose', // 'default' | 'silent' | 'verbose'
+        errors: {
+          brokenReferences: 'throw', // 'throw' | 'console'
+        },
+      },
       platforms: {
         json: {
+          preprocessors: ['themeOverrides'],
           transforms: ['name/pathToDotNotation'],
+          options: {
+            themeOverrides: {
+              theme,
+            },
+          },
         },
       },
     })
 
-    const tokens = await sd.exportPlatform('json')
+    const dictionary = await sd.getPlatformTokens('json')
 
     return [
       filename,
       tokenNameArray({
-        dictionary: {
-          tokens,
-          allTokens: await flattenTokens(tokens),
-        },
+        dictionary,
       }),
     ]
   }),

scripts/utilities/getFallbackTheme.ts

@@ -0,0 +1,8 @@
+export const getFallbackTheme = (
+  theme?: string | [string | undefined, string | undefined],
+): 'light' | 'dark' | undefined => {
+  if (Array.isArray(theme)) {
+    theme = theme[1] || theme[0]
+  }
+  return theme ? (theme.startsWith('light') ? 'light' : 'dark') : undefined
+}

scripts/utilities/validateTokenWithSchema.ts

@@ -6,6 +6,17 @@ export type validationErrors = {
   errorsByPath: Record<string, ZodIssue[]>
 }
 
+const unpackErrorDetails = details => {
+  const errorObjectByCode = {
+    //eslint-disable-next-line camelcase
+    invalid_union: 'unionErrors',
+  }
+  return {
+    ...details,
+    errors: details[errorObjectByCode[details.code]] || [],
+  }
+}
+
 export const validateTokenWithSchema = (
   fileName: string,
   tokens: unknown,
@@ -23,7 +34,7 @@ export const validateTokenWithSchema = (
         if (!acc[item.path.join('.')]) acc[item.path.join('.')] = []
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        acc[item.path.join('.')].push(item)
+        acc[item.path.join('.')].push(unpackErrorDetails(item))
         return acc
       }, {}),
     }

scripts/validateTokenJson.ts

@@ -71,8 +71,13 @@ if (getFlag('--silent') === null) {
       // eslint-disable-next-line no-console
       console.log(
         fail.errorsByPath[path]
-          .map(({message}) =>
-            message.replace(/\*\*(.*?)\*\*/g, '- \u001b[31;1m\u001b[1m$1\u001b[0m').replace(/\n(?!-)/g, '\n  ↳ '),
+          .map(
+            ({message, code, errors}) =>
+              `${message.replace(/\*\*(.*?)\*\*/g, '- \u001b[31;1m\u001b[1m$1\u001b[0m').replace(/\n(?!-)/g, '\n  ↳ ')}, code: ${code}, errors:\n ${errors
+                .map(error => {
+                  return `- ${error.issues[0].code}: ${error.issues[0].message}`
+                })
+                .join('\n')}`,
           )
           .join('\n'),
         '\n',