[Rebrand] SL-1904: Migrate PhoneFrame colors to DSCO semantic tokens#73055
Merged
Conversation
SL-1904 (epic SL-1892). Replace legacy color.scss vars in
apps/src/applab/phone-frame.module.scss with semantic CSS variables
from component-library-styles/colors.css. No JSX changes — the
component has no text or buttons of its own.
Mapping (verified by hex):
$lighter_gray (#c6cacd) -> --background-neutral-quinary (#c6ced6)
$charcoal (#5b6770) -> --background-neutral-octonary (#69788a)
$white (#fff) -> --text-neutral-white-fixed (#ffffff)
$brand_secondary_default (#8C52BA) -> --background-brand-purple-primary (#9657c7)
--borders-brand-purple-primary (#9657c7)
No exact semantic-token match exists for $charcoal; --background-
neutral-octonary is the closest (gray-80 vs the original gray-90-ish
value) and is flagged for design review in the PR.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
ebeastlake
marked this pull request as ready for review
June 6, 2026 04:22
Contributor
Author
Does the "Paused" 1Typography here need to be updated, too? @moshebaricdo |
Contributor
I think it makes sense to update! Unless this PR stays color focused and a follow up maybe refactors "paused" to use MUI typography and the button to use MUI buttons? |
molly-moen
approved these changes
Jun 8, 2026
PR feedback for SL-1904. The PAUSED debugger-paused overlay was a bare <div> with font-size: 20px in CSS. Swap to MUI <Typography variant="body1" component="div">; body1 in the code.org theme is 1.25rem (20px) / Figtree / 400, matching the previous rendering. The .paused class is retained on the Typography (rather than moved to sx) so that the white text color stays in the stylesheet and overrides MuiTypography root's --text-neutral-primary default. The shared RunButton / ResetButton (apps/src/templates/GameButtons) are intentionally untouched - they are used by every lab and are out of scope for SL-1904. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Migrate
apps/src/applab/PhoneFrame.jsxandphone-frame.module.scssto the design system: legacycolor.scssSass vars → semantic CSS variables fromfrontend/packages/component-library-styles/colors.css, and the transient "PAUSED" debugger-overlay label → MUI<Typography>.The shared
RunButton/ResetButtonfromapps/src/templates/GameButtons.jsxare intentionally not migrated here — they're used by every lab (applab, p5lab, dance, maze, flappy, turtle, craft, javalab, music), so their migration belongs in its own ticket, not in a per-component PhoneFrame rebrand.Color mapping (verified by hex)
$lighter_gray#c6cacd--neutral-gray-30(#c6ced6)--background-neutral-quinary$charcoal#5b6770--neutral-gray-90(#576575)--background-neutral-octonary(gray-80,#69788a) — see ask below$white#fff--neutral-base-white(#ffffff)--text-neutral-white-fixed$brand_secondary_default#8C52BA--brand-purple-50(#9657c7)--background-brand-purple-primary/--borders-brand-purple-primaryTypography
The "PAUSED" debugger overlay was a bare
<div>styled withfont-size: 20px. Swapped to<Typography variant="body1" component="div">;body1in the code.org theme is 1.25rem (20px) / Figtree / 400 — a faithful match for the previous rendering. The.pausedclass is kept on the Typography (rather than moved tosx) so the white text color stays in the stylesheet and overrides MUI Typography's default--text-neutral-primary.Links
Testing story
Hey, human! Add screenshots here.
Before screenshot
After screenshot
Then, make sure you manually test the following:
#topResetButtonpurple state still triggers at compressed heights.Make sure you ask @moshebaricdo:
--background-neutral-octonary(gray-80,#69788a) →--background-neutral-primary-inverse(base-black,#292f36), with no token mapping to--neutral-gray-90(#576575) — which is the exact match for legacy$charcoal(#5b6770). For the dark phone frame I picked octonary (slightly lighter than the original). Do you want me to (a) keep octonary and accept the lightening as part of the rebrand, (b) switch to primary-inverse (markedly darker), or (c) add a new--background-neutral-*token pointing at--neutral-gray-90and use that here?<Typography variant="body1">(20px / regular weight) — a faithful match to the legacyfont-size: 20pxdiv. Alternative ish5(20px / 600 bold), which would read more "alert"-y as a debugger overlay. Keepbody1, or switch toh5?🤖 Generated with Claude Code