UI-SPEC Option A landed end-to-end at the source layer:
- src/shared/brand/mokosh-mark.svg: single-attribute change on the root
<svg> — stroke="#181b2a" → stroke="currentColor". The 12 <line> + 1
<rect> children inherit stroke from the root and are UNCHANGED. This
switches the mark from a hardcoded near-black ink to inheriting the
parent CSS `color` cascade (W3C SVG2 §13.3).
- src/welcome/welcome.ts: `import markUrl from '..mokosh-mark.svg?url'`
→ `import markSvg from '..mokosh-mark.svg?raw'`. populateMark()
rewritten to inline-inject the SVG via DOMParser + replaceChildren
(NOT <img>, NEVER innerHTML — MV3 CSP discipline / T-04-06-01).
The inline <svg> inherits `color: var(--mks-fg-inverse)` from the
`.welcome-hero__mark` wrapper (welcome.css:67); on the dark surface
the `.dark` token override (tokens.css 234-251) flips the resolved
colour automatically — contrast-correct on both surfaces, no JS
branching. The bare class selector `.welcome-hero__mark-img`
(welcome.css:91-95) is tag-agnostic so width/height/display rules
apply identically to the injected <svg>. role='img' + aria-label
preserve the prior accessibility shape.
- globals.d.ts: append the `declare module '*.svg?raw'` ambient block
alongside the existing `*.svg?url` + `*.webm?url` blocks so tsc
accepts the new import.
Gates run:
- npx tsc --noEmit exit 0.
- npm test against tests/welcome/inline-svg.test.ts + tests/build/
cursor-visibility.test.ts: 4/4 GREEN (the 3 Wave-0 RED inline-svg
tests flipped to GREEN; cursor-visibility stays GREEN).
- Full vitest: 187 passed / 1 failed (188 total). The single RED is
tests/background/webm-remux.test.ts > ffprobe -count_frames timeout
— the documented 04-CONTEXT #9/#10 parallel-vitest / ffprobe flake
family. Re-run in isolation: 5/5 GREEN. TOLERATED per the Task 2
VITEST GATE LOGIC (isolation-passing flake is NOT a regression).
- npm run build exit 0; the welcome chunk JS bundles the raw SVG
source (currentColor + viewBox="0 0 32 32" both present in
dist/assets/welcome-Bkrf1_bZ.js).
References:
- 04-UI-SPEC.md §"Implementation amendment" (the 2-part technique).
- Vite ?raw query: https://vite.dev/guide/assets.html#importing-asset-as-string
- W3C SVG2 §13.3 (currentColor inheritance).
- DOMParser is CSP-safe per MDN (no script execution).
src/shared/tokens.css lands as the canonical token system — engineering
working copy of .planning/intel/design-incoming/system/bundle/mokosh-handoff/
tokens.css with three surgical edits per Plan 01-12:
1. Handoff's PREVIEW-ONLY Google Fonts @import (line 12) REMOVED +
replaced with 8 local @font-face rules pointing at ./fonts/*.woff2
(Lora normal + italic variable; Plex Sans Regular/Medium/SemiBold/Bold;
Plex Mono Regular/Medium). MV3 CSP self-host enforced
(style-src 'self' + font-src 'self').
2. --mks-font-display VALUE substituted from "Newsreader" to "Lora" per
R2 designer reply 2026-05-19 (Cyrillic coverage; brand-decisions-v1-
followup-display-font.md). The Lora foundry note is preserved in the
Type-section comment. ZERO Newsreader references remain anywhere in
the file (verified by grep).
3. .mks-word class added at end-of-file with the {font-family,font-size,
font-weight,letter-spacing,fill} declarations from the lockup SVG's
class="mks-word" usage. Required by mokosh-lockup.svg line 21 per
RESEARCH §8.
src/shared/brand/ engineering working copies of:
- mokosh-mark.svg (Loom 2×2 weave intersection at 32×32 viewBox)
- mokosh-lockup.svg (mark + Mokosh wordmark at 240×56 viewBox)
The intel/ design-incoming/ copies remain unchanged as the original
handoff source-of-truth.
Verification:
- googleapis count: 0 (MV3 CSP self-host invariant)
- Newsreader count: 0 (R2 substitution complete)
- @font-face count: 8 (Lora normal + italic + Plex Sans ×4 + Plex Mono ×2)
- .mks-word: 1 definition (referenced by mokosh-lockup.svg)
- Lora references: 13 (font-family stack + @font-face + comments)
- tests/build/fonts-present.test.ts: 10/10 GREEN
- tests/build/tokens-adopted.test.ts case (a): GREEN (tokens.css exists)
- tests/build/tokens-adopted.test.ts cases (b)(c): still RED (Wave 4 work)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
