@cirodam/ui-tokens

Shared CSS design tokens and a handful of UI primitives for cirodam's small self-hosted SvelteKit apps (tylerdteague_v2, Mirror, ...), extracted after noticing the same app.css and the same per-page <style> boilerplate (page wrapper, form field layout, error/success text, empty states) getting copy-pasted — and drifting — across repos.

What's here

• @cirodam/ui-tokens/tokens.css — the CSS custom properties (--color-bg, --color-fg, --color-accent, etc., with a prefers-color-scheme: dark override) plus base element rules for body/h1-h3/a/button/input/select/textarea/focus states. Import it once, e.g. from your root +layout.svelte.
• Components (import { ... } from '@cirodam/ui-tokens'):
  • Page — page wrapper (padding + configurable maxWidth)
  • PageHeader — title + optional action snippet, e.g. a page-level button
  • Field — label + form control layout
  • FormMessage — error/success text (variant="error" | "success")
  • EmptyState — muted "nothing here yet" text
  • ConfirmForm — a <form> with use:enhance, a confirm() guard on submit, and an optional enctype for multipart forms
  • SummaryStat — bordered label/value stat card
  • Card — bordered container with configurable padding
  • ListRow — a divider-separated <li> for rows sharing one Card
  • Badge — small status pill (variant="neutral" | "success" | "danger")
  • Navbar — top bar with brand/brandHref and a children snippet for the right-hand side
  • Sidebar — nav list (items), optional brand, and a footer snippet
  • AccountMenu — a <details>-based dropdown container: pass username and put whatever links/forms the app needs as children (own account link, app-specific links, a logout form, ...). Handles the open/close affordance (click, focus-out, Escape) and styles its children's a/button elements as uniform menu items; each app decides what actually goes in the menu.
  • Footer — bottom bar wrapping children
  • AuthCard — centered card shell for login/signup/setup pages

An app that doesn't want a token/primitive here is free to keep its own custom CSS alongside it — this isn't meant to be exhaustive, just the pieces that were actually duplicated.

What's deliberately not here

Anything app-specific: no SvelteKit routes, no auth/session logic (that lives in each app, copied from sveltekit-postgres-starter), no app-specific color palettes (SimpleBlog's own token set is a deliberate divergence, not something this package tries to unify).

Using it in a consuming app

npm install @cirodam/ui-tokens

<!-- src/routes/+layout.svelte -->
<script lang="ts">
	import '@cirodam/ui-tokens/tokens.css';
</script>

<script lang="ts">
	import { Page, Field, FormMessage } from '@cirodam/ui-tokens';
</script>

Developing

• npm run dev — runs the demo page at src/routes/+page.svelte (not published)
• npm run build — builds the publishable package into dist/ via @sveltejs/package, then lints it with publint
• npm run check — svelte-check

Publishing

npm run build
npm publish --access public

Bump version in package.json first (semver — this is consumed by multiple apps, so breaking changes to a component's props should be a major bump).