@vhyxui/tokens 0.1.0-alpha.1

package/index.css

@@ -0,0 +1,479 @@
+/* AUTO-GENERATED — do not edit directly.
+   Run pnpm --filter @vhyxui/tokens sync to regenerate.
+   Source files are in packages/tokens/src/
+ */
+
+/* === src/primitives/colors.css === */
+:root {
+  /* Slate — neutral scale */
+  --vhyx-primitive-slate-50:   #f8fafc;
+  --vhyx-primitive-slate-100:  #f1f5f9;
+  --vhyx-primitive-slate-200:  #e2e8f0;
+  --vhyx-primitive-slate-300:  #cbd5e1;
+  --vhyx-primitive-slate-400:  #94a3b8;
+  --vhyx-primitive-slate-500:  #64748b;
+  --vhyx-primitive-slate-600:  #475569;
+  --vhyx-primitive-slate-700:  #334155;
+  --vhyx-primitive-slate-800:  #1e293b;
+  --vhyx-primitive-slate-900:  #0f172a;
+  --vhyx-primitive-slate-950:  #020617;
+
+  /* Indigo — default accent */
+  --vhyx-primitive-indigo-50:  #eef2ff;
+  --vhyx-primitive-indigo-100: #e0e7ff;
+  --vhyx-primitive-indigo-200: #c7d2fe;
+  --vhyx-primitive-indigo-300: #a5b4fc;
+  --vhyx-primitive-indigo-400: #818cf8;
+  --vhyx-primitive-indigo-500: #6366f1;
+  --vhyx-primitive-indigo-600: #4f46e5;
+  --vhyx-primitive-indigo-700: #4338ca;
+  --vhyx-primitive-indigo-800: #3730a3;
+  --vhyx-primitive-indigo-900: #312e81;
+
+  /* Green — success */
+  --vhyx-primitive-green-50:   #f0fdf4;
+  --vhyx-primitive-green-500:  #22c55e;
+  --vhyx-primitive-green-600:  #16a34a;
+  --vhyx-primitive-green-700:  #15803d;
+
+  /* Red — danger */
+  --vhyx-primitive-red-50:     #fef2f2;
+  --vhyx-primitive-red-500:    #ef4444;
+  --vhyx-primitive-red-600:    #dc2626;
+  --vhyx-primitive-red-700:    #b91c1c;
+
+  /* Amber — warning */
+  --vhyx-primitive-amber-50:   #fffbeb;
+  --vhyx-primitive-amber-500:  #f59e0b;
+  --vhyx-primitive-amber-600:  #d97706;
+
+  /* Blue — info */
+  --vhyx-primitive-blue-50:    #eff6ff;
+  --vhyx-primitive-blue-500:   #3b82f6;
+  --vhyx-primitive-blue-600:   #2563eb;
+}
+
+/* === src/primitives/typography.css === */
+:root {
+  /* Font family stacks */
+  --vhyx-primitive-font-sans:  system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --vhyx-primitive-font-mono:  ui-monospace, 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+  --vhyx-primitive-font-serif: ui-serif, Georgia, serif;
+
+  /* Raw size scale */
+  --vhyx-primitive-text-2xs: 0.625rem;
+  --vhyx-primitive-text-xs:  0.75rem;
+  --vhyx-primitive-text-sm:  0.875rem;
+  --vhyx-primitive-text-md:  1rem;
+  --vhyx-primitive-text-lg:  1.125rem;
+  --vhyx-primitive-text-xl:  1.25rem;
+  --vhyx-primitive-text-2xl: 1.5rem;
+  --vhyx-primitive-text-3xl: 1.875rem;
+  --vhyx-primitive-text-4xl: 2.25rem;
+}
+
+/* === src/semantic/colors.css === */
+:root {
+  /* Background */
+  --vhyx-color-bg:              var(--vhyx-primitive-slate-50);
+  --vhyx-color-bg-subtle:       var(--vhyx-primitive-slate-100);
+  --vhyx-color-bg-muted:        var(--vhyx-primitive-slate-200);
+  --vhyx-color-bg-inverse:      var(--vhyx-primitive-slate-900);
+
+  /* Surface — components sit on surface, not bg */
+  --vhyx-color-surface:         #ffffff;
+  --vhyx-color-surface-raised:  #ffffff;
+  --vhyx-color-surface-overlay: #ffffff;
+
+  /* Overlay backdrop */
+  --vhyx-color-overlay:         rgba(0, 0, 0, 0.5);
+
+  /* Border */
+  --vhyx-color-border:          var(--vhyx-primitive-slate-200);
+  --vhyx-color-border-strong:   var(--vhyx-primitive-slate-300);
+  --vhyx-color-border-focus:    var(--vhyx-primitive-indigo-500);
+
+  /* Text */
+  --vhyx-color-text:            var(--vhyx-primitive-slate-900);
+  --vhyx-color-text-subtle:     var(--vhyx-primitive-slate-500);
+  --vhyx-color-text-muted:      var(--vhyx-primitive-slate-400);
+  --vhyx-color-text-disabled:   var(--vhyx-primitive-slate-300);
+  --vhyx-color-text-inverse:    var(--vhyx-primitive-slate-50);
+  --vhyx-color-text-on-accent:  #ffffff;
+
+  /* Accent */
+  --vhyx-color-accent:          var(--vhyx-primitive-indigo-500);
+  --vhyx-color-accent-hover:    var(--vhyx-primitive-indigo-600);
+  --vhyx-color-accent-active:   var(--vhyx-primitive-indigo-700);
+  --vhyx-color-accent-subtle:   var(--vhyx-primitive-indigo-50);
+  --vhyx-color-accent-muted:    var(--vhyx-primitive-indigo-100);
+
+  /* Success */
+  --vhyx-color-success:         var(--vhyx-primitive-green-500);
+  --vhyx-color-success-hover:   var(--vhyx-primitive-green-600);
+  --vhyx-color-success-subtle:  var(--vhyx-primitive-green-50);
+  --vhyx-color-success-text:    var(--vhyx-primitive-green-700);
+
+  /* Danger */
+  --vhyx-color-danger:          var(--vhyx-primitive-red-500);
+  --vhyx-color-danger-hover:    var(--vhyx-primitive-red-600);
+  --vhyx-color-danger-subtle:   var(--vhyx-primitive-red-50);
+  --vhyx-color-danger-text:     var(--vhyx-primitive-red-700);
+
+  /* Warning */
+  --vhyx-color-warning:         var(--vhyx-primitive-amber-500);
+  --vhyx-color-warning-hover:   var(--vhyx-primitive-amber-600);
+  --vhyx-color-warning-subtle:  var(--vhyx-primitive-amber-50);
+  --vhyx-color-warning-text:    var(--vhyx-primitive-amber-600);
+
+  /* Info */
+  --vhyx-color-info:            var(--vhyx-primitive-blue-500);
+  --vhyx-color-info-hover:      var(--vhyx-primitive-blue-600);
+  --vhyx-color-info-subtle:     var(--vhyx-primitive-blue-50);
+  --vhyx-color-info-text:       var(--vhyx-primitive-blue-600);
+}
+
+/* === src/semantic/typography.css === */
+:root {
+  /* Font families */
+  --vhyx-font-sans:   system-ui, -apple-system, BlinkMacSystemFont,
+                      'Segoe UI', sans-serif;
+  --vhyx-font-mono:   ui-monospace, 'Cascadia Code', 'Fira Code',
+                      'Consolas', monospace;
+  --vhyx-font-serif:  ui-serif, Georgia, serif;
+
+  /* Size scale */
+  --vhyx-text-2xs:   0.625rem;
+  --vhyx-text-xs:    0.75rem;
+  --vhyx-text-sm:    0.875rem;
+  --vhyx-text-md:    1rem;
+  --vhyx-text-lg:    1.125rem;
+  --vhyx-text-xl:    1.25rem;
+  --vhyx-text-2xl:   1.5rem;
+  --vhyx-text-3xl:   1.875rem;
+  --vhyx-text-4xl:   2.25rem;
+
+  /* Line height */
+  --vhyx-leading-none:     1;
+  --vhyx-leading-tight:    1.25;
+  --vhyx-leading-snug:     1.375;
+  --vhyx-leading-normal:   1.5;
+  --vhyx-leading-relaxed:  1.625;
+  --vhyx-leading-loose:    2;
+
+  /* Font weight */
+  --vhyx-weight-light:     300;
+  --vhyx-weight-normal:    400;
+  --vhyx-weight-medium:    500;
+  --vhyx-weight-semibold:  600;
+  --vhyx-weight-bold:      700;
+  --vhyx-weight-extrabold: 800;
+
+  /* Letter spacing */
+  --vhyx-tracking-tight:   -0.025em;
+  --vhyx-tracking-normal:  0em;
+  --vhyx-tracking-wide:    0.025em;
+  --vhyx-tracking-wider:   0.05em;
+  --vhyx-tracking-widest:  0.1em;
+}
+
+/* === src/semantic/spacing.css === */
+:root {
+  --vhyx-space-px:   1px;
+  --vhyx-space-0:    0;
+  --vhyx-space-0-5:  0.125rem;
+  --vhyx-space-1:    0.25rem;
+  --vhyx-space-1-5:  0.375rem;
+  --vhyx-space-2:    0.5rem;
+  --vhyx-space-2-5:  0.625rem;
+  --vhyx-space-3:    0.75rem;
+  --vhyx-space-3-5:  0.875rem;
+  --vhyx-space-4:    1rem;
+  --vhyx-space-5:    1.25rem;
+  --vhyx-space-6:    1.5rem;
+  --vhyx-space-7:    1.75rem;
+  --vhyx-space-8:    2rem;
+  --vhyx-space-9:    2.25rem;
+  --vhyx-space-10:   2.5rem;
+  --vhyx-space-12:   3rem;
+  --vhyx-space-14:   3.5rem;
+  --vhyx-space-16:   4rem;
+  --vhyx-space-20:   5rem;
+  --vhyx-space-24:   6rem;
+  --vhyx-space-32:   8rem;
+
+  /* Component heights — consistent across all interactive elements */
+  --vhyx-size-xs:   1.5rem;
+  --vhyx-size-sm:   2rem;
+  --vhyx-size-md:   2.5rem;
+  --vhyx-size-lg:   3rem;
+  --vhyx-size-xl:   3.5rem;
+
+  /* Drawer panel dimensions */
+  --vhyx-drawer-sm:   20rem;
+  --vhyx-drawer-md:   25rem;
+  --vhyx-drawer-lg:   32rem;
+  --vhyx-drawer-full: 100%;
+
+  /* Dialog panel dimensions */
+  --vhyx-dialog-sm: 20rem;
+  --vhyx-dialog-md: 32rem;
+  --vhyx-dialog-lg: 48rem;
+
+  /* Popover layout constraints */
+  --vhyx-popover-max-width: 20rem;
+}
+
+/* === src/semantic/borders.css === */
+:root {
+  --vhyx-radius-none:  0;
+  --vhyx-radius-xs:    2px;
+  --vhyx-radius-sm:    4px;
+  --vhyx-radius-md:    6px;
+  --vhyx-radius-lg:    8px;
+  --vhyx-radius-xl:    12px;
+  --vhyx-radius-2xl:   16px;
+  --vhyx-radius-3xl:   24px;
+  --vhyx-radius-full:  9999px;
+
+  --vhyx-border-width:   1px;
+  --vhyx-border-width-2: 2px;
+}
+
+/* === src/semantic/shadows.css === */
+:root {
+  --vhyx-shadow-none:  none;
+  --vhyx-shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.05);
+  --vhyx-shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.1),
+                       0 1px 2px rgba(0, 0, 0, 0.06);
+  --vhyx-shadow-md:    0 4px 6px rgba(0, 0, 0, 0.07),
+                       0 2px 4px rgba(0, 0, 0, 0.05);
+  --vhyx-shadow-lg:    0 10px 15px rgba(0, 0, 0, 0.1),
+                       0 4px 6px rgba(0, 0, 0, 0.05);
+  --vhyx-shadow-xl:    0 20px 25px rgba(0, 0, 0, 0.1),
+                       0 10px 10px rgba(0, 0, 0, 0.04);
+  --vhyx-shadow-2xl:   0 25px 50px rgba(0, 0, 0, 0.25);
+  --vhyx-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
+
+  /* Focus ring — consistent across all interactive elements */
+  --vhyx-shadow-focus:        0 0 0 3px rgba(99, 102, 241, 0.4);
+  --vhyx-shadow-focus-danger: 0 0 0 3px rgba(239, 68, 68, 0.4);
+}
+
+/* === src/semantic/motion.css === */
+:root {
+  /* Duration */
+  --vhyx-duration-instant:  50ms;
+  --vhyx-duration-fast:     100ms;
+  --vhyx-duration-normal:   200ms;
+  --vhyx-duration-slow:     350ms;
+  --vhyx-duration-glacial:  500ms;
+
+  /* Easing */
+  --vhyx-easing-linear:     linear;
+  --vhyx-easing-standard:   cubic-bezier(0.4, 0, 0.2, 1);
+  --vhyx-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
+  --vhyx-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
+  --vhyx-easing-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
+  --vhyx-easing-bounce:     cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --vhyx-easing-smooth:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* Reduced motion — collapses all durations */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --vhyx-duration-instant:  0ms;
+    --vhyx-duration-fast:     0ms;
+    --vhyx-duration-normal:   0ms;
+    --vhyx-duration-slow:     0ms;
+    --vhyx-duration-glacial:  0ms;
+  }
+}
+
+/* Appear / Disappear */
+@keyframes vhyx-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes vhyx-fade-out {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+
+@keyframes vhyx-scale-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to   { opacity: 1; transform: scale(1); }
+}
+@keyframes vhyx-scale-out {
+  from { opacity: 1; transform: scale(1); }
+  to   { opacity: 0; transform: scale(0.95); }
+}
+
+@keyframes vhyx-slide-up-in {
+  from { opacity: 0; transform: translateY(8px) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+@keyframes vhyx-slide-up-out {
+  from { opacity: 1; transform: translateY(0) scale(1); }
+  to   { opacity: 0; transform: translateY(8px) scale(0.98); }
+}
+
+@keyframes vhyx-slide-right-in {
+  from { transform: translateX(100%); }
+  to   { transform: translateX(0); }
+}
+@keyframes vhyx-slide-right-out {
+  from { transform: translateX(0); }
+  to   { transform: translateX(100%); }
+}
+
+@keyframes vhyx-slide-left-in {
+  from { transform: translateX(-100%); }
+  to   { transform: translateX(0); }
+}
+@keyframes vhyx-slide-left-out {
+  from { transform: translateX(0); }
+  to   { transform: translateX(-100%); }
+}
+
+@keyframes vhyx-slide-down-in {
+  from { transform: translateY(-100%); }
+  to   { transform: translateY(0); }
+}
+@keyframes vhyx-slide-down-out {
+  from { transform: translateY(0); }
+  to   { transform: translateY(-100%); }
+}
+
+@keyframes vhyx-overlay-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes vhyx-overlay-out {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+
+/* Feedback */
+@keyframes vhyx-shake {
+  0%, 100% { transform: translateX(0); }
+  20%       { transform: translateX(-6px); }
+  40%       { transform: translateX(6px); }
+  60%       { transform: translateX(-4px); }
+  80%       { transform: translateX(4px); }
+}
+
+@keyframes vhyx-success-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
+  50%       { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.3); }
+}
+
+/* Ambient */
+@keyframes vhyx-spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+@keyframes vhyx-shimmer {
+  from { background-position: -200% center; }
+  to   { background-position: 200% center; }
+}
+
+@keyframes vhyx-indeterminate {
+  0%   { transform: translateX(-100%) scaleX(0.5); }
+  50%  { transform: translateX(0%) scaleX(0.3); }
+  100% { transform: translateX(100%) scaleX(0.5); }
+}
+
+/* === src/semantic/zindex.css === */
+:root {
+  --vhyx-z-hide:      -1;
+  --vhyx-z-base:       0;
+  --vhyx-z-raised:     10;
+  --vhyx-z-dropdown:   100;
+  --vhyx-z-sticky:     200;
+  --vhyx-z-banner:     250;
+  --vhyx-z-overlay:    300;
+  --vhyx-z-modal:      400;
+  --vhyx-z-popover:    450;
+  --vhyx-z-toast:      500;
+  --vhyx-z-tooltip:    550;
+  --vhyx-z-top:        999;
+}
+
+/* === src/themes/dark.css === */
+[data-theme="dark"] {
+  --vhyx-color-bg:              var(--vhyx-primitive-slate-950);
+  --vhyx-color-bg-subtle:       var(--vhyx-primitive-slate-900);
+  --vhyx-color-bg-muted:        var(--vhyx-primitive-slate-800);
+  --vhyx-color-bg-inverse:      var(--vhyx-primitive-slate-50);
+
+  --vhyx-color-surface:         var(--vhyx-primitive-slate-900);
+  --vhyx-color-surface-raised:  var(--vhyx-primitive-slate-800);
+  --vhyx-color-surface-overlay: var(--vhyx-primitive-slate-800);
+  --vhyx-color-overlay:         rgba(0, 0, 0, 0.65);
+
+  --vhyx-color-border:          var(--vhyx-primitive-slate-800);
+  --vhyx-color-border-strong:   var(--vhyx-primitive-slate-700);
+  --vhyx-color-border-focus:    var(--vhyx-primitive-indigo-400);
+
+  --vhyx-color-text:            var(--vhyx-primitive-slate-50);
+  --vhyx-color-text-subtle:     var(--vhyx-primitive-slate-400);
+  --vhyx-color-text-muted:      var(--vhyx-primitive-slate-500);
+  --vhyx-color-text-disabled:   var(--vhyx-primitive-slate-600);
+  --vhyx-color-text-inverse:    var(--vhyx-primitive-slate-900);
+
+  --vhyx-color-accent-subtle:   #1e1b4b;
+  --vhyx-color-accent-muted:    #312e81;
+
+  --vhyx-color-success-subtle:  #052e16;
+  --vhyx-color-danger-subtle:   #450a0a;
+  --vhyx-color-warning-subtle:  #431407;
+  --vhyx-color-info-subtle:     #0c1a45;
+}
+
+/* === src/reset.css === */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-size-adjust: 100%;
+}
+
+body {
+  font-family: var(--vhyx-font-sans);
+  font-size: var(--vhyx-text-md);
+  line-height: var(--vhyx-leading-normal);
+  color: var(--vhyx-color-text);
+  background-color: var(--vhyx-color-bg);
+}
+
+img, video, svg {
+  display: block;
+  max-width: 100%;
+}
+
+button, input, select, textarea {
+  font: inherit;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+/* Remove list styles on ul/ol with role=list */
+ul[role="list"], ol[role="list"] {
+  list-style: none;
+}
+
+/* Focus visible — never outline none without replacement */
+:focus-visible {
+  outline: none;
+  box-shadow: var(--vhyx-shadow-focus);
+}
+

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@vhyxui/tokens",
+  "version": "0.1.0-alpha.1",
+  "description": "CSS design tokens for VhyxUI — zero JavaScript, zero build step",
+  "license": "MIT",
+  "exports": {
+    ".": "./index.css",
+    "./index.css": "./index.css",
+    "./reset.css": "./reset.css",
+    "./dark.css": "./src/themes/dark.css"
+  },
+  "scripts": {
+    "sync": "node scripts/sync-bundle.js"
+  }
+}

package/reset.css

@@ -0,0 +1,43 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-size-adjust: 100%;
+}
+
+body {
+  font-family: var(--vhyx-font-sans);
+  font-size: var(--vhyx-text-md);
+  line-height: var(--vhyx-leading-normal);
+  color: var(--vhyx-color-text);
+  background-color: var(--vhyx-color-bg);
+}
+
+img, video, svg {
+  display: block;
+  max-width: 100%;
+}
+
+button, input, select, textarea {
+  font: inherit;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+/* Remove list styles on ul/ol with role=list */
+ul[role="list"], ol[role="list"] {
+  list-style: none;
+}
+
+/* Focus visible — never outline none without replacement */
+:focus-visible {
+  outline: none;
+  box-shadow: var(--vhyx-shadow-focus);
+}

package/scripts/sync-bundle.js

@@ -0,0 +1,39 @@
+const fs = require('fs')
+const path = require('path')
+
+// Source files in dependency order
+const SRC_FILES = [
+  'src/primitives/colors.css',
+  'src/primitives/typography.css',
+  'src/primitives/index.css',
+  'src/semantic/colors.css',
+  'src/semantic/typography.css',
+  'src/semantic/spacing.css',
+  'src/semantic/borders.css',
+  'src/semantic/shadows.css',
+  'src/semantic/motion.css',
+  'src/semantic/zindex.css',
+  'src/semantic/index.css',
+  'src/themes/dark.css',
+  'src/themes/index.css',
+  'src/reset.css',
+  'src/index.css',
+]
+
+const root = path.join(__dirname, '..')
+const header = '/* AUTO-GENERATED — do not edit directly.\n' +
+  '   Run pnpm --filter @vhyxui/tokens sync to regenerate.\n' +
+  '   Source files are in packages/tokens/src/\n */\n\n'
+
+let output = header
+for (const file of SRC_FILES) {
+  const content = fs.readFileSync(path.join(root, file), 'utf8')
+  // Remove @import statements — we are inlining everything
+  const stripped = content.replace(/@import[^;]+;/g, '').trim()
+  if (stripped) {
+    output += `/* === ${file} === */\n${stripped}\n\n`
+  }
+}
+
+fs.writeFileSync(path.join(root, 'index.css'), output)
+console.log('Token bundle synced.')

package/src/index.css

@@ -0,0 +1,3 @@
+@import './primitives/index.css';
+@import './semantic/index.css';
+@import './themes/index.css';

package/src/primitives/colors.css

@@ -0,0 +1,48 @@
+:root {
+  /* Slate — neutral scale */
+  --vhyx-primitive-slate-50:   #f8fafc;
+  --vhyx-primitive-slate-100:  #f1f5f9;
+  --vhyx-primitive-slate-200:  #e2e8f0;
+  --vhyx-primitive-slate-300:  #cbd5e1;
+  --vhyx-primitive-slate-400:  #94a3b8;
+  --vhyx-primitive-slate-500:  #64748b;
+  --vhyx-primitive-slate-600:  #475569;
+  --vhyx-primitive-slate-700:  #334155;
+  --vhyx-primitive-slate-800:  #1e293b;
+  --vhyx-primitive-slate-900:  #0f172a;
+  --vhyx-primitive-slate-950:  #020617;
+
+  /* Indigo — default accent */
+  --vhyx-primitive-indigo-50:  #eef2ff;
+  --vhyx-primitive-indigo-100: #e0e7ff;
+  --vhyx-primitive-indigo-200: #c7d2fe;
+  --vhyx-primitive-indigo-300: #a5b4fc;
+  --vhyx-primitive-indigo-400: #818cf8;
+  --vhyx-primitive-indigo-500: #6366f1;
+  --vhyx-primitive-indigo-600: #4f46e5;
+  --vhyx-primitive-indigo-700: #4338ca;
+  --vhyx-primitive-indigo-800: #3730a3;
+  --vhyx-primitive-indigo-900: #312e81;
+
+  /* Green — success */
+  --vhyx-primitive-green-50:   #f0fdf4;
+  --vhyx-primitive-green-500:  #22c55e;
+  --vhyx-primitive-green-600:  #16a34a;
+  --vhyx-primitive-green-700:  #15803d;
+
+  /* Red — danger */
+  --vhyx-primitive-red-50:     #fef2f2;
+  --vhyx-primitive-red-500:    #ef4444;
+  --vhyx-primitive-red-600:    #dc2626;
+  --vhyx-primitive-red-700:    #b91c1c;
+
+  /* Amber — warning */
+  --vhyx-primitive-amber-50:   #fffbeb;
+  --vhyx-primitive-amber-500:  #f59e0b;
+  --vhyx-primitive-amber-600:  #d97706;
+
+  /* Blue — info */
+  --vhyx-primitive-blue-50:    #eff6ff;
+  --vhyx-primitive-blue-500:   #3b82f6;
+  --vhyx-primitive-blue-600:   #2563eb;
+}

package/src/primitives/index.css

@@ -0,0 +1,2 @@
+@import './colors.css';
+@import './typography.css';

package/src/primitives/typography.css

@@ -0,0 +1,17 @@
+:root {
+  /* Font family stacks */
+  --vhyx-primitive-font-sans:  system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --vhyx-primitive-font-mono:  ui-monospace, 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+  --vhyx-primitive-font-serif: ui-serif, Georgia, serif;
+
+  /* Raw size scale */
+  --vhyx-primitive-text-2xs: 0.625rem;
+  --vhyx-primitive-text-xs:  0.75rem;
+  --vhyx-primitive-text-sm:  0.875rem;
+  --vhyx-primitive-text-md:  1rem;
+  --vhyx-primitive-text-lg:  1.125rem;
+  --vhyx-primitive-text-xl:  1.25rem;
+  --vhyx-primitive-text-2xl: 1.5rem;
+  --vhyx-primitive-text-3xl: 1.875rem;
+  --vhyx-primitive-text-4xl: 2.25rem;
+}

package/src/reset.css

@@ -0,0 +1,43 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-size-adjust: 100%;
+}
+
+body {
+  font-family: var(--vhyx-font-sans);
+  font-size: var(--vhyx-text-md);
+  line-height: var(--vhyx-leading-normal);
+  color: var(--vhyx-color-text);
+  background-color: var(--vhyx-color-bg);
+}
+
+img, video, svg {
+  display: block;
+  max-width: 100%;
+}
+
+button, input, select, textarea {
+  font: inherit;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+/* Remove list styles on ul/ol with role=list */
+ul[role="list"], ol[role="list"] {
+  list-style: none;
+}
+
+/* Focus visible — never outline none without replacement */
+:focus-visible {
+  outline: none;
+  box-shadow: var(--vhyx-shadow-focus);
+}

package/src/semantic/borders.css

@@ -0,0 +1,14 @@
+:root {
+  --vhyx-radius-none:  0;
+  --vhyx-radius-xs:    2px;
+  --vhyx-radius-sm:    4px;
+  --vhyx-radius-md:    6px;
+  --vhyx-radius-lg:    8px;
+  --vhyx-radius-xl:    12px;
+  --vhyx-radius-2xl:   16px;
+  --vhyx-radius-3xl:   24px;
+  --vhyx-radius-full:  9999px;
+
+  --vhyx-border-width:   1px;
+  --vhyx-border-width-2: 2px;
+}

package/src/semantic/colors.css

@@ -0,0 +1,59 @@
+:root {
+  /* Background */
+  --vhyx-color-bg:              var(--vhyx-primitive-slate-50);
+  --vhyx-color-bg-subtle:       var(--vhyx-primitive-slate-100);
+  --vhyx-color-bg-muted:        var(--vhyx-primitive-slate-200);
+  --vhyx-color-bg-inverse:      var(--vhyx-primitive-slate-900);
+
+  /* Surface — components sit on surface, not bg */
+  --vhyx-color-surface:         #ffffff;
+  --vhyx-color-surface-raised:  #ffffff;
+  --vhyx-color-surface-overlay: #ffffff;
+
+  /* Overlay backdrop */
+  --vhyx-color-overlay:         rgba(0, 0, 0, 0.5);
+
+  /* Border */
+  --vhyx-color-border:          var(--vhyx-primitive-slate-200);
+  --vhyx-color-border-strong:   var(--vhyx-primitive-slate-300);
+  --vhyx-color-border-focus:    var(--vhyx-primitive-indigo-500);
+
+  /* Text */
+  --vhyx-color-text:            var(--vhyx-primitive-slate-900);
+  --vhyx-color-text-subtle:     var(--vhyx-primitive-slate-500);
+  --vhyx-color-text-muted:      var(--vhyx-primitive-slate-400);
+  --vhyx-color-text-disabled:   var(--vhyx-primitive-slate-300);
+  --vhyx-color-text-inverse:    var(--vhyx-primitive-slate-50);
+  --vhyx-color-text-on-accent:  #ffffff;
+
+  /* Accent */
+  --vhyx-color-accent:          var(--vhyx-primitive-indigo-500);
+  --vhyx-color-accent-hover:    var(--vhyx-primitive-indigo-600);
+  --vhyx-color-accent-active:   var(--vhyx-primitive-indigo-700);
+  --vhyx-color-accent-subtle:   var(--vhyx-primitive-indigo-50);
+  --vhyx-color-accent-muted:    var(--vhyx-primitive-indigo-100);
+
+  /* Success */
+  --vhyx-color-success:         var(--vhyx-primitive-green-500);
+  --vhyx-color-success-hover:   var(--vhyx-primitive-green-600);
+  --vhyx-color-success-subtle:  var(--vhyx-primitive-green-50);
+  --vhyx-color-success-text:    var(--vhyx-primitive-green-700);
+
+  /* Danger */
+  --vhyx-color-danger:          var(--vhyx-primitive-red-500);
+  --vhyx-color-danger-hover:    var(--vhyx-primitive-red-600);
+  --vhyx-color-danger-subtle:   var(--vhyx-primitive-red-50);
+  --vhyx-color-danger-text:     var(--vhyx-primitive-red-700);
+
+  /* Warning */
+  --vhyx-color-warning:         var(--vhyx-primitive-amber-500);
+  --vhyx-color-warning-hover:   var(--vhyx-primitive-amber-600);
+  --vhyx-color-warning-subtle:  var(--vhyx-primitive-amber-50);
+  --vhyx-color-warning-text:    var(--vhyx-primitive-amber-600);
+
+  /* Info */
+  --vhyx-color-info:            var(--vhyx-primitive-blue-500);
+  --vhyx-color-info-hover:      var(--vhyx-primitive-blue-600);
+  --vhyx-color-info-subtle:     var(--vhyx-primitive-blue-50);
+  --vhyx-color-info-text:       var(--vhyx-primitive-blue-600);
+}

package/src/semantic/index.css

@@ -0,0 +1,7 @@
+@import './colors.css';
+@import './typography.css';
+@import './spacing.css';
+@import './borders.css';
+@import './shadows.css';
+@import './motion.css';
+@import './zindex.css';

package/src/semantic/motion.css

@@ -0,0 +1,123 @@
+:root {
+  /* Duration */
+  --vhyx-duration-instant:  50ms;
+  --vhyx-duration-fast:     100ms;
+  --vhyx-duration-normal:   200ms;
+  --vhyx-duration-slow:     350ms;
+  --vhyx-duration-glacial:  500ms;
+
+  /* Easing */
+  --vhyx-easing-linear:     linear;
+  --vhyx-easing-standard:   cubic-bezier(0.4, 0, 0.2, 1);
+  --vhyx-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
+  --vhyx-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
+  --vhyx-easing-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
+  --vhyx-easing-bounce:     cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --vhyx-easing-smooth:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* Reduced motion — collapses all durations */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --vhyx-duration-instant:  0ms;
+    --vhyx-duration-fast:     0ms;
+    --vhyx-duration-normal:   0ms;
+    --vhyx-duration-slow:     0ms;
+    --vhyx-duration-glacial:  0ms;
+  }
+}
+
+/* Appear / Disappear */
+@keyframes vhyx-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes vhyx-fade-out {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+
+@keyframes vhyx-scale-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to   { opacity: 1; transform: scale(1); }
+}
+@keyframes vhyx-scale-out {
+  from { opacity: 1; transform: scale(1); }
+  to   { opacity: 0; transform: scale(0.95); }
+}
+
+@keyframes vhyx-slide-up-in {
+  from { opacity: 0; transform: translateY(8px) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+@keyframes vhyx-slide-up-out {
+  from { opacity: 1; transform: translateY(0) scale(1); }
+  to   { opacity: 0; transform: translateY(8px) scale(0.98); }
+}
+
+@keyframes vhyx-slide-right-in {
+  from { transform: translateX(100%); }
+  to   { transform: translateX(0); }
+}
+@keyframes vhyx-slide-right-out {
+  from { transform: translateX(0); }
+  to   { transform: translateX(100%); }
+}
+
+@keyframes vhyx-slide-left-in {
+  from { transform: translateX(-100%); }
+  to   { transform: translateX(0); }
+}
+@keyframes vhyx-slide-left-out {
+  from { transform: translateX(0); }
+  to   { transform: translateX(-100%); }
+}
+
+@keyframes vhyx-slide-down-in {
+  from { transform: translateY(-100%); }
+  to   { transform: translateY(0); }
+}
+@keyframes vhyx-slide-down-out {
+  from { transform: translateY(0); }
+  to   { transform: translateY(-100%); }
+}
+
+@keyframes vhyx-overlay-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes vhyx-overlay-out {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+
+/* Feedback */
+@keyframes vhyx-shake {
+  0%, 100% { transform: translateX(0); }
+  20%       { transform: translateX(-6px); }
+  40%       { transform: translateX(6px); }
+  60%       { transform: translateX(-4px); }
+  80%       { transform: translateX(4px); }
+}
+
+@keyframes vhyx-success-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
+  50%       { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.3); }
+}
+
+/* Ambient */
+@keyframes vhyx-spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+@keyframes vhyx-shimmer {
+  from { background-position: -200% center; }
+  to   { background-position: 200% center; }
+}
+
+@keyframes vhyx-indeterminate {
+  0%   { transform: translateX(-100%) scaleX(0.5); }
+  50%  { transform: translateX(0%) scaleX(0.3); }
+  100% { transform: translateX(100%) scaleX(0.5); }
+}

package/src/semantic/shadows.css

@@ -0,0 +1,18 @@
+:root {
+  --vhyx-shadow-none:  none;
+  --vhyx-shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.05);
+  --vhyx-shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.1),
+                       0 1px 2px rgba(0, 0, 0, 0.06);
+  --vhyx-shadow-md:    0 4px 6px rgba(0, 0, 0, 0.07),
+                       0 2px 4px rgba(0, 0, 0, 0.05);
+  --vhyx-shadow-lg:    0 10px 15px rgba(0, 0, 0, 0.1),
+                       0 4px 6px rgba(0, 0, 0, 0.05);
+  --vhyx-shadow-xl:    0 20px 25px rgba(0, 0, 0, 0.1),
+                       0 10px 10px rgba(0, 0, 0, 0.04);
+  --vhyx-shadow-2xl:   0 25px 50px rgba(0, 0, 0, 0.25);
+  --vhyx-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
+
+  /* Focus ring — consistent across all interactive elements */
+  --vhyx-shadow-focus:        0 0 0 3px rgba(99, 102, 241, 0.4);
+  --vhyx-shadow-focus-danger: 0 0 0 3px rgba(239, 68, 68, 0.4);
+}

package/src/semantic/spacing.css

@@ -0,0 +1,45 @@
+:root {
+  --vhyx-space-px:   1px;
+  --vhyx-space-0:    0;
+  --vhyx-space-0-5:  0.125rem;
+  --vhyx-space-1:    0.25rem;
+  --vhyx-space-1-5:  0.375rem;
+  --vhyx-space-2:    0.5rem;
+  --vhyx-space-2-5:  0.625rem;
+  --vhyx-space-3:    0.75rem;
+  --vhyx-space-3-5:  0.875rem;
+  --vhyx-space-4:    1rem;
+  --vhyx-space-5:    1.25rem;
+  --vhyx-space-6:    1.5rem;
+  --vhyx-space-7:    1.75rem;
+  --vhyx-space-8:    2rem;
+  --vhyx-space-9:    2.25rem;
+  --vhyx-space-10:   2.5rem;
+  --vhyx-space-12:   3rem;
+  --vhyx-space-14:   3.5rem;
+  --vhyx-space-16:   4rem;
+  --vhyx-space-20:   5rem;
+  --vhyx-space-24:   6rem;
+  --vhyx-space-32:   8rem;
+
+  /* Component heights — consistent across all interactive elements */
+  --vhyx-size-xs:   1.5rem;
+  --vhyx-size-sm:   2rem;
+  --vhyx-size-md:   2.5rem;
+  --vhyx-size-lg:   3rem;
+  --vhyx-size-xl:   3.5rem;
+
+  /* Drawer panel dimensions */
+  --vhyx-drawer-sm:   20rem;
+  --vhyx-drawer-md:   25rem;
+  --vhyx-drawer-lg:   32rem;
+  --vhyx-drawer-full: 100%;
+
+  /* Dialog panel dimensions */
+  --vhyx-dialog-sm: 20rem;
+  --vhyx-dialog-md: 32rem;
+  --vhyx-dialog-lg: 48rem;
+
+  /* Popover layout constraints */
+  --vhyx-popover-max-width: 20rem;
+}

package/src/semantic/typography.css

@@ -0,0 +1,42 @@
+:root {
+  /* Font families */
+  --vhyx-font-sans:   system-ui, -apple-system, BlinkMacSystemFont,
+                      'Segoe UI', sans-serif;
+  --vhyx-font-mono:   ui-monospace, 'Cascadia Code', 'Fira Code',
+                      'Consolas', monospace;
+  --vhyx-font-serif:  ui-serif, Georgia, serif;
+
+  /* Size scale */
+  --vhyx-text-2xs:   0.625rem;
+  --vhyx-text-xs:    0.75rem;
+  --vhyx-text-sm:    0.875rem;
+  --vhyx-text-md:    1rem;
+  --vhyx-text-lg:    1.125rem;
+  --vhyx-text-xl:    1.25rem;
+  --vhyx-text-2xl:   1.5rem;
+  --vhyx-text-3xl:   1.875rem;
+  --vhyx-text-4xl:   2.25rem;
+
+  /* Line height */
+  --vhyx-leading-none:     1;
+  --vhyx-leading-tight:    1.25;
+  --vhyx-leading-snug:     1.375;
+  --vhyx-leading-normal:   1.5;
+  --vhyx-leading-relaxed:  1.625;
+  --vhyx-leading-loose:    2;
+
+  /* Font weight */
+  --vhyx-weight-light:     300;
+  --vhyx-weight-normal:    400;
+  --vhyx-weight-medium:    500;
+  --vhyx-weight-semibold:  600;
+  --vhyx-weight-bold:      700;
+  --vhyx-weight-extrabold: 800;
+
+  /* Letter spacing */
+  --vhyx-tracking-tight:   -0.025em;
+  --vhyx-tracking-normal:  0em;
+  --vhyx-tracking-wide:    0.025em;
+  --vhyx-tracking-wider:   0.05em;
+  --vhyx-tracking-widest:  0.1em;
+}

package/src/semantic/zindex.css

@@ -0,0 +1,14 @@
+:root {
+  --vhyx-z-hide:      -1;
+  --vhyx-z-base:       0;
+  --vhyx-z-raised:     10;
+  --vhyx-z-dropdown:   100;
+  --vhyx-z-sticky:     200;
+  --vhyx-z-banner:     250;
+  --vhyx-z-overlay:    300;
+  --vhyx-z-modal:      400;
+  --vhyx-z-popover:    450;
+  --vhyx-z-toast:      500;
+  --vhyx-z-tooltip:    550;
+  --vhyx-z-top:        999;
+}

package/src/themes/dark.css

@@ -0,0 +1,29 @@
+[data-theme="dark"] {
+  --vhyx-color-bg:              var(--vhyx-primitive-slate-950);
+  --vhyx-color-bg-subtle:       var(--vhyx-primitive-slate-900);
+  --vhyx-color-bg-muted:        var(--vhyx-primitive-slate-800);
+  --vhyx-color-bg-inverse:      var(--vhyx-primitive-slate-50);
+
+  --vhyx-color-surface:         var(--vhyx-primitive-slate-900);
+  --vhyx-color-surface-raised:  var(--vhyx-primitive-slate-800);
+  --vhyx-color-surface-overlay: var(--vhyx-primitive-slate-800);
+  --vhyx-color-overlay:         rgba(0, 0, 0, 0.65);
+
+  --vhyx-color-border:          var(--vhyx-primitive-slate-800);
+  --vhyx-color-border-strong:   var(--vhyx-primitive-slate-700);
+  --vhyx-color-border-focus:    var(--vhyx-primitive-indigo-400);
+
+  --vhyx-color-text:            var(--vhyx-primitive-slate-50);
+  --vhyx-color-text-subtle:     var(--vhyx-primitive-slate-400);
+  --vhyx-color-text-muted:      var(--vhyx-primitive-slate-500);
+  --vhyx-color-text-disabled:   var(--vhyx-primitive-slate-600);
+  --vhyx-color-text-inverse:    var(--vhyx-primitive-slate-900);
+
+  --vhyx-color-accent-subtle:   #1e1b4b;
+  --vhyx-color-accent-muted:    #312e81;
+
+  --vhyx-color-success-subtle:  #052e16;
+  --vhyx-color-danger-subtle:   #450a0a;
+  --vhyx-color-warning-subtle:  #431407;
+  --vhyx-color-info-subtle:     #0c1a45;
+}

package/src/themes/index.css

@@ -0,0 +1 @@
+@import './dark.css';