From 07c2428609e850556ad37648114f9192cb39820b Mon Sep 17 00:00:00 2001
From: curo1305 <curo1305@proton.me>
Date: Fri, 17 Apr 2026 14:55:36 +0200
Subject: [PATCH] Improve button visibility and darken dark mode text further
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Dark mode text-primary: slate-200 → slate-300 (#CBD5E1)
- Ghost button: add border + explicit text colour so it is always
  visible as a button (not just on hover)
- Outline button: stronger hover border for more feedback
- button:not([class]): global baseline for unstyled <button> elements
  (Tailwind Preflight strips all native appearance; this restores a
  visible border, bg-surface fill, and rounded corners so buttons in
  older pages are always recognisable)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/ui/button.tsx |  4 ++--
 frontend/src/styles/theme.css         | 34 ++++++++++++++++++++++++++-
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index 21eb0e2..1bbd23b 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -11,9 +11,9 @@ const buttonVariants = cva(
         default:
           "bg-primary text-white hover:bg-primary-hover",
         ghost:
-          "hover:bg-muted/20 hover:text-foreground",
+          "border border-border text-foreground hover:bg-muted/20",
         outline:
-          "border border-border bg-transparent hover:bg-muted/20 text-foreground",
+          "border border-border bg-transparent text-foreground hover:bg-muted/20 hover:border-foreground/40",
         destructive:
           "bg-red-600 text-white hover:bg-red-700",
       },
diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css
index 5ad28f5..e71a6b6 100644
--- a/frontend/src/styles/theme.css
+++ b/frontend/src/styles/theme.css
@@ -40,7 +40,7 @@
   --color-border:        51 65 85;     /* #334155  slate-700 */
 
   /* Text */
-  --color-text-primary:  226 232 240;  /* #E2E8F0  slate-200 */
+  --color-text-primary:  203 213 225;  /* #CBD5E1  slate-300 */
   --color-text-muted:    148 163 184;  /* #94A3B8  slate-400 */
 }
 
@@ -58,3 +58,35 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
 }
+
+/* ── Unstyled <button> elements ─────────────────────────────────────────────
+   Tailwind Preflight strips all native button appearance. Any <button> that
+   has no Tailwind className (i.e. the older inline-styled pages) gets a
+   visible baseline so it is always recognisable as a button.
+   ────────────────────────────────────────────────────────────────────────── */
+
+button:not([class]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgb(var(--color-border));
+  border-radius: var(--radius);
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  background-color: rgb(var(--color-surface));
+  color: rgb(var(--color-text-primary));
+  cursor: pointer;
+  transition: background-color 150ms, border-color 150ms;
+}
+
+button:not([class]):hover:not(:disabled) {
+  background-color: rgb(var(--color-text-muted) / 0.12);
+  border-color: rgb(var(--color-text-muted) / 0.5);
+}
+
+button:not([class]):disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}