Rebrand the PL catalog links and the self-paced progress bar - #74643

Two rebrand fast-follows on the professional-learning pages, plus the primitive-color cleanup they turned up.

Before:

After:

Why they missed the rebrand

The brand layer works by redefining semantic custom properties, so anything written as a compile-time SCSS literal is invisible to it, and a primitive is rebranded only by brandLegacyAliases.css — the pre-cutover shim that brandOverrides.css says gets deleted at cutover cleanup.

• shared/css/2022-rebrand-update.scss — the sitewide a rule used $brand_secondary_default.
• selfPacedProgressTable.module.scss — the progress fill used $light_primary_500.
• regionalWorkshopCatalog.module.scss — the seats-remaining icon and supported-grade cells used --brand-teal-50, .linkText used --brand-purple-50. These render correctly today only because brandLegacyAliases.css:181 re-points --brand-teal-50 at --brand-purple-50; they break when the shim goes. So Moshe's suspicion about hardcoded card colors was right about the code, even though the cards look correct on screen.

.linkText was also nested under .withWsCardsContainer while the link it targets lives in .bodyContainerHeaderText, a sibling — the rule never matched, which is why that link fell through to the sitewide purple. Hoisted one level.

Blast radius of the shared-stylesheet change

2022-rebrand-update.scss is loaded by the workshop catalog, /home, the sign-in page, LTI account linking and /projects, and is @imported by four apps/ CSS modules (certificates, curriculum catalog cards). Counting anchors that this a rule actually wins on, with the old sheet in place:

• /professional-learning/workshops — 2 (National workshops, contact your regional partner)
• /projects — 0
• sign-in — 0 (its links already resolve to #4C42CF)

So in practice the change lands on the reported page while fixing the cause rather than the symptom.

Verification

Local dashboard at :3000 on a static yarn build, default brand (codeai-next), Chrome via Playwright, resolved getComputedStyle values rather than eyeballed hues:

#4C42CF on the page backgrounds (white and #F0F2F5) is ~7.4:1, so the link contrast improves over #8C52BA.

No workshops or regional partners are seeded locally (nor on staging, per the report), so the catalog cards above were rendered against a stubbed regional_workshop_data response, and the /my-professional-learning rows against a local dev teacher with partial PL progress. Neither is part of this change.

apps/test/unit/code-studio/pd/professional_learning/ — 100 tests, all passing. ./tools/hooks/pre-commit clean.

Deliberately not in scope

regionalWorkshopCatalog.module.scss also uses --neutral-* primitives throughout, and selfPacedProgressTable.module.scss still uses $light_gray_100 for the bar track and the completed pill. Those are neutrals, so they are not brand bugs; they want the same primitive-to-semantic sweep, separately.

Token names (review follow-up)

The link rule first used --text-brand-purple-primary / -secondary, matching what the design system's own Link uses. Those names are declared only in colors.css and brandLegacyAliases.css, both on the cutover deletion list, so they would go undefined at cleanup. Switched to --text-brand-primary / --text-brand-secondary, which the CADS brands and brandLegacyShim.css both declare. Same #4C42CF under codeai-next — re-measured after the change, all probes above unchanged.

Under the legacy code / codeai brands the links now resolve teal instead of 2022 purple, since that is what the shim maps the CADS brand family to. Those brands only render with DCDO brand-router-enabled on.

Worth a separate ticket: --text-brand-purple-* is still used by link, genericButton, popover, alert, notificationBanner and iconButton in component-library. The same cleanup will strand all of them.

🤖 Generated with Claude Code