Skip to content

feat(core): alias --destructive to the danger roles and move components off destructive utilities - #583

Open
wemra3 wants to merge 11 commits into
mainfrom
feat/destructive-danger-alias
Open

wemra3 wants to merge 11 commits into
mainfrom
feat/destructive-danger-alias

Conversation

@wemra3

@wemra3 wemra3 commented Oct 6, 2026 •

Copy link
Copy Markdown
Contributor

Follow-up to #569. Second step of the colour-role work: one red.

What this PR does

--destructive and --destructive-foreground become aliases of the danger roles (--danger-solid, --danger-contrast), and the shipped components stop using destructive utilities:

Use in components Before After
Error text (20 places) text-destructive text-danger-text
Button variant="destructive" bg-destructive text-white, dark:bg-destructive/60 bg-danger-solid text-danger-contrast, hover danger-solid-hover
Invalid borders and focus rings (Input, Textarea, Checkbox, Field, DateField, Button, DataTable toolbar) border-destructive, ring-destructive/20 (dark /40) border-danger-solid, ring-danger-solid/20 (dark /40)
Tints (CsvImporter error cells, error box, ActionPanel hover) bg-destructive/10, /5 bg-danger-surface
Static error box border border-destructive/50 border-danger-border

Names stay. Button variant="destructive", text-destructive, bg-destructive and border-destructive keep working and are not deprecated. They are the shadcn vocabulary.

cream, bloom and _template.css no longer set --destructive. Their values were identical to the default, so nothing changes visually. --destructive is on the DO NOT SET list now.

What changes for consumers

  • Dark-mode Button variant="destructive" is a full #dc2626 fill with white text (4.83:1). It was #f87171 at 60% opacity. The 60% trick existed because white text on #f87171 is 2.77:1; the solid role does not need it. Light mode is unchanged.
  • text-destructive now resolves to the solid. In dark mode that is #dc2626, 3.71:1 on the card, which is below 4.5:1 for text. For text, use text-danger-text (light #ce0c17, dark #ff9083). The migration entry says how to find these.
  • Invalid borders in dark mode go from #f87171 to #dc2626 (3.71:1, above the 3:1 non-text minimum). Invalid inputs keep the solid on purpose: the border role (step a6) is 1.67:1 on the card and would fail.
  • Themes that override --destructive no longer reach the shipped components. Override --danger-solid (and --danger-text, --danger-contrast, --danger-solid-hover) instead.

Screenshots (default palette, example app):

button-dark-before-after

Dark mode, default palette. Light mode is unchanged (#dc2626 before and after).

light dark
Button before #dc2626 #f87171 at 60%
Button after #dc2626 #dc2626

Not in this PR

  • cp-apps theme-tailor.css still overrides --destructive (2 lines), and the Theme Generator still emits it. Both stop reaching the components; they need to move to --danger-* on their side.
  • Consumer code that writes text-destructive (cp-apps 10 places, erp-kit 26) keeps working but gets the solid colour in dark mode. Migrating them to text-danger-text is a change in those repositories.
  • Menu.Item has no danger variant. The recipe given in tailor-professional-service/knowledge#94 (astw:text-destructive astw:data-highlighted:text-destructive on Menu.Item) drops to 3.71:1 in dark mode after this PR. Use text-danger-text instead. A Menu.Item danger variant, like shadcn's DropdownMenuItem variant="destructive", is a possible follow-up.
  • Docs examples outside the components that still show border-destructive (timeline, document-detail outlines) and the dated decisions/date-picker.md snippets.
  • The migration entry is labelled 1.18.0 on the assumption that Version Packages #579 (1.17.0) ships first. If this lands before Version Packages #579, it belongs under 1.17.0.

Checks

  • semantic-contrast.test.ts: both aliases resolve to the danger roles; danger solid is at least 3:1 over --card and --background in light and dark.
  • button.test.tsx: the destructive variant uses only bridged danger utilities.
  • 10 snapshot files updated, each a destructive to danger class swap only.
  • type-check, lint, fmt:check, test (2024), docs:check, build all pass.
  • Changeset: minor. Decision record: decisions/semantic-color-roles.md (Danger action row done, dated update).

🤖 Generated with Claude Code

Hiroki Uemura and others added 9 commits October 6, 2026 20:47
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
…date snapshots

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
@wemra3
wemra3 requested review from IzumiSy and interacsean October 6, 2026 12:00
@github-actions

github-actions Bot commented Oct 6, 2026 •

Copy link
Copy Markdown
Contributor

Code Metrics Report

main (403eebe) #583 (e2875b4) +/-
Coverage 88.1% 88.1% 0.0%
Test Execution Time 2m18s 1m34s -44s
Details
  |                     | main (403eebe) | #583 (e2875b4) | +/-  |
  |---------------------|----------------|----------------|------|
  | Coverage            |          88.1% |          88.1% | 0.0% |
  |   Files             |            207 |            207 |    0 |
  |   Lines             |           6178 |           6178 |    0 |
  |   Covered           |           5448 |           5448 |    0 |
+ | Test Execution Time |          2m18s |          1m34s | -44s |

Code coverage of files in pull request scope (72.4% → 72.4%, patch 100.0%)

Files Coverage +/- Patch Coverage Status
packages/core/src/components/action-panel/ActionPanel.tsx 100.0% 0.0% 100.0% modified
packages/core/src/components/ai-chat/chat-history.tsx 100.0% 0.0% - modified
packages/core/src/components/ai-chat/tool.tsx 100.0% 0.0% - modified
packages/core/src/components/appshell/appshell.tsx 78.3% 0.0% - modified
packages/core/src/components/button/button.tsx 100.0% 0.0% - modified
packages/core/src/components/checkbox/checkbox.tsx 100.0% 0.0% - modified
packages/core/src/components/csv-importer/CsvImporter.tsx 0.5% 0.0% - modified
packages/core/src/components/data-table/data-table.tsx 92.0% 0.0% - modified
packages/core/src/components/data-table/toolbar.tsx 78.5% 0.0% 100.0% modified
packages/core/src/components/date-field/date-input-group.tsx 84.4% 0.0% - modified
packages/core/src/components/field/field.tsx 100.0% 0.0% - modified
packages/core/src/components/input/input.tsx 100.0% 0.0% - modified
packages/core/src/components/internals/default-error-boundary/default-error-boundary.tsx 80.0% 0.0% - modified
packages/core/src/components/textarea/textarea.tsx 100.0% 0.0% - modified

Reported by octocov

Regenerate docs-manifest.json with docs:sync after the typography and
breadcrumb docs landed on main; no source conflicts.
@wemra3
wemra3 marked this pull request as ready for review October 8, 2026 00:21
@wemra3
wemra3 requested a review from a team as a code owner October 8, 2026 00:21
Resolve conflicts with the typography roles (#572): list both
--destructive* and --app-shell-type-* as inherited in theme.css and
_template.css, and regenerate docs-manifest.json with docs:sync.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant