chore(config): Switch to Tailwind v4 CSS config

assets/css/main.css

@@ -0,0 +1,69 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --text-xxs: 0.625rem;
+
+  --color-gitify-font: var(--fgColor-default);
+  --color-gitify-background: var(--bgColor-muted);
+  --color-gitify-sidebar: #24292e;
+  --color-gitify-footer: var(--bgColor-neutral-muted);
+  --color-gitify-caution: var(--color-orange-600);
+  --color-gitify-error: var(--fgColor-danger);
+  --color-gitify-link: var(--fgColor-link);
+
+  --color-gitify-input-rest: var(--control-bgColor-rest);
+  --color-gitify-input-focus: var(--control-bgColor-active);
+
+  --color-gitify-icon-attention: var(--fgColor-attention);
+  --color-gitify-icon-closed: var(--fgColor-closed);
+  --color-gitify-icon-done: var(--fgColor-done);
+  --color-gitify-icon-muted: var(--fgColor-muted);
+  --color-gitify-icon-open: var(--fgColor-open);
+
+  --color-gitify-accounts: var(--bgColor-neutral-muted);
+
+  --color-gitify-account-rest: var(--control-bgColor-active);
+  --color-gitify-account-error: var(--bgColor-danger-emphasis);
+
+  --color-gitify-repository: var(--control-bgColor-disabled);
+
+  --color-gitify-notification-border: var(--borderColor-disabled);
+  --color-gitify-notification-hover: var(--control-bgColor-hover);
+
+  --color-gitify-notification-pill-hover: var(--control-bgColor-active);
+
+  --color-gitify-tooltip-icon: var(--fgColor-accent);
+  --color-gitify-tooltip-popout: var(--bgColor-disabled);
+
+  --gitify-scrollbar-track: var(--color-gray-100);
+  --gitify-scrollbar-thumb: var(--color-gray-300);
+  --gitify-scrollbar-thumb-hover: var(--color-gray-400);
+}
+
+@layer dark {
+  @theme {
+    --gitify-scrollbar-track: var(--color-gray-900);
+    --gitify-scrollbar-thumb: var(--color-gray-700);
+    --gitify-scrollbar-thumb-hover: var(--color-gray-600);
+  }
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}

src/renderer/App.css

@@ -23,7 +23,55 @@
 @import "@primer/primitives/dist/css/functional/themes/dark-tritanopia.css";
 
 /** Tailwind CSS Configuration */
-@config '../../tailwind.config.ts';
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --text-xxs: 0.625rem;
+
+  --color-gitify-font: var(--fgColor-default);
+  --color-gitify-background: var(--bgColor-muted);
+  --color-gitify-sidebar: #24292e;
+  --color-gitify-footer: var(--bgColor-neutral-muted);
+  --color-gitify-caution: var(--color-orange-600);
+  --color-gitify-error: var(--fgColor-danger);
+  --color-gitify-link: var(--fgColor-link);
+
+  --color-gitify-input-rest: var(--control-bgColor-rest);
+  --color-gitify-input-focus: var(--control-bgColor-active);
+
+  --color-gitify-icon-attention: var(--fgColor-attention);
+  --color-gitify-icon-closed: var(--fgColor-closed);
+  --color-gitify-icon-done: var(--fgColor-done);
+  --color-gitify-icon-muted: var(--fgColor-muted);
+  --color-gitify-icon-open: var(--fgColor-open);
+
+  --color-gitify-accounts: var(--bgColor-neutral-muted);
+
+  --color-gitify-account-rest: var(--control-bgColor-active);
+  --color-gitify-account-error: var(--bgColor-danger-emphasis);
+
+  --color-gitify-repository: var(--control-bgColor-disabled);
+
+  --color-gitify-notification-border: var(--borderColor-disabled);
+  --color-gitify-notification-hover: var(--control-bgColor-hover);
+
+  --color-gitify-notification-pill-hover: var(--control-bgColor-active);
+
+  --color-gitify-tooltip-icon: var(--fgColor-accent);
+  --color-gitify-tooltip-popout: var(--bgColor-disabled);
+
+  --gitify-scrollbar-track: var(--color-gray-100);
+  --gitify-scrollbar-thumb: var(--color-gray-300);
+  --gitify-scrollbar-thumb-hover: var(--color-gray-400);
+}
+
+@layer dark {
+  @theme {
+    --gitify-scrollbar-track: var(--color-gray-900);
+    --gitify-scrollbar-thumb: var(--color-gray-700);
+    --gitify-scrollbar-thumb-hover: var(--color-gray-600);
+  }
+}
 
 html,
 body,