@yuva-devlab/tokens 1.1.1 → 1.3.0

package/dist/index.cjs

@@ -1,7 +1,13 @@
 'use strict';
 
 // src/index.ts
-var THEMES = ["orchestrai", "finai"];
+var THEMES = [
+  "orchestrai",
+  "finai",
+  "portal",
+  "logs",
+  "vitalai"
+];
 var BRAND_MODES = ["light", "dark"];
 var THEME_CONFIGS = {
   orchestrai: {
@@ -13,6 +19,21 @@ var THEME_CONFIGS = {
     name: "finai",
     defaultMode: "dark",
     label: "FinAI"
+  },
+  portal: {
+    name: "portal",
+    defaultMode: "dark",
+    label: "DevLab Portal"
+  },
+  logs: {
+    name: "logs",
+    defaultMode: "dark",
+    label: "DevLab Logs"
+  },
+  vitalai: {
+    name: "vitalai",
+    defaultMode: "dark",
+    label: "VitalAI"
   }
 };
 

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;AAKO,IAAM,MAAA,GAAS,CAAC,YAAA,EAAc,OAAO;AAGrC,IAAM,WAAA,GAAc,CAAC,OAAA,EAAS,MAAM;AASpC,IAAM,aAAA,GAAgD;AAAA,EAC3D,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,YAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO;AAAA,GACT;AAAA,EACA,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,OAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO;AAAA;AAEX","file":"index.cjs","sourcesContent":["/**\n * @file src/index.ts\n * @description Yuva DevLab Design System — Design Tokens & Theme Definitions.\n */\n\nexport const THEMES = [\"orchestrai\", \"finai\"] as const;\nexport type ThemeName = (typeof THEMES)[number];\n\nexport const BRAND_MODES = [\"light\", \"dark\"] as const;\nexport type BrandMode = (typeof BRAND_MODES)[number];\n\nexport interface ThemeConfig {\n  readonly name: ThemeName;\n  readonly defaultMode: BrandMode;\n  readonly label: string;\n}\n\nexport const THEME_CONFIGS: Record<ThemeName, ThemeConfig> = {\n  orchestrai: {\n    name: \"orchestrai\",\n    defaultMode: \"dark\",\n    label: \"OrchestrAI\",\n  },\n  finai: {\n    name: \"finai\",\n    defaultMode: \"dark\",\n    label: \"FinAI\",\n  },\n} as const;\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;AAKO,IAAM,MAAA,GAAS;AAAA,EACpB,YAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF;AAGO,IAAM,WAAA,GAAc,CAAC,OAAA,EAAS,MAAM;AASpC,IAAM,aAAA,GAAgD;AAAA,EAC3D,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,YAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO;AAAA,GACT;AAAA,EACA,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,OAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO;AAAA,GACT;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM,QAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO;AAAA,GACT;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,IAAA,EAAM,MAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO;AAAA,GACT;AAAA,EACA,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,SAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO;AAAA;AAEX","file":"index.cjs","sourcesContent":["/**\n * @file src/index.ts\n * @description Yuva DevLab Design System — Design Tokens & Theme Definitions.\n */\n\nexport const THEMES = [\n  \"orchestrai\",\n  \"finai\",\n  \"portal\",\n  \"logs\",\n  \"vitalai\",\n] as const;\nexport type ThemeName = (typeof THEMES)[number];\n\nexport const BRAND_MODES = [\"light\", \"dark\"] as const;\nexport type BrandMode = (typeof BRAND_MODES)[number];\n\nexport interface ThemeConfig {\n  readonly name: ThemeName;\n  readonly defaultMode: BrandMode;\n  readonly label: string;\n}\n\nexport const THEME_CONFIGS: Record<ThemeName, ThemeConfig> = {\n  orchestrai: {\n    name: \"orchestrai\",\n    defaultMode: \"dark\",\n    label: \"OrchestrAI\",\n  },\n  finai: {\n    name: \"finai\",\n    defaultMode: \"dark\",\n    label: \"FinAI\",\n  },\n  portal: {\n    name: \"portal\",\n    defaultMode: \"dark\",\n    label: \"DevLab Portal\",\n  },\n  logs: {\n    name: \"logs\",\n    defaultMode: \"dark\",\n    label: \"DevLab Logs\",\n  },\n  vitalai: {\n    name: \"vitalai\",\n    defaultMode: \"dark\",\n    label: \"VitalAI\",\n  },\n} as const;\n"]}

package/dist/index.d.cts

@@ -2,7 +2,7 @@
  * @file src/index.ts
  * @description Yuva DevLab Design System — Design Tokens & Theme Definitions.
  */
-declare const THEMES: readonly ["orchestrai", "finai"];
+declare const THEMES: readonly ["orchestrai", "finai", "portal", "logs", "vitalai"];
 type ThemeName = (typeof THEMES)[number];
 declare const BRAND_MODES: readonly ["light", "dark"];
 type BrandMode = (typeof BRAND_MODES)[number];

package/dist/index.d.ts

@@ -2,7 +2,7 @@
  * @file src/index.ts
  * @description Yuva DevLab Design System — Design Tokens & Theme Definitions.
  */
-declare const THEMES: readonly ["orchestrai", "finai"];
+declare const THEMES: readonly ["orchestrai", "finai", "portal", "logs", "vitalai"];
 type ThemeName = (typeof THEMES)[number];
 declare const BRAND_MODES: readonly ["light", "dark"];
 type BrandMode = (typeof BRAND_MODES)[number];

package/dist/index.js

@@ -1,5 +1,11 @@
 // src/index.ts
-var THEMES = ["orchestrai", "finai"];
+var THEMES = [
+  "orchestrai",
+  "finai",
+  "portal",
+  "logs",
+  "vitalai"
+];
 var BRAND_MODES = ["light", "dark"];
 var THEME_CONFIGS = {
   orchestrai: {
@@ -11,6 +17,21 @@ var THEME_CONFIGS = {
     name: "finai",
     defaultMode: "dark",
     label: "FinAI"
+  },
+  portal: {
+    name: "portal",
+    defaultMode: "dark",
+    label: "DevLab Portal"
+  },
+  logs: {
+    name: "logs",
+    defaultMode: "dark",
+    label: "DevLab Logs"
+  },
+  vitalai: {
+    name: "vitalai",
+    defaultMode: "dark",
+    label: "VitalAI"
   }
 };
 

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";AAKO,IAAM,MAAA,GAAS,CAAC,YAAA,EAAc,OAAO;AAGrC,IAAM,WAAA,GAAc,CAAC,OAAA,EAAS,MAAM;AASpC,IAAM,aAAA,GAAgD;AAAA,EAC3D,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,YAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO;AAAA,GACT;AAAA,EACA,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,OAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO;AAAA;AAEX","file":"index.js","sourcesContent":["/**\n * @file src/index.ts\n * @description Yuva DevLab Design System — Design Tokens & Theme Definitions.\n */\n\nexport const THEMES = [\"orchestrai\", \"finai\"] as const;\nexport type ThemeName = (typeof THEMES)[number];\n\nexport const BRAND_MODES = [\"light\", \"dark\"] as const;\nexport type BrandMode = (typeof BRAND_MODES)[number];\n\nexport interface ThemeConfig {\n  readonly name: ThemeName;\n  readonly defaultMode: BrandMode;\n  readonly label: string;\n}\n\nexport const THEME_CONFIGS: Record<ThemeName, ThemeConfig> = {\n  orchestrai: {\n    name: \"orchestrai\",\n    defaultMode: \"dark\",\n    label: \"OrchestrAI\",\n  },\n  finai: {\n    name: \"finai\",\n    defaultMode: \"dark\",\n    label: \"FinAI\",\n  },\n} as const;\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";AAKO,IAAM,MAAA,GAAS;AAAA,EACpB,YAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF;AAGO,IAAM,WAAA,GAAc,CAAC,OAAA,EAAS,MAAM;AASpC,IAAM,aAAA,GAAgD;AAAA,EAC3D,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,YAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO;AAAA,GACT;AAAA,EACA,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,OAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO;AAAA,GACT;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM,QAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO;AAAA,GACT;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,IAAA,EAAM,MAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO;AAAA,GACT;AAAA,EACA,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,SAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO;AAAA;AAEX","file":"index.js","sourcesContent":["/**\n * @file src/index.ts\n * @description Yuva DevLab Design System — Design Tokens & Theme Definitions.\n */\n\nexport const THEMES = [\n  \"orchestrai\",\n  \"finai\",\n  \"portal\",\n  \"logs\",\n  \"vitalai\",\n] as const;\nexport type ThemeName = (typeof THEMES)[number];\n\nexport const BRAND_MODES = [\"light\", \"dark\"] as const;\nexport type BrandMode = (typeof BRAND_MODES)[number];\n\nexport interface ThemeConfig {\n  readonly name: ThemeName;\n  readonly defaultMode: BrandMode;\n  readonly label: string;\n}\n\nexport const THEME_CONFIGS: Record<ThemeName, ThemeConfig> = {\n  orchestrai: {\n    name: \"orchestrai\",\n    defaultMode: \"dark\",\n    label: \"OrchestrAI\",\n  },\n  finai: {\n    name: \"finai\",\n    defaultMode: \"dark\",\n    label: \"FinAI\",\n  },\n  portal: {\n    name: \"portal\",\n    defaultMode: \"dark\",\n    label: \"DevLab Portal\",\n  },\n  logs: {\n    name: \"logs\",\n    defaultMode: \"dark\",\n    label: \"DevLab Logs\",\n  },\n  vitalai: {\n    name: \"vitalai\",\n    defaultMode: \"dark\",\n    label: \"VitalAI\",\n  },\n} as const;\n"]}

package/dist/preset.css

@@ -221,6 +221,17 @@
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
 
+  /* ── VitalAI Clinical & Performance Telemetry Tokens ───────────── */
+  --color-vital: var(--vital);
+  --color-vital-foreground: var(--vital-foreground);
+  --color-calories: var(--calories);
+  --color-protein: var(--protein);
+  --color-carbs: var(--carbs);
+  --color-fats: var(--fats);
+  --color-water: var(--water);
+  --color-glass: var(--glass);
+  --color-glass-border: var(--glass-border);
+
   /* ── Component Control Dimensions ─────────────────────────────────── */
   --height-control-xs: var(--control-height-xs, 1.75rem);
   --height-control-sm: var(--control-height-sm, 2rem);

package/dist/styles.css

@@ -10,3 +10,6 @@
 /* ── Brand Scoped Themes ─────────────────────────────────────────────────── */
 @import "./themes/finai.css";
 @import "./themes/orchestrai.css";
+@import "./themes/portal.css";
+@import "./themes/logs.css";
+@import "./themes/vitalai.css";

package/dist/themes/logs.css

@@ -0,0 +1,137 @@
+/**
+ * DevLab Logs Theme — High-Density Observability & Telemetry Console Palette
+ * Modern OKLCH color spaces optimized for real-time distributed log streaming,
+ * trace inspection, DuckDB SQL analytics, and Log-RAG root-cause analysis.
+ */
+
+/* ── DevLab Logs Theme — Light Mode ────────────────────────────────────────── */
+[data-brand="logs"],
+[data-theme="logs"],
+[data-theme="logs-light"],
+:root[data-brand="logs"],
+:root[data-theme="logs"],
+:root[data-theme="logs-light"] {
+  --radius: 0.5rem;
+
+  /* Surfaces */
+  --background: oklch(0.975 0.005 240);
+  --foreground: oklch(0.2 0.02 250);
+  --surface: oklch(0.95 0.008 240);
+  --surface-2: oklch(0.92 0.01 240);
+  --card: oklch(0.98 0.004 240);
+  --card-foreground: oklch(0.2 0.02 250);
+  --popover: oklch(0.97 0.006 240);
+  --popover-foreground: oklch(0.2 0.02 250);
+
+  /* Brand / Neon Green Accent */
+  --primary: oklch(0.62 0.18 150);
+  --primary-foreground: oklch(0.99 0.005 150);
+  --secondary: oklch(0.92 0.012 245);
+  --secondary-foreground: oklch(0.25 0.02 250);
+
+  /* Muted / Accent */
+  --muted: oklch(0.92 0.01 240);
+  --muted-foreground: oklch(0.5 0.02 245);
+  --accent: oklch(0.9 0.015 240);
+  --accent-foreground: oklch(0.2 0.02 250);
+
+  /* Severity & Status */
+  --destructive: oklch(0.6 0.22 25);
+  --destructive-foreground: oklch(0.99 0 0);
+  --fatal: oklch(0.58 0.24 350);
+  --error: oklch(0.6 0.22 25);
+  --warn: oklch(0.7 0.16 80);
+  --info: oklch(0.62 0.14 230);
+  --debug: oklch(0.52 0.04 250);
+  --ai: oklch(0.65 0.15 195);
+
+  /* Syntax Highlighting */
+  --syn-key: oklch(0.55 0.14 235);
+  --syn-str: oklch(0.55 0.16 145);
+  --syn-num: oklch(0.62 0.16 75);
+
+  /* Form & Interactive */
+  --border: oklch(0.85 0.01 240);
+  --input: oklch(0.85 0.01 240);
+  --ring: oklch(0.62 0.18 150 / 60%);
+
+  /* Visual Glow & Matrix Background */
+  --glow-primary:
+    0 0 0 1px color-mix(in oklab, var(--primary) 30%, transparent),
+    0 0 18px -4px color-mix(in oklab, var(--primary) 40%, transparent);
+  --grid-bg: radial-gradient(
+    circle at 1px 1px,
+    oklch(0 0 0 / 5%) 1px,
+    transparent 0
+  );
+}
+
+/* ── DevLab Logs Theme — Dark Mode ─────────────────────────────────────────── */
+[data-theme="logs-dark"],
+[data-brand="logs"][data-theme="dark"],
+[data-brand="logs"][data-theme="logs-dark"],
+[data-brand="logs"].dark,
+[data-brand="logs"] .dark,
+[data-theme="logs"] .dark,
+.dark [data-brand="logs"],
+.dark [data-theme="logs"],
+:root[data-theme="logs-dark"],
+:root[data-brand="logs"].dark,
+:root[data-brand="logs"][data-theme="dark"],
+:root[data-brand="logs"][data-theme="logs-dark"],
+:root.dark[data-brand="logs"],
+:root.dark[data-theme="logs"] {
+  --radius: 0.5rem;
+
+  /* Surfaces */
+  --background: oklch(0.155 0.012 250);
+  --foreground: oklch(0.93 0.01 240);
+  --surface: oklch(0.19 0.014 250);
+  --surface-2: oklch(0.225 0.016 250);
+  --card: oklch(0.19 0.014 250);
+  --card-foreground: oklch(0.93 0.01 240);
+  --popover: oklch(0.21 0.016 250);
+  --popover-foreground: oklch(0.93 0.01 240);
+
+  /* Brand / Neon Green Accent */
+  --primary: oklch(0.86 0.17 150);
+  --primary-foreground: oklch(0.17 0.03 150);
+  --secondary: oklch(0.25 0.016 250);
+  --secondary-foreground: oklch(0.93 0.01 240);
+
+  /* Muted / Accent */
+  --muted: oklch(0.24 0.014 250);
+  --muted-foreground: oklch(0.64 0.02 245);
+  --accent: oklch(0.27 0.02 250);
+  --accent-foreground: oklch(0.96 0.01 240);
+
+  /* Severity & Status */
+  --destructive: oklch(0.66 0.21 25);
+  --destructive-foreground: oklch(0.98 0 0);
+  --fatal: oklch(0.68 0.24 350);
+  --error: oklch(0.68 0.21 25);
+  --warn: oklch(0.82 0.16 80);
+  --info: oklch(0.76 0.12 230);
+  --debug: oklch(0.6 0.03 250);
+  --ai: oklch(0.78 0.14 195);
+
+  /* Syntax Highlighting */
+  --syn-key: oklch(0.78 0.12 230);
+  --syn-str: oklch(0.84 0.14 140);
+  --syn-num: oklch(0.82 0.15 70);
+
+  /* Form & Interactive */
+  --border: oklch(0.28 0.016 250);
+  --input: oklch(0.3 0.016 250);
+  --ring: oklch(0.86 0.17 150 / 60%);
+
+  /* Visual Glow & Matrix Background */
+  --glow-primary:
+    0 0 0 1px color-mix(in oklab, var(--primary) 40%, transparent),
+    0 0 24px -4px color-mix(in oklab, var(--primary) 50%, transparent);
+  --grid-bg: radial-gradient(
+    circle at 1px 1px,
+    oklch(1 0 0 / 4%) 1px,
+    transparent 0
+  );
+}

package/dist/themes/portal.css

@@ -0,0 +1,192 @@
+/**
+ * DevLab Portal Theme — Mint / Obsidian Palette
+ * Scoped OKLCH color tokens optimized for identity, IAM, security audit ledger, and control plane workflows.
+ * High-specificity scoped tokens for DevLab Portal applications.
+ */
+
+/* ── DevLab Portal Theme — Light Mode ──────────────────────────────────── */
+[data-brand="portal"],
+[data-theme="portal"],
+[data-theme="portal-light"],
+:root[data-brand="portal"],
+:root[data-theme="portal"],
+:root[data-theme="portal-light"] {
+  --radius: 0.5rem;
+
+  /* Surfaces */
+  --background: oklch(97.5% 0.003 170);
+  --foreground: oklch(22% 0.01 170);
+  --card: oklch(100% 0 0);
+  --card-foreground: oklch(22% 0.01 170);
+  --popover: oklch(100% 0 0);
+  --popover-foreground: oklch(22% 0.01 170);
+
+  /* Brand */
+  --primary: oklch(46% 0.115 170);
+  --primary-foreground: oklch(99% 0.005 170);
+  --secondary: oklch(94.5% 0.006 170);
+  --secondary-foreground: oklch(24% 0.01 170);
+
+  /* Muted / Accent */
+  --muted: oklch(94.5% 0.006 170);
+  --muted-foreground: oklch(51% 0.01 170);
+  --accent: oklch(92% 0.012 170);
+  --accent-foreground: oklch(22% 0.01 170);
+
+  /* Status */
+  --destructive: oklch(58% 0.19 25);
+  --destructive-foreground: oklch(99% 0 0);
+  --success: oklch(47% 0.13 166);
+  --success-foreground: oklch(99% 0 0);
+  --warning: oklch(63% 0.13 75);
+  --warning-foreground: oklch(20% 0.03 75);
+  --info: oklch(72% 0.13 260);
+  --info-foreground: oklch(99% 0 0);
+
+  /* Form / Ring */
+  --border: oklch(88% 0.007 170);
+  --input: oklch(88% 0.007 170);
+  --ring: oklch(46% 0.115 170);
+
+  /* Palette Accents */
+  --mint: oklch(72% 0.15 163);
+  --blue: oklch(72% 0.13 260);
+  --amber: oklch(78% 0.14 75);
+  --rose: oklch(73% 0.15 15);
+  --teal: oklch(74% 0.11 190);
+
+  /* Glass / Surface Tokens */
+  --surface: oklch(100% 0 0 / 80%);
+  --surface-2: oklch(96% 0.004 170);
+  --overlay: oklch(10% 0 0 / 75%);
+  --shadow-panel: 0 8px 28px oklch(10% 0 0 / 0.12);
+
+  /* Navigation & Sidebar */
+  --sidebar: oklch(98% 0.003 170);
+  --sidebar-foreground: oklch(22% 0.01 170);
+  --sidebar-primary: oklch(46% 0.115 170);
+  --sidebar-primary-foreground: oklch(99% 0.005 170);
+  --sidebar-accent: oklch(94% 0.006 170);
+  --sidebar-accent-foreground: oklch(22% 0.01 170);
+  --sidebar-border: oklch(88% 0.007 170);
+  --sidebar-ring: oklch(46% 0.115 170);
+
+  /* Visual Data Telemetry (Charts) */
+  --chart-1: oklch(46% 0.115 170);
+  --chart-2: oklch(72% 0.13 260);
+  --chart-3: oklch(78% 0.14 75);
+  --chart-4: oklch(73% 0.15 15);
+  --chart-5: oklch(74% 0.11 190);
+
+  /* Sizing, Spacing & Layout Tokens */
+  --control-height-xs: 1.75rem;
+  --control-height-sm: 2rem;
+  --control-height-md: 2.25rem;
+  --control-height-lg: 2.5rem;
+  --control-height-xl: 3rem;
+
+  --icon-xs: 0.875rem;
+  --icon-sm: 1rem;
+  --icon-md: 1.25rem;
+  --icon-lg: 1.5rem;
+  --icon-xl: 2rem;
+
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+
+  --card-padding: var(--space-4);
+  --dialog-padding: var(--space-5);
+  --form-field-gap: var(--space-3);
+  --section-gap: var(--space-5);
+  --table-row-padding-x: var(--space-4);
+  --table-row-padding-y: var(--space-3);
+}
+
+/* ── DevLab Portal Theme — Dark Mode ─────────────────────────────────── */
+[data-theme="portal-dark"],
+[data-brand="portal"][data-theme="dark"],
+[data-brand="portal"][data-theme="portal-dark"],
+[data-brand="portal"].dark,
+[data-brand="portal"] .dark,
+[data-theme="portal"] .dark,
+.dark [data-brand="portal"],
+.dark [data-theme="portal"],
+:root[data-theme="portal-dark"],
+:root[data-brand="portal"].dark,
+:root[data-brand="portal"][data-theme="dark"],
+:root[data-brand="portal"][data-theme="portal-dark"],
+:root.dark[data-brand="portal"],
+:root.dark[data-theme="portal"] {
+  --radius: 0.5rem;
+
+  /* Surfaces */
+  --background: oklch(16% 0.005 170);
+  --foreground: oklch(94% 0.003 170);
+  --card: oklch(19.7% 0.005 170);
+  --card-foreground: oklch(94% 0.003 170);
+  --popover: oklch(19.7% 0.005 170);
+  --popover-foreground: oklch(94% 0.003 170);
+
+  /* Brand */
+  --primary: oklch(80% 0.13 165);
+  --primary-foreground: oklch(18% 0.035 165);
+  --secondary: oklch(23% 0.005 170);
+  --secondary-foreground: oklch(92% 0.005 170);
+
+  /* Muted / Accent */
+  --muted: oklch(23% 0.005 170);
+  --muted-foreground: oklch(62% 0.008 170);
+  --accent: oklch(26.5% 0.005 170);
+  --accent-foreground: oklch(94% 0.003 170);
+
+  /* Status */
+  --destructive: oklch(72% 0.16 25);
+  --destructive-foreground: oklch(17% 0.02 25);
+  --success: oklch(77% 0.14 165);
+  --success-foreground: oklch(18% 0.03 165);
+  --warning: oklch(80% 0.13 80);
+  --warning-foreground: oklch(20% 0.03 80);
+  --info: oklch(72% 0.13 260);
+  --info-foreground: oklch(18% 0.03 260);
+
+  /* Form / Ring */
+  --border: oklch(29% 0.005 170);
+  --input: oklch(29% 0.005 170);
+  --ring: oklch(80% 0.13 165);
+
+  /* Palette Accents */
+  --mint: oklch(72% 0.15 163);
+  --blue: oklch(72% 0.13 260);
+  --amber: oklch(78% 0.14 75);
+  --rose: oklch(73% 0.15 15);
+  --teal: oklch(74% 0.11 190);
+
+  /* Glass / Surface Tokens */
+  --surface: oklch(19.7% 0.005 170 / 80%);
+  --surface-2: oklch(23% 0.005 170);
+  --overlay: oklch(10% 0 0 / 75%);
+  --shadow-panel: 0 8px 28px oklch(10% 0 0 / 0.35);
+
+  /* Navigation & Sidebar */
+  --sidebar: oklch(17.5% 0.005 170);
+  --sidebar-foreground: oklch(94% 0.003 170);
+  --sidebar-primary: oklch(80% 0.13 165);
+  --sidebar-primary-foreground: oklch(18% 0.035 165);
+  --sidebar-accent: oklch(24% 0.005 170);
+  --sidebar-accent-foreground: oklch(94% 0.003 170);
+  --sidebar-border: oklch(29% 0.005 170);
+  --sidebar-ring: oklch(80% 0.13 165);
+
+  /* Visual Data Telemetry (Charts) */
+  --chart-1: oklch(80% 0.13 165);
+  --chart-2: oklch(72% 0.13 260);
+  --chart-3: oklch(78% 0.14 75);
+  --chart-4: oklch(73% 0.15 15);
+  --chart-5: oklch(74% 0.11 190);
+}

package/dist/themes/vitalai.css

@@ -0,0 +1,178 @@
+/**
+ * VitalAI Theme Preset — Clinical Porcelain & Bioluminescent Teal Palette
+ * Modern OKLCH color spaces optimized for high performance, clinical nutrition, and fitness intelligence.
+ * High-specificity scoped tokens for VitalAI applications.
+ */
+
+/* ── VitalAI Theme — Light Mode ─────────────────────────────────────────── */
+[data-brand="vitalai"],
+[data-theme="vitalai"],
+[data-theme="vitalai-light"],
+:root[data-brand="vitalai"],
+:root[data-theme="vitalai"],
+:root[data-theme="vitalai-light"] {
+  --radius: 1rem;
+
+  /* Surfaces */
+  --background: oklch(0.975 0.006 190);
+  --foreground: oklch(0.2 0.03 220);
+  --card: oklch(1 0 0 / 72%);
+  --card-foreground: oklch(0.2 0.03 220);
+  --popover: oklch(0.995 0.003 190);
+  --popover-foreground: oklch(0.2 0.03 220);
+
+  /* Brand Action */
+  --primary: oklch(0.52 0.11 185);
+  --primary-foreground: oklch(0.99 0.01 185);
+  --secondary: oklch(0.94 0.015 190);
+  --secondary-foreground: oklch(0.25 0.04 210);
+
+  /* Muted / Accent */
+  --muted: oklch(0.945 0.01 200);
+  --muted-foreground: oklch(0.5 0.025 220);
+  --accent: oklch(0.93 0.035 180);
+  --accent-foreground: oklch(0.3 0.07 185);
+
+  /* Status & Clinical Feedback */
+  --destructive: oklch(0.58 0.2 25);
+  --destructive-foreground: oklch(0.99 0 0);
+  --warning: oklch(0.72 0.16 70);
+  --warning-foreground: oklch(0.2 0.02 70);
+  --success: oklch(0.62 0.15 155);
+  --success-foreground: oklch(0.99 0 0);
+  --info: oklch(0.62 0.13 235);
+  --info-foreground: oklch(0.99 0 0);
+
+  /* Form & Interactive */
+  --border: oklch(0.2 0.03 220 / 9%);
+  --input: oklch(0.2 0.03 220 / 12%);
+  --ring: oklch(0.52 0.11 185);
+
+  /* Glassmorphism & Ambient Glow */
+  --glass: oklch(1 0 0 / 62%);
+  --glass-border: oklch(1 0 0 / 80%);
+  --glow: oklch(0.7 0.14 180 / 25%);
+  --glow-2: oklch(0.75 0.12 150 / 18%);
+  --shadow-glass:
+    0 1px 0 0 oklch(1 0 0 / 70%) inset,
+    0 10px 40px -12px oklch(0.3 0.05 210 / 18%);
+  --surface: oklch(1 0 0 / 70%);
+  --surface-2: oklch(0.975 0.005 190);
+  --overlay: oklch(0.975 0.006 190 / 80%);
+
+  /* Navigation & Sidebar */
+  --sidebar: oklch(0.99 0.004 190 / 70%);
+  --sidebar-foreground: oklch(0.25 0.03 220);
+  --sidebar-primary: oklch(0.52 0.11 185);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: oklch(0.93 0.035 180);
+  --sidebar-accent-foreground: oklch(0.3 0.07 185);
+  --sidebar-border: oklch(0.2 0.03 220 / 8%);
+  --sidebar-ring: oklch(0.52 0.11 185);
+
+  /* ── VitalAI Clinical Telemetry & Macro Tokens ───────────────────────── */
+  --vital: oklch(0.62 0.15 160);
+  --vital-foreground: oklch(0.99 0 0);
+  --calories: oklch(0.66 0.17 45);
+  --protein: oklch(0.55 0.13 185);
+  --carbs: oklch(0.7 0.15 85);
+  --fats: oklch(0.6 0.16 350);
+  --water: oklch(0.62 0.13 235);
+
+  /* Visual Data Charts */
+  --chart-1: var(--protein);
+  --chart-2: var(--carbs);
+  --chart-3: var(--fats);
+  --chart-4: var(--calories);
+  --chart-5: var(--water);
+}
+
+/* ── VitalAI Theme — Dark Mode ────────────────────────────────────────── */
+[data-theme="vitalai-dark"],
+[data-brand="vitalai"][data-theme="dark"],
+[data-brand="vitalai"][data-theme="vitalai-dark"],
+[data-brand="vitalai"].dark,
+[data-brand="vitalai"] .dark,
+[data-theme="vitalai"] .dark,
+.dark [data-brand="vitalai"],
+.dark [data-theme="vitalai"],
+:root[data-theme="vitalai-dark"],
+:root[data-brand="vitalai"].dark,
+:root[data-brand="vitalai"][data-theme="dark"],
+:root[data-brand="vitalai"][data-theme="vitalai-dark"],
+:root.dark[data-brand="vitalai"],
+:root.dark[data-theme="vitalai"] {
+  --radius: 1rem;
+
+  /* Surfaces */
+  --background: oklch(0.155 0.018 230);
+  --foreground: oklch(0.95 0.01 200);
+  --card: oklch(0.22 0.02 225 / 60%);
+  --card-foreground: oklch(0.95 0.01 200);
+  --popover: oklch(0.2 0.02 225);
+  --popover-foreground: oklch(0.95 0.01 200);
+
+  /* Brand Action */
+  --primary: oklch(0.8 0.13 180);
+  --primary-foreground: oklch(0.18 0.03 210);
+  --secondary: oklch(0.26 0.02 225);
+  --secondary-foreground: oklch(0.92 0.01 200);
+
+  /* Muted / Accent */
+  --muted: oklch(0.25 0.018 225);
+  --muted-foreground: oklch(0.68 0.02 210);
+  --accent: oklch(0.3 0.05 190);
+  --accent-foreground: oklch(0.88 0.1 180);
+
+  /* Status & Clinical Feedback */
+  --destructive: oklch(0.68 0.19 22);
+  --destructive-foreground: oklch(0.99 0 0);
+  --warning: oklch(0.8 0.15 75);
+  --warning-foreground: oklch(0.15 0.02 75);
+  --success: oklch(0.78 0.16 155);
+  --success-foreground: oklch(0.15 0.02 230);
+  --info: oklch(0.74 0.13 235);
+  --info-foreground: oklch(0.15 0.02 230);
+
+  /* Form & Interactive */
+  --border: oklch(1 0 0 / 8%);
+  --input: oklch(1 0 0 / 12%);
+  --ring: oklch(0.8 0.13 180);
+
+  /* Glassmorphism & Ambient Glow */
+  --glass: oklch(0.24 0.02 225 / 55%);
+  --glass-border: oklch(1 0 0 / 9%);
+  --glow: oklch(0.7 0.14 180 / 22%);
+  --glow-2: oklch(0.6 0.14 260 / 16%);
+  --shadow-glass:
+    0 1px 0 0 oklch(1 0 0 / 5%) inset, 0 20px 50px -20px oklch(0 0 0 / 60%);
+  --surface: oklch(0.22 0.02 225 / 70%);
+  --surface-2: oklch(0.25 0.02 225);
+  --overlay: oklch(0.12 0.018 230 / 80%);
+
+  /* Navigation & Sidebar */
+  --sidebar: oklch(0.18 0.02 228 / 70%);
+  --sidebar-foreground: oklch(0.9 0.01 200);
+  --sidebar-primary: oklch(0.8 0.13 180);
+  --sidebar-primary-foreground: oklch(0.18 0.03 210);
+  --sidebar-accent: oklch(0.28 0.04 195);
+  --sidebar-accent-foreground: oklch(0.9 0.1 180);
+  --sidebar-border: oklch(1 0 0 / 6%);
+  --sidebar-ring: oklch(0.8 0.13 180);
+
+  /* ── VitalAI Clinical Telemetry & Macro Tokens ───────────────────────── */
+  --vital: oklch(0.82 0.16 160);
+  --vital-foreground: oklch(0.18 0.03 210);
+  --calories: oklch(0.76 0.16 50);
+  --protein: oklch(0.8 0.13 180);
+  --carbs: oklch(0.85 0.14 90);
+  --fats: oklch(0.74 0.16 350);
+  --water: oklch(0.74 0.13 235);
+
+  /* Visual Data Charts */
+  --chart-1: var(--protein);
+  --chart-2: var(--carbs);
+  --chart-3: var(--fats);
+  --chart-4: var(--calories);
+  --chart-5: var(--water);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuva-devlab/tokens",
-  "version": "1.1.1",
+  "version": "1.3.0",
   "description": "Design tokens, brand themes, and Tailwind CSS 4 preset bridge for Yuva DevLab",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -24,6 +24,9 @@
     "./root.css": "./styles/root.css",
     "./themes/finai.css": "./styles/themes/finai.css",
     "./themes/orchestrai.css": "./styles/themes/orchestrai.css",
+    "./themes/portal.css": "./styles/themes/portal.css",
+    "./themes/logs.css": "./styles/themes/logs.css",
+    "./themes/vitalai.css": "./styles/themes/vitalai.css",
     "./package.json": "./package.json"
   },
   "files": [
@@ -37,9 +40,12 @@
     "prettier": "^3.9.8",
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
+    "@yuva-devlab/eslint-config": "0.1.1",
     "@yuva-devlab/prettier-config": "0.1.1",
-    "@yuva-devlab/typescript-config": "0.1.1",
-    "@yuva-devlab/eslint-config": "0.1.1"
+    "@yuva-devlab/typescript-config": "0.1.1"
+  },
+  "publishConfig": {
+    "access": "public"
   },
   "scripts": {
     "build": "tsup",

package/styles/preset.css

@@ -221,6 +221,17 @@
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
 
+  /* ── VitalAI Clinical & Performance Telemetry Tokens ───────────── */
+  --color-vital: var(--vital);
+  --color-vital-foreground: var(--vital-foreground);
+  --color-calories: var(--calories);
+  --color-protein: var(--protein);
+  --color-carbs: var(--carbs);
+  --color-fats: var(--fats);
+  --color-water: var(--water);
+  --color-glass: var(--glass);
+  --color-glass-border: var(--glass-border);
+
   /* ── Component Control Dimensions ─────────────────────────────────── */
   --height-control-xs: var(--control-height-xs, 1.75rem);
   --height-control-sm: var(--control-height-sm, 2rem);

package/styles/styles.css

@@ -10,3 +10,6 @@
 /* ── Brand Scoped Themes ─────────────────────────────────────────────────── */
 @import "./themes/finai.css";
 @import "./themes/orchestrai.css";
+@import "./themes/portal.css";
+@import "./themes/logs.css";
+@import "./themes/vitalai.css";

package/styles/themes/logs.css

@@ -0,0 +1,137 @@
+/**
+ * DevLab Logs Theme — High-Density Observability & Telemetry Console Palette
+ * Modern OKLCH color spaces optimized for real-time distributed log streaming,
+ * trace inspection, DuckDB SQL analytics, and Log-RAG root-cause analysis.
+ */
+
+/* ── DevLab Logs Theme — Light Mode ────────────────────────────────────────── */
+[data-brand="logs"],
+[data-theme="logs"],
+[data-theme="logs-light"],
+:root[data-brand="logs"],
+:root[data-theme="logs"],
+:root[data-theme="logs-light"] {
+  --radius: 0.5rem;
+
+  /* Surfaces */
+  --background: oklch(0.975 0.005 240);
+  --foreground: oklch(0.2 0.02 250);
+  --surface: oklch(0.95 0.008 240);
+  --surface-2: oklch(0.92 0.01 240);
+  --card: oklch(0.98 0.004 240);
+  --card-foreground: oklch(0.2 0.02 250);
+  --popover: oklch(0.97 0.006 240);
+  --popover-foreground: oklch(0.2 0.02 250);
+
+  /* Brand / Neon Green Accent */
+  --primary: oklch(0.62 0.18 150);
+  --primary-foreground: oklch(0.99 0.005 150);
+  --secondary: oklch(0.92 0.012 245);
+  --secondary-foreground: oklch(0.25 0.02 250);
+
+  /* Muted / Accent */
+  --muted: oklch(0.92 0.01 240);
+  --muted-foreground: oklch(0.5 0.02 245);
+  --accent: oklch(0.9 0.015 240);
+  --accent-foreground: oklch(0.2 0.02 250);
+
+  /* Severity & Status */
+  --destructive: oklch(0.6 0.22 25);
+  --destructive-foreground: oklch(0.99 0 0);
+  --fatal: oklch(0.58 0.24 350);
+  --error: oklch(0.6 0.22 25);
+  --warn: oklch(0.7 0.16 80);
+  --info: oklch(0.62 0.14 230);
+  --debug: oklch(0.52 0.04 250);
+  --ai: oklch(0.65 0.15 195);
+
+  /* Syntax Highlighting */
+  --syn-key: oklch(0.55 0.14 235);
+  --syn-str: oklch(0.55 0.16 145);
+  --syn-num: oklch(0.62 0.16 75);
+
+  /* Form & Interactive */
+  --border: oklch(0.85 0.01 240);
+  --input: oklch(0.85 0.01 240);
+  --ring: oklch(0.62 0.18 150 / 60%);
+
+  /* Visual Glow & Matrix Background */
+  --glow-primary:
+    0 0 0 1px color-mix(in oklab, var(--primary) 30%, transparent),
+    0 0 18px -4px color-mix(in oklab, var(--primary) 40%, transparent);
+  --grid-bg: radial-gradient(
+    circle at 1px 1px,
+    oklch(0 0 0 / 5%) 1px,
+    transparent 0
+  );
+}
+
+/* ── DevLab Logs Theme — Dark Mode ─────────────────────────────────────────── */
+[data-theme="logs-dark"],
+[data-brand="logs"][data-theme="dark"],
+[data-brand="logs"][data-theme="logs-dark"],
+[data-brand="logs"].dark,
+[data-brand="logs"] .dark,
+[data-theme="logs"] .dark,
+.dark [data-brand="logs"],
+.dark [data-theme="logs"],
+:root[data-theme="logs-dark"],
+:root[data-brand="logs"].dark,
+:root[data-brand="logs"][data-theme="dark"],
+:root[data-brand="logs"][data-theme="logs-dark"],
+:root.dark[data-brand="logs"],
+:root.dark[data-theme="logs"] {
+  --radius: 0.5rem;
+
+  /* Surfaces */
+  --background: oklch(0.155 0.012 250);
+  --foreground: oklch(0.93 0.01 240);
+  --surface: oklch(0.19 0.014 250);
+  --surface-2: oklch(0.225 0.016 250);
+  --card: oklch(0.19 0.014 250);
+  --card-foreground: oklch(0.93 0.01 240);
+  --popover: oklch(0.21 0.016 250);
+  --popover-foreground: oklch(0.93 0.01 240);
+
+  /* Brand / Neon Green Accent */
+  --primary: oklch(0.86 0.17 150);
+  --primary-foreground: oklch(0.17 0.03 150);
+  --secondary: oklch(0.25 0.016 250);
+  --secondary-foreground: oklch(0.93 0.01 240);
+
+  /* Muted / Accent */
+  --muted: oklch(0.24 0.014 250);
+  --muted-foreground: oklch(0.64 0.02 245);
+  --accent: oklch(0.27 0.02 250);
+  --accent-foreground: oklch(0.96 0.01 240);
+
+  /* Severity & Status */
+  --destructive: oklch(0.66 0.21 25);
+  --destructive-foreground: oklch(0.98 0 0);
+  --fatal: oklch(0.68 0.24 350);
+  --error: oklch(0.68 0.21 25);
+  --warn: oklch(0.82 0.16 80);
+  --info: oklch(0.76 0.12 230);
+  --debug: oklch(0.6 0.03 250);
+  --ai: oklch(0.78 0.14 195);
+
+  /* Syntax Highlighting */
+  --syn-key: oklch(0.78 0.12 230);
+  --syn-str: oklch(0.84 0.14 140);
+  --syn-num: oklch(0.82 0.15 70);
+
+  /* Form & Interactive */
+  --border: oklch(0.28 0.016 250);
+  --input: oklch(0.3 0.016 250);
+  --ring: oklch(0.86 0.17 150 / 60%);
+
+  /* Visual Glow & Matrix Background */
+  --glow-primary:
+    0 0 0 1px color-mix(in oklab, var(--primary) 40%, transparent),
+    0 0 24px -4px color-mix(in oklab, var(--primary) 50%, transparent);
+  --grid-bg: radial-gradient(
+    circle at 1px 1px,
+    oklch(1 0 0 / 4%) 1px,
+    transparent 0
+  );
+}

package/styles/themes/portal.css

@@ -0,0 +1,192 @@
+/**
+ * DevLab Portal Theme — Mint / Obsidian Palette
+ * Scoped OKLCH color tokens optimized for identity, IAM, security audit ledger, and control plane workflows.
+ * High-specificity scoped tokens for DevLab Portal applications.
+ */
+
+/* ── DevLab Portal Theme — Light Mode ──────────────────────────────────── */
+[data-brand="portal"],
+[data-theme="portal"],
+[data-theme="portal-light"],
+:root[data-brand="portal"],
+:root[data-theme="portal"],
+:root[data-theme="portal-light"] {
+  --radius: 0.5rem;
+
+  /* Surfaces */
+  --background: oklch(97.5% 0.003 170);
+  --foreground: oklch(22% 0.01 170);
+  --card: oklch(100% 0 0);
+  --card-foreground: oklch(22% 0.01 170);
+  --popover: oklch(100% 0 0);
+  --popover-foreground: oklch(22% 0.01 170);
+
+  /* Brand */
+  --primary: oklch(46% 0.115 170);
+  --primary-foreground: oklch(99% 0.005 170);
+  --secondary: oklch(94.5% 0.006 170);
+  --secondary-foreground: oklch(24% 0.01 170);
+
+  /* Muted / Accent */
+  --muted: oklch(94.5% 0.006 170);
+  --muted-foreground: oklch(51% 0.01 170);
+  --accent: oklch(92% 0.012 170);
+  --accent-foreground: oklch(22% 0.01 170);
+
+  /* Status */
+  --destructive: oklch(58% 0.19 25);
+  --destructive-foreground: oklch(99% 0 0);
+  --success: oklch(47% 0.13 166);
+  --success-foreground: oklch(99% 0 0);
+  --warning: oklch(63% 0.13 75);
+  --warning-foreground: oklch(20% 0.03 75);
+  --info: oklch(72% 0.13 260);
+  --info-foreground: oklch(99% 0 0);
+
+  /* Form / Ring */
+  --border: oklch(88% 0.007 170);
+  --input: oklch(88% 0.007 170);
+  --ring: oklch(46% 0.115 170);
+
+  /* Palette Accents */
+  --mint: oklch(72% 0.15 163);
+  --blue: oklch(72% 0.13 260);
+  --amber: oklch(78% 0.14 75);
+  --rose: oklch(73% 0.15 15);
+  --teal: oklch(74% 0.11 190);
+
+  /* Glass / Surface Tokens */
+  --surface: oklch(100% 0 0 / 80%);
+  --surface-2: oklch(96% 0.004 170);
+  --overlay: oklch(10% 0 0 / 75%);
+  --shadow-panel: 0 8px 28px oklch(10% 0 0 / 0.12);
+
+  /* Navigation & Sidebar */
+  --sidebar: oklch(98% 0.003 170);
+  --sidebar-foreground: oklch(22% 0.01 170);
+  --sidebar-primary: oklch(46% 0.115 170);
+  --sidebar-primary-foreground: oklch(99% 0.005 170);
+  --sidebar-accent: oklch(94% 0.006 170);
+  --sidebar-accent-foreground: oklch(22% 0.01 170);
+  --sidebar-border: oklch(88% 0.007 170);
+  --sidebar-ring: oklch(46% 0.115 170);
+
+  /* Visual Data Telemetry (Charts) */
+  --chart-1: oklch(46% 0.115 170);
+  --chart-2: oklch(72% 0.13 260);
+  --chart-3: oklch(78% 0.14 75);
+  --chart-4: oklch(73% 0.15 15);
+  --chart-5: oklch(74% 0.11 190);
+
+  /* Sizing, Spacing & Layout Tokens */
+  --control-height-xs: 1.75rem;
+  --control-height-sm: 2rem;
+  --control-height-md: 2.25rem;
+  --control-height-lg: 2.5rem;
+  --control-height-xl: 3rem;
+
+  --icon-xs: 0.875rem;
+  --icon-sm: 1rem;
+  --icon-md: 1.25rem;
+  --icon-lg: 1.5rem;
+  --icon-xl: 2rem;
+
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+
+  --card-padding: var(--space-4);
+  --dialog-padding: var(--space-5);
+  --form-field-gap: var(--space-3);
+  --section-gap: var(--space-5);
+  --table-row-padding-x: var(--space-4);
+  --table-row-padding-y: var(--space-3);
+}
+
+/* ── DevLab Portal Theme — Dark Mode ─────────────────────────────────── */
+[data-theme="portal-dark"],
+[data-brand="portal"][data-theme="dark"],
+[data-brand="portal"][data-theme="portal-dark"],
+[data-brand="portal"].dark,
+[data-brand="portal"] .dark,
+[data-theme="portal"] .dark,
+.dark [data-brand="portal"],
+.dark [data-theme="portal"],
+:root[data-theme="portal-dark"],
+:root[data-brand="portal"].dark,
+:root[data-brand="portal"][data-theme="dark"],
+:root[data-brand="portal"][data-theme="portal-dark"],
+:root.dark[data-brand="portal"],
+:root.dark[data-theme="portal"] {
+  --radius: 0.5rem;
+
+  /* Surfaces */
+  --background: oklch(16% 0.005 170);
+  --foreground: oklch(94% 0.003 170);
+  --card: oklch(19.7% 0.005 170);
+  --card-foreground: oklch(94% 0.003 170);
+  --popover: oklch(19.7% 0.005 170);
+  --popover-foreground: oklch(94% 0.003 170);
+
+  /* Brand */
+  --primary: oklch(80% 0.13 165);
+  --primary-foreground: oklch(18% 0.035 165);
+  --secondary: oklch(23% 0.005 170);
+  --secondary-foreground: oklch(92% 0.005 170);
+
+  /* Muted / Accent */
+  --muted: oklch(23% 0.005 170);
+  --muted-foreground: oklch(62% 0.008 170);
+  --accent: oklch(26.5% 0.005 170);
+  --accent-foreground: oklch(94% 0.003 170);
+
+  /* Status */
+  --destructive: oklch(72% 0.16 25);
+  --destructive-foreground: oklch(17% 0.02 25);
+  --success: oklch(77% 0.14 165);
+  --success-foreground: oklch(18% 0.03 165);
+  --warning: oklch(80% 0.13 80);
+  --warning-foreground: oklch(20% 0.03 80);
+  --info: oklch(72% 0.13 260);
+  --info-foreground: oklch(18% 0.03 260);
+
+  /* Form / Ring */
+  --border: oklch(29% 0.005 170);
+  --input: oklch(29% 0.005 170);
+  --ring: oklch(80% 0.13 165);
+
+  /* Palette Accents */
+  --mint: oklch(72% 0.15 163);
+  --blue: oklch(72% 0.13 260);
+  --amber: oklch(78% 0.14 75);
+  --rose: oklch(73% 0.15 15);
+  --teal: oklch(74% 0.11 190);
+
+  /* Glass / Surface Tokens */
+  --surface: oklch(19.7% 0.005 170 / 80%);
+  --surface-2: oklch(23% 0.005 170);
+  --overlay: oklch(10% 0 0 / 75%);
+  --shadow-panel: 0 8px 28px oklch(10% 0 0 / 0.35);
+
+  /* Navigation & Sidebar */
+  --sidebar: oklch(17.5% 0.005 170);
+  --sidebar-foreground: oklch(94% 0.003 170);
+  --sidebar-primary: oklch(80% 0.13 165);
+  --sidebar-primary-foreground: oklch(18% 0.035 165);
+  --sidebar-accent: oklch(24% 0.005 170);
+  --sidebar-accent-foreground: oklch(94% 0.003 170);
+  --sidebar-border: oklch(29% 0.005 170);
+  --sidebar-ring: oklch(80% 0.13 165);
+
+  /* Visual Data Telemetry (Charts) */
+  --chart-1: oklch(80% 0.13 165);
+  --chart-2: oklch(72% 0.13 260);
+  --chart-3: oklch(78% 0.14 75);
+  --chart-4: oklch(73% 0.15 15);
+  --chart-5: oklch(74% 0.11 190);
+}

package/styles/themes/vitalai.css

@@ -0,0 +1,178 @@
+/**
+ * VitalAI Theme Preset — Clinical Porcelain & Bioluminescent Teal Palette
+ * Modern OKLCH color spaces optimized for high performance, clinical nutrition, and fitness intelligence.
+ * High-specificity scoped tokens for VitalAI applications.
+ */
+
+/* ── VitalAI Theme — Light Mode ─────────────────────────────────────────── */
+[data-brand="vitalai"],
+[data-theme="vitalai"],
+[data-theme="vitalai-light"],
+:root[data-brand="vitalai"],
+:root[data-theme="vitalai"],
+:root[data-theme="vitalai-light"] {
+  --radius: 1rem;
+
+  /* Surfaces */
+  --background: oklch(0.975 0.006 190);
+  --foreground: oklch(0.2 0.03 220);
+  --card: oklch(1 0 0 / 72%);
+  --card-foreground: oklch(0.2 0.03 220);
+  --popover: oklch(0.995 0.003 190);
+  --popover-foreground: oklch(0.2 0.03 220);
+
+  /* Brand Action */
+  --primary: oklch(0.52 0.11 185);
+  --primary-foreground: oklch(0.99 0.01 185);
+  --secondary: oklch(0.94 0.015 190);
+  --secondary-foreground: oklch(0.25 0.04 210);
+
+  /* Muted / Accent */
+  --muted: oklch(0.945 0.01 200);
+  --muted-foreground: oklch(0.5 0.025 220);
+  --accent: oklch(0.93 0.035 180);
+  --accent-foreground: oklch(0.3 0.07 185);
+
+  /* Status & Clinical Feedback */
+  --destructive: oklch(0.58 0.2 25);
+  --destructive-foreground: oklch(0.99 0 0);
+  --warning: oklch(0.72 0.16 70);
+  --warning-foreground: oklch(0.2 0.02 70);
+  --success: oklch(0.62 0.15 155);
+  --success-foreground: oklch(0.99 0 0);
+  --info: oklch(0.62 0.13 235);
+  --info-foreground: oklch(0.99 0 0);
+
+  /* Form & Interactive */
+  --border: oklch(0.2 0.03 220 / 9%);
+  --input: oklch(0.2 0.03 220 / 12%);
+  --ring: oklch(0.52 0.11 185);
+
+  /* Glassmorphism & Ambient Glow */
+  --glass: oklch(1 0 0 / 62%);
+  --glass-border: oklch(1 0 0 / 80%);
+  --glow: oklch(0.7 0.14 180 / 25%);
+  --glow-2: oklch(0.75 0.12 150 / 18%);
+  --shadow-glass:
+    0 1px 0 0 oklch(1 0 0 / 70%) inset,
+    0 10px 40px -12px oklch(0.3 0.05 210 / 18%);
+  --surface: oklch(1 0 0 / 70%);
+  --surface-2: oklch(0.975 0.005 190);
+  --overlay: oklch(0.975 0.006 190 / 80%);
+
+  /* Navigation & Sidebar */
+  --sidebar: oklch(0.99 0.004 190 / 70%);
+  --sidebar-foreground: oklch(0.25 0.03 220);
+  --sidebar-primary: oklch(0.52 0.11 185);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: oklch(0.93 0.035 180);
+  --sidebar-accent-foreground: oklch(0.3 0.07 185);
+  --sidebar-border: oklch(0.2 0.03 220 / 8%);
+  --sidebar-ring: oklch(0.52 0.11 185);
+
+  /* ── VitalAI Clinical Telemetry & Macro Tokens ───────────────────────── */
+  --vital: oklch(0.62 0.15 160);
+  --vital-foreground: oklch(0.99 0 0);
+  --calories: oklch(0.66 0.17 45);
+  --protein: oklch(0.55 0.13 185);
+  --carbs: oklch(0.7 0.15 85);
+  --fats: oklch(0.6 0.16 350);
+  --water: oklch(0.62 0.13 235);
+
+  /* Visual Data Charts */
+  --chart-1: var(--protein);
+  --chart-2: var(--carbs);
+  --chart-3: var(--fats);
+  --chart-4: var(--calories);
+  --chart-5: var(--water);
+}
+
+/* ── VitalAI Theme — Dark Mode ────────────────────────────────────────── */
+[data-theme="vitalai-dark"],
+[data-brand="vitalai"][data-theme="dark"],
+[data-brand="vitalai"][data-theme="vitalai-dark"],
+[data-brand="vitalai"].dark,
+[data-brand="vitalai"] .dark,
+[data-theme="vitalai"] .dark,
+.dark [data-brand="vitalai"],
+.dark [data-theme="vitalai"],
+:root[data-theme="vitalai-dark"],
+:root[data-brand="vitalai"].dark,
+:root[data-brand="vitalai"][data-theme="dark"],
+:root[data-brand="vitalai"][data-theme="vitalai-dark"],
+:root.dark[data-brand="vitalai"],
+:root.dark[data-theme="vitalai"] {
+  --radius: 1rem;
+
+  /* Surfaces */
+  --background: oklch(0.155 0.018 230);
+  --foreground: oklch(0.95 0.01 200);
+  --card: oklch(0.22 0.02 225 / 60%);
+  --card-foreground: oklch(0.95 0.01 200);
+  --popover: oklch(0.2 0.02 225);
+  --popover-foreground: oklch(0.95 0.01 200);
+
+  /* Brand Action */
+  --primary: oklch(0.8 0.13 180);
+  --primary-foreground: oklch(0.18 0.03 210);
+  --secondary: oklch(0.26 0.02 225);
+  --secondary-foreground: oklch(0.92 0.01 200);
+
+  /* Muted / Accent */
+  --muted: oklch(0.25 0.018 225);
+  --muted-foreground: oklch(0.68 0.02 210);
+  --accent: oklch(0.3 0.05 190);
+  --accent-foreground: oklch(0.88 0.1 180);
+
+  /* Status & Clinical Feedback */
+  --destructive: oklch(0.68 0.19 22);
+  --destructive-foreground: oklch(0.99 0 0);
+  --warning: oklch(0.8 0.15 75);
+  --warning-foreground: oklch(0.15 0.02 75);
+  --success: oklch(0.78 0.16 155);
+  --success-foreground: oklch(0.15 0.02 230);
+  --info: oklch(0.74 0.13 235);
+  --info-foreground: oklch(0.15 0.02 230);
+
+  /* Form & Interactive */
+  --border: oklch(1 0 0 / 8%);
+  --input: oklch(1 0 0 / 12%);
+  --ring: oklch(0.8 0.13 180);
+
+  /* Glassmorphism & Ambient Glow */
+  --glass: oklch(0.24 0.02 225 / 55%);
+  --glass-border: oklch(1 0 0 / 9%);
+  --glow: oklch(0.7 0.14 180 / 22%);
+  --glow-2: oklch(0.6 0.14 260 / 16%);
+  --shadow-glass:
+    0 1px 0 0 oklch(1 0 0 / 5%) inset, 0 20px 50px -20px oklch(0 0 0 / 60%);
+  --surface: oklch(0.22 0.02 225 / 70%);
+  --surface-2: oklch(0.25 0.02 225);
+  --overlay: oklch(0.12 0.018 230 / 80%);
+
+  /* Navigation & Sidebar */
+  --sidebar: oklch(0.18 0.02 228 / 70%);
+  --sidebar-foreground: oklch(0.9 0.01 200);
+  --sidebar-primary: oklch(0.8 0.13 180);
+  --sidebar-primary-foreground: oklch(0.18 0.03 210);
+  --sidebar-accent: oklch(0.28 0.04 195);
+  --sidebar-accent-foreground: oklch(0.9 0.1 180);
+  --sidebar-border: oklch(1 0 0 / 6%);
+  --sidebar-ring: oklch(0.8 0.13 180);
+
+  /* ── VitalAI Clinical Telemetry & Macro Tokens ───────────────────────── */
+  --vital: oklch(0.82 0.16 160);
+  --vital-foreground: oklch(0.18 0.03 210);
+  --calories: oklch(0.76 0.16 50);
+  --protein: oklch(0.8 0.13 180);
+  --carbs: oklch(0.85 0.14 90);
+  --fats: oklch(0.74 0.16 350);
+  --water: oklch(0.74 0.13 235);
+
+  /* Visual Data Charts */
+  --chart-1: var(--protein);
+  --chart-2: var(--carbs);
+  --chart-3: var(--fats);
+  --chart-4: var(--calories);
+  --chart-5: var(--water);
+}