@@ -530,7 +533,7 @@ const hook = type ? '' : undefined;
{type
- ?
+ ?
: }
))}
diff --git a/picker/scripts/palette-picker.js b/picker/scripts/palette-picker.js
index cca09325f..42244628a 100644
--- a/picker/scripts/palette-picker.js
+++ b/picker/scripts/palette-picker.js
@@ -62,13 +62,13 @@ const LOREM_PREVIEW = {
menuAction: 'Ipsum',
ctaPrimary: 'Lorem ipsum',
ctaSecondary: 'Dolor sit',
- proof: ['Lorem ipsum dolor', 'Sit amet elit', 'Sed do eiusmod', 'Tempor incididunt'],
- sectionTitle: 'Lorem ipsum dolor sit',
+ proof: ['Lorem ipsum dolor', 'Sit amet elit dolor', 'Sed do eiusmod', 'Tempor incididunt'],
+ sectionTitle: 'Lorem ipsum dolor',
sectionLink: 'Consectetur adipiscing',
gallery: [
- { title: 'Lorem', meta: 'Ipsum dolor' },
- { title: 'Dolor', meta: 'Sit amet' },
- { title: 'Eiusmod', meta: 'Tempor elit' },
+ { title: 'Lorem ipsum dolor', meta: 'sit amet consectetur' },
+ { title: 'Dolor sit amet', meta: 'consectetur elit' },
+ { title: 'Eiusmod tempor', meta: 'sed do eiusmod' },
],
footerLinks: ['Lorem', 'Ipsum', 'Dolor', 'Amet'],
footerMark: '© Lorem ipsum',
@@ -424,7 +424,10 @@ function fillBoard(board) {
fill('[data-type-cta-primary]', preview.ctaPrimary);
fill('[data-type-cta-secondary]', preview.ctaSecondary);
fill('[data-type-section-title]', preview.sectionTitle);
- fill('[data-type-section-body]', LOREM.paragraph);
+ fill(
+ '[data-type-section-body]',
+ `${LOREM.paragraph} Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.`,
+ );
fill('[data-type-section-link]', preview.sectionLink);
fill('[data-type-footer-mark]', preview.footerMark);
fill('[data-type-note-label]', LOREM_DOCS.note);
@@ -432,6 +435,13 @@ function fillBoard(board) {
fill('[data-type-crumb]', LOREM_DOCS.crumb);
fill('[data-type-caption]', LOREM.caption);
fill('[data-type-chart-title]', LOREM_APP.chartTitle);
+ const fillGalleryCaptions = (root, items) => {
+ if (!root) return;
+ root.querySelectorAll('.ps-gallery-item [data-type-gallery-caption]').forEach((node, index) => {
+ const item = items[index];
+ if (item) node.textContent = `${item.title} ${item.meta}`;
+ });
+ };
for (const card of [desktop, phoneBody]) {
fillIndexed(card, '[data-type-nav]', preview.nav);
fillIndexed(card, '[data-type-proof]', preview.proof);
@@ -447,6 +457,7 @@ function fillBoard(board) {
fillIndexed(card, '[data-type-amount]', LOREM_APP.amounts);
fillIndexed(card, '[data-type-panel]', LOREM_APP.panel);
fillIndexed(card, '[data-type-switch]', LOREM_APP.switches);
+ fillGalleryCaptions(card, preview.gallery);
}
fillIndexed(desktop?.querySelector('.ps-footer'), '[data-type-footer-link]', preview.footerLinks);
}
diff --git a/picker/styles/picker.css b/picker/styles/picker.css
index 67343d526..c5e9ad9f2 100644
--- a/picker/styles/picker.css
+++ b/picker/styles/picker.css
@@ -2230,6 +2230,7 @@ body.picker-page {
illustration and mapping its card box onto this one. */
.picker-preview--docs {
--pd-ink: var(--pv-bone);
+ --pd-quote: var(--pv-tertiary);
--pd-strong: color-mix(in oklab, var(--pv-primary) 80%, var(--pv-strong));
--pd-rule: color-mix(in oklab, var(--pv-neutral) 86%, var(--pv-n-ink));
}
@@ -2351,7 +2352,7 @@ body.picker-page {
align-self: start;
width: calc(2.64 * var(--pv-x));
aspect-ratio: 1;
- background: var(--pv-tertiary);
+ background: var(--pd-quote);
border-radius: 50%;
}
@@ -2366,7 +2367,7 @@ body.picker-page {
.pd-note-lines i {
width: var(--w, 100%);
height: calc(0.83 * var(--pv-text) * var(--pv-x));
- background: var(--pv-tertiary);
+ background: var(--pd-quote);
border-radius: 2px;
}
@@ -3335,6 +3336,10 @@ body.picker-page {
--pvs-accent-b: color-mix(in oklab, var(--pv-primary) 62%, var(--pv-neutral));
--pvs-accent-c: color-mix(in oklab, var(--pv-primary) 38%, var(--pv-neutral));
--pvs-accent-d: color-mix(in oklab, var(--pv-primary) 20%, var(--pv-neutral));
+ /* Primary fills label in the palette neutral; contrast-computed ink reads minty
+ on teal and fights the pair judgment this screen is for. Drenched overrides
+ below when the fill is page ink, not primary. */
+ --pvs-cta-text: var(--pv-neutral);
}
/* ============================================================
@@ -3373,6 +3378,13 @@ body.picker-page {
--pv-t-on-p: var(--pkc-p-ink);
}
+/* Restrained stands tertiary down into the ground; on a lifted note surface that
+ is the same mix as the panel, so the quote reads through body ink instead. */
+#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="restrained"]) .picker-strategy-stage > .picker-preview.picker-preview--docs,
+#picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="restrained"]:checked) .picker-strategy-stage > .picker-preview.picker-preview--docs {
+ --pd-quote: var(--pd-ink);
+}
+
/* Committed: one color doing all the work the other two were doing, and a
trace of it in the paper as well. Without the paper, a surface whose accents
are small (a dashboard, a doc) separates from restrained by a few tinted
@@ -5480,7 +5492,7 @@ body.picker-page {
/* The pair is the subject and the image is a placeholder for one, so the copy
takes the column and the image takes what it needs to read as a picture. */
.picker-preview-type .ps-hero {
- grid-template-columns: minmax(0, 1fr) 34%;
+ grid-template-columns: minmax(0, 1fr) 40%;
gap: var(--ps-gap-lg);
padding: var(--ps-band-y) var(--ps-gutter);
}
@@ -5547,18 +5559,19 @@ body.picker-page {
the type scale keeps the three cards reading as a set of labels. */
.picker-preview-type .ps-gallery-item {
grid-template-rows: auto auto;
- gap: var(--ps-gap-sm);
+ gap: var(--ps-gap-xs);
align-content: start;
}
.picker-preview-type .ps-gallery-item > i {
width: 100%;
- max-width: calc(var(--pt-base) * 4);
- aspect-ratio: 1;
+ max-width: none;
+ aspect-ratio: 3 / 2;
+ border-radius: var(--pvs-radius-frame);
}
.picker-preview-type .ps-desktop .ps-gallery-item > i {
- margin-inline: auto;
+ margin-inline: 0;
}
/* Words set taller than bars, and the phone is the narrowest frame they have
@@ -5588,29 +5601,29 @@ body.picker-page {
.picker-preview-type[data-surface="persuade"] .ps-phone-body {
grid-template-rows: repeat(5, auto);
- gap: 0;
+ gap: var(--ps-gap-md);
align-content: start;
}
.picker-preview-type[data-surface="persuade"] .ps-phone-body .pt-headline {
font-size: 26px;
line-height: 1.15;
- margin-block-end: 8px;
+ margin-block-end: 0;
}
.picker-preview-type[data-surface="persuade"] .ps-phone-body .pt-body {
- margin-block-end: var(--ps-gap-md);
+ margin-block-end: 0;
}
.picker-preview-type[data-surface="persuade"] .ps-phone-body .ps-actions {
- margin-block-end: var(--ps-gap-lg);
+ margin-block-end: 0;
}
.picker-preview-type[data-surface="persuade"] .ps-phone-body .ps-proof {
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
column-gap: var(--ps-gap-md);
- margin-block-end: var(--ps-gap-md);
+ margin-block-end: 0;
}
.picker-preview-type[data-surface="persuade"] .ps-phone-body .ps-proof-divider,
@@ -5646,7 +5659,7 @@ body.picker-page {
}
.picker-preview-type[data-surface="persuade"] .ps-phone-body .ps-editorial-copy {
- gap: var(--ps-gap-xs);
+ gap: var(--ps-gap-sm);
}
.picker-preview-type[data-surface="persuade"] .ps-phone-body .ps-editorial-copy strong {
@@ -5865,6 +5878,7 @@ body.picker-page {
align-content: center;
align-items: center;
padding-inline: var(--ps-gutter);
+ grid-template-columns: auto 1fr;
}
.picker-preview-type .ps-nav-bars {
@@ -6047,14 +6061,15 @@ body.picker-page {
display: block;
}
-.picker-preview-type .ps-gallery-item b:first-child,
-.picker-preview-type .ps-gallery-item [data-type-gallery-title] {
+.picker-preview-type .ps-gallery-item [data-type-gallery-caption] {
color: var(--pvs-title);
+ font-size: var(--pt-micro);
line-height: 1.38;
-}
-
-.picker-preview-type .ps-gallery-item b:last-child {
- line-height: 1.45;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+ text-wrap: balance;
}
/* ============================================================
@@ -6182,7 +6197,7 @@ body.picker-page {
}
.picker-preview-type--ops .ps-ops-item--on b {
- color: var(--pvs-cta-text);
+ color: var(--pv-neutral);
font-weight: 600;
}
@@ -6190,6 +6205,27 @@ body.picker-page {
background-color: var(--pvs-cta-text);
}
+.picker-preview-type--ops .ps-ops-item--on {
+ padding-block: calc(var(--pt-base) * 0.45);
+ padding-inline: calc(var(--pt-base) * 0.72) calc(var(--pt-base) * 0.58);
+}
+
+.picker-preview-type--ops .ps-ops-field {
+ gap: calc(var(--pt-base) * 0.5);
+ padding-block: calc(var(--pt-base) * 0.52);
+ padding-inline: calc(var(--pt-base) * 0.68) calc(var(--pt-base) * 0.58);
+}
+
+.picker-preview-type--ops .ps-ops-field b {
+ flex: 1 1 auto;
+ line-height: 1.35;
+}
+
+.picker-preview-type--ops .ps-ops-chev {
+ transform: translateY(-12%) rotate(45deg);
+ margin-inline-end: calc(var(--pt-base) * 0.08);
+}
+
.ps-ops-title {
color: var(--pvs-title);
font-family: var(--pt-heading);
@@ -6361,6 +6397,11 @@ body.picker-page {
background-color: var(--pvs-ghost);
}
+.picker-preview-type--ops .ps-ops-row--on {
+ padding-inline: calc(var(--pt-base) * 0.68) calc(var(--pt-base) * 0.58);
+ border-radius: var(--pvs-radius-frame);
+}
+
/* A settings panel's heading is a UI label rather than a section title, so it
takes the body face at reading size and the weight that goes with the job.
No other board sets that combination, and it is the one an app spends most
@@ -6542,6 +6583,14 @@ body.picker-page {
border-right: 1px solid var(--pvs-rule);
}
+.picker-preview-type--read .ps-docs {
+ grid-template-columns: minmax(0, 21%) minmax(0, 1fr);
+}
+
+.picker-preview-type--read .ps-docs-rail {
+ padding-inline-end: calc(var(--pt-base) * 0.35);
+}
+
.ps-docs-item {
min-width: 0;
display: flex;
@@ -6589,6 +6638,10 @@ body.picker-page {
padding: var(--ps-band-y) 6% 0 calc(var(--pt-base) * 1.6);
}
+.picker-preview-type--read .ps-docs-main {
+ padding: var(--ps-band-y) 5% 0 calc(var(--pt-base) * 0.8);
+}
+
.picker-preview-type--read .ps-docs-main .pt-headline {
max-width: 22ch;
}
@@ -6694,17 +6747,6 @@ body.picker-page {
line-height: 1.5;
}
-/* The handset is the same document with the rail folded into a crumb, which is
- how the drawing puts it too. One passage rather than two: the list is what
- the width is spent on instead, and past that the note leaves the card. The
- blocks carry the rhythm, so the gap stays at zero. */
-.picker-preview-type--read .ps-phone-body,
-[data-carry][data-surface="read"] .ps-phone-body {
- grid-template-rows: repeat(6, auto);
- align-content: start;
- gap: 0;
-}
-
.ps-docs-crumb {
color: var(--pvs-bars);
font-family: var(--pt-body);
@@ -6713,16 +6755,41 @@ body.picker-page {
text-align: center;
}
+/* The handset is the same document with the rail folded into a crumb, which is
+ how the drawing puts it too. One passage rather than two: the list is what
+ the width is spent on instead, and past that the note leaves the card. Row
+ gap carries the rhythm between blocks; the subsection keeps a shorter step
+ to the passage under it. */
+.picker-preview-type--read .ps-phone-body,
+[data-carry][data-surface="read"] .ps-phone-body {
+ grid-template-rows: repeat(6, auto);
+ align-content: start;
+ gap: var(--ps-gap-md);
+}
+
+.picker-preview-type--read .ps-phone-body > * {
+ margin-block: 0;
+}
+
.picker-preview-type--read .ps-phone-body .pt-headline {
- margin-top: calc(var(--pt-base) * 1);
+ margin-top: 0;
font-size: var(--pt-title);
}
-/* The phone re-bases the type ladder smaller, so the step that separates a
- passage from the heading over it has to be restated against the new base or
- the two run together. */
.picker-preview-type--read .ps-phone-body .ps-docs-sub {
- margin-top: calc(var(--pt-base) * 2.1);
+ margin-top: 0;
+}
+
+.picker-preview-type--read .ps-phone-body .ps-docs-sub + .ps-docs-para {
+ margin-top: calc(var(--pt-base) * 0.45);
+}
+
+.picker-preview-type--read .ps-phone-body .ps-docs-list {
+ margin-top: 0;
+}
+
+.picker-preview-type--read .ps-phone-body .ps-docs-note {
+ margin-top: 0;
}
/* A frame with room for the whole page. The document runs to the bottom of the
diff --git a/tmp/questionaire/build-gallery-replica.mjs b/tmp/questionaire/build-gallery-replica.mjs
index 01e1044b9..6872d91a5 100644
--- a/tmp/questionaire/build-gallery-replica.mjs
+++ b/tmp/questionaire/build-gallery-replica.mjs
@@ -107,19 +107,72 @@ const DOCS_BOARD_CELLS = [
];
const GALLERY_PREVIEW =
- '#picker-form .picker-strategy-stage > .picker-preview.picker-preview--gallery';
+ '#picker-form .picker-strategy-stage > .picker-preview.picker-preview--gallery:not([hidden])';
+
+const LANDING_PREVIEW =
+ '#picker-form .picker-strategy-stage > .picker-preview[data-surface="persuade"]';
+
+function cellScope(screen, option) {
+ return (
+ 'html[data-cell-screen="03"][data-cell-surface="' + screen + '"][data-cell-option="' + option + '"]'
+ );
+}
+
+function drenchedRestoreCss(scope, preview) {
+ return [
+ scope,
+ `${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;',
+ '}',
+ ].join('\n');
+}
+
+function drenchedPanelCss(scope, preview, panel = '.pv-image') {
+ return [
+ scope,
+ `${preview} ${panel} {`,
+ ' background: linear-gradient(',
+ ' 135deg,',
+ ' color-mix(in oklab, var(--pkc-p-ink) 16%, var(--pkc-primary)),',
+ ' color-mix(in oklab, var(--pkc-secondary) 34%, var(--pkc-primary))',
+ ' ) !important;',
+ ' border-color: color-mix(in oklab, var(--pkc-secondary) 52%, var(--pkc-primary)) !important;',
+ '}',
+ scope,
+ `${preview} ${panel}::after {`,
+ ' background: var(--pkc-tertiary) !important;',
+ '}',
+ ].join('\n');
+}
+
+const LANDING_DRENCHED_CSS = [
+ drenchedRestoreCss(cellScope('persuade', 'drenched'), LANDING_PREVIEW),
+ drenchedPanelCss(cellScope('persuade', 'drenched'), LANDING_PREVIEW + ' .pv-desktop'),
+ cellScope('persuade', 'drenched'),
+ `${LANDING_PREVIEW} .pv-desktop .pv-actions i:last-child {`,
+ ' border-color: color-mix(in oklab, var(--pkc-secondary) 68%, var(--pkc-p-ink)) !important;',
+ ' background: color-mix(in oklab, var(--pkc-secondary) 18%, var(--pkc-primary)) !important;',
+ '}',
+ cellScope('persuade', 'drenched'),
+ `${LANDING_PREVIEW} .pv-desktop .pv-nav-bars i:nth-child(2) {`,
+ ' background: color-mix(in oklab, var(--pkc-secondary) 72%, var(--pkc-p-ink)) !important;',
+ '}',
+].join('\n');
function portfolioCapAvatarsCss(option, circle = 'neutral') {
- const scope =
- 'html[data-cell-screen="03"][data-cell-surface="experience"][data-cell-option="' + option + '"]';
+ const scope = cellScope('experience', option);
const capCircle =
circle === 'drenched'
? [
- ' border: 1px solid color-mix(in oklab, var(--pkc-p-ink) 40%, var(--pkc-primary));',
+ ' border: 1px solid color-mix(in oklab, var(--pkc-secondary) 58%, 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))',
+ ' color-mix(in oklab, var(--pkc-secondary) 30%, var(--pkc-primary)),',
+ ' color-mix(in oklab, var(--pkc-p-ink) 20%, var(--pkc-primary))',
' );',
].join('\n')
: circle === 'committed'
@@ -157,58 +210,259 @@ function portfolioCapAvatarsCss(option, circle = 'neutral') {
}
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;',
+ drenchedRestoreCss(cellScope('experience', 'drenched'), GALLERY_PREVIEW),
+ drenchedPanelCss(cellScope('experience', 'drenched'), GALLERY_PREVIEW),
+ cellScope('experience', 'drenched'),
+ `${GALLERY_PREVIEW} .pg-track i:nth-child(2) {`,
+ ' background: color-mix(in oklab, var(--pkc-secondary) 78%, var(--pkc-p-ink)) !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 {`,
+ cellScope('experience', 'drenched'),
+ `${GALLERY_PREVIEW} .pg-cap-title {`,
' background: var(--pkc-tertiary) !important;',
'}',
+ cellScope('experience', 'drenched'),
+ `${GALLERY_PREVIEW} .pv-nav-bars i:nth-child(2) {`,
+ ' background: color-mix(in oklab, var(--pkc-secondary) 72%, var(--pkc-p-ink)) !important;',
+ '}',
+ cellScope('experience', 'drenched'),
+ `${GALLERY_PREVIEW} .pv-tabbar i:nth-child(2) {`,
+ ' background: color-mix(in oklab, var(--pkc-secondary) 70%, var(--pkc-p-ink)) !important;',
+ '}',
+ cellScope('experience', 'drenched'),
+ `${GALLERY_PREVIEW} .pv-tabbar i:nth-child(3) {`,
+ ' background: color-mix(in oklab, var(--pkc-tertiary) 82%, var(--pkc-p-ink)) !important;',
+ '}',
].join('\n');
+const DOCS_QUOTE_RESTRAINED_CSS = [
+ cellScope('read', 'restrained'),
+ `${DOCS_PREVIEW}:not([hidden]) {`,
+ ' --pd-quote: var(--pd-ink) !important;',
+ '}',
+ cellScope('read', 'restrained'),
+ `${DOCS_PREVIEW}:not([hidden]) :is(.pd-note-dot, .pd-note-lines i) {`,
+ ' background: var(--pd-ink) !important;',
+ '}',
+].join('\n');
+
+const FONT_PAIR_NO_NAV_ACTION_CELLS = [
+ 'font-pair--persuade--default',
+ 'font-pair--operate--default',
+ 'font-pair--read--default',
+];
+
+const FONT_PAIR_NO_NAV_ACTION_CSS = [
+ '#picker-form .picker-preview-type .ps-nav-action {',
+ ' display: none !important;',
+ '}',
+ '#picker-form .picker-preview-type .ps-nav-tail {',
+ ' display: none !important;',
+ '}',
+ '#picker-form .picker-preview-type .ps-nav {',
+ ' grid-template-columns: auto 1fr !important;',
+ '}',
+ '#picker-form .picker-preview-type {',
+ ' --pvs-cta-text: var(--pv-neutral) !important;',
+ '}',
+].join('\n');
+
+const FONT_PAIR_PERSUADE_HERO_IMAGE_CSS = [
+ '#picker-form .picker-preview-type .ps-hero {',
+ ' grid-template-columns: minmax(0, 1fr) 40% !important;',
+ '}',
+].join('\n');
+
+const FONT_PAIR_PERSUADE_GALLERY_CSS = [
+ '#picker-form .picker-preview-type .ps-gallery-item {',
+ ' gap: var(--ps-gap-xs) !important;',
+ '}',
+ '#picker-form .picker-preview-type .ps-gallery-item > i {',
+ ' max-width: none !important;',
+ ' aspect-ratio: 3 / 2 !important;',
+ ' border-radius: var(--pvs-radius-frame) !important;',
+ '}',
+ '#picker-form .picker-preview-type .ps-desktop .ps-gallery-item > i {',
+ ' margin-inline: 0 !important;',
+ '}',
+ '#picker-form .picker-preview-type .ps-gallery-item [data-type-gallery-caption] {',
+ ' color: var(--pvs-title) !important;',
+ ' font-size: var(--pt-micro) !important;',
+ ' line-height: 1.38 !important;',
+ ' display: -webkit-box !important;',
+ ' -webkit-box-orient: vertical !important;',
+ ' -webkit-line-clamp: 2 !important;',
+ ' overflow: hidden !important;',
+ ' text-wrap: balance !important;',
+ ' white-space: normal !important;',
+ '}',
+].join('\n');
+
+const FONT_PAIR_PERSUADE_GALLERY_JS = [
+ 'var captions = [',
+ ' "Lorem ipsum dolor sit amet consectetur",',
+ ' "Dolor sit amet consectetur elit",',
+ ' "Eiusmod tempor sed do eiusmod",',
+ '];',
+ 'doc.querySelectorAll(".ps-gallery-item").forEach(function (item, index) {',
+ ' var title = item.querySelector("[data-type-gallery-title]");',
+ ' var meta = item.querySelector("[data-type-gallery-meta]");',
+ ' var caption = item.querySelector("[data-type-gallery-caption]");',
+ ' var text = captions[index] || "";',
+ ' if (!text && title) {',
+ ' text = title.textContent.trim();',
+ ' if (meta) text = (text + " " + meta.textContent.trim()).trim();',
+ ' }',
+ ' if (!text) return;',
+ ' if (caption) {',
+ ' caption.textContent = text;',
+ ' return;',
+ ' }',
+ ' if (!title) return;',
+ ' title.removeAttribute("data-type-gallery-title");',
+ ' title.setAttribute("data-type-gallery-caption", "");',
+ ' title.textContent = text;',
+ ' if (meta) meta.remove();',
+ '});',
+].join(' ');
+
+const FONT_PAIR_OPERATE_OPS_CSS = [
+ '#picker-form .picker-preview-type--ops {',
+ ' --pvs-cta-text: var(--pv-neutral) !important;',
+ '}',
+ '#picker-form .picker-preview-type--ops .ps-ops-item--on {',
+ ' padding-block: calc(var(--pt-base) * 0.45) !important;',
+ ' padding-inline: calc(var(--pt-base) * 0.72) calc(var(--pt-base) * 0.58) !important;',
+ '}',
+ '#picker-form .picker-preview-type--ops .ps-ops-item--on b {',
+ ' color: var(--pv-neutral) !important;',
+ '}',
+ '#picker-form .picker-preview-type--ops .ps-ops-field {',
+ ' gap: calc(var(--pt-base) * 0.5) !important;',
+ ' padding-block: calc(var(--pt-base) * 0.52) !important;',
+ ' padding-inline: calc(var(--pt-base) * 0.68) calc(var(--pt-base) * 0.58) !important;',
+ '}',
+ '#picker-form .picker-preview-type--ops .ps-ops-field b {',
+ ' flex: 1 1 auto !important;',
+ ' line-height: 1.35 !important;',
+ '}',
+ '#picker-form .picker-preview-type--ops .ps-ops-chev {',
+ ' transform: translateY(-12%) rotate(45deg) !important;',
+ ' margin-inline-end: calc(var(--pt-base) * 0.08) !important;',
+ '}',
+ '#picker-form .picker-preview-type--ops .ps-ops-row--on {',
+ ' padding-inline: calc(var(--pt-base) * 0.68) calc(var(--pt-base) * 0.58) !important;',
+ ' border-radius: var(--pvs-radius-frame) !important;',
+ '}',
+].join('\n');
+
+const FONT_PAIR_PERSUADE_PHONE_SPACING_CSS = [
+ '#picker-form .picker-preview-type[data-surface="persuade"] .ps-phone-body {',
+ ' gap: var(--ps-gap-md) !important;',
+ '}',
+ '#picker-form .picker-preview-type[data-surface="persuade"] .ps-phone-body :is(.pt-headline, .pt-body, .ps-actions, .ps-proof) {',
+ ' margin-block-end: 0 !important;',
+ '}',
+ '#picker-form .picker-preview-type[data-surface="persuade"] .ps-phone-body .ps-editorial-copy {',
+ ' gap: var(--ps-gap-sm) !important;',
+ '}',
+].join('\n');
+
+const FONT_PAIR_READ_PHONE_SPACING_CSS = [
+ '#picker-form .picker-preview-type--read .ps-phone-body {',
+ ' gap: var(--ps-gap-md) !important;',
+ '}',
+ '#picker-form .picker-preview-type--read .ps-phone-body > * {',
+ ' margin-block: 0 !important;',
+ '}',
+ '#picker-form .picker-preview-type--read .ps-phone-body .ps-docs-sub + .ps-docs-para {',
+ ' margin-top: calc(var(--pt-base) * 0.45) !important;',
+ '}',
+ '#picker-form .picker-preview-type--read .ps-phone-body :is(.ps-docs-list, .ps-docs-note) {',
+ ' margin-top: 0 !important;',
+ '}',
+].join('\n');
+
+const FONT_PAIR_READ_DOCS_LAYOUT_CSS = [
+ '#picker-form .picker-preview-type--read .ps-docs {',
+ ' grid-template-columns: minmax(0, 21%) minmax(0, 1fr) !important;',
+ '}',
+ '#picker-form .picker-preview-type--read .ps-docs-rail {',
+ ' padding-inline-end: calc(var(--pt-base) * 0.35) !important;',
+ '}',
+ '#picker-form .picker-preview-type--read .ps-docs-main {',
+ ' padding: var(--ps-band-y) 5% 0 calc(var(--pt-base) * 0.8) !important;',
+ '}',
+].join('\n');
+
+const FONT_PAIR_READ_SECTION_TITLE_JS =
+ 'doc.querySelectorAll("[data-type-section-title]").forEach(function (el) { if (el.textContent.trim() === "Lorem ipsum dolor sit") el.textContent = "Lorem ipsum dolor"; });';
+
/** @type {{ id: string, cells: string[], css: string }[]} */
const EXPERIMENTS = [
+ {
+ id: 'font-pair-hide-nav-action',
+ cells: FONT_PAIR_NO_NAV_ACTION_CELLS,
+ css: FONT_PAIR_NO_NAV_ACTION_CSS,
+ },
+ {
+ id: 'font-pair-persuade-hero-image',
+ cells: ['font-pair--persuade--default'],
+ css: FONT_PAIR_PERSUADE_HERO_IMAGE_CSS,
+ },
+ {
+ id: 'font-pair-persuade-proof-copy',
+ cells: ['font-pair--persuade--default'],
+ js: 'var proofs = doc.querySelectorAll("[data-type-proof]"); if (proofs[1]) proofs[1].textContent = "Sit amet elit dolor";',
+ },
+ {
+ id: 'font-pair-persuade-editorial-copy',
+ cells: ['font-pair--persuade--default'],
+ js: [
+ 'doc.querySelectorAll(".ps-editorial-copy > em[data-type-section-link]").forEach(function (el) { el.remove(); });',
+ 'var merged = "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.";',
+ 'doc.querySelectorAll("[data-type-section-body]").forEach(function (p) {',
+ ' if (p.hasAttribute("data-type-section-body-2")) { p.remove(); return; }',
+ ' var second = p.nextElementSibling;',
+ ' if (second && second.hasAttribute("data-type-section-body-2")) {',
+ ' p.textContent = merged;',
+ ' second.remove();',
+ ' return;',
+ ' }',
+ ' p.textContent = merged;',
+ '});',
+ ].join(' '),
+ },
+ {
+ id: 'font-pair-persuade-gallery-cards',
+ cells: ['font-pair--persuade--default'],
+ css: FONT_PAIR_PERSUADE_GALLERY_CSS,
+ js: FONT_PAIR_PERSUADE_GALLERY_JS,
+ },
+ {
+ id: 'font-pair-persuade-phone-spacing',
+ cells: ['font-pair--persuade--default'],
+ css: FONT_PAIR_PERSUADE_PHONE_SPACING_CSS,
+ },
+ {
+ id: 'font-pair-read-phone-spacing',
+ cells: ['font-pair--read--default'],
+ css: FONT_PAIR_READ_PHONE_SPACING_CSS,
+ },
+ {
+ id: 'font-pair-read-docs-layout',
+ cells: ['font-pair--read--default'],
+ css: FONT_PAIR_READ_DOCS_LAYOUT_CSS,
+ js: FONT_PAIR_READ_SECTION_TITLE_JS,
+ },
+ {
+ id: 'font-pair-operate-ops-chrome',
+ cells: ['font-pair--operate--default'],
+ css: FONT_PAIR_OPERATE_OPS_CSS,
+ },
{
id: 'landing-drenched-color-roles',
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"] {',
- ' --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="persuade"][data-cell-option="drenched"]',
- '#picker-form .picker-strategy-stage > .picker-preview[data-surface="persuade"] .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="persuade"][data-cell-option="drenched"]',
- '#picker-form .picker-strategy-stage > .picker-preview[data-surface="persuade"] .pv-actions i:last-child {',
- ' border-color: color-mix(in oklab, var(--pkc-p-ink) 45%, var(--pkc-primary)) !important;',
- ' background: color-mix(in oklab, var(--pkc-p-ink) 12%, var(--pkc-primary)) !important;',
- '}',
- ].join('\n'),
+ css: LANDING_DRENCHED_CSS,
},
{
id: 'ops-committed-color-visibility',
@@ -247,6 +501,11 @@ const EXPERIMENTS = [
'}',
].join('\n'),
},
+ {
+ id: 'docs-restrained-quote-contrast',
+ cells: ['strategy--read--restrained'],
+ css: DOCS_QUOTE_RESTRAINED_CSS,
+ },
{
id: 'docs-strategy-wireframe-weight',
cells: [
@@ -281,7 +540,7 @@ const EXPERIMENTS = [
const experiment = String.raw`