remove old overrides

primer · Dec 16, 2024 · ba3083e · ba3083e
1 parent d594d58
commit ba3083e
Show file tree

Hide file tree

Showing 16 changed files with 113 additions and 740 deletions.
diff --git a/scripts/buildFigma.ts b/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)],
+        }),
       },
     })
 

diff --git a/scripts/buildTokens.ts b/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,13 +40,13 @@ 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,
+        theme: [options.theme, getFallbackTheme(options.theme)],
       }),
       fallbacks: fallbacks(`fallbacks/${filename}.json`, options.prefix, options.buildPath),
       ...platforms,
@@ -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},
         ),

diff --git a/scripts/utilities/getFallbackTheme.ts b/scripts/utilities/getFallbackTheme.ts
@@ -0,0 +1,3 @@
+export const getFallbackTheme = (theme?: string) => {
+  return theme ? (theme.startsWith('light') ? 'light' : 'dark') : undefined
+}
diff --git a/src/preprocessors/themeOverrides.test.ts b/src/preprocessors/themeOverrides.test.ts
@@ -139,4 +139,73 @@ describe('Preprocessor: themeOverrides', () => {
       }),
     ).toStrictEqual(resultDictionary.tokens)
   })
+
+  it('works with fallback theme', () => {
+    const dictionary = getMockDictionary({
+      valueOverride: getMockToken({
+        name: 'red',
+        description: 'This is a description',
+        $value: 'transformedValue',
+        path: ['tokens', 'subgroup', 'red'],
+        $extensions: {
+          'org.primer.overrides': {
+            dark: 'darkValue',
+          },
+        },
+      }),
+      objectOverride: getMockToken({
+        name: 'red',
+        description: 'This is a description',
+        $value: 'transformedValue',
+        path: ['tokens', 'subgroup', 'red'],
+        $extensions: {
+          'org.primer.overrides': {
+            dark: {
+              $value: 'darkValue',
+              description: 'DarkMode description',
+            },
+          },
+        },
+      }),
+    })
+
+    const resultDictionary = getMockDictionary({
+      valueOverride: getMockToken({
+        name: 'red',
+        description: 'This is a description',
+        $value: 'darkValue',
+        path: ['tokens', 'subgroup', 'red'],
+        $extensions: {
+          'org.primer.overrides': {
+            dark: 'darkValue',
+          },
+        },
+      }),
+      objectOverride: getMockToken({
+        name: 'red',
+        description: 'DarkMode description',
+        $value: 'darkValue',
+        path: ['tokens', 'subgroup', 'red'],
+        $extensions: {
+          'org.primer.overrides': {
+            dark: {
+              $value: 'darkValue',
+              description: 'DarkMode description',
+            },
+          },
+        },
+      }),
+    })
+
+    expect(
+      themeOverrides.preprocessor(dictionary.tokens, {
+        options: {themeOverrides: {theme: ['dark-dimmed', undefined]}},
+      }),
+    ).toStrictEqual(dictionary.tokens)
+    expect(
+      themeOverrides.preprocessor(dictionary.tokens, {
+        options: {themeOverrides: {theme: ['dark-dimmed', 'dark']}},
+      }),
+    ).toStrictEqual(resultDictionary.tokens)
+  })
 })
diff --git a/src/preprocessors/themeOverrides.ts b/src/preprocessors/themeOverrides.ts
@@ -6,16 +6,20 @@ export const themeOverrides: Preprocessor = {
   preprocessor: (dictionary: PreprocessedTokens, config: PlatformConfig): PreprocessedTokens => {
     const extensionProp = config.options?.themeOverrides?.extensionProp || 'org.primer.overrides'
     const valueProp = config.options?.themeOverrides?.valueProp || '$value'
-    const currentTheme = config.options?.themeOverrides?.theme
-
+    const [currentTheme, fallbackTheme] = asArray(config.options?.themeOverrides?.theme)
     const tokens = transformTokens(dictionary, token => {
       // return early if no theme value is set
-      if (!currentTheme || !token.$extensions?.[extensionProp] || !token.$extensions?.[extensionProp][currentTheme]) {
+      if (
+        !currentTheme ||
+        !token.$extensions?.[extensionProp] ||
+        (!token.$extensions?.[extensionProp][currentTheme] && !token.$extensions?.[extensionProp][fallbackTheme])
+      ) {
         return token
       }
 
       // get override
-      const override = token.$extensions?.[extensionProp][currentTheme]
+      const override =
+        token.$extensions?.[extensionProp][currentTheme] || token.$extensions?.[extensionProp][fallbackTheme]
       // token an theme value exist
       return {
         ...token,

diff --git a/src/tokens/component/diffBlob.json5 b/src/tokens/component/diffBlob.json5
@@ -195,7 +195,7 @@
             },
             'dark-high-contrast': '{bgColor.danger.emphasis}',
             'dark-tritanopia': {
-              $value: '{base.color.orange.4}',
+              $value: '{base.color.red.4}',
               alpha: 0.4,
             },
             dark: {
@@ -239,7 +239,7 @@
               alpha: 0.3,
             },
             'dark-tritanopia': {
-              $value: '{base.color.orange.4}',
+              $value: '{base.color.red.4}',
               alpha: 0.3,
             },
             dark: {