165 lines
4.2 KiB
Plaintext
165 lines
4.2 KiB
Plaintext
|
{
|
|||
|
|
"children": [
|
|||
|
|
{
|
|||
|
|
"type": "frame",
|
|||
|
|
"id": "rel_x_default",
|
|||
|
|
"name": "Relationship Pill — Default (X hidden)",
|
|||
|
|
"x": 0,
|
|||
|
|
"y": 0,
|
|||
|
|
"width": 280,
|
|||
|
|
"height": "fit_content(40)",
|
|||
|
|
"fill": "$--background",
|
|||
|
|
"layout": "vertical",
|
|||
|
|
"gap": 8,
|
|||
|
|
"padding": [
|
|||
|
|
16,
|
|||
|
|
16
|
|||
|
|
],
|
|||
|
|
"theme": {
|
|||
|
|
"Mode": "Light"
|
|||
|
|
},
|
|||
|
|
"children": [
|
|||
|
|
{
|
|||
|
|
"type": "text",
|
|||
|
|
"id": "rel_x_default_label",
|
|||
|
|
"content": "Relationship Pill — Default State",
|
|||
|
|
"fill": "$--muted-foreground",
|
|||
|
|
"fontFamily": "Inter",
|
|||
|
|
"fontSize": 11,
|
|||
|
|
"fontWeight": "500"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"type": "frame",
|
|||
|
|
"id": "rel_x_pill_default",
|
|||
|
|
"layout": "horizontal",
|
|||
|
|
"gap": 4,
|
|||
|
|
"padding": [
|
|||
|
|
4,
|
|||
|
|
8
|
|||
|
|
],
|
|||
|
|
"fill": "$--accent",
|
|||
|
|
"borderRadius": 6,
|
|||
|
|
"width": "fit_content",
|
|||
|
|
"height": "fit_content",
|
|||
|
|
"children": [
|
|||
|
|
{
|
|||
|
|
"type": "text",
|
|||
|
|
"id": "rel_x_pill_label",
|
|||
|
|
"content": "Note Title",
|
|||
|
|
"fill": "$--foreground",
|
|||
|
|
"fontFamily": "Inter",
|
|||
|
|
"fontSize": 12,
|
|||
|
|
"fontWeight": "500"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"type": "rectangle",
|
|||
|
|
"id": "rel_x_type_icon",
|
|||
|
|
"width": 14,
|
|||
|
|
"height": 14,
|
|||
|
|
"fill": "$--muted-foreground",
|
|||
|
|
"opacity": 0.5,
|
|||
|
|
"borderRadius": 2
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"type": "text",
|
|||
|
|
"id": "rel_x_note_default",
|
|||
|
|
"content": "X button not visible in default state",
|
|||
|
|
"fill": "$--muted-foreground",
|
|||
|
|
"fontFamily": "Inter",
|
|||
|
|
"fontSize": 10
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"type": "frame",
|
|||
|
|
"id": "rel_x_hover",
|
|||
|
|
"name": "Relationship Pill — Hover (X visible)",
|
|||
|
|
"x": 320,
|
|||
|
|
"y": 0,
|
|||
|
|
"width": 280,
|
|||
|
|
"height": "fit_content(40)",
|
|||
|
|
"fill": "$--background",
|
|||
|
|
"layout": "vertical",
|
|||
|
|
"gap": 8,
|
|||
|
|
"padding": [
|
|||
|
|
16,
|
|||
|
|
16
|
|||
|
|
],
|
|||
|
|
"theme": {
|
|||
|
|
"Mode": "Light"
|
|||
|
|
},
|
|||
|
|
"children": [
|
|||
|
|
{
|
|||
|
|
"type": "text",
|
|||
|
|
"id": "rel_x_hover_label",
|
|||
|
|
"content": "Relationship Pill — Hover State",
|
|||
|
|
"fill": "$--muted-foreground",
|
|||
|
|
"fontFamily": "Inter",
|
|||
|
|
"fontSize": 11,
|
|||
|
|
"fontWeight": "500"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"type": "frame",
|
|||
|
|
"id": "rel_x_pill_hover",
|
|||
|
|
"layout": "horizontal",
|
|||
|
|
"gap": 6,
|
|||
|
|
"padding": [
|
|||
|
|
4,
|
|||
|
|
8
|
|||
|
|
],
|
|||
|
|
"fill": "$--accent",
|
|||
|
|
"borderRadius": 6,
|
|||
|
|
"width": "fit_content",
|
|||
|
|
"height": "fit_content",
|
|||
|
|
"children": [
|
|||
|
|
{
|
|||
|
|
"type": "text",
|
|||
|
|
"id": "rel_x_pill_label_hover",
|
|||
|
|
"content": "Note Title",
|
|||
|
|
"fill": "$--foreground",
|
|||
|
|
"fontFamily": "Inter",
|
|||
|
|
"fontSize": 12,
|
|||
|
|
"fontWeight": "500"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"type": "frame",
|
|||
|
|
"id": "rel_x_trailing",
|
|||
|
|
"layout": "horizontal",
|
|||
|
|
"gap": 6,
|
|||
|
|
"children": [
|
|||
|
|
{
|
|||
|
|
"type": "text",
|
|||
|
|
"id": "rel_x_icon",
|
|||
|
|
"content": "×",
|
|||
|
|
"fill": "$--foreground",
|
|||
|
|
"fontFamily": "Inter",
|
|||
|
|
"fontSize": 14,
|
|||
|
|
"fontWeight": "400"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"type": "rectangle",
|
|||
|
|
"id": "rel_x_type_icon_hover",
|
|||
|
|
"width": 14,
|
|||
|
|
"height": 14,
|
|||
|
|
"fill": "$--muted-foreground",
|
|||
|
|
"opacity": 0.5,
|
|||
|
|
"borderRadius": 2
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"type": "text",
|
|||
|
|
"id": "rel_x_note_hover",
|
|||
|
|
"content": "X appears inline as flex child, before type icon. Ring border on hover.",
|
|||
|
|
"fill": "$--muted-foreground",
|
|||
|
|
"fontFamily": "Inter",
|
|||
|
|
"fontSize": 10
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|