omnidesign 1.0.0

package/tokens/themes/ruby.json

@@ -0,0 +1,143 @@
+{
+  "theme": {
+    "$type": "theme",
+    "$value": "ruby",
+    "$description": "Burgundy and wine red theme for luxury brands - elegant, sophisticated, and premium aesthetic"
+  },
+  "color": {
+    "text": {
+      "default": {
+        "$type": "color",
+        "$value": "#FEF2F2",
+        "$description": "Primary text on dark surfaces - near white for readability"
+      },
+      "muted": {
+        "$type": "color",
+        "$value": "#FCA5A5",
+        "$description": "Secondary text - light rose for less important content"
+      },
+      "inverted": {
+        "$type": "color",
+        "$value": "#4C0519",
+        "$description": "Text color for light surfaces - deep burgundy"
+      },
+      "link": {
+        "$type": "color",
+        "$value": "#FB7185",
+        "$description": "Link text color - rose accent"
+      },
+      "link.hover": {
+        "$type": "color",
+        "$value": "#FDA4AF",
+        "$description": "Link text color on hover - lighter rose"
+      }
+    },
+    "surface": {
+      "default": {
+        "$type": "color",
+        "$value": "#881337",
+        "$description": "Default surface background - deep burgundy wine"
+      },
+      "raised": {
+        "$type": "color",
+        "$value": "#9F1239",
+        "$description": "Elevated surface background - lighter burgundy for cards"
+      },
+      "sunken": {
+        "$type": "color",
+        "$value": "#4C0519",
+        "$description": "Depressed surface background - even darker wine for inputs"
+      },
+      "overlay": {
+        "$type": "color",
+        "$value": "rgba(76, 5, 25, 0.85)",
+        "$description": "Overlay background for modals - semi-transparent burgundy"
+      }
+    },
+    "border": {
+      "default": {
+        "$type": "color",
+        "$value": "#9F1239",
+        "$description": "Default border color - muted burgundy"
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "#881337",
+        "$description": "Subtle border for dividers - faint wine"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "#BE123C",
+        "$description": "Stronger border for emphasis - visible burgundy"
+      }
+    },
+    "interactive": {
+      "primary": {
+        "$type": "color",
+        "$value": "#E11D48",
+        "$description": "Primary interactive element color - vibrant rose"
+      },
+      "primary.hover": {
+        "$type": "color",
+        "$value": "#BE123C",
+        "$description": "Primary interactive color on hover - darker rose"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "#F43F5E",
+        "$description": "Secondary interactive element color - pink-red"
+      }
+    },
+    "focus": {
+      "ring": {
+        "$type": "color",
+        "$value": "#FB7185",
+        "$description": "Focus ring outline color - rose glow"
+      }
+    },
+    "status": {
+      "success": {
+        "$type": "color",
+        "$value": "#86EFAC",
+        "$description": "Success state color - emerald green for contrast"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "#FDE047",
+        "$description": "Warning state color - yellow for visibility"
+      },
+      "error": {
+        "$type": "color",
+        "$value": "#FDA4AF",
+        "$description": "Error state color - pink-red matching theme"
+      },
+      "info": {
+        "$type": "color",
+        "$value": "#67E8F9",
+        "$description": "Info state color - cyan for clarity"
+      }
+    }
+  },
+  "shadow": {
+    "card": {
+      "$type": "shadow",
+      "$value": "0 4px 6px -1px rgba(225, 29, 72, 0.2), 0 2px 4px -1px rgba(225, 29, 72, 0.15)",
+      "$description": "Card elevation shadow - rose-tinted shadow"
+    },
+    "dropdown": {
+      "$type": "shadow",
+      "$value": "0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3)",
+      "$description": "Dropdown menu elevation shadow - deep shadow"
+    },
+    "modal": {
+      "$type": "shadow",
+      "$value": "0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 12px 24px -4px rgba(0, 0, 0, 0.4)",
+      "$description": "Modal dialog elevation shadow - most prominent"
+    },
+    "focus": {
+      "$type": "shadow",
+      "$value": "0 0 0 3px rgba(251, 113, 133, 0.4)",
+      "$description": "Focus ring glow shadow - rose glow ring"
+    }
+  }
+}

package/tokens/themes/slate.json

@@ -0,0 +1,143 @@
+{
+  "theme": {
+    "$type": "theme",
+    "$value": "slate",
+    "$description": "Modern gray with teal accent - clean, contemporary, and tech-forward theme for modern SaaS applications"
+  },
+  "color": {
+    "text": {
+      "default": {
+        "$type": "color",
+        "$value": "#0F172A",
+        "$description": "Primary text on light surfaces - deep slate gray"
+      },
+      "muted": {
+        "$type": "color",
+        "$value": "#64748B",
+        "$description": "Secondary text - cool slate for less important content"
+      },
+      "inverted": {
+        "$type": "color",
+        "$value": "#FFFFFF",
+        "$description": "Text color for dark surfaces - pure white"
+      },
+      "link": {
+        "$type": "color",
+        "$value": "#0D9488",
+        "$description": "Link text color - teal accent"
+      },
+      "link.hover": {
+        "$type": "color",
+        "$value": "#0F766E",
+        "$description": "Link text color on hover - darker teal"
+      }
+    },
+    "surface": {
+      "default": {
+        "$type": "color",
+        "$value": "#FFFFFF",
+        "$description": "Default surface background - pure white"
+      },
+      "raised": {
+        "$type": "color",
+        "$value": "#F8FAFC",
+        "$description": "Elevated surface background - very light slate for cards"
+      },
+      "sunken": {
+        "$type": "color",
+        "$value": "#E2E8F0",
+        "$description": "Depressed surface background - light slate for inputs"
+      },
+      "overlay": {
+        "$type": "color",
+        "$value": "rgba(15, 23, 42, 0.6)",
+        "$description": "Overlay background for modals - semi-transparent slate"
+      }
+    },
+    "border": {
+      "default": {
+        "$type": "color",
+        "$value": "#E2E8F0",
+        "$description": "Default border color - light slate"
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "#F1F5F9",
+        "$description": "Subtle border for dividers - very faint slate"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "#CBD5E1",
+        "$description": "Stronger border for emphasis - visible slate"
+      }
+    },
+    "interactive": {
+      "primary": {
+        "$type": "color",
+        "$value": "#14B8A6",
+        "$description": "Primary interactive element color - teal"
+      },
+      "primary.hover": {
+        "$type": "color",
+        "$value": "#0D9488",
+        "$description": "Primary interactive color on hover - darker teal"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "#475569",
+        "$description": "Secondary interactive element color - slate gray"
+      }
+    },
+    "focus": {
+      "ring": {
+        "$type": "color",
+        "$value": "#14B8A6",
+        "$description": "Focus ring outline color - teal glow"
+      }
+    },
+    "status": {
+      "success": {
+        "$type": "color",
+        "$value": "#10B981",
+        "$description": "Success state color - emerald green"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "#F59E0B",
+        "$description": "Warning state color - amber"
+      },
+      "error": {
+        "$type": "color",
+        "$value": "#EF4444",
+        "$description": "Error state color - red"
+      },
+      "info": {
+        "$type": "color",
+        "$value": "#3B82F6",
+        "$description": "Info state color - blue"
+      }
+    }
+  },
+  "shadow": {
+    "card": {
+      "$type": "shadow",
+      "$value": "0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06)",
+      "$description": "Card elevation shadow - subtle slate-tinted"
+    },
+    "dropdown": {
+      "$type": "shadow",
+      "$value": "0 4px 6px -1px rgba(15, 23, 42, 0.1), 0 2px 4px -1px rgba(15, 23, 42, 0.08)",
+      "$description": "Dropdown menu elevation shadow - moderate slate shadow"
+    },
+    "modal": {
+      "$type": "shadow",
+      "$value": "0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 10px 10px -5px rgba(15, 23, 42, 0.04)",
+      "$description": "Modal dialog elevation shadow - soft prominent"
+    },
+    "focus": {
+      "$type": "shadow",
+      "$value": "0 0 0 3px rgba(20, 184, 166, 0.3)",
+      "$description": "Focus ring glow shadow - teal glow ring"
+    }
+  }
+}

package/tokens/themes/snow.json

@@ -0,0 +1,143 @@
+{
+  "theme": {
+    "$type": "theme",
+    "$value": "snow",
+    "$description": "Pure white with subtle gray - the cleanest, most minimal"
+  },
+  "color": {
+    "text": {
+      "default": {
+        "$type": "color",
+        "$value": "#18181B",
+        "$description": "Primary text on light surfaces - near black"
+      },
+      "muted": {
+        "$type": "color",
+        "$value": "#71717A",
+        "$description": "Secondary text - neutral gray"
+      },
+      "inverted": {
+        "$type": "color",
+        "$value": "#FFFFFF",
+        "$description": "Text color for dark surfaces - pure white"
+      },
+      "link": {
+        "$type": "color",
+        "$value": "#3B82F6",
+        "$description": "Link text color - neutral blue"
+      },
+      "link.hover": {
+        "$type": "color",
+        "$value": "#2563EB",
+        "$description": "Link text color on hover - deeper blue"
+      }
+    },
+    "surface": {
+      "default": {
+        "$type": "color",
+        "$value": "#FFFFFF",
+        "$description": "Default surface background - pure white"
+      },
+      "raised": {
+        "$type": "color",
+        "$value": "#FAFAFA",
+        "$description": "Elevated surface background - near-white gray"
+      },
+      "sunken": {
+        "$type": "color",
+        "$value": "#F4F4F5",
+        "$description": "Depressed surface background - very light gray for inputs"
+      },
+      "overlay": {
+        "$type": "color",
+        "$value": "rgba(0, 0, 0, 0.4)",
+        "$description": "Overlay background for modals - semi-transparent black"
+      }
+    },
+    "border": {
+      "default": {
+        "$type": "color",
+        "$value": "#E4E4E7",
+        "$description": "Default border color - neutral light gray"
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "#F4F4F5",
+        "$description": "Subtle border for dividers - very faint gray"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "#A1A1AA",
+        "$description": "Stronger border for emphasis - medium gray"
+      }
+    },
+    "interactive": {
+      "primary": {
+        "$type": "color",
+        "$value": "#3B82F6",
+        "$description": "Primary interactive element color - blue"
+      },
+      "primary.hover": {
+        "$type": "color",
+        "$value": "#2563EB",
+        "$description": "Primary interactive color on hover - deeper blue"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "#71717A",
+        "$description": "Secondary interactive element color - neutral gray"
+      }
+    },
+    "focus": {
+      "ring": {
+        "$type": "color",
+        "$value": "#60A5FA",
+        "$description": "Focus ring outline color - light blue glow"
+      }
+    },
+    "status": {
+      "success": {
+        "$type": "color",
+        "$value": "#16A34A",
+        "$description": "Success state color - green"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "#CA8A04",
+        "$description": "Warning state color - yellow"
+      },
+      "error": {
+        "$type": "color",
+        "$value": "#DC2626",
+        "$description": "Error state color - red"
+      },
+      "info": {
+        "$type": "color",
+        "$value": "#3B82F6",
+        "$description": "Info state color - blue"
+      }
+    }
+  },
+  "shadow": {
+    "card": {
+      "$type": "shadow",
+      "$value": "0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -2px rgba(0, 0, 0, 0.02)",
+      "$description": "Card elevation shadow - minimal neutral shadow"
+    },
+    "dropdown": {
+      "$type": "shadow",
+      "$value": "0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.04)",
+      "$description": "Dropdown menu elevation shadow - minimal shadow"
+    },
+    "modal": {
+      "$type": "shadow",
+      "$value": "0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.06)",
+      "$description": "Modal dialog elevation shadow - minimal shadow"
+    },
+    "focus": {
+      "$type": "shadow",
+      "$value": "0 0 0 3px rgba(59, 130, 246, 0.3)",
+      "$description": "Focus ring glow shadow - blue glow ring"
+    }
+  }
+}

package/tokens/themes/solar.json

@@ -0,0 +1,143 @@
+{
+  "theme": {
+    "$type": "theme",
+    "$value": "solar",
+    "$description": "Light yellow-gold warmth - inspired by Lovable's Solar theme"
+  },
+  "color": {
+    "text": {
+      "default": {
+        "$type": "color",
+        "$value": "#292524",
+        "$description": "Primary text on light surfaces - warm dark brown"
+      },
+      "muted": {
+        "$type": "color",
+        "$value": "#78716C",
+        "$description": "Secondary text - warm stone gray"
+      },
+      "inverted": {
+        "$type": "color",
+        "$value": "#FEFCE8",
+        "$description": "Text color for dark surfaces - warm yellow-white"
+      },
+      "link": {
+        "$type": "color",
+        "$value": "#CA8A04",
+        "$description": "Link text color - golden yellow"
+      },
+      "link.hover": {
+        "$type": "color",
+        "$value": "#A16207",
+        "$description": "Link text color on hover - deeper golden"
+      }
+    },
+    "surface": {
+      "default": {
+        "$type": "color",
+        "$value": "#FEFCE8",
+        "$description": "Default surface background - light yellow cream"
+      },
+      "raised": {
+        "$type": "color",
+        "$value": "#FEF9C3",
+        "$description": "Elevated surface background - warmer yellow"
+      },
+      "sunken": {
+        "$type": "color",
+        "$value": "#FEF08A",
+        "$description": "Depressed surface background - golden yellow for inputs"
+      },
+      "overlay": {
+        "$type": "color",
+        "$value": "rgba(41, 37, 36, 0.5)",
+        "$description": "Overlay background for modals - semi-transparent warm dark"
+      }
+    },
+    "border": {
+      "default": {
+        "$type": "color",
+        "$value": "#FDE047",
+        "$description": "Default border color - golden yellow"
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "#FEF9C3",
+        "$description": "Subtle border for dividers - very faint yellow"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "#FACC15",
+        "$description": "Stronger border for emphasis - visible golden"
+      }
+    },
+    "interactive": {
+      "primary": {
+        "$type": "color",
+        "$value": "#EAB308",
+        "$description": "Primary interactive element color - golden yellow"
+      },
+      "primary.hover": {
+        "$type": "color",
+        "$value": "#CA8A04",
+        "$description": "Primary interactive color on hover - deeper golden"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "#EA580C",
+        "$description": "Secondary interactive element color - warm orange accent"
+      }
+    },
+    "focus": {
+      "ring": {
+        "$type": "color",
+        "$value": "#FACC15",
+        "$description": "Focus ring outline color - golden glow"
+      }
+    },
+    "status": {
+      "success": {
+        "$type": "color",
+        "$value": "#16A34A",
+        "$description": "Success state color - green"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "#CA8A04",
+        "$description": "Warning state color - golden yellow"
+      },
+      "error": {
+        "$type": "color",
+        "$value": "#DC2626",
+        "$description": "Error state color - red"
+      },
+      "info": {
+        "$type": "color",
+        "$value": "#EA580C",
+        "$description": "Info state color - orange"
+      }
+    }
+  },
+  "shadow": {
+    "card": {
+      "$type": "shadow",
+      "$value": "0 4px 6px -1px rgba(234, 179, 8, 0.08), 0 2px 4px -2px rgba(234, 179, 8, 0.05)",
+      "$description": "Card elevation shadow - warm golden shadow"
+    },
+    "dropdown": {
+      "$type": "shadow",
+      "$value": "0 10px 15px -3px rgba(41, 37, 36, 0.08), 0 4px 6px -4px rgba(41, 37, 36, 0.05)",
+      "$description": "Dropdown menu elevation shadow - warm shadow"
+    },
+    "modal": {
+      "$type": "shadow",
+      "$value": "0 20px 25px -5px rgba(41, 37, 36, 0.1), 0 8px 10px -6px rgba(41, 37, 36, 0.08)",
+      "$description": "Modal dialog elevation shadow - prominent warm shadow"
+    },
+    "focus": {
+      "$type": "shadow",
+      "$value": "0 0 0 3px rgba(250, 204, 21, 0.4)",
+      "$description": "Focus ring glow shadow - golden glow ring"
+    }
+  }
+}