justinzeus/wolfskin
1
0
Fork 0
Code Issues 2 Pull requests 12 Releases 3 Packages Activity

Unify focus rings on the approved accent straddle style

Browse source
This commit is contained in:
justinzeus 2026-11-06 15:52:02 +01:00
parent 93a41ea2d3
commit ef3ae3f21b
18 changed files with 173 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

55
wolfskin-design/tokens.json
View file

@ -1,5 +1,5 @@
{
"$description": "Wolfskin TV design tokens, extracted by script from the locked prototype (originally data/tv-v2/opus-final-2026-11-05/index.html, sha256 ee8844fc...; now amended in data/tv-v2/spacing-2026-11-06/index.html, sha256 fcc5d879...). Values are CSS px on the 1920x1080 stage; the box renders 1920x1080 at 320 dpi = density 2.0, so dp/sp = px / 2. Format follows the W3C design-tokens draft ($type/$value); extra keys: px, dp|sp, source (page file:line), usedBy, page (the page value where q1 consolidated it). Amended 2026-11-06 (spec revision 3, Level 2 spacing + card ring; data/tv-card-spacing/answers.md): card, layout.row*/gridRowGap and focus.ringCard changed; every other token is as extracted. The prototype source line numbers in `source` fields predate the amendment and drift by a few lines after index.html:8.",
"$description": "Wolfskin TV design tokens, spec revision 4: approved Level 2 card spacing and one accent straddle focus ring for cards, controls, avatars and picker people. Source: data/tv-v2/focus-2026-11-06/index.html. CSS px on a 1920x1080 stage at density 2.0; dp/sp = px / 2. Earlier prototype source coordinates remain provenance; revision 4 focus geometry is recorded explicitly in each focus ring token.",
"meta": {
"density": 2.0,
"stagePx": [
@ -10,8 +10,8 @@
960,
540
],
"source": "data/tv-v2/spacing-2026-11-06/index.html",
"sourceSha256": "fcc5d879c34da868b817f8d9d306193743d3933db3096da605bda659d8e633b2",
"source": "data/tv-v2/focus-2026-11-06/index.html",
"sourceSha256": "1bb7f4097a5303a58e45ec5e61cf867fa6cfdcbfe12fc7a196f00acacae5e48d",
"generator": "data/tv-spec-lane/scratch/extract.py + build_tokens.py"
},
"color": {
@ -20,7 +20,7 @@
"$value": "#07070a",
"css": "#07070a",
"source": "index.html:10",
"usedBy": "app background; stage; focus-ring gap colour; hero/detail scrim end; nav band when solid"
"usedBy": "app background; stage; hero/detail scrim end; nav band when solid"
},
"surface": {
"$type": "color",
@ -1338,33 +1338,48 @@
"outsidePx": 2,
"insidePx": 2
},
"ringButton": {
"ringControl": {
"$type": "shadow",
"$value": "0 0 0 4px var(--bg),0 0 0 8px var(--accent),0 12px 40px rgb(0 0 0 / .5)",
"gapPx": 4,
"$value": "0 0 0 2px var(--accent),inset 0 0 0 2px var(--accent),0 12px 40px rgb(0 0 0 / .5)",
"gapPx": 0,
"ringPx": 4,
"gapDp": 0,
"ringDp": 2,
"outsidePx": 2,
"insidePx": 2,
"alignment": "straddle",
"ringColor": "color.accent",
"liftShadow": "0 12px 40px rgb(0 0 0 / .5)",
"source": "index.html:110",
"usedBy": "focused pill and icon buttons (primary stays white, secondary lightens to buttonSecondaryFocused)"
"source": "index.html:111",
"usedBy": "focused pill and icon buttons, including hero, title, recovery and sheet actions; existing fills, text colours, scale and lift unchanged"
},
"ringAvatar": {
"$type": "shadow",
"$value": "0 0 0 4px var(--bg),0 0 0 8px var(--fg)",
"gapPx": 4,
"$value": "0 0 0 2px var(--accent),inset 0 0 0 2px var(--accent)",
"gapPx": 0,
"ringPx": 4,
"ringColor": "color.fg",
"source": "index.html:92",
"usedBy": "focused nav avatar and focused gear (white ring, not lilac)"
"gapDp": 0,
"ringDp": 2,
"outsidePx": 2,
"insidePx": 2,
"alignment": "straddle",
"ringColor": "color.accent",
"source": "index.html:92,312",
"usedBy": "focused nav avatar and gear; existing scale unchanged, no lift"
},
"ringPicker": {
"$type": "shadow",
"$value": "0 0 0 6px var(--bg),0 0 0 12px var(--fg)",
"gapPx": 6,
"ringPx": 6,
"ringColor": "color.fg",
"source": "index.html:263",
"usedBy": "focused person in Who's watching (white 6 + 6 ring; name turns fg)"
"$value": "0 0 0 2px var(--accent),inset 0 0 0 2px var(--accent)",
"gapPx": 0,
"ringPx": 4,
"gapDp": 0,
"ringDp": 2,
"outsidePx": 2,
"insidePx": 2,
"alignment": "straddle",
"ringColor": "color.accent",
"source": "index.html:265",
"usedBy": "focused person in Who's watching; scale 1.08, name turns fg, no lift"
},
"fillInverse": {
"$type": "rule",