feat(ui): port the glass treatment from the V3/V4 experiment - #6170
feat(ui): port the glass treatment from the V3/V4 experiment#6170jbecke wants to merge 1 commit into
Conversation
Standalone port of the Apple-style glass chrome from the claude/v3-facebook-topbar-layout-et1kbq branch (as of its V4 state), with none of the layout work: a backdrop blur, a bright inner top edge, a dark inner bottom edge, a soft cast shadow, and a 135deg specular rim drawn as a 1px gradient masked to the border box. - `glass` / `glass-sm` / `glass-lg` utilities in index.css, with palette tokens (themed, light-mode pass) split from geometry tokens (per size). - Button applies it to every variant except `ghost`, which picks it up on hover; compact sizes step down to `glass-sm`. ButtonGroup carries one pane for the whole row and its buttons opt out. `base` gets a tinted background so the blur has a substrate. - `glass-lg` + `bg-menu-glass` on floating chrome: dropdowns, context menus, selects, popovers, the Lexical typeahead menus, cmd+k and the create launcher, and floating dialogs (fullscreen dialogs stay opaque). - `glass-input` (wide faint ambient shadow, quieter in light mode) on the desktop channel input, AI chat input, agent input, and email compose. - `scrim-glass` dims the page behind floating dialogs with an accent-tinted wash and a whisper of blur; `visibleScrim` layers its heavier coat on top. - `glass-none` opts out under a variant (collapsed property pills). - Only the standard `backdrop-filter` is declared: Lightning CSS adds the -webkit- prefix itself, and a hand-written prefix after it made the pair collapse to the prefixed form alone in production builds.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Team Run ID: 📒 Files selected for processing (41)
Included review availability: Your plan provides up to 8 included reviews per hour; 6 remain after this review. 📝 SummarySummary by CodeRabbit
WalkthroughThe pull request adds a glass styling system with theme tokens and utilities for surfaces, scrims, inputs, and menus. Shared dialogs, dropdowns, selects, buttons, groups, and inputs now use glass classes. Feature menus, popovers, editor menus, and legacy menus replace opaque backgrounds or shadows with glass styling. Badge interaction tests now expect overlay hover and active classes. Merge Risk: ⚪ Minimal · up to The glass styling rollout updates shared surfaces and controls without a supported functional, security, data, or availability regression. It is ready to merge. 🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using high effort and found 2 potential issues.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Want reviews to match your repository better? Bugbot Learning can learn team-specific rules from PR activity. A team admin can enable Learning in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 4a99ffb. Configure here.
| return ( | ||
| <Panel | ||
| class={cn('max-h-[75vh] rounded-xl bg-dialog', local.class)} | ||
| class={cn('max-h-[75vh] rounded-xl bg-transparent', local.class)} |
There was a problem hiding this comment.
Onboarding command menu has no pane
Medium Severity
CommandMenuShell now uses bg-transparent and depends on a parent to paint the glass pane. The create launcher was updated for that contract, but the onboarding command-k lesson still mounts CommandMenuInner in a raw Kobalte dialog with no glass-lg or bg-menu-glass, so the lesson menu has no surface.
Reviewed by Cursor Bugbot for commit 4a99ffb. Configure here.
| // `glass` rather than the `glass-sm` that icon-sm would pick up: the | ||
| // send button is a prominent floating action, and at half strength the | ||
| // rim vanishes into the solid accent fill. | ||
| 'rounded-[11px] size-7.5 [&_svg]:stroke-[4px] glass', |
There was a problem hiding this comment.
Send button glass override loses
Low Severity
SendButton adds glass so the prominent send control is not stuck with the glass-sm that icon-sm applies. cn does not treat glass and glass-sm as a conflicting pair, so both stay on the element and glass-sm wins in the stylesheet.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit 4a99ffb. Configure here.
2 participants
Summary
Standalone port of the Apple-style glass chrome from
claude/v3-facebook-topbar-layout-et1kbq(as of its V4 state), with none of the layout work. The look is a backdrop blur, a bright inner top edge, a dark inner bottom edge, a soft cast shadow, and a 135deg specular rim drawn as a 1px gradient masked to the border box, so it composes with any radius.What changes
apps/web/src/index.css):glass/glass-sm/glass-lgin a three-step scale, plusglass-input,glass-none, andscrim-glass. Palette tokens (which way the light comes from, themed with a light-mode pass) are split from geometry tokens (how big, set per size), with--glass-scalemultiplying every strength at once. A newbg-menu-glasscolor is the menu surface at 88% opacity so backdrop content reads through floating chrome.ghost, which has no surface of its own and picks it up on hover instead. Compact sizes step down toglass-sm. Inside aButtonGroupthe group carries one pane for the whole row and its buttons opt out.outlinemoves from a transparent to a tinted background so the blur has a substrate, and its hover/press feedback moves to theoverlay-*scrims the other tinted variants already use.glass-lg+bg-menu-glass: dropdowns and sub-menus, context menus, selects, popovers, the mobile touch menu, the Lexical typeahead menus (@mentions, slash/skills, emoji, snippets, tags, agent commands), cmd+k, the create launcher, and floating dialogs. Fullscreen dialogs stay opaque. Redundant per-siteshadow-menuoverrides onDropdown.Contentare dropped since the base class now owns the shadow.glass-input(full-strength glass with a wide, faint ambient shadow; quieter in light mode): desktop channel input, AI chat input, agent input, email compose (theunframedinline variant is excluded).scrim-glass, an accent-tinted wash with a whisper of blur;visibleScrimlayers its heavier coat on top for destructive flows.backdrop-filteris declared. Lightning CSS adds the-webkit-prefix itself, and a hand-written prefix after the standard one made it collapse the pair to the prefixed form alone in production builds.Verification
index.cssthrough Tailwind's compiler: every glass utility and its hover / container-query variants emit, with the@applychains resolved.biome checkon all changed files is clean.Button.test.tsxandBadge.test.tsxpass. The Badge trigger test is updated for theoutlinevariant's hover feedback moving tooverlay-hover/overlay-active.tsctype-check reports no errors in any changed file.Things to eyeball in the app
outlinebutton variant now has a tinted background instead of transparent. This is the most visible behavior change outside the effect itself.Generated by Claude Code
Note
Low Risk
Broad visual/styling rollout with no auth, data, or API changes; main regression risk is backdrop-filter behavior across browsers/themes and the more visible outline-button background.
Overview
Ports marketing-style glass chrome (backdrop blur, specular rim, inner highlights/shadows) into the web app via new CSS utilities in
index.css:glass/glass-sm/glass-lg, plusglass-input,scrim-glass,glass-none, and translucentbg-menu-glasswith theme-aware palette tokens.Buttons pick up size-scaled glass on every variant except
ghost(hover-only so toolbar icons don’t look chipped);outlineswitches from transparent to a tintedbg-lift/70and usesoverlay-hover/overlay-activefor press states.ButtonGroupapplies one glass pane for the whole row while child buttons opt out.Floating surfaces—shared
Dropdown,Dialog(non-fullscreen),Select, context/Lexical menus, popovers, cmd+k launcher, mobile touch menu—move toglass-lg+ menu-glass backgrounds; redundant per-call-siteshadow-menuon dropdown content is removed. Dialog overlays usescrim-glass(accent wash + light blur), withvisibleScrimstill layering the heavier dim for destructive flows.Composer-style inputs (desktop channel input, chat/agent/email compose) get
glass-inputfor a softer ambient float.Badge.testexpectations update for the outline button hover class rename.Reviewed by Cursor Bugbot for commit 4a99ffb. Bugbot is set up for automated code reviews on this repo. Configure here.