fix(hub-ui): reduce light dock panel glass opacity - #280
Merged
antfu merged 1 commit intoAug 21, 2026
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
Contributor
There was a problem hiding this comment.
Pull request overview
Updates @devframes/hub-ui dock panel “material” to be background-free (transparent) while still separating the panel from the inspected page via backdrop blur, borders, and shadows, and adds Storybook coverage to verify the new look in both light/dark themes.
Changes:
- Switch
DockPanelandDockEdgefrombg-glass:80tobg-transparent backdrop-blur-7while retaining border + shadow. - Add new light/dark “transparent material” Storybook stories for both dock modes (float panel + edge panel).
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/hub-ui/src/client/components/dock/DockPanel.vue | Changes float-panel material to transparent + backdrop blur. |
| packages/hub-ui/src/client/components/dock/DockPanel.stories.ts | Adds patterned light/dark stories to validate the new float-panel material. |
| packages/hub-ui/src/client/components/dock/DockEdge.vue | Changes edge-panel material to transparent + backdrop blur. |
| packages/hub-ui/src/client/components/dock/DockEdge.stories.ts | Adds patterned light/dark stories to validate the new edge-panel material. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
dvcolomban
force-pushed
the
codex/fix-hub-panel-transparency
branch
from
August 21, 2026 17:34
383eec1 to
67af4ad
Compare
dvcolomban
marked this pull request as draft
August 21, 2026 17:34
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.
Suppressed comments (2)
packages/hub-ui/src/client/components/dock/DockEdge.stories.ts:150
- The Story uses the utility class
bg-grid-24, but that class/shortcut isn’t defined in this package’s UnoCSS config. As a result, the “patterned” background won’t render, making this story misleading for validating the new transparent material.
ctx => h('div', { class: 'relative w-screen h-screen bg-secondary bg-grid-24' }, [
packages/hub-ui/src/client/components/dock/DockPanel.stories.ts:82
- The Story uses the utility class
bg-grid-24, but that class/shortcut isn’t defined in this package’s UnoCSS config. As a result, the “patterned” background won’t render, making this story misleading for validating the new transparent material.
ctx => h('div', { class: 'relative w-screen h-screen bg-secondary bg-grid-24' }, [
dvcolomban
force-pushed
the
codex/fix-hub-panel-transparency
branch
from
August 21, 2026 18:01
67af4ad to
4bbc557
Compare
dvcolomban
marked this pull request as ready for review
August 21, 2026 18:05
dvcolomban
force-pushed
the
codex/fix-hub-panel-transparency
branch
from
August 21, 2026 18:22
4bbc557 to
26f2432
Compare
dvcolomban
force-pushed
the
codex/fix-hub-panel-transparency
branch
from
August 21, 2026 18:38
26f2432 to
6bee9c1
Compare
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.
What changed
bg-dock-glassmaterial that uses the default glass tint in light mode and retains the existing 80% tint in dark modeDockPanelandDockEdge, keeping their borders and shadowsWhy
bg-glass:80resolves to fully opaque white in light mode, hiding the inspected page. The defaultbg-glassmaterial reduces that light tint to 65%, so underlying content remains visible through the existing blur.In dark mode, the existing 80%
#111tint already provides the right separation and contrast. The local shortcut preserves it instead of adopting the default glass material's lower 50% dark opacity. Both schemes retainblur(7px)and use the design system's existing glass values.Light theme
Before
After
Dark theme
The dark comparison is intentionally visually stable: this change preserves the existing 80% dark material.
Before
After
Verification
pnpm lintpnpm knippnpm testpnpm typecheckpnpm build#111in dark mode, andblur(7px)in bothRefs #267