T3.5 - A5: one button system, and green goes back to being a status

251 buttons across the 7 pages, counted in the browser with every wizard step,
creator section and tool panel forced visible. Two thirds of them are
display:none at load, so a static grep sees about eighty and misses the rest.

FOUR ROLES, defined once in theme-light.css as --wp-btn-*, and no fifth:

  primary    the one action the screen exists for. Filled accent.
  secondary  every other real action. White, --border-strong, accent on hover.
  tertiary   navigating or undoing. No fill, no border, accent text.
  danger     destructive. Outlined red; filled red only where the control is too
             small for an outline to read - the 28px x on a sequence row.

Every button class is mapped to a role in docs/reference/tokens.md section 12.
No value is new: these are the fills the sheets already rendered, given one
definition so that "primary" means one thing.

GREEN IS A STATUS COLOUR AND NO LONGER FILLS A BUTTON. A5 names two green action
buttons; there are four. .use-btn and the launcher's completed-SOP card button
never render green in the default fixture, so the review could not have seen
them - the SOP has to be finished and a suggested value has to be offered first.

  .nav-btn.primary            "SOP complete"    wizard
  .btn.btn-generate           "Save & view"     creator
  .use-btn                                      creator
  .card.complete .card-button                   launcher

The green did not go anywhere. .cstatus button.on-cleared, .toggle-btn.enabled,
.wp-nav-dot.ok, .rb-ready, .badge-R and the launcher card's own left border and
status line all still carry it, and every one of those is a state rather than an
action. The launcher card in particular still says "complete" twice after this
change; it just no longer says it on the button.

SENTENCE CASE, applied to buttons and field labels only, which is the scope A5
sets. First word capitalised, the rest lowercased, acronyms and external proper
nouns left alone (SOP, QC, WP, UPN, PM/APM/CM/QM, PDF, JSON, CSV, BIM, MIMO,
Excel, Acumatica).

  ~30 button labels across launcher, wizard, creator, admin and two scripts
  46 field labels
  text-transform:uppercase removed from 4 rules - .btn and .add-btn (creator
  buttons), label and .cmt-namebar label (creator field labels)

Labels carrying markup - a .req asterisk, a .help-tip chip - had only their text
nodes transformed, so the markup survives and "first word" means the first word
of the label rather than of each fragment. The creator's mono face, 10px size and
tracking are its idiom and are untouched; only the forced uppercase goes.

help.js was updated too. It names "Load Sample" and "SOP Complete" in prose, so
renaming the buttons without it would have left the help centre describing
controls that no longer exist. That coupling is the only place in the app where
button text is referenced by name.

Verified by re-running the inventory: 0 green action buttons, 0 uppercase button
labels, 251 buttons still present - nothing was lost in the rename.

console.css card headers are unchanged, confirmed by diff: the only six lines
this task touches in that file are token substitutions on button/button.primary/
button.danger, none of them within twenty lines of .card h2.

f_items 5 FIXED / F6 REPRODUCES. browser_check 71/71.

Left alone and logged: .step-tab is still uppercase (BL-015) - it is a stepper
tab, neither a button nor a field label, and A4/S9 rebuild the stepper. Table
headers, section eyebrows and headings keep their case throughout. BL-008 and
BL-009 were re-targeted from T3.5 to wave 9: both are colour merges on a field
fill and a status pill, and this task is scoped to buttons.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-08-15 19:11:56 -05:00
parent 03d24138ed
commit ce6fb840f0
13 changed files with 299 additions and 150 deletions

View File

@@ -764,25 +764,103 @@ Two things that cost time and are recorded so they do not cost it again:
---
## 12. Button roles — `T3.5`
## 12. Button roles — `A5`, built at `T3.5`
Reserved. `T3.5`'s fifth done-when is "button roles are documented in
`docs/reference/tokens.md`"; it fills this section in with the four roles (primary, secondary,
tertiary, destructive) and the mapping of every existing button class to one of them.
**251 buttons across the 7 pages**, counted in the browser with every wizard step, creator
section and tool panel forced visible — two thirds of them are `display: none` at load and a
static grep misses them entirely.
Inventory for it to start from — the button classes that exist today, and the two green
action buttons `A5` names:
### The four roles
| Sheet | Classes | Green action? |
|---|---|---|
| `console.css` | `button`, `button.primary`, `button.danger`, `button.mini` | no |
| `work-package-suite-styles.css` | `.add-btn`, `.nav-btn`, `.nav-btn.primary`, `.comments-toggle`, `.header-button` | **yes — `.nav-btn.primary` is `--success` `#198038`** (`:492-498`) |
| `wp-creation-styles.css` | `.btn`, `.btn-ghost`, `.btn-primary`, `.btn-generate`, `.use-btn`, `.add-btn`, `.add-btn-gate`, `.row-del`, `.mode-btn`, `.link-btn`, `.wp-nav-cta` | **yes — `.btn-generate` and `.use-btn` are `--accent-green`** (`:264 :445`) |
| `theme-light.css` | `.wp-appbar-btn`, `.wp-appbar-btn.primary` | no |
| `index.html` inline | `.card-button`, `.comments-toggle`, `.submit-btn`, `.close-btn` | **yes — `.card.complete .card-button`** (`:125-126`) |
Defined once, in `theme-light.css`, as `--wp-btn-*`. No fifth role exists.
Three green-action sites, not two. `Save & View` and `SOP Complete` are the two the review
named; the launcher's completed-SOP card button is the third and is the same defect.
| Role | Looks like | For | Tokens |
|---|---|---|---|
| **primary** | filled accent, white text | the one action the screen exists for; at most one per view | `--wp-btn-primary-bg/-fg/-hover/-active` |
| **secondary** | white fill, `--border-strong` hairline, accent on hover | every other real action — the app's workhorse | `--wp-btn-secondary-bg/-fg/-border/-hover-fg` |
| **tertiary** | no fill, no border, accent text | navigating or undoing | `--wp-btn-tertiary-fg/-hover-fg` |
| **danger** | outlined red; filled red only where a control is too small for an outline to read | destructive | `--wp-btn-danger-fg/-border/-soft-bg/-fill-bg/-fill-fg` |
### Green is a status colour
It says *cleared*, *ready*, *complete* — on a dot, a pill, a banner, a badge — and it never
fills a button. That was the second button language `A5` recorded: `Save & View` and `SOP
Complete` shouted louder than every other action in the suite while doing nothing more
dangerous than saving a form.
The green did not go anywhere. `.cstatus button.on-cleared`, `.toggle-btn.enabled`,
`.wp-nav-dot.ok`, `.rb-ready`, `.badge-R`, `.auto-tag` and the launcher card's left border and
`.card-status` all still carry it — every one of them a state rather than an action.
### Every button class, mapped
| Class | Role | Where | Changed at `T3.5`? |
|---|---|---|---|
| `button` (bare) | secondary | console | tokens only |
| `button.primary` | primary | console | tokens only |
| `button.danger`, `button.mini.danger` | danger, outlined | console | tokens only |
| `button.mini` | secondary | console | — |
| `.add-btn` | primary | wizard | tokens only |
| `.nav-btn` | secondary | wizard | tokens only |
| `.nav-btn.primary` | **primary** | wizard — `SOP complete` | **was green** |
| `.seq-del` | danger, filled | wizard — a 28px ✕ | tokens only |
| `.comments-toggle` | secondary | wizard | — |
| `.header-button`, `.wp-appbar-btn` | secondary on a dark bar | theme | — |
| `.btn.btn-primary` | primary | creator | tokens only |
| `.btn.btn-generate` | **primary** | creator — `Save & view` | **was green** |
| `.use-btn` | **primary** | creator | **was green** |
| `.btn.btn-ghost` | secondary | creator | tokens only |
| `.add-btn` (creator) | secondary, dashed | creator | uppercase removed |
| `.add-btn-gate` | secondary, amber | creator — adds a QC hold | — |
| `.row-del` | danger, outlined on hover | creator | tokens only |
| `.wp-nav-cta`, `.wp-nav-cta-more` | primary | creator navigator | tokens only |
| `.link-btn`, `.lock-edit`, `.cmt-jump` | tertiary | creator | tokens only |
| `.mode-btn.active` | primary | creator | — |
| `.cstatus button.on-*` | **status, not a role** | creator — Open / Cleared / N/A | — |
| `.card-button` | primary | launcher | — |
| `.card.complete .card-button` | **primary** | launcher | **was green** |
| `.submit-btn`, `.comments-toggle` | primary | launcher | — |
| `.close-btn` | secondary | launcher | — |
| `.wpc-foot-btn` | secondary | shared chrome | tokens only |
| `.wpc-clear`, `.comments-dropdown-close`, `.modal-close`, `.cmt-x`, `.wp-sidenav-close` | tertiary | everywhere | — |
| `.wp-navbtn`, `.wp-nav-toggle`, `.wp-sidenav-link`, `.wp-nav-link`, `.wp-nav-item` | tertiary | drawers and rails | — |
| `.ui-help-fab` | primary | help centre | out of scope — BL-004 |
| `.dev-toggle` | deliberately invisible | creator | — |
Four green action sites, not the two `A5` names. `.use-btn` and the launcher's completed-SOP
card button never render green in the default fixture, so the review could not have seen them.
### Sentence case
Applied to **buttons and field labels only**, which is what `A5` scopes it to.
The rule: *first word capitalised, everything after it lowercased, except acronyms* (`SOP`,
`QC`, `WP`, `UPN`, `PM`, `APM`, `CM`, `QM`, `PDF`, `JSON`, `CSV`, `BIM`, `MIMO`) *and external
proper nouns* (`Excel`, `Acumatica`). Page names get sentence case too when they appear inside
a sentence-shaped label — "Open the user directory", not "Open the User Directory" — because
the label is a description, not a title.
- **~30 button labels** rewritten across the launcher, wizard, creator, admin and two scripts.
- **46 field labels** rewritten. Labels carrying markup — a `.req` asterisk, a `.help-tip`
chip — had only their text nodes transformed, so the markup survives and "first word" means
the first word of the label rather than of each fragment.
- **`text-transform: uppercase` removed from four rules**: `.btn` and `.add-btn` (creator
buttons) and `label` and `.cmt-namebar label` (creator field labels). The mono face, the
10px size and the tracking are the creator's idiom and are untouched — only the forced
uppercase goes.
- **`help.js` was updated too.** It names `Load Sample` and `SOP Complete` in prose, so
renaming the buttons without it would have left the help centre describing controls that no
longer exist.
### Not touched, deliberately
| What | Why |
|---|---|
| `console.css` `.card h2` uppercase | `T3.5` says explicitly not to. Confirmed by diff: the only changes to `console.css` in this task are token substitutions, none of them on `.card h2`. |
| `table.grid th`, `.wp-types-header`, `.dash-table th` | table headers, not buttons or field labels |
| `.section-label`, `.sub-heading`, `.wpc-proj-kicker`, `.wpc-pop-head`, `.wp-sidenav-sect` | section eyebrows and headings |
| `.step-tab` uppercase | a stepper tab is neither a button nor a field label, and the stepper is rebuilt at `T7.x`. Logged as **BL-015**. |
| `.nav-tab` labels (`SOP Configuration`, `Work Package Creation`) | these name the two tools rather than describing an action; they read as titles and are the same strings the launcher cards use. |
---

View File

@@ -179,7 +179,7 @@ deliberately deferred.
the four token systems collapse to one.
- **Why not now:** swapping it changes a rendered fill, which `T3.2` forbids. It is the same
conversation as the green action buttons.
- **Suggested wave or follow-up:** `T3.5`, with `A5`. See `docs/reference/tokens.md` §8-E.
- **Suggested wave or follow-up:** wave 9, with `C4`. `T3.5` is scoped to buttons; this is a field fill. See `docs/reference/tokens.md` §8-E.
### BL-009 — A ninth amber, four points from the eighth
@@ -191,7 +191,7 @@ deliberately deferred.
was missed by the `T3.1` inventory, which is why it survived this long.
- **Why not now:** merging it moves a rendered colour, which `T3.2` forbids. `T3.2` named it
`--wp-status-warning-text-alt` so it is visible rather than hidden in a hex.
- **Suggested wave or follow-up:** `T3.5`. See `docs/reference/tokens.md` §8-K.
- **Suggested wave or follow-up:** wave 9, with `C4`. `T3.5` is scoped to buttons; this is a status pill. See `docs/reference/tokens.md` §8-K.
### BL-010 — 829 raw spacing, type and radius values remain inside rules
@@ -254,6 +254,16 @@ deliberately deferred.
rebuild. The fix is the ring `T3.4` established: `outline: 2px solid var(--cds-focus);
outline-offset: -2px`, which `console.css`, `wp-chrome.css` and now the wizard all use.
### BL-015 — The creator's stepper tabs are still forced uppercase
- **Found during:** T3.5
- **Where:** `html/wp-creation-styles.css:105` (`.step-tab`)
- **What:** `A5` scopes sentence case to buttons and field labels, and `T3.5` removed the
forced uppercase from both. `.step-tab` is neither — it is a stepper tab — so it was left,
and it is now the only uppercase interactive text on the page.
- **Why not now:** out of `A5`'s stated scope, and `A4`/`S9` rebuild the stepper.
- **Suggested wave or follow-up:** `T7.x`, with the stepper rebuild.
### BL-014 — Four controls fall back to the browser's default focus ring
- **Found during:** T3.4