/* WallMock appearance: Light / Dark / System (SECOND theme package 1.0.1). Load AFTER studio.css and inspector.css. Scope: the Studio app shell (html[data-theme] set by theme-early.js / theme.js). Rules of this file: - Light = today's warm identity. Section 1 only ADDS new tokens (light values equal to the baseline literals they name) and every dark rule is under :root[data-theme="dark"]. The ONE deliberate light change is section 1b (--muted, authorized by the root review 2026-09-26 for readability): light is baseline-identical except colours that are, or derive from, --muted. - Dark = neutral layered charcoal: paper < surface < raised; sunk/stage darker. Restrained green accent; readable secondary text. - Never touches img / picture / video / canvas / downloads: no filter, invert, blend or recolour anywhere in this file. Material and product swatches (canvas, wood, metal, painted, mat/core colours) and overlays drawn ON photographs keep their literal colours. - No universal selectors. Baseline adaptations use :where(:root[data-theme="dark"]) so they keep the baseline selector's specificity and win only by source order (e.g. .btn is adapted without overriding .btn.secondary / .btn.quiet / .btn.danger). Baseline = opus-theme-support/baseline/studio.css d809132d… and inspector.css d93d27b4…; line numbers below refer to those files. */ /* ---- 1. New semantic tokens: light values (= the current look) ------------------------------------------------------------------ */ :root { --wm-raised: #ffffff; /* menus, popovers, the selected pill of a segmented control */ --wm-on-ink: #ffffff; /* text/icons on an ink-filled control (.btn primary, pressed .cat, .slot-n) */ --wm-ink-hover: #000000; /* .btn primary hover (studio.css L70) */ --wm-hover: rgba(28, 26, 22, .06); /* quiet hover wash (L76) */ --wm-pressed: rgba(28, 26, 22, .10); --wm-well: rgba(28, 26, 22, .05); /* recessed track of .tabs (L56); .segmented uses .06 (L88) */ --wm-line-hover: rgba(28, 26, 22, .34); /* hovered hairline (L74, L86) */ --wm-topbar-bg: rgba(245, 243, 238, .82); /* translucent header (L52) */ --wm-progress-scrim: rgba(245, 243, 238, .72); /* busy veil over the stage (L137) */ --wm-toast-bg: rgba(26, 25, 22, .94); /* L201 */ --wm-toast-ink: #ffffff; --wm-focus-shadow: 0 0 0 3px rgba(47, 111, 87, .18); /* input focus halo (L87) */ --wm-scrim: rgba(20, 24, 22, .32); /* behind sheets / menus / the viewer on phones (inspector.css L208) */ --wm-selected: var(--accent); /* selection ring / tick */ --wm-selected-soft: var(--accent-soft); --wm-disabled-bg: var(--sunk); /* = .btn:disabled today (L72) */ --wm-disabled-ink: var(--muted); --wm-invalid: var(--bad); --wm-invalid-shadow: 0 0 0 3px rgba(154, 47, 34, .16); --wm-progress-track: rgba(28, 26, 22, .08); --wm-progress-bar: var(--accent); --wm-viewer-bg: var(--stage); /* full-size result viewer surround (new component: PRIMARY) */ --wm-viewer-chrome: rgba(255, 254, 251, .92); --wm-viewer-ink: var(--ink); --wm-menu-shadow: 0 1px 2px rgba(28, 26, 22, .06), 0 18px 40px -18px rgba(28, 26, 22, .35); --wm-heart-on: #ffffff; /* pressed heart disc on photos (L185) */ } /* ---- 1b. Authorized light readability delta (root review 2026-09-26): an explicit integration change, not baseline-identical ------ Baseline --muted #77736b is 4.26:1 on --paper #f5f3ee and 3.93:1 on --sunk #edeae3, under WCAG AA 4.5:1 for normal-size text. The review's suggested #6f6a62 measured 4.47:1 on --sunk (the failed-result "Failed" label), so the measured equivalent #6c675f is used: same warm hue, >= 4.5:1 on --paper 5.06, --surface 5.61, --sunk 4.67 and --stage 4.50 (results/1.0.1/muted.json, C4). Dark has its own. */ :root { --muted: #6c675f; } /* ---- 2. Colour scheme (native controls, scrollbars). PRIMARY also changes to "light dark". ---------------- */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* ---- 3. Dark: the baseline tokens (studio.css :root) + the new ones ------------------------------------------------------------- */ :root[data-theme="dark"] { --paper: #141414; /* page */ --surface: #1c1c1c; /* cards, panels, inputs */ --sunk: #0f0f0f; /* recessed wells */ --stage: #0d0d0d; /* neutral photo stage (no tint: photos are judged against neutral dark) */ --glass: rgba(30, 30, 30, .84); --line: rgba(255, 255, 255, .09); --line-strong: rgba(255, 255, 255, .18); --ink: #ededeb; --ink-2: #cfcdc8; --muted: #a8a59f; --faint: #7d7a74; --accent: #8cc9aa; /* light sage: text, borders, fills with --accent-ink */ --accent-ink: #0e2118; --accent-soft: rgba(140, 201, 170, .15); --moss: #9cc9ad; --heart: #ff6f63; --focus: #a3dcc0; --warn: #f1c67f; --warn-soft: rgba(241, 198, 127, .13); --bad: #ff9f92; --bad-soft: rgba(255, 128, 110, .14); --ok: #93d8ac; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5); --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 12px 30px -16px rgba(0, 0, 0, .75); --shadow-lift: 0 2px 6px rgba(0, 0, 0, .45), 0 24px 48px -22px rgba(0, 0, 0, .85); --shadow-photo: 0 1px 2px rgba(0, 0, 0, .55), 0 18px 40px -20px rgba(0, 0, 0, .85); /* baseline aliases (studio.css) that hold literals */ --forest-2: #b4dcc6; --moss-2: rgba(140, 201, 170, .35); --gold-bg: rgba(241, 198, 127, .13); --gold-ink: #f1c67f; --ok-bg: rgba(147, 216, 172, .13); /* new tokens */ --wm-raised: #262626; --wm-on-ink: #141414; --wm-ink-hover: #ffffff; --wm-hover: rgba(255, 255, 255, .07); --wm-pressed: rgba(255, 255, 255, .12); --wm-well: rgba(255, 255, 255, .05); --wm-line-hover: rgba(255, 255, 255, .34); --wm-topbar-bg: rgba(20, 20, 20, .84); --wm-progress-scrim: rgba(13, 13, 13, .72); --wm-toast-bg: #2b2b2b; --wm-toast-ink: #f2f2f0; --wm-focus-shadow: 0 0 0 3px rgba(163, 220, 192, .28); --wm-scrim: rgba(0, 0, 0, .62); --wm-disabled-bg: #242424; --wm-disabled-ink: #8f8c86; --wm-invalid-shadow: 0 0 0 3px rgba(255, 159, 146, .24); --wm-progress-track: rgba(255, 255, 255, .10); --wm-viewer-bg: #0b0b0b; --wm-viewer-chrome: rgba(28, 28, 28, .92); --wm-menu-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 44px -18px rgba(0, 0, 0, .9); --wm-heart-on: #262626; /* dark only: the neutral "wall" behind product thumbnails, so black, walnut and white products all read (the product drawing itself keeps its literal colours; >= 3:1 against both a painted-black frame and the panel) */ --wm-swatch-wall: #6b6760; --wm-swatch-ring: rgba(255, 255, 255, .38); } /* ---- 4. Dark adaptations of baseline literals (studio.css / inspector.css). Each is the literal replaced by its token; PRIMARY can instead replace the literal in its own CSS with the token (then the matching rule here becomes redundant and harmless). ------ */ :where(:root[data-theme="dark"]) .topbar { background: var(--wm-topbar-bg); } /* studio L52 */ :where(:root[data-theme="dark"]) .brand::before, :where(:root[data-theme="dark"]) .signin-brand::before { box-shadow: inset 0 0 0 4.5px var(--paper), inset 0 0 0 5.5px var(--ink); } /* L54, L670 */ :where(:root[data-theme="dark"]) .tabs { background: var(--wm-well); } /* L56 */ :where(:root[data-theme="dark"]) .tabs a:hover { background: var(--wm-hover); } /* L58 */ :where(:root[data-theme="dark"]) .tabs a[aria-current="page"] { background: var(--wm-raised); box-shadow: inset 0 0 0 1px var(--line); } /* L59 */ :where(:root[data-theme="dark"]) .btn { color: var(--wm-on-ink); } /* L67 */ :where(:root[data-theme="dark"]) .btn:hover { background: var(--wm-ink-hover); } /* L70 */ :where(:root[data-theme="dark"]) .btn.secondary:hover { border-color: var(--wm-line-hover); } /* L74 */ :where(:root[data-theme="dark"]) .btn.quiet:hover { background: var(--wm-hover); } /* L76 */ :where(:root[data-theme="dark"]) .btn .btn-count { background: rgba(0, 0, 0, .12); } /* L78 (on the light primary) */ :where(:root[data-theme="dark"]) .btn.danger { border-color: rgba(255, 159, 146, .38); } /* L515 */ :where(:root[data-theme="dark"]) .btn.danger:disabled { background: var(--wm-disabled-bg); color: var(--wm-disabled-ink); border-color: var(--line); } /* L370 */ :where(:root[data-theme="dark"]) .input:hover { border-color: var(--wm-line-hover); } /* L86 */ :where(:root[data-theme="dark"]) .input:focus-visible { box-shadow: var(--wm-focus-shadow); } /* L87 */ :where(:root[data-theme="dark"]) .segmented { background: var(--wm-well); } /* L88 */ :where(:root[data-theme="dark"]) .segmented label:has(input:checked) { background: var(--wm-raised); box-shadow: inset 0 0 0 1px var(--line); } /* L92 */ :where(:root[data-theme="dark"]) .progress { background: var(--wm-progress-scrim); } /* L137 */ :where(:root[data-theme="dark"]) .heart:hover { background: var(--wm-raised); } /* L182 */ :where(:root[data-theme="dark"]) .heart[aria-pressed="true"] { background: var(--wm-heart-on); } /* L185 */ :where(:root[data-theme="dark"]) .toast { background: var(--wm-toast-bg); color: var(--wm-toast-ink); box-shadow: 0 0 0 1px var(--line), 0 12px 30px -12px rgba(0, 0, 0, .7); } /* L201 */ :where(:root[data-theme="dark"]) .review-table td.held .cell { background: rgba(140, 160, 230, .14); color: #bcc6f2; } /* L346 */ :where(:root[data-theme="dark"]) .exceptions li.held { color: #bcc6f2; } /* L349 */ :where(:root[data-theme="dark"]) .server-choice { border-color: rgba(241, 198, 127, .26); background: rgba(241, 198, 127, .06); } /* L353 */ :where(:root[data-theme="dark"]) .cat[aria-pressed="true"] { color: var(--wm-on-ink); } /* L471 */ :where(:root[data-theme="dark"]) .cat[aria-pressed="true"] .n { color: rgba(20, 20, 20, .68); } /* L473 */ :where(:root[data-theme="dark"]) .howto-steps li::before { color: var(--wm-on-ink); } /* L484 */ :where(:root[data-theme="dark"]) .demo { border-color: rgba(241, 198, 127, .38); } /* L513 */ :where(:root[data-theme="dark"]) .toggle button[aria-checked="true"] { background: var(--wm-raised); box-shadow: inset 0 0 0 1px var(--line); } /* L522 */ :where(:root[data-theme="dark"]) .plan-card .ribbon { color: var(--accent-ink); } /* L527 */ :where(:root[data-theme="dark"]) .silhouette i { background: var(--surface); } /* L578 */ :where(:root[data-theme="dark"]) .slot-n { color: var(--wm-on-ink); } /* L683 */ :where(:root[data-theme="dark"]) .wall-previews { border-top-color: rgba(241, 198, 127, .26); } /* L704 */ :where(:root[data-theme="dark"]) .rcard-pic .pill.rendering { background: rgba(52, 42, 24, .94); } /* L708: pill on a photo */ :where(:root[data-theme="dark"]) .rcard-pic .pill.failed { background: rgba(62, 30, 26, .95); } /* L709 */ :where(:root[data-theme="dark"]) .rcard-pic .pill.done { color: var(--accent-ink); } /* L710 */ :where(:root[data-theme="dark"]) .stage-bar [data-key="back-preview"], :where(:root[data-theme="dark"]) .stage-bar [data-key="back-rooms"] { background: var(--glass); box-shadow: 0 0 0 1px var(--line), 0 6px 16px -8px rgba(0, 0, 0, .7); } /* L818 */ /* inspector.css */ :where(:root[data-theme="dark"]) .wmi-btn.is-danger-fill { color: var(--wm-on-ink); } /* inspector L52 */ :where(:root[data-theme="dark"]) .wmi-btn.is-primary:disabled, :where(:root[data-theme="dark"]) .wmi-btn.is-primary[aria-disabled="true"], :where(:root[data-theme="dark"]) .wmi-btn.is-quiet:disabled, :where(:root[data-theme="dark"]) .wmi-btn.is-secondary:disabled, :where(:root[data-theme="dark"]) .wmi-btn.is-quiet[aria-disabled="true"] { color: var(--wm-disabled-ink); } /* inspector L54, L55 */ :where(:root[data-theme="dark"]) .wmi-tab.is-on { color: var(--wm-on-ink); } /* inspector L74 */ :where(:root[data-theme="dark"]) .wmi-tab.is-on .wmi-tab-dot { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); } /* inspector L78 */ :where(:root[data-theme="dark"]) .wmi-sw-tick { color: var(--wmi-accent-ink); } /* inspector L119 */ :where(:root[data-theme="dark"]) .wmi.wmi--sheet.wmi--full::before { background: var(--wm-scrim); } /* inspector L208 */ /* swatch chrome only (the tile and ring around a material, never the material): a dark tile would hide black frames and boards */ :where(:root[data-theme="dark"]) .wmi-sw-art, :where(:root[data-theme="dark"]) .wmi-sw.is-on .wmi-sw-art { background: var(--wm-swatch-wall); } /* inspector L104, L122 */ :where(:root[data-theme="dark"]) .wmi-chip-sw { box-shadow: inset 0 0 0 1px var(--wm-swatch-ring); } /* inspector L244 */ :where(:root[data-theme="dark"]) .swatch i { box-shadow: inset 0 0 0 1px var(--wm-swatch-ring); } /* studio L103 */ /* simple-1 delta (PRIMARY's newest candidate; classes absent from baseline/): the same chrome-only treatment for its look and mat-style pictures. Line numbers refer to baseline-simple1/studio.css 99d463e7… and inspector.css 4308e64c…; proven in fixture/delta-simple1.html */ :where(:root[data-theme="dark"]) .look-sw { box-shadow: inset 0 0 0 1px var(--wm-swatch-ring), 0 1px 2px rgba(0, 0, 0, .5); } /* simple-1 studio L924 */ :where(:root[data-theme="dark"]) .look-sw.wrap { box-shadow: inset 0 0 0 1px var(--wm-swatch-ring), 2px 2px 0 -1px rgba(0, 0, 0, .5); } /* L926 */ :where(:root[data-theme="dark"]) .wmi-mat-art { box-shadow: inset 0 0 0 1px var(--wm-swatch-ring), 0 2px 5px -2px rgba(0, 0, 0, .6); } /* simple-1 inspector L266 */ /* Deliberately NOT adapted (literal on purpose): overlays drawn on photographs (.scene .guide/.zone, .zone-edit/-handle, .tile-check, .guide .panel-n, .rcard-pic .pill.approx, .rcard-pic .guide/.zone), the material colours of product swatches (.chip.canvas, .swatch i fill, .wmi-sw-art::before, .wmi-sw-canvas, .wmi-chip-sw fill, .wmi-tab-dot.is-canvas; only their tile/ring above), switch knobs and range thumbs (#fff on a filled track), the development-only .devbar, and landing-page .lp-* (public site, outside the app shell). Shadows keep their dark rgba. */ /* ---- 5. Motion: the baseline already removes transitions/animations under prefers-reduced-motion; this file adds none. ------------ */