mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-19 09:36:59 +03:00
update
This commit is contained in:
Abdul Wahab
@@ -42,6 +42,15 @@
|
||||
],
|
||||
"createdAt": "2026-07-30T13:11:54.730Z",
|
||||
"reason": "Runtime font loader: builds a Google Fonts URL from the family the agent/user chose in the questionnaire; no literal face is being introduced"
|
||||
},
|
||||
{
|
||||
"rule": "bounce-easing",
|
||||
"value": "cubic-bezier(.34, 1.56, .64, 1)",
|
||||
"files": [
|
||||
"picker/scripts/palette-picker.js"
|
||||
],
|
||||
"createdAt": "2026-08-20T02:53:58.453Z",
|
||||
"reason": "plan-18 step 10c: byte-exact port from tmp/motion-previews-premium.html installChoreographedPremium spring stagger"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -51,6 +51,7 @@ interface Props {
|
||||
shift its scenes.
|
||||
*/
|
||||
portfolioExtras?: boolean;
|
||||
motionCell?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
@@ -63,6 +64,7 @@ const {
|
||||
cursor = false,
|
||||
carry = false,
|
||||
portfolioExtras = false,
|
||||
motionCell,
|
||||
} = Astro.props;
|
||||
const type = mode === 'type';
|
||||
const ops = surface === 'operate';
|
||||
@@ -78,6 +80,7 @@ const hook = type ? '' : undefined;
|
||||
class={classes}
|
||||
data-artboard=""
|
||||
data-surface={surface}
|
||||
data-motion-cell={motionCell}
|
||||
data-carry={carry ? '' : undefined}
|
||||
data-strategy-preview={strategyHook ? '' : undefined}
|
||||
data-type-preview={typeHook ? '' : undefined}
|
||||
@@ -312,12 +315,14 @@ const hook = type ? '' : undefined;
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
<div class="ps-layout-editorial-spacer" data-layout-editorial-spacer aria-hidden="true"></div>
|
||||
<div class="ps-editorial">
|
||||
<div class="ps-editorial-copy">
|
||||
<strong data-type-section-title={hook}></strong>
|
||||
{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
|
||||
|
||||
@@ -22,6 +22,7 @@ interface Option {
|
||||
interface Board {
|
||||
surface: 'persuade' | 'operate' | 'read' | 'experience';
|
||||
class?: string;
|
||||
cell?: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
@@ -36,9 +37,10 @@ interface Props {
|
||||
previewClass: string;
|
||||
phone?: boolean;
|
||||
boards?: Board[];
|
||||
derived?: boolean;
|
||||
}
|
||||
|
||||
const { id, step, slug, name, title, legend, cta, options, previewClass, phone = true, boards } = Astro.props;
|
||||
const { id, step, slug, name, title, legend, cta, options, previewClass, phone = true, boards, derived = false } = Astro.props;
|
||||
const titleId = `picker-${slug}-title`;
|
||||
const artboardClass = phone ? previewClass : `${previewClass} picker-artboard--solo`;
|
||||
// A question listed in the matrix is answered once per chosen surface, which
|
||||
@@ -96,12 +98,13 @@ const tabsAttrs = perSurface ? surfaceTabsAttrs(name) : null;
|
||||
attribute rather than a rebuild. The stage is the box the strip takes
|
||||
its row on, above the frame, which is why a screen with one board and
|
||||
a strip is wrapped in it too. */
|
||||
<div class="picker-board-stage">
|
||||
<div class="picker-board-stage" data-surface-stage={derived ? '' : undefined}>
|
||||
{tabsAttrs && <div class="picker-surface-tabs" {...tabsAttrs} hidden></div>}
|
||||
{(boards ?? [{} as Board]).map((board) => (
|
||||
<Artboard
|
||||
class={[artboardClass, board.class].filter(Boolean).join(' ')}
|
||||
surface={board.surface}
|
||||
motionCell={board.cell}
|
||||
phone={phone}
|
||||
cursor={slug === 'motion'}
|
||||
carry={slug !== 'motion'}
|
||||
|
||||
@@ -86,8 +86,12 @@ const questions = [
|
||||
// for different ends. Repainting one wireframe would show the same scene
|
||||
// twice under two labels.
|
||||
boards: [
|
||||
{ surface: 'persuade' },
|
||||
{ surface: 'experience', class: 'picker-preview-motion--index' },
|
||||
{ surface: 'persuade', cell: 'persuade-restrained' },
|
||||
{ surface: 'persuade', cell: 'persuade-responsive' },
|
||||
{ surface: 'persuade', cell: 'persuade-choreographed' },
|
||||
{ surface: 'experience', class: 'picker-preview-motion--index', cell: 'experience-restrained' },
|
||||
{ surface: 'experience', class: 'picker-preview-motion--index', cell: 'experience-responsive' },
|
||||
{ surface: 'experience', class: 'picker-preview-motion--index', cell: 'experience-choreographed' },
|
||||
],
|
||||
options: [
|
||||
{
|
||||
@@ -153,7 +157,8 @@ const questions = [
|
||||
legend: 'Boundary style',
|
||||
cta: 'Select boundary style',
|
||||
previewClass: 'picker-preview-boundaries',
|
||||
boards,
|
||||
derived: true,
|
||||
boards: [{ surface: 'persuade' }],
|
||||
options: [
|
||||
{
|
||||
value: 'open-space',
|
||||
@@ -188,7 +193,8 @@ const questions = [
|
||||
legend: 'Corner style',
|
||||
cta: 'Select corner style',
|
||||
previewClass: 'picker-preview-corners',
|
||||
boards,
|
||||
derived: true,
|
||||
boards: [{ surface: 'persuade' }],
|
||||
options: [
|
||||
{
|
||||
value: 'sharp',
|
||||
@@ -222,7 +228,8 @@ const questions = [
|
||||
legend: 'Depth style',
|
||||
cta: 'Select depth style',
|
||||
previewClass: 'picker-preview-depth',
|
||||
boards,
|
||||
derived: true,
|
||||
boards: [],
|
||||
options: [
|
||||
{
|
||||
value: 'flat',
|
||||
|
||||
@@ -338,7 +338,7 @@ const surfaceTilePreview = (mode) => $(`input[name="surface-modes"][value="${mod
|
||||
/* The boundaries screen keeps one carried ps artboard per surface, and by
|
||||
that screen the drawing is the page as chosen so far. It is the clone
|
||||
source for any proof that wants the whole material story on one page. */
|
||||
const carriedBoard = (mode) => $(`[data-question="boundaries"] .picker-artboard[data-surface="${mode}"]`);
|
||||
const carriedBoard = (mode) => $(`[data-question="boundaries"] .picker-board-stage > :is(.picker-artboard, .picker-preview)[data-surface="${mode}"]`);
|
||||
|
||||
/* One surface's committed structural answers, as the data-dcx-* marks the
|
||||
document stylesheet keys its mirrored bodies on. Layout is one answer for
|
||||
|
||||
+2968
-13
File diff suppressed because it is too large
Load Diff
@@ -2326,3 +2326,340 @@ body.dcx-live .dcx-request { display: inline-flex; }
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Derived-clone mirrors (plan-18): screens 08, 09 and 10 now board strategy
|
||||
-preview clones, and a proof or hub clone of one leaves the #picker-form
|
||||
scope its rendition rules key on. These restate the derived sheet against
|
||||
the dcx marks, the same contract the artboard mirrors above follow. */
|
||||
/* ==== Derived stage (plan-18): screens 08, 09, 10 mount strategy-preview
|
||||
clones for the surfaces the gallery derives. Geometry mirrors the artboard
|
||||
footprint; colors are locked to the restrained base for operate, read and
|
||||
experience clones, matching the gallery's baseCellId map. ==== */
|
||||
.dcx-proof--board > .picker-preview {
|
||||
grid-row: 2;
|
||||
aspect-ratio: 1.865 / 1;
|
||||
width: 100%;
|
||||
--pv-primary: var(--pkc-primary, var(--ks-champagne));
|
||||
--pv-secondary: var(--pkc-secondary, var(--ks-patina));
|
||||
--pv-tertiary: var(--pkc-tertiary, var(--ks-kinpaku));
|
||||
--pv-neutral: var(--pkc-neutral, var(--ks-lacquer-raised));
|
||||
--pv-n-ink: var(--pkc-n-ink, var(--ks-champagne));
|
||||
--pv-p-ink: var(--pkc-p-ink, var(--ks-champagne));
|
||||
--derived-rule: color-mix(in oklab, var(--pv-strong) 24%, var(--pv-neutral));
|
||||
--derived-band: color-mix(in oklab, var(--pv-strong) 7%, var(--pv-neutral));
|
||||
--derived-band-alt: color-mix(in oklab, var(--pv-strong) 13%, var(--pv-neutral));
|
||||
--derived-panel: color-mix(in oklab, var(--pv-strong) 5%, var(--pv-neutral));
|
||||
--derived-panel-edge: color-mix(in oklab, var(--pv-strong) 20%, var(--pv-neutral));
|
||||
}
|
||||
|
||||
/* Restrained lock for the non-persuade clones, mirrored from the strategy
|
||||
remap so the derived boards hold the gallery's base regardless of the
|
||||
run's strategy answer. */
|
||||
.dcx-proof--board > .picker-preview:not([data-surface="persuade"]) {
|
||||
--pv-secondary: color-mix(in oklab, var(--pkc-neutral) 78%, var(--pkc-n-ink));
|
||||
--pv-tertiary: color-mix(in oklab, var(--pkc-neutral) 86%, var(--pkc-n-ink));
|
||||
--pv-t-ink: var(--pkc-n-ink);
|
||||
--pv-t-on-t: var(--pkc-n-ink);
|
||||
--pv-t-on-n: color-mix(in oklab, var(--pkc-n-ink) 62%, var(--pkc-neutral));
|
||||
--pv-t-on-p: var(--pkc-p-ink);
|
||||
}
|
||||
|
||||
.dcx-proof--board > .picker-preview.picker-preview--docs {
|
||||
--pd-quote: var(--pd-ink);
|
||||
}
|
||||
|
||||
.dcx-proof--board > .picker-preview.picker-preview--docs :is(.pd-note-dot, .pd-note-lines i) {
|
||||
background: var(--pd-ink);
|
||||
}
|
||||
|
||||
/* Wireframe weights, from the dry-run against the gallery's derived cells. */
|
||||
.dcx-proof--board > .picker-preview:is(.picker-preview--ops, .picker-preview--gallery) .pv-desktop {
|
||||
--pv-text: 1.35;
|
||||
}
|
||||
|
||||
.dcx-proof--board > .picker-preview.picker-preview--docs {
|
||||
--pv-text: 1.65;
|
||||
}
|
||||
|
||||
.dcx-proof--board > .picker-preview.picker-preview--docs .pd-item i { width: calc(4.07 * var(--pv-x)); }
|
||||
.dcx-proof--board > .picker-preview.picker-preview--docs .pd-item span { height: calc(1.53 * var(--pv-text) * var(--pv-x)); }
|
||||
.dcx-proof--board > .picker-preview.picker-preview--docs .pd-para i { height: calc(1.35 * var(--pv-text) * var(--pv-x)); }
|
||||
.dcx-proof--board > .picker-preview.picker-preview--docs .pd-note-dot { width: calc(4.07 * var(--pv-x)); }
|
||||
.dcx-proof--board > .picker-preview.picker-preview--docs .pd-note-lines i { height: calc(1 * var(--pv-text) * var(--pv-x)); }
|
||||
.dcx-proof--board > .picker-preview.picker-preview--docs .pd-phone-body .pd-para i { height: calc(1.37 * var(--pv-text) * var(--pv-x)); }
|
||||
.dcx-proof--board > .picker-preview.picker-preview--docs .pd-phone-body .pd-note-lines i { height: calc(0.83 * var(--pv-text) * var(--pv-x)); }
|
||||
.dcx-proof--board > .picker-preview.picker-preview--docs .pd-phone-body .pd-heading { height: calc(2.53 * var(--pv-text) * var(--pv-x)); }
|
||||
.dcx-proof--board > .picker-preview.picker-preview--docs .pd-phone-body .pd-note-dot { width: calc(2.64 * var(--pv-text) * var(--pv-x)); }
|
||||
|
||||
/* Experience cap avatars on derived boards, from the gallery derived sheet. */
|
||||
.dcx-proof--board > .picker-preview--gallery .pv-desktop .pg-cap { padding-top: 5.2cqh; gap: 2.6cqh; }
|
||||
.dcx-proof--board > .picker-preview--gallery .pv-desktop .pg-cap::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(11.5 * var(--pv-x));
|
||||
aspect-ratio: 1;
|
||||
border: 1px solid color-mix(in oklab, var(--pv-secondary) 55%, var(--pv-neutral));
|
||||
border-radius: 50%;
|
||||
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)));
|
||||
}
|
||||
|
||||
/* Phone field chevron alignment on ops clones, from the gallery derived sheet
|
||||
(cells 44 and 55-58; the corners screen applies it under every option). */
|
||||
:is(.picker-screen[data-screen="09"], .picker-screen[data-screen="10"]) .picker-board-stage > .picker-preview .pv-phone .po-field > .po-chev { align-self: center; transform: translateY(-25%) rotate(45deg); }
|
||||
|
||||
/* Boundary additions on derived clones: the base geometry stays fixed; only
|
||||
separation changes. Ported from the gallery derived sheet. */
|
||||
.dcx-proof--board[data-dcx-boundary="open-space"] > .picker-preview :is(.pv-nav, .po-side, .po-main, .pd-side),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="open-space"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.pv-nav, .po-side, .po-main, .pd-side) {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.dcx-proof--board[data-dcx-boundary="open-space"] > .picker-preview :is(.po-divider, .pg-row--flip, .pg-rail),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="open-space"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.po-divider, .pg-row--flip, .pg-rail) {
|
||||
border-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.dcx-proof--board[data-dcx-boundary="open-space"] > .picker-preview .po-divider,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="open-space"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-divider {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.dcx-proof--board[data-dcx-boundary="thin-dividers"] > .picker-preview:is(.picker-preview--ops, .picker-preview--docs, .picker-preview--gallery) .pv-nav,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview:is(.picker-preview--ops, .picker-preview--docs, .picker-preview--gallery) .pv-nav {
|
||||
border-bottom: 1px solid var(--derived-rule) !important;
|
||||
}
|
||||
|
||||
.dcx-proof--board[data-dcx-boundary="thin-dividers"] > .picker-preview :is(.po-side, .po-main, .pd-side),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.po-side, .po-main, .pd-side) {
|
||||
border-right: 1px solid var(--derived-rule) !important;
|
||||
}
|
||||
|
||||
.dcx-proof--board[data-dcx-boundary="thin-dividers"] > .picker-preview .po-divider,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-divider {
|
||||
background: var(--derived-rule) !important;
|
||||
}
|
||||
|
||||
.dcx-proof--board[data-dcx-boundary="thin-dividers"] > .picker-preview .po-row + .po-row,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-row + .po-row {
|
||||
box-shadow: inset 0 1px 0 var(--derived-rule);
|
||||
}
|
||||
|
||||
.dcx-proof--board[data-dcx-boundary="thin-dividers"] > .picker-preview:not([data-surface="experience"]) .pg-row--flip,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview:not([data-surface="experience"]) .pg-row--flip {
|
||||
box-shadow: inset 0 1px 0 var(--derived-rule);
|
||||
}
|
||||
|
||||
.dcx-proof--board[data-dcx-boundary="thin-dividers"] > .picker-preview:not([data-surface="experience"]) .pg-rail,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview:not([data-surface="experience"]) .pg-rail {
|
||||
border-top: 1px solid var(--derived-rule);
|
||||
}
|
||||
|
||||
/* Cell 49: experience thin-dividers redraws its flip row and phone image
|
||||
separations by pseudo-element rules. */
|
||||
.dcx-proof--board[data-dcx-boundary="thin-dividers"] > .picker-preview[data-surface="experience"] .pg-row--flip,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-row--flip {
|
||||
position: relative;
|
||||
margin-top: 10cqh !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.dcx-proof--board[data-dcx-boundary="thin-dividers"] > .picker-preview[data-surface="experience"] .pg-row--flip::before,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-row--flip::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -5cqh;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
background: var(--derived-rule);
|
||||
}
|
||||
|
||||
.dcx-proof--board[data-dcx-boundary="thin-dividers"] > .picker-preview[data-surface="experience"] .pg-rail,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-rail {
|
||||
border-top: 0 !important;
|
||||
}
|
||||
|
||||
.dcx-proof--board[data-dcx-boundary="thin-dividers"] > .picker-preview[data-surface="experience"] .pg-phone-body > .pg-cap + .pv-image,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-phone-body > .pg-cap + .pv-image {
|
||||
margin-top: 8cqh !important;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.dcx-proof--board[data-dcx-boundary="thin-dividers"] > .picker-preview[data-surface="experience"] .pg-phone-body > .pg-cap + .pv-image::before,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-phone-body > .pg-cap + .pv-image::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -4cqh;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
background: var(--derived-rule);
|
||||
}
|
||||
|
||||
/* Cell 50: experience surface-changes. */
|
||||
.dcx-proof--board[data-dcx-boundary="surface-changes"] > .picker-preview[data-surface="experience"] .pg-row--flip,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-row--flip {
|
||||
margin-top: 5cqh !important;
|
||||
padding-block: 5cqh !important;
|
||||
box-shadow: none !important;
|
||||
background: color-mix(in oklab, var(--derived-band-alt) 60%, white 40%) !important;
|
||||
}
|
||||
|
||||
.dcx-proof--board[data-dcx-boundary="surface-changes"] > .picker-preview[data-surface="experience"] .pg-phone-body > .pg-cap + .pv-image,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-phone-body > .pg-cap + .pv-image {
|
||||
margin-top: 8cqh !important;
|
||||
}
|
||||
|
||||
.dcx-proof--board[data-dcx-boundary="surface-changes"] > .picker-preview[data-surface="experience"] .pg-phone-body,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-phone-body {
|
||||
background: linear-gradient(to bottom, transparent 0 50%, color-mix(in oklab, var(--derived-band-alt) 60%, white 40%) 50% 100%) !important;
|
||||
}
|
||||
|
||||
.dcx-proof--board[data-dcx-boundary="surface-changes"] > .picker-preview[data-surface="experience"] .pv-phone .pv-tabbar,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pv-phone .pv-tabbar {
|
||||
background: color-mix(in oklab, var(--derived-band-alt) 60%, white 40%) !important;
|
||||
}
|
||||
|
||||
/* Surface changes on every derived clone. */
|
||||
.dcx-proof--board[data-dcx-boundary="surface-changes"] > .picker-preview :is(.pv-nav, .po-side, .po-main, .pd-side),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.pv-nav, .po-side, .po-main, .pd-side) {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.dcx-proof--board[data-dcx-boundary="surface-changes"] > .picker-preview :is(.pv-nav, .pv-phone-top, .pv-tabbar),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.pv-nav, .pv-phone-top, .pv-tabbar) {
|
||||
background: var(--derived-band) !important;
|
||||
}
|
||||
|
||||
.dcx-proof--board[data-dcx-boundary="surface-changes"] > .picker-preview :is(.po-side, .po-panel, .pd-side),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.po-side, .po-panel, .pd-side) {
|
||||
background: var(--derived-band) !important;
|
||||
}
|
||||
|
||||
.dcx-proof--board[data-dcx-boundary="surface-changes"] > .picker-preview:not([data-surface="experience"]) :is(.pd-note, .pg-row--flip),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview:not([data-surface="experience"]) :is(.pd-note, .pg-row--flip) {
|
||||
background: var(--derived-band-alt) !important;
|
||||
}
|
||||
|
||||
.dcx-proof--board[data-dcx-boundary="surface-changes"] > .picker-preview .po-divider,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-divider {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* Cards and panels. */
|
||||
.dcx-proof--board[data-dcx-boundary="cards-and-panels"] > .picker-preview :is(.pv-nav, .po-side, .po-main),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.pv-nav, .po-side, .po-main) {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.dcx-proof--board[data-dcx-boundary="cards-and-panels"] > .picker-preview .po-divider,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-divider {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.dcx-proof--board[data-dcx-boundary="cards-and-panels"] > .picker-preview :is(.po-side, .po-chart, .po-rows, .po-panel, .po-phone-body .po-chart, .po-phone-body .po-field, .po-phone-body .po-prow),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.po-side, .po-chart, .po-rows, .po-panel, .po-phone-body .po-chart, .po-phone-body .po-field, .po-phone-body .po-prow) {
|
||||
background: var(--derived-panel) !important;
|
||||
border: 1px solid var(--derived-panel-edge) !important;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.dcx-proof--board[data-dcx-boundary="cards-and-panels"] > .picker-preview .po-chart,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-chart {
|
||||
padding-inline: calc(3 * var(--pv-x));
|
||||
}
|
||||
|
||||
/* Cell 44: operate cards-and-panels details. */
|
||||
.dcx-proof--board[data-dcx-boundary="cards-and-panels"] > .picker-preview[data-surface="operate"] .pv-desktop .po-chart,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="operate"] .pv-desktop .po-chart {
|
||||
padding: calc(3 * var(--pv-x)) calc(5 * var(--pv-x)) !important;
|
||||
}
|
||||
|
||||
.dcx-proof--board[data-dcx-boundary="cards-and-panels"] > .picker-preview[data-surface="operate"] .pv-phone .po-toggle,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="operate"] .pv-phone .po-toggle {
|
||||
margin-left: auto !important;
|
||||
margin-right: 12px !important;
|
||||
padding-right: 12px !important;
|
||||
}
|
||||
|
||||
.dcx-proof--board[data-dcx-boundary="cards-and-panels"] > .picker-preview[data-surface="operate"] .pv-phone .po-prow,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="operate"] .pv-phone .po-prow {
|
||||
padding-left: 12px !important;
|
||||
}
|
||||
|
||||
.dcx-proof--board[data-dcx-boundary="cards-and-panels"] > .picker-preview[data-surface="operate"] .pv-phone .po-field > .po-chev,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="operate"] .pv-phone .po-field > .po-chev {
|
||||
align-self: center !important;
|
||||
transform: translateY(-25%) rotate(45deg) !important;
|
||||
}
|
||||
|
||||
.dcx-proof--board[data-dcx-boundary="cards-and-panels"] > .picker-preview .po-rows,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-rows {
|
||||
padding-inline: calc(2 * var(--pv-x));
|
||||
}
|
||||
|
||||
|
||||
/* Corner radii on the derived clones. Dots remain dots while frames,
|
||||
surfaces, controls, and text bars take the selected radius. Ported from
|
||||
the gallery derived sheet; values match the artboard radius ramp above. */
|
||||
.dcx-proof--board[data-dcx-corner="sharp"],
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="corner-style"])):has(input[name="corner-style"][value="sharp"]:checked) .dcx-proof--board { --derived-frame-radius: 0px; --derived-phone-radius: 0px; --derived-surface-radius: 0px; --derived-control-radius: 0px; --derived-bar-radius: 0px; }
|
||||
.dcx-proof--board[data-dcx-corner="slightly-soft"],
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="corner-style"])):has(input[name="corner-style"][value="slightly-soft"]:checked) .dcx-proof--board { --derived-frame-radius: 4px; --derived-phone-radius: 5px; --derived-surface-radius: 3px; --derived-control-radius: 3px; --derived-bar-radius: 2px; }
|
||||
.dcx-proof--board[data-dcx-corner="friendly"],
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="corner-style"])):has(input[name="corner-style"][value="friendly"]:checked) .dcx-proof--board { --derived-frame-radius: 7px; --derived-phone-radius: 11px; --derived-surface-radius: 8px; --derived-control-radius: 8px; --derived-bar-radius: 3px; }
|
||||
.dcx-proof--board[data-dcx-corner="pill"],
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="corner-style"])):has(input[name="corner-style"][value="pill"]:checked) .dcx-proof--board { --derived-frame-radius: 9px; --derived-phone-radius: 15px; --derived-surface-radius: 12px; --derived-control-radius: 999px; --derived-bar-radius: 3px; }
|
||||
|
||||
.dcx-proof--board > .picker-preview .pv-desktop { border-radius: var(--derived-frame-radius) !important; }
|
||||
.dcx-proof--board > .picker-preview .pv-phone { border-radius: var(--derived-phone-radius) !important; }
|
||||
.dcx-proof--board > .picker-preview :is(.pv-image, .pv-mini-card, .po-chart, .po-rows, .po-panel, .pg-row) { border-radius: var(--derived-surface-radius) !important; }
|
||||
.dcx-proof--board > .picker-preview .pd-note { border-radius: 0 var(--derived-surface-radius) var(--derived-surface-radius) 0 !important; }
|
||||
.dcx-proof--board > .picker-preview :is(.pv-pill, .pv-actions i, .po-item--on, .po-field, .po-row, .po-toggle) { border-radius: var(--derived-control-radius) !important; }
|
||||
.dcx-proof--board > .picker-preview .po-toggle::after { border-radius: var(--derived-control-radius) !important; }
|
||||
.dcx-proof--board > .picker-preview :is(.pv-nav-bars i, .pv-pill::after, .pv-eyebrow, .pv-headline i, .pv-copy-bar, .po-line, .po-cell, .po-heading, .po-label, .pd-item span, .pd-heading, .pd-para i, .pd-note-lines i, .pg-cap i, .pg-track i) { border-radius: var(--derived-bar-radius) !important; }
|
||||
|
||||
|
||||
/* Depth additions on derived clones. Flat is the base; the other answers
|
||||
lift only solid, meaningful objects. Ported from the gallery derived
|
||||
sheet; shadow alphas stay literal because they are shadows, not palette
|
||||
roles. */
|
||||
.dcx-proof--board[data-dcx-depth="flat"],
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="depth-style"])):has(input[name="depth-style"][value="flat"]:checked) .dcx-proof--board { --derived-shadow-chrome: none; --derived-shadow-card: none; --derived-shadow-control: none; --derived-shadow-surface: none; }
|
||||
.dcx-proof--board[data-dcx-depth="soft-lift"],
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="depth-style"])):has(input[name="depth-style"][value="soft-lift"]:checked) .dcx-proof--board { --derived-shadow-chrome: 0 1px 2px rgb(0 0 0 / 0.08); --derived-shadow-card: 0 2px 4px rgb(0 0 0 / 0.1); --derived-shadow-control: 0 1px 2px rgb(0 0 0 / 0.1); --derived-shadow-surface: 0 2px 4px rgb(0 0 0 / 0.1); }
|
||||
.dcx-proof--board[data-dcx-depth="floating"],
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="depth-style"])):has(input[name="depth-style"][value="floating"]:checked) .dcx-proof--board { --derived-shadow-chrome: 0 1px 3px rgb(0 0 0 / 0.1); --derived-shadow-card: 0 4px 8px rgb(0 0 0 / 0.14); --derived-shadow-control: 0 2px 4px rgb(0 0 0 / 0.12); --derived-shadow-surface: 0 4px 8px rgb(0 0 0 / 0.14); }
|
||||
|
||||
.dcx-proof--board > .picker-preview :is(.pv-nav, .pv-phone-top) { box-shadow: var(--derived-shadow-chrome) !important; }
|
||||
.dcx-proof--board > .picker-preview :is(.pv-pill, .pv-actions i, .po-item--on, .po-field, .po-toggle) { box-shadow: var(--derived-shadow-control) !important; }
|
||||
.dcx-proof--board > .picker-preview :is(.pv-image, .pv-mini-card, .pd-note) { box-shadow: var(--derived-shadow-card) !important; }
|
||||
.dcx-proof--board > .picker-preview .pg-cap::before { box-shadow: var(--derived-shadow-card) !important; }
|
||||
.dcx-proof--board > .picker-preview :is(.po-chart i, .po-side, .po-panel) { box-shadow: var(--derived-shadow-surface) !important; }
|
||||
|
||||
/* Depth persuade rides the drenched base, the gallery's baseCellId lock. */
|
||||
.dcx-proof--board > .picker-preview[data-surface="persuade"] {
|
||||
--pv-secondary: var(--pkc-secondary);
|
||||
--pv-tertiary: var(--pkc-tertiary);
|
||||
--pv-bone: color-mix(in oklab, var(--pkc-p-ink) 55%, var(--pkc-primary));
|
||||
--pv-strong: var(--pkc-p-ink);
|
||||
--pv-secondary-wash: color-mix(in oklab, var(--pkc-p-ink) 16%, var(--pkc-primary));
|
||||
}
|
||||
|
||||
.dcx-proof--board > .picker-preview[data-surface="persuade"] .pv-desktop .pv-image {
|
||||
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;
|
||||
}
|
||||
|
||||
.dcx-proof--board > .picker-preview[data-surface="persuade"] .pv-desktop .pv-image::after { background: var(--pkc-tertiary) !important; }
|
||||
|
||||
.dcx-proof--board > .picker-preview[data-surface="persuade"] .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;
|
||||
}
|
||||
|
||||
.dcx-proof--board > .picker-preview[data-surface="persuade"] .pv-desktop .pv-nav-bars i:nth-child(2) {
|
||||
background: color-mix(in oklab, var(--pkc-secondary) 72%, var(--pkc-p-ink)) !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -3117,6 +3117,14 @@ body.picker-page {
|
||||
--pv-text: 1.65;
|
||||
}
|
||||
|
||||
/* The docs viewports keep the stage's own 1.35 desktop step and the phone's
|
||||
authored 1, which is what the weight factors below were measured against.
|
||||
Pushing 1.65 down to both viewports instead multiplied every bar a second
|
||||
time and the read cells drew a fifth heavier than the gallery. */
|
||||
.picker-strategy-stage > .picker-preview.picker-preview--docs .pv-desktop {
|
||||
--pv-text: 1.35;
|
||||
}
|
||||
|
||||
.picker-strategy-stage > .picker-preview.picker-preview--docs .pd-item i {
|
||||
width: calc(4.07 * var(--pv-x));
|
||||
}
|
||||
@@ -3385,6 +3393,195 @@ body.picker-page {
|
||||
--pd-quote: var(--pd-ink);
|
||||
}
|
||||
|
||||
/* Gallery parity (plan-18): restrained docs note dot and note lines read
|
||||
through body ink, the other half of the quote-contrast fix above. */
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="restrained"]) .picker-strategy-stage > .picker-preview.picker-preview--docs :is(.pd-note-dot, .pd-note-lines i),
|
||||
#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 :is(.pd-note-dot, .pd-note-lines i) {
|
||||
background: var(--pd-ink);
|
||||
}
|
||||
|
||||
/* Gallery parity (plan-18): drenched landing color roles. */
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="drenched"]) .picker-strategy-stage > .picker-preview[data-surface="persuade"],
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="drenched"]:checked) .picker-strategy-stage > .picker-preview[data-surface="persuade"] {
|
||||
--pv-secondary: var(--pkc-secondary);
|
||||
--pv-tertiary: var(--pkc-tertiary);
|
||||
--pv-bone: color-mix(in oklab, var(--pkc-p-ink) 55%, var(--pkc-primary));
|
||||
--pv-strong: var(--pkc-p-ink);
|
||||
--pv-secondary-wash: color-mix(in oklab, var(--pkc-p-ink) 16%, var(--pkc-primary));
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="drenched"]) .picker-strategy-stage > .picker-preview[data-surface="persuade"] .pv-desktop .pv-image,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="drenched"]:checked) .picker-strategy-stage > .picker-preview[data-surface="persuade"] .pv-desktop .pv-image {
|
||||
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))
|
||||
);
|
||||
border-color: color-mix(in oklab, var(--pkc-secondary) 52%, var(--pkc-primary));
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="drenched"]) .picker-strategy-stage > .picker-preview[data-surface="persuade"] .pv-desktop .pv-image::after,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="drenched"]:checked) .picker-strategy-stage > .picker-preview[data-surface="persuade"] .pv-desktop .pv-image::after {
|
||||
background: var(--pkc-tertiary);
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="drenched"]) .picker-strategy-stage > .picker-preview[data-surface="persuade"] .pv-desktop .pv-actions i:last-child,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="drenched"]:checked) .picker-strategy-stage > .picker-preview[data-surface="persuade"] .pv-desktop .pv-actions i:last-child {
|
||||
border-color: color-mix(in oklab, var(--pkc-secondary) 68%, var(--pkc-p-ink));
|
||||
background: color-mix(in oklab, var(--pkc-secondary) 18%, var(--pkc-primary));
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="drenched"]) .picker-strategy-stage > .picker-preview[data-surface="persuade"] .pv-desktop .pv-nav-bars i:nth-child(2),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="drenched"]:checked) .picker-strategy-stage > .picker-preview[data-surface="persuade"] .pv-desktop .pv-nav-bars i:nth-child(2) {
|
||||
background: color-mix(in oklab, var(--pkc-secondary) 72%, var(--pkc-p-ink));
|
||||
}
|
||||
|
||||
/* Gallery parity (plan-18): committed ops wash and neutral visibility. */
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="committed"]) .picker-strategy-stage > .picker-preview.picker-preview--ops,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="committed"]:checked) .picker-strategy-stage > .picker-preview.picker-preview--ops {
|
||||
--pv-neutral: color-mix(in oklab, var(--pkc-neutral) 84%, var(--pkc-primary));
|
||||
--po-wash: color-mix(in oklab, var(--pkc-primary) 24%, var(--pkc-neutral));
|
||||
}
|
||||
|
||||
/* Gallery parity (plan-18): full-palette ops color roles. */
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="full-palette"]) .picker-strategy-stage > .picker-preview.picker-preview--ops,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="full-palette"]:checked) .picker-strategy-stage > .picker-preview.picker-preview--ops {
|
||||
--po-wash: color-mix(in oklab, var(--pkc-secondary) 22%, var(--pkc-neutral));
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="full-palette"]) .picker-strategy-stage > .picker-preview.picker-preview--ops .po-row--on .po-dot,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="full-palette"]:checked) .picker-strategy-stage > .picker-preview.picker-preview--ops .po-row--on .po-dot {
|
||||
background: var(--pkc-tertiary);
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="full-palette"]) .picker-strategy-stage > .picker-preview.picker-preview--ops .po-field,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="full-palette"]:checked) .picker-strategy-stage > .picker-preview.picker-preview--ops .po-field {
|
||||
border-color: var(--pkc-secondary);
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="full-palette"]) .picker-strategy-stage > .picker-preview.picker-preview--ops .po-chart i:nth-child(2),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="full-palette"]:checked) .picker-strategy-stage > .picker-preview.picker-preview--ops .po-chart i:nth-child(2) {
|
||||
background: color-mix(in oklab, var(--pkc-secondary) 78%, var(--pkc-neutral));
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="full-palette"]) .picker-strategy-stage > .picker-preview.picker-preview--ops .po-chart i:nth-child(3),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="full-palette"]:checked) .picker-strategy-stage > .picker-preview.picker-preview--ops .po-chart i:nth-child(3) {
|
||||
background: color-mix(in oklab, var(--pkc-tertiary) 68%, var(--pkc-neutral));
|
||||
}
|
||||
|
||||
/* Gallery parity (plan-18): portfolio cap avatars per strategy. */
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="restrained"]) .picker-strategy-stage > .picker-preview.picker-preview--gallery:not([hidden]) .pv-desktop .pg-cap,
|
||||
#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--gallery:not([hidden]) .pv-desktop .pg-cap,
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="committed"]) .picker-strategy-stage > .picker-preview.picker-preview--gallery:not([hidden]) .pv-desktop .pg-cap,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="committed"]:checked) .picker-strategy-stage > .picker-preview.picker-preview--gallery:not([hidden]) .pv-desktop .pg-cap,
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="drenched"]) .picker-strategy-stage > .picker-preview.picker-preview--gallery:not([hidden]) .pv-desktop .pg-cap,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="drenched"]:checked) .picker-strategy-stage > .picker-preview.picker-preview--gallery:not([hidden]) .pv-desktop .pg-cap {
|
||||
padding-top: 5.2cqh;
|
||||
gap: 2.6cqh;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="restrained"]) .picker-strategy-stage > .picker-preview.picker-preview--gallery:not([hidden]) .pv-desktop .pg-cap::before,
|
||||
#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--gallery:not([hidden]) .pv-desktop .pg-cap::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(11.5 * var(--pv-x));
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
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))
|
||||
);
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="committed"]) .picker-strategy-stage > .picker-preview.picker-preview--gallery:not([hidden]) .pv-desktop .pg-cap::before,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="committed"]:checked) .picker-strategy-stage > .picker-preview.picker-preview--gallery:not([hidden]) .pv-desktop .pg-cap::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(11.5 * var(--pv-x));
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
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))
|
||||
);
|
||||
}
|
||||
|
||||
/* Gallery parity (plan-18): drenched portfolio color roles. */
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="drenched"]) .picker-strategy-stage > .picker-preview.picker-preview--gallery:not([hidden]),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="drenched"]:checked) .picker-strategy-stage > .picker-preview.picker-preview--gallery:not([hidden]) {
|
||||
--pv-secondary: var(--pkc-secondary);
|
||||
--pv-tertiary: var(--pkc-tertiary);
|
||||
--pv-bone: color-mix(in oklab, var(--pkc-p-ink) 55%, var(--pkc-primary));
|
||||
--pv-strong: var(--pkc-p-ink);
|
||||
--pv-secondary-wash: color-mix(in oklab, var(--pkc-p-ink) 16%, var(--pkc-primary));
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="drenched"]) .picker-strategy-stage > .picker-preview.picker-preview--gallery:not([hidden]) .pv-image,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="drenched"]:checked) .picker-strategy-stage > .picker-preview.picker-preview--gallery:not([hidden]) .pv-image {
|
||||
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))
|
||||
);
|
||||
border-color: color-mix(in oklab, var(--pkc-secondary) 52%, var(--pkc-primary));
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="drenched"]) .picker-strategy-stage > .picker-preview.picker-preview--gallery:not([hidden]) .pv-image::after,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="drenched"]:checked) .picker-strategy-stage > .picker-preview.picker-preview--gallery:not([hidden]) .pv-image::after {
|
||||
background: var(--pkc-tertiary);
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="drenched"]) .picker-strategy-stage > .picker-preview.picker-preview--gallery:not([hidden]) .pg-track i:nth-child(2),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="drenched"]:checked) .picker-strategy-stage > .picker-preview.picker-preview--gallery:not([hidden]) .pg-track i:nth-child(2) {
|
||||
background: color-mix(in oklab, var(--pkc-secondary) 78%, var(--pkc-p-ink));
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="drenched"]) .picker-strategy-stage > .picker-preview.picker-preview--gallery:not([hidden]) .pg-cap-title,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="drenched"]:checked) .picker-strategy-stage > .picker-preview.picker-preview--gallery:not([hidden]) .pg-cap-title {
|
||||
background: var(--pkc-tertiary);
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="drenched"]) .picker-strategy-stage > .picker-preview.picker-preview--gallery:not([hidden]) .pv-nav-bars i:nth-child(2),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="drenched"]:checked) .picker-strategy-stage > .picker-preview.picker-preview--gallery:not([hidden]) .pv-nav-bars i:nth-child(2) {
|
||||
background: color-mix(in oklab, var(--pkc-secondary) 72%, var(--pkc-p-ink));
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="drenched"]) .picker-strategy-stage > .picker-preview.picker-preview--gallery:not([hidden]) .pv-tabbar i:nth-child(2),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="drenched"]:checked) .picker-strategy-stage > .picker-preview.picker-preview--gallery:not([hidden]) .pv-tabbar i:nth-child(2) {
|
||||
background: color-mix(in oklab, var(--pkc-secondary) 70%, var(--pkc-p-ink));
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="drenched"]) .picker-strategy-stage > .picker-preview.picker-preview--gallery:not([hidden]) .pv-tabbar i:nth-child(3),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="drenched"]:checked) .picker-strategy-stage > .picker-preview.picker-preview--gallery:not([hidden]) .pv-tabbar i:nth-child(3) {
|
||||
background: color-mix(in oklab, var(--pkc-tertiary) 82%, var(--pkc-p-ink));
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="drenched"]) .picker-strategy-stage > .picker-preview.picker-preview--gallery:not([hidden]) .pv-desktop .pg-cap::before,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="drenched"]:checked) .picker-strategy-stage > .picker-preview.picker-preview--gallery:not([hidden]) .pv-desktop .pg-cap::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(11.5 * var(--pv-x));
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
border: 1px solid color-mix(in oklab, var(--pkc-secondary) 58%, var(--pkc-primary));
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
color-mix(in oklab, var(--pkc-secondary) 30%, var(--pkc-primary)),
|
||||
color-mix(in oklab, var(--pkc-p-ink) 20%, var(--pkc-primary))
|
||||
);
|
||||
}
|
||||
|
||||
/* Gallery parity (plan-18): experience font-pair board type tuning. */
|
||||
#picker-form .picker-preview-type--experience .ps-desktop .ps-index-cap { gap: 0; }
|
||||
#picker-form .picker-preview-type--experience .ps-desktop .ps-index-avatar { margin-bottom: 10px; }
|
||||
#picker-form .picker-preview-type--experience .ps-desktop .ps-index-note { line-height: 1.33; margin-top: 2px; }
|
||||
#picker-form .picker-preview-type--experience .ps-desktop .ps-index-title { font-size: 20px; }
|
||||
#picker-form .picker-preview-type--experience .ps-phone :is(.ps-nav-tail, .ps-index-meta) { display: none; }
|
||||
|
||||
/* 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
|
||||
@@ -5442,6 +5639,20 @@ body.picker-page {
|
||||
--ps-gutter: 5.5%;
|
||||
}
|
||||
|
||||
/* Gallery parity (plan-18): font-pair hides the nav CTA on persuade, operate,
|
||||
and read; experience keeps its index rail action. */
|
||||
.picker-preview-type:not(.picker-preview-type--experience) :is(.ps-nav-action, .ps-nav-tail) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* The editorial link line is drawn on every board except the type board, which
|
||||
sets that copy in words and has no room for a third line. Deleting the
|
||||
element instead took the line off the boundaries, corners and layout boards
|
||||
too, where the gallery still draws it. */
|
||||
.picker-preview-type .ps-editorial-copy > em[data-type-section-link] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.picker-preview-type .ps-phone {
|
||||
--ps-gutter: 6%;
|
||||
grid-template-rows: 7.2% 1fr;
|
||||
|
||||
@@ -202,3 +202,330 @@
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-preview-boundaries .ps-ops-item {
|
||||
background-color: var(--pvs-panel);
|
||||
}
|
||||
|
||||
/* Gallery parity (plan-18): the persuade artboard kept on the boundaries and
|
||||
corners screens flattens its shadows and re-grids the proof strip, ported
|
||||
from the gallery's previews-38-41-proof-spacing block. Scoped to the two
|
||||
screens' own stages; document proofs and hub clones keep carried shadows
|
||||
through the dcx mirrors. */
|
||||
:is(.picker-screen[data-screen="08"], .picker-screen[data-screen="09"]) .picker-board-stage > [data-artboard][data-surface="persuade"] :is(*, *::before, *::after) {
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
:is(.picker-screen[data-screen="08"], .picker-screen[data-screen="09"]) .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-desktop .ps-proof {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
|
||||
}
|
||||
|
||||
:is(.picker-screen[data-screen="08"], .picker-screen[data-screen="09"]) .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-phone .ps-proof {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
|
||||
position: relative;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
:is(.picker-screen[data-screen="08"], .picker-screen[data-screen="09"]) .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-phone .ps-editorial-copy {
|
||||
margin-top: 16px !important;
|
||||
}
|
||||
|
||||
:is(.picker-screen[data-screen="08"], .picker-screen[data-screen="09"]) .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-desktop .ps-proof-item {
|
||||
padding-right: 24px !important;
|
||||
}
|
||||
|
||||
:is(.picker-screen[data-screen="08"], .picker-screen[data-screen="09"]) .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-proof-divider {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Cells 40 and 41 only: band washes under surface-changes, and both band
|
||||
rules under cards-and-panels, exactly the gallery's cellNum conditionals. */
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-screen[data-screen="08"] .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-proof,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-proof,
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-screen[data-screen="08"] .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-proof,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-proof {
|
||||
background-color: color-mix(in oklab, var(--pvs-band-alt) 65%, white) !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-screen[data-screen="08"] .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-footer,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-footer,
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-screen[data-screen="08"] .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-footer,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-footer {
|
||||
background-color: color-mix(in oklab, var(--pvs-band) 65%, white) !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-screen[data-screen="08"] .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-phone .ps-proof,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-phone .ps-proof {
|
||||
column-gap: 16px !important;
|
||||
padding-right: var(--pvs-gutter) !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-screen[data-screen="08"] .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-gallery-item,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-gallery-item {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* ==== Derived stage (plan-18): screens 08, 09, 10 mount strategy-preview
|
||||
clones for the surfaces the gallery derives. Geometry mirrors the artboard
|
||||
footprint; colors are locked to the restrained base for operate, read and
|
||||
experience clones, matching the gallery's baseCellId map. ==== */
|
||||
:is(.picker-screen[data-screen="08"], .picker-screen[data-screen="09"], .picker-screen[data-screen="10"]) .picker-board-stage > .picker-preview {
|
||||
grid-row: 2;
|
||||
aspect-ratio: 1.865 / 1;
|
||||
width: 100%;
|
||||
--pv-primary: var(--pkc-primary, var(--ks-champagne));
|
||||
--pv-secondary: var(--pkc-secondary, var(--ks-patina));
|
||||
--pv-tertiary: var(--pkc-tertiary, var(--ks-kinpaku));
|
||||
--pv-neutral: var(--pkc-neutral, var(--ks-lacquer-raised));
|
||||
--pv-n-ink: var(--pkc-n-ink, var(--ks-champagne));
|
||||
--pv-p-ink: var(--pkc-p-ink, var(--ks-champagne));
|
||||
--derived-rule: color-mix(in oklab, var(--pv-strong) 24%, var(--pv-neutral));
|
||||
--derived-band: color-mix(in oklab, var(--pv-strong) 7%, var(--pv-neutral));
|
||||
--derived-band-alt: color-mix(in oklab, var(--pv-strong) 13%, var(--pv-neutral));
|
||||
--derived-panel: color-mix(in oklab, var(--pv-strong) 5%, var(--pv-neutral));
|
||||
--derived-panel-edge: color-mix(in oklab, var(--pv-strong) 20%, var(--pv-neutral));
|
||||
}
|
||||
|
||||
/* Restrained lock for the non-persuade clones, mirrored from the strategy
|
||||
remap so the derived boards hold the gallery's base regardless of the
|
||||
run's strategy answer. */
|
||||
:is(.picker-screen[data-screen="08"], .picker-screen[data-screen="09"], .picker-screen[data-screen="10"]) .picker-board-stage > .picker-preview:not([data-surface="persuade"]) {
|
||||
--pv-secondary: color-mix(in oklab, var(--pkc-neutral) 78%, var(--pkc-n-ink));
|
||||
--pv-tertiary: color-mix(in oklab, var(--pkc-neutral) 86%, var(--pkc-n-ink));
|
||||
--pv-t-ink: var(--pkc-n-ink);
|
||||
--pv-t-on-t: var(--pkc-n-ink);
|
||||
--pv-t-on-n: color-mix(in oklab, var(--pkc-n-ink) 62%, var(--pkc-neutral));
|
||||
--pv-t-on-p: var(--pkc-p-ink);
|
||||
}
|
||||
|
||||
:is(.picker-screen[data-screen="08"], .picker-screen[data-screen="09"], .picker-screen[data-screen="10"]) .picker-board-stage > .picker-preview.picker-preview--docs {
|
||||
--pd-quote: var(--pd-ink);
|
||||
}
|
||||
|
||||
:is(.picker-screen[data-screen="08"], .picker-screen[data-screen="09"], .picker-screen[data-screen="10"]) .picker-board-stage > .picker-preview.picker-preview--docs :is(.pd-note-dot, .pd-note-lines i) {
|
||||
background: var(--pd-ink);
|
||||
}
|
||||
|
||||
/* Wireframe weights. The gallery derives these boards from the strategy
|
||||
stage, so the ops, docs and portfolio clones carry that stage's 1.35 desktop
|
||||
step and nothing else; their bar geometry stays the authored base. */
|
||||
:is(.picker-screen[data-screen="08"], .picker-screen[data-screen="09"], .picker-screen[data-screen="10"]) .picker-board-stage > .picker-preview:is(.picker-preview--ops, .picker-preview--docs, .picker-preview--gallery) .pv-desktop {
|
||||
--pv-text: 1.35;
|
||||
}
|
||||
|
||||
/* Boundaries read (gallery cells 45 to 47) is the one derived group the
|
||||
gallery reweights: both viewports step to 1.65 and the rail dot and note dot
|
||||
widen. Corners read and depth read draw at the base weight. */
|
||||
.picker-screen[data-screen="08"] .picker-board-stage > .picker-preview.picker-preview--docs :is(.pv-desktop, .pv-phone) {
|
||||
--pv-text: 1.65;
|
||||
}
|
||||
|
||||
.picker-screen[data-screen="08"] .picker-board-stage > .picker-preview.picker-preview--docs .pd-item i { width: calc(4.07 * var(--pv-x)); }
|
||||
.picker-screen[data-screen="08"] .picker-board-stage > .picker-preview.picker-preview--docs .pd-note-dot { width: calc(4.07 * var(--pv-x)); }
|
||||
|
||||
/* Experience cap avatars on derived boards, from the gallery derived sheet. */
|
||||
:is(.picker-screen[data-screen="08"], .picker-screen[data-screen="09"], .picker-screen[data-screen="10"]) .picker-board-stage > .picker-preview--gallery .pv-desktop .pg-cap { padding-top: 5.2cqh; gap: 2.6cqh; }
|
||||
:is(.picker-screen[data-screen="08"], .picker-screen[data-screen="09"], .picker-screen[data-screen="10"]) .picker-board-stage > .picker-preview--gallery .pv-desktop .pg-cap::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(11.5 * var(--pv-x));
|
||||
aspect-ratio: 1;
|
||||
border: 1px solid color-mix(in oklab, var(--pv-secondary) 55%, var(--pv-neutral));
|
||||
border-radius: 50%;
|
||||
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)));
|
||||
}
|
||||
|
||||
/* Phone field chevron alignment on ops clones, from the gallery derived sheet
|
||||
(cells 44 and 55-58; the corners screen applies it under every option). */
|
||||
:is(.picker-screen[data-screen="09"], .picker-screen[data-screen="10"]) .picker-board-stage > .picker-preview .pv-phone .po-field > .po-chev { align-self: center; transform: translateY(-25%) rotate(45deg); }
|
||||
|
||||
/* Boundary additions on derived clones: the base geometry stays fixed; only
|
||||
separation changes. Ported from the gallery derived sheet. */
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="open-space"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.pv-nav, .po-side, .po-main, .pd-side),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="open-space"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.pv-nav, .po-side, .po-main, .pd-side) {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="open-space"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.po-divider, .pg-row--flip, .pg-rail),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="open-space"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.po-divider, .pg-row--flip, .pg-rail) {
|
||||
border-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="open-space"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-divider,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="open-space"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-divider {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="thin-dividers"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview:is(.picker-preview--ops, .picker-preview--docs, .picker-preview--gallery) .pv-nav,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview:is(.picker-preview--ops, .picker-preview--docs, .picker-preview--gallery) .pv-nav {
|
||||
border-bottom: 1px solid var(--derived-rule) !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="thin-dividers"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.po-side, .po-main, .pd-side),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.po-side, .po-main, .pd-side) {
|
||||
border-right: 1px solid var(--derived-rule) !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="thin-dividers"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-divider,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-divider {
|
||||
background: var(--derived-rule) !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="thin-dividers"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-row + .po-row,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-row + .po-row {
|
||||
box-shadow: inset 0 1px 0 var(--derived-rule);
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="thin-dividers"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview:not([data-surface="experience"]) .pg-row--flip,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview:not([data-surface="experience"]) .pg-row--flip {
|
||||
box-shadow: inset 0 1px 0 var(--derived-rule);
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="thin-dividers"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview:not([data-surface="experience"]) .pg-rail,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview:not([data-surface="experience"]) .pg-rail {
|
||||
border-top: 1px solid var(--derived-rule);
|
||||
}
|
||||
|
||||
/* Cell 49: experience thin-dividers redraws its flip row and phone image
|
||||
separations by pseudo-element rules. */
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="thin-dividers"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-row--flip,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-row--flip {
|
||||
position: relative;
|
||||
margin-top: 10cqh !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="thin-dividers"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-row--flip::before,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-row--flip::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -5cqh;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
background: var(--derived-rule);
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="thin-dividers"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-rail,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-rail,
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-rail,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-rail {
|
||||
border-top: 0 !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="thin-dividers"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-phone-body > .pg-cap + .pv-image,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-phone-body > .pg-cap + .pv-image {
|
||||
margin-top: 8cqh !important;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="thin-dividers"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-phone-body > .pg-cap + .pv-image::before,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-phone-body > .pg-cap + .pv-image::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -4cqh;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
background: var(--derived-rule);
|
||||
}
|
||||
|
||||
/* Cell 50: experience surface-changes. */
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-row--flip,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-row--flip {
|
||||
margin-top: 5cqh !important;
|
||||
padding-block: 5cqh !important;
|
||||
box-shadow: none !important;
|
||||
background: color-mix(in oklab, var(--derived-band-alt) 60%, white 40%) !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-phone-body > .pg-cap + .pv-image,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-phone-body > .pg-cap + .pv-image {
|
||||
margin-top: 8cqh !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-phone-body,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-phone-body {
|
||||
background: linear-gradient(to bottom, transparent 0 50%, color-mix(in oklab, var(--derived-band-alt) 60%, white 40%) 50% 100%) !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pv-phone .pv-tabbar,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pv-phone .pv-tabbar {
|
||||
background: color-mix(in oklab, var(--derived-band-alt) 60%, white 40%) !important;
|
||||
}
|
||||
|
||||
/* Surface changes on every derived clone. */
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.pv-nav, .po-side, .po-main, .pd-side),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.pv-nav, .po-side, .po-main, .pd-side) {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.pv-nav, .pv-phone-top, .pv-tabbar),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.pv-nav, .pv-phone-top, .pv-tabbar) {
|
||||
background: var(--derived-band) !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.po-side, .po-panel, .pd-side),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.po-side, .po-panel, .pd-side) {
|
||||
background: var(--derived-band) !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview:not([data-surface="experience"]) :is(.pd-note, .pg-row--flip),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview:not([data-surface="experience"]) :is(.pd-note, .pg-row--flip) {
|
||||
background: var(--derived-band-alt) !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-divider,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-divider {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* Cards and panels. */
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.pv-nav, .po-side, .po-main),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.pv-nav, .po-side, .po-main) {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-divider,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-divider {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.po-side, .po-chart, .po-rows, .po-panel, .po-phone-body .po-chart, .po-phone-body .po-field, .po-phone-body .po-prow),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.po-side, .po-chart, .po-rows, .po-panel, .po-phone-body .po-chart, .po-phone-body .po-field, .po-phone-body .po-prow) {
|
||||
background: var(--derived-panel) !important;
|
||||
border: 1px solid var(--derived-panel-edge) !important;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-chart,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-chart {
|
||||
padding-inline: calc(3 * var(--pv-x));
|
||||
}
|
||||
|
||||
/* Cell 44: operate cards-and-panels details. */
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="operate"] .pv-desktop .po-chart,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="operate"] .pv-desktop .po-chart {
|
||||
padding: calc(3 * var(--pv-x)) calc(5 * var(--pv-x)) !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="operate"] .pv-phone .po-toggle,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="operate"] .pv-phone .po-toggle {
|
||||
margin-left: auto !important;
|
||||
margin-right: 12px !important;
|
||||
padding-right: 12px !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="operate"] .pv-phone .po-prow,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="operate"] .pv-phone .po-prow {
|
||||
padding-left: 12px !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="operate"] .pv-phone .po-field > .po-chev,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="operate"] .pv-phone .po-field > .po-chev {
|
||||
align-self: center !important;
|
||||
transform: translateY(-25%) rotate(45deg) !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-rows,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-rows {
|
||||
padding-inline: calc(2 * var(--pv-x));
|
||||
}
|
||||
|
||||
@@ -59,3 +59,23 @@
|
||||
--pvs-radius-control: 999px;
|
||||
--pvs-radius-bar: 3px;
|
||||
}
|
||||
|
||||
/* Corner radii on the derived clones. Dots remain dots while frames,
|
||||
surfaces, controls, and text bars take the selected radius. Ported from
|
||||
the gallery derived sheet; values match the artboard radius ramp above. */
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="corner-style"][value="sharp"]) .picker-screen[data-screen="09"] .picker-board-stage,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="corner-style"])):has(input[name="corner-style"][value="sharp"]:checked) .picker-screen[data-screen="09"] .picker-board-stage { --derived-frame-radius: 0px; --derived-phone-radius: 0px; --derived-surface-radius: 0px; --derived-control-radius: 0px; --derived-bar-radius: 0px; }
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="corner-style"][value="slightly-soft"]) .picker-screen[data-screen="09"] .picker-board-stage,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="corner-style"])):has(input[name="corner-style"][value="slightly-soft"]:checked) .picker-screen[data-screen="09"] .picker-board-stage { --derived-frame-radius: 4px; --derived-phone-radius: 5px; --derived-surface-radius: 3px; --derived-control-radius: 3px; --derived-bar-radius: 2px; }
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="corner-style"][value="friendly"]) .picker-screen[data-screen="09"] .picker-board-stage,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="corner-style"])):has(input[name="corner-style"][value="friendly"]:checked) .picker-screen[data-screen="09"] .picker-board-stage { --derived-frame-radius: 7px; --derived-phone-radius: 11px; --derived-surface-radius: 8px; --derived-control-radius: 8px; --derived-bar-radius: 3px; }
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="corner-style"][value="pill"]) .picker-screen[data-screen="09"] .picker-board-stage,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="corner-style"])):has(input[name="corner-style"][value="pill"]:checked) .picker-screen[data-screen="09"] .picker-board-stage { --derived-frame-radius: 9px; --derived-phone-radius: 15px; --derived-surface-radius: 12px; --derived-control-radius: 999px; --derived-bar-radius: 3px; }
|
||||
|
||||
.picker-screen[data-screen="09"] .picker-board-stage > .picker-preview .pv-desktop { border-radius: var(--derived-frame-radius) !important; }
|
||||
.picker-screen[data-screen="09"] .picker-board-stage > .picker-preview .pv-phone { border-radius: var(--derived-phone-radius) !important; }
|
||||
.picker-screen[data-screen="09"] .picker-board-stage > .picker-preview :is(.pv-image, .pv-mini-card, .po-chart, .po-rows, .po-panel, .pg-row) { border-radius: var(--derived-surface-radius) !important; }
|
||||
.picker-screen[data-screen="09"] .picker-board-stage > .picker-preview .pd-note { border-radius: 0 var(--derived-surface-radius) var(--derived-surface-radius) 0 !important; }
|
||||
.picker-screen[data-screen="09"] .picker-board-stage > .picker-preview :is(.pv-pill, .pv-actions i, .po-item--on, .po-field, .po-row, .po-toggle) { border-radius: var(--derived-control-radius) !important; }
|
||||
.picker-screen[data-screen="09"] .picker-board-stage > .picker-preview .po-toggle::after { border-radius: var(--derived-control-radius) !important; }
|
||||
.picker-screen[data-screen="09"] .picker-board-stage > .picker-preview :is(.pv-nav-bars i, .pv-pill::after, .pv-eyebrow, .pv-headline i, .pv-copy-bar, .po-line, .po-cell, .po-heading, .po-label, .pd-item span, .pd-heading, .pd-para i, .pd-note-lines i, .pg-cap i, .pg-track i) { border-radius: var(--derived-bar-radius) !important; }
|
||||
|
||||
@@ -119,3 +119,54 @@
|
||||
#picker-form:has(input[name="boundary-style"][value="surface-changes"]:checked) [data-carry] .ps-index-row--flip {
|
||||
box-shadow: var(--pvs-shadow-card);
|
||||
}
|
||||
|
||||
/* Depth additions on derived clones. Flat is the base; the other answers
|
||||
lift only solid, meaningful objects. Ported from the gallery derived
|
||||
sheet; shadow alphas stay literal because they are shadows, not palette
|
||||
roles. */
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="depth-style"][value="flat"]) .picker-screen[data-screen="10"] .picker-board-stage,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="depth-style"])):has(input[name="depth-style"][value="flat"]:checked) .picker-screen[data-screen="10"] .picker-board-stage { --derived-shadow-chrome: none; --derived-shadow-card: none; --derived-shadow-control: none; --derived-shadow-surface: none; }
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="depth-style"][value="soft-lift"]) .picker-screen[data-screen="10"] .picker-board-stage,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="depth-style"])):has(input[name="depth-style"][value="soft-lift"]:checked) .picker-screen[data-screen="10"] .picker-board-stage { --derived-shadow-chrome: 0 1px 2px rgb(0 0 0 / 0.08); --derived-shadow-card: 0 2px 4px rgb(0 0 0 / 0.1); --derived-shadow-control: 0 1px 2px rgb(0 0 0 / 0.1); --derived-shadow-surface: 0 2px 4px rgb(0 0 0 / 0.1); }
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="depth-style"][value="floating"]) .picker-screen[data-screen="10"] .picker-board-stage,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="depth-style"])):has(input[name="depth-style"][value="floating"]:checked) .picker-screen[data-screen="10"] .picker-board-stage { --derived-shadow-chrome: 0 1px 3px rgb(0 0 0 / 0.1); --derived-shadow-card: 0 4px 8px rgb(0 0 0 / 0.14); --derived-shadow-control: 0 2px 4px rgb(0 0 0 / 0.12); --derived-shadow-surface: 0 4px 8px rgb(0 0 0 / 0.14); }
|
||||
|
||||
.picker-screen[data-screen="10"] .picker-board-stage > .picker-preview :is(.pv-nav, .pv-phone-top) { box-shadow: var(--derived-shadow-chrome) !important; }
|
||||
.picker-screen[data-screen="10"] .picker-board-stage > .picker-preview :is(.pv-pill, .pv-actions i, .po-item--on, .po-field, .po-toggle) { box-shadow: var(--derived-shadow-control) !important; }
|
||||
.picker-screen[data-screen="10"] .picker-board-stage > .picker-preview :is(.pv-image, .pv-mini-card, .pd-note) { box-shadow: var(--derived-shadow-card) !important; }
|
||||
.picker-screen[data-screen="10"] .picker-board-stage > .picker-preview .pg-cap::before { box-shadow: var(--derived-shadow-card) !important; }
|
||||
.picker-screen[data-screen="10"] .picker-board-stage > .picker-preview :is(.po-chart i, .po-side, .po-panel) { box-shadow: var(--derived-shadow-surface) !important; }
|
||||
|
||||
/* Depth persuade rides the drenched base, the gallery's baseCellId lock.
|
||||
The role swap has to land before the persuade-specific secondary locks,
|
||||
or the ground stays light and every derived depth cell misses by a mile. */
|
||||
.picker-screen[data-screen="10"] .picker-board-stage > .picker-preview[data-surface="persuade"] {
|
||||
--pv-neutral: var(--pkc-primary);
|
||||
--pv-n-ink: var(--pkc-p-ink);
|
||||
--pv-primary: var(--pkc-p-ink);
|
||||
--pv-p-ink: var(--pkc-primary);
|
||||
--pv-p-on-n: var(--pkc-p-ink);
|
||||
--pv-p-on-p: var(--pkc-primary);
|
||||
--pv-t-on-n: var(--pkc-t-on-p);
|
||||
--pv-secondary: var(--pkc-secondary);
|
||||
--pv-tertiary: var(--pkc-tertiary);
|
||||
--pv-bone: color-mix(in oklab, var(--pkc-p-ink) 55%, var(--pkc-primary));
|
||||
--pv-strong: var(--pkc-p-ink);
|
||||
--pv-secondary-wash: color-mix(in oklab, var(--pkc-p-ink) 16%, var(--pkc-primary));
|
||||
}
|
||||
|
||||
.picker-screen[data-screen="10"] .picker-board-stage > .picker-preview[data-surface="persuade"] .pv-desktop .pv-image {
|
||||
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;
|
||||
}
|
||||
|
||||
.picker-screen[data-screen="10"] .picker-board-stage > .picker-preview[data-surface="persuade"] .pv-desktop .pv-image::after { background: var(--pkc-tertiary) !important; }
|
||||
|
||||
.picker-screen[data-screen="10"] .picker-board-stage > .picker-preview[data-surface="persuade"] .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;
|
||||
}
|
||||
|
||||
.picker-screen[data-screen="10"] .picker-board-stage > .picker-preview[data-surface="persuade"] .pv-desktop .pv-nav-bars i:nth-child(2) {
|
||||
background: color-mix(in oklab, var(--pkc-secondary) 72%, var(--pkc-p-ink)) !important;
|
||||
}
|
||||
|
||||
@@ -2258,3 +2258,24 @@
|
||||
transition-duration: 0.001ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Gallery parity (plan-18): index lines read as bars through their inner b,
|
||||
the rail hides, and the freeform index tightens. Ported from the gallery's
|
||||
previews-35-37 experiment blocks; applies to the layout screen's experience
|
||||
board for every option, exactly as the gallery applies it to cells 35-37. */
|
||||
[data-surface="experience"]:where(.picker-preview-layout) .ps-index-rail { display: none !important; }
|
||||
[data-surface="experience"]:where(.picker-preview-layout) .ps-index-lines { background-color: transparent !important; }
|
||||
[data-surface="experience"]:where(.picker-preview-layout) .ps-index-lines b { background-color: var(--pvs-bars) !important; }
|
||||
[data-surface="experience"]:where(.picker-preview-layout) .ps-index-lines > b { color: var(--pvs-bars) !important; }
|
||||
|
||||
:where(#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="simple-grid"]), #picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"])):has(input[name="layout-structure"][value="simple-grid"]:checked)) [data-surface="experience"]:where(.picker-preview-layout) .ps-phone-body::after { content: none !important; display: none !important; }
|
||||
:where(#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="freeform"]), #picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"])):has(input[name="layout-structure"][value="freeform"]:checked)) [data-surface="experience"]:where(.picker-preview-layout) .ps-phone-body::after { content: none !important; display: none !important; }
|
||||
:where(#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="balanced"]), #picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"])):has(input[name="layout-structure"][value="balanced"]:checked)) [data-surface="experience"]:where(.picker-preview-layout) .ps-phone-body::after { content: none !important; display: none !important; }
|
||||
|
||||
:where(#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="balanced"]), #picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"])):has(input[name="layout-structure"][value="balanced"]:checked)) [data-surface="experience"]:where(.picker-preview-layout) .ps-desktop .ps-scatter.ps-scatter--trail { display: none !important; }
|
||||
|
||||
:where(#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="freeform"]), #picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"])):has(input[name="layout-structure"][value="freeform"]:checked)) [data-surface="experience"]:where(.picker-preview-layout) .ps-phone-project-rail { display: none !important; }
|
||||
:where(#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="freeform"]), #picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"])):has(input[name="layout-structure"][value="freeform"]:checked)) [data-surface="experience"]:where(.picker-preview-layout) .ps-phone .ps-index-cap { gap: 8px !important; }
|
||||
:where(#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="freeform"]), #picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"])):has(input[name="layout-structure"][value="freeform"]:checked)) [data-surface="experience"]:where(.picker-preview-layout) .ps-support.ps-phone-support { margin-top: 10px !important; }
|
||||
:where(#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="freeform"]), #picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"])):has(input[name="layout-structure"][value="freeform"]:checked)) [data-surface="experience"]:where(.picker-preview-layout) .ps-desktop .ps-index-cap { gap: 6px !important; }
|
||||
:where(#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="freeform"]), #picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"])):has(input[name="layout-structure"][value="freeform"]:checked)) [data-surface="experience"]:where(.picker-preview-layout) .ps-desktop .ps-index-lines { gap: 6px !important; }
|
||||
|
||||
@@ -946,3 +946,60 @@
|
||||
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="freeform"]:checked) [data-carry][data-surface="experience"] .ps-index-row--flip > .ps-index-cap {
|
||||
translate: 9% 0;
|
||||
}
|
||||
|
||||
/* Gallery parity (plan-18): freeform landing hides the proof strip, retimes
|
||||
the phone gallery, and opens a spacer row before the desktop editorial.
|
||||
Ported from the gallery's preview-34-hide-proof block; keyed to freeform so
|
||||
simple-grid and balanced keep today's rendition. */
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="freeform"]) .picker-preview-layout[data-surface="persuade"],
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"])):has(input[name="layout-structure"][value="freeform"]:checked) .picker-preview-layout[data-surface="persuade"] {
|
||||
--pls-spacer: 1;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="freeform"]) .picker-preview-layout[data-surface="persuade"] :is(*, *::before, *::after),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"])):has(input[name="layout-structure"][value="freeform"]:checked) .picker-preview-layout[data-surface="persuade"] :is(*, *::before, *::after) {
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="freeform"]) .picker-preview-layout[data-surface="persuade"] .ps-proof,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"])):has(input[name="layout-structure"][value="freeform"]:checked) .picker-preview-layout[data-surface="persuade"] .ps-proof {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="freeform"]) .picker-preview-layout[data-surface="persuade"] .ps-phone .ps-gallery,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"])):has(input[name="layout-structure"][value="freeform"]:checked) .picker-preview-layout[data-surface="persuade"] .ps-phone .ps-gallery {
|
||||
margin-top: 15px !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="freeform"]) .picker-preview-layout[data-surface="persuade"] .ps-phone .ps-gallery-item:last-child,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"])):has(input[name="layout-structure"][value="freeform"]:checked) .picker-preview-layout[data-surface="persuade"] .ps-phone .ps-gallery-item:last-child {
|
||||
margin-top: 14px !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="freeform"]) .picker-preview-layout[data-surface="persuade"] .ps-phone .ps-gallery-item:nth-child(2) > i,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"])):has(input[name="layout-structure"][value="freeform"]:checked) .picker-preview-layout[data-surface="persuade"] .ps-phone .ps-gallery-item:nth-child(2) > i {
|
||||
margin-top: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="freeform"]) .picker-preview-layout[data-surface="persuade"] .ps-phone-body .ps-gallery-item:nth-child(2)::before,
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="freeform"]) .picker-preview-layout[data-surface="persuade"] .ps-phone-body .ps-gallery-item:nth-child(2)::after,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"])):has(input[name="layout-structure"][value="freeform"]:checked) .picker-preview-layout[data-surface="persuade"] .ps-phone-body .ps-gallery-item:nth-child(2)::before,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"])):has(input[name="layout-structure"][value="freeform"]:checked) .picker-preview-layout[data-surface="persuade"] .ps-phone-body .ps-gallery-item:nth-child(2)::after {
|
||||
content: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Artboard.astro stamps the spacer on every persuade board, so the default
|
||||
hide has to be unscoped. Keyed to the layout preview it left a 5px grid row
|
||||
standing on the motion, boundaries, corners and font-pair boards, which
|
||||
pushed their editorial and footer rows off the gallery reference. */
|
||||
[data-layout-editorial-spacer] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="freeform"]) .picker-preview-layout[data-surface="persuade"] [data-layout-editorial-spacer],
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"])):has(input[name="layout-structure"][value="freeform"]:checked) .picker-preview-layout[data-surface="persuade"] [data-layout-editorial-spacer] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -1892,3 +1892,53 @@
|
||||
scale: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
/* Premium motion cells (plan-18): one board per (surface, option). The tab
|
||||
strip keeps toggling [hidden] by surface; these rules pick the option
|
||||
within the visible surface. */
|
||||
.picker-preview-motion[data-motion-cell] { display: none; }
|
||||
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="motion-energy"][value="restrained"]) .picker-preview-motion[data-motion-cell$="-restrained"]:not([hidden]),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="motion-energy"])):has(input[name="motion-energy"][value="restrained"]:checked) .picker-preview-motion[data-motion-cell$="-restrained"]:not([hidden]),
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="motion-energy"][value="responsive"]) .picker-preview-motion[data-motion-cell$="-responsive"]:not([hidden]),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="motion-energy"])):has(input[name="motion-energy"][value="responsive"]:checked) .picker-preview-motion[data-motion-cell$="-responsive"]:not([hidden]),
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="motion-energy"][value="choreographed"]) .picker-preview-motion[data-motion-cell$="-choreographed"]:not([hidden]),
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="motion-energy"])):has(input[name="motion-energy"][value="choreographed"]:checked) .picker-preview-motion[data-motion-cell$="-choreographed"]:not([hidden]) {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
/* ==== Rebuilt motion boards ====
|
||||
tmp/motion-previews-premium.html is the source of truth for these six cells,
|
||||
and it draws them on rebuilt boards: the landing board takes preview 33's
|
||||
shape and a phone, the portfolio board becomes preview 48's gallery drawing.
|
||||
These are that file's two layered sheets, scoped to the motion boards so the
|
||||
layout screen's own boards keep their rendition. */
|
||||
|
||||
/* landing-layout-grid-corrections: the field is mounted for preview 33's
|
||||
structure and then not drawn, and the section bands lose their rules. */
|
||||
.picker-preview-motion.picker-preview-layout[data-surface="persuade"] .ps-layout-grid {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.picker-preview-motion.picker-preview-layout[data-surface="persuade"] .ps-desktop::before,
|
||||
.picker-preview-motion.picker-preview-layout[data-surface="persuade"] .ps-phone-body::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* desktop-only-previews: the scenes are authored for the desktop artifact, so
|
||||
the handset holds its column and stays out of the picture. */
|
||||
.picker-preview-motion.picker-preview-layout[data-surface="persuade"] > .ps-phone,
|
||||
.picker-preview-motion.picker-preview--gallery[data-surface="experience"] > .pv-phone {
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
/* The premium sheet pins the rebuilt portfolio board to its stage with
|
||||
height: 100%, which the extraction file can do because it forces the stage
|
||||
to 918 by 492.21875. The live stage sizes to the board instead, so the
|
||||
footprint is stated as the artboard ratio this drawing replaces, which
|
||||
resolves to the same box at that width and still tracks a resize. */
|
||||
.picker-board-stage > .picker-preview-motion[data-surface="experience"] {
|
||||
aspect-ratio: 1.865 / 1;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user