shadcn uses `bg-accent` for its SUBTLE surfaces — dropdown item hover, command row selection, ghost and outline button hover, the dialog close affordance. The brand colour in shadcn is `primary`. PIG's Tailwind config mapped `accent` to `--accent`, which is the brand. That inverted the meaning, so every shadcn hover and selection state painted a full-strength brand block. With the monochrome "pig" palette in dark mode the brand is near-white, so a selected command row rendered as a white slab against a near-black sheet. Measured before the change: selected row rgb(250,250,250) on a rgb(9,9,11) body. `accent` now aliases `--accent-subtle` and `accent-foreground` aliases `--accent-fg`, which is what those tokens were created for. The eleven places where PIG's own components wanted a solid brand fill — filled chips, selected card borders, progress bars — move to `primary`, which still resolves to `--accent`. A `brand` alias is added for clarity. After: selected row rgb(39,39,42) in dark and rgb(244,244,245) in light, both a subtle tint above the body; the pipeline's active stage chip stays a solid rgb(250,250,250) fill, unchanged. Found by opening overlays, which earlier screenshot sweeps never did — every route had been checked, but a dropdown or a command palette only misbehaves once it is open. Worth remembering: page-level sweeps do not exercise portals. Typecheck clean, 135 unit tests and e2e green, CSP hash unchanged, 0px horizontal overflow across 12 routes at 393px and 1440px. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -140,6 +140,14 @@ conflict on, do an existence check instead.
|
||||
flag set to false was silently on. Use the `envBoolean` helper in
|
||||
`apps/api/src/lib/config.ts`.
|
||||
|
||||
**shadcn's `accent` is a SUBTLE surface, not the brand.** shadcn uses
|
||||
`bg-accent` for hover, focus and selected states — dropdown items, command
|
||||
rows, ghost buttons. The brand is `primary`. In `tailwind.config.js`, `accent`
|
||||
is therefore aliased to `--accent-subtle` and `primary` to `--accent`. Use
|
||||
`bg-primary` for a solid brand fill; never `bg-accent`. Mapping them the other
|
||||
way makes every hover state paint a full-strength brand block, which in dark
|
||||
mode with the monochrome palette is a glaring white slab.
|
||||
|
||||
**Grid and flex children need `min-w-0`.** They default to
|
||||
`min-width: auto`, meaning they refuse to shrink below their content — and a
|
||||
`tabular-nums` figure, a `whitespace-nowrap` badge or a `truncate` title is all
|
||||
|
||||
Reference in New Issue
Block a user