Skip to content

Commit 37eb4c1

Browse files
wemra3Hiroki UemuraclaudeIzumiSyCopilot
authored
feat(core): default palette reads the neutral scales, and add a --backdrop token (#593)
* feat(core): alias --destructive to the danger solid role Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * feat(core): Button destructive uses the danger roles Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * refactor(core): text-destructive utilities use text-danger-text Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * refactor(core): invalid borders and focus rings use the danger roles Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * refactor(core): destructive tints use bg-danger-surface Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * refactor(core): themes inherit --destructive from the danger roles Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * test(core): cover destructive aliases and Button danger utilities, update snapshots Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * docs: document --destructive as the danger solid alias Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * chore: add changeset for the destructive danger alias Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * refactor(core): default palette surfaces read the gray, white and alpha scales * feat(core): add a --backdrop role for modal backdrops * docs: document --backdrop and the default palette reading the neutral scales * test(core): pin the default neutral token values and the --backdrop bridge * docs: correct the token step list and computed-value notes for the neutral scales * test(core): pin --foreground and --muted-foreground with the other neutral tokens * docs(decisions): keep the update to what this change does * docs(core): mark destructive tokens and utilities as deprecated --destructive, --destructive-foreground and their utilities will be removed in the next major (tailor-inc/platform-planning#2084), the same as --status-* and --alert-*. Button variant="destructive" stays undeprecated until a danger variant exists. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * docs(core): list the destructive migration under 1.17.0 and fix the border replacement The destructive change ships in the same release as the colour roles, so the migration entry is 1.17.0. In the changeset, border-destructive maps to border-danger-solid for invalid states; border-danger-border is 1.67:1 on the card and is for decorative borders only. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix(core): move the destructive migration to 1.18.0 and use the danger role in the selection bar 1.17.0 shipped without this change, so the migration entry now lists it under 1.18.0. The DataTable selection bar (added in 1.17.0) used `text-destructive` for destructive overflow actions. It now uses `text-danger-text`, the same as ActionPanel. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * docs(core): list the tokens whose computed string changes, and name the version in the migration note - The changeset said the border colours "now read" the gray scale. `--foreground`, `--muted-foreground`, `--border` and `--input` already did in 1.17.0, and the dark-mode lines keep the same `rgba(...)` string. It now lists the tokens whose `getPropertyValue()` string changes. - The migration note now says "1.17.0 and earlier" instead of "releases before the default palette moved onto its colour scales". Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> --------- Co-authored-by: Hiroki Uemura <hiroki_uemurapartners.tailor.tech@Hirokis-MacBook-Pro.local> Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com> Co-authored-by: Seiya IZUMI <IzumiSy@users.noreply.github.com> Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: IzumiSy <982850+IzumiSy@users.noreply.github.com>
1 parent 06ee7c2 commit 37eb4c1

18 files changed

Lines changed: 176 additions & 52 deletions
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@tailor-platform/app-shell": minor
3+
---
4+
5+
Add a `--backdrop` colour token and the `bg-backdrop` utility for the dim layer behind modals. `Dialog`, `Sheet` and the CsvImporter drawer use it instead of `bg-black/50`. The value is the same (black at 50%), so nothing changes on screen. Override `--backdrop` on `:root` to change every backdrop at once.
6+
7+
In the default palette, the surface and brand colours now read the internal gray scale and a white step, and the dark-mode lines read white alpha steps. All colours are unchanged. If your code reads these tokens with `getComputedStyle(...).getPropertyValue()`, the string changes notation, for example `#171717` instead of `rgba(23, 23, 23, 1)`, for `--primary`, `--primary-foreground`, `--secondary`, `--secondary-foreground`, `--accent-foreground`, `--background`, `--card`, `--card-foreground`, `--popover`, `--popover-foreground`, `--muted`, `--sidebar`, `--sidebar-foreground`, and light-mode `--sidebar-border`. `--foreground`, `--muted-foreground`, `--border` and `--input` already read the gray scale in 1.17.0, and the dark-mode lines keep the same `rgba(...)` string. The `cream` and `bloom` palettes are not changed.

‎decisions/semantic-color-roles.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,3 +120,14 @@ The "Danger action" row of the target shape is done. `--destructive` and `--dest
120120
- `cream`, `bloom` and `_template.css` no longer set `--destructive` (their values equalled the default). `_template.css` lists it under DO NOT SET. A theme that recolours destructive actions overrides `--danger-solid`.
121121
- Visible changes in the default palette: light `text-destructive` goes from `#dc2626` to `#ce0c17` through `text-danger-text`, and dark from `#f87171` to `#ff9083`; the dark invalid border goes from `#f87171` to `#dc2626`; CsvImporter error cells use `bg-danger-surface`, matching the warning cells (`bg-warning-surface`).
122122
- Outside this repository: `cp-apps/apps/couturier/src/theme-tailor.css` still overrides `--destructive`, and the Theme Generator still emits `destructive` as a constant. Both stop reaching the shipped components until they move to `--danger-*`.
123+
124+
## Update 2026-10-12: default surfaces, white and alpha scales
125+
126+
The default palette's surfaces and brand tokens read scale steps. For the default palette, this supersedes "all surfaces stay literal" and "Gray has no alpha steps" under Hue scales, and the second item under "Out of scope".
127+
128+
- New primitives, declared once with gray because they are the same in both modes: `--primitive-white` and `--primitive-{white,black}-a1` to `-a12`. The alpha values are Radix `whiteA` / `blackA` (0.05, 0.1, 0.15, 0.2, 0.3, then 0.1 steps to 0.9, and 0.95). They are not bridged, like the other primitives.
129+
- In `default.css`, every BRAND and SYSTEM colour with an exact step now reads it. Light: background, sidebar and primary foreground 50, secondary and muted 100, sidebar border 200, primary and secondary foreground 900, the other foregrounds 950, card and popover white. Dark: primary 200, secondary, popover and muted 800, card and primary foreground 900, background and sidebar 950, the other foregrounds 50, border and sidebar border white a2, input white a3. No values change: every token resolves to the same colour as before in light and dark mode.
130+
- White is its own step. The light page is gray 50 and cards are white; putting cards on gray 50 would remove the difference.
131+
- New role `--backdrop`, `var(--primitive-black-a7)` (50%) in both modes, bridged as `bg-backdrop`. `Dialog`, `Sheet` and the CsvImporter drawer use it instead of `bg-black/50`; the value is the same. The name follows the CSS `::backdrop` pseudo-element and the Base UI `Backdrop` part. It is not `overlay`, because `--z-overlay` already names the modal layer, which holds both the backdrop and the popup.
132+
- `--accent`, the shadows and the chart colours stay literal. They have no matching step. `--destructive` reads `--danger-solid` (see Update 2026-10-06).
133+
- `cream`, `bloom` and `_template.css` keep their own literal values. The header comments now list `--backdrop` among the inherited tokens.

‎docs-manifest.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -609,7 +609,7 @@
609609
"hashes": {
610610
"typeSurface": "b1614970f950ceb6",
611611
"outline": "bda40376d6e3e008",
612-
"snapshot": "b845d4c54453b0f0",
612+
"snapshot": "ac70f5a7004d3bab",
613613
"outputMd": "ec6a0ac098d1d87a",
614614
"examples": "934c52d4e8761404"
615615
}
@@ -1067,9 +1067,9 @@
10671067
"symbols": [],
10681068
"hashes": {
10691069
"typeSurface": null,
1070-
"outline": "16c1723900750d80",
1070+
"outline": "72b143b96a554f6e",
10711071
"snapshot": null,
1072-
"outputMd": "f095aa7055b83481",
1072+
"outputMd": "bf724842da5a8114",
10731073
"examples": null
10741074
}
10751075
},
@@ -1204,7 +1204,7 @@
12041204
"hashes": {
12051205
"typeSurface": "e760949efcbe4c38",
12061206
"outline": "464d91acc48f7c9d",
1207-
"snapshot": "40d15c3f1003fdb0",
1207+
"snapshot": "2c9114c5a81198be",
12081208
"outputMd": "1f81ebd562c50371",
12091209
"examples": "b0eebb8c5e2219dc"
12101210
}
@@ -1322,9 +1322,9 @@
13221322
"symbols": [],
13231323
"hashes": {
13241324
"typeSurface": null,
1325-
"outline": "dcf033e2a63f0f03",
1325+
"outline": "08ea14945176cd57",
13261326
"snapshot": null,
1327-
"outputMd": "3ebd9f5828c49ed7",
1327+
"outputMd": "01cfefbafc469e58",
13281328
"examples": "4d19f4f688e0f0ac"
13291329
}
13301330
},
@@ -1694,7 +1694,7 @@
16941694
"packages/core/skills/app-shell-patterns/references/concepts/modules-and-resources.md": "bf15b5460f22d165",
16951695
"packages/core/skills/app-shell-patterns/references/concepts/routing-navigation.md": "8034c7f885994b29",
16961696
"packages/core/skills/app-shell-patterns/references/concepts/sidebar-navigation.md": "e342ef02dc2b9b86",
1697-
"packages/core/skills/app-shell-patterns/references/concepts/styling-theming.md": "3ebd9f5828c49ed7",
1697+
"packages/core/skills/app-shell-patterns/references/concepts/styling-theming.md": "01cfefbafc469e58",
16981698
"packages/core/skills/app-shell-patterns/references/components/action-panel.md": "71794d4b561e4d4b",
16991699
"packages/core/skills/app-shell-patterns/references/components/activity-card.md": "4f386e49380fb0b0",
17001700
"packages/core/skills/app-shell-patterns/references/components/ai-chat.md": "824d1aa36bb7f194",
@@ -1775,7 +1775,7 @@
17751775
"packages/core/skills/app-shell-patterns/references/patterns/interaction-toast.md": "f68bdab855730f48",
17761776
"packages/core/skills/app-shell-patterns/references/patterns/list-dense-scan.md": "d2c10cdbb00590a2",
17771777
"packages/core/skills/app-shell-patterns/references/pages/document-detail.md": "717ef4e7ae835aff",
1778-
"packages/core/skills/app-shell-patterns/references/migrations.md": "afad0935852bec9f",
1778+
"packages/core/skills/app-shell-patterns/references/migrations.md": "214b43b076a41a86",
17791779
"packages/core/skills/app-shell-patterns/SKILL.md": "4650734e91fbc858"
17801780
}
17811781
}

‎docs-src/concepts/styling-theming.docs.outline.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,9 +142,14 @@ Colors follow shadcn-style semantic naming: a surface token and its matching `-f
142142
| `--border` | hairlines, dividers | `border-border` |
143143
| `--input` | form control borders | `border-input` |
144144
| `--ring` | focus rings | `ring-ring` / `outline-ring` |
145+
| `--backdrop` | dim layer behind a modal | `bg-backdrop` |
145146

146147
Surfaces are named by **role**, not by depth — there is no numbered `surface-1/2/3` ladder, and no third tier of body text below `muted-foreground`. Stack depth with `background` → `card` → `muted` plus a border or shadow, and reach for `popover` when the surface actually floats.
147148

149+
`--backdrop` is the dim layer behind `Dialog` and `Sheet` (black at 50% in both modes). Use `bg-backdrop` for your own modal layers instead of `bg-black/50`. Palettes inherit it; override it on `:root` to change every backdrop at once.
150+
151+
In the default palette, the surface, text and line tokens in this table read the internal gray scale, a white step, and white alpha steps (dark-mode lines), so their values match the gray used across the palette. `--backdrop` reads a black alpha step, and `--ring` is mixed from `--primary`. The other palettes set their own values.
152+
148153
#### Brand & action
149154

150155
| Token | Use | Tailwind |

‎docs-src/guides/migrations.docs.outline.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ body {
205205

206206
Toggle dark mode and confirm a real surface changes: inspect a `Card` and watch its computed `background-color` go from `rgb(255, 255, 255)` to `rgb(23, 23, 23)` on the default palette.
207207

208-
Reading the token directly also works — `getComputedStyle(document.documentElement).getPropertyValue("--card")` returns the winning declaration, so a stale copy shows up as its own value. Just compare against the authored notation: AppShell writes `rgba(23, 23, 23, 1)`, not `#171717`, and the computed value preserves that form.
208+
Reading the token directly also works — `getComputedStyle(document.documentElement).getPropertyValue("--card")` returns the winning declaration, so a stale copy shows up as its own value. Compare against the value the default palette resolves to: in dark mode `--card` returns `#171717`, the gray step it reads. (1.17.0 and earlier return `rgba(23, 23, 23, 1)`.) A copy in your own CSS shows up in the notation you wrote.
209209

210210
## 1.5.0: `loader` removed from file-based page definitions
211211

‎docs/concepts/styling-theming.md‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/migrations.md‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)