fix(hub-ui): reduce light dock panel glass opacity

[dvcolomban]

What changed

• add a local bg-dock-glass material that uses the default glass tint in light mode and retains the existing 80% tint in dark mode
• apply it to DockPanel and DockEdge, keeping their borders and shadows
• leave the command palette, toasts, popovers, and other hub overlays unchanged
• add patterned light and dark stories for both panel modes

Why

bg-glass:80 resolves to fully opaque white in light mode, hiding the inspected page. The default bg-glass material reduces that light tint to 65%, so underlying content remains visible through the existing blur.

In dark mode, the existing 80% #111 tint 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 retain blur(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 lint
• pnpm knip
• pnpm test
• pnpm typecheck
• pnpm build
• computed floating and edge panel styles: 65% white in light mode, 80% #111 in dark mode, and blur(7px) in both

Refs #267

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
devframe	Skipped		Aug 21, 2026 6:38pm

[Copilot]

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 DockPanel and DockEdge from bg-glass:80 to bg-transparent backdrop-blur-7 while 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.

[Copilot]

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' }, [

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

[Copilot]

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.