Migrate the visualization column background, workspace surrounds, and Blockly workspace SVG in every legacy lab to brand-aware semantic tokens. Also swap the visualization resize bar's ⋮⋮ grabber color from a hardcoded gray to a semantic token so it tracks the active brand.

Scope: three files.

1. dashboard/app/assets/stylesheets/application.scss — adds body.pin_bottom { background-color: var(--background-neutral-secondary) }. pin_bottom is applied at runtime by every legacy lab entry point (StudioApp.js, WebLab.js, Javalab.js, Ailab.js, Fish.js, netsim.js) and NEVER by Lab2-based labs — so this scopes the brand-aware wrapper background to legacy labs only.
2. apps/style/common.scss — swaps #visualizationResizeBar color: $lighter_gray (#c6cacd) → var(--borders-neutral-strong). Semantic role match (resizable edge accent), brand-aware.
3. apps/src/blockly/addons/cdoCss.ts — registers .blocklySvg { background-color: var(--background-neutral-secondary) !important } alongside the existing Blockly workspace overrides from PR [rebrand] Migrate blockly workspace to design-system semantic tokens #73785. The .blocklySvg rule ships in Blockly's baked-in compiled CSS (hardcoded white); overriding via Blockly.Css.register is the same mechanism we already use for .blocklyToolbox, .blocklyFlyoutBackground, etc.

Mapping

Scope rationale — why body.pin_bottom and not body or .wrapper:

• body alone would ripple across every dashboard page (marketing, curriculum, teacher dashboard, sign-in, etc.). Too broad.
• .wrapper is the ancestor of #codeApp in the lab shell; scoping there works but requires knowing the .wrapper structure. body.pin_bottom is simpler and covers the same territory since .wrapper is transparent and inherits body's background.
• body.pin_bottom (specificity 0,1,1) cleanly beats the base body { background-color: #f2f2f2 } rule (0,0,1) at common.scss:55 without touching the base.

In scope (legacy labs — every lab that runtime-adds pin_bottom):

• All classic Blockly labs via StudioApp.js: Sprite Lab, Game Lab, App Lab, Studio, Maze, Turtle, Flappy, Bounce, Craft, Jigsaw, Poetry.
• Non-Blockly legacy labs: Web Lab (classic), Java Lab, AI Lab, Fish, NetSim.

Links

• Jira: https://codedotorg.atlassian.net/browse/SL-2001

Testing story

Before screenshot — Sprite Lab under ?brand=codeai-audit: viz column + workspace surround visibly gray (body #f2f2f2 bleeding through), blocklySvg area a stark white rectangle in the middle of the pink workspace chrome, resize bar ⋮⋮ dots gray.

After screenshot — same page: whole lab shell (viz column background + wrapper around workspace + workspace SVG) reads as one continuous light-pink surface; resize bar dots are pink; Blocks toolbox stays its own slightly-deeper pink for contrast. Under default brand: subtle light gray shell, essentially unchanged visually.

Code.org Brand

CodeAI Brand

Manual QA — please walk through:

• Sprite Lab loads under ?brand=codeai-audit: viz column background, workspace surround, and workspace SVG all resolve to the same light-pink #fff0f7. No stark white rectangle around the "when run" block.
• Visualization resize bar ⋮⋮ grabber is pink and visible against the light-pink shell.
• Under default brand (no ?brand=): viz column + workspace + resize bar all look essentially identical to today — no visible regression to the current gray-ish look.
• Cross-lab spot check: Game Lab, App Lab, Studio, Maze — same brand-aware shell applies everywhere.

• Minecraft labs remain unchanged as they have their own specific theming.

• Non-lab pages (homepage, teacher dashboard, curriculum viewer, sign-in): body background is still #f2f2f2. No visual change.
• Lab2 pages (Music Lab: /musiclab, Python Lab, Web Lab 2): unchanged. They don't set pin_bottom so the new rule doesn't apply.
• Firefox and Safari.

Make sure you ask @moshebaricdo:

• Chose --background-neutral-secondary (neutral-gray-5 = #f0f2f5 on default) for the shell. That's the closest semantic token to legacy #f2f2f2. Confirm it's the right choice vs --background-neutral-primary (base white) or --background-neutral-tertiary (slightly deeper gray).
• Chose --borders-neutral-strong for the resize bar ⋮⋮ color. Semantic role fits (resizable edge accent). Confirm it's what you want vs a lighter subtle-chrome option.