devframes · antfu · Aug 21, 2026 · Aug 21, 2026
diff --git a/packages/hub-ui/src/client/components/dock/DockEdge.stories.ts b/packages/hub-ui/src/client/components/dock/DockEdge.stories.ts
@@ -135,3 +135,37 @@ export const WithGroup: Story = {
     ),
   }),
 }
+
+function patternedEdgeStory(theme: 'light' | 'dark'): Story {
+  return {
+    globals: { theme },
+    render: () => ({
+      setup: () => mountWithContext(
+        {
+          entries: categorizedEntries,
+          selectedId: 'overview',
+          panel: { mode: 'edge', position: 'bottom', height: 40, width: 30 },
+          session: { open: true },
+        },
+        ctx => h('div', { class: 'relative w-screen h-screen overflow-hidden bg-secondary bg-grid-24' }, [
+          h('div', {
+            'aria-hidden': 'true',
+            'class': 'pointer-events-none absolute left-[14%] top-[36%] h-72 w-72 rounded-full bg-primary-500 op40',
+          }),
+          h('div', {
+            'aria-hidden': 'true',
+            'class': 'pointer-events-none absolute right-[12%] bottom-[8%] h-40 w-72 rounded-3xl bg-active',
+          }),
+          h(DockEdge, { context: ctx }, { view: ({ entry }: any) => body(entry) }),
+          h(FloatingElements),
+        ]),
+      ),
+    }),
+  }
+}
+
+/** Tinted glass edge material blurring a grid in light mode. */
+export const GlassMaterialLight: Story = patternedEdgeStory('light')
+
+/** Tinted glass edge material blurring a grid in dark mode. */
+export const GlassMaterialDark: Story = patternedEdgeStory('dark')
diff --git a/packages/hub-ui/src/client/components/dock/DockEdge.vue b/packages/hub-ui/src/client/components/dock/DockEdge.vue
@@ -407,7 +407,7 @@ const dragPreviewStyle = computed<CSSProperties | undefined>(() => {
 <template>
   <div
     id="devframes-edge-panel"
-    class="bg-glass:80 border border-base color-base shadow overflow-clip z-floating-anchor font-sans text-[15px] box-border"
+    class="bg-dock-glass border border-base color-base shadow overflow-clip z-floating-anchor font-sans text-[15px] box-border"
     :class="[panelLayoutClass, { 'devframes-edge-collapsed': isCollapsed }]"
     :style="panelStyle"
     @mousemove="bringUp"

diff --git a/packages/hub-ui/src/client/components/dock/DockPanel.stories.ts b/packages/hub-ui/src/client/components/dock/DockPanel.stories.ts
@@ -72,3 +72,37 @@ export const RightAnchored: Story = {
     ),
   }),
 }
+
+function patternedPanelStory(theme: 'light' | 'dark'): Story {
+  return {
+    globals: { theme },
+    render: () => ({
+      setup: () => mountWithContext(
+        { entries: categorizedEntries, selectedId: 'overview', panel: { position: 'bottom', left: 50, top: 100, width: 60, height: 60 } },
+        ctx => h('div', { class: 'relative w-screen h-screen overflow-hidden bg-secondary bg-grid-24' }, [
+          h('div', {
+            'aria-hidden': 'true',
+            'class': 'pointer-events-none absolute left-[14%] top-[36%] h-72 w-72 rounded-full bg-primary-500 op40',
+          }),
+          h('div', {
+            'aria-hidden': 'true',
+            'class': 'pointer-events-none absolute right-[12%] bottom-[8%] h-40 w-72 rounded-3xl bg-active',
+          }),
+          h('div', { id: 'devframes-anchor', style: { left: '50vw', top: '100vh' } }, [
+            h(DockPanel, {
+              context: ctx,
+              selected: ctx.docks.selected,
+              panelMargins: MARGINS,
+            }, { view: ({ entry }: any) => body(entry) }),
+          ]),
+        ]),
+      ),
+    }),
+  }
+}
+
+/** Tinted glass panel material blurring a grid in light mode. */
+export const GlassMaterialLight: Story = patternedPanelStory('light')
+
+/** Tinted glass panel material blurring a grid in dark mode. */
+export const GlassMaterialDark: Story = patternedPanelStory('dark')
diff --git a/packages/hub-ui/src/client/components/dock/DockPanel.vue b/packages/hub-ui/src/client/components/dock/DockPanel.vue
@@ -175,7 +175,7 @@ onMounted(() => {
   <div
     v-show="context.docks.selected && context.docks.selected.type !== 'action'"
     ref="dockPanel"
-    class="bg-glass:80 rounded-lg border border-base color-base shadow overflow-hidden"
+    class="bg-dock-glass rounded-lg border border-base color-base shadow overflow-hidden"
     :style="panelStyle"
     @contextmenu="openContextMenu"
   >

diff --git a/packages/hub-ui/uno.config.ts b/packages/hub-ui/uno.config.ts
@@ -24,6 +24,8 @@ export default mergeConfigs([
       },
     },
     shortcuts: {
+      /** Use the lighter glass in light mode while retaining dark-mode contrast. */
+      'bg-dock-glass': 'bg-glass dark:bg-[#111]/80',
       // Dock-shell z-layers (named — the design preset blocks plain
       // `z-<number>`). The floating shell layers sit at the very top of the
       // host page's stacking order, mirroring the upstream dock.