# @leumas/theme

Leumas design tokens, global styles, Tailwind preset, and ThemeProvider — the single source of styling truth.


The single source of styling truth for every Leumas product: design tokens, global base styles, a
Tailwind preset, and the `ThemeProvider` (dark/light).

**Absorbs (DRY-consolidated from):** `leumas-tech/src/styles.css` + `src/styles/tokens/index.css` +
`src/features/leumas-bank/theme/tokens.css`; Imperium `z.Domains2/core/src/z.styles/leumas-vars.css` +
`Shared/Theme/ThemeContext.jsx`; School OS `leumas-school/packages/ui/src/tokens`.

## Usage

```js
// app entry (once):
import '@leumas/theme/global.css';           // tokens + base resets
import { ThemeProvider } from '@leumas/theme';

<ThemeProvider>{app}</ThemeProvider>

// tailwind.config.js:
import preset from '@leumas/theme/tailwind-preset';
export default { presets: [preset], content: [...] };

// anywhere:
import { useTheme, ThemeToggle, tokens } from '@leumas/theme';
```

## Contents

- `tokens.css` — CSS custom properties (semantic colors dark/light + spacing/radius/motion/typography/brand/status/white scales).
- `global.css` — imports tokens + minimal base resets (box-sizing, body, scrollbars).
- `tokens.js` — JS mirror (colors reference CSS vars → theme-reactive; scales are raw values).
- `tailwind-preset.js` — maps tokens into Tailwind's theme.
- `ThemeProvider.jsx` — `ThemeProvider` / `useTheme` / `ThemeToggle` (sets `body[data-theme]`, persists, defaults dark).

**Rule:** no product defines its own tokens or theme provider — everything imports `@leumas/theme`.


---
Source: shared/packages/theme/README.md
Canonical: https://docs.leumas.tech/p/packages/theme