From 838099da928b84ee1498db592575e85d62032060 Mon Sep 17 00:00:00 2001
From: Richard Ward <JohnDoe6345789@gmail.com>
Date: Wed, 31 Dec 2025 00:22:56 +0000
Subject: [PATCH] config: ui,styles,packages (1 files)

---
 packages/ui_home/seed/styles.json | 576 +++++++++++++++++++++++++-----
 1 file changed, 488 insertions(+), 88 deletions(-)

diff --git a/packages/ui_home/seed/styles.json b/packages/ui_home/seed/styles.json
index bdb0f6d35..d6ee08bd3 100644
--- a/packages/ui_home/seed/styles.json
+++ b/packages/ui_home/seed/styles.json
@@ -1,89 +1,489 @@
-[
-  {
-    "id": "global_theme",
-    "type": "global",
-    "category": "theme",
-    "description": "Global theme variables and color definitions",
-    "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}"
+{
+  "schema_version": "2.0.0",
+  "package": "ui_home",
+
+  "tokens": {
+    "colors": {
+      "primary": {
+        "type": "color",
+        "value": "oklch(0.45 0.15 265)",
+        "metadata": {
+          "name": "Primary Blue/Purple",
+          "category": "brand"
+        }
+      },
+      "accent": {
+        "type": "color",
+        "value": "oklch(0.75 0.15 195)",
+        "metadata": {
+          "name": "Accent Cyan",
+          "category": "brand"
+        }
+      },
+      "background": {
+        "type": "color",
+        "value": "oklch(0.98 0 0)",
+        "metadata": {
+          "name": "Background",
+          "category": "surface"
+        }
+      },
+      "foreground": {
+        "type": "color",
+        "value": "oklch(0.25 0 0)",
+        "metadata": {
+          "name": "Foreground Text",
+          "category": "text"
+        }
+      },
+      "muted": {
+        "type": "color",
+        "value": "oklch(0.95 0.01 250)",
+        "metadata": {
+          "name": "Muted Surface",
+          "category": "surface"
+        }
+      },
+      "muted-foreground": {
+        "type": "color",
+        "value": "oklch(0.5 0.01 250)",
+        "metadata": {
+          "name": "Muted Text",
+          "category": "text"
+        }
+      },
+      "border": {
+        "type": "color",
+        "value": "oklch(0.88 0.01 250)",
+        "metadata": {
+          "name": "Border",
+          "category": "borders"
+        }
+      }
+    },
+    "spacing": {
+      "unit": {
+        "type": "length",
+        "value": { "number": 0.25, "unit": "rem" }
+      },
+      "scale": [1, 2, 3, 4, 6, 8, 12, 16, 20, 24]
+    },
+    "typography": {
+      "fontFamily": {
+        "body": "IBM Plex Sans, system-ui, sans-serif",
+        "heading": "Space Grotesk, system-ui, sans-serif",
+        "mono": "JetBrains Mono, monospace"
+      }
+    }
   },
-  {
-    "id": "home_page_styles",
-    "type": "component",
-    "category": "page",
-    "className": "home-page",
-    "description": "Landing page main container styling",
-    "css": ".home-page {\n  min-height: 100vh;\n  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.05) 0%, transparent 50%, rgba(var(--color-accent-rgb), 0.05) 100%);\n}"
-  },
-  {
-    "id": "hero_section_styles",
-    "type": "component",
-    "category": "section",
-    "className": "hero-section",
-    "description": "Hero section styling for landing page",
-    "css": ".hero-section {\n  padding: 4rem 1rem;\n}\n\n@media (min-width: 768px) {\n  .hero-section {\n    padding: 6rem 2rem;\n  }\n}"
-  },
-  {
-    "id": "hero_title_styles",
-    "type": "component",
-    "category": "text",
-    "className": "hero-title",
-    "description": "Hero title with gradient text effect",
-    "css": ".hero-title {\n  font-weight: 700;\n  font-size: 2.5rem;\n  line-height: 1.1;\n  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 50%, var(--color-primary) 100%);\n  background-clip: text;\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  color: transparent;\n}\n\n@media (min-width: 640px) {\n  .hero-title {\n    font-size: 3.5rem;\n  }\n}\n\n@media (min-width: 768px) {\n  .hero-title {\n    font-size: 4rem;\n  }\n}"
-  },
-  {
-    "id": "hero_subtitle_styles",
-    "type": "component",
-    "category": "text",
-    "className": "hero-subtitle",
-    "description": "Hero subtitle styling",
-    "css": ".hero-subtitle {\n  color: var(--muted-foreground);\n  font-weight: 400;\n  max-width: 600px;\n  font-size: 1rem;\n  line-height: 1.6;\n}\n\n@media (min-width: 768px) {\n  .hero-subtitle {\n    font-size: 1.25rem;\n  }\n}"
-  },
-  {
-    "id": "feature_card_styles",
-    "type": "component",
-    "category": "card",
-    "className": "feature-card",
-    "description": "Feature card base styling with hover effects",
-    "css": ".feature-card {\n  height: 100%;\n  border: 2px solid var(--border);\n  transition: border-color 0.2s ease-in-out, transform 0.2s ease-in-out;\n}\n\n.feature-card:hover {\n  border-color: var(--primary);\n  transform: translateY(-2px);\n}"
-  },
-  {
-    "id": "feature_icon_styles",
-    "type": "component",
-    "category": "icon",
-    "className": "feature-icon",
-    "description": "Feature card icon styling with gradients",
-    "css": ".feature-icon {\n  width: 48px;\n  height: 48px;\n  border-radius: 0.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  font-weight: 700;\n  font-size: 1.25rem;\n  margin-bottom: 1rem;\n}\n\n.feature-card--level1 .feature-icon {\n  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);\n}\n\n.feature-card--level2 .feature-icon {\n  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);\n}\n\n.feature-card--level3 .feature-icon {\n  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);\n}\n\n.feature-card--level4 .feature-icon {\n  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n}\n\n.feature-card--level5 .feature-icon {\n  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);\n}\n\n.feature-card--level6 .feature-icon {\n  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n}"
-  },
-  {
-    "id": "features_section_styles",
-    "type": "component",
-    "category": "section",
-    "className": "features-section",
-    "description": "Features section styling",
-    "css": ".features-section {\n  padding: 3rem 1rem;\n}\n\n@media (min-width: 768px) {\n  .features-section {\n    padding: 5rem 2rem;\n  }\n}"
-  },
-  {
-    "id": "about_section_styles",
-    "type": "component",
-    "category": "section",
-    "className": "about-section",
-    "description": "About section styling with background",
-    "css": ".about-section {\n  padding: 3rem 1rem;\n  background-color: rgba(0, 0, 0, 0.02);\n}\n\n@media (min-width: 768px) {\n  .about-section {\n    padding: 5rem 2rem;\n  }\n}"
-  },
-  {
-    "id": "contact_section_styles",
-    "type": "component",
-    "category": "section",
-    "className": "contact-section",
-    "description": "Contact section styling",
-    "css": ".contact-section {\n  padding: 3rem 1rem;\n}\n\n@media (min-width: 768px) {\n  .contact-section {\n    padding: 5rem 2rem;\n  }\n}"
-  },
-  {
-    "id": "contact_card_styles",
-    "type": "component",
-    "category": "card",
-    "className": "contact-card",
-    "description": "Contact form card styling",
-    "css": ".contact-card {\n  padding: 1.5rem;\n}\n\n@media (min-width: 768px) {\n  .contact-card {\n    padding: 2rem;\n  }\n}"
-  }
-]
+
+  "selectors": [
+    {
+      "id": "hero_title_selector",
+      "predicate": {
+        "targetType": "Text",
+        "classes": ["hero-title"],
+        "states": [],
+        "relationship": null
+      }
+    },
+    {
+      "id": "hero_subtitle_selector",
+      "predicate": {
+        "targetType": "Text",
+        "classes": ["hero-subtitle"],
+        "states": [],
+        "relationship": null
+      }
+    },
+    {
+      "id": "feature_card_selector",
+      "predicate": {
+        "targetType": "Card",
+        "classes": ["feature-card"],
+        "states": [],
+        "relationship": null
+      }
+    },
+    {
+      "id": "feature_card_hover_selector",
+      "predicate": {
+        "targetType": "Card",
+        "classes": ["feature-card"],
+        "states": ["hover"],
+        "relationship": null
+      }
+    },
+    {
+      "id": "feature_icon_selector",
+      "predicate": {
+        "targetType": "Box",
+        "classes": ["feature-icon"],
+        "states": [],
+        "relationship": {
+          "type": "descendant",
+          "ancestor": {
+            "targetType": "Card",
+            "classes": ["feature-card"]
+          }
+        }
+      }
+    }
+  ],
+
+  "effects": [
+    {
+      "id": "hero_title_typography",
+      "properties": {
+        "fontWeight": {
+          "type": "number",
+          "value": 700
+        },
+        "fontSize": {
+          "type": "responsive",
+          "breakpoints": {
+            "xs": { "value": 2.5, "unit": "rem" },
+            "sm": { "value": 3.5, "unit": "rem" },
+            "md": { "value": 4, "unit": "rem" }
+          }
+        },
+        "lineHeight": {
+          "type": "number",
+          "value": 1.1
+        }
+      }
+    },
+    {
+      "id": "hero_subtitle_typography",
+      "properties": {
+        "fontWeight": {
+          "type": "number",
+          "value": 400
+        },
+        "fontSize": {
+          "type": "responsive",
+          "breakpoints": {
+            "xs": { "value": 1, "unit": "rem" },
+            "md": { "value": 1.25, "unit": "rem" }
+          }
+        },
+        "lineHeight": {
+          "type": "number",
+          "value": 1.6
+        },
+        "maxWidth": {
+          "type": "length",
+          "value": { "number": 600, "unit": "px" }
+        }
+      }
+    },
+    {
+      "id": "feature_card_spacing",
+      "properties": {
+        "padding": {
+          "type": "spacing",
+          "value": { "multiplier": 6, "unit": "spacing.unit" }
+        }
+      }
+    },
+    {
+      "id": "feature_card_hover_transform",
+      "properties": {
+        "transform": {
+          "type": "transform",
+          "value": {
+            "translateY": { "value": -2, "unit": "px" }
+          }
+        }
+      }
+    }
+  ],
+
+  "appearance": [
+    {
+      "id": "hero_title_gradient",
+      "layers": [
+        {
+          "type": "background",
+          "order": 0,
+          "properties": {
+            "gradient": {
+              "type": "linear",
+              "angle": 90,
+              "stops": [
+                { "position": 0, "color": { "token": "primary" } },
+                { "position": 0.5, "color": { "token": "accent" } },
+                { "position": 1, "color": { "token": "primary" } }
+              ]
+            }
+          }
+        }
+      ],
+      "clip": "text"
+    },
+    {
+      "id": "hero_subtitle_color",
+      "layers": [
+        {
+          "type": "foreground",
+          "properties": {
+            "color": {
+              "type": "color",
+              "value": { "token": "muted-foreground" }
+            }
+          }
+        }
+      ]
+    },
+    {
+      "id": "feature_card_border",
+      "layers": [
+        {
+          "type": "border",
+          "order": 0,
+          "properties": {
+            "width": { "value": 2, "unit": "px" },
+            "style": "solid",
+            "color": { "token": "border" },
+            "radius": { "value": 0.5, "unit": "rem" }
+          }
+        }
+      ]
+    },
+    {
+      "id": "feature_icon_level1",
+      "layers": [
+        {
+          "type": "background",
+          "properties": {
+            "gradient": {
+              "type": "linear",
+              "angle": 135,
+              "stops": [
+                { "position": 0, "color": { "value": "#3b82f6" } },
+                { "position": 1, "color": { "value": "#2563eb" } }
+              ]
+            }
+          }
+        }
+      ]
+    },
+    {
+      "id": "feature_icon_level2",
+      "layers": [
+        {
+          "type": "background",
+          "properties": {
+            "gradient": {
+              "type": "linear",
+              "angle": 135,
+              "stops": [
+                { "position": 0, "color": { "value": "#22c55e" } },
+                { "position": 1, "color": { "value": "#16a34a" } }
+              ]
+            }
+          }
+        }
+      ]
+    },
+    {
+      "id": "feature_icon_level3",
+      "layers": [
+        {
+          "type": "background",
+          "properties": {
+            "gradient": {
+              "type": "linear",
+              "angle": 135,
+              "stops": [
+                { "position": 0, "color": { "value": "#f97316" } },
+                { "position": 1, "color": { "value": "#ea580c" } }
+              ]
+            }
+          }
+        }
+      ]
+    },
+    {
+      "id": "feature_icon_level4",
+      "layers": [
+        {
+          "type": "background",
+          "properties": {
+            "gradient": {
+              "type": "linear",
+              "angle": 135,
+              "stops": [
+                { "position": 0, "color": { "value": "#ef4444" } },
+                { "position": 1, "color": { "value": "#dc2626" } }
+              ]
+            }
+          }
+        }
+      ]
+    },
+    {
+      "id": "feature_icon_level5",
+      "layers": [
+        {
+          "type": "background",
+          "properties": {
+            "gradient": {
+              "type": "linear",
+              "angle": 135,
+              "stops": [
+                { "position": 0, "color": { "value": "#a855f7" } },
+                { "position": 1, "color": { "value": "#9333ea" } }
+              ]
+            }
+          }
+        }
+      ]
+    },
+    {
+      "id": "feature_icon_level6",
+      "layers": [
+        {
+          "type": "background",
+          "properties": {
+            "gradient": {
+              "type": "linear",
+              "angle": 135,
+              "stops": [
+                { "position": 0, "color": { "value": "#f59e0b" } },
+                { "position": 1, "color": { "value": "#d97706" } }
+              ]
+            }
+          }
+        }
+      ]
+    }
+  ],
+
+  "layouts": [
+    {
+      "id": "hero_section_layout",
+      "type": "flex",
+      "constraints": {
+        "direction": "column",
+        "gap": { "number": 3, "unit": "rem" },
+        "alignment": {
+          "justify": "center",
+          "align": "center"
+        }
+      }
+    },
+    {
+      "id": "features_grid_layout",
+      "type": "grid",
+      "constraints": {
+        "columns": {
+          "type": "responsive",
+          "breakpoints": {
+            "xs": 1,
+            "sm": 2,
+            "lg": 3
+          }
+        },
+        "gap": { "number": 3, "unit": "rem" },
+        "alignment": {
+          "justify": "center",
+          "align": "start"
+        }
+      }
+    }
+  ],
+
+  "transitions": [
+    {
+      "id": "card_hover_transition",
+      "trigger": { "state": "hover" },
+      "properties": ["borderColor", "transform"],
+      "duration": { "value": 200, "unit": "ms" },
+      "easing": "ease-in-out"
+    }
+  ],
+
+  "rules": [
+    {
+      "id": "rule_hero_title",
+      "selector": "hero_title_selector",
+      "priority": {
+        "importance": "normal",
+        "origin": "package",
+        "specificity": { "ids": 0, "classes": 1, "types": 1 },
+        "sourceOrder": 10
+      },
+      "effects": { "ref": "hero_title_typography" },
+      "appearance": { "ref": "hero_title_gradient" },
+      "enabled": true
+    },
+    {
+      "id": "rule_hero_subtitle",
+      "selector": "hero_subtitle_selector",
+      "priority": {
+        "importance": "normal",
+        "origin": "package",
+        "specificity": { "ids": 0, "classes": 1, "types": 1 },
+        "sourceOrder": 20
+      },
+      "effects": { "ref": "hero_subtitle_typography" },
+      "appearance": { "ref": "hero_subtitle_color" },
+      "enabled": true
+    },
+    {
+      "id": "rule_feature_card",
+      "selector": "feature_card_selector",
+      "priority": {
+        "importance": "normal",
+        "origin": "package",
+        "specificity": { "ids": 0, "classes": 1, "types": 1 },
+        "sourceOrder": 30
+      },
+      "effects": { "ref": "feature_card_spacing" },
+      "appearance": { "ref": "feature_card_border" },
+      "transition": { "ref": "card_hover_transition" },
+      "enabled": true
+    },
+    {
+      "id": "rule_feature_card_hover",
+      "selector": "feature_card_hover_selector",
+      "priority": {
+        "importance": "normal",
+        "origin": "package",
+        "specificity": { "ids": 0, "classes": 2, "types": 1 },
+        "sourceOrder": 31
+      },
+      "effects": { "ref": "feature_card_hover_transform" },
+      "enabled": true
+    }
+  ],
+
+  "environments": [
+    {
+      "id": "mobile",
+      "conditions": {
+        "viewport": {
+          "maxWidth": { "value": 768, "unit": "px" }
+        }
+      }
+    },
+    {
+      "id": "tablet",
+      "conditions": {
+        "viewport": {
+          "minWidth": { "value": 769, "unit": "px" },
+          "maxWidth": { "value": 1024, "unit": "px" }
+        }
+      }
+    },
+    {
+      "id": "desktop",
+      "conditions": {
+        "viewport": {
+          "minWidth": { "value": 1025, "unit": "px" }
+        }
+      }
+    }
+  ]
+}