@tinyrack/themes

Design-system tokens and theme adapters for Tinyrack interfaces.

Setup Guide · Component Galleries · Storybook Deployment · npm Publishing

---

@tinyrack/themes keeps Tinyrack's interface language in one package.

It exports shared design tokens and thin adapters for Mantine, daisyUI, Tailwind CSS, and Astro Starlight so product apps, docs, and Storybook review surfaces use the same colors, typography, spacing, radii, shadows, and motion.

This package is intentionally theme-first. It aligns existing UI libraries; it is not a general component library.

Features

• Shared design tokens for colors, typography, spacing, radii, shadows, motion, and semantic surfaces
• Tailwind CSS 4 presets for Tinyrack utility tokens, daisyUI composition, and Mantine composition
• daisyUI 5 themes with Tinyrack light and dark themes plus JS metadata for tests and tooling
• Mantine 9 theme adapter with a scoped provider for extension and embedded roots
• Astro Starlight theme adapter for Tinyrack documentation sites
• Storybook review surface with onboarding, foundations, adapter guides, product-like demos, and component galleries

Installation

pnpm add @tinyrack/themes

Install the peer libraries needed by the surface you are using.

For environment-specific setup recipes, see docs/setup-guide.md. It covers Tailwind-only, Tailwind+daisyUI, Mantine-only, Tailwind+Mantine, Tailwind+daisyUI+Mantine, and Astro Starlight integrations.

Quick Start

Shared tokens

import { tinyrackTokens, tinyrackSemanticColors } from '@tinyrack/themes/tokens';

Shared tokens are library-agnostic. Mantine, daisyUI, and Starlight adapters map these tokens into each library's native theme shape.

Tailwind CSS 4

For shared Tinyrack Tailwind tokens without a component library:

@import "tailwindcss";
@import "@tinyrack/themes/tailwind.css";

This exposes utilities such as bg-tinyrack-surface, text-tinyrack-text, text-tinyrack-primary, font-tinyrack-body, and rounded-tinyrack-box.

Mantine

import '@mantine/core/styles.css';
import '@tinyrack/themes/mantine.css';
import { MantineProvider } from '@mantine/core';
import { tinyrackMantineTheme } from '@tinyrack/themes/mantine';

export function App({ children }: { children: React.ReactNode }) {
  return <MantineProvider theme={tinyrackMantineTheme}>{children}</MantineProvider>;
}

For extension/content-script roots that need scoped Mantine CSS variables:

import { TinyrackMantineProvider } from '@tinyrack/themes/mantine';

<TinyrackMantineProvider cssVariablesSelector="#tiny-translate-root">
  <App />
</TinyrackMantineProvider>;

daisyUI / Tailwind CSS 4

Use the combined preset when you want Tailwind utilities and Tinyrack daisyUI themes together:

@import "tailwindcss";
@import "@tinyrack/themes/tailwind/daisyui.css";

Equivalent explicit composition:

@import "tailwindcss";
@import "@tinyrack/themes/tailwind.css";
@import "@tinyrack/themes/daisyui.css";
@plugin "daisyui" {
  themes: tinyrack-light, tinyrack-dark --default --prefersdark;
}

For Tailwind plus Mantine, combine the Tailwind preset with Mantine's CSS and provider:

@import "tailwindcss";
@import "@tinyrack/themes/tailwind/mantine.css";

import '@mantine/core/styles.css';
import { TinyrackMantineProvider } from '@tinyrack/themes/mantine';

The package also exports JS metadata for tests and tooling:

import { tinyrackDaisyUiThemes } from '@tinyrack/themes/daisyui';

Astro Starlight

import starlight from '@astrojs/starlight';
import { defineConfig } from 'astro/config';
import { withTinyrackStarlightTheme } from '@tinyrack/themes/astro/starlight';

export default defineConfig({
  integrations: [
    starlight(
      withTinyrackStarlightTheme({
        title: 'Docs',
        customCss: ['./src/styles/global.css'],
      }),
    ),
  ],
});

If your Starlight/Astro version does not resolve package subpath CSS inside customCss, import it from your local global CSS instead:

@import "@tinyrack/themes/astro/starlight.css";

Component Galleries

Storybook includes onboarding docs, adapter guides, product-like demo pages, and full-theme review galleries for both UI systems. Cloudflare deployment setup is documented in docs/storybook-deployment.md:

• Mantine/*: generated Spectrum-style component pages for Mantine Core components selected for Tinyrack theme review.
• daisyUI/*: generated Spectrum-style component pages for component directories shipped by daisyUI 5.5.

Component pages use docs first, then a small set of meaningful stories such as Default, Variants, Sizes, States, and selective Examples. See docs/storybook-component-pages.md for the component-page model, generated-story workflow, and verification commands.

The same registries are covered by browser-mode Vitest so missing/broken previews and missing per-component story files fail CI:

pnpm test:showcase

Compatibility

Adapter	Target
Mantine	9.x
daisyUI	5.x
Tailwind CSS	4.x
Astro	7.x
Starlight	0.41.x
Vitest	4.x browser mode with Playwright

Development

pnpm install
pnpm test
pnpm build
pnpm storybook
pnpm storybook:build
pnpm biome

Export map

• @tinyrack/themes
• @tinyrack/themes/tokens
• @tinyrack/themes/tailwind.css
• @tinyrack/themes/tailwind/daisyui.css
• @tinyrack/themes/tailwind/mantine.css
• @tinyrack/themes/mantine
• @tinyrack/themes/mantine.css
• @tinyrack/themes/daisyui
• @tinyrack/themes/daisyui.css
• @tinyrack/themes/astro/starlight
• @tinyrack/themes/astro/starlight.css