@squadbase/vantage-template 0.0.1

package/base-template/styles.css

@@ -0,0 +1,18 @@
+/*
+ * Project styles. Vantage imports its own Tailwind v4 theme first and then this
+ * file, so anything declared here wins.
+ *
+ * There is no `tailwind.config.*` in a Vantage app — theme tokens are plain CSS
+ * variables. Override the ones below to rebrand the dashboard: the UI kit, every
+ * Tailwind utility (`bg-primary`, `bg-chart-1`, …) and `EChart` all resolve
+ * through them.
+ *
+ * Charts included: since v0.2.1 `EChart` reads `--chart-1..5` for series colours
+ * and the foreground/border tokens for axes, legend and tooltip, in both light
+ * and dark mode. Override `--chart-*` here and the charts follow. Pass
+ * `option.color` only when one chart needs its own palette.
+ */
+:root {
+  /* --primary: hsl(221 83% 53%); */
+  /* --radius: 0.625rem; */
+}

package/base-template/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "noUncheckedIndexedAccess": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
+    "noEmit": true,
+    "types": ["react", "react-dom", "node"]
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".vantage/types/**/*.d.ts"],
+  "exclude": [
+    "node_modules",
+    "dist",
+    ".vantage/client-entry.tsx",
+    ".vantage/route-tree.gen.ts",
+    ".vantage/server-routes.gen.ts"
+  ]
+}

package/chart-presets/berry.css

@@ -0,0 +1,16 @@
+:root {
+  --chart-1: var(--color-purple-600);
+  --chart-2: var(--color-pink-500);
+  --chart-3: var(--color-fuchsia-500);
+  --chart-4: var(--color-violet-500);
+  --chart-5: var(--color-rose-400);
+}
+
+.dark,
+[data-theme="dark"] {
+  --chart-1: var(--color-purple-400);
+  --chart-2: var(--color-pink-400);
+  --chart-3: var(--color-fuchsia-400);
+  --chart-4: var(--color-violet-400);
+  --chart-5: var(--color-rose-300);
+}

package/chart-presets/blue.css

@@ -0,0 +1,16 @@
+:root {
+  --chart-1: var(--color-blue-600);
+  --chart-2: var(--color-teal-500);
+  --chart-3: var(--color-fuchsia-500);
+  --chart-4: var(--color-violet-500);
+  --chart-5: var(--color-gray-400);
+}
+
+.dark,
+[data-theme="dark"] {
+  --chart-1: var(--color-blue-400);
+  --chart-2: var(--color-teal-400);
+  --chart-3: var(--color-fuchsia-400);
+  --chart-4: var(--color-violet-400);
+  --chart-5: var(--color-gray-500);
+}

package/chart-presets/forest.css

@@ -0,0 +1,16 @@
+:root {
+  --chart-1: var(--color-emerald-600);
+  --chart-2: var(--color-lime-500);
+  --chart-3: var(--color-amber-500);
+  --chart-4: var(--color-green-600);
+  --chart-5: var(--color-stone-400);
+}
+
+.dark,
+[data-theme="dark"] {
+  --chart-1: var(--color-emerald-400);
+  --chart-2: var(--color-lime-400);
+  --chart-3: var(--color-amber-400);
+  --chart-4: var(--color-green-400);
+  --chart-5: var(--color-stone-500);
+}

package/chart-presets/mono.css

@@ -0,0 +1,16 @@
+:root {
+  --chart-1: var(--color-zinc-900);
+  --chart-2: var(--color-zinc-600);
+  --chart-3: var(--color-zinc-400);
+  --chart-4: var(--color-zinc-300);
+  --chart-5: var(--color-zinc-200);
+}
+
+.dark,
+[data-theme="dark"] {
+  --chart-1: var(--color-zinc-100);
+  --chart-2: var(--color-zinc-300);
+  --chart-3: var(--color-zinc-500);
+  --chart-4: var(--color-zinc-600);
+  --chart-5: var(--color-zinc-700);
+}

package/chart-presets/ocean.css

@@ -0,0 +1,16 @@
+:root {
+  --chart-1: var(--color-sky-600);
+  --chart-2: var(--color-cyan-500);
+  --chart-3: var(--color-indigo-500);
+  --chart-4: var(--color-teal-500);
+  --chart-5: var(--color-slate-400);
+}
+
+.dark,
+[data-theme="dark"] {
+  --chart-1: var(--color-sky-400);
+  --chart-2: var(--color-cyan-400);
+  --chart-3: var(--color-indigo-400);
+  --chart-4: var(--color-teal-400);
+  --chart-5: var(--color-slate-500);
+}

package/chart-presets/sunset.css

@@ -0,0 +1,16 @@
+:root {
+  --chart-1: var(--color-orange-600);
+  --chart-2: var(--color-amber-500);
+  --chart-3: var(--color-rose-500);
+  --chart-4: var(--color-yellow-500);
+  --chart-5: var(--color-stone-400);
+}
+
+.dark,
+[data-theme="dark"] {
+  --chart-1: var(--color-orange-400);
+  --chart-2: var(--color-amber-400);
+  --chart-3: var(--color-rose-400);
+  --chart-4: var(--color-yellow-400);
+  --chart-5: var(--color-stone-500);
+}