# @aziontech/theme
Azion's design-token system, compiled into a single **Tailwind CSS v4** stylesheet: primitive palettes, brand colors, light/dark semantic tokens, the full text-style scale, motion utilities and `@keyframes`, and the `@font-face` set — plus the raw token data as importable JavaScript.
The package ships one prebuilt artifact (`dist/v4/globals.css`) and four small JS entry points. There is no Tailwind preset, plugin, or `tailwind.config.js` step — v4 reads the `@theme` / `@utility` definitions directly from the imported CSS.
## Installation
```bash
npm install @aziontech/theme
# or
pnpm add @aziontech/theme
# or
yarn add @aziontech/theme
```
Tailwind CSS v4 must be present in the consuming build — the stylesheet begins with `@import "tailwindcss"`.
## Quick start
### 1. Import the stylesheet
In your app's root CSS:
```css
@import '@aziontech/theme';
```
or from JavaScript (Vite and friends):
```javascript
import '@aziontech/theme'
```
That single import provides:
- the `@font-face` declarations for the Azion type system (no separate font imports needed);
- every primitive CSS variable (colors, spacing, shape, typography, effects, breakpoints);
- the semantic light/dark variables (`--primary`, `--text-default`, `--surface-0`…);
- text-style utilities (`text-heading-2xl`, `text-big-number-md`, …) with responsive sizes;
- animation utilities and their `@keyframes` (consumers pair every motion class with a `motion-reduce:` fallback).
### 2. Switch themes
Light is the default (`:root`). Dark mode activates on any of these hooks:
```html
```
```javascript
// Toggle at runtime
document.documentElement.dataset.theme = 'dark' // or 'light'
```
Light-mode selectors: `:root`, `[data-theme='light']`, `.azion.azion-light`.
Dark-mode selectors: `[data-theme='dark']`, `.dark`, `.azion.azion-dark`.
## Exports
The entire public surface, from `package.json#exports`:
| Path | What it is |
| ------------------------------- | -------------------------------------------------------------------------- |
| `@aziontech/theme` | the compiled stylesheet (`dist/v4/globals.css`) |
| `@aziontech/theme/colors` | color primitives: `primitives`, `brandPrimitives`, `surfacePrimitives` |
| `@aziontech/theme/animations` | motion primitives: `animate`, `curve`, `duration`, `useWhen` |
| `@aziontech/theme/texts` | `textsData` — font-size/line-height/weight bundles per text style |
| `@aziontech/theme/theme-colors` | semantic compiler: `compileThemeVars`, `compileThemeCss`, `injectThemeCss` |
## JavaScript token access
### Color primitives
```javascript
import { primitives, brandPrimitives, surfacePrimitives } from '@aziontech/theme/colors'
primitives.orange[500] // '#F3652B' — primary brand
primitives.blue[500] // '#0072F5' — accent
primitives.violet[500] // '#8A84EC' — brand.accent palette
primitives.gray[900] // '#141414'
brandPrimitives.primary[500] // '#F3652B'
brandPrimitives.absolute.white // '#FFFFFF'
surfacePrimitives.surface[0] // '#FFFFFF'
surfacePrimitives.surface[950] // '#0A0A0A'
```
Available palettes: `base`, `blue`, `gray`, `slate`, `orange`, `violet`, `yellow`, `green`, `red` — plus the `brand`, `surface`, and `alpha` groups.
### Motion primitives
```javascript
import { curve, duration, animate } from '@aziontech/theme/animations'
curve['productive-exit'] // easing cubic-bezier
duration['fast-02'] // ms value
animate.shimmer // keyframe-backed animation definition
```
### Text styles
```javascript
import { textsData } from '@aziontech/theme/texts'
textsData['text-heading-2xl']
// { fontSize: { _: '1.875rem', sm: '3rem', md: '3.5rem' }, lineHeight: 1.25, fontWeight: 400 }
```
Responsive `fontSize` keys (`_`, `sm`, `md`, …) become `@media (min-width: …)` overrides in the compiled utilities.
### Semantic variables as JS (Node / build steps / runtime)
```javascript
import { compileThemeVars, compileThemeCss, injectThemeCss } from '@aziontech/theme/theme-colors'
compileThemeVars()
// → { light: { '--primary': '#F3652B', '--text-default': '#141414', … }, dark: { … } }
compileThemeCss()
// → ':root, [data-theme=light], .azion.azion-light { … }\n\n[data-theme=dark], .dark, … { … }'
injectThemeCss() // appends a