From ee663df4fe5195cfc2de99804e1536e6b4e5651c Mon Sep 17 00:00:00 2001 From: Luca Rossi Date: Thu, 26 Feb 2026 02:33:19 +0100 Subject: [PATCH] feat: darken title bar headers for visual separation from content (#85) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: darken title bar headers for visual separation from content Add --bg-titlebar (#EDECE9) CSS variable and apply it to all four header bars (TabBar, SidebarTitleBar, NoteList header, Inspector header) so the top drag region is subtly darker than the app content. Co-Authored-By: Claude Opus 4.6 * docs: add design file for titlebar-darker task Single frame showing the three-tier color hierarchy: title bar (#EDECE9) → sidebar (#F7F6F3) → content (#FFFFFF). Co-Authored-By: Claude Opus 4.6 --------- Co-authored-by: Claude Opus 4.6 --- design/titlebar-darker.pen | 163 +++++++++++++++++++++++++++++++++++ src/components/Inspector.tsx | 2 +- src/components/NoteList.tsx | 2 +- src/components/Sidebar.tsx | 2 +- src/components/TabBar.tsx | 3 +- src/index.css | 1 + 6 files changed, 169 insertions(+), 4 deletions(-) create mode 100644 design/titlebar-darker.pen diff --git a/design/titlebar-darker.pen b/design/titlebar-darker.pen new file mode 100644 index 00000000..0c09dc78 --- /dev/null +++ b/design/titlebar-darker.pen @@ -0,0 +1,163 @@ +{ + "version": "2.8", + "children": [ + { + "type": "frame", + "id": "td001", + "x": 0, + "y": 0, + "name": "macOS Title Bar — darker traffic lights area", + "theme": { "Mode": "Light" }, + "clip": true, + "width": 800, + "height": 300, + "fill": "#FFFFFF", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "td002", + "name": "Title Bar Row (--bg-titlebar: #EDECE9)", + "width": "fill_container", + "height": 45, + "fill": "#EDECE9", + "children": [ + { + "type": "frame", + "id": "td003", + "name": "Sidebar Header", + "width": 250, + "height": "fill_container", + "fill": "#EDECE9", + "gap": 12, + "padding": [0, 12], + "alignItems": "center", + "stroke": { "color": "#E9E9E7", "width": 1, "sides": ["right", "bottom"] }, + "children": [ + { + "type": "frame", + "id": "td004", + "name": "trafficLights", + "gap": 8, + "alignItems": "center", + "children": [ + { "type": "ellipse", "id": "td005", "fill": "#FF5F57", "width": 12, "height": 12 }, + { "type": "ellipse", "id": "td006", "fill": "#FEBC2E", "width": 12, "height": 12 }, + { "type": "ellipse", "id": "td007", "fill": "#28C840", "width": 12, "height": 12 } + ] + } + ] + }, + { + "type": "frame", + "id": "td008", + "name": "NoteList Header", + "width": 250, + "height": "fill_container", + "fill": "#EDECE9", + "padding": [0, 16], + "alignItems": "center", + "stroke": { "color": "#E9E9E7", "width": 1, "sides": ["right", "bottom"] }, + "children": [ + { "type": "text", "id": "td009", "value": "All Notes", "fontSize": 14, "fontWeight": 600, "fill": "#37352F" } + ] + }, + { + "type": "frame", + "id": "td010", + "name": "TabBar Header", + "width": "fill_container", + "height": "fill_container", + "fill": "#EDECE9", + "padding": [0, 12], + "gap": 4, + "alignItems": "center", + "stroke": { "color": "#E9E9E7", "width": 1, "sides": ["bottom"] }, + "children": [ + { + "type": "frame", + "id": "td011", + "name": "Tab", + "fill": "#FFFFFF", + "cornerRadius": [6, 6, 0, 0], + "padding": [6, 12], + "alignItems": "center", + "children": [ + { "type": "text", "id": "td012", "value": "My Note.md", "fontSize": 13, "fill": "#37352F" } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "td013", + "name": "Content Area (lighter)", + "width": "fill_container", + "height": "fill_container", + "fill": "#FFFFFF", + "children": [ + { + "type": "frame", + "id": "td014", + "name": "Sidebar Content", + "width": 250, + "height": "fill_container", + "fill": "#F7F6F3", + "padding": [8, 12], + "layout": "vertical", + "gap": 4, + "stroke": { "color": "#E9E9E7", "width": 1, "sides": ["right"] }, + "children": [ + { "type": "text", "id": "td015", "value": "All Notes", "fontSize": 14, "fill": "#37352F" }, + { "type": "text", "id": "td016", "value": "Favorites", "fontSize": 14, "fill": "#37352F" }, + { "type": "text", "id": "td017", "value": "Archive", "fontSize": 14, "fill": "#787774" } + ] + }, + { + "type": "frame", + "id": "td018", + "name": "NoteList Content", + "width": 250, + "height": "fill_container", + "fill": "#FFFFFF", + "padding": [8, 12], + "layout": "vertical", + "gap": 2, + "stroke": { "color": "#E9E9E7", "width": 1, "sides": ["right"] }, + "children": [ + { "type": "text", "id": "td019", "value": "Meeting Notes", "fontSize": 13, "fill": "#37352F" }, + { "type": "text", "id": "td020", "value": "Project Ideas", "fontSize": 13, "fill": "#37352F" }, + { "type": "text", "id": "td021", "value": "Reading List", "fontSize": 13, "fill": "#37352F" } + ] + }, + { + "type": "frame", + "id": "td022", + "name": "Editor Content", + "width": "fill_container", + "height": "fill_container", + "fill": "#FFFFFF", + "padding": [24, 32], + "layout": "vertical", + "gap": 8, + "children": [ + { "type": "text", "id": "td023", "value": "My Note", "fontSize": 24, "fontWeight": 700, "fill": "#37352F" }, + { "type": "text", "id": "td024", "value": "The title bar (#EDECE9) is subtly darker than the sidebar (#F7F6F3) and content (#FFFFFF), providing visual separation without a harsh border.", "fontSize": 14, "fill": "#787774" } + ] + } + ] + } + ] + } + ], + "variables": { + "--bg-titlebar": { "type": "color", "value": "#EDECE9" }, + "--sidebar": { "type": "color", "value": "#F7F6F3" }, + "--background": { "type": "color", "value": "#FFFFFF" }, + "--foreground": { "type": "color", "value": "#37352F" }, + "--muted-foreground": { "type": "color", "value": "#787774" }, + "--border": { "type": "color", "value": "#E9E9E7" } + } +} \ No newline at end of file diff --git a/src/components/Inspector.tsx b/src/components/Inspector.tsx index a5dd851d..ceb4705b 100644 --- a/src/components/Inspector.tsx +++ b/src/components/Inspector.tsx @@ -75,7 +75,7 @@ function useReferencedBy(entry: VaultEntry | null, entries: VaultEntry[]): Refer function InspectorHeader({ collapsed, onToggle }: { collapsed: boolean; onToggle: () => void }) { const { onMouseDown } = useDragRegion() return ( -
+
{collapsed ? (