omnidesign 1.0.0

package/tokens/primitives/color.json

@@ -0,0 +1,219 @@
+{
+  "neutral": {
+    "50": {
+      "$type": "color",
+      "$value": "#FAFAFA",
+      "$description": "Neutral gray, lightest shade"
+    },
+    "100": {
+      "$type": "color",
+      "$value": "#F5F5F5",
+      "$description": "Neutral gray, very light"
+    },
+    "200": {
+      "$type": "color",
+      "$value": "#E5E5E5",
+      "$description": "Neutral gray, light"
+    },
+    "300": {
+      "$type": "color",
+      "$value": "#D4D4D4",
+      "$description": "Neutral gray, light-medium"
+    },
+    "400": {
+      "$type": "color",
+      "$value": "#A3A3A3",
+      "$description": "Neutral gray, medium"
+    },
+    "500": {
+      "$type": "color",
+      "$value": "#737373",
+      "$description": "Neutral gray, base shade"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#525252",
+      "$description": "Neutral gray, medium-dark"
+    },
+    "700": {
+      "$type": "color",
+      "$value": "#404040",
+      "$description": "Neutral gray, dark"
+    },
+    "800": {
+      "$type": "color",
+      "$value": "#262626",
+      "$description": "Neutral gray, very dark"
+    },
+    "900": {
+      "$type": "color",
+      "$value": "#171717",
+      "$description": "Neutral gray, darkest"
+    },
+    "950": {
+      "$type": "color",
+      "$value": "#0A0A0A",
+      "$description": "Neutral gray, near black"
+    }
+  },
+  "blue": {
+    "50": {
+      "$type": "color",
+      "$value": "#EFF6FF",
+      "$description": "Cold blue, lightest shade"
+    },
+    "100": {
+      "$type": "color",
+      "$value": "#DBEAFE",
+      "$description": "Cold blue, very light"
+    },
+    "200": {
+      "$type": "color",
+      "$value": "#BFDBFE",
+      "$description": "Cold blue, light"
+    },
+    "300": {
+      "$type": "color",
+      "$value": "#93C5FD",
+      "$description": "Cold blue, light-medium"
+    },
+    "400": {
+      "$type": "color",
+      "$value": "#60A5FA",
+      "$description": "Cold blue, medium"
+    },
+    "500": {
+      "$type": "color",
+      "$value": "#2563EB",
+      "$description": "Cold blue, base shade - enterprise primary"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#1D4ED8",
+      "$description": "Cold blue, medium-dark"
+    },
+    "700": {
+      "$type": "color",
+      "$value": "#1E40AF",
+      "$description": "Cold blue, dark"
+    },
+    "800": {
+      "$type": "color",
+      "$value": "#1E3A8A",
+      "$description": "Cold blue, very dark"
+    },
+    "900": {
+      "$type": "color",
+      "$value": "#172554",
+      "$description": "Cold blue, darkest"
+    },
+    "950": {
+      "$type": "color",
+      "$value": "#0F172A",
+      "$description": "Cold blue, near black"
+    }
+  },
+  "purple": {
+    "50": {
+      "$type": "color",
+      "$value": "#F5F3FF",
+      "$description": "Deep violet, lightest shade"
+    },
+    "100": {
+      "$type": "color",
+      "$value": "#EDE9FE",
+      "$description": "Deep violet, very light"
+    },
+    "200": {
+      "$type": "color",
+      "$value": "#DDD6FE",
+      "$description": "Deep violet, light"
+    },
+    "300": {
+      "$type": "color",
+      "$value": "#C4B5FD",
+      "$description": "Deep violet, light-medium"
+    },
+    "400": {
+      "$type": "color",
+      "$value": "#A78BFA",
+      "$description": "Deep violet, medium"
+    },
+    "500": {
+      "$type": "color",
+      "$value": "#6D28D9",
+      "$description": "Deep violet, base shade - starry accent"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#5B21B6",
+      "$description": "Deep violet, medium-dark"
+    },
+    "700": {
+      "$type": "color",
+      "$value": "#4C1D95",
+      "$description": "Deep violet, dark"
+    },
+    "800": {
+      "$type": "color",
+      "$value": "#3730A3",
+      "$description": "Deep violet, very dark"
+    },
+    "900": {
+      "$type": "color",
+      "$value": "#312E81",
+      "$description": "Deep violet, darkest"
+    },
+    "950": {
+      "$type": "color",
+      "$value": "#1E1B4B",
+      "$description": "Deep violet, near black"
+    }
+  },
+  "green": {
+    "500": {
+      "$type": "color",
+      "$value": "#22C55E",
+      "$description": "Success green, base shade"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#16A34A",
+      "$description": "Success green, dark shade"
+    }
+  },
+  "amber": {
+    "500": {
+      "$type": "color",
+      "$value": "#F59E0B",
+      "$description": "Warning amber, base shade"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#D97706",
+      "$description": "Warning amber, dark shade"
+    }
+  },
+  "red": {
+    "500": {
+      "$type": "color",
+      "$value": "#EF4444",
+      "$description": "Error red, base shade"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#DC2626",
+      "$description": "Error red, dark shade"
+    }
+  },
+  "white": {
+    "$type": "color",
+    "$value": "#FFFFFF",
+    "$description": "Pure white"
+  },
+  "black": {
+    "$type": "color",
+    "$value": "#000000",
+    "$description": "Pure black"
+  }
+}

package/tokens/primitives/motion.json

@@ -0,0 +1,56 @@
+{
+  "duration": {
+    "instant": {
+      "$type": "duration",
+      "$value": "0ms",
+      "$description": "Instant transition (no animation)"
+    },
+    "fast": {
+      "$type": "duration",
+      "$value": "150ms",
+      "$description": "Fast transition for micro-interactions"
+    },
+    "normal": {
+      "$type": "duration",
+      "$value": "300ms",
+      "$description": "Normal transition duration"
+    },
+    "slow": {
+      "$type": "duration",
+      "$value": "500ms",
+      "$description": "Slow transition for emphasis"
+    },
+    "slower": {
+      "$type": "duration",
+      "$value": "700ms",
+      "$description": "Slower transition for dramatic effects"
+    }
+  },
+  "easing": {
+    "linear": {
+      "$type": "cubicBezier",
+      "$value": [0, 0, 1, 1],
+      "$description": "Linear easing (constant speed)"
+    },
+    "easeIn": {
+      "$type": "cubicBezier",
+      "$value": [0.4, 0, 1, 1],
+      "$description": "Ease in (accelerate)"
+    },
+    "easeOut": {
+      "$type": "cubicBezier",
+      "$value": [0, 0, 0.2, 1],
+      "$description": "Ease out (decelerate)"
+    },
+    "easeInOut": {
+      "$type": "cubicBezier",
+      "$value": [0.4, 0, 0.2, 1],
+      "$description": "Ease in-out (accelerate then decelerate)"
+    },
+    "spring": {
+      "$type": "cubicBezier",
+      "$value": [0.34, 1.56, 0.64, 1],
+      "$description": "Spring easing (overshoot effect)"
+    }
+  }
+}

package/tokens/primitives/radii.json

@@ -0,0 +1,37 @@
+{
+  "none": {
+    "$type": "dimension",
+    "$value": "0px",
+    "$description": "No border radius"
+  },
+  "sm": {
+    "$type": "dimension",
+    "$value": "4px",
+    "$description": "Small border radius"
+  },
+  "md": {
+    "$type": "dimension",
+    "$value": "8px",
+    "$description": "Medium border radius"
+  },
+  "lg": {
+    "$type": "dimension",
+    "$value": "12px",
+    "$description": "Large border radius"
+  },
+  "xl": {
+    "$type": "dimension",
+    "$value": "16px",
+    "$description": "Extra large border radius"
+  },
+  "2xl": {
+    "$type": "dimension",
+    "$value": "24px",
+    "$description": "2x extra large border radius"
+  },
+  "full": {
+    "$type": "dimension",
+    "$value": "9999px",
+    "$description": "Full border radius (pill shape)"
+  }
+}

package/tokens/primitives/shadows.json

@@ -0,0 +1,34 @@
+{
+  "sm": {
+    "$type": "shadow",
+    "$value": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    "$description": "Subtle elevation shadow"
+  },
+  "md": {
+    "$type": "shadow",
+    "$value": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+    "$description": "Card elevation shadow"
+  },
+  "lg": {
+    "$type": "shadow",
+    "$value": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
+    "$description": "Modal elevation shadow"
+  },
+  "xl": {
+    "$type": "shadow",
+    "$value": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
+    "$description": "Floating element shadow"
+  },
+  "glow": {
+    "blue": {
+      "$type": "shadow",
+      "$value": "0 0 0 3px rgba(37, 99, 235, 0.4)",
+      "$description": "Blue glow for focus states"
+    },
+    "purple": {
+      "$type": "shadow",
+      "$value": "0 0 0 3px rgba(109, 40, 217, 0.4)",
+      "$description": "Purple glow for accent focus states"
+    }
+  }
+}

package/tokens/primitives/spacing.json

@@ -0,0 +1,67 @@
+{
+  "0": {
+    "$type": "dimension",
+    "$value": "0px",
+    "$description": "No spacing"
+  },
+  "1": {
+    "$type": "dimension",
+    "$value": "4px",
+    "$description": "4px spacing (1x baseline)"
+  },
+  "2": {
+    "$type": "dimension",
+    "$value": "8px",
+    "$description": "8px spacing (2x baseline)"
+  },
+  "3": {
+    "$type": "dimension",
+    "$value": "12px",
+    "$description": "12px spacing (3x baseline)"
+  },
+  "4": {
+    "$type": "dimension",
+    "$value": "16px",
+    "$description": "16px spacing (4x baseline)"
+  },
+  "5": {
+    "$type": "dimension",
+    "$value": "20px",
+    "$description": "20px spacing (5x baseline)"
+  },
+  "6": {
+    "$type": "dimension",
+    "$value": "24px",
+    "$description": "24px spacing (6x baseline)"
+  },
+  "8": {
+    "$type": "dimension",
+    "$value": "32px",
+    "$description": "32px spacing (8x baseline)"
+  },
+  "10": {
+    "$type": "dimension",
+    "$value": "40px",
+    "$description": "40px spacing (10x baseline)"
+  },
+  "12": {
+    "$type": "dimension",
+    "$value": "48px",
+    "$description": "48px spacing (12x baseline)"
+  },
+  "16": {
+    "$type": "dimension",
+    "$value": "64px",
+    "$description": "64px spacing (16x baseline)"
+  },
+  "20": {
+    "$type": "dimension",
+    "$value": "80px",
+    "$description": "80px spacing (20x baseline)"
+  },
+  "24": {
+    "$type": "dimension",
+    "$value": "96px",
+    "$description": "96px spacing (24x baseline)"
+  }
+}

package/tokens/primitives/typography.json

@@ -0,0 +1,127 @@
+{
+  "fontFamily": {
+    "sans": {
+      "$type": "fontFamily",
+      "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+      "$description": "System font stack for body text"
+    },
+    "mono": {
+      "$type": "fontFamily",
+      "$value": "'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace",
+      "$description": "Monospace font stack for code"
+    }
+  },
+  "fontSize": {
+    "xs": {
+      "$type": "dimension",
+      "$value": "12px",
+      "$description": "Extra small font size"
+    },
+    "sm": {
+      "$type": "dimension",
+      "$value": "14px",
+      "$description": "Small font size"
+    },
+    "base": {
+      "$type": "dimension",
+      "$value": "16px",
+      "$description": "Base font size"
+    },
+    "lg": {
+      "$type": "dimension",
+      "$value": "18px",
+      "$description": "Large font size"
+    },
+    "xl": {
+      "$type": "dimension",
+      "$value": "20px",
+      "$description": "Extra large font size"
+    },
+    "2xl": {
+      "$type": "dimension",
+      "$value": "24px",
+      "$description": "2x extra large font size"
+    },
+    "3xl": {
+      "$type": "dimension",
+      "$value": "30px",
+      "$description": "3x extra large font size"
+    },
+    "4xl": {
+      "$type": "dimension",
+      "$value": "36px",
+      "$description": "4x extra large font size"
+    },
+    "5xl": {
+      "$type": "dimension",
+      "$value": "48px",
+      "$description": "5x extra large font size"
+    },
+    "6xl": {
+      "$type": "dimension",
+      "$value": "60px",
+      "$description": "6x extra large font size"
+    }
+  },
+  "fontWeight": {
+    "normal": {
+      "$type": "fontWeight",
+      "$value": 400,
+      "$description": "Normal font weight"
+    },
+    "medium": {
+      "$type": "fontWeight",
+      "$value": 500,
+      "$description": "Medium font weight"
+    },
+    "semibold": {
+      "$type": "fontWeight",
+      "$value": 600,
+      "$description": "Semibold font weight"
+    },
+    "bold": {
+      "$type": "fontWeight",
+      "$value": 700,
+      "$description": "Bold font weight"
+    }
+  },
+  "lineHeight": {
+    "tight": {
+      "$type": "number",
+      "$value": 1.25,
+      "$description": "Tight line height"
+    },
+    "snug": {
+      "$type": "number",
+      "$value": 1.375,
+      "$description": "Snug line height"
+    },
+    "normal": {
+      "$type": "number",
+      "$value": 1.5,
+      "$description": "Normal line height"
+    },
+    "relaxed": {
+      "$type": "number",
+      "$value": 1.625,
+      "$description": "Relaxed line height"
+    }
+  },
+  "letterSpacing": {
+    "tight": {
+      "$type": "dimension",
+      "$value": "-0.025em",
+      "$description": "Tight letter spacing"
+    },
+    "normal": {
+      "$type": "dimension",
+      "$value": "0em",
+      "$description": "Normal letter spacing"
+    },
+    "wide": {
+      "$type": "dimension",
+      "$value": "0.025em",
+      "$description": "Wide letter spacing"
+    }
+  }
+}

package/tokens/semantic/README.md

@@ -0,0 +1,3 @@
+# Semantic
+
+Contextual design tokens that map primitives to meaning (primary, danger, success). These bridge raw values to component-level usage.

package/tokens/semantic/color.json

@@ -0,0 +1,114 @@
+{
+  "text": {
+    "default": {
+      "$type": "color",
+      "$value": "{color.neutral.900}",
+      "$description": "Primary text color for body content"
+    },
+    "muted": {
+      "$type": "color",
+      "$value": "{color.neutral.500}",
+      "$description": "Secondary text color for less important content"
+    },
+    "inverted": {
+      "$type": "color",
+      "$value": "{color.white}",
+      "$description": "Text color for dark backgrounds"
+    },
+    "link": {
+      "$type": "color",
+      "$value": "{color.blue.500}",
+      "$description": "Link text color"
+    },
+    "link.hover": {
+      "$type": "color",
+      "$value": "{color.blue.600}",
+      "$description": "Link text color on hover"
+    }
+  },
+  "surface": {
+    "default": {
+      "$type": "color",
+      "$value": "{color.white}",
+      "$description": "Default surface background color"
+    },
+    "raised": {
+      "$type": "color",
+      "$value": "{color.white}",
+      "$description": "Elevated surface background (cards, popovers)"
+    },
+    "sunken": {
+      "$type": "color",
+      "$value": "{color.neutral.50}",
+      "$description": "Depressed surface background (inputs, wells)"
+    },
+    "overlay": {
+      "$type": "color",
+      "$value": "{color.neutral.950}",
+      "$description": "Overlay background for modals and backdrops"
+    }
+  },
+  "border": {
+    "default": {
+      "$type": "color",
+      "$value": "{color.neutral.200}",
+      "$description": "Default border color"
+    },
+    "subtle": {
+      "$type": "color",
+      "$value": "{color.neutral.100}",
+      "$description": "Subtle border for dividers and separators"
+    },
+    "strong": {
+      "$type": "color",
+      "$value": "{color.neutral.300}",
+      "$description": "Stronger border for emphasis"
+    }
+  },
+  "interactive": {
+    "primary": {
+      "$type": "color",
+      "$value": "{color.blue.500}",
+      "$description": "Primary interactive element color"
+    },
+    "primary.hover": {
+      "$type": "color",
+      "$value": "{color.blue.600}",
+      "$description": "Primary interactive color on hover"
+    },
+    "secondary": {
+      "$type": "color",
+      "$value": "{color.neutral.100}",
+      "$description": "Secondary interactive element color"
+    }
+  },
+  "status": {
+    "success": {
+      "$type": "color",
+      "$value": "{color.green.500}",
+      "$description": "Success state color"
+    },
+    "warning": {
+      "$type": "color",
+      "$value": "{color.amber.500}",
+      "$description": "Warning state color"
+    },
+    "error": {
+      "$type": "color",
+      "$value": "{color.red.500}",
+      "$description": "Error state color"
+    },
+    "info": {
+      "$type": "color",
+      "$value": "{color.blue.500}",
+      "$description": "Info state color"
+    }
+  },
+  "focus": {
+    "ring": {
+      "$type": "color",
+      "$value": "{color.blue.500}",
+      "$description": "Focus ring outline color"
+    }
+  }
+}