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
4
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat(web): switch base layout to JSON preset import, remove TS preset (ATB-52)

Malpercio 25f26efb e30745eb

+2 -53
+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
··· 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 - };