guanghu/design/relationship-x-cosmetic.pen
Guanghu Domestic Migration 9b41d51231
Some checks are pending
Auto-update PR branches / Update open PR branches (push) Waiting to run
CI / Frontend Static Quality Checks (push) Waiting to run
CI / Frontend Tests & Coverage (push) Waiting to run
CI / Rust Tests & Quality Checks (push) Waiting to run
CI / Linux build verification (push) Waiting to run
Deploy docs / Build VitePress site (push) Waiting to run
Deploy docs / Deploy to GitHub Pages (push) Blocked by required conditions
Release (Alpha) / Compute alpha version (push) Waiting to run
Release (Alpha) / Build release artifacts (push) Blocked by required conditions
Release (Alpha) / GitHub Release (alpha) (push) Blocked by required conditions
Release (Alpha) / Update docs and release pages (push) Blocked by required conditions
chore: import sanitized domestic snapshot for REPO-004
Source snapshot: 514ab1975951d94342ea38e64101d5a0f1c51c77
2026-07-17 15:55:28 +08:00

165 lines
4.2 KiB
Plaintext
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{
"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
}
]
}
]
}