@yuva-devlab/tokens 1.2.0 → 1.3.1

package/styles/themes/portal.css

@@ -106,6 +106,20 @@
   --section-gap: var(--space-5);
   --table-row-padding-x: var(--space-4);
   --table-row-padding-y: var(--space-3);
+
+  /* ── DevLab Portal 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);
+
+  /* ── IAM Control Plane Scaling ───────────────────────────────────────── */
+  --theme-font-size-root: 15.5px;
+  --theme-spacing: 0.24rem;
 }
 
 /* ── DevLab Portal Theme — Dark Mode ─────────────────────────────────── */
@@ -189,4 +203,47 @@
   --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 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);
+
+  /* ── IAM Control Plane Scaling ───────────────────────────────────────── */
+  --theme-font-size-root: 15.5px;
+  --theme-spacing: 0.24rem;
 }

package/styles/themes/vitalai.css

@@ -0,0 +1,248 @@
+/**
+ * VitalAI Theme Preset — High-Performance Athletic & Kinetic Palette
+ * Modern OKLCH color spaces optimized for bodybuilding, calisthenics, and AI fitness coaching.
+ * 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.98 0.005 265);
+  --foreground: oklch(0.14 0.02 265);
+  --card: oklch(1 0 0 / 85%);
+  --card-foreground: oklch(0.14 0.02 265);
+  --popover: oklch(0.99 0.003 265);
+  --popover-foreground: oklch(0.14 0.02 265);
+
+  /* Brand Action — Athletic Volt Accent */
+  --primary: oklch(0.72 0.22 128);
+  --primary-foreground: oklch(0.12 0.02 128);
+  --secondary: oklch(0.93 0.015 265);
+  --secondary-foreground: oklch(0.2 0.03 265);
+
+  /* Muted / Accent */
+  --muted: oklch(0.94 0.01 265);
+  --muted-foreground: oklch(0.48 0.025 265);
+  --accent: oklch(0.92 0.025 265);
+  --accent-foreground: oklch(0.2 0.03 265);
+
+  /* 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.65 0.2 140);
+  --success-foreground: oklch(0.99 0 0);
+  --info: oklch(0.62 0.15 210);
+  --info-foreground: oklch(0.99 0 0);
+
+  /* Form & Interactive */
+  --border: oklch(0.14 0.02 265 / 10%);
+  --input: oklch(0.14 0.02 265 / 12%);
+  --ring: oklch(0.72 0.22 128);
+
+  /* Glassmorphism & Ambient Glow */
+  --glass: oklch(1 0 0 / 70%);
+  --glass-border: oklch(0.14 0.02 265 / 8%);
+  --glow: oklch(0.72 0.22 128 / 25%);
+  --glow-2: oklch(0.68 0.16 200 / 18%);
+  --shadow-glass:
+    0 1px 0 0 oklch(1 0 0 / 80%) inset,
+    0 10px 40px -12px oklch(0.14 0.02 265 / 12%);
+  --surface: oklch(1 0 0 / 75%);
+  --surface-2: oklch(0.96 0.008 265);
+  --overlay: oklch(0.98 0.005 265 / 80%);
+
+  /* Navigation & Sidebar */
+  --sidebar: oklch(0.99 0.003 265 / 80%);
+  --sidebar-foreground: oklch(0.2 0.02 265);
+  --sidebar-primary: oklch(0.72 0.22 128);
+  --sidebar-primary-foreground: oklch(0.12 0.02 128);
+  --sidebar-accent: oklch(0.93 0.02 265);
+  --sidebar-accent-foreground: oklch(0.2 0.03 265);
+  --sidebar-border: oklch(0.14 0.02 265 / 8%);
+  --sidebar-ring: oklch(0.72 0.22 128);
+
+  /* ── VitalAI Kinetic Athletic Tokens ─────────────────────────────────── */
+  --volt: oklch(0.72 0.22 128);
+  --cyan: oklch(0.68 0.16 200);
+  --ember: oklch(0.65 0.21 40);
+  --slate-muscle: oklch(0.3 0.02 265);
+
+  /* Visual Data Charts */
+  --chart-1: var(--volt);
+  --chart-2: var(--cyan);
+  --chart-3: var(--ember);
+  --chart-4: oklch(0.65 0.18 290);
+  --chart-5: oklch(0.72 0.16 75);
+
+  /* ── VitalAI Typography Tokens ───────────────────────────────────────── */
+  --theme-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --theme-font-display: "Barlow Condensed", "Inter", 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);
+
+  /* ── Athletic Density & Scaling ──────────────────────────────────────── */
+  --theme-font-size-root: 16px;
+  --theme-spacing: 0.25rem;
+
+  /* ── Sizing, Spacing & Layout Tokens ─────────────────────────────────── */
+  --control-height-xs: 2rem;
+  --control-height-sm: 2.25rem;
+  --control-height-md: 2.625rem;
+  --control-height-lg: 3rem;
+  --control-height-xl: 3.5rem;
+
+  --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.875rem;
+  --space-4: 1.125rem;
+  --space-5: 1.5rem;
+  --space-6: 1.875rem;
+  --space-8: 2.5rem;
+  --space-10: 3rem;
+  --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-5);
+  --table-row-padding-y: var(--space-4);
+}
+/* ── VitalAI Theme — Dark Mode (Signature Muscle Monster Aesthetic) ───── */
+[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 — Obsidian Carbon */
+  --background: oklch(0.12 0.006 265);
+  --foreground: oklch(0.97 0.005 265);
+  --card: oklch(0.16 0.01 265 / 75%);
+  --card-foreground: oklch(0.97 0.005 265);
+  --popover: oklch(0.17 0.01 265);
+  --popover-foreground: oklch(0.97 0.005 265);
+
+  /* Brand Action — High-Voltage Neon Volt Green */
+  --primary: oklch(0.93 0.23 125);
+  --primary-foreground: oklch(0.14 0.02 125);
+  --secondary: oklch(0.22 0.012 265);
+  --secondary-foreground: oklch(0.92 0.008 265);
+
+  /* Muted / Accent */
+  --muted: oklch(0.2 0.01 265);
+  --muted-foreground: oklch(0.65 0.015 265);
+  --accent: oklch(0.24 0.018 265);
+  --accent-foreground: oklch(0.93 0.23 125);
+
+  /* Status & Clinical Feedback */
+  --destructive: oklch(0.68 0.2 25);
+  --destructive-foreground: oklch(0.99 0 0);
+  --warning: oklch(0.8 0.16 75);
+  --warning-foreground: oklch(0.15 0.02 75);
+  --success: oklch(0.88 0.22 135);
+  --success-foreground: oklch(0.14 0.02 125);
+  --info: oklch(0.82 0.15 205);
+  --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.93 0.23 125);
+
+  /* Glassmorphism & Ambient Glow */
+  --glass: oklch(0.16 0.01 265 / 75%);
+  --glass-border: oklch(1 0 0 / 8%);
+  --glow: oklch(0.93 0.23 125 / 25%);
+  --glow-2: oklch(0.87 0.15 200 / 20%);
+  --shadow-glass:
+    0 1px 0 0 oklch(1 0 0 / 8%) inset, 0 20px 50px -20px oklch(0 0 0 / 80%);
+  --surface: oklch(0.16 0.01 265);
+  --surface-2: oklch(0.2 0.012 265);
+  --overlay: oklch(0.1 0.006 265 / 85%);
+
+  /* Navigation & Sidebar */
+  --sidebar: oklch(0.14 0.008 265 / 80%);
+  --sidebar-foreground: oklch(0.9 0.005 265);
+  --sidebar-primary: oklch(0.93 0.23 125);
+  --sidebar-primary-foreground: oklch(0.14 0.02 125);
+  --sidebar-accent: oklch(0.22 0.015 265);
+  --sidebar-accent-foreground: oklch(0.93 0.23 125);
+  --sidebar-border: oklch(1 0 0 / 7%);
+  --sidebar-ring: oklch(0.93 0.23 125);
+
+  /* ── VitalAI Kinetic Athletic Tokens ─────────────────────────────────── */
+  --volt: oklch(0.93 0.23 125);
+  --cyan: oklch(0.87 0.15 200);
+  --ember: oklch(0.7 0.21 45);
+  --slate-muscle: oklch(0.27 0.015 265);
+
+  /* Visual Data Charts */
+  --chart-1: var(--volt);
+  --chart-2: var(--cyan);
+  --chart-3: var(--ember);
+  --chart-4: oklch(0.75 0.18 290);
+  --chart-5: oklch(0.85 0.15 85);
+
+  /* ── VitalAI Typography Tokens ───────────────────────────────────────── */
+  --theme-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --theme-font-display: "Barlow Condensed", "Inter", 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);
+
+  /* ── Athletic Density & Scaling ──────────────────────────────────────── */
+  --theme-font-size-root: 16px;
+  --theme-spacing: 0.25rem;
+
+  /* ── Sizing, Spacing & Layout Tokens ─────────────────────────────────── */
+  --control-height-xs: 2rem;
+  --control-height-sm: 2.25rem;
+  --control-height-md: 2.625rem;
+  --control-height-lg: 3rem;
+  --control-height-xl: 3.5rem;
+
+  --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.875rem;
+  --space-4: 1.125rem;
+  --space-5: 1.5rem;
+  --space-6: 1.875rem;
+  --space-8: 2.5rem;
+  --space-10: 3rem;
+  --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-5);
+  --table-row-padding-y: var(--space-4);
+}