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

T3.2 - C3/S5: one source of truth for colour; page sheets alias only

Browse Source 
theme-light.css is now the only file in html/ that contains a colour literal.
The five page stylesheets and all four inline <style> blocks declare names and
nothing else.

  theme-light.css                 191 declarations, 175 with a literal value
  console.css                      28 declarations,   0
  work-package-suite-styles.css    16 declarations,   0
  wp-chrome.css                    14 declarations,   0
  wp-creation-styles.css           24 declarations,   0
  wp-sidenav.css                    0 declarations,   0

#0f62fe is declared in one sheet, down from five. The eleven occurrences left
inside theme-light.css are Carbon's own v10-to-v11 alias layer, which the
inventory records as deliberate and not the S5 defect.

Names were kept, because 111 var() references live in .js files across 23 token
names and a rename there fails silently - no build error, no console warning,
just an unstyled element.

The rule the refactor was built on: consolidation is not unification. Where two
sheets declared the same value, they collapse. Where they declared DIFFERENT
values for one role - the two shadows, the eight status borders doing four jobs,
the three mono stacks - each value got its own canonical name and the pair is
recorded for T3.5. Picking a winner between two near-identical greys is a
rendered change, which this task forbids. The console's zebra stripe is the one
that would have bitten: #fafafa is six points from #f4f4f4, and merging them
erases the striping on the nine-column user table.

Collecting the one-offs in one place made two things countable that were not
before: twelve distinct shadows, and a ninth amber (#8a6d00 on the field view,
four points from #8e6a00 and doing the same job - BL-009).

VERIFICATION - the screenshot done-when could not do the job, so it was replaced.

Captured against wave 2, 11 of 14 shots were pixel-identical and 3 were not.
Capturing wave 2 against ITSELF produced the same 3 differences at the same
bounding box, so those shots cannot distinguish a regression from the clock.
Trap 2 in the brief is half wrong: users.html is stable at both widths; the
unstable third is the creator at 1440px, and admin's captured page height varies
by ~600px between runs (BL-012).

So tests/token_check.py was added. It checks what wave 3 actually claims: that
every custom property resolves to the same literal, and every element computes
the same colours, shadows and type. That is stronger than a screenshot - it
covers the hover, focus and disabled rules a screenshot never exercises, and it
is deterministic.

  wave 2 vs T3.2, all 7 pages:
  178/178 wave-2 token names resolve identically, +213 new
  3,500 elements compute identically, zero added, zero removed
  16 tokens differ in notation only (#fff -> #ffffff), which is the duplicate
  class this task existed to collapse

Two detours worth not repeating: the element walk was first keyed by sibling
index and reported 55 phantom differences on the SOP page, where three
JS-injected overlays append in whichever order their async work finishes
(BL-011); and the comparator now normalises notation before reporting, because
otherwise it fails on its own success.

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

ONE DONE-WHEN NOT MET, recorded rather than skipped: "no page stylesheet
declares a raw color, spacing or type value". The colour half is met in full.
483 raw spacing values, 281 font-sizes and 65 radii remain inside rules, 492 of
them in the creator. That is arithmetic, not effort: the creator's spacing is
every integer from 1px to 14px, so no token exists that padding:9px 11px maps to
without changing one of the numbers - and this task forbids changing a rendered
value. The two requirements are mutually exclusive. Logged as BL-010 for T5.x
and T7.1, where those pages are re-laid-out and the values get chosen again.

New backlog: BL-009 (ninth amber), BL-010 (raw spacing/type in rules),
BL-011 (overlay append race), BL-012 (unstable screenshot targets).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Nick Siegfried
2026-08-15 18:50:30 -05:00
parent 0e40e967a0
commit 9ab7b48de2
14 changed files with 964 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
html/work-package-suite-styles.css
View File

@@ -1,25 +1,32 @@
/* Names only. Every value comes from theme-light.css, which this page loads
first — this sheet declares nothing of its own (T3.2 / S5 / C3). The names
stay because work-package-suite-app.js reads ten of them from JavaScript,
where a rename fails silently. See docs/reference/tokens.md section 9. */
:root {
--primary: #0f62fe;
--primary-light: #edf5ff;
--success: #198038;
--warning: #8e6a00;
--warning-bg: #fdf6dd;
--danger: #da1e28;
--text: #161616;
--text-light: #525252;
--text-dim: #8d8d8d;
--border: #e0e0e0;
--border-strong: #8d8d8d;
--bg: #f4f4f4;
--bg-card: #ffffff;
--appbar: #161616;
--shadow: none;
--shadow-lg: 0 4px 16px rgba(0,0,0,0.16);
--primary: var(--cds-interactive-01);
--primary-light: var(--cds-highlight);
--success: var(--cds-support-success);
--warning: var(--wp-status-warning-text);
--warning-bg: var(--wp-status-warning-bg);
--danger: var(--cds-support-error);
--text: var(--cds-text-primary);
--text-light: var(--cds-text-secondary);
--text-dim: var(--cds-ui-04);
--border: var(--cds-border-subtle);
--border-strong: var(--cds-border-strong);
--bg: var(--cds-background);
--bg-card: var(--cds-layer);
--appbar: var(--wp-appbar-bg);
--shadow: var(--wp-shadow-none);
/* Neutral, where the creator's --shadow-lg is cool-tinted. Same geometry in
both — 0 4px 16px — so the two can be merged later without moving anything;
merging is still a rendered change, so not here. tokens.md section 8-F. */
--shadow-lg: var(--wp-shadow-lg-neutral);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
font-family: var(--wp-font-sans);
color: var(--text);
background: var(--bg);
line-height: 1.5;
@@ -40,7 +47,7 @@ body {
One row still measures exactly 48px, so nothing moves at desk width. */
.header {
background: var(--appbar);
color: #fff;
color: var(--wp-appbar-fg);
padding: 0 16px;
min-height: 48px;
display: flex;
@@ -75,7 +82,7 @@ body {
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
background: var(--cds-ui-01);
padding: 4px 8px;
border-radius: 4px;
text-decoration: none;
@@ -102,13 +109,13 @@ body {
font-size: 15px;
font-weight: 600;
margin-bottom: 0;
color: #fff;
color: var(--wp-appbar-fg);
white-space: nowrap;
}
.header-subtitle {
font-size: 12px;
color: #c6c6c6;
color: var(--wp-appbar-fg-dim);
min-height: 16px;
white-space: nowrap;
overflow: hidden;
@@ -130,8 +137,8 @@ body {
.header-button {
padding: 7px 14px;
background: transparent;
color: #fff;
border: 1px solid #6f6f6f;
color: var(--wp-appbar-fg);
border: 1px solid var(--wp-appbar-border);
border-radius: 0;
cursor: pointer;
font-size: 14px;
@@ -140,14 +147,14 @@ body {
}
.header-button:hover {
background: #353535;
border-color: #6f6f6f;
background: var(--wp-appbar-hover);
border-color: var(--wp-appbar-border);
}
.step-counter {
background: transparent;
border: 1px solid #6f6f6f;
color: #c6c6c6;
border: 1px solid var(--wp-appbar-border);
color: var(--wp-appbar-fg-dim);
padding: 4px 10px;
border-radius: 20px;
font-size: 12px;
@@ -276,7 +283,7 @@ body.embed-full { overflow: hidden; }
}
.step-item:hover { background: var(--bg); border-color: var(--border-strong); color: var(--text); }
.step-item.active { background: var(--primary); color: white; border-color: var(--primary); font-weight: 600; }
.step-item.active { background: var(--primary); color: var(--cds-text-on-color); border-color: var(--primary); font-weight: 600; }
/* STEP CONTENT */
.step-content {
@@ -464,7 +471,7 @@ body.embed-full { overflow: hidden; }
.add-btn {
padding: 0.7rem 1.25rem;
background: var(--primary);
color: white;
color: var(--cds-text-on-color);
border: none;
border-radius: 0;
font-size: 14px;
@@ -473,7 +480,7 @@ body.embed-full { overflow: hidden; }
transition: background 0.2s;
}
.add-btn:hover { background: var(--cds-hover-primary, #0353e9); }
.add-btn:hover { background: var(--cds-hover-primary); }
.nav-btn {
padding: 0.7rem 1.4rem;
@@ -491,11 +498,11 @@ body.embed-full { overflow: hidden; }
.nav-btn.primary {
background: var(--success);
color: white;
color: var(--cds-text-on-color);
border-color: var(--success);
}
.nav-btn.primary:hover { background: #0e6027; border-color: #0e6027; color: white; }
.nav-btn.primary:hover { background: var(--wp-hover-success); border-color: var(--wp-hover-success); color: var(--cds-text-on-color); }
.nav-btn:disabled { opacity: 0.5; cursor: not-allowed; }
@@ -529,7 +536,7 @@ body.embed-full { overflow: hidden; }
transition: all 0.2s;
}
.comments-toggle:hover { background: var(--primary); color: white; }
.comments-toggle:hover { background: var(--primary); color: var(--cds-text-on-color); }
/* CONSTRUCTION SEQUENCE (drag & drop) */
#sequence-list { display: flex; flex-direction: column; gap: 8px; }
@@ -552,14 +559,14 @@ body.embed-full { overflow: hidden; }
}
.seq-step input.seq-label:focus { background: var(--bg); border-color: var(--primary); outline: none; }
.seq-del {
background: var(--danger); color: white; border: none; border-radius: 4px;
background: var(--danger); color: var(--cds-text-on-color); border: none; border-radius: 4px;
width: 28px; height: 28px; cursor: pointer; font-weight: 600; flex-shrink: 0;
}
.seq-arrow { text-align: center; color: var(--text-dim); font-size: 13px; line-height: .4; margin: -2px 0; }
.seq-step.gate { border-color: var(--warning); background: var(--warning-bg); border-style: dashed; }
.seq-step.gate .seq-label { color: var(--warning); font-weight: 500; }
.seq-gate-badge {
flex-shrink: 0; padding: 3px 9px; border-radius: 20px; background: var(--warning); color: #fff;
flex-shrink: 0; padding: 3px 9px; border-radius: 20px; background: var(--warning); color: var(--cds-text-on-color);
font-size: 9px; font-weight: 600; letter-spacing: .08em; white-space: nowrap;
}
@@ -603,7 +610,7 @@ body.embed-full { overflow: hidden; }
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
background: var(--wp-scrim-neutral);
display: flex;
align-items: center;
justify-content: center;