[MWPW-198875] Preflight modal redesign — light theme on c2 tokens by mokimo · Pull Request #6188 · adobecom/milo

mokimo · 2026-06-17T12:47:20Z

Description

Ground-up restyle of the Milo Preflight modal to a premium, Adobe Spectrum-2-style light theme built on c2 (--s2a-*) design tokens. Functionality is unchanged — only the visual/UX layer.

Highlights

Left navigation rail with section icons, active states, and per-tab issue badges (errors red / warnings orange)
Main content header per section; card-based checks with tonal status chips and a clean progress-ring loading state
Redesigned Assets tab: compact thumbnails, scannable metric rows, critical accent, and click-to-navigate that closes preflight and jumps to the element, with a "Back to Preflight" popover pinned to the top-left of the screen
Redesigned Martech metadata table
Notification dismisses when preflight opens and is suppressed while the modal is open
General badge also counts localization (faulty link) issues
Performance hides the "Highlight LCP" link when there is no LCP element
Responsive across Milo standard breakpoints (900/1200) with a wrapping mobile top-nav
When clicking on an individual asset, it now takes you there, highlights it, and provides a link back to the preflight

Testing

npm run test — 47 preflight tests pass; eslint clean; stylelint clean (aside from pre-existing repo-wide env-noise rules)
Open the Preflight tool via the sidekick Preflight plugin. To preview this branch on any Milo page, append ?milolibs=preflight-redesign-light-theme.

Resolves: MWPW-198875

🤖 Generated with Claude Code

Before / After
Before: https://main--milo--adobecom.aem.live/
After: https://preflight-redesign-light-theme--milo--adobecom.aem.live/

aem-code-sync · 2026-06-17T12:47:24Z

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch.
In case there are problems, just click the checkbox below to rerun the respective action.

Re-sync branch

Commits

afcee9b ✅ (latest)
e3da23a ✅
588afd5 ✅
8dbc4b3 ✅
84f2594 ✅
3002235 ✅
9a1a6f5 ✅
d7494fd ✅
21254de ✅
d5b8db8 ✅
7a3da6c ✅
39e17ee ✅
a055c06 ✅
27ec5df ✅

SilviuLCF

QA verified , https://jira.corp.adobe.com/browse/MWPW-198875

overmyheadandbody

Thanks for the proposal and commit, Okan! Since this isn't customer-facing, I tried to be short with the feedback 😅

A few additional notes:

can the redesigned asset boxes be applied in the Accessibility panel for the images with/without alt text?
for the red bubbles that appear next the the section headings on the left rail, could a progress animation be displayed until the logic decides whether there are errors?
a nice-to-have would be to better couple the typography rules here with the ones we're actually using in C2. Tokens will change; if we have some typography rules based on tokens and some on explicit values, we risk decoupling very quickly
on mobile in the a11y tab, expanding violations leads to two scrollbars, could that be streamlined a bit?
also on mobile in the a11y tab, the image columns are unequal, they should ideally have the same width

Great job overall!

overmyheadandbody · 2026-06-24T09:43:23Z

+function loadAssets() {
+  const { miloLibs, codeRoot } = getConfig();
+  const base = miloLibs || codeRoot;
+  C2_TOKENS.forEach((file) => loadStyle(`${base}/c2/styles/deps/${file}`));


One thing I'd advise checking: remove the regular styles from the page, the C1 styles loaded from libs/styles/styles.css. Hopefully the Preflight looks mostly the same: The intention is to avoid style coupling between C1 and C2, which will be difficult to maintain in the longer run.

overmyheadandbody · 2026-06-24T09:48:18Z

+  --preflight-surface: var(--s2a-color-background-default);
+  --preflight-surface-subtle: var(--s2a-color-background-subtle);
+  --preflight-text: var(--s2a-color-content-default);
+  --preflight-text-subtle: var(--s2a-color-content-subtle);
+  --preflight-border: var(--s2a-color-border-subtle);
+  --preflight-hover: var(--s2a-color-transparent-black-08);
+  --preflight-cta-bg: var(--s2a-color-blue-900);
+  --preflight-cta-bg-hover: var(--s2a-color-blue-1000);
+  --preflight-cta-text: var(--s2a-color-gray-25);
+  --preflight-success: var(--s2a-color-green-900);
+  --preflight-warning: var(--s2a-color-orange-700);
+  --preflight-error: var(--s2a-color-red-900);
+  --preflight-focus: var(--s2a-color-focus-ring-default);


It feels a bit weird to have colors attached to variables that don't suggest color. --preflight-text, for example, could be typography (font-size, line-height, letter-spacing, etc.), color, or anything else related to the text. It's advisable to name the variables based on their intent

overmyheadandbody · 2026-06-24T10:00:22Z

+  position: fixed;
+  top: var(--s2a-spacing-16);
+  left: var(--s2a-spacing-16);
+  z-index: 10000;


Maybe a lower value would suffice?

- Use Milo standard breakpoints (900/1200) for the modal layout and fix the mobile top-nav so it scrolls horizontally instead of clipping. - General badge now also counts localization (faulty link) issues, not just structure checks, so it reflects everything shown in the panel. - Performance: replace the "Highlight the found LCP section" link with a "No LCP element detected" note when the page has no LCP. - Assets: clicking an asset card closes preflight and scrolls to (and briefly highlights) that element on the page; thumbnails zoom slightly on hover. - Memoize the localization check so the badge and General panel don't each re-fetch every link's status. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

- Mobile/tablet top nav now wraps so every tab is reachable without horizontal scrolling (scrolling a top nav isn't discoverable with a mouse). - After clicking an asset (which closes preflight and scrolls to the element), show a floating popover with "Back to Preflight" (reopens on the same tab) and "Dismiss", to make moving between elements and the UI seamless. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…dal open - Position the "Back to Preflight" return popover at the asset's top-left (clamped to the viewport) instead of a fixed bottom bar. - Don't show the "content quality checks are failing" notification while the preflight modal is already open — the modal already surfaces the results. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Use a fixed top-left position for the "Back to Preflight" popover instead of anchoring it to the asset, so it stays put while scrolling the page. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

ClipboardItem is a built-in browser global; the /* global */ comment causes a no-redeclare ESLint error. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…primitives - Add tokens.primitives.light.css to C2_TOKENS for complete token chain - Rename --preflight-text/--preflight-text-subtle → --preflight-fg/--preflight-fg-subtle (names now indicate color role, not CSS property type) - Convert all directional properties to logical equivalents: border-right → border-inline-end, left → inset-inline-start, text-align: left/right → start/end - Convert responsive section from desktop-first (max-width) to mobile-first (min-width): base styles now reflect the mobile layout, @min-width:900px restores the sidebar rail, @min-width:1200px enables two-up cards - Lower return-popover z-index from 10000 → 9999 - Remove hardcoded fallback values from --s2a-* token vars in the return popover (tokens are loaded at :root) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…sage - Remove margin-inline: 0 override on .accessibility-columns at 900px+; cards were cancelling the 32px margin from .preflight-columns, rendering flush to the content edge on tablet/desktop - Align .access-columns base inline margin to 16px (was 32px) so the alt-text section matches the cards above it at mobile; restore 32px at 900px - Move viewport-too-small guard in Assets from per-group to panel level so the "resize to 1200px" message appears once instead of repeating per group Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

… token naming - Replace --body-font-family with --preflight-font backed by C2 primitive --s2a-font-family-adobe-clean to remove C1 styles.css coupling - Rename --preflight-cta-text → --preflight-cta-fg (color vars should reflect their intent, not the element they style) - Convert all physical direction properties to logical equivalents: padding-left/right → padding-inline-*, margin-left/right → margin-inline-*, border-left → border-inline-start, left/right positioning → inset-inline-start/end, text-align: left/right → start/end, padding shorthand in return popover → padding-block + padding-inline-* - Reduce z-index on return popover from 9999 → 1000 (above gnav at 12, well below modal curtain at 99999) - Remove unnecessary hardcoded fallbacks from var() calls in return button styles and preflight-mas-unpublished; tokens are guaranteed loaded - Simplify responsive breakpoint comments to avoid encoding specific px values that may change with C2 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

mokimo requested a review from a team as a code owner June 17, 2026 12:47

mokimo force-pushed the preflight-redesign-light-theme branch from f084d69 to 635649c Compare June 17, 2026 12:50

aem-code-sync Bot temporarily deployed to preflight-redesign-light-theme June 17, 2026 12:50 Inactive

aem-code-sync Bot temporarily deployed to preflight-redesign-light-theme June 17, 2026 13:03 Inactive

SilviuLCF approved these changes Jun 23, 2026

View reviewed changes

overmyheadandbody reviewed Jun 24, 2026

View reviewed changes

mokimo and others added 13 commits June 24, 2026 15:14

redesign preflight

27ec5df

rethink the design

a055c06

More fine grained improvements

39e17ee

Touchups

7a3da6c

Touchup on the assets panel

d5b8db8

Breakpoint improvements

21254de

Preflight: pin asset return popover to top-left of the screen

84f2594

Use a fixed top-left position for the "Back to Preflight" popover instead of anchoring it to the asset, so it stays put while scrolling the page. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Preflight: remove redundant ClipboardItem global declaration

8dbc4b3

ClipboardItem is a built-in browser global; the /* global */ comment causes a no-redeclare ESLint error. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

mokimo force-pushed the preflight-redesign-light-theme branch from 1da0c47 to e3da23a Compare June 25, 2026 09:52

aem-code-sync Bot deployed to preflight-redesign-light-theme June 25, 2026 11:03 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[MWPW-198875] Preflight modal redesign — light theme on c2 tokens#6188

[MWPW-198875] Preflight modal redesign — light theme on c2 tokens#6188
mokimo wants to merge 14 commits into
stagefrom
preflight-redesign-light-theme

mokimo commented Jun 17, 2026 •

edited by github-actions Bot

Loading

Uh oh!

aem-code-sync Bot commented Jun 17, 2026 •

edited

Loading

Uh oh!

SilviuLCF left a comment

Uh oh!

overmyheadandbody left a comment

Uh oh!

Uh oh!

overmyheadandbody Jun 24, 2026

Uh oh!

Uh oh!

overmyheadandbody Jun 24, 2026

Uh oh!

Uh oh!

Uh oh!

overmyheadandbody Jun 24, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

mokimo commented Jun 17, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Uh oh!

aem-code-sync Bot commented Jun 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

SilviuLCF left a comment

Choose a reason for hiding this comment

Uh oh!

overmyheadandbody left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

overmyheadandbody Jun 24, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

overmyheadandbody Jun 24, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

overmyheadandbody Jun 24, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mokimo commented Jun 17, 2026 •

edited by github-actions Bot

Loading

aem-code-sync Bot commented Jun 17, 2026 •

edited

Loading