mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-24 13:54:57 +00:00
612 lines
15 KiB
JSON
612 lines
15 KiB
JSON
{
|
|
"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"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
"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" }
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|