## Thinking Path
> - Paperclip is the open source app people use to manage AI agents for
work.
> - The board UI uses shadcn theme tokens from `ui/src/index.css`.
> - Delete and remove dialogs confirm with a red button: `bg-destructive
text-destructive-foreground`.
> - In the light theme, `--destructive-foreground` has the same value as
`--destructive`. The label is red text on a red fill, so it is not
visible.
> - Operators cannot read the button that deletes data or removes a
connection.
> - This pull request sets the light `--destructive-foreground` to the
near-white value that the dark theme already uses.
> - The benefit is that every destructive confirm button shows a
readable label in both themes.
## Linked Issues or Issue Description
Fixes#14327
I searched open and closed PRs for `destructive-foreground`, "Remove
connection" and related terms. I found no PR that changes this token.
## What Changed
- `ui/src/index.css`: in `:root`, `--destructive-foreground` changes
from `oklch(0.577 0.245 27.325)` (the same as `--destructive`) to
`oklch(0.985 0 0)`. This is the value in `.dark`.
- Added `ui/src/components/DestructiveThemeTokens.test.ts`. The test
converts both tokens from OKLCH to sRGB and computes the WCAG contrast
ratio. `:root` must reach 4.5:1 (AA for normal text). `.dark` must reach
3:1, because it keeps the brighter red chosen in the gallery review
(about 3.6:1 today).
The fix applies to all five buttons that use
`text-destructive-foreground`: remove connection (`Browse.tsx`,
`Connections.tsx`), delete folder (`FolderControls.tsx`), delete
environment (`CompanyEnvironments.tsx`) and remove chat endpoint
(`ChatEndpointDetail.tsx`). No other file uses the token.
## Verification
- `pnpm exec vitest run src/components/DestructiveThemeTokens.test.ts`
in `ui`: 2 tests pass. The light theme contrast is about 4.8:1.
- Before the fix, the test fails for `:root` (1:1, red on red). With a
light gray foreground `oklch(0.88 0 0)` it also fails (3.3:1 < 4.5:1).
- Manual check on a self-hosted instance in the light theme: Apps →
connection → **Remove connection** showed a red button with no visible
label. After the fix, the label is white and readable.
Before and after, light theme (the same classes as the confirm button:
`bg-destructive text-destructive-foreground`):
<img
src="https://gist.githubusercontent.com/gentslava/3aa0d498e2475dd44e12bed11e7d7862/raw/c793570ebd416fe04cc390df8554515b4207590d/remove-connection-before-after.png"
alt="Remove connection button before and after the fix" width="520">
## Risks
- Low risk. The change is one token in the light theme. Only the five
confirm buttons above read `--destructive-foreground`.
## Model Used
- Claude Opus 5.5 (`claude-opus-5-5`) in Claude Code, with tool use
(shell, file edits). It found the cause, wrote the fix and the test, and
wrote this description.
## Checklist
- [x] I have included a thinking path that traces from project context
to this change
- [x] I have specified the model used (with version and capability
details)
- [x] I have checked ROADMAP.md and confirmed this PR does not duplicate
planned core work
- [x] I have searched GitHub for duplicate or related PRs and linked
them above
- [x] I have either (a) linked existing issues with `Fixes: #` / `Closes
#` / `Refs #` OR (b) described the issue in-PR following the relevant
issue template
- [x] I have not referenced internal/instance-local Paperclip issues or
links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip`
URLs)
- [x] My branch name describes the change (e.g. `docs/...`, `fix/...`)
and contains no internal Paperclip ticket id or instance-derived details
- [x] I have run tests locally and they pass
- [x] I have added or updated tests where applicable
- [x] I have updated relevant documentation to reflect my changes
- [x] I have considered and documented any risks above
- [x] All Paperclip CI gates are green
- [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups
- [x] I will address all Greptile and reviewer comments before
requesting merge
@cryppadotta @devinfoley a tiny one-line theme fix: the delete buttons
in the light theme are red-on-red right now, so people can't see what
they are about to click. Would be great to get it in when you have a
minute 🙏🤖 Generated with [Claude Code](https://claude.com/claude-code)
---------
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
