# Token

Every token except colors, grouped by what it sets. Colors have their own page, [Colors](https://werewolf-ui.vercel.app/vi/docs/foundations/colors.md). A value shows for light mode only where it differs from dark.

## Spacing

| Token | Value | Light |
| --- | --- | --- |
| `spacing-xs` | `4px` |  |
| `spacing-sm` | `8px` |  |
| `spacing-md` | `12px` |  |
| `spacing-lg` | `16px` |  |
| `spacing-xl` | `24px` |  |
| `spacing-2xl` | `32px` |  |
| `spacing-3xl` | `48px` |  |
| `spacing-4xl` | `64px` |  |

## Size

| Token | Value | Light |
| --- | --- | --- |
| `size-element-sm` | `28px` |  |
| `size-element-md` | `32px` |  |
| `size-element-lg` | `36px` |  |
| `size-element-xl` | `44px` |  |
| `size-target-min` | `24px` |  |

## Radius

| Token | Value | Light |
| --- | --- | --- |
| `radius-none` | `0px` |  |
| `radius-inner` | `4px` |  |
| `radius-item` | `7px` |  |
| `radius-element` | `8px` |  |
| `radius-container` | `12px` |  |
| `radius-page` | `16px` |  |
| `radius-full` | `9999px` |  |

## Border and focus ring

| Token | Value | Light |
| --- | --- | --- |
| `color-focus-ring` | `#f5f5f5` | `#111111` |
| `border-width` | `1px` |  |
| `outline-width-focus-ring` | `2px` |  |
| `outline-offset-focus-ring` | `2px` |  |

## Typography

| Token | Value | Light |
| --- | --- | --- |
| `font-family-sans` | `Geist, ui-sans-serif, system-ui, sans-serif` |  |
| `font-family-mono` | `'JetBrains Mono', ui-monospace, monospace` |  |
| `font-size-xs` | `12px` |  |
| `font-size-sm` | `13px` |  |
| `font-size-md` | `14px` |  |
| `font-size-lg` | `16px` |  |
| `font-size-xl` | `18px` |  |
| `font-size-input` | `14px` |  |
| `font-weight-regular` | `400` |  |
| `font-weight-medium` | `500` |  |
| `font-weight-semibold` | `600` |  |
| `heading-1-size` | `32px` |  |
| `heading-1-weight` | `500` |  |
| `heading-1-leading` | `1.2` |  |
| `heading-2-size` | `24px` |  |
| `heading-2-weight` | `500` |  |
| `heading-2-leading` | `1.25` |  |
| `heading-3-size` | `18px` |  |
| `heading-3-weight` | `500` |  |
| `heading-3-leading` | `1.3` |  |
| `body-size` | `14px` |  |
| `body-weight` | `400` |  |
| `body-leading` | `1.5` |  |

## Motion

| Token | Value | Light |
| --- | --- | --- |
| `duration-fast` | `160ms` |  |
| `duration-medium` | `250ms` |  |
| `duration-slow` | `400ms` |  |
| `duration-loop` | `2000ms` |  |
| `ease-standard` | `cubic-bezier(0.2, 0, 0, 1)` |  |
| `ease-enter` | `cubic-bezier(0.05, 0.7, 0.1, 1)` |  |
| `ease-exit` | `cubic-bezier(0.3, 0, 0.8, 0.15)` |  |
| `scale-pressed` | `0.96` |  |

## Shadow

| Token | Value | Light |
| --- | --- | --- |
| `shadow-low` | `0px 1px 3px 0px #00000066, inset 0px 1px 0px 0px #ffffff1a` | `0px 1px 2px 0px #0000001f` |
| `shadow-med` | `0px 4px 16px 0px #00000080, inset 0px 1px 0px 0px #ffffff1a` | `0px 4px 12px 0px #00000029` |
| `shadow-high` | `0px 16px 40px 0px #00000099, inset 0px 1px 0px 0px #ffffff1a` | `0px 12px 32px 0px #00000033` |

## Blur and material

| Token | Value | Light |
| --- | --- | --- |
| `color-background-material-thin` | `#111111d9` | `#fafafae6` |
| `color-background-material-thick` | `#181818e6` | `#ffffffd9` |
| `color-background-material-refract` | `#181818e6` | `#ffffffd9` |
| `color-border-material-edge` | `#ffffff1f` | `#ffffff99` |
| `color-overlay-highlight-on-material` | `#ffffff29` | `#ffffffcc` |
| `blur-sm` | `4px` |  |
| `blur-md` | `12px` |  |
| `blur-lg` | `24px` |  |
| `blur-material-thin` | `12px` |  |
| `blur-material-thick` | `20px` |  |
| `blur-material-refract` | `20px` |  |
| `saturate-material-thin` | `1.4` |  |
| `saturate-material-thick` | `1.6` |  |
| `saturate-material-refract` | `1.8` |  |

## Opacity

| Token | Value | Light |
| --- | --- | --- |
| `opacity-disabled` | `0.4` |  |
| `opacity-pending` | `0.6` |  |
| `opacity-subtle` | `0.3` |  |

## Hover, pressed and disabled

| Token | Value | Light |
| --- | --- | --- |
| `color-background-disabled` | `#1e1e1e` | `#ededed` |
| `color-text-disabled` | `#484848` | `#b7b7b7` |
| `color-icon-disabled` | `#484848` | `#b7b7b7` |
| `color-overlay-hover` | `#ffffff0f` | `#0000000a` |
| `color-overlay-pressed` | `#ffffff1a` | `#00000014` |
| `color-overlay-hover-on-accent` | `#00000012` | `#ffffff0d` |
| `color-overlay-pressed-on-accent` | `#00000024` | `#ffffff1a` |
| `color-overlay-hover-on-danger` | `#0000001f` |  |
| `color-overlay-pressed-on-danger` | `#0000003b` |  |
| `color-overlay-hover-on-success` | `#ffffff2b` |  |
| `color-overlay-pressed-on-success` | `#ffffff52` |  |
| `color-overlay-hover-on-warning` | `#00000017` | `#ffffff29` |
| `color-overlay-pressed-on-warning` | `#0000002b` | `#ffffff52` |
| `color-overlay-hover-on-info` | `#0000001f` |  |
| `color-overlay-pressed-on-info` | `#0000003d` |  |