Manager UI - Retire the .less stylesheets in marketplace, media and code-editor (#4265 phase 2)

[agalin920]

Phase 2 of #4265, following #4300. See the 12-phase split.

Retires the three .less stylesheets that belong to leaf apps — 3 files, 62 LOC, taking src/ from 70 .less files to 67. Each has a small, self-contained QA surface, which is why they are grouped: three screens, individually checkable.

Unblocked as of 2026-08-30 — #4264 merged as 0f869ddaa, so the canonical-palette question these conversions depend on is settled.

The three files, and what is actually live in them

src/apps/marketplace/src/app/view/CustomApp.less (18 LOC) — only .CustomApp is used, at CustomApp.js:22. .InstallApp and .Filter are dead (the InstallApp in that file is a React component import, and the styles.Filter hits elsewhere in src/ belong to other modules). Note the nested iframe rule is load-bearing: it sizes an <iframe> rendered by a descendant component, so it must survive as an & iframe selector, not be flattened onto the container.

src/apps/media/src/app/components/Thumbnail/Loading.less (28 LOC) — .Load and .Loading are both used, from two apps: media/src/app/components/Thumbnail/index.tsx:405,500 and content-editor/src/app/components/FieldTypeMedia.tsx:864, which reaches across app boundaries to import it. Contains a @keyframes shimmer; css-modules scopes keyframe names too, so this needs MUI's keyframes helper rather than a bare string.

src/apps/code-editor/.../Workspace/components/NotFound/NotFound.less (16 LOC) — .NotFound is used, and NotFound.js:7 also uses styles.display, which is not declared in this file. It comes from @import "shell/components/legacy/typography.less", which css-modules inlines into the importing module's class map. Any conversion in this epic has to check for inherited classes like this one; a reader looking only at the co-located stylesheet will miss it.

Colour and type mappings

None of the three literals has an exact token. Per docs/design-system.md §4 step 1 they map to the nearest ramp step, which is a deliberate sub-perceptual change, consistent with what #4264 did across src/:

literal	where	maps to	ramp value
#eff1f3	shimmer gradient stops 25% and 65%	grey.100	#F2F4F7
#e2e2e2	shimmer gradient stop 45%	grey.200	#E4E7EC
#eff5ff (@zesty-white)	NotFound h1 colour	blue.50	#F0F9FF

styles.display resolves to typography.less's .display: 32px, line-height 48px, weight 200, letter-spacing 0.32px. Per §2 that is variant="h2" (32px) with fontWeight, lineHeight and letterSpacing overridden to hold the pixels exactly — §2 explicitly permits overriding those three on a variant.

Scope

• Convert the three stylesheets to sx, delete them, and drop their imports.
• Drop the dead .InstallApp and .Filter rules rather than porting them.
• Remove className={styles.IframeContainer} at CustomApp.js:68. .IframeContainer is declared nowhere, so styles.IframeContainer is already undefined and the attribute is already a no-op today — deleting it is behaviour-preserving, not a style change.
• Nothing else. No touching the other 67 stylesheets, and not the less-loader rule (phase 12).

Acceptance criteria

• The three .less files are deleted and no file imports them.
• find src -name '*.less' | wc -l returns 67.
• No hex literal is carried across; the three above use the ramp steps named in the table.
• The & iframe descendant rule still sizes the marketplace iframe.
• The shimmer animation still runs, in both the media grid and the content-editor media field.
• npm run build:dev succeeds and tsc --noEmit introduces no new src/ errors.
• cypress/e2e/media/* and cypress/e2e/code/* recorded for the touched areas.

Verification

Unlike #4300 this phase does change what renders, so a build is not sufficient. For each of the three surfaces, capture getComputedStyle on the affected element before and after and record both columns:

1. Marketplace — /apps/<zuid> for an installed app: the <main> height and the iframe's height/width.
2. Media — a thumbnail in its loading state, in the media grid and in a content item's media field: background-image, background-size, and that animation-name resolves to a running animation.
3. Code editor — a not-found view: the container's flex centering and the h1 colour and font metrics.

[agalin920]

Two corrections to the acceptance criteria above, both errors in the issue rather than in the work.

1. The .less count is wrong for this branch's base. "find src -name '*.less' | wc -l returns 67" silently assumed phase 1 (#4300 / PR #4302) had already merged. It has not — origin/dev still carries 82. Deleting three from 82 gives 79, and 67 is only reachable once #4302 lands. Read the criterion as: three fewer than the base, i.e. 79 at the current base and 67 after #4302 merges.

2. The "not-found view" QA surface does not exist. src/apps/code-editor/src/app/components/Workspace/components/NotFound is dead code: nothing in src/ imports it or its index.js barrel, and — the decisive check — it is 0 modules in a built bundle, against controls in the same bundle (Workspace/index.js 3 hits, shell/components/NotFound 16). Every reachable "not found" in the app is shell/components/NotFound, which this PR does not touch.

So the third verification surface listed above is unmeasurable, and the criterion should be read as satisfied by the code review rather than by a measurement. Converting it — instead of deleting the directory — was deliberate: this ticket's remit is retiring .less, and removing a dead component is a different change class that deserves its own diff and its own review, exactly as phase 1 got.

One further surface could not be measured, and is reviewed rather than verified: the marketplace & iframe rule. /apps only mounts MarketplaceApp when "apps" is in the instance's product list (Shell.tsx:248-255), and it is not on the Cypress dev instance 8-f48cf3a682-7fthvk — confirmed directly, with CustomApp's <main> absent from the DOM and no rule in document.styleSheets containing 100vh - 40px. That is equally true before and after the change, so the surface has no live coverage on this instance either way.

The media shimmer, the one surface that is live, was measured exactly: across 42 thumbnails with image responses held for 30s, the gradient stops resolve to rgb(242,244,247) and rgb(228,231,236) — grey.100 and grey.200 — with background-size: 1000px 100% and a real emitted keyframes animation running 3s linear infinite.

[agalin920]

Striking the "Colour and type mappings" table in the issue body above. It was wrong, and the reasoning under it was wrong twice.

The table proposed #eff1f3→grey.100, #e2e2e2→grey.200, #eff5ff→blue.50, none of them exact, and justified the snap as "§4 step 1" and "consistent with what #4264 did across src/". Both halves are false:

1. §4 forbids it in terms. Two lines below the numbered list the doc reads: "Do not snap a value onto the nearest ramp step to avoid this. 'Close enough' is a rendered-value change wearing a refactor's clothes." — and it closes "any change to a colour already on screen goes to the Director and then to design." Step 1 says most missing colours are a step; it does not license rounding one that isn't.
2. Manager UI - Replace hardcoded colour and size literals with design system tokens (TS/JS) #4264 set no such precedent. Its mappings are exact matches — #E0F2FE→blue.100, #475467→text.secondary, #101828→text.primary, #EBE9FE→purple.100 — plus one semantic correction (#0D1116→background.editor) that §3 names as a bug in its own right. There is no nearest-step snap anywhere in it.

Caught by the team's pre-PR review gate, not in CI. The fix keeps the rendered colour byte-identical to dev instead:

• The shimmer greys go through §4 step 5 — the two literals are named in the createTheme call in src/shell/index.js, beside the existing background.editor: "#0F0F0F" precedent, and consumed by name. §3 names that call as "the one layer that mints values rather than consuming them, and the only place a new literal belongs".
• The #eff5ff case is gone rather than answered. src/apps/code-editor/.../Workspace/components/NotFound/ is deleted instead of converted — it is dead code, so there was never a colour to preserve or change.

Measured after the fix, on /media with 42 thumbnails and image responses stalled: the computed gradient is

linear-gradient(0.35turn, rgb(239, 241, 243) 25%, rgb(226, 226, 226) 45%, rgb(239, 241, 243) 65%)

rgb(239,241,243) = #EFF1F3 and rgb(226,226,226) = #E2E2E2 — the original Loading.less values, not the ramp steps. No colour on screen changes in this PR.

Read the acceptance criterion "No hex literal is carried across" accordingly: the two shimmer literals are carried across deliberately, into createTheme, which is the location the design-system doc reserves for exactly this.