展示
Text - 文本
这套系统的段落，落在墨色阶的第二级。
用法
什么时候用它
import { Text } from '@misoto22/folio'说明
一个段落，或者一段想要这套系统的声音的文字。
它是 Article 和裸 JSX 之间的那一档。Article 用元素选择器给一整列正文上样式，一篇文章用它是对的；这个是给不在那一列里的单独一段用的——卡片的描述、对话框的说明、空状态底下那一行字。
默认的 tone 是 body（--ink-2），不是 --ink。一个所有段落都用满墨的页面，把阶梯最顶上那一级花在了正文上，留给标题的就什么都没有了——这是单色页面丢掉层级最常见的一种死法。
结构
| 部件 | 说明 |
|---|---|
| 盒子必填 | as 点名的那个元素——不另说就是 <p>。size、tone 和 margin: 0 都长在它身上，所以块与块之间的间距归容器管，不归段落管。 |
| 字号档必填 | size，四档之一：xs、sm、base 和 lead。lead 就是 --fs-item，标题阶梯最下面的一级，也是撑起一篇文章的那句导语。 |
| 墨色档必填 | tone，三档之一，因为墨色阶梯就是三级：body 是 --ink-2，strong 是 --ink，muted 是 --ink-3-aa。 |
实践建议
推荐
- 正文就别动 tone。默认是 --ink-2，这是故意的：一个段落全用满墨的页面，把阶梯最上面那一级花在了正文上，留给标题的什么都不剩。
- 句子中间的一小段用 as="span"。<p> 套 <p> 不是嵌套——HTML 解析器会把外面那个关掉，你拿到的是两个段落和一份坏掉的排版。
- 标题下面那句导语用 size="lead"，到此为止。它是 --fs-item，和卡片内标题用的是同一档；再大就是一个还没承认自己是标题的标题。
避免
- 别在它身上设间距。每一个 Text 都是 margin: 0，所以在一个普通 <div> 里堆起来的一摞本来就没有节奏——把它们放进 Article，或者把间距交给容器，否则每一个页面都会长出自己对“段落间距是多少”的理解。
- tone="muted" 是 --ink-3-aa，绝不是 --ink-3。这两个在纸色上看起来一模一样，却不是同一个 token：--ink-3 是半透明的色调，底下是什么它就吃什么，所以它在页面底色上过得了 AA，在卡片或者代码板上就悄悄不及格。
- 别把它调大一号当标题用。读屏软件是靠元素来导航的，而一个 --fs-item 的 <p>，在标题列表里是看不见的。
示例
sizes and tones
四档字号，对着三级墨色。默认是 base 配 body，而后者刻意是 --ink-2 而不是 --ink：一张段落全是满强度墨色的页面，等于把这把梯子的顶端花在了正文上，给标题就什么都不剩了。每一个 Text 都是 margin: 0，所以这几段之间的间距来自容器，而不是段落。
A monochrome system for software and writing.
Body copy at the base step, on the second rung of the ink ladder. Use strong for a run that has to carry, and nothing above lead.
Updated just now — the muted rung is --ink-3-aa, which clears AA on any ground in the system.
a run inside a sentence
as 只换元素，别的什么都不换。放进一句话里，它必须是 span：p 套 p 不是嵌套——HTML 解析器会把外面那个关掉，留给你两个段落和一个坏掉的布局。放进别人开好的列表里，它就是 li，于是标记说明内容是什么，而字型停在 size 和 tone 放它的地方，一动不动。
The release went out at 09:14. Twelve deploys since the rewrite, and no rollbacks.
- Tokens rebuilt from the CSS source
- Every example carries the sentence that explains it
- Chinese copy still owed for the newest five
a standfirst under a title
lead 唯一该待的地方：一篇文章的导语，就在它标题的正下方。它是 --fs-item，标题梯子最下面那一档，而这把梯子也就到此为止——一个比记录标题还大的段落，是一个没有承认自己是标题的标题，而那个尺寸的 p，对读屏软件用来导航的标题列表来说是隐形的。这里的间距来自那一列，因为每一个 Text 都是 margin: 0。
The White Reset
A monochrome system for software and writing, published as one package and one stylesheet.
Structure is carried by weight, rules and space rather than by colour, which leaves the two status hues free to mean something when they appear.
Updated this morning
类型
export type TextSize = 'xs' | 'sm' | 'base' | 'lead'
export type TextTone = 'body' | 'strong' | 'muted'
export type TextElement = 'p' | 'span' | 'div' | 'li' | 'figcaption'无障碍
- as 只换元素，别的什么都不换，所以标记可以照实说这段内容是什么，而外观不会在底下跟着变。
- 每一种 tone 都是过得了 AA 的一级；muted 那一档是 --ink-3-aa，不是半透明的 --ink-3。