- Replace all bg-blue-600/hover:bg-blue-700 → bg-primary/hover:bg-primary-hover - Replace all bg-red-600/hover:bg-red-700 → bg-destructive/hover:bg-destructive-hover - Replace all focus:ring-blue-500 → focus-visible:ring-primary-ring - Replace all text-blue-600 → text-primary on interactive elements - Replace all bg-blue-50 → bg-primary-light on UI surfaces - Replace all bg-red-50 → bg-destructive-light on error surfaces - Replace all border-blue-200/300 → border-primary-ring - Replace all border-red-200 → border-destructive-light - Replace peer-checked:bg-blue-600 → peer-checked:bg-primary (toggles) - Replace focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 patterns - Keep status badge patterns (bg-*-100 text-*-700) and hover:bg-blue-50 intact 82 files changed, ~400 changes. Build passes.
Superset Tools Frontend (SvelteKit)
This is the frontend for the Superset Tools application, built with SvelteKit in SPA mode.
Development
-
Install dependencies:
npm install -
Run development server:
npm run devThe frontend will be available at
http://localhost:5173. It is configured to proxy API requests tohttp://localhost:8000.
Production Build
-
Build the static SPA:
npm run buildThis generates a static SPA in the
build/directory. -
Serve with Backend: The Python backend is configured to serve the files from
frontend/build/. Ensure the backend is running:cd ../backend python src/app.py
Architecture
- Routing: File-based routing in
src/routes/. - Layouts: Shared UI in
src/routes/+layout.svelte. - Data Loading:
loadfunctions in+page.tsfor efficient data fetching. - API Client: Centralized API logic in
src/lib/api.js. - Styling: Tailwind CSS.