@yuva-devlab/tokens 0.1.2 → 1.1.0

package/dist/root.css

@@ -0,0 +1,91 @@
+/**
+ * @file src/styles/root.css
+ * @description Baseline normalizations, CSS variables, and interactive element resets.
+ * Pure CSS — zero Tailwind dependency.
+ */
+
+@layer dl-base {
+  /* ── Interactive Cursors ───────────────────────────────────────────── */
+  button,
+  a,
+  select,
+  summary,
+  [role="button"],
+  [role="tab"],
+  [type="button"],
+  [type="submit"],
+  [type="reset"] {
+    cursor: pointer;
+  }
+
+  button:disabled,
+  a[aria-disabled="true"],
+  [aria-disabled="true"],
+  [type="button"]:disabled,
+  [type="submit"]:disabled {
+    cursor: not-allowed;
+  }
+
+  /* ── Interactive Focus Normalization ───────────────────────────────── */
+  :focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  /* ── Text Selection ────────────────────────────────────────────────── */
+  ::selection {
+    background: color-mix(in oklab, var(--primary) 28%, transparent);
+  }
+
+  /* ── Scrollbars ────────────────────────────────────────────────────── */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border) transparent;
+  }
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 9999px;
+  }
+
+  /* ── Form Typography Inheritance ───────────────────────────────────── */
+  button,
+  input,
+  select,
+  textarea {
+    letter-spacing: 0;
+    font-family: inherit;
+  }
+
+  /*
+   * Radix Select — Item relative positioning anchor.
+   * Ensures stacking context for the indicator (absolute right-2).
+   */
+  [role="option"] {
+    position: relative;
+  }
+
+  /*
+   * Breadcrumb Separator SVG Sizing
+   */
+  [data-slot="breadcrumb-separator"] svg {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  /* ── Reduced Motion ────────────────────────────────────────────────── */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}

package/dist/styles.css

@@ -0,0 +1,12 @@
+/**
+ * @file src/styles/styles.css
+ * @description Master stylesheet for @yuva-devlab/tokens.
+ * Contains base CSS custom properties, theme definitions, and design tokens.
+ */
+
+/* ── Base Normalization & Design Tokens ──────────────────────────────────── */
+@import "./root.css";
+
+/* ── Brand Scoped Themes ─────────────────────────────────────────────────── */
+@import "./themes/finai.css";
+@import "./themes/orchestrai.css";

package/dist/themes/finai.css

@@ -0,0 +1,114 @@
+/**
+ * FinAI Theme Preset — Emerald / Forest Green Palette
+ * Modern OKLCH color spaces optimized for trust, clarity, and financial wellness.
+ */
+
+:root,
+[data-brand="finai"],
+[data-theme="finai"] {
+  --radius: 0.75rem;
+  --background: oklch(0.985 0.001 247);
+  --foreground: oklch(0.21 0.02 260);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.21 0.02 260);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.21 0.02 260);
+  --primary: oklch(0.63 0.14 156);
+  --primary-foreground: oklch(0.99 0.005 150);
+  --secondary: oklch(0.965 0.003 260);
+  --secondary-foreground: oklch(0.21 0.02 260);
+  --muted: oklch(0.965 0.003 260);
+  --muted-foreground: oklch(0.52 0.015 260);
+  --accent: oklch(0.95 0.03 156);
+  --accent-foreground: oklch(0.35 0.09 156);
+  --destructive: oklch(0.6 0.22 25);
+  --destructive-foreground: oklch(0.99 0.005 0);
+  --warning: oklch(0.75 0.14 80);
+  --warning-foreground: oklch(0.2 0.02 80);
+  --border: oklch(0.92 0.005 260);
+  --input: oklch(0.92 0.005 260);
+  --ring: oklch(0.63 0.14 156);
+  --sidebar: oklch(1 0 0);
+  --sidebar-foreground: oklch(0.21 0.02 260);
+  --sidebar-primary: oklch(0.63 0.14 156);
+  --sidebar-primary-foreground: oklch(0.99 0.005 150);
+  --sidebar-accent: oklch(0.95 0.03 156);
+  --sidebar-accent-foreground: oklch(0.35 0.09 156);
+  --sidebar-border: oklch(0.93 0.005 260);
+  --sidebar-ring: oklch(0.63 0.14 156);
+  --chart-1: oklch(0.63 0.14 156);
+  --chart-2: oklch(0.55 0.02 260);
+  --chart-3: oklch(0.75 0.04 156);
+  --chart-4: oklch(0.7 0.15 60);
+  --chart-5: oklch(0.6 0.18 25);
+
+  /* ── 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);
+}
+
+.dark,
+[data-theme="dark"],
+[data-theme="finai-dark"],
+[data-brand="finai"].dark,
+[data-brand="finai"][data-theme="dark"] {
+  --background: oklch(0.16 0.015 260);
+  --foreground: oklch(0.97 0.003 260);
+  --card: oklch(0.2 0.015 260);
+  --card-foreground: oklch(0.97 0.003 260);
+  --popover: oklch(0.2 0.015 260);
+  --popover-foreground: oklch(0.97 0.003 260);
+  --primary: oklch(0.7 0.15 156);
+  --primary-foreground: oklch(0.15 0.02 260);
+  --secondary: oklch(0.25 0.015 260);
+  --secondary-foreground: oklch(0.97 0.003 260);
+  --muted: oklch(0.25 0.015 260);
+  --muted-foreground: oklch(0.7 0.01 260);
+  --accent: oklch(0.3 0.05 156);
+  --accent-foreground: oklch(0.9 0.08 156);
+  --destructive: oklch(0.65 0.2 25);
+  --destructive-foreground: oklch(0.97 0.003 0);
+  --warning: oklch(0.75 0.14 80);
+  --warning-foreground: oklch(0.15 0.02 80);
+  --border: oklch(1 0 0 / 8%);
+  --input: oklch(1 0 0 / 12%);
+  --ring: oklch(0.7 0.15 156);
+  --sidebar: oklch(0.18 0.015 260);
+  --sidebar-foreground: oklch(0.97 0.003 260);
+  --sidebar-primary: oklch(0.7 0.15 156);
+  --sidebar-primary-foreground: oklch(0.15 0.02 260);
+  --sidebar-accent: oklch(0.26 0.03 156);
+  --sidebar-accent-foreground: oklch(0.97 0.003 260);
+  --sidebar-border: oklch(1 0 0 / 8%);
+  --sidebar-ring: oklch(0.7 0.15 156);
+  --chart-1: oklch(0.7 0.15 156);
+  --chart-2: oklch(0.6 0.02 260);
+  --chart-3: oklch(0.8 0.04 156);
+  --chart-4: oklch(0.75 0.15 60);
+  --chart-5: oklch(0.65 0.2 25);
+}

package/dist/themes/orchestrai.css

@@ -0,0 +1,197 @@
+/**
+ * OrchestrAI Theme — Lovable UI Blue/Teal Palette
+ *
+ * Derived from orchestrai-src/src/styles.css (the official Lovable-sourced design).
+ * Uses OKLCH color space with both light and dark mode support.
+ * Hue axis: ~195–250 (blue-teal spectrum), primary at hue 205 (light) / 195 (dark).
+ * Fonts are intentionally NOT set here; they are managed by the consuming app
+ * (Manrope / Sora / JetBrains Mono for the robotic-technical feel).
+ */
+
+/* ── Light Mode ────────────────────────────────────────────────────────── */
+:root,
+[data-brand="orchestrai"],
+[data-theme="orchestrai"] {
+  --radius: 0.75rem;
+
+  /* Surfaces */
+  --background: oklch(0.985 0.004 210);
+  --foreground: oklch(0.21 0.02 245);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.21 0.02 245);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.21 0.02 245);
+
+  /* Brand */
+  --primary: oklch(0.58 0.126 205);
+  --primary-foreground: oklch(0.99 0.005 200);
+  --secondary: oklch(0.955 0.008 220);
+  --secondary-foreground: oklch(0.28 0.02 245);
+
+  /* Muted / Accent */
+  --muted: oklch(0.955 0.008 220);
+  --muted-foreground: oklch(0.52 0.02 245);
+  --accent: oklch(0.93 0.035 200);
+  --accent-foreground: oklch(0.28 0.04 220);
+
+  /* Status (Feedback tokens: success #47c58c, destructive #f3625d, warning #f0b648, info #6fa7ee) */
+  --destructive: oklch(68% 0.18 25);
+  --destructive-foreground: oklch(0.99 0.005 200);
+  --success: oklch(74% 0.14 160);
+  --success-foreground: oklch(0.18 0.02 240);
+  --warning: oklch(81% 0.14 80);
+  --warning-foreground: oklch(0.2 0.03 80);
+  --info: oklch(72% 0.12 255);
+  --info-foreground: oklch(0.18 0.02 240);
+
+  /* Form / Ring */
+  --border: oklch(0.9 0.01 230);
+  --input: oklch(0.9 0.01 230);
+  --ring: oklch(0.58 0.126 205);
+
+  /* Glass surfaces */
+  --surface: oklch(1 0 0 / 70%);
+  --surface-2: oklch(0.975 0.006 220);
+  --overlay: oklch(0.985 0.004 210 / 80%);
+
+  /* Charts */
+  --chart-1: oklch(0.58 0.126 205);
+  --chart-2: oklch(0.62 0.13 158);
+  --chart-3: oklch(0.6 0.12 250);
+  --chart-4: oklch(0.75 0.14 75);
+  --chart-5: oklch(0.6 0.16 15);
+
+  /* Sidebar */
+  --sidebar: oklch(0.99 0.004 220);
+  --sidebar-foreground: oklch(0.21 0.02 245);
+  --sidebar-primary: oklch(0.58 0.126 205);
+  --sidebar-primary-foreground: oklch(0.99 0.005 200);
+  --sidebar-accent: oklch(0.95 0.012 220);
+  --sidebar-accent-foreground: oklch(0.24 0.02 245);
+  --sidebar-border: oklch(0.9 0.01 230);
+  --sidebar-ring: oklch(0.58 0.126 205);
+
+  /* ── 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);
+}
+
+/* ── Dark Mode ────────────────────────────────────────────────────────── */
+.dark,
+[data-theme="dark"],
+[data-brand="orchestrai"].dark,
+[data-brand="orchestrai"][data-theme="dark"],
+[data-theme="orchestrai-dark"] {
+  --radius: 0.75rem;
+
+  /* Surfaces */
+  --background: oklch(0.175 0.015 250);
+  --foreground: oklch(0.955 0.006 230);
+  --card: oklch(0.215 0.017 250);
+  --card-foreground: oklch(0.955 0.006 230);
+  --popover: oklch(0.22 0.018 250);
+  --popover-foreground: oklch(0.955 0.006 230);
+
+  /* Brand */
+  --primary: oklch(0.76 0.115 195);
+  --primary-foreground: oklch(0.19 0.02 240);
+  --secondary: oklch(0.27 0.02 250);
+  --secondary-foreground: oklch(0.945 0.006 230);
+
+  /* Muted / Accent */
+  --muted: oklch(0.27 0.02 250);
+  --muted-foreground: oklch(0.71 0.02 240);
+  --accent: oklch(0.31 0.035 210);
+  --accent-foreground: oklch(0.95 0.01 210);
+
+  /* Status (Feedback tokens: success #47c58c, destructive #f3625d, warning #f0b648, info #6fa7ee) */
+  --destructive: oklch(68% 0.18 25);
+  --destructive-foreground: oklch(0.18 0.02 240);
+  --success: oklch(74% 0.14 160);
+  --success-foreground: oklch(0.18 0.02 240);
+  --warning: oklch(81% 0.14 80);
+  --warning-foreground: oklch(0.2 0.03 80);
+  --info: oklch(72% 0.12 255);
+  --info-foreground: oklch(0.18 0.02 240);
+
+  /* Form / Ring */
+  --border: oklch(1 0 0 / 11%);
+  --input: oklch(1 0 0 / 16%);
+  --ring: oklch(0.76 0.115 195);
+
+  /* Glass surfaces */
+  --surface: oklch(0.24 0.018 250 / 70%);
+  --surface-2: oklch(0.235 0.018 250);
+  --overlay: oklch(0.11 0.008 250 / 80%);
+
+  /* Charts */
+  --chart-1: oklch(0.76 0.115 195);
+  --chart-2: oklch(0.74 0.14 160);
+  --chart-3: oklch(0.72 0.12 255);
+  --chart-4: oklch(0.81 0.14 80);
+  --chart-5: oklch(0.7 0.16 15);
+
+  /* Sidebar */
+  --sidebar: oklch(0.195 0.016 250);
+  --sidebar-foreground: oklch(0.955 0.006 230);
+  --sidebar-primary: oklch(0.76 0.115 195);
+  --sidebar-primary-foreground: oklch(0.19 0.02 240);
+  --sidebar-accent: oklch(0.28 0.022 250);
+  --sidebar-accent-foreground: oklch(0.95 0.006 230);
+  --sidebar-border: oklch(1 0 0 / 11%);
+  --sidebar-ring: oklch(0.76 0.115 195);
+
+  /* ── 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);
+}

package/package.json

@@ -1,46 +1,54 @@
 {
   "name": "@yuva-devlab/tokens",
-  "version": "0.1.2",
+  "version": "1.1.0",
+  "description": "Design tokens, brand themes, and Tailwind CSS 4 preset bridge for Yuva DevLab",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "style": "./styles/styles.css",
   "sideEffects": [
-    "**/*.css.ts",
     "**/*.css"
   ],
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": {
+        "import": "./dist/index.d.ts",
+        "require": "./dist/index.d.cts"
+      },
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./tokens.css": "./dist/tokens.css",
+    "./preset.css": "./styles/preset.css",
+    "./styles.css": "./styles/styles.css",
+    "./root.css": "./styles/root.css",
+    "./themes/finai.css": "./styles/themes/finai.css",
+    "./themes/orchestrai.css": "./styles/themes/orchestrai.css",
     "./package.json": "./package.json"
   },
+  "files": [
+    "dist",
+    "styles"
+  ],
   "license": "MIT",
   "devDependencies": {
-    "@vanilla-extract/vite-plugin": "^5.1.1",
-    "vite": "^7.2.4",
-    "vite-plugin-dts": "^4.5.4",
-    "@yuva-devlab/colors": "0.1.2",
+    "@types/node": "^24.10.1",
+    "eslint": "^9.39.1",
+    "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"
   },
-  "dependencies": {
-    "@vanilla-extract/css": "^1.17.4"
-  },
   "scripts": {
-    "build": "vite build",
+    "build": "tsup",
+    "dev": "tsup --watch",
     "lint": "eslint src",
     "lint:fix": "eslint src --fix",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
-    "type-check": "tsc --noEmit",
-    "clean:build": "rm -rf dist",
-    "clean:node_modules": "rm -rf node_modules",
-    "clean:turbo": "rm -rf .turbo",
-    "clean": "pnpm run clean:build && pnpm run clean:node_modules && pnpm run clean:turbo"
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist node_modules .turbo"
   }
 }