light mode (#1134)

Author: lukasoppermann

eslint.config.mjs

@@ -96,11 +96,11 @@ export default tseslint.config([
         {
           allow: [
             'light_high_contrast',
-            'light_colorblind',
+            'light_protanopia_deuteranopia',
             'light_tritanopia',
             'dark_dimmed',
             'dark_high_contrast',
-            'dark_colorblind',
+            'dark_protanopia_deuteranopia',
             'dark_tritanopia',
           ],
         },

scripts/buildFigma.ts

@@ -61,14 +61,14 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
     await extended.buildAllPlatforms()
   }
   //
-  for (const {filename, source, include} of themes) {
+  for (const {filename, source, include, theme} of themes) {
     // build functional scales
     const extended = await PrimerStyleDictionary.extend({
       source,
       include,
       platforms: {
         figma: figma(`figma/themes/${filename}.json`, buildOptions.prefix, buildOptions.buildPath, {
-          theme: filename.replaceAll('-', ' '),
+          theme: [theme, getFallbackTheme(theme)],
         }),
       },
     })
@@ -146,7 +146,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
         `src/tokens/functional/color/light/primitives-light.json5`,
         `src/tokens/functional/color/light/patterns-light.json5`,
       ],
-      theme: 'light colorblind',
+      theme: 'light protanopia deuteranopia',
     },
     {
       name: 'light-tritanopia',
@@ -205,7 +205,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
         `src/tokens/functional/color/dark/primitives-dark.json5`,
         `src/tokens/functional/color/dark/patterns-dark.json5`,
       ],
-      theme: 'dark colorblind',
+      theme: 'dark protanopia deuteranopia',
     },
     {
       name: 'dark-tritanopia',
@@ -289,8 +289,8 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
     'dark dimmed',
     'light high contrast',
     'dark high contrast',
-    'light colorblind',
-    'dark colorblind',
+    'light protanopia deuteranopia',
+    'dark protanopia deuteranopia',
     'light tritanopia',
     'dark tritanopia',
   ].reverse()

scripts/colorContrast.config.ts

@@ -254,12 +254,12 @@ export const bgColors: string[] = ['bgColor-default', 'bgColor-muted']
 export type ThemeName =
   | 'light'
   | 'light_high_contrast'
-  | 'light_colorblind'
+  | 'light_protanopia_deuteranopia'
   | 'light_tritanopia'
   | 'dark'
   | 'dark_dimmed'
   | 'dark_high_contrast'
-  | 'dark_colorblind'
+  | 'dark_protanopia_deuteranopia'
   | 'dark_tritanopia'
 
 const defaultContrast: ContrastRequirement[] = setContrastRatios('default', [
@@ -278,12 +278,12 @@ export const contrastRequirements: ContrastRequirements = {
   // default light mode
   light: defaultContrast,
   light_high_contrast: highContrast,
-  light_colorblind: defaultContrast,
+  light_protanopia_deuteranopia: defaultContrast,
   light_tritanopia: defaultContrast,
   // default dark mode
   dark: defaultContrast,
   dark_dimmed: defaultContrast,
   dark_high_contrast: highContrast,
-  dark_colorblind: defaultContrast,
+  dark_protanopia_deuteranopia: defaultContrast,
   dark_tritanopia: defaultContrast,
 }

scripts/colorContrast.ts

@@ -5,6 +5,7 @@ import {readFile} from 'fs/promises'
 import {normal} from 'color-blend'
 import {getContrast, parseToRgba, rgba} from 'color2k'
 import {makeConsoleTable, makeMarkdownTable} from './utilities/makeTable.js'
+import {getThemeFileName} from './utilities/getThemeFileName.js'
 /**
  * Type definitions
  */
@@ -207,7 +208,7 @@ const getColorsFromFiles = async (filePaths: ThemeName[]): Promise<Theme[]> => {
       [
         themeName,
         await JSON.parse(
-          await readFile(`./dist/docs/functional/themes/${themeName.replaceAll('_', '-')}.json`, 'utf8'),
+          await readFile(`./dist/docs/functional/themes/${getThemeFileName(themeName, '_', '-')}.json`, 'utf8'),
         ),
       ] as Theme,
   )
@@ -224,8 +225,8 @@ const runCheck = async () => {
     'dark',
     'light_high_contrast',
     'dark_high_contrast',
-    'light_colorblind',
-    'dark_colorblind',
+    'light_protanopia_deuteranopia',
+    'dark_protanopia_deuteranopia',
     'light_tritanopia',
     'dark_tritanopia',
   ] as ThemeName[]

scripts/utilities/getThemeFileName.ts

@@ -0,0 +1,12 @@
+export const getThemeFileName = (theme: string, find: string = '_', replace: string = '-') => {
+  const themeName = theme.replaceAll(find, replace)
+
+  if (themeName === 'light-protanopia-deuteranopia') {
+    return 'light-colorblind'
+  }
+  if (themeName === 'dark-protanopia-deuteranopia') {
+    return 'dark-colorblind'
+  }
+
+  return themeName
+}

src/platforms/figma.ts

@@ -45,6 +45,7 @@ export const figma: PlatformInitializer = (outputFile, prefix, buildPath, option
     },
     // should this object be spread here?
     ...options,
+    theme: options?.theme[0].replaceAll('-', ' '),
     themeOverrides: {
       theme: options?.theme,
     },
@@ -58,7 +59,7 @@ export const figma: PlatformInitializer = (outputFile, prefix, buildPath, option
       format: `json/figma`,
       options: {
         outputReferences: true,
-        theme: options?.theme,
+        theme: options?.theme[0].replaceAll('-', ' '),
       },
     },
   ],

src/schemas/collectionSchema.test.ts

@@ -34,8 +34,8 @@ describe('Schema: mode', () => {
     'dark dimmed',
     'light high contrast',
     'dark high contrast',
-    'light colorblind',
-    'dark colorblind',
+    'light protanopia deuteranopia',
+    'dark protanopia deuteranopia',
     'light tritanopia',
     'dark tritanopia',
   ])

src/schemas/collections.ts

@@ -33,8 +33,8 @@ type Modes =
   | 'dark dimmed'
   | 'light high contrast'
   | 'dark high contrast'
-  | 'light colorblind'
-  | 'dark colorblind'
+  | 'light protanopia deuteranopia'
+  | 'dark protanopia deuteranopia'
   | 'light tritanopia'
   | 'dark tritanopia'
 

src/schemas/colorToken.ts

@@ -36,8 +36,8 @@ export const colorToken = baseColorToken
               'dark dimmed',
               'light high contrast',
               'dark high contrast',
-              'light colorblind',
-              'dark colorblind',
+              'light protanopia deuteranopia',
+              'dark protanopia deuteranopia',
               'light tritanopia',
               'dark tritanopia',
             ]).optional(),

src/schemas/shadowToken.ts

@@ -34,8 +34,8 @@ export const shadowToken = baseToken
               'dark dimmed',
               'light high contrast',
               'dark high contrast',
-              'light colorblind',
-              'dark colorblind',
+              'light protanopia deuteranopia',
+              'dark protanopia deuteranopia',
               'light tritanopia',
               'dark tritanopia',
             ]).optional(),

src/tokens/component/diffBlob.json5

@@ -21,6 +21,11 @@
             group: 'component',
             scopes: ['bgColor'],
           },
+          'org.primer.overrides': {
+            dark: {
+              alpha: 0.15,
+            },
+          },
         },
       },
     },
@@ -45,6 +50,12 @@
             group: 'component',
             scopes: ['bgColor'],
           },
+          'org.primer.overrides': {
+            dark: {
+              $value: '{base.color.green.4}',
+              alpha: 0.4,
+            },
+          },
         },
       },
     },
@@ -69,6 +80,12 @@
             group: 'component',
             scopes: ['bgColor'],
           },
+          'org.primer.overrides': {
+            dark: {
+              $value: '{base.color.green.3}',
+              alpha: 0.3,
+            },
+          },
         },
       },
     },
@@ -117,6 +134,12 @@
             group: 'component',
             scopes: ['bgColor'],
           },
+          'org.primer.overrides': {
+            dark: {
+              $value: '{base.color.red.4}',
+              alpha: 0.4,
+            },
+          },
         },
       },
     },
@@ -141,6 +164,12 @@
             group: 'component',
             scopes: ['bgColor'],
           },
+          'org.primer.overrides': {
+            dark: {
+              $value: '{base.color.red.4}',
+              alpha: 0.3,
+            },
+          },
         },
       },
     },
@@ -203,6 +232,9 @@
               group: 'component',
               scopes: ['bgColor'],
             },
+            'org.primer.overrides': {
+              dark: '{base.color.blue.8}',
+            },
           },
         },
         hover: {