Skip to content

Commit 0ebaa87

Browse files
committed
refactor(ui): remove translucent internals from datahub tactical canvas
Normalize DataHub overlays, headers, and interaction chrome to opaque surfaces, and keep design-system dependencies explicit for consistent rendering across environments.
1 parent 403900c commit 0ebaa87

6 files changed

Lines changed: 11 additions & 8 deletions

File tree

package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@
1616
},
1717
"dependencies": {
1818
"@microsoft/fetch-event-source": "^2.0.1",
19+
"@nekazari/design-tokens": "^0.1.0-alpha",
20+
"@nekazari/ui-kit": "^1.0.2-alpha.4",
21+
"@nekazari/viewer-kit": "^0.1.0-alpha",
1922
"@tanstack/react-query": "^5.0.0",
2023
"lucide-react": "^0.424.0",
2124
"react-grid-layout": "^2.2.2",

src/DataHubPage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ const DataHubPageInner: React.FC = () => {
116116
{/* Overlay */}
117117
{sidebarOpen && (
118118
<div
119-
className="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm transition-opacity"
119+
className="fixed inset-0 z-40 bg-black/70 transition-opacity"
120120
onClick={closeSidebar}
121121
aria-hidden
122122
/>

src/components/DataTree.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ export const DataTree: React.FC<DataTreeProps> = ({
150150
}}
151151
className={`py-1 rounded px-1.5 cursor-grab active:cursor-grabbing transition-colors ${
152152
selectedAttribute === attr.name
153-
? 'bg-emerald-900/40 text-emerald-300 ring-1 ring-emerald-500/30'
153+
? 'bg-emerald-900 text-emerald-200 ring-1 ring-emerald-500/40'
154154
: 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'
155155
}`}
156156
>
@@ -164,7 +164,7 @@ export const DataTree: React.FC<DataTreeProps> = ({
164164
</span>
165165
)}
166166
{hasActivePanel && (
167-
<span className="ml-auto text-[10px] text-emerald-400 bg-emerald-400/10 px-1.5 py-0.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity">
167+
<span className="ml-auto text-[10px] text-emerald-300 bg-emerald-900 px-1.5 py-0.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity">
168168
+ {t('tree.addToPanel')}
169169
</span>
170170
)}

src/slots/DataHubDashboard.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -678,7 +678,7 @@ export const DataHubDashboard = forwardRef<DataHubDashboardHandle, DataHubDashbo
678678
</div>
679679
</div>
680680
{mainView === 'canvas' && (
681-
<div className="flex flex-wrap items-center gap-2 px-4 py-2 border-t border-slate-800/80 bg-slate-950/80">
681+
<div className="flex flex-wrap items-center gap-2 px-4 py-2 border-t border-slate-800 bg-slate-950">
682682
<span className="text-[10px] uppercase tracking-wide text-slate-500 shrink-0">
683683
{t('dashboard.timeRange')}
684684
</span>
@@ -739,7 +739,7 @@ export const DataHubDashboard = forwardRef<DataHubDashboardHandle, DataHubDashbo
739739
<div className="flex-1 min-h-0 p-2 flex flex-col">
740740
{panels.length === 0 ? (
741741
<div
742-
className="flex-1 flex items-center justify-center rounded-lg border border-dashed border-slate-700 bg-slate-900/40 p-6 min-h-[min(420px,50vh)]"
742+
className="flex-1 flex items-center justify-center rounded-lg border border-dashed border-slate-700 bg-slate-900 p-6 min-h-[min(420px,50vh)]"
743743
role="region"
744744
aria-label={t('dashboard.emptyCanvasTitle')}
745745
onDragOver={onEmptyCanvasDragOver}
@@ -782,7 +782,7 @@ export const DataHubDashboard = forwardRef<DataHubDashboardHandle, DataHubDashbo
782782
<div key={panel.id} className="relative h-full" onMouseDown={() => setActivePanelId(panel.id)}>
783783
{/* Floating actions — top right pill */}
784784
<div className="absolute top-2 right-2 z-20 flex gap-0.5 pointer-events-none">
785-
<div className="pointer-events-auto flex items-center gap-0.5 bg-slate-950/70 backdrop-blur-md rounded-full px-1.5 py-1 ring-1 ring-white/10 shadow-sm">
785+
<div className="pointer-events-auto flex items-center gap-0.5 bg-slate-950 rounded-full px-1.5 py-1 ring-1 ring-white/10 shadow-sm">
786786
{panel.series.length === 1 && (
787787
<button
788788
type="button"

src/slots/panel/DataCanvasPanel.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -781,7 +781,7 @@ export const DataCanvasPanel: React.FC<DataCanvasPanelProps> = ({
781781
<div className="pointer-events-auto px-2 pb-1"
782782
onMouseDown={(e) => e.stopPropagation()}
783783
>
784-
<div className="bg-slate-950/95 backdrop-blur-sm rounded-md border border-slate-700/40 shadow-2xl max-h-[80vh] overflow-y-auto">
784+
<div className="bg-slate-950 rounded-md border border-slate-700/40 shadow-2xl max-h-[80vh] overflow-y-auto">
785785
<PanelToolbar
786786
appearance={appearance}
787787
onAppearanceChange={patchAppearance}

src/slots/panel/PanelHeader.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const PanelHeader: React.FC<PanelHeaderProps> = ({
2525
return (
2626
<div
2727
className={[
28-
'h-9 flex items-center gap-2 px-3 border-b border-slate-800/80 bg-slate-950/50 backdrop-blur-sm',
28+
'h-9 flex items-center gap-2 px-3 border-b border-slate-800 bg-slate-950',
2929
dragHandleClass ?? '',
3030
].join(' ')}
3131
>

0 commit comments

Comments
 (0)