@optilogic/core 1.0.0 → 1.2.0

package/src/components/context-menu.tsx

@@ -217,7 +217,7 @@ function MenuItem({ item, onClose, depth = 0 }: MenuItemProps) {
         <div
           className={cn(
             "fixed z-[60] min-w-[180px] max-w-[280px]",
-            "rounded-md border border-border",
+            "rounded-md border border-popover-border",
             "bg-popover text-popover-foreground",
             "shadow-lg",
             "animate-in fade-in-0 zoom-in-95",
@@ -337,7 +337,7 @@ export function ContextMenu({
       ref={menuRef}
       className={cn(
         "fixed z-50 min-w-[180px] max-w-[280px]",
-        "rounded-md border border-border",
+        "rounded-md border border-popover-border",
         "bg-popover text-popover-foreground",
         "shadow-lg",
         "animate-in fade-in-0 zoom-in-95",

package/src/components/data-grid/DataGrid.tsx

@@ -756,7 +756,7 @@ export function DataGrid<T = Record<string, CellValue>>({
         {/* Tooltip for long content */}
         {hoveredCell && (
           <div
-            className="fixed z-[200] p-3 bg-popover text-popover-foreground border border-border rounded-md shadow-xl max-w-md break-words text-sm pointer-events-none"
+            className="fixed z-[200] p-3 bg-popover text-popover-foreground border border-popover-border rounded-md shadow-xl max-w-md break-words text-sm pointer-events-none"
             style={{
               left: `${hoveredCell.x}px`,
               top: `${hoveredCell.y}px`,

package/src/components/dropdown-menu.tsx

@@ -50,7 +50,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-popover-border bg-popover p-1 text-popover-foreground shadow-lg",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -73,7 +73,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] max-w-[90vw] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md",
+        "z-50 min-w-[8rem] max-w-[90vw] overflow-hidden rounded-md border border-popover-border bg-popover p-1 text-popover-foreground shadow-lg",
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",

package/src/components/popover.tsx

@@ -44,7 +44,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-auto max-w-[90vw] rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+        "z-50 w-auto max-w-[90vw] rounded-md border border-popover-border bg-popover p-4 text-popover-foreground shadow-lg outline-none",
         // Animation
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",

package/src/components/select.tsx

@@ -76,7 +76,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-popover-border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className

package/src/components/tooltip.tsx

@@ -53,11 +53,11 @@ const TooltipContent = React.forwardRef<
         "px-2.5 py-1.5 rounded-md",
         // Colors
         "bg-popover text-popover-foreground",
-        "border border-border",
+        "border border-popover-border",
         // Typography
         "text-xs font-medium",
         // Shadow
-        "shadow-md",
+        "shadow-lg",
         // Animation
         "animate-in fade-in-0 zoom-in-95",
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",

package/src/index.ts

@@ -360,6 +360,18 @@ export {
   resolveRenderer,
 } from "./components/file-view/index";
 
+// Branding
+export {
+  OptilogicLogo,
+  type OptilogicLogoProps,
+  OptilogicLogoWithText,
+  type OptilogicLogoWithTextProps,
+  CosmicFrogIcon,
+  type CosmicFrogIconProps,
+  DataStarIcon,
+  type DataStarIconProps,
+} from "./components/branding";
+
 // Theme system
 export {
   // Types
@@ -368,16 +380,11 @@ export {
   type ThemeHSL,
   type ColorFieldConfig,
   // Presets
-  GREEN_THEME,
   OPTILOGIC_LEGACY_THEME,
-  FUTURISTIC_THEME,
-  NATURE_THEME,
-  SCIFI_THEME,
-  OCEAN_THEME,
-  SUNSET_THEME,
-  FOREST_THEME,
-  CYBERPUNK_THEME,
+  OPTILOGIC_DARK_THEME,
+  MODERN_LIGHT_THEME,
   MINIMALIST_LIGHT_THEME,
+  MODERN_DARK_THEME,
   DARK_ELEGANT_THEME,
   PRESET_THEMES,
   ALL_THEMES,

package/src/styles.css

@@ -17,94 +17,98 @@
 
 @layer base {
   :root {
+    /* Matches OPTILOGIC_LEGACY_THEME */
     --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --foreground: 243 82% 20%;
+    --card: 0 0% 98%;
+    --card-foreground: 243 82% 20%;
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --success: 142 76% 36%;
-    --success-foreground: 210 40% 98%;
-    --warning: 38 92% 50%;
-    --warning-foreground: 222.2 47.4% 11.2%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --toggle-track: var(--muted);
-    --toggle-track-foreground: var(--background);
-    --input-hover: var(--foreground);
-    --divider: 214.3 31.8% 91.4%;
-    --chip: 210 40% 96.1%;
-    --chip-foreground: 222.2 47.4% 11.2%;
+    --popover-foreground: 243 82% 20%;
+    --primary: 243 82% 20%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 234 86% 67%;
+    --secondary-foreground: 0 0% 100%;
+    --muted: 216 27% 92%;
+    --muted-foreground: 0 1% 45%;
+    --accent: 229 87% 90%;
+    --accent-foreground: 243 82% 20%;
+    --destructive: 0 72% 51%;
+    --destructive-foreground: 0 0% 100%;
+    --success: 151 48% 50%;
+    --success-foreground: 0 0% 100%;
+    --warning: 45 90% 62%;
+    --warning-foreground: 243 82% 20%;
+    --border: 0 0% 82%;
+    --input: 0 0% 82%;
+    --ring: 234 86% 67%;
+    --popover-border: var(--border);
+    --toggle-track: 0 0% 82%;
+    --toggle-track-foreground: 0 0% 100%;
+    --input-hover: 234 86% 67%;
+    --divider: 0 0% 82%;
+    --chip: 227 88% 85%;
+    --chip-foreground: 243 82% 20%;
     --disabled-opacity: 0.5;
     --radius: 0.5rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --chart-6: 262 60% 55%;
-    --chart-7: 142 60% 45%;
-    --chart-8: 350 65% 55%;
-    --chart-9: 200 70% 50%;
-    --chart-10: 60 65% 50%;
-    --chart-11: 310 55% 50%;
-    --chart-12: 180 50% 45%;
+    --chart-1: 100 63% 51%;
+    --chart-2: 45 90% 62%;
+    --chart-3: 234 86% 67%;
+    --chart-4: 151 48% 50%;
+    --chart-5: 233 80% 76%;
+    --chart-6: 0 72% 51%;
+    --chart-7: 24 73% 55%;
+    --chart-8: 170 69% 46%;
+    --chart-9: 25 38% 44%;
+    --chart-10: 174 100% 34%;
+    --chart-11: 266 54% 50%;
+    --chart-12: 326 72% 55%;
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --success: 142 76% 36%;
-    --success-foreground: 210 40% 98%;
-    --warning: 38 92% 50%;
-    --warning-foreground: 222.2 47.4% 11.2%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-    --toggle-track: var(--muted);
-    --toggle-track-foreground: var(--background);
-    --input-hover: var(--foreground);
-    --divider: 217.2 32.6% 17.5%;
-    --chip: 217.2 32.6% 17.5%;
-    --chip-foreground: 210 40% 98%;
+    /* Matches MODERN_DARK_THEME */
+    --background: 240 6% 4%;
+    --foreground: 0 0% 98%;
+    --card: 240 6% 10%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 6% 10%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 217 91% 60%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 240 4% 16%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 4% 16%;
+    --muted-foreground: 240 5% 65%;
+    --accent: 240 4% 16%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+    --success: 142 71% 45%;
+    --success-foreground: 0 0% 100%;
+    --warning: 48 96% 53%;
+    --warning-foreground: 240 6% 4%;
+    --border: 240 4% 26%;
+    --input: 240 4% 26%;
+    --ring: 217 91% 60%;
+    --popover-border: 240 4% 34%;
+    --toggle-track: 240 4% 26%;
+    --toggle-track-foreground: 0 0% 98%;
+    --input-hover: 217 91% 60%;
+    --divider: 240 4% 26%;
+    --chip: 240 4% 16%;
+    --chip-foreground: 240 5% 83%;
     --disabled-opacity: 0.5;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --chart-6: 120 55% 50%;
-    --chart-7: 200 75% 55%;
-    --chart-8: 50 80% 55%;
-    --chart-9: 0 70% 55%;
-    --chart-10: 260 65% 60%;
-    --chart-11: 180 60% 50%;
-    --chart-12: 90 55% 55%;
+    --chart-1: 217 91% 60%;
+    --chart-2: 142 71% 45%;
+    --chart-3: 38 92% 50%;
+    --chart-4: 0 84% 60%;
+    --chart-5: 270 60% 60%;
+    --chart-6: 174 60% 50%;
+    --chart-7: 24 95% 53%;
+    --chart-8: 330 80% 60%;
+    --chart-9: 199 89% 48%;
+    --chart-10: 48 96% 53%;
+    --chart-11: 162 63% 41%;
+    --chart-12: 292 84% 61%;
   }
 }
 

package/src/tailwind-preset.ts

@@ -83,6 +83,7 @@ export const optiUiPreset: Partial<Config> = {
 
         // Border, input, ring
         border: "hsl(var(--border))",
+        "popover-border": "hsl(var(--popover-border))",
         input: {
           DEFAULT: "hsl(var(--input))",
           hover: "hsl(var(--input-hover))",

package/src/theme/index.ts

@@ -9,16 +9,11 @@ export type { Theme, ThemeHex, ThemeHSL, ColorFieldConfig } from "./types";
 
 // Presets
 export {
-  GREEN_THEME,
   OPTILOGIC_LEGACY_THEME,
-  FUTURISTIC_THEME,
-  NATURE_THEME,
-  SCIFI_THEME,
-  OCEAN_THEME,
-  SUNSET_THEME,
-  FOREST_THEME,
-  CYBERPUNK_THEME,
+  OPTILOGIC_DARK_THEME,
+  MODERN_LIGHT_THEME,
   MINIMALIST_LIGHT_THEME,
+  MODERN_DARK_THEME,
   DARK_ELEGANT_THEME,
   PRESET_THEMES,
   ALL_THEMES,