refactor: update styling and configuration for Tauri

afonsojramos · afonsojramos · commit e2e8a22ea498 · 2025-12-29T00:47:02.000Z
- Update App.css for Tauri WebView
- Add theme.css for CSS custom properties
- Update Tailwind config
- Update index.html for Tauri
diff --git a/index.html b/index.html
@@ -30,7 +30,7 @@
   </head>
 
   <body>
-    <div id="root" class="bg-gitify-background"></div>
+    <div id="root"></div>
     <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/src/App.css b/src/App.css
@@ -4,6 +4,10 @@
 /** GitHub Primer Design System */
 @import "@primer/css/dist/primer.css";
 
+/** Tailwind CSS Configuration */
+@config "../tailwind.config.ts";
+
+
 html,
 body,
 #root {
diff --git a/src/theme.css b/src/theme.css
@@ -0,0 +1,20 @@
+/** Gitify Theme Variables */
+[data-color-mode="light"] {
+  --gitify-background: var(--bgColor-default, #ffffff);
+  --gitify-scrollbar-track: #f1f5f9;
+  --gitify-scrollbar-thumb: #d1d5db;
+  --gitify-scrollbar-thumb-hover: #9ca3af;
+  --gitify-counter-primary: #93c5fd;
+  --gitify-counter-secondary: #e5e7eb;
+  --gitify-counter-text: #1f2937;
+}
+
+[data-color-mode="dark"] {
+  --gitify-background: var(--bgColor-muted, #0d1117);
+  --gitify-scrollbar-track: #111827;
+  --gitify-scrollbar-thumb: #374151;
+  --gitify-scrollbar-thumb-hover: #4b5563;
+  --gitify-counter-primary: #60a5fa;
+  --gitify-counter-secondary: #4b5563;
+  --gitify-counter-text: #f3f4f6;
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,5 +1,4 @@
 import type { Config } from 'tailwindcss';
-import colors from 'tailwindcss/colors';
 
 const sidebarWidth = '2.5rem'; // 40px
 
@@ -19,11 +18,12 @@ const config: Config = {
       },
       colors: {
         gitify: {
+          background: 'var(--gitify-background)',
           font: 'var(--fgColor-default)',
           sidebar: '#24292e',
           footer: 'var(--bgColor-neutral-muted)',
 
-          caution: colors.orange[600],
+          caution: '#ea580c', // Tailwind orange-600
           error: 'var(--fgColor-danger)',
           link: 'var(--fgColor-link)',
           input: {
@@ -70,35 +70,8 @@ const config: Config = {
       },
     },
   },
-  plugins: [
-    ({ addBase }) => {
-      // TODO - ideally we would use GitHub Primer Design Tokens instead of TailwindCSS
-      addBase({
-        '[data-color-mode="light"]': {
-          '--gitify-background': 'var(--bgColor-default)',
-
-          '--gitify-scrollbar-track': colors.gray[100],
-          '--gitify-scrollbar-thumb': colors.gray[300],
-          '--gitify-scrollbar-thumb-hover': colors.gray[400],
-
-          '--gitify-counter-primary': colors.blue[300],
-          '--gitify-counter-secondary': colors.gray[200],
-          '--gitify-counter-text': colors.gray[800],
-        },
-        '[data-color-mode="dark"]': {
-          '--gitify-background': 'var(--bgColor-muted)',
-
-          '--gitify-scrollbar-track': colors.gray[900],
-          '--gitify-scrollbar-thumb': colors.gray[700],
-          '--gitify-scrollbar-thumb-hover': colors.gray[600],
-
-          '--gitify-counter-primary': colors.blue[400],
-          '--gitify-counter-secondary': colors.gray[600],
-          '--gitify-counter-text': colors.gray[100],
-        },
-      });
-    },
-  ],
+  // Note: CSS variables for gitify-* are defined in App.css for Tailwind v4 compatibility
+  plugins: [],
 };
 
 export default config;
