trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): design-system foundation — shared token layer + fonts

Browse source 
Establish the visual-redesign foundation (task group 1): a single
shared source of design tokens both apps consume, so Planner and
Journal read from one palette/typography layer instead of drifting
per-app.

- New @trails-cool/ui package exporting theme.css: Tailwind v4 @theme
  tokens (warm off-white surfaces, one sage accent, earthy overnight
  tones, elevation-gradient colors, shadows) extracted from the
  visual-redesign mockup.
- Self-hosted Outfit (body) + Geist Mono (stats) via @fontsource-variable
  — privacy-first, no Google Fonts CDN.
- Both apps import the theme and set the base canvas to the warm
  off-white token + Outfit as the default font.

Foundation only: tokens are now available as Tailwind utilities
(bg-bg-raised, text-accent, font-mono, …) and raw CSS vars. Wiring
them into specific surfaces (topbar, sidebar, markers, elevation
chart) is later task groups.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Ullrich Schäfer 2026-07-15 23:00:28 +02:00
parent ad9a633ae0
commit 34c3a31e73
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9
11 changed files with 126 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
apps/journal/app/root.tsx
View file

@ -41,7 +41,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
<Meta />
<Links />
</head>
<body className="min-h-screen bg-gray-50">
<body className="min-h-screen bg-bg">
{children}
<ScrollRestoration />
<Scripts />

1
apps/journal/app/styles.css
View file

@ -1,4 +1,5 @@
@import "tailwindcss";
@import "@trails-cool/ui/theme.css";
@keyframes slide {
0% { transform: translateX(-100%); }

1
apps/journal/package.json
View file

@ -28,6 +28,7 @@
"@trails-cool/i18n": "workspace:*",
"@trails-cool/jobs": "workspace:*",
"@trails-cool/map-core": "workspace:*",
"@trails-cool/ui": "workspace:*",
"@trails-cool/sentry-config": "workspace:*",
"@trails-cool/types": "workspace:*",
"drizzle-orm": "catalog:",

2
apps/planner/app/root.tsx
View file

@ -20,7 +20,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
<Meta />
<Links />
</head>
<body className="h-screen w-screen overflow-hidden bg-white">
<body className="h-screen w-screen overflow-hidden bg-bg">
{children}
<ScrollRestoration />
<Scripts />

1
apps/planner/app/styles.css
View file

@ -1,4 +1,5 @@
@import "tailwindcss";
@import "@trails-cool/ui/theme.css";
@keyframes slide {
0% { transform: translateX(-100%); }

1
apps/planner/package.json
View file

@ -28,6 +28,7 @@
"@trails-cool/i18n": "workspace:*",
"@trails-cool/jobs": "workspace:*",
"@trails-cool/map-core": "workspace:*",
"@trails-cool/ui": "workspace:*",
"@trails-cool/sentry-config": "workspace:*",
"@trails-cool/types": "workspace:*",
"codemirror": "^6.0.2",