{
  "schema": "leumas.docs.page/1",
  "id": "pkg:@leumas/theme",
  "slug": "packages/theme",
  "kind": "capabilities",
  "bucket": "package",
  "title": "@leumas/theme",
  "name": "@leumas/theme",
  "eyebrow": null,
  "chip": null,
  "summary": "Leumas design tokens, global styles, Tailwind preset, and ThemeProvider — the single source of styling truth.",
  "keywords": [
    "theme",
    "tailwind",
    "themeprovider",
    "preset",
    "styling",
    "leumas theme",
    "styles",
    "global"
  ],
  "audience": "both",
  "funnel": {
    "product": null,
    "cta": null
  },
  "body": "# @leumas/theme\n\nThe single source of styling truth for every Leumas product: design tokens, global base styles, a\nTailwind preset, and the `ThemeProvider` (dark/light).\n\n**Absorbs (DRY-consolidated from):** `leumas-tech/src/styles.css` + `src/styles/tokens/index.css` +\n`src/features/leumas-bank/theme/tokens.css`; Imperium `z.Domains2/core/src/z.styles/leumas-vars.css` +\n`Shared/Theme/ThemeContext.jsx`; School OS `leumas-school/packages/ui/src/tokens`.\n\n## Usage\n\n```js\n// app entry (once):\nimport '@leumas/theme/global.css';           // tokens + base resets\nimport { ThemeProvider } from '@leumas/theme';\n\n<ThemeProvider>{app}</ThemeProvider>\n\n// tailwind.config.js:\nimport preset from '@leumas/theme/tailwind-preset';\nexport default { presets: [preset], content: [...] };\n\n// anywhere:\nimport { useTheme, ThemeToggle, tokens } from '@leumas/theme';\n```\n\n## Contents\n\n- `tokens.css` — CSS custom properties (semantic colors dark/light + spacing/radius/motion/typography/brand/status/white scales).\n- `global.css` — imports tokens + minimal base resets (box-sizing, body, scrollbars).\n- `tokens.js` — JS mirror (colors reference CSS vars → theme-reactive; scales are raw values).\n- `tailwind-preset.js` — maps tokens into Tailwind's theme.\n- `ThemeProvider.jsx` — `ThemeProvider` / `useTheme` / `ThemeToggle` (sets `body[data-theme]`, persists, defaults dark).\n\n**Rule:** no product defines its own tokens or theme provider — everything imports `@leumas/theme`.\n",
  "source": {
    "path": "shared/packages/theme/README.md",
    "blobSha": "",
    "commit": "",
    "committedAt": "",
    "provenance": "no-git",
    "bytes": 1655,
    "hash": "90f5b6628134a1d804a62f076cdd29b848b1136e"
  },
  "urls": {
    "html": "/p/packages/theme",
    "json": "/docs/packages/theme.json",
    "md": "/docs/packages/theme.md"
  },
  "links": {
    "composes": [
      "pkg:@leumas/config-registry"
    ],
    "usedBy": [
      "pkg:@leumas/admin",
      "pkg:@leumas/converter-web",
      "pkg:@leumas/docs",
      "pkg:@leumas/entrance",
      "pkg:@leumas/features",
      "pkg:@leumas/leviathan",
      "pkg:@leumas/sing",
      "pkg:@leumas/site-map",
      "pkg:@leumas/studio",
      "pkg:@leumas/ui",
      "pkg:@leumas/value-changer",
      "pkg:@leumas/web"
    ],
    "product": [
      "pkg:@leumas/admin",
      "pkg:@leumas/converter-web",
      "pkg:@leumas/docs",
      "pkg:@leumas/studio",
      "pkg:@leumas/web"
    ],
    "howTo": [],
    "skills": [
      "skill:cinematic-frontend-director",
      "skill:leumas-brand-marks"
    ]
  },
  "exports": {
    "total": 39,
    "component": 12,
    "hook": 4,
    "helper": 23,
    "names": [
      {
        "n": "ACCENT_PRESETS",
        "k": "component"
      },
      {
        "n": "BREAKPOINT_ORDER",
        "k": "component"
      },
      {
        "n": "BREAKPOINT_ORDER",
        "k": "component"
      },
      {
        "n": "BREAKPOINTS",
        "k": "component"
      },
      {
        "n": "BREAKPOINTS",
        "k": "component"
      },
      {
        "n": "DENSITIES",
        "k": "component"
      },
      {
        "n": "DensityToggle",
        "k": "component"
      },
      {
        "n": "DEVICE_PRESETS",
        "k": "component"
      },
      {
        "n": "ThemeProvider",
        "k": "component"
      },
      {
        "n": "ThemeScope",
        "k": "component"
      },
      {
        "n": "ThemeToggle",
        "k": "component"
      },
      {
        "n": "ViewportProvider",
        "k": "component"
      },
      {
        "n": "useBreakpoint",
        "k": "hook"
      },
      {
        "n": "useContainerSize",
        "k": "hook"
      },
      {
        "n": "useMediaQuery",
        "k": "hook"
      },
      {
        "n": "useTheme",
        "k": "hook"
      },
      {
        "n": "brand",
        "k": "helper"
      },
      {
        "n": "brand",
        "k": "helper"
      },
      {
        "n": "breakpointFor",
        "k": "helper"
      },
      {
        "n": "breakpoints",
        "k": "helper"
      },
      {
        "n": "breakpoints",
        "k": "helper"
      },
      {
        "n": "colors",
        "k": "helper"
      },
      {
        "n": "colors",
        "k": "helper"
      },
      {
        "n": "containerQuery",
        "k": "helper"
      },
      {
        "n": "devicePreset",
        "k": "helper"
      },
      {
        "n": "fontFamily",
        "k": "helper"
      },
      {
        "n": "fontFamily",
        "k": "helper"
      },
      {
        "n": "fontSize",
        "k": "helper"
      },
      {
        "n": "fontSize",
        "k": "helper"
      },
      {
        "n": "mediaQuery",
        "k": "helper"
      },
      {
        "n": "radius",
        "k": "helper"
      },
      {
        "n": "radius",
        "k": "helper"
      },
      {
        "n": "spacing",
        "k": "helper"
      },
      {
        "n": "spacing",
        "k": "helper"
      },
      {
        "n": "status",
        "k": "helper"
      },
      {
        "n": "status",
        "k": "helper"
      },
      {
        "n": "tokens",
        "k": "helper"
      },
      {
        "n": "tokens",
        "k": "helper"
      },
      {
        "n": "tokensDefault",
        "k": "helper"
      }
    ]
  }
}