# Token

Mọi token trừ màu, nhóm theo việc nó đặt. Màu có trang riêng, [Màu sắc](https://www.werewolf-ui.dev/vi/docs/foundations/colors.md). Giá trị chế độ sáng chỉ hiện khi khác chế độ tối.

## Khoảng cách

| Token | Giá trị | Sáng |
| --- | --- | --- |
| `spacing-2xs` | `2px` |  |
| `spacing-xs` | `4px` |  |
| `spacing-sm` | `8px` |  |
| `spacing-md` | `12px` |  |
| `spacing-lg` | `16px` |  |
| `spacing-xl` | `24px` |  |
| `spacing-2xl` | `32px` |  |
| `spacing-3xl` | `48px` |  |
| `spacing-4xl` | `64px` |  |
| `spacing-5xl` | `96px` |  |
| `spacing-safe-top` | `env(safe-area-inset-top, 0px)` |  |
| `spacing-safe-right` | `env(safe-area-inset-right, 0px)` |  |
| `spacing-safe-bottom` | `env(safe-area-inset-bottom, 0px)` |  |
| `spacing-safe-left` | `env(safe-area-inset-left, 0px)` |  |

## Kích thước

| Token | Giá trị | Sáng |
| --- | --- | --- |
| `size-element-sm` | `28px` |  |
| `size-element-md` | `32px` |  |
| `size-element-lg` | `36px` |  |
| `size-element-xl` | `44px` |  |
| `size-target-min` | `24px` |  |
| `size-panel-sidebar` | `256px` |  |
| `size-panel-popover` | `288px` |  |
| `size-panel-sm` | `320px` |  |
| `size-panel-md` | `384px` |  |
| `size-panel-lg` | `448px` |  |

## Bo góc

| Token | Giá trị | Sáng |
| --- | --- | --- |
| `radius-none` | `0px` |  |
| `radius-inner` | `4px` |  |
| `radius-item` | `7px` |  |
| `radius-element` | `8px` |  |
| `radius-container` | `12px` |  |
| `radius-page` | `16px` |  |
| `radius-full` | `9999px` |  |

## Viền và vòng focus

| Token | Giá trị | Sáng |
| --- | --- | --- |
| `color-focus-ring` | `#f5f5f5` | `#111111` |
| `border-width` | `1px` |  |
| `outline-width-focus-ring` | `2px` |  |
| `outline-offset-focus-ring` | `2px` |  |

## Kiểu chữ

| Token | Giá trị | Sáng |
| --- | --- | --- |
| `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` | `14px` |  |
| `font-size-md` | `16px` |  |
| `font-size-lg` | `18px` |  |
| `font-size-xl` | `20px` |  |
| `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` | `40px` |  |
| `heading-2-size` | `24px` |  |
| `heading-2-weight` | `500` |  |
| `heading-2-leading` | `32px` |  |
| `heading-3-size` | `20px` |  |
| `heading-3-weight` | `500` |  |
| `heading-3-leading` | `28px` |  |
| `body-size` | `14px` |  |
| `body-weight` | `400` |  |
| `body-leading` | `20px` |  |
| `line-height-xs` | `16px` |  |
| `line-height-sm` | `20px` |  |
| `line-height-md` | `24px` |  |
| `line-height-lg` | `28px` |  |
| `line-height-xl` | `28px` |  |
| `line-height-input` | `20px` |  |

## Chuyển động

| Token | Giá trị | Sáng |
| --- | --- | --- |
| `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` |  |

## Bóng đổ

| Token | Giá trị | Sáng |
| --- | --- | --- |
| `shadow-low` | `0px 1px 3px 0px #00000066, inset 0px 1px 0px 0px #ffffff1a` | `0px 1px 2px 0px #0000000f, 0px 1px 3px 0px #0000001a` |
| `shadow-med` | `0px 4px 16px 0px #00000080, inset 0px 1px 0px 0px #ffffff1a` | `0px 2px 4px 0px #0000000f, 0px 8px 16px 0px #0000001a` |
| `shadow-high` | `0px 16px 40px 0px #00000099, inset 0px 1px 0px 0px #ffffff1a` | `0px 4px 8px 0px #00000014, 0px 24px 48px 0px #00000029` |

## Độ mờ và chất liệu

| Token | Giá trị | Sáng |
| --- | --- | --- |
| `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` | `8px` |  |
| `blur-material-thick` | `16px` |  |
| `blur-material-refract` | `20px` |  |
| `saturate-material-thin` | `1.2` |  |
| `saturate-material-thick` | `1.4` |  |
| `saturate-material-refract` | `1.8` |  |

## Độ đục

| Token | Giá trị | Sáng |
| --- | --- | --- |
| `opacity-disabled` | `0.4` |  |
| `opacity-pending` | `0.6` |  |
| `opacity-subtle` | `0.3` |  |

## Z-index

| Token | Giá trị | Sáng |
| --- | --- | --- |
| `z-index-base` | `0` |  |
| `z-index-sticky` | `10` |  |
| `z-index-overlay` | `20` |  |
| `z-index-popover` | `30` |  |
| `z-index-toast` | `40` |  |
| `z-index-tooltip` | `50` |  |

## Hover, pressed và disabled

| Token | Giá trị | Sáng |
| --- | --- | --- |
| `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` | `#ffffff29` |
| `color-overlay-pressed-on-success` | `#ffffff52` | `#ffffff4f` |
| `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` |  |