feat: migrate to primer design tokens

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

Author: setchy

src/renderer/components/notifications/NotificationRow.tsx

@@ -88,7 +88,7 @@ export const NotificationRow: FC<INotificationRow> = ({
     <div
       id={notification.id}
       className={cn(
-        'group flex border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notification-border bg-gitify-notification-rest hover:bg-gitify-notification-hover',
+        'group flex border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notification-border hover:bg-gitify-notification-hover',
         (isAnimated || animateExit) &&
           'translate-x-full opacity-0 transition duration-[350ms] ease-in-out',
         (isRead || showAsRead) && Opacity.READ,

src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap

@@ -145,10 +145,10 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
 
   useEffect(() => {
     const mode = getColorModeFromTheme(settings.theme);
-
     setColorMode(mode);
+
     setTheme(settings.theme); // TODO - Replace fully with Primer design tokens and components
-  }, [settings.theme]);
+  }, [settings.theme, setColorMode]);
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: We only want fetchNotifications to be called for account changes
   useEffect(() => {

src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap

@@ -11,7 +11,7 @@ const config: Config = {
       },
       colors: {
         gitify: {
-          font: 'var(--gitify-font)',
+          font: 'var(--fgColor-default)',
           background: 'var(--gitify-background)',
           sidebar: '#24292e',
           footer: 'var(--gitify-footer)',
@@ -36,9 +36,8 @@ const config: Config = {
           repository: 'var(--gitify-repository)',
 
           notification: {
-            border: 'var(--gitify-notification-border)',
-            rest: 'var(--gitify-notification-rest)',
-            hover: 'var(--gitify-notification-hover)',
+            border: 'var(--control-bgColor-hover)',
+            hover: 'var(--control-bgColor-hover)',
             pill: {
               rest: 'var(--gitify-notification-pill-rest)',
               hover: 'var(--gitify-notification-pill-hover)',
@@ -60,7 +59,6 @@ const config: Config = {
     ({ addBase }) => {
       addBase({
         ':root': {
-          '--gitify-font': colors.gray[700],
           '--gitify-background': colors.white,
           '--gitify-footer': colors.gray[200],
 
@@ -69,9 +67,6 @@ const config: Config = {
 
           '--gitify-repository': colors.gray[100],
 
-          '--gitify-notification-border': colors.gray[100],
-          '--gitify-notification-rest': colors.white,
-          '--gitify-notification-hover': colors.gray[100],
           '--gitify-notification-pill-rest': colors.gray[100],
           '--gitify-notification-pill-hover': colors.gray[200],
 
@@ -80,7 +75,6 @@ const config: Config = {
           '--gitify-scrollbar-thumb-hover': colors.gray[500],
         },
         '.dark': {
-          '--gitify-font': colors.gray[100],
           '--gitify-background': '#161b22',
           '--gitify-footer': '#000209',
 
@@ -89,9 +83,6 @@ const config: Config = {
 
           '--gitify-repository': '#090e15',
 
-          '--gitify-notification-border': '#090e15',
-          '--gitify-notification-rest': '#161b22',
-          '--gitify-notification-hover': '#090e15',
           '--gitify-notification-pill-rest': colors.gray[800],
           '--gitify-notification-pill-hover': colors.gray[700],