Migrate the shared workspace chrome that renders around Blockly in every Blockly-using lab to design-system semantic tokens - so once the rebrand shifts the neutral palette, these surfaces follow instead of sticking out at legacy values. Also folds in a tiny stray raw-white cleanup in Sprite Lab's ListItemThumbnail.

Scope: four files. Only color values change. Block styles themselves are untouched

Not touched (deliberate):

• Blockly block colors themselves (per design's "avoid the blocky area for now")
• .blocklyMainBackground (workspace SVG grid pattern) - fills via <pattern> cells, not a solid color; needs a deeper grid-cell change - follow-up chip
• .headerButtonMinecraft variants (#606060 / #bfbfbf) - intentional Minecraft aesthetic, not generic neutrals
• .legacyHeaderButton (marked TODO for removal, Javalab-only)
• cdoTheme.js's toolboxBackgroundColour: '#DDDDDD' (the .blocklyToolbox CSS override wins via !important)
• Toolbox category hover state (rgba(255,255,255,0.2) translucent overlay - adapts to any bg)

Why !important on the Blockly overrides: .blocklyToolbox, .blocklyToolboxCategoryLabel, .blocklyFlyoutBackground, .blocklyScrollbarHandle, and .blocklyDropDownDiv are styled by Blockly's own default stylesheet (and for the category label, body { color: #333 } from application.css). Without !important, our rules lose to specificity/inheritance. Same pattern as the existing cdoCss.ts rules.

Blast radius: every Blockly-using lab in the repo - Sprite Lab, Game Lab, App Lab, Web Lab, Dance, Studio, Maze, Turtle, Flappy, Bounce, Craft, Music, Jigsaw, Java Lab, Python Lab. .darkHeader and .headerButton render on the pane header in most of these; the Blockly toolbox / flyout / scrollbar / dropdown overrides apply wherever Blockly is injected.

Links

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

Testing story

Before / After (default theme) — pane header, header buttons, sidebar, category text, flyout panel, workspace scrollbar, and field dropdown popup should look visually close to staging. Sidebar bg shifts about two shades lighter (#DDDDDD → #eaeef2); the disabled header-button bg goes noticeably lighter (#949ca2 → #d4dae1); everything else is near-exact hex.

Manual QA — please walk through:

Pane header + header buttons

• Dark pane header ("Blocks" / "Workspace" bar): dark charcoal in default theme, deep magenta under ?brand=codeai-next.
• Header buttons (Settings / Version History / Show Code): white bg + dark text in default; light pink bg + pink text under ?brand=codeai-next.
• Hover a header button: bg goes light gray in default, light pink in pink test.

• If any header button is disabled (e.g., Version History with no saved history): bg is a lighter, more subdued gray than staging — this is the semantic --background-neutral-disabled (#d4dae1 in default, was #949ca2). Design ask if the lighter disabled state is acceptable.

Blockly toolbox + flyout

• Toolbox sidebar bg (behind "World / Sprites / Locations / ..." category list): light gray in default, light pink in pink test.
• Category text: near-black in default, hot pink in pink test.
• Click a category — flyout panel opens with the block palette. Flyout bg matches the toolbox (both --background-neutral-tertiary).
• Blocks themselves render at their normal colors — deliberately unchanged.

Blockly workspace chrome

• Add enough blocks to trigger horizontal or vertical scrollbars on the workspace. Scrollbar handle: mid-gray in default (#c6ced6, was #cccccc), pink under ?brand=codeai-next.

• Click a block field dropdown (e.g., the sprite selector dropdown on a make new sprite at block). Popup bg: white in default, light pink in pink test. Border: subtle light gray in default, pink in pink test.

Sprite Lab Costumes / Backgrounds

• Open the Costumes tab. Sprite thumbnails render on white background as before (ListItemThumbnail root uses --background-neutral-white-fixed).

Cross-lab spot check

• Game Lab default theme: same surfaces render correctly. Block styles unchanged.

• App Lab default theme: dark header + header buttons render correctly. App Lab has additional workspace chrome (phone frame) — confirm nothing else breaks.

• Dance / Music / Studio / Maze / Turtle / Flappy / Craft / Jigsaw / Java Lab / Python Lab: spot-check

Browsers + a11y

• Firefox and Safari.
• Keyboard nav through toolbox categories: focus outlines still visible.
• Screen reader: category names still announced correctly.

Make sure you ask @moshebaricdo :

• Sidebar bg / flyout bg move from #DDDDDD to --background-neutral-tertiary (#eaeef2 in default). About two shades lighter. Fine, or swap to --background-neutral-secondary (even lighter), or drop to primitive --neutral-gray-20 (#d4dae1, closer to legacy)?
• Disabled header-button bg moves from #949ca2 (mid gray) to --background-neutral-disabled (#d4dae1, visibly lighter). OK as the semantic value, or should we pick a darker disabled token?
• Field-dropdown popup border moves from #dadce0 to --borders-neutral-primary (#d4dae1). Practically indistinguishable — flagging for completeness.
• Category text goes from Blockly-default #333 to --text-neutral-primary (#292F36). Barely visible — both are near-black.