feat(core): apply glass effect to sticky DataTable header (#340)

JianJroh · web-flow · commit 7c0f580ea815 · 2026-05-14T13:12:31.000+09:00
diff --git a/packages/core/src/client/webcomponents/json-render/components/DataTable.ts b/packages/core/src/client/webcomponents/json-render/components/DataTable.ts
@@ -32,12 +32,12 @@ export const DataTable = defineComponent({
                   textAlign: 'left',
                   fontWeight: '600',
                   fontSize: '11px',
-                  opacity: '0.7',
                   whiteSpace: 'nowrap',
                   width: col.width,
                   position: 'sticky',
                   top: 0,
-                  backgroundColor: bg,
+                  backgroundColor: `color-mix(in oklab,${bg} 75%,transparent)`,
+                  backdropFilter: 'blur(8px)',
                 },
               }, col.label),
             )),
