omnidesign 1.0.0

package/tokens/themes/daylight.json

@@ -0,0 +1,143 @@
+{
+  "theme": {
+    "$type": "theme",
+    "$value": "daylight",
+    "$description": "Bright white with energetic blue - clean and focused"
+  },
+  "color": {
+    "text": {
+      "default": {
+        "$type": "color",
+        "$value": "#1A202C",
+        "$description": "Primary text on light surfaces - dark slate"
+      },
+      "muted": {
+        "$type": "color",
+        "$value": "#64748B",
+        "$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 - energetic blue"
+      },
+      "link.hover": {
+        "$type": "color",
+        "$value": "#1D4ED8",
+        "$description": "Link text color on hover - deeper blue"
+      }
+    },
+    "surface": {
+      "default": {
+        "$type": "color",
+        "$value": "#FFFFFF",
+        "$description": "Default surface background - pure white"
+      },
+      "raised": {
+        "$type": "color",
+        "$value": "#F8FAFC",
+        "$description": "Elevated surface background - very light blue-tinted white"
+      },
+      "sunken": {
+        "$type": "color",
+        "$value": "#F1F5F9",
+        "$description": "Depressed surface background - light blue-gray for inputs"
+      },
+      "overlay": {
+        "$type": "color",
+        "$value": "rgba(15, 23, 42, 0.5)",
+        "$description": "Overlay background for modals - semi-transparent dark"
+      }
+    },
+    "border": {
+      "default": {
+        "$type": "color",
+        "$value": "#E2E8F0",
+        "$description": "Default border color - subtle blue-gray"
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "#F1F5F9",
+        "$description": "Subtle border for dividers - very faint"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "#CBD5E1",
+        "$description": "Stronger border for emphasis - visible but not harsh"
+      }
+    },
+    "interactive": {
+      "primary": {
+        "$type": "color",
+        "$value": "#3B82F6",
+        "$description": "Primary interactive element color - energetic blue"
+      },
+      "primary.hover": {
+        "$type": "color",
+        "$value": "#2563EB",
+        "$description": "Primary interactive color on hover - deeper energetic blue"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "#0EA5E9",
+        "$description": "Secondary interactive element color - sky blue accent"
+      }
+    },
+    "focus": {
+      "ring": {
+        "$type": "color",
+        "$value": "#60A5FA",
+        "$description": "Focus ring outline color - light blue glow"
+      }
+    },
+    "status": {
+      "success": {
+        "$type": "color",
+        "$value": "#059669",
+        "$description": "Success state color - emerald green"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "#D97706",
+        "$description": "Warning state color - amber"
+      },
+      "error": {
+        "$type": "color",
+        "$value": "#DC2626",
+        "$description": "Error state color - red"
+      },
+      "info": {
+        "$type": "color",
+        "$value": "#2563EB",
+        "$description": "Info state color - blue"
+      }
+    }
+  },
+  "shadow": {
+    "card": {
+      "$type": "shadow",
+      "$value": "0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03)",
+      "$description": "Card elevation shadow - subtle soft shadow"
+    },
+    "dropdown": {
+      "$type": "shadow",
+      "$value": "0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05)",
+      "$description": "Dropdown menu elevation shadow - medium shadow"
+    },
+    "modal": {
+      "$type": "shadow",
+      "$value": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.08)",
+      "$description": "Modal dialog elevation shadow - prominent 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/deep-space.json

@@ -0,0 +1,143 @@
+{
+  "theme": {
+    "$type": "theme",
+    "$value": "deep-space",
+    "$description": "Near-black with deep purple stars - cosmic theme for creative tools"
+  },
+  "color": {
+    "text": {
+      "default": {
+        "$type": "color",
+        "$value": "#E9D5FF",
+        "$description": "Primary text on deep space - lavender white"
+      },
+      "muted": {
+        "$type": "color",
+        "$value": "#A78BFA",
+        "$description": "Secondary text - purple-gray"
+      },
+      "inverted": {
+        "$type": "color",
+        "$value": "#0D0015",
+        "$description": "Text color for light surfaces - deep cosmic black"
+      },
+      "link": {
+        "$type": "color",
+        "$value": "#C084FC",
+        "$description": "Link text color - cosmic purple"
+      },
+      "link.hover": {
+        "$type": "color",
+        "$value": "#D8B4FE",
+        "$description": "Link text color on hover - brighter cosmic purple"
+      }
+    },
+    "surface": {
+      "default": {
+        "$type": "color",
+        "$value": "#0D0015",
+        "$description": "Default surface background - deep cosmic black"
+      },
+      "raised": {
+        "$type": "color",
+        "$value": "#1A0526",
+        "$description": "Elevated surface background - purple-tinted space"
+      },
+      "sunken": {
+        "$type": "color",
+        "$value": "#05000A",
+        "$description": "Depressed surface background - void black for inputs"
+      },
+      "overlay": {
+        "$type": "color",
+        "$value": "rgba(13, 0, 21, 0.9)",
+        "$description": "Overlay background for modals - semi-transparent void"
+      }
+    },
+    "border": {
+      "default": {
+        "$type": "color",
+        "$value": "#2E1065",
+        "$description": "Default border color - deep purple border"
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "#1A0526",
+        "$description": "Subtle border for dividers - dark purple"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "#581C87",
+        "$description": "Stronger border for emphasis - visible purple"
+      }
+    },
+    "interactive": {
+      "primary": {
+        "$type": "color",
+        "$value": "#C084FC",
+        "$description": "Primary interactive element color - cosmic purple"
+      },
+      "primary.hover": {
+        "$type": "color",
+        "$value": "#E879F9",
+        "$description": "Primary interactive color on hover - lighter purple"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "#3B0764",
+        "$description": "Secondary interactive element color - deep purple"
+      }
+    },
+    "focus": {
+      "ring": {
+        "$type": "color",
+        "$value": "#E9D5FF",
+        "$description": "Focus ring outline color - lavender glow"
+      }
+    },
+    "status": {
+      "success": {
+        "$type": "color",
+        "$value": "#34D399",
+        "$description": "Success state color - mint green for deep space"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "#FBBF24",
+        "$description": "Warning state color - amber star"
+      },
+      "error": {
+        "$type": "color",
+        "$value": "#FC8181",
+        "$description": "Error state color - coral nebula"
+      },
+      "info": {
+        "$type": "color",
+        "$value": "#E9D5FF",
+        "$description": "Info state color - lavender"
+      }
+    }
+  },
+  "shadow": {
+    "card": {
+      "$type": "shadow",
+      "$value": "0 4px 6px -1px rgba(192, 132, 252, 0.2), 0 2px 4px -2px rgba(139, 92, 246, 0.15)",
+      "$description": "Card elevation shadow - purple nebula glow"
+    },
+    "dropdown": {
+      "$type": "shadow",
+      "$value": "0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(139, 92, 246, 0.3)",
+      "$description": "Dropdown menu elevation shadow - purple-tinted void shadow"
+    },
+    "modal": {
+      "$type": "shadow",
+      "$value": "0 20px 25px -5px rgba(0, 0, 0, 0.75), 0 8px 10px -6px rgba(192, 132, 252, 0.4)",
+      "$description": "Modal dialog elevation shadow - cosmic shadow with purple glow"
+    },
+    "focus": {
+      "$type": "shadow",
+      "$value": "0 0 0 3px rgba(233, 213, 255, 0.6), 0 0 8px rgba(192, 132, 252, 0.3)",
+      "$description": "Focus ring glow shadow - lavender star glow"
+    }
+  }
+}

package/tokens/themes/forest.json

@@ -0,0 +1,143 @@
+{
+  "theme": {
+    "$type": "theme",
+    "$value": "forest",
+    "$description": "Deep green theme for sustainability and finance applications - natural, stable, and growth-oriented"
+  },
+  "color": {
+    "text": {
+      "default": {
+        "$type": "color",
+        "$value": "#F0FDF4",
+        "$description": "Primary text on dark surfaces - near white"
+      },
+      "muted": {
+        "$type": "color",
+        "$value": "#86EFAC",
+        "$description": "Secondary text - light green for less important content"
+      },
+      "inverted": {
+        "$type": "color",
+        "$value": "#052E16",
+        "$description": "Text color for light surfaces - deep forest green"
+      },
+      "link": {
+        "$type": "color",
+        "$value": "#4ADE80",
+        "$description": "Link text color - bright green accent"
+      },
+      "link.hover": {
+        "$type": "color",
+        "$value": "#86EFAC",
+        "$description": "Link text color on hover - lighter green"
+      }
+    },
+    "surface": {
+      "default": {
+        "$type": "color",
+        "$value": "#064E3B",
+        "$description": "Default surface background - deep forest green"
+      },
+      "raised": {
+        "$type": "color",
+        "$value": "#065F46",
+        "$description": "Elevated surface background - lighter forest for cards"
+      },
+      "sunken": {
+        "$type": "color",
+        "$value": "#022C22",
+        "$description": "Depressed surface background - even darker green for inputs"
+      },
+      "overlay": {
+        "$type": "color",
+        "$value": "rgba(5, 46, 22, 0.9)",
+        "$description": "Overlay background for modals - semi-transparent forest"
+      }
+    },
+    "border": {
+      "default": {
+        "$type": "color",
+        "$value": "#065F46",
+        "$description": "Default border color - muted forest green"
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "#064E3B",
+        "$description": "Subtle border for dividers - faint green"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "#047857",
+        "$description": "Stronger border for emphasis - visible green"
+      }
+    },
+    "interactive": {
+      "primary": {
+        "$type": "color",
+        "$value": "#22C55E",
+        "$description": "Primary interactive element color - vibrant green"
+      },
+      "primary.hover": {
+        "$type": "color",
+        "$value": "#16A34A",
+        "$description": "Primary interactive color on hover - darker green"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "#34D399",
+        "$description": "Secondary interactive element color - light green"
+      }
+    },
+    "focus": {
+      "ring": {
+        "$type": "color",
+        "$value": "#4ADE80",
+        "$description": "Focus ring outline color - bright green glow"
+      }
+    },
+    "status": {
+      "success": {
+        "$type": "color",
+        "$value": "#86EFAC",
+        "$description": "Success state color - bright green"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "#FDE047",
+        "$description": "Warning state color - yellow for contrast"
+      },
+      "error": {
+        "$type": "color",
+        "$value": "#FDA4AF",
+        "$description": "Error state color - pink-red for visibility"
+      },
+      "info": {
+        "$type": "color",
+        "$value": "#67E8F9",
+        "$description": "Info state color - cyan for clarity"
+      }
+    }
+  },
+  "shadow": {
+    "card": {
+      "$type": "shadow",
+      "$value": "0 4px 6px -1px rgba(34, 197, 94, 0.2), 0 2px 4px -1px rgba(34, 197, 94, 0.15)",
+      "$description": "Card elevation shadow - green-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 for dark theme"
+    },
+    "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(74, 222, 128, 0.4)",
+      "$description": "Focus ring glow shadow - bright green glow ring"
+    }
+  }
+}

package/tokens/themes/graphite.json

@@ -0,0 +1,143 @@
+{
+  "theme": {
+    "$type": "theme",
+    "$value": "graphite",
+    "$description": "Monochrome gray minimalist theme - clean, neutral, and focused theme for content-first applications"
+  },
+  "color": {
+    "text": {
+      "default": {
+        "$type": "color",
+        "$value": "#171717",
+        "$description": "Primary text on light surfaces - near black graphite"
+      },
+      "muted": {
+        "$type": "color",
+        "$value": "#737373",
+        "$description": "Secondary text - neutral gray for less important content"
+      },
+      "inverted": {
+        "$type": "color",
+        "$value": "#FAFAFA",
+        "$description": "Text color for dark surfaces - near white"
+      },
+      "link": {
+        "$type": "color",
+        "$value": "#262626",
+        "$description": "Link text color - dark gray (subtle)"
+      },
+      "link.hover": {
+        "$type": "color",
+        "$value": "#404040",
+        "$description": "Link text color on hover - lighter dark gray"
+      }
+    },
+    "surface": {
+      "default": {
+        "$type": "color",
+        "$value": "#FFFFFF",
+        "$description": "Default surface background - pure white"
+      },
+      "raised": {
+        "$type": "color",
+        "$value": "#F5F5F5",
+        "$description": "Elevated surface background - light gray for cards"
+      },
+      "sunken": {
+        "$type": "color",
+        "$value": "#E5E5E5",
+        "$description": "Depressed surface background - medium gray for inputs"
+      },
+      "overlay": {
+        "$type": "color",
+        "$value": "rgba(23, 23, 23, 0.75)",
+        "$description": "Overlay background for modals - semi-transparent graphite"
+      }
+    },
+    "border": {
+      "default": {
+        "$type": "color",
+        "$value": "#E5E5E5",
+        "$description": "Default border color - light gray"
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "#F5F5F5",
+        "$description": "Subtle border for dividers - very faint gray"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "#D4D4D4",
+        "$description": "Stronger border for emphasis - visible gray"
+      }
+    },
+    "interactive": {
+      "primary": {
+        "$type": "color",
+        "$value": "#262626",
+        "$description": "Primary interactive element color - dark graphite"
+      },
+      "primary.hover": {
+        "$type": "color",
+        "$value": "#404040",
+        "$description": "Primary interactive color on hover - lighter graphite"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "#525252",
+        "$description": "Secondary interactive element color - medium gray"
+      }
+    },
+    "focus": {
+      "ring": {
+        "$type": "color",
+        "$value": "#262626",
+        "$description": "Focus ring outline color - dark graphite glow"
+      }
+    },
+    "status": {
+      "success": {
+        "$type": "color",
+        "$value": "#16A34A",
+        "$description": "Success state color - green monochrome"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "#CA8A04",
+        "$description": "Warning state color - muted yellow"
+      },
+      "error": {
+        "$type": "color",
+        "$value": "#DC2626",
+        "$description": "Error state color - red for visibility"
+      },
+      "info": {
+        "$type": "color",
+        "$value": "#2563EB",
+        "$description": "Info state color - blue (only accent color)"
+      }
+    }
+  },
+  "shadow": {
+    "card": {
+      "$type": "shadow",
+      "$value": "0 1px 2px rgba(23, 23, 23, 0.1), 0 1px 3px rgba(23, 23, 23, 0.08)",
+      "$description": "Card elevation shadow - subtle gray shadow"
+    },
+    "dropdown": {
+      "$type": "shadow",
+      "$value": "0 4px 6px -1px rgba(23, 23, 23, 0.15), 0 2px 4px -1px rgba(23, 23, 23, 0.1)",
+      "$description": "Dropdown menu elevation shadow - moderate gray shadow"
+    },
+    "modal": {
+      "$type": "shadow",
+      "$value": "0 20px 25px -5px rgba(23, 23, 23, 0.15), 0 8px 10px -6px rgba(23, 23, 23, 0.1)",
+      "$description": "Modal dialog elevation shadow - prominent gray shadow"
+    },
+    "focus": {
+      "$type": "shadow",
+      "$value": "0 0 0 2px rgba(38, 38, 38, 0.4)",
+      "$description": "Focus ring glow shadow - dark graphite ring"
+    }
+  }
+}