# 形状

> 五种圆角、两种描边宽度，以及为什么圆角容器的边缘上不贴任何东西。

Source: https://raft-design.botiverse.build/zh/foundations/shape. Translated from https://raft-design.botiverse.build/foundations/shape.md; where the two differ, the English page is right.

方形就是 Raft。每个身份都是一张方形贴纸，每个圆点都是一个方形像素；像素是硬的，容器是软的。只有开关和单选框是圆的，它们遵循平台惯例。

## 原则
- **身份和圆点是方的。** 头像、工作空间图块、频道图块、在线状态灯、提醒圆点和像素加载指示器都用方形像素。圆点或环形加载指示器会成为一堆方形像素中唯一的圆形标记；方形像素是品牌自己的形状（[原则](https://raft-design.botiverse.build/zh/principles/principles.md#6-square-is-raft)）。
- **只有开关和单选框是圆的。** 其他任何东西都不用全圆角。
- **两种描边宽度。** 线条用 1px，所有控件、输入框和贴纸用 1.5px。

## 圆角
| Token | 用于 |
| --- | --- |
| `radius-sticker` | 像素家族：头像、工作空间图块、频道图块、复选框、徽标、步骤、骨架屏；正文中的行内标记（行内代码、提及你的地方、搜索命中、引用标签） |
| `radius-chip` | 标签（值标签、输入框里的标签、任务标记、回应）、工具提示、弹出层中高亮的项，以及所有嵌在其他组件外框里的控件（[外框之内](#inside-a-frame)） |
| `radius-control` | 独立存在的控件和选中贴纸：按钮、输入框、下拉选择、筛选、分段控件、选项卡、侧边栏行、导航条项、标签栏的图标贴纸、工作空间按钮 |
| `radius-container` | 容器：卡片、内嵌分组、消息输入框、横幅、菜单、轻提示、个人资料卡、文件卡片 |
| `radius-dialog` | 对话框，以及底部面板的上两个角 |
| `rounded-full` | 仅限开关和单选框 |

- 状态灯和提醒圆点（文字旁 10px，头像角上 6px 到 20px），以及 9px 到 11px 头像里的图片，用 2px 圆角：它们太小，用不了 `radius-sticker`。

## 外框之内
圆角属于元素本身；它周围的留白随所在的外框调整。外框无论装着什么都保持自己的圆角：输入框和消息输入框、卡片、弹出层、工具栏和对话框都不会为了贴合里面的东西而变圆，因为硬朗的边是 Raft 的。

| 元素 | 圆角 | 到外框外边缘的距离 | 两个元素之间 |
| --- | --- | --- | --- |
| 独立存在的 Button | `radius-control` | — | — |
| 嵌在其他组件外框里的控件：输入框的清除、切换和末尾按钮，消息输入框的按钮和发送按钮，浮动工具栏的按钮（消息悬停工具栏、文字选择工具栏、图片查看器的信息栏、多选栏），卡片或媒体的角落操作（代码块的复制、视频、图库图片、文件卡片的下载） | `radius-chip` | 在输入框、消息输入框和角落里为 6px；在浮动工具栏里为 4px | 与到外框的距离相同 |
| 输入框里的标签 | `radius-chip`，它的移除按钮用 `radius-sticker` | 6px；移除按钮在标签内 2px | 6px |
| 弹出层中高亮的项 | `radius-chip` | 4px | 0 |
| 分段控件或切换组的滑块 | `radius-control` | 3px | 3px |

- **同一类东西用同一种形状。** 同一个小按钮，在输入框、消息输入框、卡片角落和工具栏里都用同样的角，也和它旁边的标签用同样的角。如果用 `radius-control`，输入框里一个 20px 的按钮看起来几乎是圆的；用 `radius-chip`，它看起来是硬的。
- **四周留白一致。** 嵌在外框里的控件，到外框上、下、侧边的距离都相同，两个控件之间也隔这么远，所以没有哪道缝比其他的宽。在输入框里，嵌入的控件和标签的高度是输入框高度减去上下两侧的留白：桌面端 20px，手机 32px；放了标签之后，输入框仍保持 32px 或 44px 高。
- **浮动工具栏在按钮周围留 4px**，这样按钮的角能均匀地落在工具栏的角里：留 2px 时，角上的缝比侧边宽。消息悬停工具栏高 36px。
- **离外框近时，内角跟随外框的角。** 弹出层中高亮项在弹出层内 4px，分段控件的滑块在轨道内 3px，都紧贴外框的弧线，所以外框的角要选得让周围的缝保持均匀。再往里，比如输入框内 6px 的标签，元素看起来就是一个独立的对象，直接用自己的圆角。
- **不遮挡内容。** 压在内容上的角落操作，比如代码块没有头部时的复制按钮，要预留出自己那一列：每一行内容都在按钮前停住。
- **标签的移除按钮用 `radius-sticker`**，这是唯一的例外：它是一个更小的目标，位于标签内 2px，离得太近，要跟随标签的角，就像弹出层的高亮跟随弹出层一样。如果用 `radius-chip`，它的角会撞上标签的角。
- 焦点环如果会被宿主裁掉，比如标签的移除按钮上的焦点环，就画在元素内部。

## 描边宽度
| 宽度 | 用于 |
| --- | --- |
| 1px | `line-hairline` 和 `line-seam`：内容内部和区域之间的线 |
| 1.5px | `line-strong`：按钮和其他控件的墨色边框、贴纸的边、带墨色边的标签和选中的行；`line-field`，输入框周围同样的墨色：Input、Textarea、InputGroup、Select、Combobox、ComboboxSelect、搜索框、消息输入框和选项卡片 |

- 输入框的外框按 1.5px 画，和按钮一样。输入框旁边是它的发送按钮、提交按钮和选中的行，都是 1.5px 墨色；用 1px 时，它是其中唯一的细控件，看起来像一种更轻的样式，而不是同一个 Raft。墨色只用一种粗细，才能保持系统硬朗的边。焦点、错误和选中状态叠加在它上面标记输入框。

- 99px 头像上的在线状态灯用 2px 的边，随头像一起放大。
- 引用前面那条 2px 的竖条是一个标记，不是线。
- 3px 到 4px 的进度条本身就是一条线：它没有边框。

## 圆角容器的边缘上不贴任何东西
不要在圆角容器（卡片、文件卡片、输入框、消息输入框或缩略图）的一条边上贴进度条、色带或加粗的强调边框：它和圆角相交的地方会被切成奇怪的形状。

- 把进度放在容器里面，用单独的 4px 轨道：2px 圆角，轨道用 `fill-muted`（在图片上用 `layer-card`），进度用青色。进度是青色，不是粉色：它是被动的指示，而粉色表示待办。
  - 在文件卡片里，把它放在文件名下面，与文字对齐。
  - 在缩略图里，四边各内缩 6px。
- 要强调整个容器，就改变它的填充或边框。不要在一条边上加色带。

## 相关
- [颜色](https://raft-design.botiverse.build/zh/foundations/color.md#lines)：每种线的含义。
- [层级](https://raft-design.botiverse.build/zh/foundations/elevation.md)：阴影和焦点环。
- [反馈](https://raft-design.botiverse.build/zh/patterns/feedback.md)：什么时候显示进度。