feat: migrate to primer design tokens

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

package.json

@@ -140,6 +140,7 @@
     "@discordapp/twemoji": "15.1.0",
     "@electron/notarize": "2.5.0",
     "@primer/octicons-react": "19.14.0",
+    "@primer/primitives": "^10.3.4",
     "@primer/react": "36.27.0",
     "@testing-library/react": "16.2.0",
     "@types/jest": "29.5.14",

pnpm-lock.yaml

@@ -1,3 +1,18 @@
+/** GitHub Primer Design System */
+/* Size & Typography */
+@import "@primer/primitives/dist/css/base/size/size.css";
+@import "@primer/primitives/dist/css/base/typography/typography.css";
+@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/dark.css";
+@import "@primer/primitives/dist/css/functional/themes/dark-dimmed.css";
+
 html,
 body,
 #root {

src/renderer/App.css

@@ -35,7 +35,8 @@ function RequireAuth({ children }) {
 
 export const App = () => {
   return (
-    <ThemeProvider>
+    // TODO - Add support for setting color modes (dark_dimmed)
+    <ThemeProvider dayScheme="light" nightScheme="dark">
       <BaseStyles>
         <AppProvider>
           <Router>

src/renderer/App.tsx

@@ -41,7 +41,7 @@ describe('renderer/utils/theme.ts', () => {
   });
 
   it('should get color mode from theme', () => {
-    expect(getColorModeFromTheme(Theme.LIGHT)).toBe('light');
+    expect(getColorModeFromTheme(Theme.LIGHT)).toBe('day');
     expect(getColorModeFromTheme(Theme.DARK)).toBe('night');
     expect(getColorModeFromTheme(Theme.SYSTEM)).toBe('auto');
   });

src/renderer/utils/theme.test.ts

@@ -49,7 +49,7 @@ export function setTheme(theme?: Theme) {
 export function getColorModeFromTheme(theme: Theme): ColorModeWithAuto {
   switch (theme) {
     case Theme.LIGHT:
-      return 'light';
+      return 'day';
     case Theme.DARK:
       return 'night';
     default:

src/renderer/utils/theme.ts

@@ -10,22 +10,17 @@ const config: Config = {
         xxs: '0.625rem', // 10px
       },
       colors: {
-        /**
-         * Temporary solution until we migrate to using GitHub Primer Design Tokens Directly.
-         *
-         * See https://primer.style/foundations/primitives/color
-         */
         primer: {
-          attention: '#9a6700',
-          closed: '#cf222e',
-          done: '#8250df',
-          muted: '#59636e',
-          open: '#1f883d',
+          attention: 'var(--fgColor-attention)',
+          closed: 'var(--fgColor-closed)',
+          done: 'var(--fgColor-done)',
+          muted: 'var(--fgColor-muted)',
+          open: 'var(--fgColor-open)',
         },
         gitify: {
           background: 'var(--gitify-background)',
           font: 'var(--gitify-font)',
-          error: colors.red[500],
+          error: 'var(--fgColor-danger)',
           sidebar: '#24292e',
           footer: 'var(--gitify-footer)',
           accounts: {
@@ -39,12 +34,11 @@ const config: Config = {
             hover: 'var(--gitify-notifications-hover)',
           },
           tooltip: {
-            icon: colors.blue[500],
+            icon: 'var(--fgColor-accent)',
             popout: 'var(--gitify-tooltip-popout)',
           },
-          link: colors.blue[500],
+          link: 'var(--fgColor-link)',
           caution: colors.orange[600],
-          settings: colors.blue[600],
           pill: {
             rest: 'var(--gitify-pill-rest)',
             hover: 'var(--gitify-pill-hover)',