fix(hub-ui): make dock panels background-free

Author: dvcolomban

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),
+        ]),
+      ),
+    }),
+  }
+}
+
+/** Transparent edge material blurring a grid in light mode. */
+export const TransparentMaterialLight: Story = patternedEdgeStory('light')
+
+/** Transparent edge material blurring a grid in dark mode. */
+export const TransparentMaterialDark: Story = patternedEdgeStory('dark')

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-transparent backdrop-blur-7 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"

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) }),
+          ]),
+        ]),
+      ),
+    }),
+  }
+}
+
+/** Transparent panel material blurring a grid in light mode. */
+export const TransparentMaterialLight: Story = patternedPanelStory('light')
+
+/** Transparent panel material blurring a grid in dark mode. */
+export const TransparentMaterialDark: Story = patternedPanelStory('dark')

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-transparent backdrop-blur-7 rounded-lg border border-base color-base shadow overflow-hidden"
     :style="panelStyle"
     @contextmenu="openContextMenu"
   >