{"_id":"@axiora-ui/ui-themes","_rev":"3-35b17910b315b16a886e39c0531c54f6","name":"@axiora-ui/ui-themes","dist-tags":{"latest":"2.0.0"},"versions":{"1.0.0":{"name":"@axiora-ui/ui-themes","version":"1.0.0","keywords":["axiora-ui","design-system","themes","light-theme","dark-theme","typescript"],"author":{"name":"axiora-ui"},"license":"MIT","_id":"@axiora-ui/ui-themes@1.0.0","maintainers":[{"name":"axiora-ui","email":"dhineshkumardevelopment80@gmail.com"}],"dist":{"shasum":"2da7aaeb18472e6e2bbe3aaa1a05a83dd07601eb","tarball":"https://registry.npmjs.org/@axiora-ui/ui-themes/-/ui-themes-1.0.0.tgz","fileCount":4,"integrity":"sha512-SXZvDLmix0eJ6nxvUtSJ/ybrA2nOJavUwl/gRUScrelpSONamUtIDCqPqFL6OM4A6B+9Llj1QOfW9ZNbWw9WUQ==","signatures":[{"sig":"MEQCICDBAtbYXFrxgOVyvLRZg9EsonAUk6rL3vRrlIQ99ayWAiARU2haM5Lm5n1IyxQAEHC0eq56NI3cV1V54B8udsRVNA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10869},"type":"module","_from":"file:axiora-ui-ui-themes-1.0.0.tgz","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"lint":"tsc --noEmit -p tsconfig.json","test":"vitest run","build":"tsup src/index.ts --format esm --dts --clean --external @axiora-ui/ui-tokens"},"_npmUser":{"name":"axiora-ui","email":"dhineshkumardevelopment80@gmail.com"},"_resolved":"/tmp/d9a01832d3238bd63155faf1b13266c8/axiora-ui-ui-themes-1.0.0.tgz","_integrity":"sha512-SXZvDLmix0eJ6nxvUtSJ/ybrA2nOJavUwl/gRUScrelpSONamUtIDCqPqFL6OM4A6B+9Llj1QOfW9ZNbWw9WUQ==","_npmVersion":"10.9.8","description":"Light and dark theme objects for the Axiora UI design system.","directories":{},"sideEffects":false,"_nodeVersion":"22.23.1","dependencies":{"@axiora-ui/ui-tokens":"1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ui-themes_1.0.0_1782386962434_0.44917495089438764","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@axiora-ui/ui-themes","version":"1.1.0","keywords":["axiora-ui","design-system","themes","light-theme","dark-theme","typescript"],"author":{"name":"axiora-ui"},"license":"MIT","_id":"@axiora-ui/ui-themes@1.1.0","maintainers":[{"name":"axiora-ui","email":"dhineshkumardevelopment80@gmail.com"}],"dist":{"shasum":"afdbddb05a8dab710806c296d8a32f12d3bbf065","tarball":"https://registry.npmjs.org/@axiora-ui/ui-themes/-/ui-themes-1.1.0.tgz","fileCount":4,"integrity":"sha512-ro18wp1idZIU+mHCTm5z1pboUxHweeYBT7DyrZMEMYDm13OfCOuMk1fRz8J0m09Y7MIM/f9AfJHVwqpBy093GA==","signatures":[{"sig":"MEQCIHMJlipT8FO4sg9KE3Un1os4XizlotMqIcymxkfaETiPAiATc+zRNe/mXixfWHuzzlYJBh0Gl2kWe567eccImsxu6Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":13731},"type":"module","_from":"file:axiora-ui-ui-themes-1.1.0.tgz","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"lint":"tsc --noEmit -p tsconfig.json","test":"vitest run","build":"tsup src/index.ts --format esm --dts --clean --external @axiora-ui/ui-tokens"},"_npmUser":{"name":"axiora-ui","email":"dhineshkumardevelopment80@gmail.com"},"_resolved":"/tmp/006145743ff5d9c841e8336e0d4cc07e/axiora-ui-ui-themes-1.1.0.tgz","_integrity":"sha512-ro18wp1idZIU+mHCTm5z1pboUxHweeYBT7DyrZMEMYDm13OfCOuMk1fRz8J0m09Y7MIM/f9AfJHVwqpBy093GA==","_npmVersion":"10.9.8","description":"Light and dark theme objects for the Axiora UI design system.","directories":{},"sideEffects":false,"_nodeVersion":"22.23.1","dependencies":{"@axiora-ui/ui-tokens":"1.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ui-themes_1.1.0_1782909055347_0.533697927746366","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"_id":"@axiora-ui/ui-themes@2.0.0","dist":{"shasum":"d7ee05fb455a9423a59728712e6f0f83664ed26d","tarball":"https://registry.npmjs.org/@axiora-ui/ui-themes/-/ui-themes-2.0.0.tgz","fileCount":4,"integrity":"sha512-Oik7va9oaPJzin/G0IsacwnMONGeESffmZWwz+B+T0tuScL3y1mUpPxidcbo3Bil8eFP/yIGUjMUUD9EPHFKsA==","signatures":[{"sig":"MEYCIQC+6cim4QxYK2KJ/35V2kYKsGblknvS1djPjMc+42BuPwIhAM2B76cUkY+1I+oPUluBCf6vc6DN03qSMl71mzvAVbIE","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDfLM4F8DOypxLtQacqtNZYYVa9kCifG5Okwl5Z8PVvSQIhAKV4Ff1oUwB81kzdtdT6xK7EkLgnau9kbUPqOl45IYr6"}],"unpackedSize":22063},"name":"@axiora-ui/ui-themes","type":"module","_from":"file:axiora-ui-ui-themes-2.0.0.tgz","author":{"name":"axiora-ui"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"license":"MIT","scripts":{"lint":"tsc --noEmit -p tsconfig.json","test":"vitest run","build":"tsup src/index.ts --format esm --dts --clean --external @axiora-ui/ui-tokens,react,react-dom"},"version":"2.0.0","_npmUser":{"name":"axiora-ui","email":"dhineshkumardevelopment80@gmail.com"},"keywords":["axiora-ui","design-system","themes","light-theme","dark-theme","typescript"],"_resolved":"/tmp/70efde11347fa395dabf703eab7b117f/axiora-ui-ui-themes-2.0.0.tgz","_integrity":"sha512-Oik7va9oaPJzin/G0IsacwnMONGeESffmZWwz+B+T0tuScL3y1mUpPxidcbo3Bil8eFP/yIGUjMUUD9EPHFKsA==","_npmVersion":"10.9.8","description":"Light and dark theme objects for the Axiora UI design system.","directories":{},"maintainers":[{"name":"axiora-ui","email":"dhineshkumardevelopment80@gmail.com"}],"sideEffects":false,"_nodeVersion":"22.23.2","dependencies":{"zod":"^4.6.5","@axiora-ui/ui-tokens":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@testing-library/react":"^16.3.3"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui-themes_2.0.0_1790005918386_0.1715410732910454"}}},"time":{"created":"2026-06-25T11:29:22.237Z","modified":"2026-09-21T15:51:58.688Z","1.0.0":"2026-06-25T11:29:22.587Z","1.1.0":"2026-07-01T12:30:55.482Z","2.0.0":"2026-09-21T15:51:58.465Z"},"author":{"name":"axiora-ui"},"license":"MIT","keywords":["axiora-ui","design-system","themes","light-theme","dark-theme","typescript"],"description":"Light and dark theme objects for the Axiora UI design system.","maintainers":[{"name":"axiora-ui","email":"dhineshkumardevelopment80@gmail.com"}],"readme":"# @axiora-ui/ui-themes\n\nRuntime theme layer for the Axiora design system. Maps primitive tokens from `@axiora-ui/ui-tokens` into semantic theme configs, injects **CSS custom properties** on `:root`, and powers automatic styling in `@axiora-ui/ui-core`.\n\n**Status:** ✅ **Complete** — `ThemeProvider`, `mergeTheme`, `validateTheme`, light/dark presets, brand themes, Vitest coverage\n\n---\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Quick start](#quick-start)\n- [API reference](#api-reference)\n- [Theme presets](#theme-presets)\n- [Custom themes](#custom-themes)\n- [CSS variables](#css-variables)\n- [Storybook integration](#storybook-integration)\n- [Build & test](#build--test)\n- [Planned additions](#planned-additions)\n\n---\n\n## Installation\n\n```json\n\"dependencies\": {\n  \"@axiora-ui/ui-themes\": \"workspace:*\",\n  \"@axiora-ui/ui-core\": \"workspace:*\"\n}\n```\n\nPair with `@axiora-ui/ui-core/styles.css` so components consume the injected variables.\n\n**Peer dependencies:** `react` and `react-dom` ^19.0.0\n\n---\n\n## Quick start\n\n```tsx\nimport \"@axiora-ui/ui-core/styles.css\";\nimport { ThemeProvider } from \"@axiora-ui/ui-themes\";\nimport { Button, Input } from \"@axiora-ui/ui-core\";\n\nexport function App() {\n  return (\n    <ThemeProvider theme={{ mode: \"dark\" }}>\n      <Button>Primary</Button>\n      <Input label=\"Email\" />\n    </ThemeProvider>\n  );\n}\n```\n\nBrand override:\n\n```tsx\n<ThemeProvider\n  theme={{\n    name: \"violet\",\n    mode: \"light\",\n    colors: {\n      primary: \"#7c3aed\",\n      primaryHover: \"#6d28d9\",\n    },\n  }}\n>\n  <App />\n</ThemeProvider>\n```\n\n---\n\n## API reference\n\n| Export                                             | Description                                           |\n| -------------------------------------------------- | ----------------------------------------------------- |\n| `ThemeProvider`                                    | Applies theme to `:root` and provides React context   |\n| `useTheme()`                                       | Returns the resolved theme from context               |\n| `mergeTheme(input?)`                               | Deep-merge partial config onto light/dark base preset |\n| `validateTheme(input)`                             | Zod validation; throws on invalid hex/radius          |\n| `themeToCSSVars(theme)`                            | Convert resolved theme → CSS variable map             |\n| `defaultTheme`                                     | Default theme configuration                           |\n| `presets` / `lightThemeColors` / `darkThemeColors` | Base color presets                                    |\n| `sampleThemes` / `resolveSampleTheme`              | Storybook / demo theme keys                           |\n| `sampleThemeOptions`                               | Toolbar label/value pairs for Storybook               |\n| `isDarkSampleTheme(key)`                           | Whether a sample key uses dark base                   |\n\n### Types\n\n```ts\nimport type {\n  ThemeConfig,\n  ThemeColors,\n  ThemeMode,\n  ThemeRadius,\n  ResolvedTheme,\n  SampleThemeKey,\n} from \"@axiora-ui/ui-themes\";\n```\n\n---\n\n## Theme presets\n\n| Key            | Mode  | Description                 |\n| -------------- | ----- | --------------------------- |\n| `default`      | light | Base light theme            |\n| `dark`         | dark  | Base dark theme             |\n| `violet`       | light | Violet brand primary        |\n| `emerald`      | light | Emerald brand primary       |\n| `violet-dark`  | dark  | Dark base + violet primary  |\n| `emerald-dark` | dark  | dark base + emerald primary |\n\n```ts\nimport { resolveSampleTheme, mergeTheme } from \"@axiora-ui/ui-themes\";\n\nconst resolved = mergeTheme(resolveSampleTheme(\"violet-dark\"));\n// resolved.colors.primary → \"#8b5cf6\"\n// resolved.mode → \"dark\"\n```\n\n---\n\n## Custom themes\n\nPartial configs merge onto the appropriate base (light or dark):\n\n```ts\nimport { mergeTheme, validateTheme } from \"@axiora-ui/ui-themes\";\n\nconst theme = validateTheme({\n  name: \"acme\",\n  mode: \"light\",\n  colors: {\n    primary: \"#e11d48\",\n    primaryHover: \"#be123c\",\n  },\n  radius: \"lg\",\n  fontFamily: \"Inter, sans-serif\",\n});\n\nconst resolved = mergeTheme(theme);\n```\n\nNested color groups (`text`, `menu`, `feedback`) support **partial** overrides — you don't need every field when overriding a subgroup.\n\n---\n\n## CSS variables\n\n`ThemeProvider` writes these to `document.documentElement` (default `target=\"root\"`):\n\n| Variable                              | Maps to                     |\n| ------------------------------------- | --------------------------- |\n| `--color-primary`                     | `colors.primary`            |\n| `--color-primary-hover`               | `colors.primaryHover`       |\n| `--color-secondary`                   | `colors.secondary`          |\n| `--color-background`                  | `colors.background`         |\n| `--color-foreground`                  | `colors.foreground`         |\n| `--color-surface`                     | `colors.surface`            |\n| `--color-text-on-primary`             | `colors.text.onPrimary`     |\n| `--color-border`                      | `colors.border`             |\n| `--color-success/warning/danger/info` | `colors.feedback.*`         |\n| `--color-menu-*`                      | `colors.menu.*`             |\n| `--radius-base`                       | `radius` (from token scale) |\n| `--font-family-base`                  | `fontFamily`                |\n\nComponents in `@axiora-ui/ui-core` reference these via classes in `components.css` (e.g. `.ax-button-primary`, `.ax-label`, `.ax-input`).\n\n---\n\n## Storybook integration\n\nThe root `.storybook/preview.tsx` wraps all stories in `ThemeProvider` and exposes an **axTheme** toolbar global with `sampleThemeOptions`. Per-story overrides:\n\n```tsx\nexport const VioletBrand: Story = {\n  globals: { axTheme: \"violet\" },\n  render: () => <MyComponent />,\n};\n```\n\n---\n\n## Build & test\n\n```bash\npnpm build --filter @axiora-ui/ui-themes\npnpm test --filter @axiora-ui/ui-themes\n```\n\nTests cover `mergeTheme`, `validateTheme` (including partial nested colors), `themeToCSSVars`, `ThemeProvider`, and sample theme presets.\n\n---\n\n## Planned additions\n\n- **`systemTheme`** — Follow `prefers-color-scheme` automatically\n- **High-contrast preset** — Accessibility-focused variant\n- **Persisted theme preference** — Optional localStorage integration helper\n\n---\n\n## Build\n\n```bash\npnpm build --filter @axiora-ui/ui-themes\n```\n\nOutput: `dist/index.js` (ESM) + `dist/index.d.ts`\n\n> `@axiora-ui/ui-tokens` is externalized and not bundled.\n","readmeFilename":"README.md"}