# @unily/resin-tokens

Design tokens for the Unily Resin design system.

## Install

```bash
npm install @unily/resin-tokens
```

## Recommended imports

Import what your app needs through package subpath exports:

```ts
import '@unily/resin-tokens/fonts';
import '@unily/resin-tokens/variables';
```

Common imports:
- `@unily/resin-tokens/variables` - core token CSS variables
- `@unily/resin-tokens/fonts` - Resin font-face definitions
- `@unily/resin-tokens/variables/breakpoints` - SCSS breakpoint variables
- `@unily/resin-tokens/utilities/overrides/elevation` - elevation preset override manifest
- `@unily/resin-tokens/utilities/overrides/radius` - radius preset override manifest
- `@unily/resin-tokens/utilities/overrides/density` - density preset override manifest
- `@unily/resin-tokens/utilities/overrides/t3-variables` - grouped T3 override manifest
- `@unily/resin-tokens/utilities/overrides/types` - shared TS declaration types

## Quick start

Load token styles once near your app entry point:

```tsx
import '@unily/resin-tokens/fonts';
import '@unily/resin-tokens/variables';
```

Use tokens in your styles:

```css
.card {
  color: var(--rds-t3-type-body-default-color);
  background: var(--rds-t3-surface-primary);
  padding: var(--rds-t3-spacing-base-16);
  border-radius: var(--rds-t3-border-interactive-radius);
}
```

## Token usage guidance

- Prefer semantic tokens (especially `--rds-t3-*`) in product code.
- Avoid hardcoded color, spacing, typography, and radius values.
- Use exported token variables directly from CSS Modules, SCSS, or global CSS.

## With other Resin packages

`@unily/resin-components` and `@unily/resin-icons` expect Resin tokens to be available in the application. Import token styles before rendering Resin UI components.