Rebrand: text compression widget colors (SL-2116) - #74659

Swaps the text compression widget's legacy purple and its dialog's orange button for design-system tokens. Two files' worth of ticket, one file's worth of diff: everything lives in the widget's own <style> block.

The purple. The two column headers ("Compressed:" / "Dictionary:") were painted with a hardcoded #8c52ba -- legacy brand purple. They now use --background-brand-purple-primary, which resolves to #9657c7 today and remaps to the CADS brand ramp under data-brand='codeai-next' (see brandLegacyAliases.css:71). A hardcoded #9657c7 would have looked right now and quietly failed to rebrand later.

The orange button. "Write your own" opens a LegacyDialog whose body is a raw HTML string, so its Add and Cancel buttons are bare <button> elements. They were picking up the global #continue-button (orange, $orange) and #again-button (green, $green) fills from application.scss:3660-3672. Those globals are shared with feedback dialogs, version history and submit flows site-wide, so repainting them there would have been a much bigger blast radius than this ticket. Instead the widget overrides them for its own dialog only. Two IDs outrank the one-ID globals, so this wins on specificity, not stylesheet load order -- verified by deliberately loading the globals after the widget's rules and confirming the widget still wins. The new fills match LegacyButton's already-rebranded primary and cancel types, so the dialog matches other rebranded legacy dialogs.

Note the ticket only named the orange Add button. I did the green Cancel button in the same dialog too -- leaving a chartreuse Cancel next to a brand-purple Add would have looked half-finished, and LegacyButton already pairs those two treatments. Shout if you'd rather I split it.

Accessibility

Both dialog buttons were well below WCAG AA before. Measured, not eyeballed:

The header drops slightly because brand purple is a touch lighter than the legacy one; it still clears AA for normal text.

Links

• Jira: https://codedotorg.atlassian.net/browse/SL-2116 (epic SL-2038, Labs Rebrand Follow-Ups)

Testing story

Hey, human! Add screenshots here.

Before screenshot

After screenshot

The widget renders at /s/text-compression/lessons/1/levels/1 (short standalone course, only two levels -- the other one is the Aloe Blacc video). Prod for comparison: https://studio.code.org/s/text-compression/lessons/1/levels/1 . Local needs this branch plus use_my_apps: true.

Then, make sure you manually test the following:

• The "Compressed:" and "Dictionary:" header bars are brand purple, not the old duller purple, and the white label text is still legible on them.
• Click Write your own. The Add button is brand purple with white text (was orange); Cancel is a white button with a grey outline and dark text (was yellow-green).
• Both dialog buttons still work: Cancel dismisses, Add appends your text to the "Choose text:" dropdown and selects it. This PR only touches color, but the buttons are wired by ID so it's worth one click each.
• Nothing else in the widget shifted -- the black stats box, the yellow highlight on compressed symbols, and the dictionary gutter should all look exactly as before.
• Check at 1568 / 1280 / 1024 / 768 widths. The widget has a fixed min width and h-scrolls below it; that's pre-existing, not from this change.
• Try all of the above on Firefox and Safari.
• Tab to both dialog buttons and confirm the focus ring is still visible against the new fills.
• Screen reader: the buttons are unlabeled-by-anything-but-text, so just confirm "Add" and "Cancel" still announce normally.
• RTL: load with ?locale=ar-SA and confirm the header bars and dialog buttons still lay out sanely.

Make sure you ask Emily (she filed the ticket):

• The Cancel button's grey outline (--borders-neutral-strong, #b7c1cb) is only 1.83:1 against the white dialog, under the 3:1 WCAG 1.4.11 asks for a UI component boundary. I matched LegacyButton's cancel type rather than deviating here, so this is really a design-system-wide question -- but this PR is where it becomes visible. Is a darker border token wanted, here or in LegacyButton?
• The rest of the widget still uses raw hexes on purpose-built surfaces: the black stats console (#000 bg, #0c0/#c00 figures), the yellow mark highlight and matching CodeMirror gutter (#ff9), and the dictionary error line (#f99). I left them alone -- the terminal look is deliberate and there's no obvious semantic token for it. Do you want those rebranded in a follow-up, or are they fine as-is?

Generated by Claude Code