malpercio.dev
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): add neobrutal-light and neobrutal-dark JSON presets with font-size-xs token (ATB-52)
+94
+47
apps/web/src/styles/presets/neobrutal-dark.json
+47
apps/web/src/styles/presets/neobrutal-dark.json
···
1
+
{
2
+
"color-bg": "#1a1a1a",
3
+
"color-surface": "#2d2d2d",
4
+
"color-text": "#f5f0e8",
5
+
"color-text-muted": "#a0a0a0",
6
+
"color-primary": "#ff5c00",
7
+
"color-primary-hover": "#ff7a2a",
8
+
"color-secondary": "#3a86ff",
9
+
"color-border": "#f5f0e8",
10
+
"color-shadow": "#000000",
11
+
"color-success": "#2ec44a",
12
+
"color-warning": "#ffbe0b",
13
+
"color-danger": "#ff006e",
14
+
"color-code-bg": "#111111",
15
+
"color-code-text": "#f5f0e8",
16
+
"font-body": "'Space Grotesk', system-ui, sans-serif",
17
+
"font-heading": "'Space Grotesk', system-ui, sans-serif",
18
+
"font-mono": "'JetBrains Mono', ui-monospace, monospace",
19
+
"font-size-base": "16px",
20
+
"font-size-sm": "14px",
21
+
"font-size-xs": "12px",
22
+
"font-size-lg": "20px",
23
+
"font-size-xl": "28px",
24
+
"font-size-2xl": "36px",
25
+
"font-weight-normal": "400",
26
+
"font-weight-bold": "700",
27
+
"line-height-body": "1.6",
28
+
"line-height-heading": "1.2",
29
+
"space-xs": "4px",
30
+
"space-sm": "8px",
31
+
"space-md": "16px",
32
+
"space-lg": "24px",
33
+
"space-xl": "40px",
34
+
"radius": "0px",
35
+
"border-width": "2px",
36
+
"shadow-offset": "2px",
37
+
"content-width": "100%",
38
+
"button-radius": "0px",
39
+
"button-shadow": "2px 2px 0 var(--color-shadow)",
40
+
"card-radius": "0px",
41
+
"card-shadow": "4px 4px 0 var(--color-shadow)",
42
+
"btn-press-hover": "1px",
43
+
"btn-press-active": "2px",
44
+
"input-radius": "0px",
45
+
"input-border": "2px solid var(--color-border)",
46
+
"nav-height": "64px"
47
+
}
+47
apps/web/src/styles/presets/neobrutal-light.json
+47
apps/web/src/styles/presets/neobrutal-light.json
···
1
+
{
2
+
"color-bg": "#f5f0e8",
3
+
"color-surface": "#ffffff",
4
+
"color-text": "#1a1a1a",
5
+
"color-text-muted": "#555555",
6
+
"color-primary": "#ff5c00",
7
+
"color-primary-hover": "#e04f00",
8
+
"color-secondary": "#3a86ff",
9
+
"color-border": "#1a1a1a",
10
+
"color-shadow": "#1a1a1a",
11
+
"color-success": "#2ec44a",
12
+
"color-warning": "#ffbe0b",
13
+
"color-danger": "#ff006e",
14
+
"color-code-bg": "#1a1a1a",
15
+
"color-code-text": "#f5f0e8",
16
+
"font-body": "'Space Grotesk', system-ui, sans-serif",
17
+
"font-heading": "'Space Grotesk', system-ui, sans-serif",
18
+
"font-mono": "'JetBrains Mono', ui-monospace, monospace",
19
+
"font-size-base": "16px",
20
+
"font-size-sm": "14px",
21
+
"font-size-xs": "12px",
22
+
"font-size-lg": "20px",
23
+
"font-size-xl": "28px",
24
+
"font-size-2xl": "36px",
25
+
"font-weight-normal": "400",
26
+
"font-weight-bold": "700",
27
+
"line-height-body": "1.6",
28
+
"line-height-heading": "1.2",
29
+
"space-xs": "4px",
30
+
"space-sm": "8px",
31
+
"space-md": "16px",
32
+
"space-lg": "24px",
33
+
"space-xl": "40px",
34
+
"radius": "0px",
35
+
"border-width": "2px",
36
+
"shadow-offset": "2px",
37
+
"content-width": "100%",
38
+
"button-radius": "0px",
39
+
"button-shadow": "2px 2px 0 var(--color-shadow)",
40
+
"card-radius": "0px",
41
+
"card-shadow": "4px 4px 0 var(--color-shadow)",
42
+
"btn-press-hover": "1px",
43
+
"btn-press-active": "2px",
44
+
"input-radius": "0px",
45
+
"input-border": "2px solid var(--color-border)",
46
+
"nav-height": "64px"
47
+
}