feat(themes): support @primer/primitives v11 themes

package.json

@@ -81,7 +81,7 @@
     "@discordapp/twemoji": "16.0.1",
     "@electron/notarize": "3.0.1",
     "@primer/octicons-react": "19.15.3",
-    "@primer/primitives": "10.7.0",
+    "@primer/primitives": "11.0.0",
     "@primer/react": "36.27.0",
     "@tailwindcss/postcss": "4.1.11",
     "@testing-library/jest-dom": "6.6.3",

src/renderer/App.css

@@ -3,24 +3,35 @@
 
 /** GitHub Primer Design System */
 /* Size & Typography */
+@import "@primer/primitives/dist/css/primitives.css";
+
+/* Base */
+@import "@primer/primitives/dist/css/base/motion/motion.css";
 @import "@primer/primitives/dist/css/base/size/size.css";
 @import "@primer/primitives/dist/css/base/typography/typography.css";
+
+/* Functional */
 @import "@primer/primitives/dist/css/functional/size/border.css";
 @import "@primer/primitives/dist/css/functional/size/breakpoints.css";
 @import "@primer/primitives/dist/css/functional/size/size.css";
 @import "@primer/primitives/dist/css/functional/size/viewport.css";
 @import "@primer/primitives/dist/css/functional/typography/typography.css";
 
 /* Themes and Colors */
-@import "@primer/primitives/dist/css/functional/themes/light.css";
-@import "@primer/primitives/dist/css/functional/themes/light-tritanopia.css";
-@import "@primer/primitives/dist/css/functional/themes/light-high-contrast.css";
-@import "@primer/primitives/dist/css/functional/themes/light-colorblind.css";
-@import "@primer/primitives/dist/css/functional/themes/dark.css";
+@import "@primer/primitives/dist/css/functional/themes/dark-colorblind-high-contrast.css";
 @import "@primer/primitives/dist/css/functional/themes/dark-colorblind.css";
+@import "@primer/primitives/dist/css/functional/themes/dark-dimmed-high-contrast.css";
 @import "@primer/primitives/dist/css/functional/themes/dark-dimmed.css";
 @import "@primer/primitives/dist/css/functional/themes/dark-high-contrast.css";
+@import "@primer/primitives/dist/css/functional/themes/dark-tritanopia-high-contrast.css";
 @import "@primer/primitives/dist/css/functional/themes/dark-tritanopia.css";
+@import "@primer/primitives/dist/css/functional/themes/dark.css";
+@import "@primer/primitives/dist/css/functional/themes/light-colorblind-high-contrast.css";
+@import "@primer/primitives/dist/css/functional/themes/light-colorblind.css";
+@import "@primer/primitives/dist/css/functional/themes/light-high-contrast.css";
+@import "@primer/primitives/dist/css/functional/themes/light-tritanopia-high-contrast.css";
+@import "@primer/primitives/dist/css/functional/themes/light-tritanopia.css";
+@import "@primer/primitives/dist/css/functional/themes/light.css";
 
 /** Tailwind CSS Configuration */
 @config '../../tailwind.config.ts';

src/renderer/__mocks__/state-mocks.ts

@@ -78,6 +78,7 @@ export const mockToken = 'token-123-456' as Token;
 
 const mockAppearanceSettings: AppearanceSettingsState = {
   theme: Theme.SYSTEM,
+  increaseContrast: false,
   zoomPercentage: 100,
   showAccountHeader: false,
   wrapNotificationTitle: false,

src/renderer/components/settings/AppearanceSettings.test.tsx

@@ -46,6 +46,31 @@ describe('renderer/components/settings/AppearanceSettings.tsx', () => {
     expect(updateSetting).toHaveBeenCalledWith('theme', 'LIGHT');
   });
 
+  it('should toggle increase contrast checkbox', async () => {
+    await act(async () => {
+      render(
+        <AppContext.Provider
+          value={{
+            auth: {
+              accounts: [mockGitHubAppAccount],
+            },
+            settings: mockSettings,
+            updateSetting,
+          }}
+        >
+          <MemoryRouter>
+            <AppearanceSettings />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+    });
+
+    await userEvent.click(screen.getByTestId('checkbox-increaseContrast'));
+
+    expect(updateSetting).toHaveBeenCalledTimes(1);
+    expect(updateSetting).toHaveBeenCalledWith('increaseContrast', true);
+  });
+
   it('should update the zoom value when using CMD + and CMD -', async () => {
     webFrame.getZoomLevel = jest.fn().mockReturnValue(-1);
 

src/renderer/components/settings/AppearanceSettings.tsx

@@ -70,34 +70,36 @@ export const AppearanceSettings: FC = () => {
             </Select.OptGroup>
             <Select.OptGroup label="Light">
               <Select.Option value={Theme.LIGHT}>Light default</Select.Option>
-              <Select.Option value={Theme.LIGHT_HIGH_CONTRAST}>
-                Light high contrast
-              </Select.Option>
               <Select.Option value={Theme.LIGHT_COLORBLIND}>
-                Light Protanopia & Deuteranopia
+                Light colorblind
               </Select.Option>
               <Select.Option value={Theme.LIGHT_TRITANOPIA}>
                 Light Tritanopia
               </Select.Option>
             </Select.OptGroup>
             <Select.OptGroup label="Dark">
               <Select.Option value={Theme.DARK}>Dark default</Select.Option>
-              <Select.Option value={Theme.DARK_HIGH_CONTRAST}>
-                Dark high contrast
-              </Select.Option>
               <Select.Option value={Theme.DARK_COLORBLIND}>
-                Dark Protanopia & Deuteranopia
+                Dark colorblind
               </Select.Option>
               <Select.Option value={Theme.DARK_TRITANOPIA}>
                 Dark Tritanopia
               </Select.Option>
-              <Select.Option value={Theme.DARK_DIMMED}>
-                Dark dimmed
-              </Select.Option>
+              <Select.Option value={Theme.DARK_DIMMED}>Soft dark</Select.Option>
             </Select.OptGroup>
           </Select>
         </Stack>
 
+        <Checkbox
+          name="increaseContrast"
+          label="Increase contrast"
+          checked={settings.increaseContrast}
+          onChange={(evt) =>
+            updateSetting('increaseContrast', evt.target.checked)
+          }
+          tooltip={<Text>Enable high contrast.</Text>}
+        />
+
         <Stack
           direction="horizontal"
           gap="condensed"

src/renderer/context/App.tsx

@@ -71,6 +71,7 @@ export const defaultAuth: AuthState = {
 
 const defaultAppearanceSettings: AppearanceSettingsState = {
   theme: Theme.SYSTEM,
+  increaseContrast: false,
   zoomPercentage: 100,
   showAccountHeader: false,
   wrapNotificationTitle: false,
@@ -168,12 +169,21 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
 
   useEffect(() => {
     const colorMode = mapThemeModeToColorMode(settings.theme);
-    const colorScheme = mapThemeModeToColorScheme(settings.theme);
+    const colorScheme = mapThemeModeToColorScheme(
+      settings.theme,
+      settings.increaseContrast,
+    );
 
     setColorMode(colorMode);
     setDayScheme(colorScheme ?? DEFAULT_DAY_COLOR_SCHEME);
     setNightScheme(colorScheme ?? DEFAULT_NIGHT_COLOR_SCHEME);
-  }, [settings.theme, setColorMode, setDayScheme, setNightScheme]);
+  }, [
+    settings.theme,
+    settings.increaseContrast,
+    setColorMode,
+    setDayScheme,
+    setNightScheme,
+  ]);
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: We only want fetchNotifications to be called for particular state changes
   useEffect(() => {

src/renderer/types.ts

@@ -68,6 +68,7 @@ export type SettingsState = AppearanceSettingsState &
 
 export interface AppearanceSettingsState {
   theme: Theme;
+  increaseContrast: boolean;
   zoomPercentage: number;
   showAccountHeader: boolean;
   wrapNotificationTitle: boolean;
@@ -113,11 +114,9 @@ export interface GitifyState {
 export enum Theme {
   SYSTEM = 'SYSTEM',
   LIGHT = 'LIGHT',
-  LIGHT_HIGH_CONTRAST = 'LIGHT_HIGH_CONTRAST',
   LIGHT_COLORBLIND = 'LIGHT_COLORBLIND',
   LIGHT_TRITANOPIA = 'LIGHT_TRITANOPIA',
   DARK = 'DARK',
-  DARK_HIGH_CONTRAST = 'DARK_HIGH_CONTRAST',
   DARK_COLORBLIND = 'DARK_COLORBLIND',
   DARK_TRITANOPIA = 'DARK_TRITANOPIA',
   DARK_DIMMED = 'DARK_DIMMED',

src/renderer/utils/theme.test.ts

@@ -4,39 +4,54 @@ import { mapThemeModeToColorMode, mapThemeModeToColorScheme } from './theme';
 describe('renderer/utils/theme.ts', () => {
   it('should map theme mode to github primer color mode', () => {
     expect(mapThemeModeToColorMode(Theme.LIGHT)).toBe('day');
-    expect(mapThemeModeToColorMode(Theme.LIGHT_HIGH_CONTRAST)).toBe('day');
     expect(mapThemeModeToColorMode(Theme.LIGHT_COLORBLIND)).toBe('day');
     expect(mapThemeModeToColorMode(Theme.LIGHT_TRITANOPIA)).toBe('day');
     expect(mapThemeModeToColorMode(Theme.DARK)).toBe('night');
-    expect(mapThemeModeToColorMode(Theme.DARK_HIGH_CONTRAST)).toBe('night');
     expect(mapThemeModeToColorMode(Theme.DARK_COLORBLIND)).toBe('night');
     expect(mapThemeModeToColorMode(Theme.DARK_TRITANOPIA)).toBe('night');
     expect(mapThemeModeToColorMode(Theme.DARK_DIMMED)).toBe('night');
     expect(mapThemeModeToColorMode(Theme.SYSTEM)).toBe('auto');
   });
 
   it('should map theme mode to github primer color scheme', () => {
-    expect(mapThemeModeToColorScheme(Theme.LIGHT)).toBe('light');
-    expect(mapThemeModeToColorScheme(Theme.LIGHT_HIGH_CONTRAST)).toBe(
+    expect(mapThemeModeToColorScheme(Theme.LIGHT, false)).toBe('light');
+    expect(mapThemeModeToColorScheme(Theme.LIGHT, true)).toBe(
       'light_high_contrast',
     );
-    expect(mapThemeModeToColorScheme(Theme.LIGHT_COLORBLIND)).toBe(
+    expect(mapThemeModeToColorScheme(Theme.LIGHT_COLORBLIND, false)).toBe(
       'light_colorblind',
     );
-    expect(mapThemeModeToColorScheme(Theme.LIGHT_TRITANOPIA)).toBe(
+    expect(mapThemeModeToColorScheme(Theme.LIGHT_COLORBLIND, true)).toBe(
+      'light_colorblind_high_contrast',
+    );
+    expect(mapThemeModeToColorScheme(Theme.LIGHT_TRITANOPIA, false)).toBe(
       'light_tritanopia',
     );
-    expect(mapThemeModeToColorScheme(Theme.DARK)).toBe('dark');
-    expect(mapThemeModeToColorScheme(Theme.DARK_HIGH_CONTRAST)).toBe(
+    expect(mapThemeModeToColorScheme(Theme.LIGHT_TRITANOPIA, true)).toBe(
+      'light_tritanopia_high_contrast',
+    );
+    expect(mapThemeModeToColorScheme(Theme.DARK, false)).toBe('dark');
+    expect(mapThemeModeToColorScheme(Theme.DARK, true)).toBe(
       'dark_high_contrast',
     );
-    expect(mapThemeModeToColorScheme(Theme.DARK_COLORBLIND)).toBe(
+    expect(mapThemeModeToColorScheme(Theme.DARK_COLORBLIND, false)).toBe(
       'dark_colorblind',
     );
-    expect(mapThemeModeToColorScheme(Theme.DARK_TRITANOPIA)).toBe(
+    expect(mapThemeModeToColorScheme(Theme.DARK_COLORBLIND, true)).toBe(
+      'dark_colorblind_high_contrast',
+    );
+    expect(mapThemeModeToColorScheme(Theme.DARK_TRITANOPIA, false)).toBe(
       'dark_tritanopia',
     );
-    expect(mapThemeModeToColorScheme(Theme.DARK_DIMMED)).toBe('dark_dimmed');
-    expect(mapThemeModeToColorScheme(Theme.SYSTEM)).toBe(null);
+    expect(mapThemeModeToColorScheme(Theme.DARK_TRITANOPIA, true)).toBe(
+      'dark_tritanopia_high_contrast',
+    );
+    expect(mapThemeModeToColorScheme(Theme.DARK_DIMMED, false)).toBe(
+      'dark_dimmed',
+    );
+    expect(mapThemeModeToColorScheme(Theme.DARK_DIMMED, true)).toBe(
+      'dark_dimmed_high_contrast',
+    );
+    expect(mapThemeModeToColorScheme(Theme.SYSTEM, false)).toBe(null);
   });
 });