npm - @usevyre/ai-context - Versions diffs - 0.2.0 → 0.2.2 - Mend

@usevyre/ai-context 0.2.0 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/tokens.json ADDED Viewed

@@ -0,0 +1,1388 @@
+{
+  "$schema": "https://usevyre.com/schemas/ai-tokens-v1.json",
+  "version": "0.1.2",
+  "generatedAt": "2026-05-08T09:57:54.742Z",
+  "description": "useVyre design tokens — machine-readable reference for AI agents. Use semantic color tokens; never use primitive tokens directly in components.",
+  "naming": {
+    "convention": "--vyre-[category]-[subcategory]-[variant]",
+    "cssPrefix": "--vyre-",
+    "themeAttribute": "data-theme",
+    "themeValues": [
+      "light",
+      "dark"
+    ],
+    "themeDefault": "light"
+  },
+  "rules": [
+    "NEVER use primitive tokens (--vyre-color-primitive-*) in components — use semantic tokens instead.",
+    "Semantic tokens adapt automatically to light/dark theme via [data-theme] attribute on <html>.",
+    "For interactive hover states, use the -hover suffix variant of the token.",
+    "For low-opacity backgrounds (badges, highlights), use -subtle suffix tokens.",
+    "Text hierarchy: text-primary > text-secondary > text-muted > text-disabled.",
+    "For text on accent/colored backgrounds, use text-inverse or accent-foreground.",
+    "Import CSS: @import \"@usevyre/tokens/css\". Import JS: import { tokens } from \"@usevyre/tokens\".",
+    "Use cssVar() helper to reference tokens in JS: cssVar('color-semantic-accent') → var(--vyre-color-semantic-accent)."
+  ],
+  "categories": {
+    "color": {
+      "description": "Color tokens. Use semantic tokens in all components. Primitive tokens are raw palette values — internal use only.",
+      "primitive": {
+        "description": "Raw color palette. DO NOT USE DIRECTLY in components — use semantic tokens.",
+        "note": "Reference: @usevyre/tokens/json → color.primitive"
+      },
+      "semantic": [
+        {
+          "name": "color.semantic.background",
+          "cssVar": "--vyre-color-semantic-background",
+          "jsKey": "colorSemanticBackground",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#ffffff",
+            "dark": "#09090b"
+          },
+          "aliases": {
+            "light": "color.primitive.neutral.0",
+            "dark": "color.primitive.neutral.950"
+          },
+          "description": "Page/app background. Deepest layer.",
+          "usage": [
+            "Page/app root background",
+            "Layout wrapper background"
+          ],
+          "relatedTokens": [
+            "color.semantic.surface"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.surface",
+          "cssVar": "--vyre-color-semantic-surface",
+          "jsKey": "colorSemanticSurface",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#fafafa",
+            "dark": "#18181b"
+          },
+          "aliases": {
+            "light": "color.primitive.neutral.50",
+            "dark": "color.primitive.neutral.900"
+          },
+          "description": "Cards, panels, sidebars.",
+          "usage": [
+            "Card background",
+            "Panel background",
+            "Sidebar background"
+          ],
+          "relatedTokens": [
+            "color.semantic.background",
+            "color.semantic.surface-raised"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.surface-raised",
+          "cssVar": "--vyre-color-semantic-surface-raised",
+          "jsKey": "colorSemanticSurfaceRaised",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#f4f4f5",
+            "dark": "#27272a"
+          },
+          "aliases": {
+            "light": "color.primitive.neutral.100",
+            "dark": "color.primitive.neutral.800"
+          },
+          "description": "Dropdowns, popovers, elevated cards.",
+          "usage": [
+            "Dropdown background",
+            "Popover background",
+            "Elevated card background"
+          ],
+          "relatedTokens": [
+            "color.semantic.surface",
+            "color.semantic.surface-overlay"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.surface-overlay",
+          "cssVar": "--vyre-color-semantic-surface-overlay",
+          "jsKey": "colorSemanticSurfaceOverlay",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#ffffff",
+            "dark": "#333338"
+          },
+          "aliases": {
+            "light": "color.primitive.neutral.0",
+            "dark": "color.primitive.neutral.750"
+          },
+          "description": "Modals, tooltips, highest elevation.",
+          "usage": [
+            "Modal background",
+            "Tooltip background",
+            "Highest-elevation overlay"
+          ],
+          "relatedTokens": [
+            "color.semantic.surface-raised"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.border",
+          "cssVar": "--vyre-color-semantic-border",
+          "jsKey": "colorSemanticBorder",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#e4e4e7",
+            "dark": "#3f3f46"
+          },
+          "aliases": {
+            "light": "color.primitive.neutral.200",
+            "dark": "color.primitive.neutral.700"
+          },
+          "description": "Default border for cards, inputs, dividers.",
+          "usage": [
+            "Card border",
+            "Input border",
+            "Divider/Separator"
+          ],
+          "relatedTokens": [
+            "color.semantic.border-subtle",
+            "color.semantic.border-strong"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.border-subtle",
+          "cssVar": "--vyre-color-semantic-border-subtle",
+          "jsKey": "colorSemanticBorderSubtle",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#ebebec",
+            "dark": "#27272a"
+          },
+          "aliases": {
+            "light": "color.primitive.neutral.150",
+            "dark": "color.primitive.neutral.800"
+          },
+          "description": "Very low contrast border. Section dividers.",
+          "usage": [
+            "Section divider",
+            "Low-contrast rule between rows"
+          ],
+          "relatedTokens": [
+            "color.semantic.border"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.border-strong",
+          "cssVar": "--vyre-color-semantic-border-strong",
+          "jsKey": "colorSemanticBorderStrong",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#a1a1aa",
+            "dark": "#71717a"
+          },
+          "aliases": {
+            "light": "color.primitive.neutral.400",
+            "dark": "color.primitive.neutral.500"
+          },
+          "description": "Focused inputs, selected states.",
+          "usage": [
+            "Input focus ring",
+            "Selected item border",
+            "Active tab underline"
+          ],
+          "relatedTokens": [
+            "color.semantic.border"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.text-primary",
+          "cssVar": "--vyre-color-semantic-text-primary",
+          "jsKey": "colorSemanticTextPrimary",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#09090b",
+            "dark": "#fafafa"
+          },
+          "aliases": {
+            "light": "color.primitive.neutral.950",
+            "dark": "color.primitive.neutral.50"
+          },
+          "description": "Headings, body text, primary content.",
+          "usage": [
+            "Heading text",
+            "Body copy",
+            "Button label (on neutral bg)"
+          ],
+          "relatedTokens": [
+            "color.semantic.text-secondary",
+            "color.semantic.text-muted"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.text-secondary",
+          "cssVar": "--vyre-color-semantic-text-secondary",
+          "jsKey": "colorSemanticTextSecondary",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#52525b",
+            "dark": "#d1d1d6"
+          },
+          "aliases": {
+            "light": "color.primitive.neutral.600",
+            "dark": "color.primitive.neutral.300"
+          },
+          "description": "Subtitles, descriptions, supporting text.",
+          "usage": [
+            "Subtitle",
+            "Description text",
+            "Supporting label"
+          ],
+          "relatedTokens": [
+            "color.semantic.text-primary",
+            "color.semantic.text-muted"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.text-muted",
+          "cssVar": "--vyre-color-semantic-text-muted",
+          "jsKey": "colorSemanticTextMuted",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#a1a1aa",
+            "dark": "#71717a"
+          },
+          "aliases": {
+            "light": "color.primitive.neutral.400",
+            "dark": "color.primitive.neutral.500"
+          },
+          "description": "Placeholders, timestamps, helper text.",
+          "usage": [
+            "Placeholder text",
+            "Timestamp",
+            "Helper hint",
+            "Caption"
+          ],
+          "relatedTokens": [
+            "color.semantic.text-secondary",
+            "color.semantic.text-disabled"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.text-disabled",
+          "cssVar": "--vyre-color-semantic-text-disabled",
+          "jsKey": "colorSemanticTextDisabled",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#d1d1d6",
+            "dark": "#52525b"
+          },
+          "aliases": {
+            "light": "color.primitive.neutral.300",
+            "dark": "color.primitive.neutral.600"
+          },
+          "description": "Disabled state text.",
+          "usage": [
+            "Disabled input text",
+            "Greyed-out label"
+          ],
+          "relatedTokens": [
+            "color.semantic.text-muted"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.text-inverse",
+          "cssVar": "--vyre-color-semantic-text-inverse",
+          "jsKey": "colorSemanticTextInverse",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#ffffff",
+            "dark": "#09090b"
+          },
+          "aliases": {
+            "light": "color.primitive.neutral.0",
+            "dark": "color.primitive.neutral.950"
+          },
+          "description": "Text on dark/accent backgrounds.",
+          "usage": [
+            "Text on dark/accent background",
+            "Text inside accent-colored badge"
+          ],
+          "relatedTokens": [
+            "color.semantic.accent-foreground"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.accent",
+          "cssVar": "--vyre-color-semantic-accent",
+          "jsKey": "colorSemanticAccent",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#7c3aed",
+            "dark": "#a78bfa"
+          },
+          "aliases": {
+            "light": "color.primitive.violet.600",
+            "dark": "color.primitive.violet.400"
+          },
+          "description": "Primary brand accent. CTAs, highlights, focus rings.",
+          "usage": [
+            "Button primary background",
+            "Link active state",
+            "Focus ring",
+            "Badge accent variant",
+            "Active nav indicator"
+          ],
+          "relatedTokens": [
+            "color.semantic.accent-hover",
+            "color.semantic.accent-foreground",
+            "color.semantic.accent-subtle",
+            "color.semantic.accent-subtle-border"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.accent-hover",
+          "cssVar": "--vyre-color-semantic-accent-hover",
+          "jsKey": "colorSemanticAccentHover",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#6d28d9",
+            "dark": "#c4b5fd"
+          },
+          "aliases": {
+            "light": "color.primitive.violet.700",
+            "dark": "color.primitive.violet.300"
+          },
+          "description": "Hover state for accent elements.",
+          "usage": [
+            "Button primary hover state"
+          ],
+          "relatedTokens": [
+            "color.semantic.accent"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.accent-foreground",
+          "cssVar": "--vyre-color-semantic-accent-foreground",
+          "jsKey": "colorSemanticAccentForeground",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#ffffff",
+            "dark": "#09090b"
+          },
+          "aliases": {
+            "light": "color.primitive.neutral.0",
+            "dark": "color.primitive.neutral.950"
+          },
+          "description": "Text color on accent background.",
+          "usage": [
+            "Text/icon on accent-colored background"
+          ],
+          "relatedTokens": [
+            "color.semantic.accent",
+            "color.semantic.accent-subtle"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.accent-subtle",
+          "cssVar": "--vyre-color-semantic-accent-subtle",
+          "jsKey": "colorSemanticAccentSubtle",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#f5f3ff",
+            "dark": "rgba(139, 92, 246, 0.12)"
+          },
+          "aliases": {
+            "light": "color.primitive.violet.50",
+            "dark": null
+          },
+          "description": "Low-opacity accent for badge backgrounds, highlights.",
+          "usage": [
+            "Accent badge background",
+            "Highlighted row background",
+            "Chip background"
+          ],
+          "relatedTokens": [
+            "color.semantic.accent",
+            "color.semantic.accent-subtle-border"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.accent-subtle-border",
+          "cssVar": "--vyre-color-semantic-accent-subtle-border",
+          "jsKey": "colorSemanticAccentSubtleBorder",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#ddd6fe",
+            "dark": "rgba(139, 92, 246, 0.25)"
+          },
+          "aliases": {
+            "light": "color.primitive.violet.200",
+            "dark": null
+          },
+          "description": "Border for accent subtle containers.",
+          "usage": [
+            "Border of accent-subtle containers"
+          ],
+          "relatedTokens": [
+            "color.semantic.accent-subtle"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.teal",
+          "cssVar": "--vyre-color-semantic-teal",
+          "jsKey": "colorSemanticTeal",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#14b8a6",
+            "dark": "#2dd4bf"
+          },
+          "aliases": {
+            "light": "color.primitive.teal.500",
+            "dark": "color.primitive.teal.400"
+          },
+          "description": "Secondary accent. Code, AI-context indicators.",
+          "usage": [
+            "Button teal variant",
+            "Code block accent",
+            "AI-context indicator",
+            "Badge teal variant"
+          ],
+          "relatedTokens": [
+            "color.semantic.teal-hover",
+            "color.semantic.teal-subtle"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.teal-hover",
+          "cssVar": "--vyre-color-semantic-teal-hover",
+          "jsKey": "colorSemanticTealHover",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#0d9488",
+            "dark": "#5eead4"
+          },
+          "aliases": {
+            "light": "color.primitive.teal.600",
+            "dark": "color.primitive.teal.300"
+          },
+          "description": "Hover state for teal elements.",
+          "usage": [
+            "Teal button hover state"
+          ],
+          "relatedTokens": [
+            "color.semantic.teal"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.teal-subtle",
+          "cssVar": "--vyre-color-semantic-teal-subtle",
+          "jsKey": "colorSemanticTealSubtle",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "rgba(20, 184, 166, 0.08)",
+            "dark": "rgba(45, 212, 191, 0.10)"
+          },
+          "aliases": {
+            "light": null,
+            "dark": null
+          },
+          "description": "Low-opacity teal for badge backgrounds.",
+          "usage": [
+            "Teal badge background"
+          ],
+          "relatedTokens": [
+            "color.semantic.teal"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.success",
+          "cssVar": "--vyre-color-semantic-success",
+          "jsKey": "colorSemanticSuccess",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#16a34a",
+            "dark": "#4ade80"
+          },
+          "aliases": {
+            "light": "color.primitive.green.600",
+            "dark": "color.primitive.green.400"
+          },
+          "description": "Success states, confirmations.",
+          "usage": [
+            "Success alert icon/text",
+            "Toast success border-left",
+            "Badge success variant"
+          ],
+          "relatedTokens": [
+            "color.semantic.success-subtle",
+            "color.semantic.success-subtle-border"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.success-subtle",
+          "cssVar": "--vyre-color-semantic-success-subtle",
+          "jsKey": "colorSemanticSuccessSubtle",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#f0fdf4",
+            "dark": "rgba(74, 222, 128, 0.10)"
+          },
+          "aliases": {
+            "light": "color.primitive.green.50",
+            "dark": null
+          },
+          "description": "Success badge background.",
+          "usage": [
+            "Success alert background",
+            "Success badge background"
+          ],
+          "relatedTokens": [
+            "color.semantic.success",
+            "color.semantic.success-subtle-border"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.success-subtle-border",
+          "cssVar": "--vyre-color-semantic-success-subtle-border",
+          "jsKey": "colorSemanticSuccessSubtleBorder",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#dcfce7",
+            "dark": "rgba(74, 222, 128, 0.20)"
+          },
+          "aliases": {
+            "light": "color.primitive.green.100",
+            "dark": null
+          },
+          "description": "Border for success subtle containers.",
+          "usage": [
+            "Success alert border"
+          ],
+          "relatedTokens": [
+            "color.semantic.success",
+            "color.semantic.success-subtle"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.warning",
+          "cssVar": "--vyre-color-semantic-warning",
+          "jsKey": "colorSemanticWarning",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#f59e0b",
+            "dark": "#fbbf24"
+          },
+          "aliases": {
+            "light": "color.primitive.amber.500",
+            "dark": "color.primitive.amber.400"
+          },
+          "description": "Warning states, beta indicators.",
+          "usage": [
+            "Warning alert icon/text",
+            "Toast warning border-left",
+            "Badge warning variant",
+            "Beta indicator"
+          ],
+          "relatedTokens": [
+            "color.semantic.warning-subtle",
+            "color.semantic.warning-subtle-border"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.warning-subtle",
+          "cssVar": "--vyre-color-semantic-warning-subtle",
+          "jsKey": "colorSemanticWarningSubtle",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#fffbeb",
+            "dark": "rgba(251, 191, 36, 0.10)"
+          },
+          "aliases": {
+            "light": "color.primitive.amber.50",
+            "dark": null
+          },
+          "description": "Warning badge background.",
+          "usage": [
+            "Warning alert background",
+            "Warning badge background"
+          ],
+          "relatedTokens": [
+            "color.semantic.warning",
+            "color.semantic.warning-subtle-border"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.warning-subtle-border",
+          "cssVar": "--vyre-color-semantic-warning-subtle-border",
+          "jsKey": "colorSemanticWarningSubtleBorder",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#fef3c7",
+            "dark": "rgba(251, 191, 36, 0.20)"
+          },
+          "aliases": {
+            "light": "color.primitive.amber.100",
+            "dark": null
+          },
+          "description": "Border for warning subtle containers.",
+          "usage": [
+            "Warning alert border"
+          ],
+          "relatedTokens": [
+            "color.semantic.warning",
+            "color.semantic.warning-subtle"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.danger",
+          "cssVar": "--vyre-color-semantic-danger",
+          "jsKey": "colorSemanticDanger",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#dc2626",
+            "dark": "#f87171"
+          },
+          "aliases": {
+            "light": "color.primitive.red.600",
+            "dark": "color.primitive.red.400"
+          },
+          "description": "Error states, destructive actions.",
+          "usage": [
+            "Button danger variant",
+            "Error alert icon/text",
+            "Toast error border-left",
+            "Badge danger variant",
+            "Destructive action text"
+          ],
+          "relatedTokens": [
+            "color.semantic.danger-hover",
+            "color.semantic.danger-subtle",
+            "color.semantic.danger-subtle-border"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.danger-hover",
+          "cssVar": "--vyre-color-semantic-danger-hover",
+          "jsKey": "colorSemanticDangerHover",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#ef4444",
+            "dark": "#ef4444"
+          },
+          "aliases": {
+            "light": "color.primitive.red.500",
+            "dark": "color.primitive.red.500"
+          },
+          "description": "Hover state for danger elements.",
+          "usage": [
+            "Danger button hover state"
+          ],
+          "relatedTokens": [
+            "color.semantic.danger"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.danger-subtle",
+          "cssVar": "--vyre-color-semantic-danger-subtle",
+          "jsKey": "colorSemanticDangerSubtle",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#fef2f2",
+            "dark": "rgba(248, 113, 113, 0.10)"
+          },
+          "aliases": {
+            "light": "color.primitive.red.50",
+            "dark": null
+          },
+          "description": "Error badge background.",
+          "usage": [
+            "Error alert background",
+            "Danger badge background"
+          ],
+          "relatedTokens": [
+            "color.semantic.danger",
+            "color.semantic.danger-subtle-border"
+          ],
+          "doNotUseDirectly": false
+        },
+        {
+          "name": "color.semantic.danger-subtle-border",
+          "cssVar": "--vyre-color-semantic-danger-subtle-border",
+          "jsKey": "colorSemanticDangerSubtleBorder",
+          "category": "color",
+          "subcategory": "semantic",
+          "values": {
+            "light": "#fee2e2",
+            "dark": "rgba(248, 113, 113, 0.20)"
+          },
+          "aliases": {
+            "light": "color.primitive.red.100",
+            "dark": null
+          },
+          "description": "Border for danger subtle containers.",
+          "usage": [
+            "Error alert border"
+          ],
+          "relatedTokens": [
+            "color.semantic.danger",
+            "color.semantic.danger-subtle"
+          ],
+          "doNotUseDirectly": false
+        }
+      ]
+    },
+    "spacing": {
+      "description": "4px base grid. Use for padding, margin, gap.",
+      "tokens": [
+        {
+          "name": "spacing.0",
+          "cssVar": "--vyre-spacing-0",
+          "jsKey": "spacing0",
+          "category": "spacing",
+          "value": "0",
+          "description": ""
+        },
+        {
+          "name": "spacing.1",
+          "cssVar": "--vyre-spacing-1",
+          "jsKey": "spacing1",
+          "category": "spacing",
+          "value": "0.25rem",
+          "description": "4px"
+        },
+        {
+          "name": "spacing.2",
+          "cssVar": "--vyre-spacing-2",
+          "jsKey": "spacing2",
+          "category": "spacing",
+          "value": "0.5rem",
+          "description": "8px"
+        },
+        {
+          "name": "spacing.3",
+          "cssVar": "--vyre-spacing-3",
+          "jsKey": "spacing3",
+          "category": "spacing",
+          "value": "0.75rem",
+          "description": "12px"
+        },
+        {
+          "name": "spacing.4",
+          "cssVar": "--vyre-spacing-4",
+          "jsKey": "spacing4",
+          "category": "spacing",
+          "value": "1rem",
+          "description": "16px"
+        },
+        {
+          "name": "spacing.5",
+          "cssVar": "--vyre-spacing-5",
+          "jsKey": "spacing5",
+          "category": "spacing",
+          "value": "1.25rem",
+          "description": "20px"
+        },
+        {
+          "name": "spacing.6",
+          "cssVar": "--vyre-spacing-6",
+          "jsKey": "spacing6",
+          "category": "spacing",
+          "value": "1.5rem",
+          "description": "24px"
+        },
+        {
+          "name": "spacing.8",
+          "cssVar": "--vyre-spacing-8",
+          "jsKey": "spacing8",
+          "category": "spacing",
+          "value": "2rem",
+          "description": "32px"
+        },
+        {
+          "name": "spacing.10",
+          "cssVar": "--vyre-spacing-10",
+          "jsKey": "spacing10",
+          "category": "spacing",
+          "value": "2.5rem",
+          "description": "40px"
+        },
+        {
+          "name": "spacing.12",
+          "cssVar": "--vyre-spacing-12",
+          "jsKey": "spacing12",
+          "category": "spacing",
+          "value": "3rem",
+          "description": "48px"
+        },
+        {
+          "name": "spacing.16",
+          "cssVar": "--vyre-spacing-16",
+          "jsKey": "spacing16",
+          "category": "spacing",
+          "value": "4rem",
+          "description": "64px"
+        },
+        {
+          "name": "spacing.20",
+          "cssVar": "--vyre-spacing-20",
+          "jsKey": "spacing20",
+          "category": "spacing",
+          "value": "5rem",
+          "description": "80px"
+        },
+        {
+          "name": "spacing.24",
+          "cssVar": "--vyre-spacing-24",
+          "jsKey": "spacing24",
+          "category": "spacing",
+          "value": "6rem",
+          "description": "96px"
+        }
+      ]
+    },
+    "typography": {
+      "description": "Font families, sizes, weights, line heights.",
+      "tokens": [
+        {
+          "name": "typography.font.family.display",
+          "cssVar": "--vyre-typography-font-family-display",
+          "jsKey": "typographyFontFamilyDisplay",
+          "category": "typography",
+          "subcategory": "font-family",
+          "value": "'Geist', 'Inter', system-ui, sans-serif",
+          "description": "Headlines, hero text, display type."
+        },
+        {
+          "name": "typography.font.family.body",
+          "cssVar": "--vyre-typography-font-family-body",
+          "jsKey": "typographyFontFamilyBody",
+          "category": "typography",
+          "subcategory": "font-family",
+          "value": "'Geist', 'Inter', system-ui, sans-serif",
+          "description": "Body copy, UI labels, all general text."
+        },
+        {
+          "name": "typography.font.family.mono",
+          "cssVar": "--vyre-typography-font-family-mono",
+          "jsKey": "typographyFontFamilyMono",
+          "category": "typography",
+          "subcategory": "font-family",
+          "value": "'Geist Mono', 'JetBrains Mono', monospace",
+          "description": "Code, tokens, technical labels, AI hints."
+        },
+        {
+          "name": "typography.font.size.2xs",
+          "cssVar": "--vyre-typography-font-size-2xs",
+          "jsKey": "typographyFontSize2xs",
+          "category": "typography",
+          "subcategory": "font-size",
+          "value": "0.625rem",
+          "description": "10px. Tiny labels only."
+        },
+        {
+          "name": "typography.font.size.xs",
+          "cssVar": "--vyre-typography-font-size-xs",
+          "jsKey": "typographyFontSizeXs",
+          "category": "typography",
+          "subcategory": "font-size",
+          "value": "0.6875rem",
+          "description": "11px. Badge text, captions."
+        },
+        {
+          "name": "typography.font.size.sm",
+          "cssVar": "--vyre-typography-font-size-sm",
+          "jsKey": "typographyFontSizeSm",
+          "category": "typography",
+          "subcategory": "font-size",
+          "value": "0.8125rem",
+          "description": "13px. Default UI text, buttons."
+        },
+        {
+          "name": "typography.font.size.md",
+          "cssVar": "--vyre-typography-font-size-md",
+          "jsKey": "typographyFontSizeMd",
+          "category": "typography",
+          "subcategory": "font-size",
+          "value": "0.9375rem",
+          "description": "15px. Body text."
+        },
+        {
+          "name": "typography.font.size.lg",
+          "cssVar": "--vyre-typography-font-size-lg",
+          "jsKey": "typographyFontSizeLg",
+          "category": "typography",
+          "subcategory": "font-size",
+          "value": "1.125rem",
+          "description": "18px. Large body, small headings."
+        },
+        {
+          "name": "typography.font.size.xl",
+          "cssVar": "--vyre-typography-font-size-xl",
+          "jsKey": "typographyFontSizeXl",
+          "category": "typography",
+          "subcategory": "font-size",
+          "value": "1.375rem",
+          "description": "22px. Section headings."
+        },
+        {
+          "name": "typography.font.size.2xl",
+          "cssVar": "--vyre-typography-font-size-2xl",
+          "jsKey": "typographyFontSize2xl",
+          "category": "typography",
+          "subcategory": "font-size",
+          "value": "1.75rem",
+          "description": "28px. Page headings."
+        },
+        {
+          "name": "typography.font.size.3xl",
+          "cssVar": "--vyre-typography-font-size-3xl",
+          "jsKey": "typographyFontSize3xl",
+          "category": "typography",
+          "subcategory": "font-size",
+          "value": "2.25rem",
+          "description": "36px. Large headings."
+        },
+        {
+          "name": "typography.font.size.4xl",
+          "cssVar": "--vyre-typography-font-size-4xl",
+          "jsKey": "typographyFontSize4xl",
+          "category": "typography",
+          "subcategory": "font-size",
+          "value": "3rem",
+          "description": "48px. Hero headings."
+        },
+        {
+          "name": "typography.font.size.5xl",
+          "cssVar": "--vyre-typography-font-size-5xl",
+          "jsKey": "typographyFontSize5xl",
+          "category": "typography",
+          "subcategory": "font-size",
+          "value": "4rem",
+          "description": "64px. Display headings."
+        },
+        {
+          "name": "typography.font.weight.light",
+          "cssVar": "--vyre-typography-font-weight-light",
+          "jsKey": "typographyFontWeightLight",
+          "category": "typography",
+          "subcategory": "font-weight",
+          "value": "300",
+          "description": ""
+        },
+        {
+          "name": "typography.font.weight.regular",
+          "cssVar": "--vyre-typography-font-weight-regular",
+          "jsKey": "typographyFontWeightRegular",
+          "category": "typography",
+          "subcategory": "font-weight",
+          "value": "400",
+          "description": ""
+        },
+        {
+          "name": "typography.font.weight.medium",
+          "cssVar": "--vyre-typography-font-weight-medium",
+          "jsKey": "typographyFontWeightMedium",
+          "category": "typography",
+          "subcategory": "font-weight",
+          "value": "500",
+          "description": ""
+        },
+        {
+          "name": "typography.font.weight.semibold",
+          "cssVar": "--vyre-typography-font-weight-semibold",
+          "jsKey": "typographyFontWeightSemibold",
+          "category": "typography",
+          "subcategory": "font-weight",
+          "value": "600",
+          "description": ""
+        },
+        {
+          "name": "typography.font.weight.bold",
+          "cssVar": "--vyre-typography-font-weight-bold",
+          "jsKey": "typographyFontWeightBold",
+          "category": "typography",
+          "subcategory": "font-weight",
+          "value": "700",
+          "description": ""
+        },
+        {
+          "name": "typography.line.height.none",
+          "cssVar": "--vyre-typography-line-height-none",
+          "jsKey": "typographyLineHeightNone",
+          "category": "typography",
+          "subcategory": "line-height",
+          "value": "1",
+          "description": ""
+        },
+        {
+          "name": "typography.line.height.tight",
+          "cssVar": "--vyre-typography-line-height-tight",
+          "jsKey": "typographyLineHeightTight",
+          "category": "typography",
+          "subcategory": "line-height",
+          "value": "1.2",
+          "description": ""
+        },
+        {
+          "name": "typography.line.height.snug",
+          "cssVar": "--vyre-typography-line-height-snug",
+          "jsKey": "typographyLineHeightSnug",
+          "category": "typography",
+          "subcategory": "line-height",
+          "value": "1.35",
+          "description": ""
+        },
+        {
+          "name": "typography.line.height.normal",
+          "cssVar": "--vyre-typography-line-height-normal",
+          "jsKey": "typographyLineHeightNormal",
+          "category": "typography",
+          "subcategory": "line-height",
+          "value": "1.5",
+          "description": ""
+        },
+        {
+          "name": "typography.line.height.relaxed",
+          "cssVar": "--vyre-typography-line-height-relaxed",
+          "jsKey": "typographyLineHeightRelaxed",
+          "category": "typography",
+          "subcategory": "line-height",
+          "value": "1.7",
+          "description": ""
+        }
+      ]
+    },
+    "borderRadius": {
+      "description": "Corner radii. md (8px) is default for most components.",
+      "tokens": [
+        {
+          "name": "border.radius.none",
+          "cssVar": "--vyre-border-radius-none",
+          "jsKey": "borderRadiusNone",
+          "category": "borderRadius",
+          "value": "0",
+          "description": ""
+        },
+        {
+          "name": "border.radius.sm",
+          "cssVar": "--vyre-border-radius-sm",
+          "jsKey": "borderRadiusSm",
+          "category": "borderRadius",
+          "value": "0.375rem",
+          "description": "6px. Tight corners."
+        },
+        {
+          "name": "border.radius.md",
+          "cssVar": "--vyre-border-radius-md",
+          "jsKey": "borderRadiusMd",
+          "category": "borderRadius",
+          "value": "0.5rem",
+          "description": "8px. Default component radius."
+        },
+        {
+          "name": "border.radius.lg",
+          "cssVar": "--vyre-border-radius-lg",
+          "jsKey": "borderRadiusLg",
+          "category": "borderRadius",
+          "value": "0.75rem",
+          "description": "12px. Cards, panels."
+        },
+        {
+          "name": "border.radius.xl",
+          "cssVar": "--vyre-border-radius-xl",
+          "jsKey": "borderRadiusXl",
+          "category": "borderRadius",
+          "value": "1rem",
+          "description": "16px. Large cards."
+        },
+        {
+          "name": "border.radius.2xl",
+          "cssVar": "--vyre-border-radius-2xl",
+          "jsKey": "borderRadius2xl",
+          "category": "borderRadius",
+          "value": "1.5rem",
+          "description": "24px. Modals, sheets."
+        },
+        {
+          "name": "border.radius.full",
+          "cssVar": "--vyre-border-radius-full",
+          "jsKey": "borderRadiusFull",
+          "category": "borderRadius",
+          "value": "9999px",
+          "description": "Badges, pills, avatars."
+        }
+      ]
+    },
+    "shadow": {
+      "description": "Elevation shadows. -dark variants for dark theme.",
+      "tokens": [
+        {
+          "name": "shadow.sm",
+          "cssVar": "--vyre-shadow-sm",
+          "jsKey": "shadowSm",
+          "category": "shadow",
+          "value": "0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04)",
+          "description": ""
+        },
+        {
+          "name": "shadow.md",
+          "cssVar": "--vyre-shadow-md",
+          "jsKey": "shadowMd",
+          "category": "shadow",
+          "value": "0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06)",
+          "description": ""
+        },
+        {
+          "name": "shadow.lg",
+          "cssVar": "--vyre-shadow-lg",
+          "jsKey": "shadowLg",
+          "category": "shadow",
+          "value": "0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05)",
+          "description": ""
+        },
+        {
+          "name": "shadow.xl",
+          "cssVar": "--vyre-shadow-xl",
+          "jsKey": "shadowXl",
+          "category": "shadow",
+          "value": "0 20px 25px rgba(0,0,0,0.10), 0 8px 10px rgba(0,0,0,0.06)",
+          "description": ""
+        },
+        {
+          "name": "shadow.sm.dark",
+          "cssVar": "--vyre-shadow-sm-dark",
+          "jsKey": "shadowSmDark",
+          "category": "shadow",
+          "value": "0 1px 2px rgba(0,0,0,0.4)",
+          "description": ""
+        },
+        {
+          "name": "shadow.md.dark",
+          "cssVar": "--vyre-shadow-md-dark",
+          "jsKey": "shadowMdDark",
+          "category": "shadow",
+          "value": "0 4px 12px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3)",
+          "description": ""
+        },
+        {
+          "name": "shadow.lg.dark",
+          "cssVar": "--vyre-shadow-lg-dark",
+          "jsKey": "shadowLgDark",
+          "category": "shadow",
+          "value": "0 12px 32px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.3)",
+          "description": ""
+        },
+        {
+          "name": "shadow.xl.dark",
+          "cssVar": "--vyre-shadow-xl-dark",
+          "jsKey": "shadowXlDark",
+          "category": "shadow",
+          "value": "0 24px 64px rgba(0,0,0,0.6), 0 8px 16px rgba(0,0,0,0.3)",
+          "description": ""
+        },
+        {
+          "name": "shadow.glow.accent",
+          "cssVar": "--vyre-shadow-glow-accent",
+          "jsKey": "shadowGlowAccent",
+          "category": "shadow",
+          "value": "0 0 0 3px rgba(124, 58, 237, 0.15)",
+          "description": ""
+        },
+        {
+          "name": "shadow.glow.teal",
+          "cssVar": "--vyre-shadow-glow-teal",
+          "jsKey": "shadowGlowTeal",
+          "category": "shadow",
+          "value": "0 0 0 3px rgba(20, 184, 166, 0.15)",
+          "description": ""
+        }
+      ]
+    },
+    "transition": {
+      "description": "Duration and easing for animations.",
+      "tokens": [
+        {
+          "name": "transition.duration.instant",
+          "cssVar": "--vyre-transition-duration-instant",
+          "jsKey": "transitionDurationInstant",
+          "category": "transition",
+          "subcategory": "duration",
+          "value": "80ms",
+          "description": ""
+        },
+        {
+          "name": "transition.duration.fast",
+          "cssVar": "--vyre-transition-duration-fast",
+          "jsKey": "transitionDurationFast",
+          "category": "transition",
+          "subcategory": "duration",
+          "value": "120ms",
+          "description": ""
+        },
+        {
+          "name": "transition.duration.normal",
+          "cssVar": "--vyre-transition-duration-normal",
+          "jsKey": "transitionDurationNormal",
+          "category": "transition",
+          "subcategory": "duration",
+          "value": "200ms",
+          "description": ""
+        },
+        {
+          "name": "transition.duration.slow",
+          "cssVar": "--vyre-transition-duration-slow",
+          "jsKey": "transitionDurationSlow",
+          "category": "transition",
+          "subcategory": "duration",
+          "value": "350ms",
+          "description": ""
+        },
+        {
+          "name": "transition.easing.out",
+          "cssVar": "--vyre-transition-easing-out",
+          "jsKey": "transitionEasingOut",
+          "category": "transition",
+          "subcategory": "easing",
+          "value": "cubic-bezier(0.0, 0, 0.2, 1)",
+          "description": ""
+        },
+        {
+          "name": "transition.easing.in",
+          "cssVar": "--vyre-transition-easing-in",
+          "jsKey": "transitionEasingIn",
+          "category": "transition",
+          "subcategory": "easing",
+          "value": "cubic-bezier(0.4, 0, 1, 1)",
+          "description": ""
+        },
+        {
+          "name": "transition.easing.inout",
+          "cssVar": "--vyre-transition-easing-inout",
+          "jsKey": "transitionEasingInout",
+          "category": "transition",
+          "subcategory": "easing",
+          "value": "cubic-bezier(0.4, 0, 0.2, 1)",
+          "description": ""
+        },
+        {
+          "name": "transition.easing.spring",
+          "cssVar": "--vyre-transition-easing-spring",
+          "jsKey": "transitionEasingSpring",
+          "category": "transition",
+          "subcategory": "easing",
+          "value": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+          "description": ""
+        }
+      ]
+    },
+    "zIndex": {
+      "description": "Z-index stacking scale.",
+      "tokens": [
+        {
+          "name": "z.index.base",
+          "cssVar": "--vyre-z-index-base",
+          "jsKey": "zIndexBase",
+          "category": "zIndex",
+          "value": "0",
+          "description": ""
+        },
+        {
+          "name": "z.index.raised",
+          "cssVar": "--vyre-z-index-raised",
+          "jsKey": "zIndexRaised",
+          "category": "zIndex",
+          "value": "10",
+          "description": ""
+        },
+        {
+          "name": "z.index.sticky",
+          "cssVar": "--vyre-z-index-sticky",
+          "jsKey": "zIndexSticky",
+          "category": "zIndex",
+          "value": "100",
+          "description": ""
+        },
+        {
+          "name": "z.index.overlay",
+          "cssVar": "--vyre-z-index-overlay",
+          "jsKey": "zIndexOverlay",
+          "category": "zIndex",
+          "value": "200",
+          "description": ""
+        },
+        {
+          "name": "z.index.modal",
+          "cssVar": "--vyre-z-index-modal",
+          "jsKey": "zIndexModal",
+          "category": "zIndex",
+          "value": "1000",
+          "description": ""
+        },
+        {
+          "name": "z.index.toast",
+          "cssVar": "--vyre-z-index-toast",
+          "jsKey": "zIndexToast",
+          "category": "zIndex",
+          "value": "2000",
+          "description": ""
+        }
+      ]
+    }
+  }
+}