// TownPost Design System — warm community palette + helpers // Loaded as a Babel script. Exposes everything onto window. // // THEME SYSTEM: // TP starts in LIGHT. Call applyTheme('dark' | 'light') to swap colors in place. // Components that use TP.* will pick up the new colors on next render. The App // bumps a `key` on its tree to force a full re-render when theme flips. const TP_LIGHT = { // Backgrounds — warm cream tones cream: '#F5EFE6', creamDeep: '#EDE4D4', paper: '#FBF7F0', card: '#FFFFFF', // Foregrounds — warm charcoal ink: '#1F1B16', inkSoft: '#3A332A', muted: '#6B6359', mutedSoft: '#9A9085', hairline: 'rgba(31,27,22,0.08)', hairlineStrong: 'rgba(31,27,22,0.14)', // Brand primaries forest: '#2D5016', forestSoft: '#4A7C30', moss: '#849C5C', terracotta: '#C97B4A', terracottaSoft: '#E29D72', ochre: '#D4A24C', // Status alertRed: '#B23A2E', alertAmber: '#D4791E', alertBlue: '#2E5F8E', goodGreen: '#3F7A3A', // Tinted surfaces forestTint: '#E8EFE0', terracottaTint: '#F7E8DC', ochreTint: '#F7EED8', redTint: '#F4DDD8', amberTint: '#F7E5CC', blueTint: '#DCE5EE', // Stage / page background (outside the device) stage: '#EDE4D4', stageGrad: '#F4ECDC', // Theme tag __theme: 'light', }; // Cool charcoal dark — neutral, modern, iOS/Material-friendly const TP_DARK = { // Backgrounds cream: '#15171A', // app background — deep neutral creamDeep: '#0D0F12', // page/stage paper: '#1C1F23', // cards / chrome surface card: '#23272D', // raised card // Foregrounds ink: '#F2F4F7', inkSoft: '#D6DBE2', muted: '#9CA3AE', mutedSoft: '#6B727B', hairline: 'rgba(255,255,255,0.08)', hairlineStrong: 'rgba(255,255,255,0.14)', // Brand primaries — lifted for dark legibility forest: '#7FB069', // brighter green that reads on charcoal forestSoft: '#A4C98F', moss: '#B8C99B', terracotta: '#E29D72', terracottaSoft: '#F0BC9C', ochre: '#E5BC7A', // Status — slightly desaturated so they don't glow alertRed: '#E26E63', alertAmber: '#E89A4D', alertBlue: '#7AA3D1', goodGreen: '#84C97F', // Tinted surfaces — barely-there washes on dark forestTint: 'rgba(127,176,105,0.14)', terracottaTint: 'rgba(226,157,114,0.14)', ochreTint: 'rgba(229,188,122,0.14)', redTint: 'rgba(226,110,99,0.14)', amberTint: 'rgba(232,154,77,0.14)', blueTint: 'rgba(122,163,209,0.16)', // Stage / page background stage: '#0A0B0D', stageGrad: '#15171A', __theme: 'dark', }; // Mutable TP — components read TP.cream etc. We swap the values in place. const TP = { ...TP_LIGHT }; // Type / radii live outside theme — same in both modes TP.serif = '"Instrument Serif", "Cormorant Garamond", Georgia, serif'; TP.sans = '"Geist", -apple-system, "SF Pro", system-ui, sans-serif'; TP.mono = '"JetBrains Mono", "Fira Code", ui-monospace, monospace'; TP.r = { sm: 8, md: 12, lg: 16, xl: 22, pill: 9999 }; function applyTheme(name) { const src = name === 'dark' ? TP_DARK : TP_LIGHT; // Overwrite color keys; keep type/radii intact Object.keys(src).forEach((k) => { TP[k] = src[k]; }); } // React context so children can subscribe and re-render when theme flips. const TPThemeContext = React.createContext({ theme: 'light', setTheme: () => {} }); function useTPTheme() { return React.useContext(TPThemeContext); } // ─── Tiny inline icon set (24px stroke icons) ────────────────────────── function TPIcon({ name, size = 22, color = 'currentColor', stroke = 1.8, fill, filled = false, tint }) { const p = { fill: fill || 'none', stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' }; // Soft duotone fill colour for "filled" tab icons. Defaults to a 14%-opacity wash of the stroke colour. const tintFill = tint || (color === 'currentColor' ? 'rgba(45,80,22,0.14)' : color); const fp = { fill: tintFill, stroke: 'none' }; const sp = { fill: 'none', stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' }; const paths = { home: <>, feed: <>, alert: <>, map: <>, profile: <>, bell: <>, // Inbox tray — bin with a V-notch in the top edge for incoming items. // Adapted from FontAwesome 7 "inbox" silhouette: outer container, inner divider line, // and a small downward notch at the dividers where mail slots in. mail: <> {/* Outer bin: walls slope outward toward the top (matches FA proportions) */} {/* Inbox slot: horizontal divider with the downward V where the tray accepts items */} , search: <>, plus: <>, chat: <>, heart: <>, repost: <>, share: <>, bookmark: <>, pin: <>, location: <>, calendar: <>, tag: <>, eye: <>, arrowRight: <>, arrowUp: <>, chevronRight: <>, chevronLeft: <>, chevronDown: <>, close: <>, sun: <>, cloud: <>, leaf: <>, shield: <>, car: <>, paw: <>, cart: <>, coffee: <>, book: <>, briefcase: <>, image: <>, mic: <>, settings: <>, filter: <>, flag: <>, dot: <>, check: <>, fire: <>, handshake: <>, // Thumbs-up — used for "Helpful". Cuff at the bottom, four-finger fist with thumb extended up. // Stroke-based for the 24-grid; reads cleanly at 12-18px. helpful: <> {/* Cuff / sleeve */} {/* Hand body — palm with thumb extended up and four fingers curled over */} , news: <>, question: <>, // ─── Marketplace category glyphs ────────────── catAll: <>, catFree: <>, catFurniture: <>, catBike: <>, catKids: <>, catPlants: <>, catTools: <>, catMusic: <>, catHome: <>, catApparel: <>, // ─── Premium tab-bar icons (24×24, designed as a set) ────────────── // Each icon supports `filled` (duotone fill behind outline) for active states. // Stroke weight kept consistent; geometry tuned for optical balance at 22px. // Home: gabled cottage with off-center chimney + door cut. Reads warm, residential. tabHome: <> {filled && } , // Feed: community discussion — chat bubble with three linked circles representing // multiple voices in conversation. Adapted from FontAwesome 7 "comments" silhouette // (rounded bubble with tail + small connected secondary group). tabFeed: <> {filled && ( )} {/* Main chat bubble with downward-left tail */} {/* Three participants — circles tracking the bubble's interior to suggest a group chat */} , // Radar: figure with broadcast arcs on either side (community broadcast / scanning) // Adapted from FontAwesome 7 "tower-broadcast" silhouette — two pairs of waves + central figure. tabAlerts: <> {filled && <> } {/* Inner waves */} {/* Outer waves */} {/* Central figure: head + body */} , // Map: folded map with a single pin. Cleaner creases. tabMap: <> {filled && } , // Profile: head + shoulders with a circular surround that hints at a portrait crop tabProfile: <> {filled && } , // Market: refined storefront — clean awning scallops, framed door tabMarket: <> {filled && } , // More: 2×3 grid of rounded squares — classic "all apps / launcher" silhouette. // Adapted from FontAwesome 7 "grid-2" / app-grid icon. tabMore: (() => { // Grid layout: 3 columns × 2 rows, centered in the 24-grid. // Each cell is 5.4×5.4 with 1.6 gap; square corners use rx=1.6 for soft rounding. const cells = [ [4.4, 4.6], [9.8, 4.6], [15.2, 4.6], [4.4, 12.0], [9.8, 12.0], [15.2, 12.0], ]; return ( <> {filled && cells.map(([cx, cy], i) => ( ))} {cells.map(([cx, cy], i) => ( ))} ); })(), // Search (used by some bars in place of Market) — magnifier with crisp handle tabSearch: <> {filled && } , }; return ( {paths[name] || paths.dot} ); } // ─── Radar icon with scanning pulse animation ────────────────────────── // Used in the bottom tab when "Radar" is active, in the radar screen header, // and as a hero icon. The pulse waves expand outward from the center figure, // suggesting a broadcast/scan in progress. function TPRadarIcon({ size = 22, color = 'currentColor', stroke = 1.8, scanning = true, tint }) { const sp = { fill: 'none', stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' }; return ( {/* Static central figure: head + body */} {/* Static base waves (always visible, low opacity if scanning to keep silhouette readable) */} {/* Scanning waves */} {scanning && ( <> {/* Inner pulse */} {/* Outer pulse — offset so they cascade */} )} ); } // ─── Avatar (initials + warm tones) ────────────────────────── function TPAvatar({ name = 'NA', size = 36, hue = 0, src }) { const palettes = [ ['#E8EFE0', '#2D5016'], // forest ['#F7E8DC', '#A8551E'], // terracotta ['#F7EED8', '#7A5410'], // ochre ['#DCE5EE', '#2E5F8E'], // blue ['#F4DDD8', '#8B2A20'], // red ['#E5DDEC', '#5C3A78'], // plum ['#E0E8DD', '#3F7A3A'], // grass ['#F0E5D8', '#7A4220'], // tan ]; const [bg, fg] = palettes[hue % palettes.length]; const initials = name.split(' ').map(s => s[0]).filter(Boolean).slice(0, 2).join('').toUpperCase(); if (src) { return
; } return (
{initials}
); } // ─── Generative placeholder image (warm striped) ────────────────────────── function TPImage({ label = 'photo', height = 180, hue = 0, kind = 'stripe', radius = 14, onClick, gallery, galleryIndex = 0 }) { const themes = [ ['#E8DFCE', '#D4C5AA'], // tan ['#DCE6D5', '#B8C9A8'], // sage ['#F0DBC8', '#D9B796'], // peach ['#D9DEE6', '#B6BFCC'], // sky ['#E4D5C4', '#C0A88A'], // wheat ['#D5DDD0', '#9FAE94'], // moss ]; const [a, b] = themes[hue % themes.length]; const bg = kind === 'sky' ? `linear-gradient(180deg, ${b} 0%, ${a} 60%, ${a} 100%)` : `repeating-linear-gradient(135deg, ${a} 0 14px, ${b} 14px 28px)`; const handleClick = (e) => { if (onClick) { onClick(e); return; } // Fire global lightbox event const detail = gallery && gallery.length ? { images: gallery, index: galleryIndex } : { images: [{ label, hue, kind }], index: 0 }; window.dispatchEvent(new CustomEvent('tp-lightbox-open', { detail })); }; return (
{label}
); } // ─── Image gallery: single image OR horizontal slider for multiple ───────── function TPImageGallery({ images, height = 240, radius = 16 }) { if (!images || images.length === 0) return null; const list = Array.isArray(images) ? images : [images]; const scrollerRef = React.useRef(null); const [idx, setIdx] = React.useState(0); const onScroll = () => { const el = scrollerRef.current; if (!el) return; const w = el.clientWidth; const i = Math.round(el.scrollLeft / w); if (i !== idx) setIdx(i); }; if (list.length === 1) { const img = list[0]; return ; } return (
{list.map((img, i) => (
))}
{/* Counter */}
{idx + 1} / {list.length}
{/* Dots */}
{list.map((_, i) => (
))}
); } // ─── Lightbox: fullscreen image viewer with swipe/arrow nav ─────────────── function TPLightbox() { const [state, setState] = React.useState(null); // { images, index } | null const [idx, setIdx] = React.useState(0); const scrollerRef = React.useRef(null); React.useEffect(() => { const onOpen = (e) => { setState(e.detail); setIdx(e.detail.index || 0); document.body.style.overflow = 'hidden'; }; window.addEventListener('tp-lightbox-open', onOpen); return () => window.removeEventListener('tp-lightbox-open', onOpen); }, []); React.useEffect(() => { const onKey = (e) => { if (!state) return; if (e.key === 'Escape') close(); if (e.key === 'ArrowRight') goTo(idx + 1); if (e.key === 'ArrowLeft') goTo(idx - 1); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [state, idx]); React.useEffect(() => { if (state && scrollerRef.current) { const w = scrollerRef.current.clientWidth; scrollerRef.current.scrollTo({ left: idx * w, behavior: 'instant' }); } }, [state]); const close = () => { setState(null); document.body.style.overflow = ''; }; const goTo = (i) => { if (!state) return; const len = state.images.length; const next = Math.max(0, Math.min(len - 1, i)); setIdx(next); if (scrollerRef.current) { const w = scrollerRef.current.clientWidth; scrollerRef.current.scrollTo({ left: next * w, behavior: 'smooth' }); } }; const onScroll = () => { if (!scrollerRef.current) return; const w = scrollerRef.current.clientWidth; const i = Math.round(scrollerRef.current.scrollLeft / w); if (i !== idx) setIdx(i); }; if (!state) return null; const themes = [ ['#E8DFCE', '#D4C5AA'],['#DCE6D5', '#B8C9A8'],['#F0DBC8', '#D9B796'], ['#D9DEE6', '#B6BFCC'],['#E4D5C4', '#C0A88A'],['#D5DDD0', '#9FAE94'], ]; const renderBg = (img) => { const [a, b] = themes[(img.hue || 0) % themes.length]; return img.kind === 'sky' ? `linear-gradient(180deg, ${b} 0%, ${a} 60%, ${a} 100%)` : `repeating-linear-gradient(135deg, ${a} 0 28px, ${b} 28px 56px)`; }; return (
{/* Top bar */}
{state.images.length > 1 ? `${idx + 1} / ${state.images.length}` : 'IMAGE'}
{/* Scroller */}
{state.images.map((img, i) => (
{img.label}
))}
{/* Arrow buttons (desktop) */} {state.images.length > 1 && idx > 0 && ( )} {state.images.length > 1 && idx < state.images.length - 1 && ( )} {/* Bottom dots */} {state.images.length > 1 && (
{state.images.map((_, i) => (
)}
); } // ─── Pill / chip ────────────────────────── function TPChip({ children, tone = 'default', size = 'md', icon }) { const tones = { default: { bg: '#fff', fg: TP.inkSoft, border: TP.hairlineStrong }, forest: { bg: TP.forestTint, fg: TP.forest, border: 'transparent' }, terra: { bg: TP.terracottaTint, fg: '#A8551E', border: 'transparent' }, ochre: { bg: TP.ochreTint, fg: '#7A5410', border: 'transparent' }, red: { bg: TP.redTint, fg: TP.alertRed, border: 'transparent' }, amber: { bg: TP.amberTint, fg: '#8A4A0E', border: 'transparent' }, blue: { bg: TP.blueTint, fg: TP.alertBlue, border: 'transparent' }, ink: { bg: TP.ink, fg: '#FBF7F0', border: 'transparent' }, }; const t = tones[tone] || tones.default; const sz = size === 'sm' ? { fs: 11, py: 3, px: 8, gap: 4 } : { fs: 12, py: 4, px: 10, gap: 5 }; return ( {icon && } {children} ); } // ─── TownPost Logo ────────────────────────── function TPLogo({ size = 36, showWordmark = false, dark = false, accent = true }) { const fg = dark ? TP.cream : TP.cream; const bg = TP.forest; return (
{/* terracotta postmark ring */} {accent && (
)} {/* T monogram in serif */} T
{showWordmark && (
TownPost QUINTE WEST
)}
); } Object.assign(window, { TP, TP_LIGHT, TP_DARK, applyTheme, TPThemeContext, useTPTheme, TPIcon, TPRadarIcon, TPAvatar, TPImage, TPImageGallery, TPLightbox, TPChip, TPLogo });