From 457c2d877c57cbe7ffa7605379f64a9f29230677 Mon Sep 17 00:00:00 2001 From: Abdul Wahab Date: Tue, 11 Aug 2026 17:58:56 +0500 Subject: [PATCH] Improve strategy previews for Docs wireframe weight and App UI color roles. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Boost docs strategy-stage line and dot weight to match App UI legibility, keep phone artboard lines proportional via pv-text scaling, and extend the gallery replica experiments for cells 14–18. Co-authored-by: Cursor --- picker/styles/picker.css | 49 +++++++- tmp/questionaire/build-gallery-replica.mjs | 116 +++++++++++++----- .../previews-gallery-improved.html | 36 +++--- 3 files changed, 149 insertions(+), 52 deletions(-) diff --git a/picker/styles/picker.css b/picker/styles/picker.css index a06fb0e13..382b4e7ad 100644 --- a/picker/styles/picker.css +++ b/picker/styles/picker.css @@ -3105,10 +3105,57 @@ body.picker-page { any heavier stops being display type and becomes a slab. The nav is left out for the same kind of reason: it is the chrome all four cards share, and a visitor moving between tabs should not watch it change weight. */ -.picker-strategy-stage > .picker-preview:is(.picker-preview--ops, .picker-preview--docs, .picker-preview--gallery) .pv-desktop { +.picker-strategy-stage > .picker-preview:is(.picker-preview--ops, .picker-preview--gallery) .pv-desktop { --pv-text: 1.35; } +/* Docs wireframe counts run lighter than ops; the shared 1.35 step still reads + as hairlines beside the app UI on the same screen. Match ops legibility on + the stage for both desktop and phone. */ +.picker-strategy-stage > .picker-preview.picker-preview--docs { + --pv-text: 1.65; +} + +.picker-strategy-stage > .picker-preview.picker-preview--docs .pd-item i { + width: calc(4.07 * var(--pv-x)); +} + +.picker-strategy-stage > .picker-preview.picker-preview--docs .pd-item span { + height: calc(1.53 * var(--pv-text) * var(--pv-x)); +} + +.picker-strategy-stage > .picker-preview.picker-preview--docs .pd-para i { + height: calc(1.35 * var(--pv-text) * var(--pv-x)); +} + +.picker-strategy-stage > .picker-preview.picker-preview--docs .pd-note-dot { + width: calc(4.07 * var(--pv-x)); +} + +.picker-strategy-stage > .picker-preview.picker-preview--docs .pd-note-lines i { + height: calc(1 * var(--pv-text) * var(--pv-x)); +} + +/* Phone body lines keep the authored pv-x counts; only desktop needed the extra + step because strategy stage boosts --pv-text on the preview root while the + phone overrides below still bypass it. Restate phone lines with the same + pv-text mix as desktop so the two artboards stay in proportion. */ +.picker-strategy-stage > .picker-preview.picker-preview--docs .pd-phone-body .pd-para i { + height: calc(1.37 * var(--pv-text) * var(--pv-x)); +} + +.picker-strategy-stage > .picker-preview.picker-preview--docs .pd-phone-body .pd-note-lines i { + height: calc(0.83 * var(--pv-text) * var(--pv-x)); +} + +.picker-strategy-stage > .picker-preview.picker-preview--docs .pd-phone-body .pd-heading { + height: calc(2.53 * var(--pv-text) * var(--pv-x)); +} + +.picker-strategy-stage > .picker-preview.picker-preview--docs .pd-phone-body .pd-note-dot { + width: calc(2.64 * var(--pv-text) * var(--pv-x)); +} + /* One drawing is shown and the rest stay mounted, so switching costs an attribute rather than a rebuild. [hidden] is a display: none that the component's own display: grid outranks, so it is restated here. */ diff --git a/tmp/questionaire/build-gallery-replica.mjs b/tmp/questionaire/build-gallery-replica.mjs index 4af6f3526..5472e2177 100644 --- a/tmp/questionaire/build-gallery-replica.mjs +++ b/tmp/questionaire/build-gallery-replica.mjs @@ -1,5 +1,5 @@ -/* Build an untouched replica of previews-gallery.html, then apply color-only - experiments to selected strategy iframes. The source gallery stays baseline. */ +/* Build an untouched replica of previews-gallery.html, then apply experiments + to selected strategy iframes. The source gallery stays baseline. */ import { readFile, writeFile } from 'node:fs/promises'; import { fileURLToPath } from 'node:url'; @@ -12,11 +12,50 @@ const OUTPUT = path.join(HERE, 'previews-gallery-improved.html'); const OPS_PREVIEW = '#picker-form .picker-strategy-stage > .picker-preview.picker-preview--ops'; -/** @type {{ id: string, cell: string, css: string }[]} */ +const DOCS_PREVIEW = + '#picker-form .picker-strategy-stage > .picker-preview.picker-preview--docs'; + +const DOCS_SCOPE = + 'html[data-cell-screen="03"][data-cell-surface="read"]'; + +const DOCS_WEIGHT_CSS = [ + `${DOCS_SCOPE} ${DOCS_PREVIEW} {`, + ' --pv-text: 1.65 !important;', + '}', + `${DOCS_SCOPE} ${DOCS_PREVIEW} .pd-item i {`, + ' width: calc(4.07 * var(--pv-x)) !important;', + '}', + `${DOCS_SCOPE} ${DOCS_PREVIEW} .pd-item span {`, + ' height: calc(1.53 * var(--pv-text) * var(--pv-x)) !important;', + '}', + `${DOCS_SCOPE} ${DOCS_PREVIEW} .pd-para i {`, + ' height: calc(1.35 * var(--pv-text) * var(--pv-x)) !important;', + '}', + `${DOCS_SCOPE} ${DOCS_PREVIEW} .pd-note-dot {`, + ' width: calc(4.07 * var(--pv-x)) !important;', + '}', + `${DOCS_SCOPE} ${DOCS_PREVIEW} .pd-note-lines i {`, + ' height: calc(1 * var(--pv-text) * var(--pv-x)) !important;', + '}', + `${DOCS_SCOPE} ${DOCS_PREVIEW} .pd-phone-body .pd-para i {`, + ' height: calc(1.37 * var(--pv-text) * var(--pv-x)) !important;', + '}', + `${DOCS_SCOPE} ${DOCS_PREVIEW} .pd-phone-body .pd-note-lines i {`, + ' height: calc(0.83 * var(--pv-text) * var(--pv-x)) !important;', + '}', + `${DOCS_SCOPE} ${DOCS_PREVIEW} .pd-phone-body .pd-heading {`, + ' height: calc(2.53 * var(--pv-text) * var(--pv-x)) !important;', + '}', + `${DOCS_SCOPE} ${DOCS_PREVIEW} .pd-phone-body .pd-note-dot {`, + ' width: calc(2.64 * var(--pv-text) * var(--pv-x)) !important;', + '}', +].join('\n'); + +/** @type {{ id: string, cells: string[], css: string }[]} */ const EXPERIMENTS = [ { id: 'landing-drenched-color-roles', - cell: 'strategy--persuade--drenched', + cells: ['strategy--persuade--drenched'], css: [ 'html[data-cell-screen="03"][data-cell-surface="persuade"][data-cell-option="drenched"]', '#picker-form .picker-strategy-stage > .picker-preview[data-surface="persuade"] {', @@ -44,12 +83,10 @@ const EXPERIMENTS = [ }, { id: 'ops-committed-color-visibility', - cell: 'strategy--operate--committed', + cells: ['strategy--operate--committed'], css: [ 'html[data-cell-screen="03"][data-cell-surface="operate"][data-cell-option="committed"]', `${OPS_PREVIEW} {`, - ' /* Committed: primary owns the paper and the selection wash, not a 5% trace.', - ' Structure stays neutral like Restrained so accents still pop. */', ' --pv-neutral: color-mix(in oklab, var(--pkc-neutral) 84%, var(--pkc-primary)) !important;', ' --po-wash: color-mix(in oklab, var(--pkc-primary) 24%, var(--pkc-neutral)) !important;', '}', @@ -57,11 +94,10 @@ const EXPERIMENTS = [ }, { id: 'ops-full-palette-color-roles', - cell: 'strategy--operate--full-palette', + cells: ['strategy--operate--full-palette'], css: [ 'html[data-cell-screen="03"][data-cell-surface="operate"][data-cell-option="full-palette"]', `${OPS_PREVIEW} {`, - ' /* Full palette wireframe never assigns secondary; spread all four roles. */', ' --po-wash: color-mix(in oklab, var(--pkc-secondary) 22%, var(--pkc-neutral)) !important;', '}', 'html[data-cell-screen="03"][data-cell-surface="operate"][data-cell-option="full-palette"]', @@ -82,32 +118,43 @@ const EXPERIMENTS = [ '}', ].join('\n'), }, + { + id: 'docs-strategy-wireframe-weight', + cells: [ + 'strategy--read--restrained', + 'strategy--read--committed', + 'strategy--read--full-palette', + ], + css: DOCS_WEIGHT_CSS, + }, ]; const experiment = String.raw` -`; @@ -120,9 +167,11 @@ if (!html.includes('')) { throw new Error('Source gallery has no closing body tag'); } -for (const { cell } of EXPERIMENTS) { - if (!html.includes('data-cell="' + cell + '"')) { - throw new Error('Target cell not found: ' + cell); +for (const { cells } of EXPERIMENTS) { + for (const cell of cells) { + if (!html.includes('data-cell="' + cell + '"')) { + throw new Error('Target cell not found: ' + cell); + } } } @@ -137,12 +186,11 @@ replica = replica.replace( ); replica = replica.replace( /

Ground-truth extraction[\s\S]*?<\/p>/, - '

Replica of the ground-truth gallery with color-only experiments on ' - + 'Landing page + Drenched, ' - + 'App UI + Committed, and ' - + 'App UI + Full palette. ' - + 'Baseline: previews-gallery.html. ' - + 'Restrained is unchanged (reference).

', + '

Replica of the ground-truth gallery with experiments on ' + + '12 Drenched, ' + + '14–15 App UI color roles, and ' + + '16–18 Docs wireframe weight. ' + + 'Baseline: previews-gallery.html.

', ); await writeFile(OUTPUT, replica); diff --git a/tmp/questionaire/previews-gallery-improved.html b/tmp/questionaire/previews-gallery-improved.html index af2f70221..381fdf2b8 100644 --- a/tmp/questionaire/previews-gallery-improved.html +++ b/tmp/questionaire/previews-gallery-improved.html @@ -35,7 +35,7 @@ figure.cell iframe { display: block; border: 0; background: transparent; positio

Questionnaire previews (improved experiment)

-

Replica of the ground-truth gallery with color-only experiments on Landing page + Drenched, App UI + Committed, and App UI + Full palette. Baseline: previews-gallery.html. Restrained is unchanged (reference).

+

Replica of the ground-truth gallery with experiments on 12 Drenched, 14–15 App UI color roles, and 16–18 Docs wireframe weight. Baseline: previews-gallery.html.

Palette @@ -932,29 +932,31 @@ Array.prototype.forEach.call(document.querySelectorAll('.scaler'), function (sca }); -