@leumas/theme

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

// 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.