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

75
html/wp-chrome.css
View File

@@ -14,25 +14,28 @@
min-width: 0; /* lets the search shrink instead of overflowing */
flex: 1 1 auto;
}
/* Seven role names, resolved twice — once for each kind of host bar. The switch
is the point of this block and it stays; only the literals move behind the
canonical tokens in theme-light.css (T3.2 / S5 / C3). */
/* Light host bar (the two tool pages) */
.wp-chrome {
--wpc-fg: #161616;
--wpc-fg-dim: #525252;
--wpc-bg: #ffffff;
--wpc-bg-soft: #f4f4f4;
--wpc-border: #c6c6c6;
--wpc-hover: #e8e8e8;
--wpc-accent: #0f62fe;
--wpc-fg: var(--cds-text-primary);
--wpc-fg-dim: var(--cds-text-secondary);
--wpc-bg: var(--cds-layer);
--wpc-bg-soft: var(--cds-layer-accent);
--wpc-border: var(--cds-border-subtle-selected);
--wpc-hover: var(--cds-layer-hover);
--wpc-accent: var(--cds-interactive-01);
}
/* Dark host bar (the UI-shell appbar) */
.wp-chrome[data-bar="dark"] {
--wpc-fg: #ffffff;
--wpc-fg-dim: #c6c6c6;
--wpc-bg: #262626;
--wpc-bg-soft: #393939;
--wpc-border: #6f6f6f;
--wpc-hover: #353535;
--wpc-accent: #78a9ff;
--wpc-fg: var(--wp-appbar-fg);
--wpc-fg-dim: var(--wp-appbar-fg-dim);
--wpc-bg: var(--wp-appbar-layer);
--wpc-bg-soft: var(--cds-inverse-02);
--wpc-border: var(--wp-appbar-border);
--wpc-hover: var(--wp-appbar-hover);
--wpc-accent: var(--cds-link-inverse);
}
/* ── archived-project banner ──────────────────────────────────────────────── */
@@ -47,11 +50,11 @@
align-items: flex-start;
gap: 8px;
padding: 9px 16px;
background: #fdf6dd;
color: #8e6a00;
border-bottom: 1px solid #f1c21b;
background: var(--wp-status-warning-bg);
color: var(--wp-status-warning-text);
border-bottom: 1px solid var(--cds-support-warning);
border-radius: 0;
font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-family: var(--wp-font-sans-2);
font-size: 13.5px;
line-height: 1.35;
}
@@ -122,10 +125,10 @@
max-width: min(460px, 92vw);
max-height: min(70vh, 560px);
overflow-y: auto;
background: #fff;
color: #161616;
border: 1px solid #e0e0e0;
box-shadow: 0 8px 28px rgba(20, 30, 50, .22);
background: var(--cds-layer);
color: var(--cds-text-primary);
border: 1px solid var(--cds-border-subtle);
box-shadow: var(--wp-shadow-pop);
border-radius: 4px;
}
.wpc-pop[hidden] { display: none; }
@@ -135,8 +138,8 @@
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: #6f6f6f;
border-bottom: 1px solid #f0f0f0;
color: var(--cds-text-helper);
border-bottom: 1px solid var(--wp-pop-divider);
}
.wpc-item {
display: block;
@@ -148,19 +151,19 @@
text-align: left;
font: inherit;
font-size: 13px;
color: #161616;
color: var(--cds-text-primary);
cursor: pointer;
text-decoration: none;
}
.wpc-item:hover, .wpc-item.is-active { background: #f4f4f4; }
.wpc-item.is-current { border-left-color: #0f62fe; background: #edf5ff; }
.wpc-item:hover, .wpc-item.is-active { background: var(--cds-layer-accent); }
.wpc-item.is-current { border-left-color: var(--cds-interactive-01); background: var(--cds-highlight); }
.wpc-item-title { display: block; font-weight: 600; }
.wpc-item-sub { display: block; font-size: 11.5px; color: #6f6f6f; }
.wpc-item-mono { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size: 12px; color: #0f62fe; }
.wpc-empty { padding: 14px 12px; font-size: 13px; color: #6f6f6f; }
.wpc-item-sub { display: block; font-size: 11.5px; color: var(--cds-text-helper); }
.wpc-item-mono { font-family: var(--wp-font-mono-3); font-size: 12px; color: var(--cds-interactive-01); }
.wpc-empty { padding: 14px 12px; font-size: 13px; color: var(--cds-text-helper); }
.wpc-pop-foot {
padding: 8px 12px;
border-top: 1px solid #f0f0f0;
border-top: 1px solid var(--wp-pop-divider);
display: flex;
gap: 8px;
flex-wrap: wrap;
@@ -170,14 +173,14 @@
font-size: 12px;
font-weight: 600;
padding: 5px 10px;
border: 1px solid #c6c6c6;
background: #fff;
color: #161616;
border: 1px solid var(--cds-border-subtle-selected);
background: var(--cds-layer);
color: var(--cds-text-primary);
border-radius: 3px;
cursor: pointer;
text-decoration: none;
}
.wpc-foot-btn:hover { border-color: #0f62fe; color: #0f62fe; }
.wpc-foot-btn:hover { border-color: var(--cds-interactive-01); color: var(--cds-interactive-01); }
/* ── global search ────────────────────────────────────────────────────────── */
/* Centered in the bar: the wrapper takes the free space and centres a capped box,
@@ -218,7 +221,7 @@
.wpc-search-input::placeholder { color: var(--wpc-fg-dim); }
.wpc-kbd {
flex: 0 0 auto;
font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
font-family: var(--wp-font-mono-3);
font-size: 10.5px;
color: var(--wpc-fg-dim);
border: 1px solid var(--wpc-border);