@yuva-devlab/tokens 1.2.0 → 1.3.1

package/README.md

@@ -1,21 +1,114 @@
-# @yuva-devlab/tokens
+# 🎨 @yuva-devlab/tokens
 
-Design tokens, color themes, and Tailwind CSS 4 preset bridge for the Yuva DevLab ecosystem.
+[![npm version](https://img.shields.io/npm/v/@yuva-devlab/tokens.svg)](https://www.npmjs.com/package/@yuva-devlab/tokens)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+[![Tailwind CSS 4](https://img.shields.io/badge/Tailwind%20CSS-v4.x-38bdf8.svg)](https://tailwindcss.com)
+
+> Core design token engine, OKLCH color palettes, typography scales, responsive density profiles, and Tailwind CSS 4 preset bridge for the DevLab ecosystem.
+
+---
+
+## Features
+
+- 🌈 **Modern OKLCH Color Space** - Perceptually uniform, wide-gamut color scales optimized for high-dynamic displays.
+- ⚡ **Zero-Runtime CSS Variables** - Pure CSS custom properties with zero JavaScript runtime overhead.
+- 🏷️ **Multi-Brand Theme Architecture** - Scoped brand theming for OrchestrAI, VitalAI, FinAI, Logs, and Portal.
+- 📐 **Density & Geometry Controls** - Brand-aware control heights, padding tokens, border radii, and typography scaling.
+- 🌉 **Tailwind CSS 4 Bridge** - Native `@theme` declarations providing seamless utility class integration.
+- 📦 **Typed Metadata Exports** - Full TypeScript contracts for programmatic brand discovery and switching.
+
+---
 
 ## Installation
 
 ```bash
+# pnpm (recommended)
 pnpm add @yuva-devlab/tokens
+
+# npm
+npm install @yuva-devlab/tokens
+
+# yarn
+yarn add @yuva-devlab/tokens
 ```
 
+---
+
 ## Usage
 
-### Tailwind CSS 4 Preset
+### 1. Tailwind CSS 4 Integration
 
-In your root stylesheet:
+Import the preset and your chosen brand theme in your root CSS file (e.g. `globals.css` or `app.css`):
 
 ```css
 @import "tailwindcss";
 @import "@yuva-devlab/tokens/preset.css";
 @import "@yuva-devlab/tokens/themes/orchestrai.css";
 ```
+
+### 2. Available Brand Themes
+
+Import any brand theme stylesheet from `@yuva-devlab/tokens/themes/*`:
+
+| Brand Theme       | Import Path                                 | Signature Aesthetic                               |
+| :---------------- | :------------------------------------------ | :------------------------------------------------ |
+| **OrchestrAI**    | `@yuva-devlab/tokens/themes/orchestrai.css` | Midnight Neon Violet (`oklch(0.65 0.24 285)`)     |
+| **VitalAI**       | `@yuva-devlab/tokens/themes/vitalai.css`    | Athletic Volt Kinetic (`oklch(0.93 0.23 125)`)    |
+| **FinAI**         | `@yuva-devlab/tokens/themes/finai.css`      | High-Finance Emerald (`oklch(0.68 0.2 155)`)      |
+| **DevLab Logs**   | `@yuva-devlab/tokens/themes/logs.css`       | High-Density Matrix Amber (`oklch(0.78 0.18 75)`) |
+| **DevLab Portal** | `@yuva-devlab/tokens/themes/portal.css`     | Enterprise Modern Indigo (`oklch(0.62 0.22 260)`) |
+
+---
+
+## Dynamic Brand Switching
+
+Themes are scoped using `data-brand` and `data-theme` HTML attributes:
+
+```html
+<!-- VitalAI in Dark Mode -->
+<html data-brand="vitalai" class="dark">
+  <body>
+    ...
+  </body>
+</html>
+```
+
+---
+
+## TypeScript Brand Metadata
+
+For programmatic brand switching, `@yuva-devlab/tokens` exports brand constants and density metadata:
+
+```typescript
+import { BRAND_THEMES, BRAND_PROFILES } from "@yuva-devlab/tokens";
+
+console.log(BRAND_THEMES);
+// ["orchestrai", "vitalai", "finai", "logs", "portal"]
+
+console.log(BRAND_PROFILES.vitalai);
+// {
+//   name: "VitalAI",
+//   primary: "oklch(0.93 0.23 125)",
+//   fontFamily: "Barlow Condensed, Inter, sans-serif",
+//   density: "athletic"
+// }
+```
+
+---
+
+## Token Specifications
+
+Every theme defines a comprehensive set of semantic CSS custom properties:
+
+- **Surfaces**: `--background`, `--foreground`, `--card`, `--popover`, `--surface`, `--surface-2`
+- **Actions**: `--primary`, `--primary-foreground`, `--secondary`, `--accent`, `--muted`
+- **Feedback**: `--destructive`, `--warning`, `--success`, `--info`
+- **Geometry**: `--radius`, `--control-height-xs` to `--control-height-xl`
+- **Spacing**: `--space-1` to `--space-10`
+- **Glassmorphism**: `--glass`, `--glass-border`, `--shadow-glass`, `--glow`
+
+---
+
+## License
+
+MIT © [Yuva DevLab](https://github.com/yuvadevlab)

package/dist/index.cjs

@@ -1,28 +1,64 @@
 'use strict';
 
 // src/index.ts
-var THEMES = ["orchestrai", "finai", "portal", "logs"];
+var THEMES = [
+  "orchestrai",
+  "finai",
+  "portal",
+  "logs",
+  "vitalai"
+];
 var BRAND_MODES = ["light", "dark"];
 var THEME_CONFIGS = {
   orchestrai: {
     name: "orchestrai",
     defaultMode: "dark",
-    label: "OrchestrAI"
+    label: "OrchestrAI",
+    fontSans: '"Manrope", sans-serif',
+    fontDisplay: '"Sora", sans-serif',
+    fontMono: '"JetBrains Mono", monospace',
+    radius: "0.75rem",
+    density: "standard"
   },
   finai: {
     name: "finai",
     defaultMode: "dark",
-    label: "FinAI"
+    label: "FinAI",
+    fontSans: '"Inter", sans-serif',
+    fontDisplay: '"Inter", sans-serif',
+    fontMono: '"JetBrains Mono", monospace',
+    radius: "0.75rem",
+    density: "spacious"
   },
   portal: {
     name: "portal",
     defaultMode: "dark",
-    label: "DevLab Portal"
+    label: "DevLab Portal",
+    fontSans: '"Inter", sans-serif',
+    fontDisplay: '"Inter", sans-serif',
+    fontMono: '"JetBrains Mono", monospace',
+    radius: "0.5rem",
+    density: "standard"
   },
   logs: {
     name: "logs",
     defaultMode: "dark",
-    label: "DevLab Logs"
+    label: "DevLab Logs",
+    fontSans: '"Space Grotesk", sans-serif',
+    fontDisplay: '"Space Grotesk", sans-serif',
+    fontMono: '"JetBrains Mono", monospace',
+    radius: "0.375rem",
+    density: "high"
+  },
+  vitalai: {
+    name: "vitalai",
+    defaultMode: "dark",
+    label: "VitalAI",
+    fontSans: '"Inter", sans-serif',
+    fontDisplay: '"Barlow Condensed", "Inter", sans-serif',
+    fontMono: '"JetBrains Mono", monospace',
+    radius: "1rem",
+    density: "spacious"
   }
 };
 

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;AAKO,IAAM,MAAA,GAAS,CAAC,YAAA,EAAc,OAAA,EAAS,UAAU,MAAM;AAGvD,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;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\", \"portal\", \"logs\"] 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} 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;AAyBpC,IAAM,aAAA,GAAgD;AAAA,EAC3D,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,YAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO,YAAA;AAAA,IACP,QAAA,EAAU,uBAAA;AAAA,IACV,WAAA,EAAa,oBAAA;AAAA,IACb,QAAA,EAAU,6BAAA;AAAA,IACV,MAAA,EAAQ,SAAA;AAAA,IACR,OAAA,EAAS;AAAA,GACX;AAAA,EACA,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,OAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO,OAAA;AAAA,IACP,QAAA,EAAU,qBAAA;AAAA,IACV,WAAA,EAAa,qBAAA;AAAA,IACb,QAAA,EAAU,6BAAA;AAAA,IACV,MAAA,EAAQ,SAAA;AAAA,IACR,OAAA,EAAS;AAAA,GACX;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM,QAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO,eAAA;AAAA,IACP,QAAA,EAAU,qBAAA;AAAA,IACV,WAAA,EAAa,qBAAA;AAAA,IACb,QAAA,EAAU,6BAAA;AAAA,IACV,MAAA,EAAQ,QAAA;AAAA,IACR,OAAA,EAAS;AAAA,GACX;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,IAAA,EAAM,MAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO,aAAA;AAAA,IACP,QAAA,EAAU,6BAAA;AAAA,IACV,WAAA,EAAa,6BAAA;AAAA,IACb,QAAA,EAAU,6BAAA;AAAA,IACV,MAAA,EAAQ,UAAA;AAAA,IACR,OAAA,EAAS;AAAA,GACX;AAAA,EACA,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,SAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO,SAAA;AAAA,IACP,QAAA,EAAU,qBAAA;AAAA,IACV,WAAA,EAAa,yCAAA;AAAA,IACb,QAAA,EAAU,6BAAA;AAAA,IACV,MAAA,EAAQ,MAAA;AAAA,IACR,OAAA,EAAS;AAAA;AAEb","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\n/**\n * Brand Theme Configuration Object Interface.\n */\nexport interface ThemeConfig {\n  /** Identifier of the theme */\n  readonly name: ThemeName;\n  /** Default mode (light/dark) */\n  readonly defaultMode: BrandMode;\n  /** Human-readable brand label */\n  readonly label: string;\n  /** Primary body font stack */\n  readonly fontSans: string;\n  /** Display/Heading font stack */\n  readonly fontDisplay: string;\n  /** Monospace code/terminal font stack */\n  readonly fontMono: string;\n  /** Corner radius token */\n  readonly radius: string;\n  /** Density profile of the brand */\n  readonly density: \"high\" | \"standard\" | \"spacious\";\n}\n\nexport const THEME_CONFIGS: Record<ThemeName, ThemeConfig> = {\n  orchestrai: {\n    name: \"orchestrai\",\n    defaultMode: \"dark\",\n    label: \"OrchestrAI\",\n    fontSans: '\"Manrope\", sans-serif',\n    fontDisplay: '\"Sora\", sans-serif',\n    fontMono: '\"JetBrains Mono\", monospace',\n    radius: \"0.75rem\",\n    density: \"standard\",\n  },\n  finai: {\n    name: \"finai\",\n    defaultMode: \"dark\",\n    label: \"FinAI\",\n    fontSans: '\"Inter\", sans-serif',\n    fontDisplay: '\"Inter\", sans-serif',\n    fontMono: '\"JetBrains Mono\", monospace',\n    radius: \"0.75rem\",\n    density: \"spacious\",\n  },\n  portal: {\n    name: \"portal\",\n    defaultMode: \"dark\",\n    label: \"DevLab Portal\",\n    fontSans: '\"Inter\", sans-serif',\n    fontDisplay: '\"Inter\", sans-serif',\n    fontMono: '\"JetBrains Mono\", monospace',\n    radius: \"0.5rem\",\n    density: \"standard\",\n  },\n  logs: {\n    name: \"logs\",\n    defaultMode: \"dark\",\n    label: \"DevLab Logs\",\n    fontSans: '\"Space Grotesk\", sans-serif',\n    fontDisplay: '\"Space Grotesk\", sans-serif',\n    fontMono: '\"JetBrains Mono\", monospace',\n    radius: \"0.375rem\",\n    density: \"high\",\n  },\n  vitalai: {\n    name: \"vitalai\",\n    defaultMode: \"dark\",\n    label: \"VitalAI\",\n    fontSans: '\"Inter\", sans-serif',\n    fontDisplay: '\"Barlow Condensed\", \"Inter\", sans-serif',\n    fontMono: '\"JetBrains Mono\", monospace',\n    radius: \"1rem\",\n    density: \"spacious\",\n  },\n} as const;\n"]}

package/dist/index.d.cts

@@ -2,14 +2,30 @@
  * @file src/index.ts
  * @description Yuva DevLab Design System — Design Tokens & Theme Definitions.
  */
-declare const THEMES: readonly ["orchestrai", "finai", "portal", "logs"];
+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];
+/**
+ * Brand Theme Configuration Object Interface.
+ */
 interface ThemeConfig {
+    /** Identifier of the theme */
     readonly name: ThemeName;
+    /** Default mode (light/dark) */
     readonly defaultMode: BrandMode;
+    /** Human-readable brand label */
     readonly label: string;
+    /** Primary body font stack */
+    readonly fontSans: string;
+    /** Display/Heading font stack */
+    readonly fontDisplay: string;
+    /** Monospace code/terminal font stack */
+    readonly fontMono: string;
+    /** Corner radius token */
+    readonly radius: string;
+    /** Density profile of the brand */
+    readonly density: "high" | "standard" | "spacious";
 }
 declare const THEME_CONFIGS: Record<ThemeName, ThemeConfig>;
 

package/dist/index.d.ts

@@ -2,14 +2,30 @@
  * @file src/index.ts
  * @description Yuva DevLab Design System — Design Tokens & Theme Definitions.
  */
-declare const THEMES: readonly ["orchestrai", "finai", "portal", "logs"];
+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];
+/**
+ * Brand Theme Configuration Object Interface.
+ */
 interface ThemeConfig {
+    /** Identifier of the theme */
     readonly name: ThemeName;
+    /** Default mode (light/dark) */
     readonly defaultMode: BrandMode;
+    /** Human-readable brand label */
     readonly label: string;
+    /** Primary body font stack */
+    readonly fontSans: string;
+    /** Display/Heading font stack */
+    readonly fontDisplay: string;
+    /** Monospace code/terminal font stack */
+    readonly fontMono: string;
+    /** Corner radius token */
+    readonly radius: string;
+    /** Density profile of the brand */
+    readonly density: "high" | "standard" | "spacious";
 }
 declare const THEME_CONFIGS: Record<ThemeName, ThemeConfig>;
 

package/dist/index.js

@@ -1,26 +1,62 @@
 // src/index.ts
-var THEMES = ["orchestrai", "finai", "portal", "logs"];
+var THEMES = [
+  "orchestrai",
+  "finai",
+  "portal",
+  "logs",
+  "vitalai"
+];
 var BRAND_MODES = ["light", "dark"];
 var THEME_CONFIGS = {
   orchestrai: {
     name: "orchestrai",
     defaultMode: "dark",
-    label: "OrchestrAI"
+    label: "OrchestrAI",
+    fontSans: '"Manrope", sans-serif',
+    fontDisplay: '"Sora", sans-serif',
+    fontMono: '"JetBrains Mono", monospace',
+    radius: "0.75rem",
+    density: "standard"
   },
   finai: {
     name: "finai",
     defaultMode: "dark",
-    label: "FinAI"
+    label: "FinAI",
+    fontSans: '"Inter", sans-serif',
+    fontDisplay: '"Inter", sans-serif',
+    fontMono: '"JetBrains Mono", monospace',
+    radius: "0.75rem",
+    density: "spacious"
   },
   portal: {
     name: "portal",
     defaultMode: "dark",
-    label: "DevLab Portal"
+    label: "DevLab Portal",
+    fontSans: '"Inter", sans-serif',
+    fontDisplay: '"Inter", sans-serif',
+    fontMono: '"JetBrains Mono", monospace',
+    radius: "0.5rem",
+    density: "standard"
   },
   logs: {
     name: "logs",
     defaultMode: "dark",
-    label: "DevLab Logs"
+    label: "DevLab Logs",
+    fontSans: '"Space Grotesk", sans-serif',
+    fontDisplay: '"Space Grotesk", sans-serif',
+    fontMono: '"JetBrains Mono", monospace',
+    radius: "0.375rem",
+    density: "high"
+  },
+  vitalai: {
+    name: "vitalai",
+    defaultMode: "dark",
+    label: "VitalAI",
+    fontSans: '"Inter", sans-serif',
+    fontDisplay: '"Barlow Condensed", "Inter", sans-serif',
+    fontMono: '"JetBrains Mono", monospace',
+    radius: "1rem",
+    density: "spacious"
   }
 };
 

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";AAKO,IAAM,MAAA,GAAS,CAAC,YAAA,EAAc,OAAA,EAAS,UAAU,MAAM;AAGvD,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;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\", \"portal\", \"logs\"] 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} 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;AAyBpC,IAAM,aAAA,GAAgD;AAAA,EAC3D,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,YAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO,YAAA;AAAA,IACP,QAAA,EAAU,uBAAA;AAAA,IACV,WAAA,EAAa,oBAAA;AAAA,IACb,QAAA,EAAU,6BAAA;AAAA,IACV,MAAA,EAAQ,SAAA;AAAA,IACR,OAAA,EAAS;AAAA,GACX;AAAA,EACA,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,OAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO,OAAA;AAAA,IACP,QAAA,EAAU,qBAAA;AAAA,IACV,WAAA,EAAa,qBAAA;AAAA,IACb,QAAA,EAAU,6BAAA;AAAA,IACV,MAAA,EAAQ,SAAA;AAAA,IACR,OAAA,EAAS;AAAA,GACX;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM,QAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO,eAAA;AAAA,IACP,QAAA,EAAU,qBAAA;AAAA,IACV,WAAA,EAAa,qBAAA;AAAA,IACb,QAAA,EAAU,6BAAA;AAAA,IACV,MAAA,EAAQ,QAAA;AAAA,IACR,OAAA,EAAS;AAAA,GACX;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,IAAA,EAAM,MAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO,aAAA;AAAA,IACP,QAAA,EAAU,6BAAA;AAAA,IACV,WAAA,EAAa,6BAAA;AAAA,IACb,QAAA,EAAU,6BAAA;AAAA,IACV,MAAA,EAAQ,UAAA;AAAA,IACR,OAAA,EAAS;AAAA,GACX;AAAA,EACA,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,SAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO,SAAA;AAAA,IACP,QAAA,EAAU,qBAAA;AAAA,IACV,WAAA,EAAa,yCAAA;AAAA,IACb,QAAA,EAAU,6BAAA;AAAA,IACV,MAAA,EAAQ,MAAA;AAAA,IACR,OAAA,EAAS;AAAA;AAEb","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\n/**\n * Brand Theme Configuration Object Interface.\n */\nexport interface ThemeConfig {\n  /** Identifier of the theme */\n  readonly name: ThemeName;\n  /** Default mode (light/dark) */\n  readonly defaultMode: BrandMode;\n  /** Human-readable brand label */\n  readonly label: string;\n  /** Primary body font stack */\n  readonly fontSans: string;\n  /** Display/Heading font stack */\n  readonly fontDisplay: string;\n  /** Monospace code/terminal font stack */\n  readonly fontMono: string;\n  /** Corner radius token */\n  readonly radius: string;\n  /** Density profile of the brand */\n  readonly density: \"high\" | \"standard\" | \"spacious\";\n}\n\nexport const THEME_CONFIGS: Record<ThemeName, ThemeConfig> = {\n  orchestrai: {\n    name: \"orchestrai\",\n    defaultMode: \"dark\",\n    label: \"OrchestrAI\",\n    fontSans: '\"Manrope\", sans-serif',\n    fontDisplay: '\"Sora\", sans-serif',\n    fontMono: '\"JetBrains Mono\", monospace',\n    radius: \"0.75rem\",\n    density: \"standard\",\n  },\n  finai: {\n    name: \"finai\",\n    defaultMode: \"dark\",\n    label: \"FinAI\",\n    fontSans: '\"Inter\", sans-serif',\n    fontDisplay: '\"Inter\", sans-serif',\n    fontMono: '\"JetBrains Mono\", monospace',\n    radius: \"0.75rem\",\n    density: \"spacious\",\n  },\n  portal: {\n    name: \"portal\",\n    defaultMode: \"dark\",\n    label: \"DevLab Portal\",\n    fontSans: '\"Inter\", sans-serif',\n    fontDisplay: '\"Inter\", sans-serif',\n    fontMono: '\"JetBrains Mono\", monospace',\n    radius: \"0.5rem\",\n    density: \"standard\",\n  },\n  logs: {\n    name: \"logs\",\n    defaultMode: \"dark\",\n    label: \"DevLab Logs\",\n    fontSans: '\"Space Grotesk\", sans-serif',\n    fontDisplay: '\"Space Grotesk\", sans-serif',\n    fontMono: '\"JetBrains Mono\", monospace',\n    radius: \"0.375rem\",\n    density: \"high\",\n  },\n  vitalai: {\n    name: \"vitalai\",\n    defaultMode: \"dark\",\n    label: \"VitalAI\",\n    fontSans: '\"Inter\", sans-serif',\n    fontDisplay: '\"Barlow Condensed\", \"Inter\", sans-serif',\n    fontMono: '\"JetBrains Mono\", monospace',\n    radius: \"1rem\",\n    density: \"spacious\",\n  },\n} as const;\n"]}

package/dist/preset.css

@@ -96,6 +96,19 @@
   --section-gap: var(--space-5);
   --table-row-padding-x: var(--space-4);
   --table-row-padding-y: var(--space-3);
+
+  /* ── Typography Fallback Baseline ───────────────────────────────────── */
+  --theme-font-sans:
+    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --theme-font-display: var(--theme-font-sans);
+  --theme-font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --font-sans: var(--theme-font-sans);
+  --font-display: var(--theme-font-display);
+  --font-mono: var(--theme-font-mono);
+
+  --theme-font-size-root: 16px;
+  --theme-spacing: 0.25rem;
 }
 
 .dark,
@@ -158,9 +171,28 @@
   --chart-3: oklch(0.75 0.12 70);
   --chart-4: oklch(0.8 0.14 80);
   --chart-5: oklch(0.65 0.18 25);
+
+  /* ── Typography Fallback Baseline ───────────────────────────────────── */
+  --theme-font-sans:
+    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --theme-font-display: var(--theme-font-sans);
+  --theme-font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --font-sans: var(--theme-font-sans);
+  --font-display: var(--theme-font-display);
+  --font-mono: var(--theme-font-mono);
+
+  --theme-font-size-root: 16px;
+  --theme-spacing: 0.25rem;
 }
 
 @theme inline {
+  /* ── Typography & Spacing Tokens ────────────────────────────────── */
+  --font-sans: var(--font-sans);
+  --font-display: var(--font-display);
+  --font-mono: var(--font-mono);
+  --spacing: var(--theme-spacing, 0.25rem);
+
   /* ── Radii Mappings ─────────────────────────────────────────────── */
   --radius-sm: calc(var(--radius, 0.5rem) - 4px);
   --radius-md: calc(var(--radius, 0.5rem) - 2px);
@@ -221,6 +253,14 @@
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
 
+  /* ── VitalAI High-Performance Athletic & Kinetic Tokens ────────── */
+  --color-volt: var(--volt);
+  --color-cyan: var(--cyan);
+  --color-ember: var(--ember);
+  --color-slate-muscle: var(--slate-muscle);
+  --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

@@ -12,3 +12,4 @@
 @import "./themes/orchestrai.css";
 @import "./themes/portal.css";
 @import "./themes/logs.css";
+@import "./themes/vitalai.css";

package/dist/themes/finai.css

@@ -106,6 +106,20 @@
   --section-gap: var(--space-6);
   --table-row-padding-x: var(--space-6);
   --table-row-padding-y: var(--space-4);
+
+  /* ── FinAI Typography Tokens ─────────────────────────────────────────── */
+  --theme-font-sans:
+    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --theme-font-display:
+    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --theme-font-mono: "JetBrains Mono", ui-monospace, monospace;
+  --font-sans: var(--theme-font-sans);
+  --font-display: var(--theme-font-display);
+  --font-mono: var(--theme-font-mono);
+
+  /* ── Financial Wellness Scaling ──────────────────────────────────────── */
+  --theme-font-size-root: 16px;
+  --theme-spacing: 0.265rem;
 }
 
 /* ── FinAI Theme — Dark Mode ──────────────────────────────────────────── */
@@ -189,4 +203,47 @@
   --expense-foreground: var(--destructive-foreground);
   --investment: oklch(0.68 0.19 260);
   --investment-foreground: oklch(0.97 0.003 260);
+
+  /* ── Sizing, Spacing & Layout Tokens ───────────────────────────────────── */
+  --control-height-xs: 1.75rem;
+  --control-height-sm: 2rem;
+  --control-height-md: 2.375rem;
+  --control-height-lg: 2.75rem;
+  --control-height-xl: 3.25rem;
+
+  --icon-xs: 0.75rem;
+  --icon-sm: 0.875rem;
+  --icon-md: 1rem;
+  --icon-lg: 1.25rem;
+  --icon-xl: 1.5rem;
+
+  --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-5);
+  --dialog-padding: var(--space-6);
+  --form-field-gap: var(--space-4);
+  --section-gap: var(--space-6);
+  --table-row-padding-x: var(--space-6);
+  --table-row-padding-y: var(--space-4);
+
+  /* ── FinAI Typography Tokens ─────────────────────────────────────────── */
+  --theme-font-sans:
+    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --theme-font-display:
+    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --theme-font-mono: "JetBrains Mono", ui-monospace, monospace;
+  --font-sans: var(--theme-font-sans);
+  --font-display: var(--theme-font-display);
+  --font-mono: var(--theme-font-mono);
+
+  /* ── Financial Wellness Scaling ──────────────────────────────────────── */
+  --theme-font-size-root: 16px;
+  --theme-spacing: 0.265rem;
 }

package/dist/themes/logs.css

@@ -64,6 +64,48 @@
     oklch(0 0 0 / 5%) 1px,
     transparent 0
   );
+
+  /* ── DevLab Logs Typography Tokens ───────────────────────────────────── */
+  --theme-font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
+  --theme-font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
+  --theme-font-mono: "JetBrains Mono", ui-monospace, monospace;
+  --font-sans: var(--theme-font-sans);
+  --font-display: var(--theme-font-display);
+  --font-mono: var(--theme-font-mono);
+
+  /* ── High-Density Observability Scaling ──────────────────────────────── */
+  --theme-font-size-root: 14.5px;
+  --theme-spacing: 0.2rem;
+  --radius: 0.375rem;
+
+  /* ── Sizing, Spacing & Layout Tokens ─────────────────────────────────── */
+  --control-height-xs: 1.5rem;
+  --control-height-sm: 1.75rem;
+  --control-height-md: 2rem;
+  --control-height-lg: 2.25rem;
+  --control-height-xl: 2.5rem;
+
+  --icon-xs: 0.75rem;
+  --icon-sm: 0.875rem;
+  --icon-md: 1rem;
+  --icon-lg: 1.125rem;
+  --icon-xl: 1.25rem;
+
+  --space-1: 0.125rem;
+  --space-2: 0.25rem;
+  --space-3: 0.5rem;
+  --space-4: 0.75rem;
+  --space-5: 1rem;
+  --space-6: 1.25rem;
+  --space-8: 1.5rem;
+  --space-10: 2rem;
+
+  --card-padding: var(--space-3);
+  --dialog-padding: var(--space-4);
+  --form-field-gap: var(--space-2);
+  --section-gap: var(--space-4);
+  --table-row-padding-x: var(--space-3);
+  --table-row-padding-y: var(--space-2);
 }
 
 /* ── DevLab Logs Theme — Dark Mode ─────────────────────────────────────────── */
@@ -134,4 +176,46 @@
     oklch(1 0 0 / 4%) 1px,
     transparent 0
   );
+
+  /* ── DevLab Logs Typography Tokens ───────────────────────────────────── */
+  --theme-font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
+  --theme-font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
+  --theme-font-mono: "JetBrains Mono", ui-monospace, monospace;
+  --font-sans: var(--theme-font-sans);
+  --font-display: var(--theme-font-display);
+  --font-mono: var(--theme-font-mono);
+
+  /* ── High-Density Observability Scaling ──────────────────────────────── */
+  --theme-font-size-root: 14.5px;
+  --theme-spacing: 0.2rem;
+  --radius: 0.375rem;
+
+  /* ── Sizing, Spacing & Layout Tokens ─────────────────────────────────── */
+  --control-height-xs: 1.5rem;
+  --control-height-sm: 1.75rem;
+  --control-height-md: 2rem;
+  --control-height-lg: 2.25rem;
+  --control-height-xl: 2.5rem;
+
+  --icon-xs: 0.75rem;
+  --icon-sm: 0.875rem;
+  --icon-md: 1rem;
+  --icon-lg: 1.125rem;
+  --icon-xl: 1.25rem;
+
+  --space-1: 0.125rem;
+  --space-2: 0.25rem;
+  --space-3: 0.5rem;
+  --space-4: 0.75rem;
+  --space-5: 1rem;
+  --space-6: 1.25rem;
+  --space-8: 1.5rem;
+  --space-10: 2rem;
+
+  --card-padding: var(--space-3);
+  --dialog-padding: var(--space-4);
+  --form-field-gap: var(--space-2);
+  --section-gap: var(--space-4);
+  --table-row-padding-x: var(--space-3);
+  --table-row-padding-y: var(--space-2);
 }

package/dist/themes/orchestrai.css

@@ -98,6 +98,19 @@
   --section-gap: var(--space-5);
   --table-row-padding-x: var(--space-4);
   --table-row-padding-y: var(--space-3);
+
+  /* ── OrchestrAI Typography Tokens ─────────────────────────────────────── */
+  --theme-font-sans:
+    "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --theme-font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
+  --theme-font-mono: "JetBrains Mono", ui-monospace, monospace;
+  --font-sans: var(--theme-font-sans);
+  --font-display: var(--theme-font-display);
+  --font-mono: var(--theme-font-mono);
+
+  /* ── Balanced Cybernetic Scaling ─────────────────────────────────────── */
+  --theme-font-size-root: 16px;
+  --theme-spacing: 0.25rem;
 }
 
 /* ── OrchestrAI Theme — Dark Mode ──────────────────────────────────────── */
@@ -202,4 +215,17 @@
   --section-gap: var(--space-5);
   --table-row-padding-x: var(--space-4);
   --table-row-padding-y: var(--space-3);
+
+  /* ── OrchestrAI Typography Tokens ─────────────────────────────────────── */
+  --theme-font-sans:
+    "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --theme-font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
+  --theme-font-mono: "JetBrains Mono", ui-monospace, monospace;
+  --font-sans: var(--theme-font-sans);
+  --font-display: var(--theme-font-display);
+  --font-mono: var(--theme-font-mono);
+
+  /* ── Balanced Cybernetic Scaling ─────────────────────────────────────── */
+  --theme-font-size-root: 16px;
+  --theme-spacing: 0.25rem;
 }