n.siegfried
9ab7b48de2
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>
252 lines
9.0 KiB
CSS
252 lines
9.0 KiB
CSS
/* ============================================================================
|
|
SHARED APP CHROME — project switcher + global search
|
|
----------------------------------------------------------------------------
|
|
Injected by wp-chrome.js into whichever top bar a page has: the dark UI-shell
|
|
bar (.wp-appbar on index / admin / field) or the older light bars (.header on
|
|
the SOP suite and the WP creator). The two live side by side, so every colour
|
|
here comes from a variable that wp-chrome.js sets per host bar — the markup and
|
|
behaviour are identical on both.
|
|
============================================================================ */
|
|
.wp-chrome {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
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: 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: 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 ──────────────────────────────────────────────── */
|
|
/* Inserted by wp-chrome.js as the top bar's next sibling, so it sits directly
|
|
under the bar in normal flow and can never overlap it or eat its height (the
|
|
bar is sticky; this strip scrolls away under it). `flex: 0 0 auto` is for the
|
|
suite page, whose shell is a flex column — without it the strip would squash.
|
|
Amber tokens are the suite's warning set, same as the sync badge. */
|
|
.wpc-archived {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
padding: 9px 16px;
|
|
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: var(--wp-font-sans-2);
|
|
font-size: 13.5px;
|
|
line-height: 1.35;
|
|
}
|
|
.wpc-archived-ico { flex: 0 0 auto; font-size: 14px; }
|
|
.wpc-archived-text { min-width: 0; } /* wraps instead of forcing a scrollbar */
|
|
@media (max-width: 620px) {
|
|
.wpc-archived { padding: 8px 12px; font-size: 13px; }
|
|
}
|
|
|
|
/* ── project switcher ─────────────────────────────────────────────────────── */
|
|
.wpc-proj { position: relative; flex: 0 0 auto; }
|
|
.wpc-proj-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
max-width: 280px;
|
|
padding: 5px 10px;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: 3px;
|
|
color: var(--wpc-fg);
|
|
font: inherit;
|
|
font-size: 13px;
|
|
line-height: 1.25;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
.wpc-proj-btn:hover { background: var(--wpc-hover); border-color: var(--wpc-border); }
|
|
.wpc-proj-btn[aria-expanded="true"] { background: var(--wpc-hover); border-color: var(--wpc-border); }
|
|
.wpc-proj-labels { min-width: 0; }
|
|
.wpc-proj-kicker {
|
|
display: block;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
letter-spacing: .06em;
|
|
text-transform: uppercase;
|
|
color: var(--wpc-fg-dim);
|
|
}
|
|
/* B2. These two caps are the "does not fit 280px" the review measured: a real name
|
|
ran past 240px and was ellipsised on the one control whose job is to say which job
|
|
you are in. Above 1024px the bar has the room, so the caps are raised until a real
|
|
project name fits — "Micron EUV Cleanroom Enable 2667008" is the one to test with.
|
|
Below 1024px the label is the project number instead (see wp-chrome.js), which is
|
|
short enough that these caps never bite. The ellipsis stays only as a backstop for
|
|
a name longer than anything real. */
|
|
.wpc-proj-name {
|
|
display: block;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 240px;
|
|
}
|
|
@media (min-width: 1024px) {
|
|
.wpc-proj-btn { max-width: 400px; }
|
|
.wpc-proj-name { max-width: 340px; }
|
|
}
|
|
.wpc-caret { flex: 0 0 auto; align-self: flex-end; margin-bottom: 3px; font-size: 10px;
|
|
line-height: 1; color: var(--wpc-fg-dim); }
|
|
|
|
/* ── dropdown / results panel (shared shell) ──────────────────────────────── */
|
|
.wpc-pop {
|
|
position: absolute;
|
|
top: calc(100% + 6px);
|
|
left: 0;
|
|
z-index: 2000;
|
|
min-width: 320px;
|
|
max-width: min(460px, 92vw);
|
|
max-height: min(70vh, 560px);
|
|
overflow-y: auto;
|
|
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; }
|
|
.wpc-pop-head {
|
|
padding: 9px 12px 6px;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: .07em;
|
|
text-transform: uppercase;
|
|
color: var(--cds-text-helper);
|
|
border-bottom: 1px solid var(--wp-pop-divider);
|
|
}
|
|
.wpc-item {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
background: transparent;
|
|
border: 0;
|
|
border-left: 3px solid transparent;
|
|
text-align: left;
|
|
font: inherit;
|
|
font-size: 13px;
|
|
color: var(--cds-text-primary);
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
.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: 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 var(--wp-pop-divider);
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.wpc-foot-btn {
|
|
font: inherit;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
padding: 5px 10px;
|
|
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: 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,
|
|
which keeps the field mid-screen without absolute positioning (so it can never
|
|
sit on top of the bar's own buttons). */
|
|
.wpc-search {
|
|
position: relative;
|
|
flex: 1 1 auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
min-width: 0;
|
|
}
|
|
.wpc-search-box {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 560px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 10px;
|
|
height: 34px;
|
|
background: var(--wpc-bg);
|
|
border: 1px solid var(--wpc-border);
|
|
border-radius: 3px;
|
|
}
|
|
.wpc-search-box:focus-within { outline: 2px solid var(--wpc-accent); outline-offset: -2px; }
|
|
.wpc-search-ico { flex: 0 0 auto; color: var(--wpc-fg-dim); font-size: 13px; }
|
|
.wpc-search-input {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
outline: none;
|
|
color: var(--wpc-fg);
|
|
font: inherit;
|
|
font-size: 13.5px;
|
|
}
|
|
.wpc-search-input::placeholder { color: var(--wpc-fg-dim); }
|
|
.wpc-kbd {
|
|
flex: 0 0 auto;
|
|
font-family: var(--wp-font-mono-3);
|
|
font-size: 10.5px;
|
|
color: var(--wpc-fg-dim);
|
|
border: 1px solid var(--wpc-border);
|
|
border-radius: 3px;
|
|
padding: 1px 5px;
|
|
white-space: nowrap;
|
|
}
|
|
.wpc-search .wpc-pop { left: 50%; transform: translateX(-50%); min-width: min(560px, 92vw); }
|
|
.wpc-clear {
|
|
flex: 0 0 auto; background: transparent; border: 0; cursor: pointer;
|
|
color: var(--wpc-fg-dim); font: inherit; font-size: 14px; line-height: 1; padding: 2px 4px;
|
|
}
|
|
.wpc-clear:hover { color: var(--wpc-fg); }
|
|
|
|
/* ── narrow screens ───────────────────────────────────────────────────────── */
|
|
@media (max-width: 900px) {
|
|
.wpc-search-box { max-width: none; }
|
|
.wpc-kbd { display: none; }
|
|
.wpc-proj-btn { max-width: 190px; }
|
|
.wpc-proj-name { max-width: 150px; }
|
|
}
|
|
@media (max-width: 620px) {
|
|
/* Keep the switcher (you must be able to change project) and let the search
|
|
collapse to an icon-width field rather than pushing the bar out of shape. */
|
|
.wpc-proj-kicker { display: none; }
|
|
.wpc-search { flex: 1 1 120px; }
|
|
}
|