omnidesign 1.0.0

package/tokens/themes/coral.json

@@ -0,0 +1,143 @@
+{
+  "theme": {
+    "$type": "theme",
+    "$value": "coral",
+    "$description": "Coral theme with peachy orange tones - friendly and approachable"
+  },
+  "color": {
+    "text": {
+      "default": {
+        "$type": "color",
+        "$value": "#2D1F1B",
+        "$description": "Primary text - warm brown-black for contrast on coral surfaces"
+      },
+      "muted": {
+        "$type": "color",
+        "$value": "#6B5B52",
+        "$description": "Secondary text - warm brown-gray"
+      },
+      "inverted": {
+        "$type": "color",
+        "$value": "#FFF7ED",
+        "$description": "Text on light surfaces - warm cream-white"
+      },
+      "link": {
+        "$type": "color",
+        "$value": "#F97316",
+        "$description": "Link text - vibrant orange"
+      },
+      "link.hover": {
+        "$type": "color",
+        "$value": "#FB923C",
+        "$description": "Link on hover - bright coral"
+      }
+    },
+    "surface": {
+      "default": {
+        "$type": "color",
+        "$value": "#FFF7ED",
+        "$description": "Default surface - warm cream with coral undertones"
+      },
+      "raised": {
+        "$type": "color",
+        "$value": "#FFFFFF",
+        "$description": "Elevated surface - pure white"
+      },
+      "sunken": {
+        "$type": "color",
+        "$value": "#FFEDD5",
+        "$description": "Depressed surface - soft peach for inputs"
+      },
+      "overlay": {
+        "$type": "color",
+        "$value": "rgba(249, 115, 22, 0.12)",
+        "$description": "Overlay - warm orange-tinted backdrop"
+      }
+    },
+    "border": {
+      "default": {
+        "$type": "color",
+        "$value": "#FDBA74",
+        "$description": "Default border - soft orange-peach"
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "#FED7AA",
+        "$description": "Subtle border - very faint peach"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "#FB923C",
+        "$description": "Strong border - visible coral"
+      }
+    },
+    "interactive": {
+      "primary": {
+        "$type": "color",
+        "$value": "#F97316",
+        "$description": "Primary action - vibrant orange"
+      },
+      "primary.hover": {
+        "$type": "color",
+        "$value": "#FB923C",
+        "$description": "Primary hover - bright coral"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "#C2410C",
+        "$description": "Secondary action - deep burnt orange"
+      }
+    },
+    "focus": {
+      "ring": {
+        "$type": "color",
+        "$value": "#FB923C",
+        "$description": "Focus ring - warm coral glow"
+      }
+    },
+    "status": {
+      "success": {
+        "$type": "color",
+        "$value": "#059669",
+        "$description": "Success - emerald green"
+      },
+      "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(249, 115, 22, 0.12), 0 2px 4px -2px rgba(249, 115, 22, 0.08)",
+      "$description": "Card shadow - warm orange-tinted elevation"
+    },
+    "dropdown": {
+      "$type": "shadow",
+      "$value": "0 10px 15px -3px rgba(249, 115, 22, 0.15), 0 4px 6px -4px rgba(249, 115, 22, 0.1)",
+      "$description": "Dropdown shadow - coral-tinted depth"
+    },
+    "modal": {
+      "$type": "shadow",
+      "$value": "0 20px 25px -5px rgba(249, 115, 22, 0.2), 0 8px 10px -6px rgba(249, 115, 22, 0.15)",
+      "$description": "Modal shadow - warm coral-tinted"
+    },
+    "focus": {
+      "$type": "shadow",
+      "$value": "0 0 0 3px rgba(251, 146, 60, 0.4)",
+      "$description": "Focus glow - soft coral ring"
+    }
+  }
+}

package/tokens/themes/corporate.json

@@ -0,0 +1,143 @@
+{
+  "theme": {
+    "$type": "theme",
+    "$value": "corporate",
+    "$description": "Classic blue enterprise theme inspired by Salesforce and Slack - professional, trustworthy, and universally recognized"
+  },
+  "color": {
+    "text": {
+      "default": {
+        "$type": "color",
+        "$value": "#1F2937",
+        "$description": "Primary text on light surfaces - dark gray"
+      },
+      "muted": {
+        "$type": "color",
+        "$value": "#6B7280",
+        "$description": "Secondary text - medium gray for less important content"
+      },
+      "inverted": {
+        "$type": "color",
+        "$value": "#FFFFFF",
+        "$description": "Text color for dark surfaces - pure white"
+      },
+      "link": {
+        "$type": "color",
+        "$value": "#2563EB",
+        "$description": "Link text color - corporate blue"
+      },
+      "link.hover": {
+        "$type": "color",
+        "$value": "#1D4ED8",
+        "$description": "Link text color on hover - darker corporate blue"
+      }
+    },
+    "surface": {
+      "default": {
+        "$type": "color",
+        "$value": "#FFFFFF",
+        "$description": "Default surface background - pure white"
+      },
+      "raised": {
+        "$type": "color",
+        "$value": "#F9FAFB",
+        "$description": "Elevated surface background - very light gray for cards"
+      },
+      "sunken": {
+        "$type": "color",
+        "$value": "#F3F4F6",
+        "$description": "Depressed surface background - light gray for inputs and wells"
+      },
+      "overlay": {
+        "$type": "color",
+        "$value": "rgba(0, 0, 0, 0.5)",
+        "$description": "Overlay background for modals and backdrops - semi-transparent black"
+      }
+    },
+    "border": {
+      "default": {
+        "$type": "color",
+        "$value": "#E5E7EB",
+        "$description": "Default border color - light gray"
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "#F3F4F6",
+        "$description": "Subtle border for dividers - very faint"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "#D1D5DB",
+        "$description": "Stronger border for emphasis - visible gray"
+      }
+    },
+    "interactive": {
+      "primary": {
+        "$type": "color",
+        "$value": "#0052CC",
+        "$description": "Primary interactive element color - Salesforce blue"
+      },
+      "primary.hover": {
+        "$type": "color",
+        "$value": "#003E8F",
+        "$description": "Primary interactive color on hover - darker Salesforce blue"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "#4A5568",
+        "$description": "Secondary interactive element color - cool gray"
+      }
+    },
+    "focus": {
+      "ring": {
+        "$type": "color",
+        "$value": "#0052CC",
+        "$description": "Focus ring outline color - corporate blue glow"
+      }
+    },
+    "status": {
+      "success": {
+        "$type": "color",
+        "$value": "#00875A",
+        "$description": "Success state color - enterprise green"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "#FF8B00",
+        "$description": "Warning state color - amber orange"
+      },
+      "error": {
+        "$type": "color",
+        "$value": "#DE350B",
+        "$description": "Error state color - corporate red"
+      },
+      "info": {
+        "$type": "color",
+        "$value": "#0065FF",
+        "$description": "Info state color - bright blue"
+      }
+    }
+  },
+  "shadow": {
+    "card": {
+      "$type": "shadow",
+      "$value": "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)",
+      "$description": "Card elevation shadow - subtle for clean corporate look"
+    },
+    "dropdown": {
+      "$type": "shadow",
+      "$value": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+      "$description": "Dropdown menu elevation shadow - moderate depth"
+    },
+    "modal": {
+      "$type": "shadow",
+      "$value": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+      "$description": "Modal dialog elevation shadow - prominent for focus"
+    },
+    "focus": {
+      "$type": "shadow",
+      "$value": "0 0 0 3px rgba(0, 82, 204, 0.3)",
+      "$description": "Focus ring glow shadow - blue glow ring"
+    }
+  }
+}

package/tokens/themes/cream.json

@@ -0,0 +1,143 @@
+{
+  "theme": {
+    "$type": "theme",
+    "$value": "cream",
+    "$description": "Soft cream with sage green - calming and organic"
+  },
+  "color": {
+    "text": {
+      "default": {
+        "$type": "color",
+        "$value": "#2D3748",
+        "$description": "Primary text on light surfaces - soft dark slate"
+      },
+      "muted": {
+        "$type": "color",
+        "$value": "#718096",
+        "$description": "Secondary text - muted slate gray"
+      },
+      "inverted": {
+        "$type": "color",
+        "$value": "#F5F5DC",
+        "$description": "Text color for dark surfaces - cream white"
+      },
+      "link": {
+        "$type": "color",
+        "$value": "#5A8F5E",
+        "$description": "Link text color - sage green"
+      },
+      "link.hover": {
+        "$type": "color",
+        "$value": "#4A7A4E",
+        "$description": "Link text color on hover - deeper sage green"
+      }
+    },
+    "surface": {
+      "default": {
+        "$type": "color",
+        "$value": "#F5F5DC",
+        "$description": "Default surface background - cream white"
+      },
+      "raised": {
+        "$type": "color",
+        "$value": "#EFEEE6",
+        "$description": "Elevated surface background - slightly darker cream"
+      },
+      "sunken": {
+        "$type": "color",
+        "$value": "#E8E7DC",
+        "$description": "Depressed surface background - tan-cream for inputs"
+      },
+      "overlay": {
+        "$type": "color",
+        "$value": "rgba(45, 55, 72, 0.5)",
+        "$description": "Overlay background for modals - semi-transparent dark"
+      }
+    },
+    "border": {
+      "default": {
+        "$type": "color",
+        "$value": "#D7D9D4",
+        "$description": "Default border color - sage-tinted gray"
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "#E8E8E2",
+        "$description": "Subtle border for dividers - very faint green-gray"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "#A0A59C",
+        "$description": "Stronger border for emphasis - visible green-gray"
+      }
+    },
+    "interactive": {
+      "primary": {
+        "$type": "color",
+        "$value": "#4A7C59",
+        "$description": "Primary interactive element color - sage green"
+      },
+      "primary.hover": {
+        "$type": "color",
+        "$value": "#3D6A4B",
+        "$description": "Primary interactive color on hover - deeper sage green"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "#6B8E6E",
+        "$description": "Secondary interactive element color - lighter sage accent"
+      }
+    },
+    "focus": {
+      "ring": {
+        "$type": "color",
+        "$value": "#5A9F6A",
+        "$description": "Focus ring outline color - fresh green glow"
+      }
+    },
+    "status": {
+      "success": {
+        "$type": "color",
+        "$value": "#276749",
+        "$description": "Success state color - deep green"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "#975A16",
+        "$description": "Warning state color - olive"
+      },
+      "error": {
+        "$type": "color",
+        "$value": "#9B2C2C",
+        "$description": "Error state color - warm red-brown"
+      },
+      "info": {
+        "$type": "color",
+        "$value": "#2B6CB0",
+        "$description": "Info state color - blue"
+      }
+    }
+  },
+  "shadow": {
+    "card": {
+      "$type": "shadow",
+      "$value": "0 4px 6px -1px rgba(45, 55, 72, 0.05), 0 2px 4px -2px rgba(45, 55, 72, 0.03)",
+      "$description": "Card elevation shadow - soft warm shadow"
+    },
+    "dropdown": {
+      "$type": "shadow",
+      "$value": "0 10px 15px -3px rgba(45, 55, 72, 0.08), 0 4px 6px -4px rgba(45, 55, 72, 0.05)",
+      "$description": "Dropdown menu elevation shadow - medium warm shadow"
+    },
+    "modal": {
+      "$type": "shadow",
+      "$value": "0 20px 25px -5px rgba(45, 55, 72, 0.1), 0 8px 10px -6px rgba(45, 55, 72, 0.08)",
+      "$description": "Modal dialog elevation shadow - prominent warm shadow"
+    },
+    "focus": {
+      "$type": "shadow",
+      "$value": "0 0 0 3px rgba(74, 124, 89, 0.3)",
+      "$description": "Focus ring glow shadow - sage green glow ring"
+    }
+  }
+}

package/tokens/themes/cyberpunk.json

@@ -0,0 +1,143 @@
+{
+  "theme": {
+    "$type": "theme",
+    "$value": "cyberpunk",
+    "$description": "Neon pink/purple on black - synthwave inspired for gaming and creative apps"
+  },
+  "color": {
+    "text": {
+      "default": {
+        "$type": "color",
+        "$value": "#E0E0E0",
+        "$description": "Primary text on cyberpunk - near white with cyan tint"
+      },
+      "muted": {
+        "$type": "color",
+        "$value": "#9CA3AF",
+        "$description": "Secondary text - purple-gray"
+      },
+      "inverted": {
+        "$type": "color",
+        "$value": "#000000",
+        "$description": "Text color for light surfaces - pure black"
+      },
+      "link": {
+        "$type": "color",
+        "$value": "#F472B6",
+        "$description": "Link text color - neon pink"
+      },
+      "link.hover": {
+        "$type": "color",
+        "$value": "#FB7185",
+        "$description": "Link text color on hover - brighter pink"
+      }
+    },
+    "surface": {
+      "default": {
+        "$type": "color",
+        "$value": "#050505",
+        "$description": "Default surface background - nearly pure black"
+      },
+      "raised": {
+        "$type": "color",
+        "$value": "#0A0A0A",
+        "$description": "Elevated surface background - slightly lighter black"
+      },
+      "sunken": {
+        "$type": "color",
+        "$value": "#000000",
+        "$description": "Depressed surface background - pure black for inputs"
+      },
+      "overlay": {
+        "$type": "color",
+        "$value": "rgba(5, 5, 5, 0.9)",
+        "$description": "Overlay background for modals - semi-transparent black"
+      }
+    },
+    "border": {
+      "default": {
+        "$type": "color",
+        "$value": "#2D1B4E",
+        "$description": "Default border color - purple tint"
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "#1A1A2E",
+        "$description": "Subtle border for dividers - dark purple"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "#4C1D95",
+        "$description": "Stronger border for emphasis - neon purple"
+      }
+    },
+    "interactive": {
+      "primary": {
+        "$type": "color",
+        "$value": "#F472B6",
+        "$description": "Primary interactive element color - neon pink"
+      },
+      "primary.hover": {
+        "$type": "color",
+        "$value": "#FB7185",
+        "$description": "Primary interactive color on hover - brighter pink"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "#A855F7",
+        "$description": "Secondary interactive element color - purple accent"
+      }
+    },
+    "focus": {
+      "ring": {
+        "$type": "color",
+        "$value": "#D946EF",
+        "$description": "Focus ring outline color - magenta glow"
+      }
+    },
+    "status": {
+      "success": {
+        "$type": "color",
+        "$value": "#39FF14",
+        "$description": "Success state color - neon green"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "#FFFF00",
+        "$description": "Warning state color - pure neon yellow"
+      },
+      "error": {
+        "$type": "color",
+        "$value": "#FF006E",
+        "$description": "Error state color - neon magenta"
+      },
+      "info": {
+        "$type": "color",
+        "$value": "#00FFFF",
+        "$description": "Info state color - cyan"
+      }
+    }
+  },
+  "shadow": {
+    "card": {
+      "$type": "shadow",
+      "$value": "0 4px 6px -1px rgba(244, 114, 182, 0.3), 0 2px 4px -2px rgba(217, 70, 239, 0.2)",
+      "$description": "Card elevation shadow - pink/purple neon glow"
+    },
+    "dropdown": {
+      "$type": "shadow",
+      "$value": "0 10px 15px -3px rgba(0, 0, 0, 0.7), 0 4px 6px -4px rgba(217, 70, 239, 0.3)",
+      "$description": "Dropdown menu elevation shadow - purple-tinted shadow"
+    },
+    "modal": {
+      "$type": "shadow",
+      "$value": "0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(244, 114, 182, 0.4)",
+      "$description": "Modal dialog elevation shadow - pink glow shadow"
+    },
+    "focus": {
+      "$type": "shadow",
+      "$value": "0 0 0 3px rgba(244, 114, 182, 0.8), 0 0 10px rgba(217, 70, 239, 0.4)",
+      "$description": "Focus ring glow shadow - intense neon glow"
+    }
+  }
+}