Skip to content

Commit 735dd8c

Browse files
renovate[bot]setchy
renovate[bot]
and
setchy
authored
feat(themes): support @primer/primitives v11 themes (#2087)
* chore(deps): update @primer/primitives to v11 * feat: adopt new themes, high contrast toggle and names Signed-off-by: Adam Setch <adam.setch@outlook.com> * feat: adopt new themes, high contrast toggle and names Signed-off-by: Adam Setch <adam.setch@outlook.com> --------- Signed-off-by: Adam Setch <adam.setch@outlook.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Adam Setch <adam.setch@outlook.com>
1 parent 6841e5b commit 735dd8c

File tree

11 files changed

+171
-65
lines changed

11 files changed

+171
-65
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@
8181
"@discordapp/twemoji": "16.0.1",
8282
"@electron/notarize": "3.0.1",
8383
"@primer/octicons-react": "19.15.3",
84-
"@primer/primitives": "10.7.0",
84+
"@primer/primitives": "11.0.0",
8585
"@primer/react": "36.27.0",
8686
"@tailwindcss/postcss": "4.1.11",
8787
"@testing-library/jest-dom": "6.6.3",

‎pnpm-lock.yaml

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/renderer/App.css

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,35 @@
33

44
/** GitHub Primer Design System */
55
/* Size & Typography */
6+
@import "@primer/primitives/dist/css/primitives.css";
7+
8+
/* Base */
9+
@import "@primer/primitives/dist/css/base/motion/motion.css";
610
@import "@primer/primitives/dist/css/base/size/size.css";
711
@import "@primer/primitives/dist/css/base/typography/typography.css";
12+
13+
/* Functional */
814
@import "@primer/primitives/dist/css/functional/size/border.css";
915
@import "@primer/primitives/dist/css/functional/size/breakpoints.css";
1016
@import "@primer/primitives/dist/css/functional/size/size.css";
1117
@import "@primer/primitives/dist/css/functional/size/viewport.css";
1218
@import "@primer/primitives/dist/css/functional/typography/typography.css";
1319

1420
/* Themes and Colors */
15-
@import "@primer/primitives/dist/css/functional/themes/light.css";
16-
@import "@primer/primitives/dist/css/functional/themes/light-tritanopia.css";
17-
@import "@primer/primitives/dist/css/functional/themes/light-high-contrast.css";
18-
@import "@primer/primitives/dist/css/functional/themes/light-colorblind.css";
19-
@import "@primer/primitives/dist/css/functional/themes/dark.css";
21+
@import "@primer/primitives/dist/css/functional/themes/dark-colorblind-high-contrast.css";
2022
@import "@primer/primitives/dist/css/functional/themes/dark-colorblind.css";
23+
@import "@primer/primitives/dist/css/functional/themes/dark-dimmed-high-contrast.css";
2124
@import "@primer/primitives/dist/css/functional/themes/dark-dimmed.css";
2225
@import "@primer/primitives/dist/css/functional/themes/dark-high-contrast.css";
26+
@import "@primer/primitives/dist/css/functional/themes/dark-tritanopia-high-contrast.css";
2327
@import "@primer/primitives/dist/css/functional/themes/dark-tritanopia.css";
28+
@import "@primer/primitives/dist/css/functional/themes/dark.css";
29+
@import "@primer/primitives/dist/css/functional/themes/light-colorblind-high-contrast.css";
30+
@import "@primer/primitives/dist/css/functional/themes/light-colorblind.css";
31+
@import "@primer/primitives/dist/css/functional/themes/light-high-contrast.css";
32+
@import "@primer/primitives/dist/css/functional/themes/light-tritanopia-high-contrast.css";
33+
@import "@primer/primitives/dist/css/functional/themes/light-tritanopia.css";
34+
@import "@primer/primitives/dist/css/functional/themes/light.css";
2435

2536
/** Tailwind CSS Configuration */
2637
@config '../../tailwind.config.ts';

‎src/renderer/__mocks__/state-mocks.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ export const mockToken = 'token-123-456' as Token;
7878

7979
const mockAppearanceSettings: AppearanceSettingsState = {
8080
theme: Theme.SYSTEM,
81+
increaseContrast: false,
8182
zoomPercentage: 100,
8283
showAccountHeader: false,
8384
wrapNotificationTitle: false,

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,31 @@ describe('renderer/components/settings/AppearanceSettings.tsx', () => {
4646
expect(updateSetting).toHaveBeenCalledWith('theme', 'LIGHT');
4747
});
4848

49+
it('should toggle increase contrast checkbox', async () => {
50+
await act(async () => {
51+
render(
52+
<AppContext.Provider
53+
value={{
54+
auth: {
55+
accounts: [mockGitHubAppAccount],
56+
},
57+
settings: mockSettings,
58+
updateSetting,
59+
}}
60+
>
61+
<MemoryRouter>
62+
<AppearanceSettings />
63+
</MemoryRouter>
64+
</AppContext.Provider>,
65+
);
66+
});
67+
68+
await userEvent.click(screen.getByTestId('checkbox-increaseContrast'));
69+
70+
expect(updateSetting).toHaveBeenCalledTimes(1);
71+
expect(updateSetting).toHaveBeenCalledWith('increaseContrast', true);
72+
});
73+
4974
it('should update the zoom value when using CMD + and CMD -', async () => {
5075
webFrame.getZoomLevel = jest.fn().mockReturnValue(-1);
5176

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

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -70,34 +70,36 @@ export const AppearanceSettings: FC = () => {
7070
</Select.OptGroup>
7171
<Select.OptGroup label="Light">
7272
<Select.Option value={Theme.LIGHT}>Light default</Select.Option>
73-
<Select.Option value={Theme.LIGHT_HIGH_CONTRAST}>
74-
Light high contrast
75-
</Select.Option>
7673
<Select.Option value={Theme.LIGHT_COLORBLIND}>
77-
Light Protanopia & Deuteranopia
74+
Light colorblind
7875
</Select.Option>
7976
<Select.Option value={Theme.LIGHT_TRITANOPIA}>
8077
Light Tritanopia
8178
</Select.Option>
8279
</Select.OptGroup>
8380
<Select.OptGroup label="Dark">
8481
<Select.Option value={Theme.DARK}>Dark default</Select.Option>
85-
<Select.Option value={Theme.DARK_HIGH_CONTRAST}>
86-
Dark high contrast
87-
</Select.Option>
8882
<Select.Option value={Theme.DARK_COLORBLIND}>
89-
Dark Protanopia & Deuteranopia
83+
Dark colorblind
9084
</Select.Option>
9185
<Select.Option value={Theme.DARK_TRITANOPIA}>
9286
Dark Tritanopia
9387
</Select.Option>
94-
<Select.Option value={Theme.DARK_DIMMED}>
95-
Dark dimmed
96-
</Select.Option>
88+
<Select.Option value={Theme.DARK_DIMMED}>Soft dark</Select.Option>
9789
</Select.OptGroup>
9890
</Select>
9991
</Stack>
10092

93+
<Checkbox
94+
name="increaseContrast"
95+
label="Increase contrast"
96+
checked={settings.increaseContrast}
97+
onChange={(evt) =>
98+
updateSetting('increaseContrast', evt.target.checked)
99+
}
100+
tooltip={<Text>Enable high contrast.</Text>}
101+
/>
102+
101103
<Stack
102104
direction="horizontal"
103105
gap="condensed"

‎src/renderer/context/App.tsx

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ export const defaultAuth: AuthState = {
7171

7272
const defaultAppearanceSettings: AppearanceSettingsState = {
7373
theme: Theme.SYSTEM,
74+
increaseContrast: false,
7475
zoomPercentage: 100,
7576
showAccountHeader: false,
7677
wrapNotificationTitle: false,
@@ -168,12 +169,21 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
168169

169170
useEffect(() => {
170171
const colorMode = mapThemeModeToColorMode(settings.theme);
171-
const colorScheme = mapThemeModeToColorScheme(settings.theme);
172+
const colorScheme = mapThemeModeToColorScheme(
173+
settings.theme,
174+
settings.increaseContrast,
175+
);
172176

173177
setColorMode(colorMode);
174178
setDayScheme(colorScheme ?? DEFAULT_DAY_COLOR_SCHEME);
175179
setNightScheme(colorScheme ?? DEFAULT_NIGHT_COLOR_SCHEME);
176-
}, [settings.theme, setColorMode, setDayScheme, setNightScheme]);
180+
}, [
181+
settings.theme,
182+
settings.increaseContrast,
183+
setColorMode,
184+
setDayScheme,
185+
setNightScheme,
186+
]);
177187

178188
// biome-ignore lint/correctness/useExhaustiveDependencies: We only want fetchNotifications to be called for particular state changes
179189
useEffect(() => {

‎src/renderer/routes/__snapshots__/Settings.test.tsx.snap

Lines changed: 48 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/renderer/types.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ export type SettingsState = AppearanceSettingsState &
6868

6969
export interface AppearanceSettingsState {
7070
theme: Theme;
71+
increaseContrast: boolean;
7172
zoomPercentage: number;
7273
showAccountHeader: boolean;
7374
wrapNotificationTitle: boolean;
@@ -113,11 +114,9 @@ export interface GitifyState {
113114
export enum Theme {
114115
SYSTEM = 'SYSTEM',
115116
LIGHT = 'LIGHT',
116-
LIGHT_HIGH_CONTRAST = 'LIGHT_HIGH_CONTRAST',
117117
LIGHT_COLORBLIND = 'LIGHT_COLORBLIND',
118118
LIGHT_TRITANOPIA = 'LIGHT_TRITANOPIA',
119119
DARK = 'DARK',
120-
DARK_HIGH_CONTRAST = 'DARK_HIGH_CONTRAST',
121120
DARK_COLORBLIND = 'DARK_COLORBLIND',
122121
DARK_TRITANOPIA = 'DARK_TRITANOPIA',
123122
DARK_DIMMED = 'DARK_DIMMED',

‎src/renderer/utils/theme.test.ts

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,54 @@ import { mapThemeModeToColorMode, mapThemeModeToColorScheme } from './theme';
44
describe('renderer/utils/theme.ts', () => {
55
it('should map theme mode to github primer color mode', () => {
66
expect(mapThemeModeToColorMode(Theme.LIGHT)).toBe('day');
7-
expect(mapThemeModeToColorMode(Theme.LIGHT_HIGH_CONTRAST)).toBe('day');
87
expect(mapThemeModeToColorMode(Theme.LIGHT_COLORBLIND)).toBe('day');
98
expect(mapThemeModeToColorMode(Theme.LIGHT_TRITANOPIA)).toBe('day');
109
expect(mapThemeModeToColorMode(Theme.DARK)).toBe('night');
11-
expect(mapThemeModeToColorMode(Theme.DARK_HIGH_CONTRAST)).toBe('night');
1210
expect(mapThemeModeToColorMode(Theme.DARK_COLORBLIND)).toBe('night');
1311
expect(mapThemeModeToColorMode(Theme.DARK_TRITANOPIA)).toBe('night');
1412
expect(mapThemeModeToColorMode(Theme.DARK_DIMMED)).toBe('night');
1513
expect(mapThemeModeToColorMode(Theme.SYSTEM)).toBe('auto');
1614
});
1715

1816
it('should map theme mode to github primer color scheme', () => {
19-
expect(mapThemeModeToColorScheme(Theme.LIGHT)).toBe('light');
20-
expect(mapThemeModeToColorScheme(Theme.LIGHT_HIGH_CONTRAST)).toBe(
17+
expect(mapThemeModeToColorScheme(Theme.LIGHT, false)).toBe('light');
18+
expect(mapThemeModeToColorScheme(Theme.LIGHT, true)).toBe(
2119
'light_high_contrast',
2220
);
23-
expect(mapThemeModeToColorScheme(Theme.LIGHT_COLORBLIND)).toBe(
21+
expect(mapThemeModeToColorScheme(Theme.LIGHT_COLORBLIND, false)).toBe(
2422
'light_colorblind',
2523
);
26-
expect(mapThemeModeToColorScheme(Theme.LIGHT_TRITANOPIA)).toBe(
24+
expect(mapThemeModeToColorScheme(Theme.LIGHT_COLORBLIND, true)).toBe(
25+
'light_colorblind_high_contrast',
26+
);
27+
expect(mapThemeModeToColorScheme(Theme.LIGHT_TRITANOPIA, false)).toBe(
2728
'light_tritanopia',
2829
);
29-
expect(mapThemeModeToColorScheme(Theme.DARK)).toBe('dark');
30-
expect(mapThemeModeToColorScheme(Theme.DARK_HIGH_CONTRAST)).toBe(
30+
expect(mapThemeModeToColorScheme(Theme.LIGHT_TRITANOPIA, true)).toBe(
31+
'light_tritanopia_high_contrast',
32+
);
33+
expect(mapThemeModeToColorScheme(Theme.DARK, false)).toBe('dark');
34+
expect(mapThemeModeToColorScheme(Theme.DARK, true)).toBe(
3135
'dark_high_contrast',
3236
);
33-
expect(mapThemeModeToColorScheme(Theme.DARK_COLORBLIND)).toBe(
37+
expect(mapThemeModeToColorScheme(Theme.DARK_COLORBLIND, false)).toBe(
3438
'dark_colorblind',
3539
);
36-
expect(mapThemeModeToColorScheme(Theme.DARK_TRITANOPIA)).toBe(
40+
expect(mapThemeModeToColorScheme(Theme.DARK_COLORBLIND, true)).toBe(
41+
'dark_colorblind_high_contrast',
42+
);
43+
expect(mapThemeModeToColorScheme(Theme.DARK_TRITANOPIA, false)).toBe(
3744
'dark_tritanopia',
3845
);
39-
expect(mapThemeModeToColorScheme(Theme.DARK_DIMMED)).toBe('dark_dimmed');
40-
expect(mapThemeModeToColorScheme(Theme.SYSTEM)).toBe(null);
46+
expect(mapThemeModeToColorScheme(Theme.DARK_TRITANOPIA, true)).toBe(
47+
'dark_tritanopia_high_contrast',
48+
);
49+
expect(mapThemeModeToColorScheme(Theme.DARK_DIMMED, false)).toBe(
50+
'dark_dimmed',
51+
);
52+
expect(mapThemeModeToColorScheme(Theme.DARK_DIMMED, true)).toBe(
53+
'dark_dimmed_high_contrast',
54+
);
55+
expect(mapThemeModeToColorScheme(Theme.SYSTEM, false)).toBe(null);
4156
});
4257
});

0 commit comments

Comments
 (0)