4d0840c6c6
The macOS window frame (transparent title bar, 38px) and the sidebar share the same background color (#F7F6F3), making them visually indistinguishable. Replace the sidebar's paddingTop: 38 with a dedicated spacer div that has a bottom border (1px solid var(--border)), matching the border style used between all other panels. The spacer also serves as a drag region for window movement. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
858 lines
16 KiB
Plaintext
858 lines
16 KiB
Plaintext
{
|
|
"version": "2.8",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "mb001",
|
|
"x": 0,
|
|
"y": 0,
|
|
"name": "macOS Border — Before (no border)",
|
|
"theme": {
|
|
"Mode": "Light"
|
|
},
|
|
"clip": true,
|
|
"width": 400,
|
|
"height": 200,
|
|
"fill": "$--background",
|
|
"layout": "vertical",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "mb002",
|
|
"name": "macOS Title Bar (before)",
|
|
"width": "fill_container",
|
|
"height": 38,
|
|
"fill": "$--sidebar",
|
|
"gap": 12,
|
|
"padding": [
|
|
0,
|
|
12
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "mb003",
|
|
"name": "trafficLights",
|
|
"gap": 8,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "ellipse",
|
|
"id": "mb004",
|
|
"fill": "#FF5F57",
|
|
"width": 12,
|
|
"height": 12
|
|
},
|
|
{
|
|
"type": "ellipse",
|
|
"id": "mb005",
|
|
"fill": "#FEBC2E",
|
|
"width": 12,
|
|
"height": 12
|
|
},
|
|
{
|
|
"type": "ellipse",
|
|
"id": "mb006",
|
|
"fill": "#28C840",
|
|
"width": 12,
|
|
"height": 12
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mb007",
|
|
"name": "Sidebar Content (before)",
|
|
"width": "fill_container",
|
|
"height": "fill_container",
|
|
"fill": "$--sidebar",
|
|
"padding": [
|
|
8,
|
|
12
|
|
],
|
|
"layout": "vertical",
|
|
"gap": 4,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "mb008",
|
|
"value": "All Notes",
|
|
"fontSize": 14,
|
|
"fill": "$--foreground"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "mb009",
|
|
"value": "Favorites",
|
|
"fontSize": 14,
|
|
"fill": "$--foreground"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "mb010",
|
|
"value": "Archive",
|
|
"fontSize": 14,
|
|
"fill": "$--muted-foreground"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mb011",
|
|
"x": 440,
|
|
"y": 0,
|
|
"name": "macOS Border — After (with border)",
|
|
"theme": {
|
|
"Mode": "Light"
|
|
},
|
|
"clip": true,
|
|
"width": 400,
|
|
"height": 200,
|
|
"fill": "$--background",
|
|
"layout": "vertical",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "mb012",
|
|
"name": "macOS Title Bar (after)",
|
|
"width": "fill_container",
|
|
"height": 38,
|
|
"fill": "$--sidebar",
|
|
"stroke": {
|
|
"align": "inside",
|
|
"thickness": {
|
|
"bottom": 1
|
|
},
|
|
"fill": "$--border"
|
|
},
|
|
"gap": 12,
|
|
"padding": [
|
|
0,
|
|
12
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "mb013",
|
|
"name": "trafficLights",
|
|
"gap": 8,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "ellipse",
|
|
"id": "mb014",
|
|
"fill": "#FF5F57",
|
|
"width": 12,
|
|
"height": 12
|
|
},
|
|
{
|
|
"type": "ellipse",
|
|
"id": "mb015",
|
|
"fill": "#FEBC2E",
|
|
"width": 12,
|
|
"height": 12
|
|
},
|
|
{
|
|
"type": "ellipse",
|
|
"id": "mb016",
|
|
"fill": "#28C840",
|
|
"width": 12,
|
|
"height": 12
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mb017",
|
|
"name": "Sidebar Content (after)",
|
|
"width": "fill_container",
|
|
"height": "fill_container",
|
|
"fill": "$--sidebar",
|
|
"padding": [
|
|
8,
|
|
12
|
|
],
|
|
"layout": "vertical",
|
|
"gap": 4,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "mb018",
|
|
"value": "All Notes",
|
|
"fontSize": 14,
|
|
"fill": "$--foreground"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "mb019",
|
|
"value": "Favorites",
|
|
"fontSize": 14,
|
|
"fill": "$--foreground"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "mb020",
|
|
"value": "Archive",
|
|
"fontSize": 14,
|
|
"fill": "$--muted-foreground"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
],
|
|
"themes": {
|
|
"Mode": [
|
|
"Dark"
|
|
]
|
|
},
|
|
"variables": {
|
|
"--accent": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#EBEBEA"
|
|
},
|
|
{
|
|
"value": "#252545",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--accent-blue": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#2383E2"
|
|
},
|
|
{
|
|
"value": "#4a9eff",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
},
|
|
{
|
|
"value": "#155DFF"
|
|
},
|
|
{
|
|
"value": "#155DFF",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--accent-foreground": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#37352F"
|
|
},
|
|
{
|
|
"value": "#ffffff",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--accent-green": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#0F7B6C"
|
|
},
|
|
{
|
|
"value": "#4caf50",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
},
|
|
{
|
|
"value": "#00B38B"
|
|
},
|
|
{
|
|
"value": "#00B38B",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--accent-orange": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#D9730D"
|
|
},
|
|
{
|
|
"value": "#ff9800",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--accent-purple": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#9065B0"
|
|
},
|
|
{
|
|
"value": "#9c72ff",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
},
|
|
{
|
|
"value": "#A932FF"
|
|
},
|
|
{
|
|
"value": "#A932FF",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--accent-red": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#E03E3E"
|
|
},
|
|
{
|
|
"value": "#f44336",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--background": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#FFFFFF"
|
|
},
|
|
{
|
|
"value": "#0f0f1a",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--black": {
|
|
"type": "color",
|
|
"value": "#000000"
|
|
},
|
|
"--border": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#E9E9E7"
|
|
},
|
|
{
|
|
"value": "#2a2a4a",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--card": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#FFFFFF"
|
|
},
|
|
{
|
|
"value": "#16162a",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--card-foreground": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#37352F"
|
|
},
|
|
{
|
|
"value": "#e0e0e0",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--destructive": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#E03E3E"
|
|
},
|
|
{
|
|
"value": "#f44336",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--destructive-foreground": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#FFFFFF"
|
|
},
|
|
{
|
|
"value": "#ffffff",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--font-primary": {
|
|
"type": "string",
|
|
"value": [
|
|
{
|
|
"value": "Inter"
|
|
},
|
|
{
|
|
"value": "-apple-system, BlinkMacSystemFont, Inter, sans-serif"
|
|
},
|
|
{
|
|
"value": "Inter"
|
|
}
|
|
]
|
|
},
|
|
"--font-system": {
|
|
"type": "string",
|
|
"value": "-apple-system, BlinkMacSystemFont, sans-serif"
|
|
},
|
|
"--foreground": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#37352F"
|
|
},
|
|
{
|
|
"value": "#e0e0e0",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--input": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#E9E9E7"
|
|
},
|
|
{
|
|
"value": "#2a2a4a",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--muted": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#F0F0EF"
|
|
},
|
|
{
|
|
"value": "#1e1e3a",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--muted-foreground": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#787774"
|
|
},
|
|
{
|
|
"value": "#888888",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--popover": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#FFFFFF"
|
|
},
|
|
{
|
|
"value": "#1e1e3a",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--popover-foreground": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#37352F"
|
|
},
|
|
{
|
|
"value": "#e0e0e0",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--primary": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#2383E2"
|
|
},
|
|
{
|
|
"value": "#4a9eff",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
},
|
|
{
|
|
"value": "#155DFF"
|
|
},
|
|
{
|
|
"value": "#155DFF",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--primary-foreground": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#FFFFFF"
|
|
},
|
|
{
|
|
"value": "#ffffff",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--radius-lg": {
|
|
"type": "number",
|
|
"value": 8
|
|
},
|
|
"--radius-md": {
|
|
"type": "number",
|
|
"value": 6
|
|
},
|
|
"--radius-sm": {
|
|
"type": "number",
|
|
"value": 4
|
|
},
|
|
"--ring": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#2383E2"
|
|
},
|
|
{
|
|
"value": "#4a9eff",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
},
|
|
{
|
|
"value": "#155DFF"
|
|
},
|
|
{
|
|
"value": "#155DFF",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--secondary": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#EBEBEA"
|
|
},
|
|
{
|
|
"value": "#2a2a4a",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--secondary-foreground": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#37352F"
|
|
},
|
|
{
|
|
"value": "#e0e0e0",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--sidebar": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#F7F6F3"
|
|
},
|
|
{
|
|
"value": "#1a1a2e",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--sidebar-accent": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#EBEBEA"
|
|
},
|
|
{
|
|
"value": "#252545",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--sidebar-accent-foreground": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#37352F"
|
|
},
|
|
{
|
|
"value": "#ffffff",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--sidebar-border": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#E9E9E7"
|
|
},
|
|
{
|
|
"value": "#2a2a4a",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--sidebar-foreground": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#37352F"
|
|
},
|
|
{
|
|
"value": "#e0e0e0",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--sidebar-primary": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#2383E2"
|
|
},
|
|
{
|
|
"value": "#4a9eff",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
},
|
|
{
|
|
"value": "#155DFF"
|
|
},
|
|
{
|
|
"value": "#155DFF",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--sidebar-primary-foreground": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#FFFFFF"
|
|
},
|
|
{
|
|
"value": "#ffffff",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--sidebar-ring": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#2383E2"
|
|
},
|
|
{
|
|
"value": "#4a9eff",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
},
|
|
{
|
|
"value": "#155DFF"
|
|
},
|
|
{
|
|
"value": "#155DFF",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--white": {
|
|
"type": "color",
|
|
"value": "#ffffff"
|
|
},
|
|
"--accent-yellow": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#F0B100"
|
|
},
|
|
{
|
|
"value": "#F0B100",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--accent-blue-light": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#155DFF14"
|
|
},
|
|
{
|
|
"value": "#155DFF20",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--accent-green-light": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#00B38B14"
|
|
},
|
|
{
|
|
"value": "#00B38B20",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--accent-purple-light": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#A932FF14"
|
|
},
|
|
{
|
|
"value": "#A932FF20",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--accent-red-light": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#E03E3E14"
|
|
},
|
|
{
|
|
"value": "#f4433620",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"--accent-yellow-light": {
|
|
"type": "color",
|
|
"value": [
|
|
{
|
|
"value": "#F0B10014"
|
|
},
|
|
{
|
|
"value": "#F0B10020",
|
|
"theme": {
|
|
"Mode": "Dark"
|
|
}
|
|
}
|
|
]
|
|
}
|
|
},
|
|
"fonts": [
|
|
{
|
|
"name": "GT Pressura Trial",
|
|
"url": "GT-Pressura-Regular-Trial.otf"
|
|
}
|
|
]
|
|
} |