davidl/tolaria
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: darken title bar headers for visual separation from content (#85)

Browse Source 
* 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 <noreply@anthropic.com>

* 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 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Luca Rossi
2026-02-26 02:33:19 +01:00
committed by GitHub
parent 9184fadde0
commit ee663df4fe
6 changed files with 169 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
design/titlebar-darker.pen Normal file
View File

@@ -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" }
}
}

2
src/components/Inspector.tsx
View File

@@ -75,7 +75,7 @@ function useReferencedBy(entry: VaultEntry | null, entries: VaultEntry[]): Refer
function InspectorHeader({ collapsed, onToggle }: { collapsed: boolean; onToggle: () => void }) {
const { onMouseDown } = useDragRegion()
return (
<div className="flex items-center border-b border-border" style={{ height: 52, padding: '0 12px', gap: 8, cursor: 'default' }} onMouseDown={onMouseDown}>
<div className="flex items-center border-b border-border" style={{ height: 52, background: 'var(--bg-titlebar)', padding: '0 12px', gap: 8, cursor: 'default' }} onMouseDown={onMouseDown} data-tauri-drag-region>
{collapsed ? (
<button className="shrink-0 border-none bg-transparent p-1 text-muted-foreground cursor-pointer hover:text-foreground" onClick={onToggle}>
<SlidersHorizontal size={16} />

2
src/components/NoteList.tsx
View File

@@ -298,7 +298,7 @@ function NoteListInner({ entries, selection, selectedNote, allContent, modifiedF
return (
<div className="flex flex-col overflow-hidden border-r border-border bg-card text-foreground" style={{ height: '100%' }}>
<div className="flex h-[52px] shrink-0 items-center justify-between border-b border-border px-4" onMouseDown={onDragMouseDown} style={{ cursor: 'default' }}>
<div className="flex h-[52px] shrink-0 items-center justify-between border-b border-border px-4" onMouseDown={onDragMouseDown} data-tauri-drag-region style={{ background: 'var(--bg-titlebar)', cursor: 'default' }}>
<h3 className="m-0 min-w-0 flex-1 truncate text-[14px] font-semibold">{resolveHeaderTitle(selection, typeDocument)}</h3>
<div className="flex items-center gap-3" style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}>
{!isEntityView && <SortDropdown groupLabel="__list__" current={listSort} direction={listDirection} onChange={handleSortChange} />}

2
src/components/Sidebar.tsx
View File

@@ -175,7 +175,7 @@ function CommitButton({ modifiedCount, onClick }: { modifiedCount: number; onCli
function SidebarTitleBar({ onCollapse }: { onCollapse?: () => void }) {
const { onMouseDown } = useDragRegion()
return (
<div className="shrink-0 flex items-center justify-end border-b border-border" style={{ height: 52, padding: '0 8px', paddingLeft: 80, cursor: 'default' } as React.CSSProperties} onMouseDown={onMouseDown}>
<div className="shrink-0 flex items-center justify-end border-b border-border" style={{ height: 52, background: 'var(--bg-titlebar)', padding: '0 8px', paddingLeft: 80, cursor: 'default' } as React.CSSProperties} onMouseDown={onMouseDown} data-tauri-drag-region>
{onCollapse && (
<button
className="flex shrink-0 cursor-pointer items-center justify-center rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"

3
src/components/TabBar.tsx
View File

@@ -333,7 +333,8 @@ export const TabBar = memo(function TabBar({
return (
<div
className="flex shrink-0 items-stretch"
style={{ height: 52, background: 'var(--sidebar)' } as React.CSSProperties}
style={{ height: 52, background: 'var(--bg-titlebar)' } as React.CSSProperties}
data-tauri-drag-region
onDragLeave={handleBarDragLeave}
>
<NavButtons canGoBack={canGoBack} canGoForward={canGoForward} onGoBack={onGoBack} onGoForward={onGoForward} />

1
src/index.css
View File

@@ -82,6 +82,7 @@
--accent-teal-light: rgba(49, 151, 149, 0.1);
--accent-pink: #D53F8C;
--accent-pink-light: rgba(213, 63, 140, 0.1);
--bg-titlebar: #EDECE9;
--border-primary: #E9E9E7;
--border-subtle: #E9E9E7;
--border-input: #E9E9E7;