omnidesign 1.0.0

package/tokens/semantic/motion.json

@@ -0,0 +1,44 @@
+{
+  "motion": {
+    "hover": {
+      "$type": "transition",
+      "$value": {
+        "duration": "{duration.fast}",
+        "easing": "{easing.easeOut}"
+      },
+      "$description": "Subtle feedback for hover interactions"
+    },
+    "enter": {
+      "$type": "transition",
+      "$value": {
+        "duration": "{duration.normal}",
+        "easing": "{easing.easeOut}"
+      },
+      "$description": "Elements appearing on screen"
+    },
+    "exit": {
+      "$type": "transition",
+      "$value": {
+        "duration": "{duration.fast}",
+        "easing": "{easing.easeIn}"
+      },
+      "$description": "Elements leaving the screen"
+    },
+    "page": {
+      "$type": "transition",
+      "$value": {
+        "duration": "{duration.slow}",
+        "easing": "{easing.easeInOut}"
+      },
+      "$description": "Page transitions"
+    },
+    "spring": {
+      "$type": "transition",
+      "$value": {
+        "duration": "{duration.normal}",
+        "easing": "{easing.spring}"
+      },
+      "$description": "Bouncy interactions with overshoot"
+    }
+  }
+}

package/tokens/semantic/radii.json

@@ -0,0 +1,29 @@
+{
+  "radius": {
+    "button": {
+      "$type": "dimension",
+      "$value": "{radii.md}",
+      "$description": "Button corner radius"
+    },
+    "input": {
+      "$type": "dimension",
+      "$value": "{radii.md}",
+      "$description": "Form input corner radius"
+    },
+    "card": {
+      "$type": "dimension",
+      "$value": "{radii.lg}",
+      "$description": "Card container corner radius"
+    },
+    "modal": {
+      "$type": "dimension",
+      "$value": "{radii.xl}",
+      "$description": "Modal container corner radius"
+    },
+    "badge": {
+      "$type": "dimension",
+      "$value": "{radii.full}",
+      "$description": "Pill badge corner radius"
+    }
+  }
+}

package/tokens/semantic/shadows.json

@@ -0,0 +1,24 @@
+{
+  "shadow": {
+    "card": {
+      "$type": "shadow",
+      "$value": "{shadow.md}",
+      "$description": "Card elevation shadow"
+    },
+    "dropdown": {
+      "$type": "shadow",
+      "$value": "{shadow.lg}",
+      "$description": "Dropdown menu elevation shadow"
+    },
+    "modal": {
+      "$type": "shadow",
+      "$value": "{shadow.xl}",
+      "$description": "Modal dialog elevation shadow"
+    },
+    "focus": {
+      "$type": "shadow",
+      "$value": "{shadow.glow.blue}",
+      "$description": "Focus ring glow shadow"
+    }
+  }
+}

package/tokens/semantic/spacing.json

@@ -0,0 +1,69 @@
+{
+  "space": {
+    "sectionY": {
+      "$type": "dimension",
+      "$value": "{spacing.16}",
+      "$description": "Vertical section padding"
+    },
+    "sectionX": {
+      "$type": "dimension",
+      "$value": "{spacing.6}",
+      "$description": "Horizontal section padding"
+    },
+    "cardPadding": {
+      "$type": "dimension",
+      "$value": "{spacing.6}",
+      "$description": "Card internal padding"
+    },
+    "cardGap": {
+      "$type": "dimension",
+      "$value": "{spacing.4}",
+      "$description": "Gap between card elements"
+    },
+    "stackSm": {
+      "$type": "dimension",
+      "$value": "{spacing.2}",
+      "$description": "Small vertical stack spacing"
+    },
+    "stackMd": {
+      "$type": "dimension",
+      "$value": "{spacing.4}",
+      "$description": "Medium vertical stack spacing"
+    },
+    "stackLg": {
+      "$type": "dimension",
+      "$value": "{spacing.6}",
+      "$description": "Large vertical stack spacing"
+    },
+    "inlineSm": {
+      "$type": "dimension",
+      "$value": "{spacing.2}",
+      "$description": "Small horizontal inline spacing"
+    },
+    "inlineMd": {
+      "$type": "dimension",
+      "$value": "{spacing.4}",
+      "$description": "Medium horizontal inline spacing"
+    },
+    "inlineLg": {
+      "$type": "dimension",
+      "$value": "{spacing.6}",
+      "$description": "Large horizontal inline spacing"
+    },
+    "formGap": {
+      "$type": "dimension",
+      "$value": "{spacing.4}",
+      "$description": "Gap between form fields"
+    },
+    "inputPadding": {
+      "$type": "dimension",
+      "$value": "{spacing.3}",
+      "$description": "Input field internal padding"
+    },
+    "containerMax": {
+      "$type": "dimension",
+      "$value": "{spacing.24}",
+      "$description": "Max-width for content containers (converted to rem in usage)"
+    }
+  }
+}

package/tokens/semantic/typography.json

@@ -0,0 +1,118 @@
+{
+  "heading": {
+    "hero": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "{fontSize.6xl}",
+        "fontWeight": "{fontWeight.bold}",
+        "lineHeight": "{lineHeight.tight}",
+        "letterSpacing": "{letterSpacing.tight}"
+      },
+      "$description": "Hero heading typography for landing pages"
+    },
+    "page": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "{fontSize.4xl}",
+        "fontWeight": "{fontWeight.bold}",
+        "lineHeight": "{lineHeight.tight}",
+        "letterSpacing": "{letterSpacing.tight}"
+      },
+      "$description": "Page title typography"
+    },
+    "section": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "{fontSize.2xl}",
+        "fontWeight": "{fontWeight.semibold}",
+        "lineHeight": "{lineHeight.snug}",
+        "letterSpacing": "{letterSpacing.tight}"
+      },
+      "$description": "Section heading typography"
+    },
+    "card": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "{fontSize.xl}",
+        "fontWeight": "{fontWeight.semibold}",
+        "lineHeight": "{lineHeight.snug}",
+        "letterSpacing": "{letterSpacing.normal}"
+      },
+      "$description": "Card heading typography"
+    }
+  },
+  "body": {
+    "default": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "{fontSize.base}",
+        "fontWeight": "{fontWeight.normal}",
+        "lineHeight": "{lineHeight.normal}",
+        "letterSpacing": "{letterSpacing.normal}"
+      },
+      "$description": "Default body text typography"
+    },
+    "small": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "{fontSize.sm}",
+        "fontWeight": "{fontWeight.normal}",
+        "lineHeight": "{lineHeight.normal}",
+        "letterSpacing": "{letterSpacing.normal}"
+      },
+      "$description": "Small body text typography"
+    },
+    "large": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "{fontSize.lg}",
+        "fontWeight": "{fontWeight.normal}",
+        "lineHeight": "{lineHeight.relaxed}",
+        "letterSpacing": "{letterSpacing.normal}"
+      },
+      "$description": "Large body text typography"
+    }
+  },
+  "ui": {
+    "label": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "{fontSize.sm}",
+        "fontWeight": "{fontWeight.medium}",
+        "lineHeight": "{lineHeight.normal}",
+        "letterSpacing": "{letterSpacing.normal}"
+      },
+      "$description": "UI label typography"
+    },
+    "button": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "{fontSize.base}",
+        "fontWeight": "{fontWeight.medium}",
+        "lineHeight": "{lineHeight.normal}",
+        "letterSpacing": "{letterSpacing.wide}"
+      },
+      "$description": "Button text typography"
+    },
+    "caption": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "{fontSize.xs}",
+        "fontWeight": "{fontWeight.normal}",
+        "lineHeight": "{lineHeight.normal}",
+        "letterSpacing": "{letterSpacing.normal}"
+      },
+      "$description": "Caption text typography"
+    }
+  }
+}

package/tokens/shadows/README.md

@@ -0,0 +1,3 @@
+# Shadows
+
+Elevation and shadow token definitions (drop shadows, inner shadows, glows). These create depth and hierarchy in the interface.

package/tokens/themes/README.md

@@ -0,0 +1,3 @@
+# Themes
+
+Theme-specific token overrides and configurations (light, dark, brand variants). Each theme file extends semantic tokens with contextual values.

package/tokens/themes/berry.json

@@ -0,0 +1,143 @@
+{
+  "theme": {
+    "$type": "theme",
+    "$value": "berry",
+    "$description": "Berry theme with rich raspberry and magenta tones - bold and playful"
+  },
+  "color": {
+    "text": {
+      "default": {
+        "$type": "color",
+        "$value": "#2D1B2E",
+        "$description": "Primary text - deep purple-black for contrast"
+      },
+      "muted": {
+        "$type": "color",
+        "$value": "#6B5B6B",
+        "$description": "Secondary text - muted purple-gray"
+      },
+      "inverted": {
+        "$type": "color",
+        "$value": "#FFF5F9",
+        "$description": "Text on light surfaces - soft pink-white"
+      },
+      "link": {
+        "$type": "color",
+        "$value": "#D946EF",
+        "$description": "Link text - vibrant fuchsia"
+      },
+      "link.hover": {
+        "$type": "color",
+        "$value": "#E879F9",
+        "$description": "Link on hover - bright magenta"
+      }
+    },
+    "surface": {
+      "default": {
+        "$type": "color",
+        "$value": "#FFF5F9",
+        "$description": "Default surface - soft pink-white with berry undertones"
+      },
+      "raised": {
+        "$type": "color",
+        "$value": "#FFFFFF",
+        "$description": "Elevated surface - pure white"
+      },
+      "sunken": {
+        "$type": "color",
+        "$value": "#FDF2F8",
+        "$description": "Depressed surface - very pale pink for inputs"
+      },
+      "overlay": {
+        "$type": "color",
+        "$value": "rgba(217, 70, 239, 0.12)",
+        "$description": "Overlay - magenta-tinted backdrop"
+      }
+    },
+    "border": {
+      "default": {
+        "$type": "color",
+        "$value": "#F5D0FE",
+        "$description": "Default border - soft lavender-pink"
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "#FAE8FF",
+        "$description": "Subtle border - faint pink"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "#E879F9",
+        "$description": "Strong border - visible magenta"
+      }
+    },
+    "interactive": {
+      "primary": {
+        "$type": "color",
+        "$value": "#D946EF",
+        "$description": "Primary action - vibrant fuchsia"
+      },
+      "primary.hover": {
+        "$type": "color",
+        "$value": "#E879F9",
+        "$description": "Primary hover - bright magenta"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "#BE185D",
+        "$description": "Secondary action - deep berry pink"
+      }
+    },
+    "focus": {
+      "ring": {
+        "$type": "color",
+        "$value": "#E879F9",
+        "$description": "Focus ring - magenta glow"
+      }
+    },
+    "status": {
+      "success": {
+        "$type": "color",
+        "$value": "#059669",
+        "$description": "Success - rich emerald"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "#D97706",
+        "$description": "Warning - warm amber"
+      },
+      "error": {
+        "$type": "color",
+        "$value": "#DC2626",
+        "$description": "Error - bold red"
+      },
+      "info": {
+        "$type": "color",
+        "$value": "#0891B2",
+        "$description": "Info - teal cyan"
+      }
+    }
+  },
+  "shadow": {
+    "card": {
+      "$type": "shadow",
+      "$value": "0 4px 6px -1px rgba(217, 70, 239, 0.15), 0 2px 4px -2px rgba(217, 70, 239, 0.1)",
+      "$description": "Card shadow - magenta-tinted elevation"
+    },
+    "dropdown": {
+      "$type": "shadow",
+      "$value": "0 10px 15px -3px rgba(217, 70, 239, 0.2), 0 4px 6px -4px rgba(217, 70, 239, 0.15)",
+      "$description": "Dropdown shadow - berry-tinted depth"
+    },
+    "modal": {
+      "$type": "shadow",
+      "$value": "0 20px 25px -5px rgba(217, 70, 239, 0.25), 0 8px 10px -6px rgba(217, 70, 239, 0.18)",
+      "$description": "Modal shadow - prominent magenta-tinted"
+    },
+    "focus": {
+      "$type": "shadow",
+      "$value": "0 0 0 3px rgba(232, 121, 249, 0.4)",
+      "$description": "Focus glow - soft magenta ring"
+    }
+  }
+}

package/tokens/themes/brutalist.json

@@ -0,0 +1,143 @@
+{
+  "theme": {
+    "$type": "theme",
+    "$value": "brutalist",
+    "$description": "Stark black/white/yellow - inspired by Lovable's Brutalist theme for bold interfaces"
+  },
+  "color": {
+    "text": {
+      "default": {
+        "$type": "color",
+        "$value": "#FFFFFF",
+        "$description": "Primary text on brutalist - pure white"
+      },
+      "muted": {
+        "$type": "color",
+        "$value": "#808080",
+        "$description": "Secondary text - gray for less important content"
+      },
+      "inverted": {
+        "$type": "color",
+        "$value": "#000000",
+        "$description": "Text color for light surfaces - pure black"
+      },
+      "link": {
+        "$type": "color",
+        "$value": "#FFD700",
+        "$description": "Link text color - pure yellow"
+      },
+      "link.hover": {
+        "$type": "color",
+        "$value": "#FFED4A",
+        "$description": "Link text color on hover - lighter yellow"
+      }
+    },
+    "surface": {
+      "default": {
+        "$type": "color",
+        "$value": "#000000",
+        "$description": "Default surface background - pure black"
+      },
+      "raised": {
+        "$type": "color",
+        "$value": "#000000",
+        "$description": "Elevated surface background - pure black with border"
+      },
+      "sunken": {
+        "$type": "color",
+        "$value": "#FFFFFF",
+        "$description": "Depressed surface background - pure white for inputs (inverted)"
+      },
+      "overlay": {
+        "$type": "color",
+        "$value": "rgba(0, 0, 0, 0.95)",
+        "$description": "Overlay background for modals - near-opaque black"
+      }
+    },
+    "border": {
+      "default": {
+        "$type": "color",
+        "$value": "#FFFFFF",
+        "$description": "Default border color - stark white border"
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "#404040",
+        "$description": "Subtle border for dividers - gray"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "#FFFFFF",
+        "$description": "Stronger border for emphasis - bold white"
+      }
+    },
+    "interactive": {
+      "primary": {
+        "$type": "color",
+        "$value": "#FFD700",
+        "$description": "Primary interactive element color - pure yellow"
+      },
+      "primary.hover": {
+        "$type": "color",
+        "$value": "#FFED4A",
+        "$description": "Primary interactive color on hover - lighter yellow"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "#FFFFFF",
+        "$description": "Secondary interactive element color - pure white"
+      }
+    },
+    "focus": {
+      "ring": {
+        "$type": "color",
+        "$value": "#FFD700",
+        "$description": "Focus ring outline color - yellow outline"
+      }
+    },
+    "status": {
+      "success": {
+        "$type": "color",
+        "$value": "#00FF00",
+        "$description": "Success state color - pure neon green"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "#FFD700",
+        "$description": "Warning state color - pure yellow"
+      },
+      "error": {
+        "$type": "color",
+        "$value": "#FF0000",
+        "$description": "Error state color - pure red"
+      },
+      "info": {
+        "$type": "color",
+        "$value": "#FFFFFF",
+        "$description": "Info state color - pure white"
+      }
+    }
+  },
+  "shadow": {
+    "card": {
+      "$type": "shadow",
+      "$value": "0 4px 6px -1px rgba(255, 215, 0, 0.3), 0 2px 4px -2px rgba(255, 255, 255, 0.2)",
+      "$description": "Card elevation shadow - yellow-tinted harsh shadow"
+    },
+    "dropdown": {
+      "$type": "shadow",
+      "$value": "0 10px 15px -3px rgba(255, 255, 255, 0.3), 0 4px 6px -4px rgba(255, 215, 0, 0.2)",
+      "$description": "Dropdown menu elevation shadow - stark white shadow"
+    },
+    "modal": {
+      "$type": "shadow",
+      "$value": "0 20px 25px -5px rgba(255, 255, 255, 0.4), 0 8px 10px -6px rgba(255, 215, 0, 0.3)",
+      "$description": "Modal dialog elevation shadow - prominent white/yellow shadow"
+    },
+    "focus": {
+      "$type": "shadow",
+      "$value": "0 0 0 3px rgba(255, 215, 0, 0.8)",
+      "$description": "Focus ring glow shadow - solid yellow glow"
+    }
+  }
+}