style-baseline

Shared CSS and small Svelte UI foundations for Jan de Boer's portfolio projects.

• Product intent: see VISION.md
• Current status: see STATUS.md

Purpose

@janldeboer/style-baseline provides reusable design tokens, reset rules, typography, layout primitives, navigation and document styles, utilities, and a small set of Svelte components.

It is shared infrastructure, not a full design system or app-specific theme.

Usage

Import the full baseline:

@import '@janldeboer/style-baseline';

Or import individual layers when a project needs tighter control:

@import '@janldeboer/style-baseline/design-tokens';
@import '@janldeboer/style-baseline/reset';
@import '@janldeboer/style-baseline/typography';

Exports

• @janldeboer/style-baseline
• @janldeboer/style-baseline/design-tokens
• @janldeboer/style-baseline/reset
• @janldeboer/style-baseline/typography
• @janldeboer/style-baseline/layout
• @janldeboer/style-baseline/components
• @janldeboer/style-baseline/navigation
• @janldeboer/style-baseline/documents
• @janldeboer/style-baseline/utilities
• @janldeboer/style-baseline/svelte/auth-card
• @janldeboer/style-baseline/svelte/footer
• @janldeboer/style-baseline/svelte/navbar
• @janldeboer/style-baseline/svelte/docs-layout
• @janldeboer/style-baseline/svelte/docs-markdown

Svelte Components

Use AuthCard for shared login, sign-up, and protected-page shells while keeping form actions and fields in each app:

<script lang="ts">
	import AuthCard from '@janldeboer/style-baseline/svelte/auth-card';
</script>

<AuthCard title="Project" subtitle="Login" error={form?.message}>
	<form method="post" class="stack">
		<!-- app-owned fields and actions -->
	</form>
</AuthCard>

Use Navbar for shared app navigation, auth links, and user menus:

<script lang="ts">
	import Navbar from '@janldeboer/style-baseline/svelte/navbar';
</script>

<Navbar
	brand="Project"
	user={data.user}
	links={[{ href: '/dashboard', label: 'Dashboard', requiresAuth: true }]}
	authLinks={{
		signIn: { href: '/login', label: 'Login' },
		signUp: { href: '/signup', label: 'Sign Up' },
		signOut: { href: '/logout', label: 'Logout', method: 'POST' }
	}}
/>

Footer uses the same signIn, signUp, and signOut auth action names as Navbar. Use DocsLayout for documentation navigation shells and DocsMarkdown for the package's deliberately small Markdown subset.

<script lang="ts">
	import DocsLayout from '@janldeboer/style-baseline/svelte/docs-layout';
	import DocsMarkdown from '@janldeboer/style-baseline/svelte/docs-markdown';
</script>

<DocsLayout nav={docsNav} currentPath="/docs">
	<DocsMarkdown markdown={content} />
</DocsLayout>

What Belongs Here

• Cross-project CSS variables and semantic tokens.
• Low-level reset, typography, layout, and utility classes.
• Components that are intentionally shared across multiple projects.

What Belongs In Projects

• Product-specific layouts and page composition.
• Brand accents beyond token overrides.
• One-off UI decisions that do not repeat across projects.
• Behavior-heavy components tied to application state.

Commands

• npm run check - run Svelte checks for package components.