WIP! A BB-style forum, on the ATmosphere!
We're still working... we'll be back soon when we have something to show off!
node
typescript
hono
htmx
atproto
feat(web): switch base layout to JSON preset import, remove TS preset (ATB-52)
+2
-53
+2
-2
apps/web/src/layouts/base.tsx
+2
-2
apps/web/src/layouts/base.tsx
···
1
1
import type { FC, PropsWithChildren } from "hono/jsx";
2
2
import { tokensToCss } from "../lib/theme.js";
3
-
import { neobrutalLight } from "../styles/presets/neobrutal-light.js";
3
+
import neobrutalLight from "../styles/presets/neobrutal-light.json";
4
4
import type { WebSession } from "../lib/session.js";
5
5
6
-
const ROOT_CSS = `:root { ${tokensToCss(neobrutalLight)} }`;
6
+
const ROOT_CSS = `:root { ${tokensToCss(neobrutalLight as Record<string, string>)} }`;
7
7
8
8
const NavContent: FC<{ auth?: WebSession }> = ({ auth }) => (
9
9
<>
-51
apps/web/src/styles/presets/neobrutal-light.ts
-51
apps/web/src/styles/presets/neobrutal-light.ts
···
1
-
// apps/web/src/styles/presets/neobrutal-light.ts
2
-
export const neobrutalLight: Record<string, string> = {
3
-
// Colors
4
-
"color-bg": "#f5f0e8",
5
-
"color-surface": "#ffffff",
6
-
"color-text": "#1a1a1a",
7
-
"color-text-muted": "#555555",
8
-
"color-primary": "#ff5c00",
9
-
"color-primary-hover": "#e04f00",
10
-
"color-secondary": "#3a86ff",
11
-
"color-border": "#1a1a1a",
12
-
"color-shadow": "#1a1a1a",
13
-
"color-success": "#2ec44a",
14
-
"color-warning": "#ffbe0b",
15
-
"color-danger": "#ff006e",
16
-
"color-code-bg": "#1a1a1a",
17
-
"color-code-text": "#f5f0e8",
18
-
// Typography
19
-
"font-body": "'Space Grotesk', system-ui, sans-serif",
20
-
"font-heading": "'Space Grotesk', system-ui, sans-serif",
21
-
"font-mono": "'JetBrains Mono', ui-monospace, monospace",
22
-
"font-size-base": "16px",
23
-
"font-size-sm": "14px",
24
-
"font-size-lg": "20px",
25
-
"font-size-xl": "28px",
26
-
"font-size-2xl": "36px",
27
-
"font-weight-normal": "400",
28
-
"font-weight-bold": "700",
29
-
"line-height-body": "1.6",
30
-
"line-height-heading": "1.2",
31
-
// Spacing & Layout
32
-
"space-xs": "4px",
33
-
"space-sm": "8px",
34
-
"space-md": "16px",
35
-
"space-lg": "24px",
36
-
"space-xl": "40px",
37
-
"radius": "0px",
38
-
"border-width": "2px",
39
-
"shadow-offset": "2px",
40
-
"content-width": "100%",
41
-
// Components
42
-
"button-radius": "0px",
43
-
"button-shadow": "2px 2px 0 var(--color-shadow)",
44
-
"card-radius": "0px",
45
-
"card-shadow": "4px 4px 0 var(--color-shadow)",
46
-
"btn-press-hover": "1px",
47
-
"btn-press-active": "2px",
48
-
"input-radius": "0px",
49
-
"input-border": "2px solid var(--color-border)",
50
-
"nav-height": "64px",
51
-
};