Rebrand: swap legacy $purple in .character-text for a semantic token - #74660
Draft
cnbrenci wants to merge 1 commit into
Draft
Rebrand: swap legacy $purple in .character-text for a semantic token#74660cnbrenci wants to merge 1 commit into
cnbrenci wants to merge 1 commit into
Conversation
.character-text is the "classic dialogue" heading style used by instructions markdown (HOC 2015 Star Wars free-play, and any levelbuilder markdown that reaches for the class). Its color was pinned to shared/css/color.scss $purple (#8c52ba), so it stayed legacy purple while the rest of the instructions panel rebranded. Point it at --text-brand-purple-primary instead. Under the current brand that resolves to --brand-purple-50 (#9657c7); under [data-brand='codeai-next'] brandLegacyAliases.css collapses it onto --text-brand-primary (#4c42cf), so the heading follows the brand rather than freezing at the old hex. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NG1wL8tqLuPtJzaQSxLsDY
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
2 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.
.character-textis the "classic dialogue" heading style used by instructionsmarkdown. Its color was pinned to
shared/css/color.scss$purple(#8c52ba),so it stayed legacy purple while the rest of the instructions panel rebranded -
the purple headings Moshe spotted in Star Wars.
This points it at the semantic token
--text-brand-purple-primaryinstead. Onedeclaration changes; line-height and font-size are untouched.
What the token resolves to (measured in a browser, not guessed):
$purple)#8c52ba--brand-purple-50#9657c7[data-brand='codeai-next']--text-brand-primary#4c42cfSo today it is a barely-perceptible tint shift, and after brand cutover the
heading follows the brand instead of freezing at the old hex - which is the
point of the ticket. All three values clear WCAG AA at this size (24px counts as
large text, 3:1; they clear the stricter 4.5:1 normal-text bar too).
Scope notes:
.character-textis defined exactly once in the repo, inapps/style/studio/style.scss, so this one line covers every surface thatuses the class - not just Star Wars. The only in-repo markup using it is the
HOC 2015 free-play instructions blob in
apps/src/studio/levels.js; anythingelse comes from levelbuilder-authored markdown in the database, which picks up
the same rule.
details.hoc2015 > p { color: $charcoal; }in the same block isdeliberately left alone.
$charcoal(#5b6770) has no exact DS primitive, soit is a judgment call rather than a mechanical swap and belongs in its own
ticket.
Links
Testing story
Hey, human! Add screenshots here.
Before screenshot
After screenshot
The level Moshe reported, for an easy before/after:
use_my_apps: trueHeads up on what I could and could not check. This container has no MySQL and no
locals.yml, so I could not boot dashboard and drive the real level. What I didverify: the SCSS compiles to
color: var(--text-brand-purple-primary), and aheadless Chromium loading
colors.css+ the compiledstudio.csscomputesrgb(150, 87, 199)on.character-texttoday andrgb(76, 66, 207)under[data-brand='codeai-next'], with font-size and line-height unchanged. The varchain resolves - but nobody has seen it in the actual instructions panel yet.
That part is on you:
still a heading-sized purple, just a touch lighter than prod. Nothing else
on the panel should move - same size, same line spacing, same wrapping.
data-brand='codeai-next'on<html>) and confirmthe heading turns CADS indigo rather than staying legacy purple. This is
the behavior the ticket is actually asking for.
scroll below the lab's min width is pre-existing - please don't chase it.
character-text(levelbuilder markdown, not just Star Wars), spot-check one.
<span>before and after, sonothing should change in the reading order - worth a quick confirm.
correctly (no layout involved in this change, but cheap to check).
Generated by Claude Code