Your calm window into the Atmosphere.
morgen.blue
rss
atproto
refactor(layout): polish window chrome, footer, border, tertiary token
Apply /consume page feedback: add tertiary-foreground token, size up
chrome icons to 1.25rem in muted color, inset header to clear the
Window's 4rem curvature, restore the level-1 border on the plain
Window, and restyle the footer mark as a stamped tertiary glyph.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
+12
-11
+3
resources/css/app.css
+3
resources/css/app.css
···
65
65
--color-secondary-foreground: var(--secondary-foreground);
66
66
--color-muted: var(--muted);
67
67
--color-muted-foreground: var(--muted-foreground);
68
+
--color-tertiary-foreground: var(--tertiary-foreground);
68
69
--color-accent: var(--accent);
69
70
--color-accent-foreground: var(--accent-foreground);
70
71
--color-destructive: var(--destructive);
···
101
102
--secondary-foreground: var(--color-gray-900);
102
103
--muted: var(--color-gray-100);
103
104
--muted-foreground: var(--color-gray-500);
105
+
--tertiary-foreground: var(--color-gray-400);
104
106
--accent: var(--color-gray-100);
105
107
--accent-foreground: var(--color-gray-900);
106
108
--destructive: oklch(0.577 0.245 27.325);
···
136
138
--secondary-foreground: var(--color-gray-50);
137
139
--muted: var(--color-gray-700);
138
140
--muted-foreground: var(--color-gray-400);
141
+
--tertiary-foreground: var(--color-gray-500);
139
142
--accent: var(--color-gray-800);
140
143
--accent-foreground: var(--color-gray-50);
141
144
--destructive: oklch(0.704 0.191 22.216);
+6
-6
resources/js/components/window-chrome.tsx
+6
-6
resources/js/components/window-chrome.tsx
···
1
1
import {
2
2
PlusSignIcon,
3
-
Settings02Icon,
3
+
Settings03Icon,
4
4
UserCircleIcon,
5
5
} from '@hugeicons/core-free-icons';
6
6
import { HugeiconsIcon } from '@hugeicons/react';
···
25
25
const { url } = usePage();
26
26
27
27
return (
28
-
<header className="flex h-14 shrink-0 items-center justify-between px-4">
28
+
<header className="flex h-14 shrink-0 items-center justify-between px-20">
29
29
<nav className="flex items-center gap-6">
30
30
{TABS.map((tab) => {
31
31
const isActive = url === tab.href;
···
53
53
})}
54
54
</nav>
55
55
56
-
<div className="flex items-center gap-1">
56
+
<div className="flex items-center gap-2 text-muted-foreground">
57
57
<Button variant="ghost" size="icon-sm" aria-label="Add source">
58
-
<HugeiconsIcon icon={PlusSignIcon} />
58
+
<HugeiconsIcon icon={PlusSignIcon} className="size-5" />
59
59
</Button>
60
60
<Button variant="ghost" size="icon-sm" aria-label="Profile">
61
-
<HugeiconsIcon icon={UserCircleIcon} />
61
+
<HugeiconsIcon icon={UserCircleIcon} className="size-5" />
62
62
</Button>
63
63
<Button variant="ghost" size="icon-sm" aria-label="Settings">
64
-
<HugeiconsIcon icon={Settings02Icon} />
64
+
<HugeiconsIcon icon={Settings03Icon} className="size-5" />
65
65
</Button>
66
66
</div>
67
67
</header>
+1
-1
resources/js/components/window.tsx
+1
-1
resources/js/components/window.tsx
···
10
10
};
11
11
12
12
const VARIANT_STYLES: Record<WindowVariant, string> = {
13
-
plain: 'bg-gray-50 dark:bg-gray-900',
13
+
plain: 'border border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900',
14
14
sunrise: 'bg-sunrise shadow-[inset_0_0_0_1px_rgba(255,255,255,0.4)]',
15
15
};
16
16