curo/Business-Management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve button visibility and darken dark mode text further

Browse Source 
- 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>
This commit is contained in:
curo1305
2026-04-17 14:55:36 +02:00
parent 3c01f6eaef
commit 07c2428609
2 changed files with 35 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ui/button.tsx
+2 -2
View File
@@ -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",
},
frontend/src/styles/theme.css
+33 -1
View File
@@ -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;
}