mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-15 23:56:29 +03:00
Fix font-pair preview polish for cells 22–24 and sync gallery experiments.
Tighten Landing, App UI, and Docs type-board copy, color, spacing, and gallery experiments so the improved preview gallery matches the live picker. AI-assisted commit. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Abdul Wahab
Cursor
@@ -96,11 +96,13 @@ const hook = type ? '' : undefined;
|
||||
) : (
|
||||
<div class="ps-nav-bars"><i></i><i></i><i></i><i></i></div>
|
||||
)}
|
||||
<div class="ps-nav-tail">
|
||||
{!type && <i class="ps-search"></i>}
|
||||
<div class="ps-nav-action" data-type-nav-action={hook}></div>
|
||||
{!type && <i class="ps-avatar"></i>}
|
||||
</div>
|
||||
{!type && (
|
||||
<div class="ps-nav-tail">
|
||||
<i class="ps-search"></i>
|
||||
<div class="ps-nav-action" data-type-nav-action={hook}></div>
|
||||
<i class="ps-avatar"></i>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{ops ? (
|
||||
<div class="ps-ops">
|
||||
@@ -315,7 +317,6 @@ const hook = type ? '' : undefined;
|
||||
{type
|
||||
? <p class="pt-section-body" data-type-section-body></p>
|
||||
: <span><i></i><i></i></span>}
|
||||
<em data-type-section-link={hook}></em>
|
||||
</div>
|
||||
{/* Three cards once the labels are words, four while they are bars. The
|
||||
type board sets three because a fourth column leaves the copy beside
|
||||
@@ -328,7 +329,7 @@ const hook = type ? '' : undefined;
|
||||
<div class="ps-gallery-item">
|
||||
<i></i>
|
||||
{type
|
||||
? <span><b data-type-gallery-title></b><b data-type-gallery-meta></b></span>
|
||||
? <span><b data-type-gallery-caption></b></span>
|
||||
: <span><b></b><b></b><b></b></span>}
|
||||
</div>
|
||||
))}
|
||||
@@ -367,10 +368,12 @@ const hook = type ? '' : undefined;
|
||||
<div class="ps-brand-block" data-type-brand={hook}></div>
|
||||
{!type && <i class="ps-brand-word"></i>}
|
||||
</div>
|
||||
<div class="ps-nav-tail">
|
||||
<div class="ps-nav-action" data-type-menu-action={hook}></div>
|
||||
{!type && <i class="ps-menu"></i>}
|
||||
</div>
|
||||
{!type && (
|
||||
<div class="ps-nav-tail">
|
||||
<div class="ps-nav-action" data-type-menu-action={hook}></div>
|
||||
<i class="ps-menu"></i>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{ops ? (
|
||||
<div class="ps-phone-body">
|
||||
@@ -530,7 +533,7 @@ const hook = type ? '' : undefined;
|
||||
<div class="ps-gallery-item">
|
||||
<i></i>
|
||||
{type
|
||||
? <span><b data-type-gallery-title></b><b data-type-gallery-meta></b></span>
|
||||
? <span><b data-type-gallery-caption></b></span>
|
||||
: <span><b></b><b></b></span>}
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
+103
-36
@@ -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
|
||||
|
||||
@@ -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`
|
||||
<script data-gallery-replica-experiment="strategy-fixes">
|
||||
(function () {
|
||||
var specs = ${JSON.stringify(EXPERIMENTS.map(({ id, cells, css }) => ({ id, cells, css })))};
|
||||
var specs = ${JSON.stringify(EXPERIMENTS.map(({ id, cells, css, js }) => ({ id, cells, css: css || '', js: js || '' })))};
|
||||
|
||||
specs.forEach(function (spec) {
|
||||
spec.cells.forEach(function (cellId) {
|
||||
@@ -292,12 +551,22 @@ const experiment = String.raw`
|
||||
var doc = frame.contentDocument;
|
||||
if (!doc || !doc.head) return;
|
||||
|
||||
var style = doc.querySelector('[data-experiment="' + spec.id + '"]');
|
||||
if (!style) {
|
||||
style = doc.createElement('style');
|
||||
style.setAttribute('data-experiment', spec.id);
|
||||
style.textContent = spec.css;
|
||||
doc.head.appendChild(style);
|
||||
if (spec.css) {
|
||||
var style = doc.querySelector('[data-experiment="' + spec.id + '"]');
|
||||
if (!style) {
|
||||
style = doc.createElement('style');
|
||||
style.setAttribute('data-experiment', spec.id);
|
||||
style.textContent = spec.css;
|
||||
doc.head.appendChild(style);
|
||||
}
|
||||
}
|
||||
|
||||
if (spec.js) {
|
||||
try {
|
||||
eval(spec.js);
|
||||
} catch (err) {
|
||||
console.warn('[gallery-replica] ' + spec.id + ':', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -341,7 +610,7 @@ replica = replica.replace(
|
||||
+ '<strong>16–18 Docs</strong> strategy wireframe weight, and '
|
||||
+ '<strong>45–47 / 59–62 / 71–72 Docs</strong> board bar weight, and '
|
||||
+ '<strong>19–21 Portfolio</strong> caption circles (desktop), '
|
||||
+ '<strong>21</strong> drenched color roles. '
|
||||
+ '<strong>12 / 21 Drenched</strong> full accent roles, '
|
||||
+ 'Baseline: <a href="previews-gallery.html">previews-gallery.html</a>.</p>',
|
||||
);
|
||||
|
||||
|
||||
@@ -105,6 +105,20 @@ const IFRAME_SCRIPT = [
|
||||
' Array.prototype.forEach.call(document.querySelectorAll(\'[data-surface-stage]\'), function (stage) {',
|
||||
' Object.keys(vars).forEach(function (key) { stage.style.setProperty(\'--pkc-\' + key, vars[key]); });',
|
||||
' });',
|
||||
' var roles = [\'primary\', \'secondary\', \'tertiary\', \'neutral\'];',
|
||||
' var bandInk = { primary: \'p-ink\', secondary: \'s-ink\', tertiary: \'t-ink\', neutral: \'n-ink\' };',
|
||||
' roles.forEach(function (role) {',
|
||||
' var input = document.querySelector(\'[name="palette-\' + role + \'"]\');',
|
||||
' if (input && vars[role]) input.value = vars[role];',
|
||||
' });',
|
||||
' Array.prototype.forEach.call(document.querySelectorAll(\'.picker-band[data-band]\'), function (band) {',
|
||||
' var role = band.getAttribute(\'data-band\');',
|
||||
' if (!vars[role]) return;',
|
||||
' band.style.setProperty(\'--band-color\', vars[role]);',
|
||||
' band.style.setProperty(\'--band-ink\', vars[bandInk[role]]);',
|
||||
' var hex = band.querySelector(\'output[data-band-hex]\');',
|
||||
' if (hex) hex.textContent = vars[role];',
|
||||
' });',
|
||||
'};',
|
||||
'window.__applyFonts = function (font) {',
|
||||
' Array.prototype.forEach.call(document.querySelectorAll(\'[data-type-stage]\'), function (stage) {',
|
||||
@@ -301,7 +315,8 @@ const HOST_RUNTIME = [
|
||||
' var c = state.colors;',
|
||||
' return {',
|
||||
' primary: c.primary, secondary: c.secondary, tertiary: c.tertiary, neutral: c.neutral,',
|
||||
' \'n-ink\': contrastInk(c.neutral), \'p-ink\': contrastInk(c.primary), \'t-ink\': contrastInk(c.tertiary),',
|
||||
' \'n-ink\': contrastInk(c.neutral), \'p-ink\': contrastInk(c.primary),',
|
||||
' \'s-ink\': contrastInk(c.secondary), \'t-ink\': contrastInk(c.tertiary),',
|
||||
' \'p-on-n\': readableOn(c.primary, c.neutral), \'t-on-n\': readableOn(c.tertiary, c.neutral),',
|
||||
' \'t-on-p\': readableOn(c.tertiary, c.primary), \'p-on-p\': readableOn(c.primary, c.primary),',
|
||||
' \'t-on-t\': readableOn(c.tertiary, c.tertiary), \'p-on-i\': readableOn(c.primary, contrastInkHex(c.primary)),',
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user