Improve button visibility and darken dark mode text further
- 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:
@@ -11,9 +11,9 @@ const buttonVariants = cva(
|
|||||||
default:
|
default:
|
||||||
"bg-primary text-white hover:bg-primary-hover",
|
"bg-primary text-white hover:bg-primary-hover",
|
||||||
ghost:
|
ghost:
|
||||||
"hover:bg-muted/20 hover:text-foreground",
|
"border border-border text-foreground hover:bg-muted/20",
|
||||||
outline:
|
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:
|
destructive:
|
||||||
"bg-red-600 text-white hover:bg-red-700",
|
"bg-red-600 text-white hover:bg-red-700",
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -40,7 +40,7 @@
|
|||||||
--color-border: 51 65 85; /* #334155 slate-700 */
|
--color-border: 51 65 85; /* #334155 slate-700 */
|
||||||
|
|
||||||
/* Text */
|
/* 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 */
|
--color-text-muted: 148 163 184; /* #94A3B8 slate-400 */
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -58,3 +58,35 @@ body {
|
|||||||
sans-serif;
|
sans-serif;
|
||||||
-webkit-font-smoothing: antialiased;
|
-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;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user