Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jerelvelarde wants to merge 2 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
941a3a5
feat(theme): apply the old composer's theme over Material base
jerelvelarde Jul 21, 2026
252e020
Address review: GPU-promote blur circles + backdrop-filter fallbacks
jerelvelarde Jul 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions shell/src/app/shell/composer-shell/composer-shell.ng.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,15 @@
limitations under the License.
-->

<div class="composer-bg" aria-hidden="true">
<span class="blur-circle blur-circle--1"></span>
<span class="blur-circle blur-circle--2"></span>
<span class="blur-circle blur-circle--3"></span>
<span class="blur-circle blur-circle--4"></span>
<span class="blur-circle blur-circle--5"></span>
<span class="blur-circle blur-circle--6"></span>
</div>

<mat-toolbar class="composer-header">
<button
mat-icon-button
Expand Down
109 changes: 100 additions & 9 deletions shell/src/app/shell/composer-shell/composer-shell.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,96 @@
display: flex;
flex-direction: column;
height: 100%;
position: relative;
overflow: hidden;
background-color: var(--cpk-page-bg, #dedee9);
font-family: var(--cpk-font-body, 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif);
color: var(--cpk-text-primary, #010507);
}

/* Signature CopilotKit depth cue: six soft blur circles behind all content. */
.composer-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}

.blur-circle {
position: absolute;
border-radius: 50%;
filter: blur(103px);
// Promote to its own compositor layer so the large blur is GPU-composited
// instead of repainting on the main thread during resize/scroll.
transform: translateZ(0);
}
Comment on lines +37 to 44

@gemini-code-assist gemini-code-assist Bot Jul 22, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

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);
}


.blur-circle--1 {
width: 446px;
height: 446px;
left: 1040px;
top: 11px;
background: var(--cpk-blur-warm);
}

.blur-circle--2 {
width: 609px;
height: 609px;
left: 1339px;
top: 625px;
background: var(--cpk-blur-cool);
}

.blur-circle--3 {
width: 609px;
height: 609px;
left: 670px;
top: -365px;
background: var(--cpk-blur-cool);
}

.blur-circle--4 {
width: 609px;
height: 609px;
left: 508px;
top: 702px;
background: var(--cpk-blur-bright);
}

.blur-circle--5 {
width: 446px;
height: 446px;
left: 128px;
top: 331px;
background: var(--cpk-blur-gold);
}

.blur-circle--6 {
width: 446px;
height: 446px;
left: -205px;
top: 803px;
background: var(--cpk-blur-warm);
}

.composer-header {
position: relative;
z-index: 2;
flex-shrink: 0;
background-color: var(--mat-sys-surface-container);
color: var(--mat-sys-on-surface);
border-bottom: 1px solid var(--mat-sys-outline-variant);
--mat-toolbar-container-background-color: var(--mat-sys-surface-container);
--mat-toolbar-container-text-color: var(--mat-sys-on-surface);
// Solid fallback keeps text contrast WCAG-compliant where backdrop-filter is
// unsupported/disabled; the translucent glass is layered on only when supported.
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);
}
}
.spacer {
flex: 1 1 auto;
Expand All @@ -39,7 +117,12 @@
flex: 1;
min-height: 0;
overflow: hidden;
position: relative;
z-index: 1;
display: flex;
// Let the lavender page + blur circles show through the drawer container.
background-color: transparent;
--mat-sidenav-container-background-color: transparent;

::ng-deep .mat-drawer {
position: relative !important;
Expand All @@ -56,14 +139,22 @@

.composer-sidenav {
width: 250px;
background-color: var(--mat-sys-surface-container);
border-right: 1px solid var(--mat-sys-outline-variant);
// Solid fallback for readability where backdrop-filter is unsupported.
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: 0;
--mat-sidenav-background-color: var(--mat-sys-surface-container);
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);
}

::ng-deep .mat-drawer-inner-container {
border-radius: 0;
white-space: nowrap;
Expand Down
156 changes: 153 additions & 3 deletions shell/src/global_styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,15 +227,165 @@ $dark-theme: mat.define-theme(
}
}

/* =====================================================================
* CopilotKit / AG-UI design-system token layer
* ---------------------------------------------------------------------
* Layered on top of Google's Material M3 theme. Shell/component styles
* read colour, spacing, radius, shadow and typography through these
* semantic `--cpk-*` tokens. The look builds on the CopilotKit dojo
* aesthetic: a cool lavender-gray page, frost-glass surfaces, white
* glass borders, soft blur circles and Plus Jakarta Sans type.
*
* Tokens are defined for BOTH themes. `:root` carries light; `.dark-theme`
* (stamped on <body>) re-declares the SAME token names with dark values so
* the nav, toolbar and panel chrome theme correctly in dark mode. These
* `:root`/`.dark-theme` blocks appear AFTER Google's `mat.theme-overrides`
* output, so the few `--mat-sys-*` retints below win by cascade order and
* make `.mat-app-background` resolve to the lavender page.
* ===================================================================== */
:root {
// --- Surface -------------------------------------------------------
--cpk-page-bg: #dedee9;
--cpk-surface: rgba(255, 255, 255, 0.5); // glass panel body
--cpk-surface-elevated: #ffffff; // solid raised cards / menus
--cpk-glass-bg: rgba(255, 255, 255, 0.5);
--cpk-glass-bg-hover: rgba(255, 255, 255, 0.62);
--cpk-glass-bg-selected: rgba(255, 255, 255, 0.78);

// --- Background blur circles (signature depth cue behind all routes) ---
--cpk-blur-warm: rgba(255, 172, 77, 0.2);
--cpk-blur-cool: #c9c9da;
--cpk-blur-bright: #f3f3fc;
--cpk-blur-gold: rgba(255, 243, 136, 0.3);

// --- Line ----------------------------------------------------------
--cpk-glass-border: #ffffff;
--cpk-border: #cfcfe0;
--cpk-divider: #dbdbe5;

// --- Text ----------------------------------------------------------
--cpk-text-primary: #010507;
--cpk-text-secondary: #57575b;
--cpk-text-faint: #838389;
--cpk-text-muted: #838389; // legacy alias

// --- Accent (brand indigo; interactive emphasis, never a status) ---
--cpk-accent: #4355b9;
--cpk-accent-hover: #37479e;
--cpk-accent-contrast: #ffffff;
--cpk-accent-bg: rgba(67, 85, 185, 0.1);

// --- Status (semantic; separate from the accent) -------------------
--cpk-success: #1e7d4f;
--cpk-success-bg: rgba(30, 125, 79, 0.12);
--cpk-warning: #9a5b00;
--cpk-warning-bg: rgba(154, 91, 0, 0.14);
--cpk-critical: #ba1a1a;
--cpk-critical-bg: rgba(186, 26, 26, 0.1);

// --- Spacing scale -------------------------------------------------
--cpk-space-1: 4px;
--cpk-space-2: 8px;
--cpk-space-3: 12px;
--cpk-space-4: 16px;
--cpk-space-5: 24px;
--cpk-space-6: 32px;

// --- Layout measure ------------------------------------------------
--cpk-content-max: 720px;

// --- Radius scale --------------------------------------------------
--cpk-radius-sm: 4px;
--cpk-radius-item: 4px;
--cpk-radius-card: 8px;
--cpk-radius-lg: 16px;
--cpk-radius-pill: 9999px;

// --- Elevation scale ----------------------------------------------
--cpk-shadow-sm: 0px 2px 4px -1px rgba(1, 5, 7, 0.06);
--cpk-shadow-card: 0px 6px 6px -2px rgba(1, 5, 7, 0.08);
--cpk-shadow-elevated: 0px 16px 24px -8px rgba(1, 5, 7, 0.12);

// --- Typography ----------------------------------------------------
--cpk-font-body: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
--cpk-font-mono: 'Spline Sans Mono', ui-monospace, monospace;

// Retint the Material system tokens the shell chrome reads (light).
--mat-sys-background: #dedee9;
--mat-sys-on-background: #010507;
--mat-sys-on-surface: #010507;
}

/* Dark theme: re-declare EVERY --cpk-* token so nav + toolbar + panel
* chrome theme correctly. Stamped on <body> by the shell; wins over the
* html `:root` values above. */
.dark-theme {
// --- Surface -------------------------------------------------------
--cpk-page-bg: #0e0e12;
--cpk-surface: rgba(38, 38, 46, 0.55);
--cpk-surface-elevated: #201f20;
--cpk-glass-bg: rgba(38, 38, 46, 0.55);
--cpk-glass-bg-hover: rgba(58, 58, 68, 0.6);
--cpk-glass-bg-selected: rgba(78, 78, 92, 0.72);

// --- Background blur circles (subtle brand glows over the dark page) ---
--cpk-blur-warm: rgba(255, 172, 77, 0.06);
--cpk-blur-cool: rgba(67, 85, 185, 0.2);
--cpk-blur-bright: rgba(99, 102, 160, 0.14);
--cpk-blur-gold: rgba(186, 195, 255, 0.05);

// --- Line ----------------------------------------------------------
--cpk-glass-border: rgba(255, 255, 255, 0.12);
--cpk-border: rgba(255, 255, 255, 0.16);
--cpk-divider: rgba(255, 255, 255, 0.1);

// --- Text ----------------------------------------------------------
--cpk-text-primary: #f4f2f7;
--cpk-text-secondary: #bcbbc6;
--cpk-text-faint: #8f8e99;
--cpk-text-muted: #8f8e99;

// --- Accent --------------------------------------------------------
--cpk-accent: #bac3ff;
--cpk-accent-hover: #d3d9ff;
--cpk-accent-contrast: #08218a;
--cpk-accent-bg: rgba(186, 195, 255, 0.16);

// --- Status --------------------------------------------------------
--cpk-success: #6fdfa0;
--cpk-success-bg: rgba(111, 223, 160, 0.16);
--cpk-warning: #ffc078;
--cpk-warning-bg: rgba(255, 192, 120, 0.16);
--cpk-critical: #ffb4ab;
--cpk-critical-bg: rgba(255, 180, 171, 0.16);

// --- Elevation (deeper shadows read on dark surfaces) --------------
--cpk-shadow-sm: 0px 2px 4px -1px rgba(0, 0, 0, 0.4);
--cpk-shadow-card: 0px 6px 10px -2px rgba(0, 0, 0, 0.5);
--cpk-shadow-elevated: 0px 16px 28px -8px rgba(0, 0, 0, 0.6);

// Retint the Material system tokens the shell chrome reads (dark).
--mat-sys-background: #0e0e12;
--mat-sys-on-background: #f4f2f7;
--mat-sys-on-surface: #f4f2f7;
}

html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: var(--mat-sys-background);
color: var(--mat-sys-on-background);
font-family: Roboto, 'Helvetica Neue', sans-serif;
background-color: var(--cpk-page-bg);
color: var(--cpk-text-primary);
font-family: var(--cpk-font-body);
}

code,
pre,
kbd,
samp {
font-family: var(--cpk-font-mono);
}

/* High-specificity global overrides resolving slide toggle label checks collisions */
Expand Down
2 changes: 1 addition & 1 deletion shell/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap"
/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
</head>
Expand Down
Loading