Install

This monorepo ships the design system as four workspace packages:

# inside the monorepo
pnpm install
pnpm -w run build          # build tokens, utils, icons, design
pnpm -F @fos/docs dev      # run the documentation site

Consuming in an app

// app root (layout or main.ts)
import '@fos/design/styles.css';

// anywhere in a .svelte file
<script>
  import { Button, TextField } from '@fos/design';
</script>

Using raw tokens

/* option 1: CSS variables */
@import '@fos/tokens/css';
.my-widget { background: var(--fos-color-surface-card); }

/* option 2: JS/TS constants */
import { tokens } from '@fos/tokens';
console.log(tokens.color.brand.primary);