feat(shell): refined theme layer over Material (from the old composer)

[jerelvelarde]

A cohesive visual theme ported from the old composer, layered on top of the existing Angular Material base — no palette change (the Material primary #3f51b5 already matches the accent), applied as an additive token layer for both light and dark.

What

• A --cpk-* design-token layer over Material for both themes (retinting only --mat-sys-background / -on-background / -on-surface).
• Typography: Plus Jakarta Sans (UI) + Spline Sans Mono (code), via a Google-Fonts link in index.html.
• Frost-glass top bar + nav rail, a soft ambient blur field on the shell, and a retinted Dockview tab strip.
• Files: global_styles.scss, composer-shell.{ng.html,scss}, index.html.

Why

Gives the composer a distinct, modern identity without fighting Material — purely additive styling, no component or logic changes.

Testing

ng build clean; verified in-browser in light + dark.

Notes

Opt-in and scoped to the shell chrome. Companion PRs (panel switcher, native rendering) reference these tokens for polish but don't require them (Material fallback). Recent main (#103 dark/light, #111 scrollbars, #113 styling) may overlap — I'll reconcile against those on rebase.

---

Contributed by CopilotKit.

Screenshots

Refined theme over Material — Settings, light and dark:

Light	Dark

[google-cla]

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

[gemini-code-assist]

Code Review

This pull request introduces the CopilotKit design system token layer, updating the shell to use custom theme variables, soft background blur circles, and new typography (Plus Jakarta Sans and Spline Sans Mono). Feedback focuses on optimizing performance and accessibility: specifically, offloading the large blur circle rendering to the GPU using transform: translateZ(0) and providing solid background fallbacks via @supports queries for elements using backdrop-filter to ensure readability on unsupported browsers.

[gemini-code-assist]

Large CSS blur filters (such as blur(103px)) applied to multiple large elements can cause significant rendering and paint performance overhead, especially during window resizing or scrolling. Promoting these elements to their own compositor layers using transform: translateZ(0) offloads the rendering to the GPU, preventing layout thrashing and lag.

Suggested change

	.blur-circle {
	position: absolute;
	border-radius: 50%;
	filter: blur(103px);
	}
	.blur-circle {
	position: absolute;
	border-radius: 50%;
	filter: blur(103px);
	transform: translateZ(0);
	}

[gemini-code-assist]

Using backdrop-filter with a highly translucent background color (rgba(255, 255, 255, 0.5)) can cause severe text contrast and readability issues on browsers that do not support backdrop filters (or have them disabled). Providing a solid background color as a fallback using a @supports query ensures WCAG-compliant readability across all browsers.

  background-color: var(--cpk-surface-elevated);
  color: var(--cpk-text-primary);
  border-bottom: 1px solid var(--cpk-glass-border);
  --mat-toolbar-container-background-color: transparent;
  --mat-toolbar-container-text-color: var(--cpk-text-primary);

  @supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
    background-color: var(--cpk-glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

[gemini-code-assist]

Similar to the header, the sidenav uses a translucent background with backdrop-filter. To prevent readability and contrast issues on browsers without backdrop-filter support, define a solid fallback background color and wrap the translucent/blur styles in a @supports block.

  background-color: var(--cpk-surface-elevated);
  border-right: 1px solid var(--cpk-glass-border);
  --mat-sidenav-container-shape: 0px;
  --mat-drawer-container-shape: 0px;
  border-radius: 0px;
  --mat-sidenav-background-color: var(--cpk-surface-elevated);
  transition: width 200ms ease-in-out;

  @supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
    background-color: var(--cpk-glass-bg);
    --mat-sidenav-background-color: var(--cpk-glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }