Uh oh!
There was an error while loading. Please reload this page.
fix(design-system): give the EmptyState card the border it only coloured - #1527
Merged
Conversation
`EmptyState` shipped its card recipe with `border-border` and no width utility. In Tailwind that sets a colour and nothing else, so the rendered border-width was 0 — the edge the author meant to draw never existed. What was actually outlining the card was incidental: the `0 0 0 1px var(--border)` ring inside `shadow-maka-panel`. That shadow is the floating-overlay family — mention popup, model picker, select popup, dialog — and EmptyState was its only in-page consumer, so the card was also casting a `0 14px 40px` popup shadow for no reason. This matters more than a normal missing hairline because the card has no fill contrast to fall back on. Measured live on the Skills market surface: the card composites to `oklch(1 0 0)` and the panel behind it is also `oklch(1 0 0)` — `bg-card/70` contributes nothing there, so the border is the only separation between card and page. Add the `border` width utility and drop the overlay shadow. One real hairline at the same token `.settingsRows` and the skill cards already use, instead of a colour that did nothing plus a ring that was covering for it. The sidebar's `.maka-session-empty-state` variant is unaffected — it strips border/background/shadow/padding with `!important` in empty-state.css. Checked the other `border-border` sites while here; the rest are correct (`border-b border-border`, `border border-border`). `item.tsx`'s `outline` variant looks like the same bug but is not — its base class carries `border border-transparent`, so the variant only needs to change the colour. Pinned by a new render test: the card class must carry a real `border`, must keep the colour on the token, and must not wear the overlay shadow. Gates: @maka/ui 253/253, desktop test + typecheck exit 0, format:check and knip clean.
Uh oh!
There was an error while loading. Please reload this page.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
EmptyState's card recipe was… rounded-md border-border bg-card/70 …— a border colour with no width utility. Tailwind renders that atborder-width: 0, so the edge never existed. Measured on the live Skills market surface before the fix:What was outlining the card was incidental — the
0 0 0 1px var(--border)ring insideshadow-maka-panel.Why it's worse than a normal missing hairline
The card has no fill contrast to fall back on. Measured in the same probe:
oklab(1 0 0 / 0.7)oklch(1 0 0)70% white composited over pure white is pure white.
bg-card/70was presumably written for a gray page plate (--surface-canvas), but this card sits on a panel that paints pure white. So the border isn't decoration here — it's the only thing separating the card from the page.How
Add the
borderwidth utility, and dropshadow-maka-panel.That shadow is the floating-overlay family — mention popup, model picker, select popup, dialog — and
EmptyStatewas its only in-page consumer, so the card was casting a popup's0 14px 40pxshadow as well as leaning on its ring for the missing border. After the fix there is exactly one 1px edge, on the same token.settingsRowsand.maka-skill-market-cardalready use.Verified live after the change:
borderWidth: 1px,boxShadow: none.Scope checks
.maka-session-empty-statevariant is unaffected —empty-state.cssstrips border/background/shadow/padding there with!important.border-bordersites: the rest are correct (border-b border-border,border border-border).item.tsx'soutlinevariant looks like the same bug but isn't — its base class carriesborder border-transparent, so the variant only overrides the colour.Also in scope, and already done
The knip leftover from #1515 (
src/overlay/permission-overlay{,-preload}.tsunreachable) is already fixed on main — both files are inknip.json's desktopentrylist andnpx knip --workspace apps/desktopis clean. Nothing to do.Tests
New render contract (
packages/ui/src/__tests__/empty-state.test.ts): the card class must carry a realborder, must keep the colour on the token, must not wear the overlay shadow, and theinlinevariant must stay chrome-free.Gates:
@maka/ui253/253 · desktoptestandtypecheckexit 0 ·format:checkclean ·knip --workspace apps/desktopclean.