falkan/dickloads
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: correct ghost button hover gotcha — must override CSS vars, not just color

Browse Source
This commit is contained in:
Falkan
2026-03-17 18:01:12 -04:00
parent 6e992bbfae
commit e4a989046f
1 changed files with 21 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
PICO_CSS.md
View File

@@ -24,33 +24,38 @@ In light mode, `--pico-primary-inverse` is `#fff`. This means **any element with
**Alternative:** Remove `role="button"` and use `tabindex="0"` + keyboard handlers only, avoiding the Pico button rule entirely. Only do this if button semantics aren't needed for accessibility. **Alternative:** Remove `role="button"` and use `tabindex="0"` + keyboard handlers only, avoiding the Pico button rule entirely. Only do this if button semantics aren't needed for accessibility.
## Plain buttons disappear on hover in light/Dan mode ## Plain/ghost buttons disappear on hover in light/Dan mode
Pico's button hover rule sets `--pico-color: var(--pico-primary-inverse)` (i.e. `#fff`) on hover, making the text white. If your button has a transparent or white background — e.g. a "plain" / ghost-style button — the text becomes invisible. Pico's button hover rule sets **both** CSS custom properties **and** computed values:
This affects any `<button>` element, not just `[role=button]`. The `plain` class (or similar resets) strips Pico's background/border, but **does not prevent Pico from overriding the text color on hover**.
**Symptom:** button text vanishes on hover in light or Dan mode, visible in dark mode (where the background is already dark).
**Fix:** Use `!important` on hover to override Pico's specificity, and also explicitly reset the background so you're sure nothing sneaks in:
```css ```css
.my-plain-button:not(:disabled):hover { button:is(:hover,:active,:focus) {
color: var(--pico-color) !important; --pico-background-color: var(--pico-primary-hover-background);
background: transparent; --pico-border-color: var(--pico-primary-hover-border);
--pico-color: var(--pico-primary-inverse); /* #fff in light mode */
} }
``` ```
Or, if you want a specific non-body text color on hover: If your button has a transparent or white background — e.g. a ghost/plain-style button — the text becomes invisible because `--pico-primary-inverse` is `#fff` in light mode.
**Important:** Overriding only `color: ... !important` is **not enough**, because Pico sets `--pico-color` as a CSS variable that other rules may read. You must override all three custom properties *and* the corresponding computed properties simultaneously.
**Symptom:** ghost button text vanishes on hover in light or Dan mode (background goes blue, text goes white). Works fine in dark mode because the dark background makes white text readable.
**Fix:** Override all Pico button hover variables explicitly:
```css ```css
.my-plain-button:not(:disabled):hover { .my-ghost-button:not(:disabled):hover {
color: var(--pico-contrast) !important; /* always legible */ --pico-color: var(--pico-contrast) !important; /* near-black in light, near-white in dark */
background: transparent; --pico-background-color: transparent !important;
--pico-border-color: var(--pico-contrast) !important;
color: var(--pico-contrast) !important;
background: transparent !important;
border-color: var(--pico-contrast) !important;
} }
``` ```
**Do not** rely on Pico's hover cascade for plain/ghost buttons — always override explicitly. Use `--pico-contrast` (not `--pico-color`) as the hover text color — it's `#181c25` in light mode and `#dfe3eb` in dark mode, so it's always legible against the page background regardless of theme.
## Palette overrides must be scoped to light mode ## Palette overrides must be scoped to light mode