mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-29 08:14:57 +00:00
config: ui,styles,packages (1 files)
This commit is contained in:
Richard Ward
@@ -1,11 +1,530 @@
|
||||
[
|
||||
{
|
||||
"id": "ui_level4_base",
|
||||
"type": "component",
|
||||
"category": "package",
|
||||
"className": "ui_level4",
|
||||
"description": "Base styles for Ui Level4 package",
|
||||
"priority": 100,
|
||||
"css": ".ui_level4 {\n /* Add package-specific styles here */\n}"
|
||||
}
|
||||
]
|
||||
{
|
||||
"schema_version": "2.0.0",
|
||||
"package": "ui_level4",
|
||||
|
||||
"tokens": {
|
||||
"colors": {
|
||||
"level4-primary": {
|
||||
"type": "color",
|
||||
"value": "oklch(0.60 0.22 295)",
|
||||
"metadata": {
|
||||
"name": "Level 4 Purple",
|
||||
"category": "brand"
|
||||
}
|
||||
},
|
||||
"level4-accent": {
|
||||
"type": "color",
|
||||
"value": "oklch(0.65 0.20 290)",
|
||||
"metadata": {
|
||||
"name": "Level 4 Accent Purple",
|
||||
"category": "brand"
|
||||
}
|
||||
}
|
||||
},
|
||||
"spacing": {
|
||||
"unit": {
|
||||
"type": "length",
|
||||
"value": { "number": 0.25, "unit": "rem" }
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
"selectors": [
|
||||
{
|
||||
"id": "builder_nav_selector",
|
||||
"predicate": {
|
||||
"targetType": "Nav",
|
||||
"classes": ["builder-nav"],
|
||||
"states": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "builder_workspace_selector",
|
||||
"predicate": {
|
||||
"targetType": "Section",
|
||||
"classes": ["builder-workspace"],
|
||||
"states": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "builder_logo_selector",
|
||||
"predicate": {
|
||||
"targetType": "Box",
|
||||
"classes": ["builder-logo"],
|
||||
"states": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "builder_title_selector",
|
||||
"predicate": {
|
||||
"targetType": "Text",
|
||||
"classes": ["builder-title"],
|
||||
"states": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "builder_subtitle_selector",
|
||||
"predicate": {
|
||||
"targetType": "Text",
|
||||
"classes": ["builder-subtitle"],
|
||||
"states": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "config_summary_selector",
|
||||
"predicate": {
|
||||
"targetType": "Box",
|
||||
"classes": ["config-summary"],
|
||||
"states": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "tabs_container_selector",
|
||||
"predicate": {
|
||||
"targetType": "Box",
|
||||
"classes": ["tabs-container"],
|
||||
"states": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "tab_badge_selector",
|
||||
"predicate": {
|
||||
"targetType": "Badge",
|
||||
"classes": ["tab-badge"],
|
||||
"states": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "preview_button_selector",
|
||||
"predicate": {
|
||||
"targetType": "Button",
|
||||
"classes": ["preview-button"],
|
||||
"states": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "preview_button_hover_selector",
|
||||
"predicate": {
|
||||
"targetType": "Button",
|
||||
"classes": ["preview-button"],
|
||||
"states": ["hover"]
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
"effects": [
|
||||
{
|
||||
"id": "builder_nav_sticky",
|
||||
"properties": {
|
||||
"position": {
|
||||
"type": "keyword",
|
||||
"value": "sticky"
|
||||
},
|
||||
"top": {
|
||||
"type": "length",
|
||||
"value": { "number": 0, "unit": "px" }
|
||||
},
|
||||
"zIndex": {
|
||||
"type": "number",
|
||||
"value": 50
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "builder_workspace_layout",
|
||||
"properties": {
|
||||
"padding": {
|
||||
"type": "responsive",
|
||||
"breakpoints": {
|
||||
"xs": { "value": 1, "unit": "rem" },
|
||||
"sm": { "value": 1.5, "unit": "rem" },
|
||||
"lg": { "value": 2, "unit": "rem" }
|
||||
}
|
||||
},
|
||||
"maxWidth": {
|
||||
"type": "length",
|
||||
"value": { "number": 1536, "unit": "px" }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "builder_logo_size",
|
||||
"properties": {
|
||||
"width": {
|
||||
"type": "length",
|
||||
"value": { "number": 32, "unit": "px" }
|
||||
},
|
||||
"height": {
|
||||
"type": "length",
|
||||
"value": { "number": 32, "unit": "px" }
|
||||
},
|
||||
"borderRadius": {
|
||||
"type": "length",
|
||||
"value": { "number": 0.5, "unit": "rem" }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "builder_title_typography",
|
||||
"properties": {
|
||||
"fontWeight": {
|
||||
"type": "number",
|
||||
"value": 700
|
||||
},
|
||||
"fontSize": {
|
||||
"type": "responsive",
|
||||
"breakpoints": {
|
||||
"xs": { "value": 1.875, "unit": "rem" },
|
||||
"md": { "value": 1.875, "unit": "rem" }
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "builder_subtitle_typography",
|
||||
"properties": {
|
||||
"color": {
|
||||
"type": "color",
|
||||
"value": { "token": "muted-foreground" }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "config_summary_spacing",
|
||||
"properties": {
|
||||
"padding": {
|
||||
"type": "spacing",
|
||||
"value": { "multiplier": 6, "unit": "spacing.unit" }
|
||||
},
|
||||
"marginTop": {
|
||||
"type": "length",
|
||||
"value": { "number": 2, "unit": "rem" }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "tabs_container_spacing",
|
||||
"properties": {
|
||||
"marginTop": {
|
||||
"type": "length",
|
||||
"value": { "number": 1.5, "unit": "rem" }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "tab_badge_spacing",
|
||||
"properties": {
|
||||
"marginLeft": {
|
||||
"type": "length",
|
||||
"value": { "number": 0.5, "unit": "rem" }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "preview_button_effects",
|
||||
"properties": {
|
||||
"transition": {
|
||||
"type": "keyword",
|
||||
"value": "all"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "preview_button_hover_transform",
|
||||
"properties": {
|
||||
"transform": {
|
||||
"type": "transform",
|
||||
"value": [
|
||||
{ "type": "scale", "value": 1.05 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
"appearance": [
|
||||
{
|
||||
"id": "builder_nav_appearance",
|
||||
"layers": [
|
||||
{
|
||||
"type": "background",
|
||||
"properties": {
|
||||
"color": { "token": "sidebar" }
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "border",
|
||||
"properties": {
|
||||
"width": { "value": 0, "unit": "px" },
|
||||
"bottomWidth": { "value": 1, "unit": "px" },
|
||||
"style": "solid",
|
||||
"color": { "token": "sidebar-border" }
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "builder_workspace_appearance",
|
||||
"layers": [
|
||||
{
|
||||
"type": "background",
|
||||
"properties": {
|
||||
"color": { "token": "canvas" }
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "builder_logo_appearance",
|
||||
"layers": [
|
||||
{
|
||||
"type": "background",
|
||||
"properties": {
|
||||
"gradient": {
|
||||
"type": "linear",
|
||||
"angle": 135,
|
||||
"stops": [
|
||||
{ "position": 0, "color": { "value": "#a855f7" } },
|
||||
{ "position": 1, "color": { "value": "#9333ea" } }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "config_summary_appearance",
|
||||
"layers": [
|
||||
{
|
||||
"type": "background",
|
||||
"properties": {
|
||||
"gradient": {
|
||||
"type": "linear",
|
||||
"angle": 90,
|
||||
"stops": [
|
||||
{ "position": 0, "color": { "value": "rgba(74, 58, 199, 0.1)" } },
|
||||
{ "position": 1, "color": { "value": "rgba(56, 189, 248, 0.1)" } }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "border",
|
||||
"properties": {
|
||||
"width": { "value": 2, "unit": "px" },
|
||||
"style": "dashed",
|
||||
"color": { "value": "rgba(74, 58, 199, 0.3)" },
|
||||
"radius": { "value": 0.5, "unit": "rem" }
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "tab_badge_appearance",
|
||||
"layers": [
|
||||
{
|
||||
"type": "background",
|
||||
"properties": {
|
||||
"color": { "token": "secondary" }
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
"layouts": [
|
||||
{
|
||||
"id": "builder_nav_flex",
|
||||
"type": "flex",
|
||||
"constraints": {
|
||||
"direction": "row",
|
||||
"justify": "space-between",
|
||||
"align": "center"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "nav_actions_flex",
|
||||
"type": "flex",
|
||||
"constraints": {
|
||||
"direction": "row",
|
||||
"align": "center",
|
||||
"gap": { "number": 0.5, "unit": "rem" }
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "logo_flex",
|
||||
"type": "flex",
|
||||
"constraints": {
|
||||
"direction": "row",
|
||||
"align": "center",
|
||||
"gap": { "number": 0.5, "unit": "rem" }
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "config_summary_grid",
|
||||
"type": "flex",
|
||||
"constraints": {
|
||||
"direction": "column",
|
||||
"gap": { "number": 0.5, "unit": "rem" }
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
"transitions": [
|
||||
{
|
||||
"id": "preview_button_hover_transition",
|
||||
"trigger": { "state": "hover" },
|
||||
"properties": ["transform"],
|
||||
"duration": { "value": 200, "unit": "ms" },
|
||||
"easing": "ease-in-out"
|
||||
}
|
||||
],
|
||||
|
||||
"rules": [
|
||||
{
|
||||
"id": "rule_builder_nav",
|
||||
"selector": "builder_nav_selector",
|
||||
"priority": {
|
||||
"importance": "normal",
|
||||
"origin": "package",
|
||||
"specificity": { "ids": 0, "classes": 1, "types": 1 },
|
||||
"sourceOrder": 10
|
||||
},
|
||||
"effects": { "ref": "builder_nav_sticky" },
|
||||
"appearance": { "ref": "builder_nav_appearance" },
|
||||
"enabled": true
|
||||
},
|
||||
{
|
||||
"id": "rule_builder_workspace",
|
||||
"selector": "builder_workspace_selector",
|
||||
"priority": {
|
||||
"importance": "normal",
|
||||
"origin": "package",
|
||||
"specificity": { "ids": 0, "classes": 1, "types": 1 },
|
||||
"sourceOrder": 20
|
||||
},
|
||||
"effects": { "ref": "builder_workspace_layout" },
|
||||
"appearance": { "ref": "builder_workspace_appearance" },
|
||||
"enabled": true
|
||||
},
|
||||
{
|
||||
"id": "rule_builder_logo",
|
||||
"selector": "builder_logo_selector",
|
||||
"priority": {
|
||||
"importance": "normal",
|
||||
"origin": "package",
|
||||
"specificity": { "ids": 0, "classes": 1, "types": 1 },
|
||||
"sourceOrder": 30
|
||||
},
|
||||
"effects": { "ref": "builder_logo_size" },
|
||||
"appearance": { "ref": "builder_logo_appearance" },
|
||||
"enabled": true
|
||||
},
|
||||
{
|
||||
"id": "rule_builder_title",
|
||||
"selector": "builder_title_selector",
|
||||
"priority": {
|
||||
"importance": "normal",
|
||||
"origin": "package",
|
||||
"specificity": { "ids": 0, "classes": 1, "types": 1 },
|
||||
"sourceOrder": 40
|
||||
},
|
||||
"effects": { "ref": "builder_title_typography" },
|
||||
"enabled": true
|
||||
},
|
||||
{
|
||||
"id": "rule_builder_subtitle",
|
||||
"selector": "builder_subtitle_selector",
|
||||
"priority": {
|
||||
"importance": "normal",
|
||||
"origin": "package",
|
||||
"specificity": { "ids": 0, "classes": 1, "types": 1 },
|
||||
"sourceOrder": 50
|
||||
},
|
||||
"effects": { "ref": "builder_subtitle_typography" },
|
||||
"enabled": true
|
||||
},
|
||||
{
|
||||
"id": "rule_config_summary",
|
||||
"selector": "config_summary_selector",
|
||||
"priority": {
|
||||
"importance": "normal",
|
||||
"origin": "package",
|
||||
"specificity": { "ids": 0, "classes": 1, "types": 1 },
|
||||
"sourceOrder": 60
|
||||
},
|
||||
"effects": { "ref": "config_summary_spacing" },
|
||||
"appearance": { "ref": "config_summary_appearance" },
|
||||
"enabled": true
|
||||
},
|
||||
{
|
||||
"id": "rule_tabs_container",
|
||||
"selector": "tabs_container_selector",
|
||||
"priority": {
|
||||
"importance": "normal",
|
||||
"origin": "package",
|
||||
"specificity": { "ids": 0, "classes": 1, "types": 1 },
|
||||
"sourceOrder": 70
|
||||
},
|
||||
"effects": { "ref": "tabs_container_spacing" },
|
||||
"enabled": true
|
||||
},
|
||||
{
|
||||
"id": "rule_tab_badge",
|
||||
"selector": "tab_badge_selector",
|
||||
"priority": {
|
||||
"importance": "normal",
|
||||
"origin": "package",
|
||||
"specificity": { "ids": 0, "classes": 1, "types": 1 },
|
||||
"sourceOrder": 80
|
||||
},
|
||||
"effects": { "ref": "tab_badge_spacing" },
|
||||
"appearance": { "ref": "tab_badge_appearance" },
|
||||
"enabled": true
|
||||
},
|
||||
{
|
||||
"id": "rule_preview_button",
|
||||
"selector": "preview_button_selector",
|
||||
"priority": {
|
||||
"importance": "normal",
|
||||
"origin": "package",
|
||||
"specificity": { "ids": 0, "classes": 1, "types": 1 },
|
||||
"sourceOrder": 90
|
||||
},
|
||||
"effects": { "ref": "preview_button_effects" },
|
||||
"transition": { "ref": "preview_button_hover_transition" },
|
||||
"enabled": true
|
||||
},
|
||||
{
|
||||
"id": "rule_preview_button_hover",
|
||||
"selector": "preview_button_hover_selector",
|
||||
"priority": {
|
||||
"importance": "normal",
|
||||
"origin": "package",
|
||||
"specificity": { "ids": 0, "classes": 2, "types": 1 },
|
||||
"sourceOrder": 91
|
||||
},
|
||||
"effects": { "ref": "preview_button_hover_transform" },
|
||||
"enabled": true
|
||||
}
|
||||
],
|
||||
|
||||
"environments": [
|
||||
{
|
||||
"id": "mobile",
|
||||
"conditions": {
|
||||
"viewport": {
|
||||
"maxWidth": { "value": 768, "unit": "px" }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "desktop",
|
||||
"conditions": {
|
||||
"viewport": {
|
||||
"minWidth": { "value": 1024, "unit": "px" }
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user