@marlotheme/ui

Shared UI theme for Marlo Tailwind CSS v4 + shadcn/ui apps:

| Layer | File | Contents | | --- | --- | --- | | Full theme | theme.css | Figma tokens + shadcn preset + base styles | | Product tokens | design-tokens.css | primitives, semantic, typography | | shadcn only | shadcn-theme.css + shadcn-base.css | --primary, --background, components |

Product tokens and shadcn variables use different names so both can coexist.

Install

npm install @marlotheme/ui

Peer dependency: tailwindcss ^4

Host app also needs: shadcn, tw-animate-css (and fonts if you use Inter/Geist).

Usage (Bosun / Vite)

/* src/index.css */
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "@fontsource-variable/inter";
@import "@marlotheme/ui/theme";

@custom-variant dark (&:is(.dark *));

Keep src/index.css thin — do not put theme variables here. When updating the shadcn preset, copy changes into packages/ui/shadcn-theme.css instead of running shadcn apply on the app CSS.

Subpath exports

| Import | Use when | | --- | --- | | @marlotheme/ui or @marlotheme/ui/theme | Full theme (recommended) | | @marlotheme/ui/design-tokens | Figma tokens only | | @marlotheme/ui/shadcn | shadcn variables + @theme bridge | | @marlotheme/ui/shadcn-base | shadcn @layer base only | | @marlotheme/ui/tokens.json | Tokens Studio source |

Tailwind examples

shadcn components: bg-primary, text-muted-foreground, rounded-lg

Product tokens: text-content-primary, bg-background-screen, p-sem-md, typography-title-screen

Updating shadcn preset

1. Run npx shadcn@latest apply --preset <id> in a scratch app, or diff the generated CSS.
2. Copy :root / .dark / @theme changes into packages/ui/shadcn-theme.css.
3. Bump @marlotheme/ui version and publish.

Product token files (primitives.css, semantic.css) are unaffected.

Publish

npm publish -w @marlotheme/ui --access public