refactor: retheme the playground chrome from ShellPalette to flow_ui tokens

[rahulbisht25]

Summary

The playground chrome — top bar, sidebar, stage, and code panel — previously painted itself from a private ShellPalette copied out of the Claude Design prototype. It now reads context.flowColors like the component demos do, so the workbench exercises the package's own token set and flips theme together with the exhibit.

• Delete ShellPalette and shellAccent; keep the small shellText Figtree helper in a new shell_text.dart (the chrome keeps its bespoke font sizes — only colors changed).
• Grounds: top bar, sidebar, and code panel sit on surfaceBright; the canvas and phone screen on surface; hairlines are outlineVariant, with outline on the floating variant pill.
• Ink: onSurface / onSurfaceVariant / onSurfaceMuted ramp; the accent (active nav icon, copy confirmation) is primary.
• Fills: segment tracks and chips use surfaceContainer, nav hover surfaceContainerLow, active nav row surfaceContainer, preserving the design's hover-below-selected ordering.
• One deliberate branch: the segmented switch's active pill is surfaceBright in light but surfaceContainerHighest in dark — an opaque surfaceBright pill would sink below the track's ink wash in dark, while the strongest wash composites to the prototype's raised grey.

Testing

• flutter analyze clean.
• Verified visually in a release web build: light, dark, and the mobile phone stage all render correctly with no console errors.

[divyanshub024]

@cursoragent review

[cursor]

Reviewed PR #26 (playground chrome onto flow_ui tokens). No code changes.

The retheme looks solid: ShellPalette is gone, chrome reads context.flowColors, and the dark segmented-pill branch is correctly reasoned. CI is green.

Posted on the PR:

• Nit on inactive Light/Dark and Web/Mobile labels using onSurfaceMuted (50%) while nav rows at rest use onSurfaceVariant (75%)
• Drop shadows as raw black literals are fine (the ink ramp can’t express them)
• Visual PR with no before/after shots

No functional issues. Not blocking.

  

[cursor]

Review

This is a clean, well-scoped retheme. Deleting ShellPalette / shellAccent and painting the chrome from context.flowColors is the right move: the workbench now exercises the same tokens as the exhibit and flips with it. Mapping is careful — raised chrome on surfaceBright, the page/phone screen on surface, hairlines on outlineVariant with outline on the floating variant pill, ink through the three-step ramp, accent on primary. Hover-below-selected (surfaceContainerLow / surfaceContainer) matches the prototype and is consistent with how suggestion rows use the faint hover wash.

The dark segmented-pill branch is the one place a single token cannot do the job, and the comment is accurate: an opaque surfaceBright pill would sink under the track’s ink wash in dark, while surfaceContainerHighest composites to roughly the prototype’s raised grey.

CI is green (playground, Package, example, Docs site). ShellPalette has no leftover references.

Nits, not blockers

1. Inactive segment labels sit on onSurfaceMuted. Nav row labels at rest correctly use onSurfaceVariant (75% — “row labels … at rest”). The Light/Dark and Web/Mobile rest text uses onSurfaceMuted (50% — “placeholders, carets”). That preserves the old segmentRest vs navText split, so it may be intentional; if the chrome should read as one ink system, _Segment rest text belongs on onSurfaceVariant like the nav rows.

            style: shellText(
              size: 12.5,
              weight: FontWeight.w500,
              color: active ? colors.onSurface : colors.onSurfaceMuted,

2. Drop shadows stay as raw black literals (0x1A000000 / 0x59000000 on the pill, 0x0F000000 on the variant switcher). That’s fine — the ink ramp is white in dark, so a shadow cannot come from onSurface. Worth a one-line comment that these are structural, not a missed token, so the next pass doesn’t try to “fix” them onto the ramp.

3. Visual PR, no pictures. The template asks for before/after on anything that paints. A light + dark shot of the top bar / sidebar / stage would make the token swap reviewable without running the app. Not a code issue.

No functional problems. Happy to see this land.

[cursor]

Nit: nav rows at rest use onSurfaceVariant (the “labels at rest” rung). These unselected segment labels use onSurfaceMuted (placeholders / carets), which matches the old segmentRest grey but is a step quieter than the rest of the chrome’s interactive labels. Intentional to keep the prototype’s split, or should this follow the nav rows?