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>
112 lines
5.2 KiB
CSS
112 lines
5.2 KiB
CSS
/* Global app navigation drawer (see wp-sidenav.js).
|
|
|
|
An off-canvas panel rather than a pinned rail, at every width: the field view is a
|
|
centred 760px column read on a phone or a tablet in a glove, and a permanent
|
|
sidebar would either squeeze that column or hide on the one device that matters.
|
|
Overlay behaves identically everywhere, which is also one less layout to test.
|
|
|
|
Colours come from the dark app bar it hangs off, so the drawer reads as an
|
|
extension of the bar. Until T3.2 that intent was written as hardcoded hex —
|
|
30 of them — which made the drawer only accidentally match the bar. It now
|
|
reads the same --wp-appbar-* tokens the bar does, so the stated intent is
|
|
actually true and flipping --wp-appbar-bg takes the drawer with it. */
|
|
|
|
.wp-navbtn{
|
|
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
|
|
width: 40px; height: 40px; margin-right: 4px; padding: 0;
|
|
background: none; border: none; border-radius: 0; cursor: pointer;
|
|
color: var(--cds-text-inverse); font-family: inherit; line-height: 1;
|
|
}
|
|
.wp-navbtn:hover{ background: var(--wp-appbar-hover); }
|
|
.wp-navbtn:focus-visible{ outline: 2px solid var(--wp-appbar-fg); outline-offset: -2px; }
|
|
/* A light bar (the SOP suite / creator headers) needs the opposite ink. */
|
|
.wp-navbtn[data-bar="light"]{ color: var(--cds-text-primary); }
|
|
.wp-navbtn[data-bar="light"]:hover{ background: var(--cds-layer-hover); }
|
|
|
|
.wp-navscrim{
|
|
position: fixed; inset: 0; z-index: 10010;
|
|
background: var(--wp-scrim-drawer);
|
|
opacity: 0; transition: opacity .18s ease;
|
|
}
|
|
.wp-navscrim.is-open{ opacity: 1; }
|
|
.wp-navscrim[hidden]{ display: none; }
|
|
|
|
.wp-sidenav{
|
|
position: fixed; top: 0; left: 0; bottom: 0; z-index: 10011;
|
|
width: min(284px, 84vw);
|
|
display: flex; flex-direction: column;
|
|
background: var(--wp-appbar-bg); color: var(--cds-text-inverse);
|
|
font-family: var(--wp-font-sans-2);
|
|
transform: translateX(-100%); transition: transform .2s ease;
|
|
box-shadow: var(--wp-shadow-drawer);
|
|
overflow: hidden;
|
|
}
|
|
.wp-sidenav.is-open{ transform: translateX(0); }
|
|
/* Respect a reduced-motion preference: the drawer still opens, it just doesn't slide. */
|
|
@media (prefers-reduced-motion: reduce){
|
|
.wp-sidenav, .wp-navscrim{ transition: none; }
|
|
}
|
|
|
|
.wp-sidenav-head{
|
|
display: flex; align-items: center; gap: 10px;
|
|
padding: 12px 14px; border-bottom: 1px solid var(--cds-inverse-02); flex: 0 0 auto;
|
|
}
|
|
.wp-sidenav-head .wp-logo-chip{ flex: 0 0 auto; }
|
|
.wp-sidenav-title{ font-size: 13px; font-weight: 600; line-height: 1.25; }
|
|
.wp-sidenav-title span{ display: block; font-size: 11px; font-weight: 400; color: var(--cds-text-placeholder); }
|
|
|
|
/* The active project, in full (B2). Below 1024px the app bar shows the project
|
|
number alone, so this is where the whole name has to be readable — it wraps on
|
|
as many lines as it needs and is never truncated. */
|
|
.wp-sidenav-proj{
|
|
padding: 12px 14px; border-bottom: 1px solid var(--cds-inverse-02); flex: 0 0 auto;
|
|
display: flex; flex-direction: column; gap: 2px;
|
|
}
|
|
.wp-sidenav-proj[hidden]{ display: none; }
|
|
.wp-sidenav-proj-k{
|
|
font-size: 10px; font-weight: 600; letter-spacing: .08em;
|
|
text-transform: uppercase; color: var(--cds-text-placeholder);
|
|
}
|
|
.wp-sidenav-proj strong{
|
|
font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--cds-text-inverse);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.wp-sidenav-proj-n{ font-size: 11px; color: var(--wp-appbar-fg-dim); }
|
|
.wp-sidenav-close{
|
|
margin-left: auto; width: 32px; height: 32px; padding: 0; flex: 0 0 auto;
|
|
background: none; border: none; border-radius: 0; color: var(--wp-appbar-fg-dim);
|
|
font-size: 18px; line-height: 1; cursor: pointer; font-family: inherit;
|
|
}
|
|
.wp-sidenav-close:hover{ background: var(--wp-appbar-hover); color: var(--wp-appbar-fg); }
|
|
|
|
.wp-sidenav-body{ flex: 1 1 auto; overflow-y: auto; padding: 6px 0 18px; }
|
|
.wp-sidenav-sect{
|
|
padding: 14px 16px 4px; font-size: 11px; font-weight: 600;
|
|
letter-spacing: .06em; text-transform: uppercase; color: var(--cds-ui-04);
|
|
}
|
|
.wp-sidenav-link{
|
|
display: flex; align-items: center; gap: 12px; width: 100%;
|
|
/* 44px minimum: this is tapped with a work glove on. */
|
|
min-height: 44px; padding: 10px 16px;
|
|
background: none; border: none; border-left: 3px solid transparent; border-radius: 0;
|
|
color: var(--cds-text-inverse); font: inherit; font-size: 14px; text-align: left; text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
.wp-sidenav-link:hover{ background: var(--wp-appbar-hover); }
|
|
.wp-sidenav-link:focus-visible{ outline: 2px solid var(--wp-appbar-fg); outline-offset: -2px; }
|
|
.wp-sidenav-link.is-current{ background: var(--wp-appbar-layer); border-left-color: var(--cds-interactive-01); font-weight: 600; }
|
|
.wp-sidenav-ico{
|
|
flex: 0 0 20px; width: 20px; text-align: center; font-size: 15px; color: var(--wp-appbar-fg-dim);
|
|
}
|
|
.wp-sidenav-link.is-current .wp-sidenav-ico{ color: var(--cds-link-inverse); }
|
|
.wp-sidenav-label{ flex: 1 1 auto; min-width: 0; }
|
|
.wp-sidenav-label small{ display: block; font-size: 11.5px; font-weight: 400; color: var(--cds-text-placeholder); }
|
|
|
|
.wp-sidenav-foot{
|
|
flex: 0 0 auto; border-top: 1px solid var(--cds-inverse-02); padding: 8px 0;
|
|
}
|
|
.wp-sidenav-who{
|
|
padding: 6px 16px 8px; font-size: 12px; color: var(--cds-text-placeholder);
|
|
}
|
|
.wp-sidenav-who strong{ display: block; color: var(--cds-text-inverse); font-size: 13px; font-weight: 600; }
|