# Pico CSS — Gotchas & Notes ## [role=button] clobbers --pico-color Pico's stylesheet includes this rule: ```css [role=button], [type=button], button, ... { --pico-color: var(--pico-primary-inverse); ... } ``` In light mode, `--pico-primary-inverse` is `#fff`. This means **any element with `role="button"` will have white text by default**, regardless of its background. Children inherit this, making text invisible on white/light card backgrounds. **Fix:** On the element itself, reset the variable and set an explicit color: ```css .your-element { --pico-color: initial; color: var(--pico-contrast); /* #181c25 light / #dfe3eb dark — always legible */ } ``` **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 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. This affects any `