# fluid-tokens 💧

> Fluid typography and spacing for the modern web. Linear interpolation made easy.

Stop using breakpoints for font-size. Start using math.

## Features

- **Linear Interpolation**: Smoothly scales between min and max viewport sizes.
- **Accessibility First**: Defaults to `rem` units.
- **Scale Generator**: Create modular scales (Major Third, Perfect Fourth, etc.) that fluidly adapt.
- **CSS Generator**: Export directly to CSS variables.
- **TypeScript Generator**: Export type-safe token objects and definitions.

## Usage

### Basic `clamp()`

```typescript
import { fluid } from 'fluid-tokens';

// "I want 16px at 320px view, and 24px at 1200px view"
const fontSize = fluid({
  minSize: 16,
  maxSize: 24,
  minView: 320,  // optional, default
  maxView: 1200  // optional, default
});

// Output: clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem)
```

### Fluid Modular Scales

Why settle for one size when you can have a whole harmony?

```typescript
import { generateFluidScale, toCssVariables } from 'fluid-tokens';

const typeScale = generateFluidScale({
  baseMin: 16,
  baseMax: 18,
  ratioMin: 1.2,  // Minor Third on mobile
  ratioMax: 1.25, // Major Third on desktop
  steps: [-1, 0, 1, 2, 3, 4]
});

const css = toCssVariables(typeScale, 'font');
console.log(css);
```

**Output:**

```css
:root {
  --font-down-1: clamp(0.8333rem, ...);
  --font-base: clamp(1rem, ...);
  --font-up-1: clamp(1.2rem, ...);
  --font-up-2: clamp(1.44rem, ...);
  ...
}
```

### Type-Safe Tokens 🛡️

Don't use magic strings. Generate TypeScript definitions from your tokens.

```typescript
import { toTypeScript } from 'fluid-tokens';

const ts = toTypeScript(typeScale, 'FontSize');
console.log(ts);
```

**Output:**

```typescript
export const FontSize = {
  Down1: "var(--font-down-1)",
  Base: "var(--font-base)",
  Up1: "var(--font-up-1)",
  // ...
} as const;

export type FontSize = typeof FontSize[keyof typeof FontSize];
```

Now you can use `FontSize.Base` in your CSS-in-JS or style objects, and it's fully typed.

## Philosophy

Design isn't static. Your tokens shouldn't be either.