n.siegfried/Project-SDE-WP-Suite
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
Nick Siegfried
2026-08-15 19:11:56 -05:00
parent 03d24138ed
commit ce6fb840f0
13 changed files with 299 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
html/wp-creation-styles.css
View File

@@ -151,9 +151,12 @@
.field { display: flex; flex-direction: column; gap: 6px; }
.field.span2 { grid-column: span 2; }
/* A5 scopes the sentence-case rule to buttons and FIELD LABELS, which is this
rule. The mono face, the size and the tracking are the creator's idiom and
are left alone; only the forced uppercase goes. */
label {
font-family: var(--mono); font-size: 10px; font-weight: 500;
letter-spacing: .1em; color: var(--text-muted); text-transform: uppercase;
letter-spacing: .1em; color: var(--text-muted);
}
label .req { color: var(--accent); margin-left: 3px; }
@@ -262,14 +265,19 @@
.nav-row { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--border); }
.btn {
padding: 10px 22px; border-radius: var(--radius); font-family: var(--mono); font-size: 11px; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase; cursor: pointer; border: 1px solid; transition: all .15s;
letter-spacing: .08em; cursor: pointer; border: 1px solid; transition: all .15s;
}
.btn-ghost { background: var(--surface); border-color: var(--border-strong); color: var(--text-muted); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--cds-text-on-color); box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--cds-hover-primary); }
.btn-generate { background: var(--accent-green); border-color: var(--accent-green); color: var(--cds-text-on-color); font-weight: 700; box-shadow: var(--shadow); }
.btn-generate:hover { background: var(--wp-hover-success); }
/* secondary */
.btn-ghost { background: var(--wp-btn-secondary-bg); border-color: var(--wp-btn-secondary-border); color: var(--text-muted); }
.btn-ghost:hover { border-color: var(--wp-btn-secondary-hover-fg); color: var(--wp-btn-secondary-hover-fg); }
/* primary */
.btn-primary { background: var(--wp-btn-primary-bg); border-color: var(--wp-btn-primary-bg); color: var(--wp-btn-primary-fg); box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--wp-btn-primary-hover); }
/* A5: .btn-generate was green. It is the same role as .btn-primary and now
renders identically; the class is kept because the markup and the scripts
both use it, and renaming it is T7.2's business, not a colour task's. */
.btn-generate { background: var(--wp-btn-primary-bg); border-color: var(--wp-btn-primary-bg); color: var(--wp-btn-primary-fg); font-weight: 700; box-shadow: var(--shadow); }
.btn-generate:hover { background: var(--wp-btn-primary-hover); }
/* ── OUTPUT ── */
#output-section { display: none; }
@@ -335,11 +343,12 @@
background: var(--surface); color: var(--text-dim); cursor: pointer; font-size: 16px; line-height: 1;
display: flex; align-items: center; justify-content: center; transition: all .12s; flex-shrink: 0;
}
.row-del:hover { border-color: var(--red); color: var(--red); background: var(--red-dim); }
/* danger, outlined */
.row-del:hover { border-color: var(--wp-btn-danger-border); color: var(--wp-btn-danger-fg); background: var(--wp-btn-danger-soft-bg); }
.add-btn {
display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: var(--radius);
border: 1px dashed var(--border-strong); background: var(--surface); color: var(--text-muted);
font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .06em;
cursor: pointer; transition: all .15s;
}
.add-btn:hover { border-color: var(--accent); color: var(--accent); border-style: solid; background: var(--accent-dim); }
@@ -418,7 +427,7 @@
.cmt-x { background:none; border:none; color:var(--text-muted); font-size:15px; cursor:pointer; padding:4px 8px; border-radius:4px; }
.cmt-x:hover { background:var(--surface2); color:var(--text); }
.cmt-namebar { padding:12px 18px; border-bottom:1px solid var(--border); }
.cmt-namebar label { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin-bottom:5px; }
.cmt-namebar label { display:block; font-size:10px; letter-spacing:.04em; color:var(--text-muted); margin-bottom:5px; }
.cmt-namebar input { width:100%; padding:8px 10px; border:1px solid var(--border-strong); border-radius:var(--radius); font-family:var(--sans); font-size:13px; color:var(--text); background:var(--surface); }
.cmt-compose { padding:14px 18px; border-bottom:1px solid var(--border); background:var(--surface2); }
.cmt-compose-label { font-size:11px; color:var(--text-muted); margin-bottom:7px; }
@@ -438,7 +447,7 @@
.cmt-text { font-size:13px; color:var(--text); line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.cmt-del { background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:11px; padding:2px 5px; border-radius:4px; }
.cmt-del:hover { background:var(--red-dim); color:var(--red); }
.cmt-jump { background:none; border:none; color:var(--accent); cursor:pointer; font-size:10px; padding:0; margin-top:4px; }
.cmt-jump { background:none; border:none; color:var(--wp-btn-tertiary-fg); cursor:pointer; font-size:10px; padding:0; margin-top:4px; }
.cmt-jump:hover { text-decoration:underline; }
.cmt-foot { border-top:1px solid var(--border); padding:12px 18px; }
.cmt-note { font-size:10px; color:var(--text-muted); line-height:1.5; margin-bottom:10px; }
@@ -449,9 +458,10 @@
/* ── REV1: validation, governance, summary ───────────────────────── */
.radio-group.group-invalid, .check-group.group-invalid { outline:2px solid var(--red); outline-offset:4px; border-radius:var(--radius); }
.ov-select.ov-unset { color:var(--red) !important; border-color:var(--red); }
/* primary. Was green (A5) — it applies a suggested value, which is an action. */
.use-btn { display:inline-block; margin-left:8px; padding:4px 14px; font-family:var(--sans); font-size:11px; font-weight:700;
color:var(--cds-text-on-color); background:var(--accent-green); border:none; border-radius:var(--radius); cursor:pointer; letter-spacing:.03em; }
.use-btn:hover { background:var(--wp-hover-success); }
color:var(--wp-btn-primary-fg); background:var(--wp-btn-primary-bg); border:none; border-radius:var(--radius); cursor:pointer; letter-spacing:.03em; }
.use-btn:hover { background:var(--wp-btn-primary-hover); }
.sum-chips { display:flex; flex-wrap:wrap; gap:7px; }
.sum-chip { background:var(--accent-dim); color:var(--accent); border:1px solid var(--wp-accent-border-a); border-radius:3px;
padding:3px 10px; font-family:var(--mono); font-size:10px; }
@@ -469,7 +479,8 @@
.ctx-meta { margin-left:auto; display:flex; gap:16px; font-size:11px; color:var(--text-muted); flex-wrap:wrap; }
.ctx-meta b { color:var(--accent); }
.ctx-meta code { background:var(--surface2); padding:1px 6px; border-radius:3px; color:var(--accent); }
.link-btn { background:none; border:none; color:var(--accent); cursor:pointer; font-size:inherit; padding:0; text-decoration:underline; }
/* tertiary */
.link-btn { background:none; border:none; color:var(--wp-btn-tertiary-fg); cursor:pointer; font-size:inherit; padding:0; text-decoration:underline; }
.mode-wrap { max-width:none; margin:0; padding:16px 28px 0; display:flex; align-items:center; gap:16px; }
.mode-toggle { display:inline-flex; border:1px solid var(--border-strong); border-radius:6px; overflow:hidden; }
@@ -517,7 +528,7 @@
/* ── COMMENT-DRIVEN ADDITIONS ────────────────────────────────────── */
.locked-field { background:var(--surface2)!important; color:var(--text-muted); cursor:not-allowed; }
.lock-row { display:flex; align-items:center; gap:10px; margin-top:5px; }
.lock-edit { background:none; border:none; color:var(--accent); cursor:pointer; font-size:11px; padding:0; }
.lock-edit { background:none; border:none; color:var(--wp-btn-tertiary-fg); cursor:pointer; font-size:11px; padding:0; }
.override-note { font-size:11px; color:var(--accent-amber); }
.sop-tag { font-size:9px; font-weight:700; color:var(--accent); background:var(--accent-dim); border:1px solid var(--wp-accent-border-b); border-radius:9px; padding:1px 6px; margin-left:6px; vertical-align:middle; }
@@ -710,19 +721,19 @@
flex: 1 1 auto; min-width: 0;
display: inline-flex; align-items: center; justify-content: flex-start; gap: 9px;
height: 40px; padding: 0 14px;
background: var(--accent); color: var(--cds-text-on-color);
background: var(--wp-btn-primary-bg); color: var(--wp-btn-primary-fg);
border: 0; border-radius: 6px 0 0 6px;
font: inherit; font-size: 14px; font-weight: 600;
cursor: pointer; white-space: nowrap;
}
.wp-nav-cta:hover { background: var(--cds-hover-primary); }
.wp-nav-cta:hover { background: var(--wp-btn-primary-hover); }
.wp-nav-cta-plus { font-size: 17px; font-weight: 400; line-height: 1; }
.wp-nav-cta-more {
flex: 0 0 auto; width: 30px; height: 40px;
background: var(--accent); color: var(--cds-text-on-color); border: 0; border-left: 1px solid var(--wp-on-accent-divider);
background: var(--wp-btn-primary-bg); color: var(--wp-btn-primary-fg); border: 0; border-left: 1px solid var(--wp-on-accent-divider);
border-radius: 0 6px 6px 0; font: inherit; font-size: 12px; cursor: pointer;
}
.wp-nav-cta-more:hover { background: var(--cds-hover-primary); }
.wp-nav-cta-more:hover { background: var(--wp-btn-primary-hover); }
.wp-nav-menu {
position: absolute; top: calc(100% - 6px); left: 10px; right: 10px; z-index: 10;
background: var(--surface); border: 1px solid var(--border-strong); border-radius: 6px;