From da94340e9b7c561d4eabc94ae18d99c70011c2f0 Mon Sep 17 00:00:00 2001 From: Abdul Wahab Date: Tue, 11 Aug 2026 18:13:54 +0500 Subject: [PATCH] =?UTF-8?q?Scale=20Docs=20board=20carry=20bars=20and=20fix?= =?UTF-8?q?=20Portfolio=20preview=20cells=2019=E2=80=9321.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Board-stage read artboards get thicker bar weight in picker.css; the gallery replica adds matching experiments plus desktop caption circles for Portfolio restrained/committed/drenched and drenched color roles on cell 21. AI-assisted commit. Co-authored-by: Cursor --- picker/styles/picker.css | 46 ++++++ tmp/questionaire/build-gallery-replica.mjs | 156 +++++++++++++++++- .../previews-gallery-improved.html | 4 +- 3 files changed, 202 insertions(+), 4 deletions(-) diff --git a/picker/styles/picker.css b/picker/styles/picker.css index 382b4e7ad..67343d526 100644 --- a/picker/styles/picker.css +++ b/picker/styles/picker.css @@ -3156,6 +3156,52 @@ body.picker-page { width: calc(2.64 * var(--pv-text) * var(--pv-x)); } +/* Board stage: the read artboard draws type as bars through [data-carry]. At + frame size those counts read as hairlines beside strategy's wireframe, which + carries its own step. Scale the bar ladder to match. */ +.picker-board-stage > [data-carry][data-surface="read"] { + --pvs-carry-weight: 1.65; +} + +.picker-board-stage > [data-carry][data-surface="read"] .ps-docs-item > i { + width: calc(var(--pt-base) * 0.34 * var(--pvs-carry-weight)); +} + +.picker-board-stage > [data-carry][data-surface="read"] :is( + .ps-docs-item b, + .ps-docs-crumb, + .ps-docs-note-copy b +) { + height: calc(var(--pt-base) * 0.26 * var(--pvs-carry-weight)); +} + +.picker-board-stage > [data-carry][data-surface="read"] :is( + .ps-docs-main .pt-headline i, + .ps-phone-body .pt-headline i +) { + height: calc(var(--pt-base) * 0.72 * var(--pvs-carry-weight)); +} + +.picker-board-stage > [data-carry][data-surface="read"] .ps-docs-sub { + height: calc(var(--pt-base) * 0.5 * var(--pvs-carry-weight)); +} + +.picker-board-stage > [data-carry][data-surface="read"] :is( + .ps-docs-lede i, + .ps-docs-para i, + .ps-docs-list li +) { + height: calc(var(--pt-base) * 0.3 * var(--pvs-carry-weight)); +} + +.picker-board-stage > [data-carry][data-surface="read"] .ps-docs-note-copy > span i { + height: calc(var(--pt-base) * 0.26 * var(--pvs-carry-weight)); +} + +.picker-board-stage > [data-carry][data-surface="read"] .ps-docs-list li::before { + width: calc(var(--pt-base) * 0.3 * var(--pvs-carry-weight)); +} + /* 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 5472e2177..01e1044b9 100644 --- a/tmp/questionaire/build-gallery-replica.mjs +++ b/tmp/questionaire/build-gallery-replica.mjs @@ -51,6 +51,135 @@ const DOCS_WEIGHT_CSS = [ '}', ].join('\n'); +const DOCS_CARRY_SCOPE = + 'html[data-cell-surface="read"]:is([data-cell-screen="08"], [data-cell-screen="09"], [data-cell-screen="10"])'; + +const DOCS_CARRY_ROOT = '[data-carry][data-surface="read"]'; + +const DOCS_CARRY_WEIGHT_CSS = [ + `${DOCS_CARRY_SCOPE} ${DOCS_CARRY_ROOT} {`, + ' --pvs-carry-weight: 1.65 !important;', + '}', + `${DOCS_CARRY_SCOPE} ${DOCS_CARRY_ROOT} .ps-docs-item > i {`, + ' width: calc(var(--pt-base) * 0.34 * var(--pvs-carry-weight)) !important;', + '}', + `${DOCS_CARRY_SCOPE} ${DOCS_CARRY_ROOT} :is(`, + ' .ps-docs-item b,', + ' .ps-docs-crumb,', + ' .ps-docs-note-copy b', + ') {', + ' height: calc(var(--pt-base) * 0.26 * var(--pvs-carry-weight)) !important;', + '}', + `${DOCS_CARRY_SCOPE} ${DOCS_CARRY_ROOT} :is(`, + ' .ps-docs-main .pt-headline i,', + ' .ps-phone-body .pt-headline i', + ') {', + ' height: calc(var(--pt-base) * 0.72 * var(--pvs-carry-weight)) !important;', + '}', + `${DOCS_CARRY_SCOPE} ${DOCS_CARRY_ROOT} .ps-docs-sub {`, + ' height: calc(var(--pt-base) * 0.5 * var(--pvs-carry-weight)) !important;', + '}', + `${DOCS_CARRY_SCOPE} ${DOCS_CARRY_ROOT} :is(`, + ' .ps-docs-lede i,', + ' .ps-docs-para i,', + ' .ps-docs-list li', + ') {', + ' height: calc(var(--pt-base) * 0.3 * var(--pvs-carry-weight)) !important;', + '}', + `${DOCS_CARRY_SCOPE} ${DOCS_CARRY_ROOT} .ps-docs-note-copy > span i {`, + ' height: calc(var(--pt-base) * 0.26 * var(--pvs-carry-weight)) !important;', + '}', + `${DOCS_CARRY_SCOPE} ${DOCS_CARRY_ROOT} .ps-docs-list li::before {`, + ' width: calc(var(--pt-base) * 0.3 * var(--pvs-carry-weight)) !important;', + '}', +].join('\n'); + +const DOCS_BOARD_CELLS = [ + 'boundaries--read--open-space', + 'boundaries--read--thin-dividers', + 'boundaries--read--surface-changes', + 'corners--read--sharp', + 'corners--read--slightly-soft', + 'corners--read--friendly', + 'corners--read--pill', + 'depth--read--flat', + 'depth--read--soft-lift', +]; + +const GALLERY_PREVIEW = + '#picker-form .picker-strategy-stage > .picker-preview.picker-preview--gallery'; + +function portfolioCapAvatarsCss(option, circle = 'neutral') { + const scope = + 'html[data-cell-screen="03"][data-cell-surface="experience"][data-cell-option="' + option + '"]'; + const capCircle = + circle === 'drenched' + ? [ + ' border: 1px solid color-mix(in oklab, var(--pkc-p-ink) 40%, var(--pkc-primary));', + ' background: linear-gradient(', + ' 135deg,', + ' color-mix(in oklab, var(--pkc-p-ink) 16%, var(--pkc-primary)),', + ' color-mix(in oklab, var(--pkc-p-ink) 28%, var(--pkc-primary))', + ' );', + ].join('\n') + : circle === 'committed' + ? [ + ' border: 1px solid color-mix(in oklab, var(--pkc-primary) 42%, var(--pkc-neutral));', + ' background: linear-gradient(', + ' 135deg,', + ' color-mix(in oklab, var(--pkc-primary) 16%, var(--pkc-neutral)),', + ' color-mix(in oklab, var(--pkc-primary) 30%, var(--pkc-neutral))', + ' );', + ].join('\n') + : [ + ' border: 1px solid color-mix(in oklab, var(--pv-secondary) 55%, var(--pv-neutral));', + ' background: linear-gradient(', + ' 135deg,', + ' color-mix(in oklab, var(--pv-secondary) 24%, var(--pv-neutral)),', + ' color-mix(in oklab, var(--pv-secondary) 46%, var(--pv-neutral))', + ' );', + ].join('\n'); + + return [ + `${scope} ${GALLERY_PREVIEW} .pv-desktop .pg-cap {`, + ' padding-top: 5.2cqh !important;', + ' gap: 2.6cqh !important;', + '}', + `${scope} ${GALLERY_PREVIEW} .pv-desktop .pg-cap::before {`, + ' content: "";', + ' display: block;', + ' width: calc(11.5 * var(--pv-x));', + ' aspect-ratio: 1;', + ' border-radius: 50%;', + capCircle, + '}', + ].join('\n'); +} + +const PORTFOLIO_DRENCHED_COLOR_CSS = [ + 'html[data-cell-screen="03"][data-cell-surface="experience"][data-cell-option="drenched"]', + `${GALLERY_PREVIEW} {`, + ' --pv-secondary: var(--pkc-secondary) !important;', + ' --pv-tertiary: var(--pkc-tertiary) !important;', + ' --pv-bone: color-mix(in oklab, var(--pkc-p-ink) 55%, var(--pkc-primary)) !important;', + ' --pv-strong: var(--pkc-p-ink) !important;', + ' --pv-secondary-wash: color-mix(in oklab, var(--pkc-p-ink) 16%, var(--pkc-primary)) !important;', + '}', + 'html[data-cell-screen="03"][data-cell-surface="experience"][data-cell-option="drenched"]', + `${GALLERY_PREVIEW} .pv-image {`, + ' background: linear-gradient(', + ' 135deg,', + ' color-mix(in oklab, var(--pkc-p-ink) 16%, var(--pkc-primary)),', + ' color-mix(in oklab, var(--pkc-p-ink) 28%, var(--pkc-primary))', + ' ) !important;', + ' border-color: color-mix(in oklab, var(--pkc-p-ink) 40%, var(--pkc-primary)) !important;', + '}', + 'html[data-cell-screen="03"][data-cell-surface="experience"][data-cell-option="drenched"]', + `${GALLERY_PREVIEW} .pv-image::after {`, + ' background: var(--pkc-tertiary) !important;', + '}', +].join('\n'); + /** @type {{ id: string, cells: string[], css: string }[]} */ const EXPERIMENTS = [ { @@ -127,6 +256,26 @@ const EXPERIMENTS = [ ], css: DOCS_WEIGHT_CSS, }, + { + id: 'docs-board-carry-weight', + cells: DOCS_BOARD_CELLS, + css: DOCS_CARRY_WEIGHT_CSS, + }, + { + id: 'portfolio-restrained-cap-avatars', + cells: ['strategy--experience--restrained'], + css: portfolioCapAvatarsCss('restrained', 'neutral'), + }, + { + id: 'portfolio-committed-cap-avatars', + cells: ['strategy--experience--committed'], + css: portfolioCapAvatarsCss('committed', 'committed'), + }, + { + id: 'portfolio-drenched-gallery', + cells: ['strategy--experience--drenched'], + css: PORTFOLIO_DRENCHED_COLOR_CSS + '\n' + portfolioCapAvatarsCss('drenched', 'drenched'), + }, ]; const experiment = String.raw` @@ -188,8 +337,11 @@ replica = replica.replace( /

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

Replica of the ground-truth gallery with experiments on ' + '12 Drenched, ' - + '14–15 App UI color roles, and ' - + '16–18 Docs wireframe weight. ' + + '14–15 App UI color roles, ' + + '16–18 Docs strategy wireframe weight, and ' + + '45–47 / 59–62 / 71–72 Docs board bar weight, and ' + + '19–21 Portfolio caption circles (desktop), ' + + '21 drenched color roles. ' + 'Baseline: previews-gallery.html.

', ); diff --git a/tmp/questionaire/previews-gallery-improved.html b/tmp/questionaire/previews-gallery-improved.html index 381fdf2b8..b9dfbf272 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 experiments on 12 Drenched, 14–15 App UI color roles, and 16–18 Docs wireframe weight. Baseline: previews-gallery.html.

+

Replica of the ground-truth gallery with experiments on 12 Drenched, 14–15 App UI color roles, 16–18 Docs strategy wireframe weight, and 45–47 / 59–62 / 71–72 Docs board bar weight, and 19–21 Portfolio caption circles (desktop), 21 drenched color roles. Baseline: previews-gallery.html.

Palette @@ -934,7 +934,7 @@ Array.prototype.forEach.call(document.querySelectorAll('.scaler'), function (sca