{"_id":"@axiora-ui/ui-tokens","_rev":"3-5209bc4357738f3d18255341cf2e7245","name":"@axiora-ui/ui-tokens","dist-tags":{"latest":"2.0.0"},"versions":{"1.0.0":{"name":"@axiora-ui/ui-tokens","version":"1.0.0","keywords":["axiora-ui","design-system","design-tokens","colors","spacing","typography","typescript"],"author":{"name":"axiora-ui"},"license":"MIT","_id":"@axiora-ui/ui-tokens@1.0.0","maintainers":[{"name":"axiora-ui","email":"dhineshkumardevelopment80@gmail.com"}],"dist":{"shasum":"145e15e96ce040e9dd01a4fa45d603707c67a8b8","tarball":"https://registry.npmjs.org/@axiora-ui/ui-tokens/-/ui-tokens-1.0.0.tgz","fileCount":4,"integrity":"sha512-1KwIb57Jj3NivuCRM5W8L3cESQ8VVr6KOk21Ftko9oK7KOE3I8r/0dDvzkBSGLaoqrQ4aRXFo3JRQGuIppQoQw==","signatures":[{"sig":"MEYCIQCVQc6fuERi7t/eJwy9QzsPIoHuWz/L65yDEz9zEhx2vgIhAMPe3Wm7NsKfTyYIK6uO4FRMZVRunWsBbOhp8byTlsEn","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":8535},"type":"module","_from":"file:axiora-ui-ui-tokens-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"},"_npmUser":{"name":"axiora-ui","email":"dhineshkumardevelopment80@gmail.com"},"_resolved":"/tmp/a2e4abdff5d01cd5e1c2b5d5101e3232/axiora-ui-ui-tokens-1.0.0.tgz","_integrity":"sha512-1KwIb57Jj3NivuCRM5W8L3cESQ8VVr6KOk21Ftko9oK7KOE3I8r/0dDvzkBSGLaoqrQ4aRXFo3JRQGuIppQoQw==","_npmVersion":"10.9.8","description":"Design tokens for the Axiora UI design system — colors, spacing, and typography.","directories":{},"sideEffects":false,"_nodeVersion":"22.23.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ui-tokens_1.0.0_1782386955981_0.6184957789364272","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@axiora-ui/ui-tokens","version":"1.1.0","keywords":["axiora-ui","design-system","design-tokens","colors","spacing","typography","typescript"],"author":{"name":"axiora-ui"},"license":"MIT","_id":"@axiora-ui/ui-tokens@1.1.0","maintainers":[{"name":"axiora-ui","email":"dhineshkumardevelopment80@gmail.com"}],"dist":{"shasum":"89f00108bd8cf9aa3b4773a5c05760d2b8c9c858","tarball":"https://registry.npmjs.org/@axiora-ui/ui-tokens/-/ui-tokens-1.1.0.tgz","fileCount":4,"integrity":"sha512-uZtlJ2WkmLQHfGCCeDH7CvdquvvbycSHK4TKhTvixt5SO8uiB6S5pqqYzwFylWUHPgpMF5r56JgtGGA6TwnkpQ==","signatures":[{"sig":"MEQCIEQoBDFigmTeZ5nUcc5Ob0HAGJY5fh7uX1bPucm97snvAiANPKuwX/yZdTYBhuHU8thPBwj868o1myI+DQE3tw/5lQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":26982},"type":"module","_from":"file:axiora-ui-ui-tokens-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","build:docs":"typedoc","build:docs:watch":"typedoc --watch"},"_npmUser":{"name":"axiora-ui","email":"dhineshkumardevelopment80@gmail.com"},"_resolved":"/tmp/351b25f52571011658813036c1d9a8a6/axiora-ui-ui-tokens-1.1.0.tgz","_integrity":"sha512-uZtlJ2WkmLQHfGCCeDH7CvdquvvbycSHK4TKhTvixt5SO8uiB6S5pqqYzwFylWUHPgpMF5r56JgtGGA6TwnkpQ==","_npmVersion":"10.9.8","description":"Design tokens for the Axiora UI design system — colors, spacing, and typography.","directories":{},"sideEffects":false,"_nodeVersion":"22.23.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ui-tokens_1.1.0_1782909034242_0.07191013817863623","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"_id":"@axiora-ui/ui-tokens@2.0.0","dist":{"shasum":"8c6a1847ca72917928d821333a8e3b3666980c0c","tarball":"https://registry.npmjs.org/@axiora-ui/ui-tokens/-/ui-tokens-2.0.0.tgz","fileCount":4,"integrity":"sha512-6B7AiWxWc3iAdJLI4dkiDjmjadOicUjS07EJXLrOWu8wOqXQDaeYbYX25iWNI9Elz6Kfqur94GCXmJ0JfRWLgA==","signatures":[{"sig":"MEYCIQDB9sm9JTOd9k2e191irl0xbRbBNnRLNvJqhcQgTrQ0BwIhAL/9ZsYkc8VsHqLsKDpx2GGOVI5ZHrPMNgdY05mUEIVW","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC7IgsiWvUVQN2kWGlR3w+lL1S6fRty84quBloHLk7U2wIgB+C0i6gRwUEPKecHRS0JlNEAVjP3DWRBnjEuSngwREs="}],"unpackedSize":37991},"name":"@axiora-ui/ui-tokens","type":"module","_from":"file:axiora-ui-ui-tokens-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","build:docs":"typedoc","build:docs:watch":"typedoc --watch"},"version":"2.0.0","_npmUser":{"name":"axiora-ui","email":"dhineshkumardevelopment80@gmail.com"},"keywords":["axiora-ui","design-system","design-tokens","colors","spacing","typography","typescript"],"_resolved":"/tmp/c528acbd051322016b20c571feba5980/axiora-ui-ui-tokens-2.0.0.tgz","_integrity":"sha512-6B7AiWxWc3iAdJLI4dkiDjmjadOicUjS07EJXLrOWu8wOqXQDaeYbYX25iWNI9Elz6Kfqur94GCXmJ0JfRWLgA==","_npmVersion":"10.9.8","description":"Design tokens for the Axiora UI design system — colors, spacing, and typography.","directories":{},"maintainers":[{"name":"axiora-ui","email":"dhineshkumardevelopment80@gmail.com"}],"sideEffects":false,"_nodeVersion":"22.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui-tokens_2.0.0_1790005843008_0.7040462334291355"}}},"time":{"created":"2026-06-25T11:29:15.864Z","modified":"2026-09-21T15:50:43.270Z","1.0.0":"2026-06-25T11:29:16.114Z","1.1.0":"2026-07-01T12:30:34.408Z","2.0.0":"2026-09-21T15:50:43.098Z"},"author":{"name":"axiora-ui"},"license":"MIT","keywords":["axiora-ui","design-system","design-tokens","colors","spacing","typography","typescript"],"description":"Design tokens for the Axiora UI design system — colors, spacing, and typography.","maintainers":[{"name":"axiora-ui","email":"dhineshkumardevelopment80@gmail.com"}],"readme":"# @axiora-ui/ui-tokens\n\n## 📊 Implementation Status\n\n### ✅ Fully Implemented (UI-Ready)\n\nAll design tokens are fully implemented and tested:\n\n| Token Category | Status      | Test Coverage | UI Usage |\n| -------------- | ----------- | ------------- | -------- |\n| Colors         | ✅ Complete | ✅ Tested     | ✅ Ready |\n| Spacing        | ✅ Complete | ✅ Tested     | ✅ Ready |\n| Typography     | ✅ Complete | ✅ Tested     | ✅ Ready |\n| Scale          | ✅ Complete | ✅ Tested     | ✅ Ready |\n| Shadow         | ✅ Complete | ✅ Tested     | ✅ Ready |\n| Z-Index        | ✅ Complete | ✅ Tested     | ✅ Ready |\n| Duration       | ✅ Complete | ✅ Tested     | ✅ Ready |\n| Opacity        | ✅ Complete | ✅ Tested     | ✅ Ready |\n| Breakpoints    | ✅ Complete | ✅ Tested     | ✅ Ready |\n\n---\n\nThe foundation layer of the Axiora UI design system. This package exports raw design token constants — colors, spacing, typography, border radius, shadows, z-index, breakpoints, duration/easing, and opacity — as plain TypeScript objects. Every other Axiora UI package that needs visual values imports from here.\n\nNo runtime dependencies. No React. Just typed constants.\n\nTokens in this package are **primitives** — raw scales with no semantic meaning attached (`colorPrimitive.blue[600]`, not `colors.primary`). Semantic meaning (`primary`, `danger`, `background`, ...) is composed on top of these primitives by `@axiora-ui/ui-themes`.\n\n---\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Tokens Reference](#tokens-reference)\n  - [Colors](#colors)\n  - [Spacing](#spacing)\n  - [Typography](#typography)\n  - [Scale (border radius)](#scale-border-radius)\n  - [Shadow](#shadow)\n  - [Z-Index](#z-index)\n  - [Breakpoints](#breakpoints)\n  - [Duration & Easing](#duration--easing)\n  - [Opacity](#opacity)\n- [Design Decisions](#design-decisions)\n- [Testing](#testing)\n- [Generating API Docs](#generating-api-docs)\n- [Build](#build)\n- [UI Implementation Status](#ui-implementation-status)\n\n---\n\n## Installation\n\nThis package is part of the Axiora UI monorepo and is consumed via the workspace protocol:\n\n```json\n\"dependencies\": {\n  \"@axiora-ui/ui-tokens\": \"workspace:*\"\n}\n```\n\n---\n\n## Usage\n\nEvery token group is exported from the package root:\n\n```ts\nimport {\n  colorPrimitive,\n  spacing,\n  typography,\n  textStyle,\n  scale,\n  shadow,\n  zIndex,\n  breakpoints,\n  breakpointsPx,\n  duration,\n  easing,\n  opacity,\n} from \"@axiora-ui/ui-tokens\";\n\n// Apply in inline styles\nconst style = {\n  backgroundColor: colorPrimitive.blue[600],\n  padding: `${spacing[2]} ${spacing[4]}`,\n  borderRadius: scale.md,\n  boxShadow: shadow.sm,\n  ...textStyle[\"body-md\"],\n};\n```\n\n---\n\n## Tokens Reference\n\n### Colors\n\n**File:** [`src/colors/colors.ts`](./src/colors/colors.ts)\n\n`colorPrimitive` is a raw palette of 10 hues, each with 11 shade stops from `50` (lightest) to `950` (darkest):\n\n```ts\nimport { colorPrimitive } from \"@axiora-ui/ui-tokens\";\n\ncolorPrimitive.blue[600]; // \"#2563eb\"\ncolorPrimitive.gray[50]; // \"#f9fafb\"\n```\n\n| Hue      | 50        | 500       | 600       | 950       |\n| -------- | --------- | --------- | --------- | --------- |\n| `gray`   | `#f9fafb` | `#6b7280` | `#4b5563` | `#0b0f19` |\n| `red`    | `#fef2f2` | `#ef4444` | `#dc2626` | `#450a0a` |\n| `orange` | `#fff7ed` | `#f97316` | `#ea580c` | `#431407` |\n| `yellow` | `#fefce8` | `#eab308` | `#ca8a04` | `#422006` |\n| `green`  | `#f0fdf4` | `#22c55e` | `#16a34a` | `#052e16` |\n| `teal`   | `#f0fdfa` | `#14b8a6` | `#0d9488` | `#042f2e` |\n| `blue`   | `#eff6ff` | `#3b82f6` | `#2563eb` | `#172554` |\n| `indigo` | `#eef2ff` | `#6366f1` | `#4f46e5` | `#1e1b4b` |\n| `purple` | `#faf5ff` | `#a855f7` | `#9333ea` | `#3b0764` |\n| `pink`   | `#fdf2f8` | `#ec4899` | `#db2777` | `#500724` |\n\nEvery hue has the full `50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950` stop set — see [`colors.ts`](./src/colors/colors.ts) for every value.\n\nThese are primitives, not semantics. Don't reach for `colorPrimitive.blue[600]` in a component to mean \"primary action\" — that mapping belongs in `@axiora-ui/ui-themes`, so a consuming app can swap its brand colors without touching component code.\n\n---\n\n### Spacing\n\n**File:** [`src/spacing/spacing.ts`](./src/spacing/spacing.ts)\n\nA pixel-based spacing scale on a 4px base unit — each key is a step number, and its value is always `step * 4` px. Use for padding, margin, and gap.\n\n```ts\nimport { spacing } from \"@axiora-ui/ui-tokens\";\n```\n\n| Token        | Value  | Token         | Value   |\n| ------------ | ------ | ------------- | ------- |\n| `spacing[0]` | `0px`  | `spacing[10]` | `40px`  |\n| `spacing[1]` | `4px`  | `spacing[12]` | `48px`  |\n| `spacing[2]` | `8px`  | `spacing[14]` | `56px`  |\n| `spacing[3]` | `12px` | `spacing[16]` | `64px`  |\n| `spacing[4]` | `16px` | `spacing[20]` | `80px`  |\n| `spacing[5]` | `20px` | `spacing[24]` | `96px`  |\n| `spacing[6]` | `24px` | `spacing[28]` | `112px` |\n| `spacing[7]` | `28px` | `spacing[32]` | `128px` |\n| `spacing[8]` | `32px` | `spacing[40]` | `160px` |\n| `spacing[9]` | `36px` | `spacing[48]` | `192px` |\n|              |        | `spacing[56]` | `224px` |\n|              |        | `spacing[64]` | `256px` |\n\n**Examples:**\n\n```ts\n// Compact icon button\n{\n  padding: `${spacing[1]} ${spacing[2]}`;\n}\n\n// Default button\n{\n  padding: `${spacing[2]} ${spacing[4]}`;\n}\n\n// Section gap\n{\n  gap: spacing[6];\n}\n```\n\n---\n\n### Typography\n\n**File:** [`src/typography/typography.ts`](./src/typography/typography.ts)\n\nFont family, size, weight, line-height, and letter-spacing scales, plus a set of pre-composed `textStyle` presets built from them.\n\n```ts\nimport { typography, textStyle } from \"@axiora-ui/ui-tokens\";\n```\n\n#### Font Families\n\n| Token                         | Value                                                                |\n| ----------------------------- | -------------------------------------------------------------------- |\n| `typography.fontFamily.sans`  | `'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif` |\n| `typography.fontFamily.serif` | `'Georgia', 'Times New Roman', serif`                                |\n| `typography.fontFamily.mono`  | `'JetBrains Mono', 'SFMono-Regular', Consolas, monospace`            |\n\n#### Font Sizes\n\n| Token                      | Value  | Token                        | Value  |\n| -------------------------- | ------ | ---------------------------- | ------ |\n| `typography.fontSize.xs`   | `12px` | `typography.fontSize[\"2xl\"]` | `24px` |\n| `typography.fontSize.sm`   | `14px` | `typography.fontSize[\"3xl\"]` | `30px` |\n| `typography.fontSize.base` | `16px` | `typography.fontSize[\"4xl\"]` | `36px` |\n| `typography.fontSize.lg`   | `18px` | `typography.fontSize[\"5xl\"]` | `48px` |\n| `typography.fontSize.xl`   | `20px` | `typography.fontSize[\"6xl\"]` | `60px` |\n\n#### Font Weights\n\n| Token                            | Value | Common use          |\n| -------------------------------- | ----- | ------------------- |\n| `typography.fontWeight.regular`  | `400` | Body text           |\n| `typography.fontWeight.medium`   | `500` | Labels, button text |\n| `typography.fontWeight.semibold` | `600` | Sub-headings        |\n| `typography.fontWeight.bold`     | `700` | Headings, emphasis  |\n\n#### Line Height & Letter Spacing\n\n| `lineHeight` | Value  | `letterSpacing` | Value     |\n| ------------ | ------ | --------------- | --------- |\n| `.tight`     | `1.2`  | `.tight`        | `-0.02em` |\n| `.snug`      | `1.35` | `.normal`       | `0em`     |\n| `.normal`    | `1.5`  | `.wide`         | `0.02em`  |\n| `.relaxed`   | `1.65` | `.wider`        | `0.04em`  |\n| `.loose`     | `1.8`  |                 |           |\n\n#### textStyle\n\nComposed presets — the values components should actually consume instead of assembling `fontSize` / `fontWeight` / `lineHeight` / `letterSpacing` by hand:\n\n```ts\nconst headingCss = textStyle[\"heading-lg\"];\n// { fontSize: \"30px\", fontWeight: 700, lineHeight: 1.2, letterSpacing: \"-0.02em\" }\n```\n\n| Preset       | Built from                         |\n| ------------ | ---------------------------------- |\n| `heading-xl` | `5xl` / bold / tight / tight       |\n| `heading-lg` | `3xl` / bold / tight / tight       |\n| `heading-md` | `2xl` / semibold / snug / normal   |\n| `body-lg`    | `lg` / regular / normal / normal   |\n| `body-md`    | `base` / regular / normal / normal |\n| `body-sm`    | `sm` / regular / normal / normal   |\n| `caption`    | `xs` / medium / snug / wide        |\n\n---\n\n### Scale (border radius)\n\n**File:** [`src/scale/scale.ts`](./src/scale/scale.ts)\n\n```ts\nimport { scale } from \"@axiora-ui/ui-tokens\";\n```\n\n| Token          | Value    | Use for                  |\n| -------------- | -------- | ------------------------ |\n| `scale.none`   | `0px`    | Sharp corners            |\n| `scale.xs`     | `2px`    | Subtle rounding          |\n| `scale.sm`     | `4px`    | Inputs, small chips      |\n| `scale.md`     | `8px`    | Buttons, cards (default) |\n| `scale.lg`     | `12px`   | Larger cards, modals     |\n| `scale.xl`     | `16px`   | Prominent surfaces       |\n| `scale[\"2xl\"]` | `24px`   | Hero sections            |\n| `scale.full`   | `9999px` | Pills, circular avatars  |\n\n---\n\n### Shadow\n\n**File:** [`src/shadow/shadow.ts`](./src/shadow/shadow.ts)\n\nBox-shadow elevation scale, from `none` to `2xl`, plus an `inner` inset shadow for pressed/recessed surfaces.\n\n```ts\nimport { shadow } from \"@axiora-ui/ui-tokens\";\n```\n\n| Token           | Value                                                            |\n| --------------- | ---------------------------------------------------------------- |\n| `shadow.none`   | `none`                                                           |\n| `shadow.xs`     | `0 1px 2px rgba(0, 0, 0, 0.05)`                                  |\n| `shadow.sm`     | `0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)`    |\n| `shadow.md`     | `0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06)`   |\n| `shadow.lg`     | `0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05)` |\n| `shadow.xl`     | `0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04)` |\n| `shadow[\"2xl\"]` | `0 25px 50px rgba(0, 0, 0, 0.18)`                                |\n| `shadow.inner`  | `inset 0 2px 4px rgba(0, 0, 0, 0.06)`                            |\n\n---\n\n### Z-Index\n\n**File:** [`src/zIndex/zIndex.ts`](./src/zIndex/zIndex.ts)\n\nStacking-order scale for layered UI. Layers are spaced 100 apart so new layers can be inserted between existing ones without a full renumber.\n\n```ts\nimport { zIndex } from \"@axiora-ui/ui-tokens\";\n```\n\n| Token             | Value  |\n| ----------------- | ------ |\n| `zIndex.base`     | `0`    |\n| `zIndex.dropdown` | `1000` |\n| `zIndex.sticky`   | `1100` |\n| `zIndex.fixed`    | `1200` |\n| `zIndex.overlay`  | `1300` |\n| `zIndex.modal`    | `1400` |\n| `zIndex.popover`  | `1500` |\n| `zIndex.toast`    | `1600` |\n| `zIndex.tooltip`  | `1700` |\n\n---\n\n### Breakpoints\n\n**File:** [`src/breakpoints/breakpoints.ts`](./src/breakpoints/breakpoints.ts)\n\n`breakpoints` gives CSS length strings for media queries; `breakpointsPx` gives the same values as numbers for JS-side `matchMedia` logic.\n\n```ts\nimport { breakpoints, breakpointsPx } from \"@axiora-ui/ui-tokens\";\n\n`@media (min-width: ${breakpoints.md})`;\nwindow.matchMedia(`(min-width: ${breakpointsPx.md}px)`);\n```\n\n| Token | `breakpoints` | `breakpointsPx` |\n| ----- | ------------- | --------------- |\n| `xs`  | `480px`       | `480`           |\n| `sm`  | `640px`       | `640`           |\n| `md`  | `768px`       | `768`           |\n| `lg`  | `1024px`      | `1024`          |\n| `xl`  | `1280px`      | `1280`          |\n| `2xl` | `1536px`      | `1536`          |\n\n---\n\n### Duration & Easing\n\n**File:** [`src/duration/duration.ts`](./src/duration/duration.ts)\n\n```ts\nimport { duration, easing } from \"@axiora-ui/ui-tokens\";\n\n{\n  transitionDuration: duration.base,\n  transitionTimingFunction: easing.easeOut,\n}\n```\n\n| `duration` | Value   | `easing`     | Value                          |\n| ---------- | ------- | ------------ | ------------------------------ |\n| `.instant` | `0ms`   | `.linear`    | `linear`                       |\n| `.fast`    | `100ms` | `.easeIn`    | `cubic-bezier(0.4, 0, 1, 1)`   |\n| `.base`    | `200ms` | `.easeOut`   | `cubic-bezier(0, 0, 0.2, 1)`   |\n| `.slow`    | `300ms` | `.easeInOut` | `cubic-bezier(0.4, 0, 0.2, 1)` |\n| `.slower`  | `500ms` |              |                                |\n\n---\n\n### Opacity\n\n**File:** [`src/opacity/opacity.ts`](./src/opacity/opacity.ts)\n\nNumeric stops (`0`–`100`, matching the percentage) plus two semantic stops: `disabled` and `overlay`.\n\n```ts\nimport { opacity } from \"@axiora-ui/ui-tokens\";\n\n{\n  opacity: opacity.disabled;\n} // 0.5\n```\n\n| Token         | Value | Token              | Value |\n| ------------- | ----- | ------------------ | ----- |\n| `opacity[0]`  | `0`   | `opacity.disabled` | `0.5` |\n| `opacity[10]` | `0.1` | `opacity[60]`      | `0.6` |\n| `opacity[20]` | `0.2` | `opacity.overlay`  | `0.7` |\n| `opacity[40]` | `0.4` | `opacity[80]`      | `0.8` |\n|               |       | `opacity[100]`     | `1`   |\n\n---\n\n## Design Decisions\n\n- **Primitives, not semantics** — `colorPrimitive` is a raw hue/shade palette with no meaning attached. Mapping primitives to semantic roles (`primary`, `danger`, `background`, ...) is the responsibility of `@axiora-ui/ui-themes`, so brand colors can change without touching this package or any component.\n- **`as const`** — All token objects use `as const` so TypeScript infers literal types. This means you get exact autocomplete and the compiler catches typos in token names.\n- **Pixel units** — Spacing and font sizes use `px` rather than `rem`, matching the primitive-scale convention used across colors, radius, and shadow.\n- **No CSS variables** — Tokens are TypeScript constants for maximum type safety. `@axiora-ui/ui-themes` is responsible for mapping tokens to CSS variable schemes if needed.\n\n---\n\n## Testing\n\nEvery token module has a colocated `*.test.ts` that asserts on its structural invariants (e.g. spacing steps equal `step * 4`, z-index layers are strictly increasing, color shades are all valid hex and distinct):\n\n```bash\npnpm test                                    # from the package directory\npnpm test --filter @axiora-ui/ui-tokens      # from the monorepo root\n```\n\n---\n\n## Generating API Docs\n\nAPI reference docs are generated from the TSDoc comments on each export via [TypeDoc](https://typedoc.org/):\n\n```bash\npnpm build:docs          # one-off build to ./docs\npnpm build:docs:watch    # rebuild on save\n```\n\n`docs/` is gitignored — regenerate it locally when you need it.\n\n---\n\n## Build\n\n```bash\n# From the package directory\npnpm build\n\n# From the monorepo root\npnpm build --filter @axiora-ui/ui-tokens\n```\n\nOutput: `dist/index.js` (ESM) and `dist/index.d.ts` (type declarations).\n\n---\n\n## UI Implementation Status\n\n### ✅ 100% Complete - Ready for UI Implementation\n\nThis package is **fully implemented** and **production-ready**. All design tokens are:\n\n- ✅ **Defined** in TypeScript with proper types\n- ✅ **Exported** from the package root\n- ✅ **Tested** with comprehensive Vitest test coverage\n- ✅ **Documented** with Storybook stories and Typedoc API docs\n- ✅ **Used** by `@axiora-ui/ui-themes` (semantic presets) and `@axiora-ui/ui-core` (typography/spacing in components)\n- ✅ **Stable** at version 2.0.0\n\n### Token Categories\n\n| Category    | File                             | Status      | Storybook                    | Tests                    |\n| ----------- | -------------------------------- | ----------- | ---------------------------- | ------------------------ |\n| Colors      | `src/colors/colors.ts`           | ✅ Complete | ✅ `Colors.stories.tsx`      | ✅ `colors.test.ts`      |\n| Spacing     | `src/spacing/spacing.ts`         | ✅ Complete | ✅ `Spacing.stories.tsx`     | ✅ `spacing.test.ts`     |\n| Typography  | `src/typography/typography.ts`   | ✅ Complete | ✅ `Typography.stories.tsx`  | ✅ `typography.test.ts`  |\n| Scale       | `src/scale/scale.ts`             | ✅ Complete | ✅ Storybook                 | ✅ Storybook             |\n| Shadow      | `src/shadow/shadow.ts`           | ✅ Complete | ✅ Storybook                 | ✅ Storybook             |\n| Z-Index     | `src/zIndex/zIndex.ts`           | ✅ Complete | ✅ Storybook                 | ✅ Storybook             |\n| Breakpoints | `src/breakpoints/breakpoints.ts` | ✅ Complete | ✅ `Breakpoints.stories.tsx` | ✅ `breakpoints.test.ts` |\n| Duration    | `src/duration/duration.ts`       | ✅ Complete | ✅ Storybook                 | ✅ Storybook             |\n| Opacity     | `src/opacity/opacity.ts`         | ✅ Complete | ✅ Storybook                 | ✅ Storybook             |\n\n### Downstream usage\n\nThis package is **complete**. Tokens flow into:\n\n- `@axiora-ui/ui-themes` — semantic color/radius mapping and CSS variable injection\n- `@axiora-ui/ui-core` — spacing, typography, and fallback values in `themeVars.ts`\n\nNo further token work is required for the current component set.\n\n---\n","readmeFilename":"README.md"}