omnidesign 1.0.0

package/tokens/themes/noir.json

@@ -0,0 +1,143 @@
+{
+  "theme": {
+    "$type": "theme",
+    "$value": "noir",
+    "$description": "Pure black and white high contrast for developers who want maximum readability"
+  },
+  "color": {
+    "text": {
+      "default": {
+        "$type": "color",
+        "$value": "#FFFFFF",
+        "$description": "Primary text on black - pure white"
+      },
+      "muted": {
+        "$type": "color",
+        "$value": "#A0A0A0",
+        "$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": "#808080",
+        "$description": "Link text color - medium gray"
+      },
+      "link.hover": {
+        "$type": "color",
+        "$value": "#C0C0C0",
+        "$description": "Link text color on hover - lighter gray"
+      }
+    },
+    "surface": {
+      "default": {
+        "$type": "color",
+        "$value": "#000000",
+        "$description": "Default surface background - pure black"
+      },
+      "raised": {
+        "$type": "color",
+        "$value": "#0D0D0D",
+        "$description": "Elevated surface background - barely lighter black"
+      },
+      "sunken": {
+        "$type": "color",
+        "$value": "#000000",
+        "$description": "Depressed surface background - pure black with border"
+      },
+      "overlay": {
+        "$type": "color",
+        "$value": "rgba(0, 0, 0, 0.9)",
+        "$description": "Overlay background for modals - semi-transparent black"
+      }
+    },
+    "border": {
+      "default": {
+        "$type": "color",
+        "$value": "#262626",
+        "$description": "Default border color - dark gray border"
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "#1A1A1A",
+        "$description": "Subtle border for dividers - barely visible gray"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "#404040",
+        "$description": "Stronger border for emphasis - visible gray border"
+      }
+    },
+    "interactive": {
+      "primary": {
+        "$type": "color",
+        "$value": "#FFFFFF",
+        "$description": "Primary interactive element color - pure white"
+      },
+      "primary.hover": {
+        "$type": "color",
+        "$value": "#E5E5E5",
+        "$description": "Primary interactive color on hover - light gray"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "#262626",
+        "$description": "Secondary interactive element color - dark gray"
+      }
+    },
+    "focus": {
+      "ring": {
+        "$type": "color",
+        "$value": "#FFFFFF",
+        "$description": "Focus ring outline color - white outline"
+      }
+    },
+    "status": {
+      "success": {
+        "$type": "color",
+        "$value": "#4ADE80",
+        "$description": "Success state color - bright green for high contrast"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "#FBBF24",
+        "$description": "Warning state color - bright amber"
+      },
+      "error": {
+        "$type": "color",
+        "$value": "#FF6B6B",
+        "$description": "Error state color - bright coral red"
+      },
+      "info": {
+        "$type": "color",
+        "$value": "#FFFFFF",
+        "$description": "Info state color - white for high contrast"
+      }
+    }
+  },
+  "shadow": {
+    "card": {
+      "$type": "shadow",
+      "$value": "0 4px 6px -1px rgba(255, 255, 255, 0.1), 0 2px 4px -2px rgba(255, 255, 255, 0.05)",
+      "$description": "Card elevation shadow - subtle white-tinted shadow"
+    },
+    "dropdown": {
+      "$type": "shadow",
+      "$value": "0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.4)",
+      "$description": "Dropdown menu elevation shadow - pure black shadow"
+    },
+    "modal": {
+      "$type": "shadow",
+      "$value": "0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.6)",
+      "$description": "Modal dialog elevation shadow - deepest black shadow"
+    },
+    "focus": {
+      "$type": "shadow",
+      "$value": "0 0 0 3px rgba(255, 255, 255, 0.6)",
+      "$description": "Focus ring glow shadow - white glow ring"
+    }
+  }
+}

package/tokens/themes/obsidian.json

@@ -0,0 +1,143 @@
+{
+  "theme": {
+    "$type": "theme",
+    "$value": "obsidian",
+    "$description": "Dark gray with subtle warm accent - inspired by Lovable's Obsidian theme"
+  },
+  "color": {
+    "text": {
+      "default": {
+        "$type": "color",
+        "$value": "#DCD7D1",
+        "$description": "Primary text on obsidian - warm off-white"
+      },
+      "muted": {
+        "$type": "color",
+        "$value": "#A8A097",
+        "$description": "Secondary text - warm taupe gray"
+      },
+      "inverted": {
+        "$type": "color",
+        "$value": "#282828",
+        "$description": "Text color for light surfaces - dark obsidian"
+      },
+      "link": {
+        "$type": "color",
+        "$value": "#7AA2F7",
+        "$description": "Link text color - warm sage green"
+      },
+      "link.hover": {
+        "$type": "color",
+        "$value": "#9BC278",
+        "$description": "Link text color on hover - brighter sage green"
+      }
+    },
+    "surface": {
+      "default": {
+        "$type": "color",
+        "$value": "#282828",
+        "$description": "Default surface background - obsidian dark gray"
+      },
+      "raised": {
+        "$type": "color",
+        "$value": "#323232",
+        "$description": "Elevated surface background - lighter obsidian"
+      },
+      "sunken": {
+        "$type": "color",
+        "$value": "#1E1E1E",
+        "$description": "Depressed surface background - deeper obsidian"
+      },
+      "overlay": {
+        "$type": "color",
+        "$value": "rgba(40, 40, 40, 0.85)",
+        "$description": "Overlay background for modals - semi-transparent obsidian"
+      }
+    },
+    "border": {
+      "default": {
+        "$type": "color",
+        "$value": "#454545",
+        "$description": "Default border color - warm gray border"
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "#323232",
+        "$description": "Subtle border for dividers - barely visible"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "#585858",
+        "$description": "Stronger border for emphasis - visible gray"
+      }
+    },
+    "interactive": {
+      "primary": {
+        "$type": "color",
+        "$value": "#7AA2F7",
+        "$description": "Primary interactive element color - warm sage green"
+      },
+      "primary.hover": {
+        "$type": "color",
+        "$value": "#9BC278",
+        "$description": "Primary interactive color on hover - lighter sage"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "#504945",
+        "$description": "Secondary interactive element color - warm brown-gray"
+      }
+    },
+    "focus": {
+      "ring": {
+        "$type": "color",
+        "$value": "#7AA2F7",
+        "$description": "Focus ring outline color - sage green glow"
+      }
+    },
+    "status": {
+      "success": {
+        "$type": "color",
+        "$value": "#38B764",
+        "$description": "Success state color - warm green adjusted for obsidian"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "#FAB005",
+        "$description": "Warning state color - warm amber"
+      },
+      "error": {
+        "$type": "color",
+        "$value": "#FA5252",
+        "$description": "Error state color - warm coral red"
+      },
+      "info": {
+        "$type": "color",
+        "$value": "#7AA2F7",
+        "$description": "Info state color - sage green"
+      }
+    }
+  },
+  "shadow": {
+    "card": {
+      "$type": "shadow",
+      "$value": "0 4px 6px -1px rgba(122, 162, 247, 0.15), 0 2px 4px -2px rgba(122, 162, 247, 0.1)",
+      "$description": "Card elevation shadow - subtle green-tinted shadow"
+    },
+    "dropdown": {
+      "$type": "shadow",
+      "$value": "0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3)",
+      "$description": "Dropdown menu elevation shadow - soft dark shadow"
+    },
+    "modal": {
+      "$type": "shadow",
+      "$value": "0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4)",
+      "$description": "Modal dialog elevation shadow - prominent soft shadow"
+    },
+    "focus": {
+      "$type": "shadow",
+      "$value": "0 0 0 3px rgba(122, 162, 247, 0.4)",
+      "$description": "Focus ring glow shadow - warm green glow ring"
+    }
+  }
+}

package/tokens/themes/ocean.json

@@ -0,0 +1,143 @@
+{
+  "theme": {
+    "$type": "theme",
+    "$value": "ocean",
+    "$description": "Deep ocean theme with rich blues and cyan accents - immersive and mysterious"
+  },
+  "color": {
+    "text": {
+      "default": {
+        "$type": "color",
+        "$value": "#E0F2FE",
+        "$description": "Primary text - light cyan-blue for contrast on deep surfaces"
+      },
+      "muted": {
+        "$type": "color",
+        "$value": "#94A3B8",
+        "$description": "Secondary text - slate gray for less important content"
+      },
+      "inverted": {
+        "$type": "color",
+        "$value": "#082F49",
+        "$description": "Text on light surfaces - deep ocean blue"
+      },
+      "link": {
+        "$type": "color",
+        "$value": "#22D3EE",
+        "$description": "Link text - vibrant cyan accent"
+      },
+      "link.hover": {
+        "$type": "color",
+        "$value": "#67E8F9",
+        "$description": "Link on hover - bright cyan"
+      }
+    },
+    "surface": {
+      "default": {
+        "$type": "color",
+        "$value": "#0C4A6E",
+        "$description": "Default surface - deep ocean blue"
+      },
+      "raised": {
+        "$type": "color",
+        "$value": "#075985",
+        "$description": "Elevated surface - slightly lighter deep blue"
+      },
+      "sunken": {
+        "$type": "color",
+        "$value": "#083344",
+        "$description": "Depressed surface - darker blue-black for inputs"
+      },
+      "overlay": {
+        "$type": "color",
+        "$value": "rgba(8, 47, 73, 0.85)",
+        "$description": "Overlay - deep blue-tinted backdrop"
+      }
+    },
+    "border": {
+      "default": {
+        "$type": "color",
+        "$value": "#0369A1",
+        "$description": "Default border - ocean blue"
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "#0E7490",
+        "$description": "Subtle border - faint cyan-blue"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "#0EA5E9",
+        "$description": "Strong border - bright ocean cyan"
+      }
+    },
+    "interactive": {
+      "primary": {
+        "$type": "color",
+        "$value": "#22D3EE",
+        "$description": "Primary action - vibrant cyan"
+      },
+      "primary.hover": {
+        "$type": "color",
+        "$value": "#67E8F9",
+        "$description": "Primary hover - bright cyan"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "#38BDF8",
+        "$description": "Secondary action - sky blue"
+      }
+    },
+    "focus": {
+      "ring": {
+        "$type": "color",
+        "$value": "#22D3EE",
+        "$description": "Focus ring - cyan glow like bioluminescence"
+      }
+    },
+    "status": {
+      "success": {
+        "$type": "color",
+        "$value": "#34D399",
+        "$description": "Success - seafoam green"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "#FBBF24",
+        "$description": "Warning - warm amber"
+      },
+      "error": {
+        "$type": "color",
+        "$value": "#FB7185",
+        "$description": "Error - rose pink"
+      },
+      "info": {
+        "$type": "color",
+        "$value": "#38BDF8",
+        "$description": "Info - sky blue"
+      }
+    }
+  },
+  "shadow": {
+    "card": {
+      "$type": "shadow",
+      "$value": "0 4px 6px -1px rgba(34, 211, 238, 0.15), 0 2px 4px -2px rgba(34, 211, 238, 0.1)",
+      "$description": "Card shadow - cyan-tinted ocean depth"
+    },
+    "dropdown": {
+      "$type": "shadow",
+      "$value": "0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(34, 211, 238, 0.15)",
+      "$description": "Dropdown shadow - deep ocean darkness"
+    },
+    "modal": {
+      "$type": "shadow",
+      "$value": "0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(34, 211, 238, 0.2)",
+      "$description": "Modal shadow - profound depth"
+    },
+    "focus": {
+      "$type": "shadow",
+      "$value": "0 0 0 3px rgba(34, 211, 238, 0.4)",
+      "$description": "Focus glow - bioluminescent cyan"
+    }
+  }
+}

package/tokens/themes/paper.json

@@ -0,0 +1,143 @@
+{
+  "theme": {
+    "$type": "theme",
+    "$value": "paper",
+    "$description": "Warm off-white with burgundy accent - comfortable and refined"
+  },
+  "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": "#FAF7F5",
+        "$description": "Text color for dark surfaces - warm off-white"
+      },
+      "link": {
+        "$type": "color",
+        "$value": "#881337",
+        "$description": "Link text color - burgundy accent"
+      },
+      "link.hover": {
+        "$type": "color",
+        "$value": "#6B1B34",
+        "$description": "Link text color on hover - deeper burgundy"
+      }
+    },
+    "surface": {
+      "default": {
+        "$type": "color",
+        "$value": "#FAF7F5",
+        "$description": "Default surface background - warm off-white"
+      },
+      "raised": {
+        "$type": "color",
+        "$value": "#F5F0EB",
+        "$description": "Elevated surface background - slightly warmer off-white"
+      },
+      "sunken": {
+        "$type": "color",
+        "$value": "#EDE7DF",
+        "$description": "Depressed surface background - warm beige 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": "#D6D3D1",
+        "$description": "Default border color - warm stone"
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "#E7E5E4",
+        "$description": "Subtle border for dividers - very faint warm gray"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "#A8A29E",
+        "$description": "Stronger border for emphasis - warm gray"
+      }
+    },
+    "interactive": {
+      "primary": {
+        "$type": "color",
+        "$value": "#9F1239",
+        "$description": "Primary interactive element color - burgundy"
+      },
+      "primary.hover": {
+        "$type": "color",
+        "$value": "#881337",
+        "$description": "Primary interactive color on hover - deeper burgundy"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "#C2410C",
+        "$description": "Secondary interactive element color - warm orange accent"
+      }
+    },
+    "focus": {
+      "ring": {
+        "$type": "color",
+        "$value": "#BE123C",
+        "$description": "Focus ring outline color - rose glow"
+      }
+    },
+    "status": {
+      "success": {
+        "$type": "color",
+        "$value": "#15803D",
+        "$description": "Success state color - forest green"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "#B45309",
+        "$description": "Warning state color - warm orange"
+      },
+      "error": {
+        "$type": "color",
+        "$value": "#9F1239",
+        "$description": "Error state color - burgundy red"
+      },
+      "info": {
+        "$type": "color",
+        "$value": "#1D4ED8",
+        "$description": "Info state color - blue"
+      }
+    }
+  },
+  "shadow": {
+    "card": {
+      "$type": "shadow",
+      "$value": "0 4px 6px -1px rgba(41, 37, 36, 0.05), 0 2px 4px -2px rgba(41, 37, 36, 0.03)",
+      "$description": "Card elevation shadow - warm-tinted 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(159, 18, 57, 0.3)",
+      "$description": "Focus ring glow shadow - burgundy glow ring"
+    }
+  }
+}