mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-24 22:04:56 +00:00
config: ui,styles,packages (1 files)
This commit is contained in:
Richard Ward
@@ -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" }
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user