From 2f442862af0ba4874b7e2c2fb809bd265c046403 Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Sat, 7 Mar 2026 15:58:38 +0100
Subject: [PATCH] fix(css): fix 10 design system violations in component
 classes

- .widget-title: font-bold -> font-semibold
- .repo-card: add shadow-sm
- .fab-menu-item: rounded-xl -> rounded-lg, shadow-md -> shadow-sm
- .p-category: hover border surface -> accent
- .widget: remove mb-4 (conflicts with space-y containers)
- Remove duplicate focus-visible system (outline vs ring)
- Remove duplicate time monospace rule
- .post-type-dropdown: prefers-color-scheme -> .dark class
- .save-later-btn/.share-post-btn: add dark mode variants

Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
---
 css/tailwind.css | 68 +++++++++++++++++++++++-------------------------
 1 file changed, 32 insertions(+), 36 deletions(-)

diff --git a/css/tailwind.css b/css/tailwind.css
index fe7d4b4..8b34c53 100644
--- a/css/tailwind.css
+++ b/css/tailwind.css
@@ -332,7 +332,7 @@
 
   /* Category tags (post metadata pills) */
   .p-category {
-    @apply inline-block px-2 py-0.5 text-xs bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300 rounded border border-surface-200 dark:border-surface-700 hover:border-surface-400 dark:hover:border-surface-500 transition-colors;
+    @apply inline-block px-2 py-0.5 text-xs bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300 rounded border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors;
   }
 
   /* Inline hashtags in post content — styled as subtle links, not pills */
@@ -358,7 +358,7 @@
 
   /* GitHub components */
   .repo-card {
-    @apply p-4 border border-surface-200 dark:border-surface-700 rounded-lg;
+    @apply p-4 border border-surface-200 dark:border-surface-700 rounded-lg shadow-sm;
   }
 
   .repo-meta {
@@ -391,11 +391,11 @@
 
   /* Widget cards */
   .widget {
-    @apply p-4 mb-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden;
+    @apply p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden;
   }
 
   .widget-title {
-    @apply font-bold text-lg mb-4;
+    @apply font-semibold text-lg mb-4;
   }
 
   /* Collapsible widget wrapper */
@@ -495,17 +495,6 @@
   }
 }
 
-/* Focus states */
-@layer base {
-  a:focus-visible,
-  button:focus-visible,
-  input:focus-visible,
-  textarea:focus-visible,
-  select:focus-visible {
-    @apply outline-2 outline-offset-2 outline-accent-500;
-  }
-}
-
 /* Active states — subtle press feedback on buttons */
 @layer base {
   button:active:not(:disabled),
@@ -548,7 +537,7 @@
   }
 
   .fab-menu-item {
-    @apply flex items-center gap-3 px-4 py-3 rounded-xl bg-surface-50 dark:bg-surface-800 shadow-md hover:shadow-lg border border-surface-200 dark:border-surface-700 text-surface-700 dark:text-surface-200 hover:text-accent-600 dark:hover:text-accent-400 no-underline transition-all duration-150 text-sm font-medium;
+    @apply flex items-center gap-3 px-4 py-3 rounded-lg bg-surface-50 dark:bg-surface-800 shadow-sm border border-surface-200 dark:border-surface-700 text-surface-700 dark:text-surface-200 hover:text-accent-600 dark:hover:text-accent-400 no-underline transition-all duration-150 text-sm font-medium;
   }
 
   .fab-menu-divider {
@@ -568,13 +557,6 @@
   }
 }
 
-/* Dates — monospace for technical texture (system.md: every <time> gets font-mono) */
-@layer base {
-  time {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  }
-}
-
 /* Apply content-visibility to images and post items for performance */
 @layer base {
   /* Responsive typography */
@@ -907,6 +889,14 @@ body[data-indiekit-auth="true"] .save-later-btn:hover {
   pointer-events: none;
 }
 
+.dark body[data-indiekit-auth="true"] .save-later-btn {
+  color: #9ca3af;
+}
+.dark body[data-indiekit-auth="true"] .save-later-btn:hover {
+  border-color: #4b5563;
+  color: #60a5fa;
+}
+
 /* Share Post buttons — hidden until auth confirmed */
 .share-post-btn {
   display: none;
@@ -931,6 +921,14 @@ body[data-indiekit-auth="true"] .share-post-btn:hover {
   color: #10b981;
 }
 
+.dark body[data-indiekit-auth="true"] .share-post-btn {
+  color: #9ca3af;
+}
+.dark body[data-indiekit-auth="true"] .share-post-btn:hover {
+  border-color: #4b5563;
+  color: #10b981;
+}
+
 /* Post type dropdown */
 .post-type-dropdown {
   display: none;
@@ -970,17 +968,15 @@ body[data-indiekit-auth="true"] .share-post-btn:hover {
   color: #10b981;
 }
 
-/* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .post-type-dropdown {
-    background: #1f2937;
-    border-color: #374151;
-  }
-  .post-type-dropdown-item {
-    color: #d1d5db;
-  }
-  .post-type-dropdown-item:hover {
-    background: #374151;
-    color: #34d399;
-  }
+/* Dark mode — class-based (matches site's darkMode: "class" config) */
+.dark .post-type-dropdown {
+  background: #1f2937;
+  border-color: #374151;
+}
+.dark .post-type-dropdown-item {
+  color: #d1d5db;
+}
+.dark .post-type-dropdown-item:hover {
+  background: #374151;
+  color: #34d399;
 }