From 836cd34a7e984069cd5ad7953cb85dd726657fba Mon Sep 17 00:00:00 2001
From: Richard Ward <JohnDoe6345789@gmail.com>
Date: Wed, 31 Dec 2025 00:51:10 +0000
Subject: [PATCH] config: styles,shared,packages (1 files)

---
 packages/shared/seed/styles.json | 691 +++++++++++++++++++++++++++----
 1 file changed, 610 insertions(+), 81 deletions(-)

diff --git a/packages/shared/seed/styles.json b/packages/shared/seed/styles.json
index 0945d14c7..a58dbbe3e 100644
--- a/packages/shared/seed/styles.json
+++ b/packages/shared/seed/styles.json
@@ -1,82 +1,611 @@
-[
-  {
-    "id": "global_base_theme",
-    "type": "global",
-    "category": "theme-variables",
-    "description": "Base theme color variables using OKLCH color space",
-    "priority": 1,
-    "css": ":root {\n  --background: oklch(0.98 0 0);\n  --foreground: oklch(0.25 0 0);\n\n  --card: oklch(1 0 0);\n  --card-foreground: oklch(0.25 0 0);\n  --popover: oklch(1 0 0);\n  --popover-foreground: oklch(0.25 0 0);\n\n  --primary: oklch(0.45 0.15 265);\n  --primary-foreground: oklch(0.98 0 0);\n  --secondary: oklch(0.65 0.02 250);\n  --secondary-foreground: oklch(0.25 0 0);\n  --muted: oklch(0.95 0.01 250);\n  --muted-foreground: oklch(0.5 0.01 250);\n  --accent: oklch(0.75 0.15 195);\n  --accent-foreground: oklch(0.2 0.05 250);\n  --destructive: oklch(0.55 0.22 25);\n  --destructive-foreground: oklch(0.98 0 0);\n\n  --border: oklch(0.88 0.01 250);\n  --input: oklch(0.88 0.01 250);\n  --ring: oklch(0.75 0.15 195);\n\n  --sidebar: oklch(0.25 0.03 250);\n  --sidebar-foreground: oklch(0.85 0.01 250);\n  --sidebar-primary: oklch(0.75 0.15 195);\n  --sidebar-primary-foreground: oklch(0.98 0 0);\n  --sidebar-accent: oklch(0.35 0.04 250);\n  --sidebar-accent-foreground: oklch(0.85 0.01 250);\n  --sidebar-border: oklch(0.35 0.04 250);\n  --sidebar-ring: oklch(0.75 0.15 195);\n\n  --radius: 0.5rem;\n\n  /* RGB equivalents for use in rgba() */\n  --color-primary-rgb: 74, 58, 199;\n  --color-accent-rgb: 56, 189, 248;\n}"
+{
+  "schema_version": "2.0.0",
+  "package": "shared",
+
+  "tokens": {
+    "colors": {
+      "background": {
+        "type": "color",
+        "value": "oklch(0.92 0.03 290)",
+        "metadata": {
+          "name": "Background",
+          "category": "base",
+          "description": "Main background color"
+        }
+      },
+      "foreground": {
+        "type": "color",
+        "value": "oklch(0.25 0.02 260)",
+        "metadata": {
+          "name": "Foreground",
+          "category": "base",
+          "description": "Main text color"
+        }
+      },
+      "card": {
+        "type": "color",
+        "value": "oklch(1 0 0)",
+        "metadata": {
+          "name": "Card Background",
+          "category": "surfaces"
+        }
+      },
+      "card-foreground": {
+        "type": "color",
+        "value": "oklch(0.25 0.02 260)",
+        "metadata": {
+          "name": "Card Text",
+          "category": "surfaces"
+        }
+      },
+      "popover": {
+        "type": "color",
+        "value": "oklch(1 0 0)",
+        "metadata": {
+          "name": "Popover Background",
+          "category": "surfaces"
+        }
+      },
+      "popover-foreground": {
+        "type": "color",
+        "value": "oklch(0.25 0.02 260)",
+        "metadata": {
+          "name": "Popover Text",
+          "category": "surfaces"
+        }
+      },
+      "primary": {
+        "type": "color",
+        "value": "oklch(0.55 0.18 290)",
+        "metadata": {
+          "name": "Primary",
+          "category": "brand",
+          "description": "Primary brand color - Purple/Blue"
+        }
+      },
+      "primary-foreground": {
+        "type": "color",
+        "value": "oklch(0.98 0 0)",
+        "metadata": {
+          "name": "Primary Text",
+          "category": "brand"
+        }
+      },
+      "secondary": {
+        "type": "color",
+        "value": "oklch(0.35 0.02 260)",
+        "metadata": {
+          "name": "Secondary",
+          "category": "brand"
+        }
+      },
+      "secondary-foreground": {
+        "type": "color",
+        "value": "oklch(0.90 0.01 260)",
+        "metadata": {
+          "name": "Secondary Text",
+          "category": "brand"
+        }
+      },
+      "muted": {
+        "type": "color",
+        "value": "oklch(0.95 0.02 290)",
+        "metadata": {
+          "name": "Muted Background",
+          "category": "neutral"
+        }
+      },
+      "muted-foreground": {
+        "type": "color",
+        "value": "oklch(0.50 0.02 260)",
+        "metadata": {
+          "name": "Muted Text",
+          "category": "neutral"
+        }
+      },
+      "accent": {
+        "type": "color",
+        "value": "oklch(0.70 0.17 195)",
+        "metadata": {
+          "name": "Accent",
+          "category": "brand",
+          "description": "Accent color - Cyan/Blue"
+        }
+      },
+      "accent-foreground": {
+        "type": "color",
+        "value": "oklch(0.2 0.02 260)",
+        "metadata": {
+          "name": "Accent Text",
+          "category": "brand"
+        }
+      },
+      "destructive": {
+        "type": "color",
+        "value": "oklch(0.55 0.22 25)",
+        "metadata": {
+          "name": "Destructive",
+          "category": "semantic",
+          "description": "Error/destructive actions"
+        }
+      },
+      "destructive-foreground": {
+        "type": "color",
+        "value": "oklch(0.98 0 0)",
+        "metadata": {
+          "name": "Destructive Text",
+          "category": "semantic"
+        }
+      },
+      "border": {
+        "type": "color",
+        "value": "oklch(0.85 0.02 290)",
+        "metadata": {
+          "name": "Border",
+          "category": "neutral"
+        }
+      },
+      "input": {
+        "type": "color",
+        "value": "oklch(0.85 0.02 290)",
+        "metadata": {
+          "name": "Input Border",
+          "category": "neutral"
+        }
+      },
+      "ring": {
+        "type": "color",
+        "value": "oklch(0.70 0.17 195)",
+        "metadata": {
+          "name": "Focus Ring",
+          "category": "semantic"
+        }
+      },
+      "sidebar": {
+        "type": "color",
+        "value": "oklch(0.35 0.02 260)",
+        "metadata": {
+          "name": "Sidebar Background",
+          "category": "sidebar"
+        }
+      },
+      "sidebar-foreground": {
+        "type": "color",
+        "value": "oklch(0.90 0.01 260)",
+        "metadata": {
+          "name": "Sidebar Text",
+          "category": "sidebar"
+        }
+      },
+      "sidebar-primary": {
+        "type": "color",
+        "value": "oklch(0.55 0.18 290)",
+        "metadata": {
+          "name": "Sidebar Primary",
+          "category": "sidebar"
+        }
+      },
+      "sidebar-primary-foreground": {
+        "type": "color",
+        "value": "oklch(0.98 0 0)",
+        "metadata": {
+          "name": "Sidebar Primary Text",
+          "category": "sidebar"
+        }
+      },
+      "sidebar-accent": {
+        "type": "color",
+        "value": "oklch(0.40 0.03 260)",
+        "metadata": {
+          "name": "Sidebar Accent",
+          "category": "sidebar"
+        }
+      },
+      "sidebar-accent-foreground": {
+        "type": "color",
+        "value": "oklch(0.90 0.01 260)",
+        "metadata": {
+          "name": "Sidebar Accent Text",
+          "category": "sidebar"
+        }
+      },
+      "sidebar-border": {
+        "type": "color",
+        "value": "oklch(0.30 0.02 260)",
+        "metadata": {
+          "name": "Sidebar Border",
+          "category": "sidebar"
+        }
+      },
+      "sidebar-ring": {
+        "type": "color",
+        "value": "oklch(0.70 0.17 195)",
+        "metadata": {
+          "name": "Sidebar Focus Ring",
+          "category": "sidebar"
+        }
+      },
+      "canvas": {
+        "type": "color",
+        "value": "oklch(0.96 0.01 290)",
+        "metadata": {
+          "name": "Canvas",
+          "category": "surfaces",
+          "description": "Builder/editor canvas background"
+        }
+      },
+      "drop-zone": {
+        "type": "color",
+        "value": "oklch(0.70 0.17 195 / 0.1)",
+        "metadata": {
+          "name": "Drop Zone",
+          "category": "interactive",
+          "description": "Drag and drop zone background"
+        }
+      },
+      "drop-zone-border": {
+        "type": "color",
+        "value": "oklch(0.70 0.17 195)",
+        "metadata": {
+          "name": "Drop Zone Border",
+          "category": "interactive"
+        }
+      }
+    },
+    "spacing": {
+      "unit": {
+        "type": "length",
+        "value": { "number": 0.25, "unit": "rem" }
+      }
+    },
+    "borderRadius": {
+      "base": {
+        "type": "length",
+        "value": { "number": 0.5, "unit": "rem" }
+      },
+      "sm": {
+        "type": "length",
+        "value": { "number": 0.25, "unit": "rem" }
+      },
+      "md": {
+        "type": "length",
+        "value": { "number": 0.5, "unit": "rem" }
+      },
+      "lg": {
+        "type": "length",
+        "value": { "number": 0.75, "unit": "rem" }
+      },
+      "xl": {
+        "type": "length",
+        "value": { "number": 1, "unit": "rem" }
+      },
+      "2xl": {
+        "type": "length",
+        "value": { "number": 1.5, "unit": "rem" }
+      },
+      "full": {
+        "type": "length",
+        "value": { "number": 9999, "unit": "px" }
+      }
+    },
+    "typography": {
+      "fontFamily": {
+        "body": {
+          "type": "fontFamily",
+          "value": "'IBM Plex Sans', system-ui, -apple-system, sans-serif"
+        },
+        "heading": {
+          "type": "fontFamily",
+          "value": "'Space Grotesk', system-ui, -apple-system, sans-serif"
+        },
+        "mono": {
+          "type": "fontFamily",
+          "value": "'JetBrains Mono', 'Courier New', monospace"
+        }
+      }
+    }
   },
-  {
-    "id": "global_tailwind_theme",
-    "type": "global",
-    "category": "theme-mapping",
-    "description": "Tailwind CSS theme variable mappings",
-    "priority": 2,
-    "css": "@theme {\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-card: var(--card);\n  --color-card-foreground: var(--card-foreground);\n  --color-popover: var(--popover);\n  --color-popover-foreground: var(--popover-foreground);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-secondary: var(--secondary);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-destructive: var(--destructive);\n  --color-destructive-foreground: var(--destructive-foreground);\n  --color-border: var(--border);\n  --color-input: var(--input);\n  --color-ring: var(--ring);\n\n  --color-sidebar: var(--sidebar);\n  --color-sidebar-foreground: var(--sidebar-foreground);\n  --color-sidebar-primary: var(--sidebar-primary);\n  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n  --color-sidebar-accent: var(--sidebar-accent);\n  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n  --color-sidebar-border: var(--sidebar-border);\n  --color-sidebar-ring: var(--sidebar-ring);\n\n  --radius-sm: calc(var(--radius) * 0.5);\n  --radius-md: var(--radius);\n  --radius-lg: calc(var(--radius) * 1.5);\n  --radius-xl: calc(var(--radius) * 2);\n  --radius-2xl: calc(var(--radius) * 3);\n  --radius-full: 9999px;\n}"
-  },
-  {
-    "id": "global_typography",
-    "type": "global",
-    "category": "typography",
-    "description": "Global typography settings and font families",
-    "priority": 3,
-    "css": "body {\n  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\nh1, h2, h3, h4, h5, h6 {\n  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;\n}\n\ncode, pre, .font-mono {\n  font-family: 'JetBrains Mono', 'Courier New', monospace;\n}"
-  },
-  {
-    "id": "global_base_styles",
-    "type": "global",
-    "category": "base",
-    "description": "Global base styles and resets",
-    "priority": 4,
-    "css": "* {\n  border-color: var(--border);\n}\n\nhtml, body {\n  margin: 0;\n  padding: 0;\n  height: 100%;\n}\n\n#root {\n  min-height: 100%;\n  display: flex;\n  flex-direction: column;\n}"
-  },
-  {
-    "id": "utility_flex_center",
-    "type": "utility",
-    "category": "layout",
-    "className": "flex-center",
-    "description": "Flexbox center utility",
-    "css": ".flex-center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}"
-  },
-  {
-    "id": "utility_text_gradient",
-    "type": "utility",
-    "category": "text",
-    "className": "text-gradient",
-    "description": "Gradient text utility",
-    "css": ".text-gradient {\n  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);\n  background-clip: text;\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  color: transparent;\n}"
-  },
-  {
-    "id": "utility_glass_effect",
-    "type": "utility",
-    "category": "effects",
-    "className": "glass-effect",
-    "description": "Glassmorphism effect utility",
-    "css": ".glass-effect {\n  background: rgba(255, 255, 255, 0.8);\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n}"
-  },
-  {
-    "id": "animation_fade_in",
-    "type": "animation",
-    "category": "animations",
-    "className": "fade-in",
-    "description": "Fade in animation",
-    "css": "@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.fade-in {\n  animation: fadeIn 0.3s ease-in-out;\n}"
-  },
-  {
-    "id": "animation_slide_up",
-    "type": "animation",
-    "category": "animations",
-    "className": "slide-up",
-    "description": "Slide up animation",
-    "css": "@keyframes slideUp {\n  from {\n    transform: translateY(20px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n.slide-up {\n  animation: slideUp 0.4s ease-out;\n}"
-  },
-  {
-    "id": "responsive_container",
-    "type": "utility",
-    "category": "layout",
-    "className": "container-responsive",
-    "description": "Responsive container utility",
-    "css": ".container-responsive {\n  width: 100%;\n  max-width: 1280px;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n@media (min-width: 640px) {\n  .container-responsive {\n    padding-left: 1.5rem;\n    padding-right: 1.5rem;\n  }\n}\n\n@media (min-width: 1024px) {\n  .container-responsive {\n    padding-left: 2rem;\n    padding-right: 2rem;\n  }\n}"
-  }
-]
+
+  "selectors": [
+    {
+      "id": "body_selector",
+      "predicate": {
+        "targetType": "Body",
+        "classes": [],
+        "states": []
+      }
+    },
+    {
+      "id": "heading_selector",
+      "predicate": {
+        "targetType": "Heading",
+        "classes": [],
+        "states": []
+      }
+    },
+    {
+      "id": "code_selector",
+      "predicate": {
+        "targetType": "Code",
+        "classes": [],
+        "states": []
+      }
+    },
+    {
+      "id": "text_gradient_selector",
+      "predicate": {
+        "targetType": "Text",
+        "classes": ["text-gradient"],
+        "states": []
+      }
+    },
+    {
+      "id": "glass_effect_selector",
+      "predicate": {
+        "targetType": "Box",
+        "classes": ["glass-effect"],
+        "states": []
+      }
+    },
+    {
+      "id": "container_responsive_selector",
+      "predicate": {
+        "targetType": "Box",
+        "classes": ["container-responsive"],
+        "states": []
+      }
+    }
+  ],
+
+  "effects": [
+    {
+      "id": "body_typography",
+      "properties": {
+        "fontFamily": {
+          "type": "fontFamily",
+          "value": { "token": "typography.fontFamily.body" }
+        }
+      }
+    },
+    {
+      "id": "heading_typography",
+      "properties": {
+        "fontFamily": {
+          "type": "fontFamily",
+          "value": { "token": "typography.fontFamily.heading" }
+        }
+      }
+    },
+    {
+      "id": "code_typography",
+      "properties": {
+        "fontFamily": {
+          "type": "fontFamily",
+          "value": { "token": "typography.fontFamily.mono" }
+        }
+      }
+    },
+    {
+      "id": "container_responsive_layout",
+      "properties": {
+        "width": {
+          "type": "keyword",
+          "value": "100%"
+        },
+        "maxWidth": {
+          "type": "length",
+          "value": { "number": 1280, "unit": "px" }
+        },
+        "marginLeft": {
+          "type": "keyword",
+          "value": "auto"
+        },
+        "marginRight": {
+          "type": "keyword",
+          "value": "auto"
+        },
+        "padding": {
+          "type": "responsive",
+          "breakpoints": {
+            "xs": { "value": 1, "unit": "rem" },
+            "sm": { "value": 1.5, "unit": "rem" },
+            "lg": { "value": 2, "unit": "rem" }
+          }
+        }
+      }
+    }
+  ],
+
+  "appearance": [
+    {
+      "id": "text_gradient_appearance",
+      "layers": [
+        {
+          "type": "background",
+          "properties": {
+            "gradient": {
+              "type": "linear",
+              "angle": 90,
+              "stops": [
+                { "position": 0, "color": { "token": "primary" } },
+                { "position": 100, "color": { "token": "accent" } }
+              ]
+            }
+          }
+        }
+      ],
+      "clip": "text"
+    },
+    {
+      "id": "glass_effect_appearance",
+      "layers": [
+        {
+          "type": "background",
+          "properties": {
+            "color": { "value": "rgba(255, 255, 255, 0.8)" }
+          }
+        },
+        {
+          "type": "backdrop",
+          "properties": {
+            "blur": { "value": 10, "unit": "px" }
+          }
+        }
+      ]
+    }
+  ],
+
+  "animations": [
+    {
+      "id": "fade_in_animation",
+      "name": "fadeIn",
+      "keyframes": [
+        {
+          "offset": 0,
+          "properties": {
+            "opacity": { "type": "number", "value": 0 }
+          }
+        },
+        {
+          "offset": 100,
+          "properties": {
+            "opacity": { "type": "number", "value": 1 }
+          }
+        }
+      ],
+      "duration": { "value": 300, "unit": "ms" },
+      "easing": "ease-in-out"
+    },
+    {
+      "id": "slide_up_animation",
+      "name": "slideUp",
+      "keyframes": [
+        {
+          "offset": 0,
+          "properties": {
+            "transform": {
+              "type": "transform",
+              "value": [{ "type": "translateY", "value": { "number": 20, "unit": "px" } }]
+            },
+            "opacity": { "type": "number", "value": 0 }
+          }
+        },
+        {
+          "offset": 100,
+          "properties": {
+            "transform": {
+              "type": "transform",
+              "value": [{ "type": "translateY", "value": { "number": 0, "unit": "px" } }]
+            },
+            "opacity": { "type": "number", "value": 1 }
+          }
+        }
+      ],
+      "duration": { "value": 400, "unit": "ms" },
+      "easing": "ease-out"
+    }
+  ],
+
+  "rules": [
+    {
+      "id": "rule_body",
+      "selector": "body_selector",
+      "priority": {
+        "importance": "normal",
+        "origin": "package",
+        "specificity": { "ids": 0, "classes": 0, "types": 1 },
+        "sourceOrder": 10
+      },
+      "effects": { "ref": "body_typography" },
+      "enabled": true
+    },
+    {
+      "id": "rule_heading",
+      "selector": "heading_selector",
+      "priority": {
+        "importance": "normal",
+        "origin": "package",
+        "specificity": { "ids": 0, "classes": 0, "types": 1 },
+        "sourceOrder": 20
+      },
+      "effects": { "ref": "heading_typography" },
+      "enabled": true
+    },
+    {
+      "id": "rule_code",
+      "selector": "code_selector",
+      "priority": {
+        "importance": "normal",
+        "origin": "package",
+        "specificity": { "ids": 0, "classes": 0, "types": 1 },
+        "sourceOrder": 30
+      },
+      "effects": { "ref": "code_typography" },
+      "enabled": true
+    },
+    {
+      "id": "rule_text_gradient",
+      "selector": "text_gradient_selector",
+      "priority": {
+        "importance": "normal",
+        "origin": "package",
+        "specificity": { "ids": 0, "classes": 1, "types": 1 },
+        "sourceOrder": 40
+      },
+      "appearance": { "ref": "text_gradient_appearance" },
+      "enabled": true
+    },
+    {
+      "id": "rule_glass_effect",
+      "selector": "glass_effect_selector",
+      "priority": {
+        "importance": "normal",
+        "origin": "package",
+        "specificity": { "ids": 0, "classes": 1, "types": 1 },
+        "sourceOrder": 50
+      },
+      "appearance": { "ref": "glass_effect_appearance" },
+      "enabled": true
+    },
+    {
+      "id": "rule_container_responsive",
+      "selector": "container_responsive_selector",
+      "priority": {
+        "importance": "normal",
+        "origin": "package",
+        "specificity": { "ids": 0, "classes": 1, "types": 1 },
+        "sourceOrder": 60
+      },
+      "effects": { "ref": "container_responsive_layout" },
+      "enabled": true
+    }
+  ],
+
+  "environments": [
+    {
+      "id": "mobile",
+      "conditions": {
+        "viewport": {
+          "maxWidth": { "value": 640, "unit": "px" }
+        }
+      }
+    },
+    {
+      "id": "tablet",
+      "conditions": {
+        "viewport": {
+          "minWidth": { "value": 640, "unit": "px" },
+          "maxWidth": { "value": 1024, "unit": "px" }
+        }
+      }
+    },
+    {
+      "id": "desktop",
+      "conditions": {
+        "viewport": {
+          "minWidth": { "value": 1024, "unit": "px" }
+        }
+      }
+    }
+  ]
+}