> ## Documentation Index
> Fetch the complete documentation index at: https://dtexplorer.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Token Previews

> Visual preview renderers for every token type — colors, spacing, typography, shadows, easing curves, and more.

Design Tokens Explorer renders a visual preview next to every token value in the sidebar. Previews are controlled by the `type` field of each group in your source configuration.

## How previews work

When a token is loaded, it is assigned to a group based on name prefix. The group's `type` determines which renderer is used. All rendering happens inline in the sidebar — no external services are called and no images are fetched.

All CSS values are sanitized before rendering to prevent injection.

## Preview types

### Color

**Group type:** `color`

Renders a filled square swatch using the token value as a CSS `background-color`. Accepts any valid CSS color: hex, rgb, hsl, named colors, `oklch`, `color()`, and CSS variables.

```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{ "name": "color", "type": "color" }
```

Token examples: `--color-primary: #7C3AED`, `--color-surface: hsl(0 0% 98%)`

***

### Size / Spacing

**Group type:** `size`

Renders a horizontal bar whose width is proportional to the token value. Values in `rem` are converted to `px` using `rootFontSize` before rendering, so the bar accurately reflects physical screen size.

```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{ "name": "space", "type": "size" }
```

Token examples: `--space-4: 1rem`, `--space-8: 2rem`, `--gap-sm: 8px`

***

### Border Radius

**Group type:** `radius`

Renders a small square with the token value applied as `border-radius`. Shows the visual rounding effect for `px`, `rem`, `%`, and other valid radius values.

```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{ "name": "radius", "type": "radius" }
```

Token examples: `--radius-sm: 0.25rem`, `--radius-full: 9999px`, `--radius-pill: 50%`

***

### Font Size

**Group type:** `font-size`

Renders a short text sample scaled to the token value. Values larger than a threshold are capped to prevent layout overflow in the sidebar.

```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{ "name": "font-size", "type": "font-size" }
```

Token examples: `--font-size-sm: 0.875rem`, `--font-size-xl: 1.25rem`, `--font-size-4xl: 2.25rem`

***

### Font Weight

**Group type:** `font-weight`

Renders a text sample at the token weight, helping you distinguish numerical weights like `400`, `500`, `600`, `700`, or `900` and named values like `bold`, `light`.

```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{ "name": "font-weight", "type": "font-weight" }
```

Token examples: `--font-weight-normal: 400`, `--font-weight-semibold: 600`, `--font-weight-bold: 700`

***

### Line Height

**Group type:** `line-height`

Renders two lines of sample text with the token value as `line-height`. Unitless multipliers (`1.5`), `px`, `rem`, and `%` values are all rendered correctly.

```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{ "name": "leading", "type": "line-height" }
```

Token examples: `--leading-tight: 1.25`, `--leading-normal: 1.5`, `--leading-relaxed: 1.75`

***

### Shadow

**Group type:** `shadow`

Renders a small element with `box-shadow` applied, showing the blur, spread, color, and offset visually.

```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{ "name": "shadow", "type": "shadow" }
```

Token examples: `--shadow-sm: 0 1px 2px rgba(0,0,0,0.05)`, `--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1)`

***

### Easing

**Group type:** `easing`

Renders an SVG cubic-bezier curve that visualizes the easing function. The curve is drawn from the control points extracted from the `cubic-bezier(x1, y1, x2, y2)` value.

```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{ "name": "easing", "type": "easing" }
```

Token examples: `--easing-ease-in: cubic-bezier(0.4, 0, 1, 1)`, `--easing-ease-out: cubic-bezier(0, 0, 0.2, 1)`, `--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)`

<Note>
  Only `cubic-bezier(...)` values produce a curve. Other values like `ease`, `linear`, or `steps()` display as plain
  text.
</Note>

***

### Time / Duration

**Group type:** `time`

Displays the duration value as plain text. No graphical preview — this keeps the value visible for tokens like `--duration-fast: 150ms`.

```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{ "name": "duration", "type": "time" }
```

Token examples: `--duration-fast: 100ms`, `--duration-base: 200ms`, `--duration-slow: 0.5s`

***

### Filter

**Group type:** `filter`

Reserved for CSS filter values. Currently displays no preview — the raw value is shown as text.

```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{ "name": "filter", "type": "filter" }
```

Token examples: `--filter-blur-sm: blur(4px)`, `--filter-brightness-muted: brightness(0.9)`

***

## Configuring rem conversion

The `size`, `radius`, and `font-size` renderers convert `rem` values to pixels using `designTokensExplorer.rootFontSize`. The default is `16`, matching the browser default.

If your project uses a different base (e.g. `10px` with `html { font-size: 62.5% }`), update the setting:

```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
"designTokensExplorer.rootFontSize": 10
```