diff --git a/docs/reference/tokens.md b/docs/reference/tokens.md index ac319e7..e8ea311 100644 --- a/docs/reference/tokens.md +++ b/docs/reference/tokens.md @@ -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. | --- diff --git a/docs/waves/backlog.md b/docs/waves/backlog.md index ffc24a7..3568808 100644 --- a/docs/waves/backlog.md +++ b/docs/waves/backlog.md @@ -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 diff --git a/html/admin.html b/html/admin.html index 8adae4f..87cbf03 100644 --- a/html/admin.html +++ b/html/admin.html @@ -95,7 +95,7 @@ User Directory page. They moved because user administration is no longer admin-only: a Project Super User creates and manages the accounts on the projects they administer, and they must never be sent through this console to do it. -
+
diff --git a/html/console.css b/html/console.css index 58c6bb5..4ebf97f 100644 --- a/html/console.css +++ b/html/console.css @@ -64,14 +64,14 @@ a.home:hover{ text-decoration:underline; } toolbar is one clean band instead of a ragged one. */ button{ font:inherit; font-size:13px; font-weight:600; line-height:1; white-space:nowrap; height:var(--ctl); padding:0 var(--s3); border-radius:0; cursor:pointer; - border:1px solid var(--border-strong); background:var(--surface); color:var(--text); } -button:hover{ border-color:var(--accent); color:var(--accent); } + border:1px solid var(--wp-btn-secondary-border); background:var(--wp-btn-secondary-bg); color:var(--wp-btn-secondary-fg); } +button:hover{ border-color:var(--wp-btn-secondary-hover-fg); color:var(--wp-btn-secondary-hover-fg); } button:focus-visible{ outline:2px solid var(--accent); outline-offset:-3px; } button:disabled, button:disabled:hover{ color:var(--dim); border-color:var(--border); background:var(--surface); cursor:default; } -button.primary{ background:var(--accent); border-color:var(--accent); color:var(--cds-text-on-color); } -button.primary:hover{ background:var(--accent-hover); border-color:var(--accent-hover); color:var(--cds-text-on-color); } -button.danger{ border-color:var(--red); color:var(--red); } -button.danger:hover{ background:var(--red-bg); border-color:var(--red); color:var(--red); } +button.primary{ background:var(--wp-btn-primary-bg); border-color:var(--wp-btn-primary-bg); color:var(--wp-btn-primary-fg); } +button.primary:hover{ background:var(--wp-btn-primary-hover); border-color:var(--wp-btn-primary-hover); color:var(--wp-btn-primary-fg); } +button.danger{ border-color:var(--wp-btn-danger-border); color:var(--wp-btn-danger-fg); } +button.danger:hover{ background:var(--wp-btn-danger-soft-bg); border-color:var(--wp-btn-danger-border); color:var(--wp-btn-danger-fg); } .row{ display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center; } /* The filter / search / button strip at the top of a card. */ .toolbar{ display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center; margin:0 0 var(--s3); } diff --git a/html/help.js b/html/help.js index dc0a901..236ad6e 100644 --- a/html/help.js +++ b/html/help.js @@ -101,7 +101,7 @@
  • Open “Work Package Creation” to author packages with your SOP defaults pre-populated.
  • Update from the field using the Field View, and leave feedback on any page with the Feedback button.
    • -
    New here? On the home page choose the Sample Project, then click ⭐ Load Sample in the suite to see a fully filled-out SOP and an example Work Package.
    ` }, +
    New here? On the home page choose the Sample Project, then click ⭐ Load sample in the suite to see a fully filled-out SOP and an example Work Package.
    ` }, { id: 'projects', title: 'Projects', body: `

    Projects

    @@ -120,7 +120,7 @@ { id: 'sop', title: 'SOP Configuration', body: `

    SOP Configuration (10 steps)

    -

    The SOP is the project baseline. Walk the 10 steps with ← Back / Next →, or jump using the step indicators. The final step is ✓ SOP Complete — saving it unlocks the Work Package Creator and turns the home-page card green.

    +

    The SOP is the project baseline. Walk the 10 steps with ← Back / Next →, or jump using the step indicators. The final step is ✓ SOP complete — saving it unlocks the Work Package Creator and turns the home-page card green.

    1. Project Basics — name, number, client, division/sector, site. Inherited by every WP.
    2. Project Team Leadership — PM, APM, CM, QM, plus any additional members (+ Add Team Member).
      3. @@ -240,8 +240,8 @@ { id: 'data', title: 'Samples, sharing & comments', body: `

      Samples, import / export & comments

      -

      Load Sample

      -

      ⭐ Load Sample is context-aware: on the SOP tab it loads a complete sample SOP; on the WP tab it loads an example Work Package. Great for learning the tool or demoing.

      +

      Load sample

      +

      ⭐ Load sample is context-aware: on the SOP tab it loads a complete sample SOP; on the WP tab it loads an example Work Package. Great for learning the tool or demoing.

      Import / Export