553 lines
15 KiB
Plaintext
553 lines
15 KiB
Plaintext
{
|
|
"version": "2.8",
|
|
"themes": {
|
|
"Mode": [
|
|
"Dark"
|
|
]
|
|
},
|
|
"variables": {
|
|
"--background": {
|
|
"type": "color",
|
|
"value": [
|
|
{ "value": "#FFFFFF" },
|
|
{ "value": "#191919", "theme": { "Mode": "Dark" } }
|
|
]
|
|
},
|
|
"--foreground": {
|
|
"type": "color",
|
|
"value": [
|
|
{ "value": "#37352F" },
|
|
{ "value": "#ffffffcf", "theme": { "Mode": "Dark" } }
|
|
]
|
|
},
|
|
"--muted-foreground": {
|
|
"type": "color",
|
|
"value": [
|
|
{ "value": "#787774" },
|
|
{ "value": "#ffffff71", "theme": { "Mode": "Dark" } }
|
|
]
|
|
},
|
|
"--popover": {
|
|
"type": "color",
|
|
"value": [
|
|
{ "value": "#FFFFFF" },
|
|
{ "value": "#252525", "theme": { "Mode": "Dark" } }
|
|
]
|
|
},
|
|
"--popover-foreground": {
|
|
"type": "color",
|
|
"value": [
|
|
{ "value": "#37352F" },
|
|
{ "value": "#ffffffcf", "theme": { "Mode": "Dark" } }
|
|
]
|
|
},
|
|
"--border": {
|
|
"type": "color",
|
|
"value": [
|
|
{ "value": "#E9E9E7" },
|
|
{ "value": "#ffffff18", "theme": { "Mode": "Dark" } }
|
|
]
|
|
},
|
|
"--accent-blue": {
|
|
"type": "color",
|
|
"value": [
|
|
{ "value": "#2383E2" },
|
|
{ "value": "#4a9eff", "theme": { "Mode": "Dark" } }
|
|
]
|
|
},
|
|
"--sidebar": {
|
|
"type": "color",
|
|
"value": [
|
|
{ "value": "#F7F7F5" },
|
|
{ "value": "#202020", "theme": { "Mode": "Dark" } }
|
|
]
|
|
},
|
|
"--muted": {
|
|
"type": "color",
|
|
"value": [
|
|
{ "value": "#F1F1EF" },
|
|
{ "value": "#ffffff0e", "theme": { "Mode": "Dark" } }
|
|
]
|
|
},
|
|
"--font-primary": {
|
|
"type": "font",
|
|
"value": [{ "value": "Inter" }]
|
|
},
|
|
"--radius-sm": {
|
|
"type": "number",
|
|
"value": [{ "value": 4 }]
|
|
},
|
|
"--radius-md": {
|
|
"type": "number",
|
|
"value": [{ "value": 6 }]
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "srtDD",
|
|
"x": 0,
|
|
"y": 0,
|
|
"name": "Sort Dropdown — Direction Arrows",
|
|
"clip": true,
|
|
"width": 260,
|
|
"height": 280,
|
|
"fill": "$--popover",
|
|
"cornerRadius": "$--radius-md",
|
|
"stroke": {
|
|
"align": "outside",
|
|
"thickness": 1,
|
|
"fill": "$--border"
|
|
},
|
|
"layout": "vertical",
|
|
"padding": [8, 0],
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "srtH1",
|
|
"name": "dropdownHeader",
|
|
"width": "fill_container",
|
|
"height": 28,
|
|
"padding": [0, 12],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "srtHL",
|
|
"name": "headerLabel",
|
|
"content": "Sort by",
|
|
"fontSize": 11,
|
|
"fontWeight": 600,
|
|
"fill": "$--muted-foreground",
|
|
"fontFamily": "$--font-primary",
|
|
"textTransform": "uppercase",
|
|
"letterSpacing": 0.5
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "srtR1",
|
|
"name": "row-modified",
|
|
"width": "fill_container",
|
|
"height": 36,
|
|
"padding": [0, 12],
|
|
"alignItems": "center",
|
|
"fill": "$--muted",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "srtT1",
|
|
"name": "label-modified",
|
|
"content": "Modified",
|
|
"fontSize": 13,
|
|
"fontWeight": 500,
|
|
"fill": "$--popover-foreground",
|
|
"fontFamily": "$--font-primary",
|
|
"width": "fill_container"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "srtA1",
|
|
"name": "arrows-modified",
|
|
"gap": 2,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "srtU1",
|
|
"name": "arrow-up-active",
|
|
"content": "↑",
|
|
"fontSize": 13,
|
|
"fontWeight": 700,
|
|
"fill": "$--accent-blue"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "srtD1",
|
|
"name": "arrow-down",
|
|
"content": "↓",
|
|
"fontSize": 13,
|
|
"fontWeight": 400,
|
|
"fill": "$--muted-foreground"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "srtR2",
|
|
"name": "row-title",
|
|
"width": "fill_container",
|
|
"height": 36,
|
|
"padding": [0, 12],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "srtT2",
|
|
"name": "label-title",
|
|
"content": "Title",
|
|
"fontSize": 13,
|
|
"fontWeight": 400,
|
|
"fill": "$--popover-foreground",
|
|
"fontFamily": "$--font-primary",
|
|
"width": "fill_container"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "srtA2",
|
|
"name": "arrows-title",
|
|
"gap": 2,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "srtU2",
|
|
"name": "arrow-up",
|
|
"content": "↑",
|
|
"fontSize": 13,
|
|
"fontWeight": 400,
|
|
"fill": "$--muted-foreground"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "srtD2",
|
|
"name": "arrow-down",
|
|
"content": "↓",
|
|
"fontSize": 13,
|
|
"fontWeight": 400,
|
|
"fill": "$--muted-foreground"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "srtR3",
|
|
"name": "row-created",
|
|
"width": "fill_container",
|
|
"height": 36,
|
|
"padding": [0, 12],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "srtT3",
|
|
"name": "label-created",
|
|
"content": "Created",
|
|
"fontSize": 13,
|
|
"fontWeight": 400,
|
|
"fill": "$--popover-foreground",
|
|
"fontFamily": "$--font-primary",
|
|
"width": "fill_container"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "srtA3",
|
|
"name": "arrows-created",
|
|
"gap": 2,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "srtU3",
|
|
"name": "arrow-up",
|
|
"content": "↑",
|
|
"fontSize": 13,
|
|
"fontWeight": 400,
|
|
"fill": "$--muted-foreground"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "srtD3",
|
|
"name": "arrow-down",
|
|
"content": "↓",
|
|
"fontSize": 13,
|
|
"fontWeight": 400,
|
|
"fill": "$--muted-foreground"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "srtR4",
|
|
"name": "row-type",
|
|
"width": "fill_container",
|
|
"height": 36,
|
|
"padding": [0, 12],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "srtT4",
|
|
"name": "label-type",
|
|
"content": "Type",
|
|
"fontSize": 13,
|
|
"fontWeight": 400,
|
|
"fill": "$--popover-foreground",
|
|
"fontFamily": "$--font-primary",
|
|
"width": "fill_container"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "srtA4",
|
|
"name": "arrows-type",
|
|
"gap": 2,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "srtU4",
|
|
"name": "arrow-up",
|
|
"content": "↑",
|
|
"fontSize": 13,
|
|
"fontWeight": 400,
|
|
"fill": "$--muted-foreground"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "srtD4",
|
|
"name": "arrow-down",
|
|
"content": "↓",
|
|
"fontSize": 13,
|
|
"fontWeight": 400,
|
|
"fill": "$--muted-foreground"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "srtSP",
|
|
"name": "separator",
|
|
"width": "fill_container",
|
|
"height": 1,
|
|
"fill": "$--border"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "srtAN",
|
|
"name": "annotation",
|
|
"width": "fill_container",
|
|
"padding": [6, 12],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "srtAT",
|
|
"name": "annotation-text",
|
|
"content": "Click ↑↓ to toggle direction. Blue = active.",
|
|
"fontSize": 11,
|
|
"fill": "$--muted-foreground",
|
|
"fontFamily": "$--font-primary"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "srtBN",
|
|
"x": 300,
|
|
"y": 0,
|
|
"name": "Sort Button — With Direction Indicator",
|
|
"clip": true,
|
|
"width": 400,
|
|
"height": 200,
|
|
"fill": "$--background",
|
|
"cornerRadius": "$--radius-md",
|
|
"stroke": {
|
|
"align": "outside",
|
|
"thickness": 1,
|
|
"fill": "$--border"
|
|
},
|
|
"layout": "vertical",
|
|
"padding": [16, 16],
|
|
"gap": 16,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "srtBH",
|
|
"name": "noteListHeader",
|
|
"width": "fill_container",
|
|
"height": 36,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "srtBC",
|
|
"name": "noteCount",
|
|
"content": "42 notes",
|
|
"fontSize": 12,
|
|
"fill": "$--muted-foreground",
|
|
"fontFamily": "$--font-primary",
|
|
"width": "fill_container"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "srtBB",
|
|
"name": "sortButton",
|
|
"padding": [4, 8],
|
|
"cornerRadius": "$--radius-sm",
|
|
"fill": "$--muted",
|
|
"alignItems": "center",
|
|
"gap": 4,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "srtBL",
|
|
"name": "sortLabel",
|
|
"content": "Modified",
|
|
"fontSize": 12,
|
|
"fontWeight": 500,
|
|
"fill": "$--foreground",
|
|
"fontFamily": "$--font-primary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "srtBA",
|
|
"name": "directionArrow",
|
|
"content": "↓",
|
|
"fontSize": 12,
|
|
"fontWeight": 600,
|
|
"fill": "$--accent-blue"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "srtSP2",
|
|
"name": "divider",
|
|
"width": "fill_container",
|
|
"height": 1,
|
|
"fill": "$--border"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "srtEX",
|
|
"name": "exampleNotes",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 2,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "srtN1",
|
|
"name": "noteRow1",
|
|
"width": "fill_container",
|
|
"height": 32,
|
|
"padding": [0, 8],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "srtNT1",
|
|
"name": "noteTitle1",
|
|
"content": "Meeting Notes — Feb 22",
|
|
"fontSize": 13,
|
|
"fill": "$--foreground",
|
|
"fontFamily": "$--font-primary",
|
|
"width": "fill_container"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "srtND1",
|
|
"name": "noteDate1",
|
|
"content": "2 min ago",
|
|
"fontSize": 11,
|
|
"fill": "$--muted-foreground",
|
|
"fontFamily": "$--font-primary"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "srtN2",
|
|
"name": "noteRow2",
|
|
"width": "fill_container",
|
|
"height": 32,
|
|
"padding": [0, 8],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "srtNT2",
|
|
"name": "noteTitle2",
|
|
"content": "Project Roadmap",
|
|
"fontSize": 13,
|
|
"fill": "$--foreground",
|
|
"fontFamily": "$--font-primary",
|
|
"width": "fill_container"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "srtND2",
|
|
"name": "noteDate2",
|
|
"content": "1 hr ago",
|
|
"fontSize": 11,
|
|
"fill": "$--muted-foreground",
|
|
"fontFamily": "$--font-primary"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "srtN3",
|
|
"name": "noteRow3",
|
|
"width": "fill_container",
|
|
"height": 32,
|
|
"padding": [0, 8],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "srtNT3",
|
|
"name": "noteTitle3",
|
|
"content": "Weekly Review",
|
|
"fontSize": 13,
|
|
"fill": "$--foreground",
|
|
"fontFamily": "$--font-primary",
|
|
"width": "fill_container"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "srtND3",
|
|
"name": "noteDate3",
|
|
"content": "Yesterday",
|
|
"fontSize": 11,
|
|
"fill": "$--muted-foreground",
|
|
"fontFamily": "$--font-primary"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "srtAN2",
|
|
"name": "annotation",
|
|
"width": "fill_container",
|
|
"padding": [6, 0],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "srtAT2",
|
|
"name": "annotation-text",
|
|
"content": "Sort button shows property + direction arrow. Click to open dropdown.",
|
|
"fontSize": 11,
|
|
"fill": "$--muted-foreground",
|
|
"fontFamily": "$--font-primary"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
} |