c3e9804132
* design: relationship-x-cosmetic wireframes * fix: relationship X button appears inline inside pill on hover X button now renders as a flex child inside the pill (next to the type icon) instead of being absolutely positioned outside the pill boundary. - Pill uses inset ring border on hover when bgColor is set - X appears inline with type icon via flex layout - Type icon rendered at 50% opacity per design spec - Updated test selector: .group/link is now the button element itself * fix: useRef type for debounce timer (pre-existing build error on main) --------- Co-authored-by: Test <test@test.com>
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
|
||
}
|
||
]
|
||
}
|
||
]
|
||
} |