# 间距、圆角与阴影

做界面就像搭积木，间距、圆角和阴影是保证整个网页视觉呼吸感和层次感的“度量衡”。astryx-vue 将这些基础尺度做成了规整的标尺，让不同组件拼在一起时浑然一体。

## 间距标尺（Spacing）

间距变量从 `--astryx-spacing-0` 到 `--astryx-spacing-12`：
- **单位是 rem：** 例如 `--astryx-spacing-2` 是 `0.5rem`，`--astryx-spacing-4` 是 `1rem`。rem 的意思是「根字号的几倍」。
- **默认看起来和以前一样：** 浏览器默认根字号是 16px，这时每一档都是 4px 乘档位，比如 spacing-1 是 4px，spacing-2 是 8px，spacing-4 是 16px。
- **会跟着字号一起变大：** 读者在浏览器里把默认字号调大，或者页面写了 `html { font-size }`，组件之间的间距和内边距会按同样的比例放大。比如根字号改成 20px，`--astryx-spacing-4` 就从 16px 变成 20px，文字变大以后不会挤在一起。
- **微调档：** 为了照顾紧凑布局中的微小缝隙，特别补充了 `0.5`（默认 2px）和 `1.5`（默认 6px）两个中间档位。

以前这组变量写死成 px。默认根字号下外观没有变化。自定义主题如果自己用 px 写间距，那几档仍然固定不变；想让它们跟随根字号，就改写成 rem。

## 交互控件高度（Size）

常用的表单输入框、按钮等可点击交互控件，统一划分为三个标准高度尺寸（这几档仍是 px）：
- **小尺寸（sm）：** `--astryx-size-element-sm` 为 `28px`，适合紧凑工具栏或密集数据表格。
- **中尺寸（md）：** `--astryx-size-element-md` 为 `32px`，绝大多数页面的默认尺寸。
- **大尺寸（lg）：** `--astryx-size-element-lg` 为 `36px`，适合宽敞表单或重要操作界面。

## 圆角系统（Radius）

圆角范围从纯直角 `--astryx-radius-none` 一路延伸到胶囊全圆角 `--astryx-radius-full`：
- **纯直角（none）：** 在本库中保持严格的 `0px`（不采用原版 Neutral 将其设为 4px 的做法），用于方形头像或纯矩形结构。
- **容器与卡片圆角：** 包含针对元素与容器的一组平滑梯度。
- **聊天对话泡专属圆角：** `--astryx-radius-chat` 为 `28px`（在默认 16px 根字号下相当于 `1.75rem`），专门用来呈现饱满圆润的现代 AI 对话气泡。

## 阴影与景深（Shadow）

阴影用来在平面屏幕上建立上下层级的纵深感：
- **外阴影（Drop Shadow）：** 包含 `low`（低投影，微弱浮起）、`med`（中投影，常用卡片与下拉菜单）、`high`（高投影，模态弹窗与大浮层）三档。针对深色和浅色模式，外阴影的透明度与弥散范围做了精细适配，深色模式下不会显得突兀发灰。
- **内阴影（Inner Shadow）：** 包含悬停（hover）、选中（active/selected）、成功（success）、警告（warning）和错误（danger）五种内凹或状态投影。

## 键盘焦点环（Focus Outline）

为了保证良好的无障碍键盘导航体验，系统通过四个变量规范了组件被 Tab 键聚焦时的视觉光环：
- `--astryx-focus-outline-width`：描边宽度。
- `--astryx-focus-outline-style`：描边线型（通常为实线 solid）。
- `--astryx-focus-outline-color`：颜色跟随强调色 `--astryx-color-accent`，明亮显眼。
- `--astryx-focus-outline-offset`：焦点环距离控件边缘的外扩间隙，保证描边不紧贴文字或边框。

## 标尺尺寸与视觉参考

### spacing

| Token | Value |
| --- | --- |
| `--astryx-spacing-0` | 0rem |
| `--astryx-spacing-0-5` | 0.125rem |
| `--astryx-spacing-1` | 0.25rem |
| `--astryx-spacing-1-5` | 0.375rem |
| `--astryx-spacing-2` | 0.5rem |
| `--astryx-spacing-3` | 0.75rem |
| `--astryx-spacing-4` | 1rem |
| `--astryx-spacing-5` | 1.25rem |
| `--astryx-spacing-6` | 1.5rem |
| `--astryx-spacing-7` | 1.75rem |
| `--astryx-spacing-8` | 2rem |
| `--astryx-spacing-9` | 2.25rem |
| `--astryx-spacing-10` | 2.5rem |
| `--astryx-spacing-11` | 2.75rem |
| `--astryx-spacing-12` | 3rem |

### size

| Token | Value |
| --- | --- |
| `--astryx-size-element-sm` | 28px |
| `--astryx-size-element-md` | 32px |
| `--astryx-size-element-lg` | 36px |

### border

| Token | Value |
| --- | --- |
| `--astryx-border-width` | 1px |

### focus

| Token | Value |
| --- | --- |
| `--astryx-focus-outline-width` | 2px |
| `--astryx-focus-outline-style` | solid |
| `--astryx-focus-outline-color` | var(--astryx-color-accent) |
| `--astryx-focus-outline-offset` | 3px |

### radius

| Token | Value |
| --- | --- |
| `--astryx-radius-none` | 0px |
| `--astryx-radius-inner` | 0.375rem |
| `--astryx-radius-element` | 0.625rem |
| `--astryx-radius-container` | 0.75rem |
| `--astryx-radius-page` | 1.75rem |
| `--astryx-radius-chat` | 28px |
| `--astryx-radius-full` | 9999px |

### shadow

| Token | Value |
| --- | --- |
| `--astryx-shadow-low` | 0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 25%)), 0 4px 8px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 40%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 8%)) |
| `--astryx-shadow-med` | 0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 35%)), 0 4px 12px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 50%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 12%)) |
| `--astryx-shadow-high` | 0 4px 6px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 50%)), 0 12px 24px light-dark(oklch(0 0 0 / 15%), oklch(0 0 0 / 70%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 15%)) |
| `--astryx-shadow-inset-hover` | inset 0px 0px 0px 2px #0074e24d |
| `--astryx-shadow-inset-selected` | inset 0px 0px 0px 2px #0074e280 |
| `--astryx-shadow-inset-success` | inset 0px 0px 0px 2px #2f7d334d |
| `--astryx-shadow-inset-warning` | inset 0px 0px 0px 2px #f8d36a4d |
| `--astryx-shadow-inset-error` | inset 0px 0px 0px 2px #de47454d |