Merge branch 'main' into 01-24-chore_switch_to_tailwind_v4_css_config

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

Author: setchy

package.json

@@ -142,7 +142,7 @@
     "@primer/octicons-react": "19.14.0",
     "@primer/primitives": "10.3.4",
     "@primer/react": "36.27.0",
-    "@tailwindcss/postcss": "^4.0.0",
+    "@tailwindcss/postcss": "4.0.0",
     "@testing-library/react": "16.2.0",
     "@types/jest": "29.5.14",
     "@types/node": "22.10.9",

pnpm-lock.yaml

@@ -1,3 +1,6 @@
+/** Tailwind CSS */
+@import "tailwindcss";
+
 /** GitHub Primer Design System */
 /* Size & Typography */
 @import "@primer/primitives/dist/css/base/size/size.css";
@@ -19,6 +22,57 @@
 @import "@primer/primitives/dist/css/functional/themes/dark-high-contrast.css";
 @import "@primer/primitives/dist/css/functional/themes/dark-tritanopia.css";
 
+/** Tailwind CSS Configuration */
+@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,
 #root {

src/renderer/App.css

@@ -1,7 +1,6 @@
 import { createRoot } from 'react-dom/client';
 
 import 'nprogress/nprogress.css';
-import '../../assets/css/main.css';
 import { App } from './App';
 
 const container = document.getElementById('root');