Files
PaperClipAI/ui
scotttongandClaude Opus 5 48adddb1f8 fix(markdown): separate the code block from the agent bubble in light mode
The code block used --muted. Inside an agent bubble that is the wrong
value: --bubble-agent is oklch(0.97 0 0) in light, which is exactly
--muted. Block and bubble painted the same fill, so the block vanished
and the whole comment read as one flat gray slab. Dark hid the fault
because the bubble is oklch(0.185 0 0) and the block oklch(0.269 0 0).

No fixed token fixes this. The block renders on the page AND inside
bubbles, and --bubble-agent changes per variant: "former" is
oklch(0.955 0 0), and "hairline" is var(--background) itself. Any fixed
choice collides with one of those surfaces.

Use a translucent tint instead. --code-surface shifts whatever is beneath
it rather than replacing it, so one value separates on the page and in
every bubble variant. Light darkens 5% toward the ink; dark lifts 9%.

Add tests: the surface must be a color-mix tint defined in both modes,
and the block must never pin itself to --muted or --bubble-agent.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-17 22:22:21 -07:00
..

@paperclipai/ui

Published static assets for the Paperclip board UI.

What gets published

The npm package contains the production build under dist/. It does not ship the UI source tree or workspace-only dependencies.

Storybook

Storybook config, stories, and fixtures live under ui/storybook/.

pnpm --filter @paperclipai/ui storybook
pnpm --filter @paperclipai/ui build-storybook

Typical use

Install the package, then serve or copy the built files from node_modules/@paperclipai/ui/dist.