feat(desktop): define glass token layer, 793->12 hardcoded rgba()#233
Merged
Conversation
… values - tokens.css: add 23 --glass-* tokens (bg/border/panel/tint/shadow/text) - themes.css: light theme glass values (direction-reversed dark overlay) - batch replace rgba() in 32 .module.css files with glass tokens - rgba() count: 793 -> 91 (gradients/inset/light-opaque kept) - typecheck + build pass, tests 1188/1190 pass
…, and stuck-together cards - Drop local --settings-glass-* overrides — use global --glass-* tokens directly - Replace inset box-shadow highlights and saturate(1.18) with subtle shadow - Unglue .settingRow/.teamMiniRow: independent 11px radius + margin-bottom instead of zero-radius first/last child hack - Remove radial gradient backdrop from dark root
…en types - Add --glass-input-bg / --glass-input-bg-hover / --glass-light-fill - Replace remaining 71 rgba() values in 17 files - All inset/gradient/composite rgba() correctly retained
There was a problem hiding this comment.
Pull request overview
This PR introduces a “glass” design-token layer for the desktop app and applies it broadly across CSS Modules to replace hardcoded rgba() values with semantic --glass-* tokens, improving consistency across components and themes.
Changes:
- Added a
--glass-*token set intokens.cssand provided light-theme overrides inthemes.css. - Replaced many hardcoded translucent colors in
.module.cssfiles with the new glass tokens. - Simplified/standardized Settings page styling by removing local overrides and relying on shared tokens.
Reviewed changes
Copilot reviewed 34 out of 34 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| app/desktop/src/views/TeamRunConsole.module.css | Uses glass tint token for focus ring shadow. |
| app/desktop/src/styles/tokens.css | Defines new --glass-* tokens. |
| app/desktop/src/styles/themes.css | Adds light theme overrides for --glass-* tokens. |
| app/desktop/src/components/WorkspacePicker.module.css | Updates card surfaces/borders/shadows to glass tokens. |
| app/desktop/src/components/WelcomeScreen.module.css | Replaces multiple translucent UI fills with glass tokens. |
| app/desktop/src/components/ToolGroup.module.css | Replaces translucent backgrounds/borders with glass tokens. |
| app/desktop/src/components/Toast.module.css | Replaces toast borders/background/shadows with glass tokens. |
| app/desktop/src/components/ThreadPanel.module.css | Replaces hover/focus/background tokens in panel controls. |
| app/desktop/src/components/TeamRunDock.module.css | Replaces dock backgrounds/borders/shadows with glass tokens. |
| app/desktop/src/components/TaskList.module.css | Replaces container backgrounds/borders with glass tokens. |
| app/desktop/src/components/ShortcutHelp.module.css | Replaces overlay/dialog surfaces with glass tokens. |
| app/desktop/src/components/SettingsPage.module.css | Removes local “settings glass” vars and adopts shared glass tokens; layout tweaks. |
| app/desktop/src/components/settings/agentCreation/AgentCreationWizard.module.css | Updates overlay/modal surfaces and shadows to glass tokens. |
| app/desktop/src/components/SearchDialog.module.css | Updates dialog overlay/surfaces/borders/shadows to glass tokens. |
| app/desktop/src/components/RunDetail.module.css | Updates list/divider/tint styling to glass tokens. |
| app/desktop/src/components/ReplyPreviewBar.module.css | Updates hover background to glass token. |
| app/desktop/src/components/PromptInput.module.css | Updates floating composer surfaces/shadows/borders to glass tokens. |
| app/desktop/src/components/PermissionDialog.module.css | Updates hover/code-bg/risk badges/surfaces to glass tokens. |
| app/desktop/src/components/ModelReasoningPicker.module.css | Updates popover/rows/chips styling to glass tokens. |
| app/desktop/src/components/ModelDropdown.module.css | Updates dropdown trigger/panel/item styling to glass tokens. |
| app/desktop/src/components/MentionPopover.module.css | Updates popover border/shadow styling to glass tokens. |
| app/desktop/src/components/MarkdownRenderer.module.css | Updates table backgrounds/borders to glass tokens. |
| app/desktop/src/components/LinkCard.module.css | Updates hover shadow to glass token. |
| app/desktop/src/components/IM/IMMessageView.module.css | Updates authority badge tints to glass tokens. |
| app/desktop/src/components/HomeDashboard.module.css | Updates card surfaces/borders/shadows to glass tokens. |
| app/desktop/src/components/FileSearchDialog.module.css | Updates dialog overlay/surfaces/borders/shadows to glass tokens. |
| app/desktop/src/components/FileExplorer.module.css | Updates menu shadow and git status badge fills to glass tokens. |
| app/desktop/src/components/ContextUsage.module.css | Updates separators/bars to glass tokens. |
| app/desktop/src/components/ChatView.module.css | Updates message surfaces/borders/shadows/tints to glass tokens. |
| app/desktop/src/components/AuthPage.module.css | Updates auth UI surfaces/focus/error tints to glass tokens. |
| app/desktop/src/components/ArtifactBrowser.module.css | Updates list borders/backgrounds and controls to glass tokens. |
| app/desktop/src/components/ApprovalCard.module.css | Updates risk/status/CTA styling to glass tokens. |
| app/desktop/src/components/AgentList.module.css | Updates list chips/highlights to glass tokens. |
| app/desktop/src/App.module.css | Updates core shell surfaces/borders/shadows/overlays to glass tokens. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+90
to
+94
| Glass Tokens — translucent overlay system | ||
| Dark theme default: white glow over dark canvas | ||
| Light theme: dark overlay over light canvas (reversed in themes.css) | ||
| 20 tokens covering bg layers / borders / tints / shadows / text | ||
| ═══════════════════════════════════════════════════════════════════ */ |
Comment on lines
26
to
29
| box-shadow: | ||
| 0 16px 36px rgba(15, 23, 42, 0.11), | ||
| 0 4px 12px rgba(15, 23, 42, 0.06), | ||
| 0 16px 36px var(--glass-bg-heavy), | ||
| 0 4px 12px var(--glass-bg-medium), | ||
| 0 1px 0 rgba(255, 255, 255, 0.55) inset; |
Comment on lines
46
to
+49
| box-shadow: | ||
| 0 16px 34px rgba(0, 0, 0, 0.26), | ||
| 0 4px 12px rgba(0, 0, 0, 0.13), | ||
| 0 1px 0 rgba(255, 255, 255, 0.08) inset; | ||
| 0 4px 12px var(--glass-bg-heavy), | ||
| 0 1px 0 var(--glass-bg-strong) inset; |
Comment on lines
48
to
+50
| box-shadow: | ||
| 0 12px 30px rgba(0, 0, 0, 0.14), | ||
| 0 1px 4px rgba(0, 0, 0, 0.1); | ||
| 0 12px 30px var(--glass-bg-heavy), | ||
| 0 1px 4px var(--glass-bg-heavy); |
Comment on lines
58
to
+60
| box-shadow: | ||
| 0 14px 34px rgba(0, 0, 0, 0.17), | ||
| 0 1px 5px rgba(0, 0, 0, 0.1); | ||
| 0 14px 34px var(--glass-shadow-subtle), | ||
| 0 1px 5px var(--glass-bg-heavy); |
Comment on lines
83
to
86
| .card:hover { | ||
| border-color: var(--ring); | ||
| background: rgba(37, 37, 45, 0.78); | ||
| background: var(--glass-panel); | ||
| } |
Comment on lines
421
to
424
| .chip { | ||
| border-radius: 10px; | ||
| background: rgba(255, 255, 255, 0.38); | ||
| background: var(--glass-text-disabled); | ||
| color: var(--foreground); |
| transition: background 0.15s; | ||
| } | ||
| .cancelButton:hover { background: rgba(239,68,68,0.08); } | ||
| .cancelButton:hover { background: var(--glass-tint-danger); } |
Comment on lines
509
to
514
| [data-theme='dark'] .workspace { | ||
| background: rgba(36, 36, 44, 0.84); | ||
| border-color: rgba(0,0,0,0.18); | ||
| background: var(--glass-panel); | ||
| border-color: var(--glass-border-heavy); | ||
| box-shadow: | ||
| 0 14px 36px rgba(0,0,0,0.12); | ||
| 0 14px 36px var(--glass-bg-heavy); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Verification
Conflict domain
Only app/desktop/src/styles/ and app/desktop/src/**/*.module.css — no .tsx/.ts touched.