展示
Text 文本
这套系统的段落，落在墨色阶的第二级。
用法
什么时候用它
import { Text } from '@misoto22/design'说明
一个段落，或者一段想要这套系统的声音的文字。
它是 Article 和裸 JSX 之间的那一档。Article 用元素选择器给一整列正文上样式，一篇文章用它是对的；这个是给不在那一列里的单独一段用的——卡片的描述、对话框的说明、空状态底下那一行字。
默认的 tone 是 body（--ink-2），不是 --ink。一个所有段落都用满墨的页面，把阶梯最顶上那一级花在了正文上，留给标题的就什么都没有了——这是单色页面丢掉层级最常见的一种死法。
结构
| 部件 | 说明 |
|---|---|
| Box必填 | The element `as` names — a <p> unless told otherwise. It carries the size, the tone and margin: 0, so the spacing between blocks belongs to the surface rather than to the paragraph. |
| Type step必填 | size, one of four: xs, sm, base and lead. lead is --fs-item, the bottom rung of the heading ladder, and is the standfirst that carries a piece. |
| Ink step必填 | tone, one of three, because the ink ladder has three rungs: body is --ink-2, strong is --ink, muted is --ink-3-aa. |
实践建议
推荐
- Leave tone alone for body copy. The default is --ink-2 on purpose: a page whose paragraphs are all full-strength ink has spent the top of the ladder on its body text and has nothing left for the headings.
- Use as="span" for a run inside a sentence. A <p> nested inside a <p> is not nesting — the HTML parser closes the outer one and you get two paragraphs and a broken layout.
- Reach for size="lead" for the standfirst under a title, and stop there. It is --fs-item, the same step an in-card title uses; anything larger is a heading that has not admitted it.
避免
- Do not set spacing on it. Every Text is margin: 0, so a stack of them inside a plain <div> has no rhythm by design — put them in an Article or give the container the gap, or every surface ends up with its own idea of what a paragraph gap is.
- tone="muted" is --ink-3-aa, never --ink-3. The two look identical on paper and are not the same token: --ink-3 is a translucent tint that takes on whatever is under it, so it clears AA on the page ground and quietly fails on a card or a code plate.
- Do not use it as a heading with a bigger size. The element is what a screen reader navigates by, and a <p> at --fs-item is invisible to a heading list.
示例
sizes and tones
Four steps of type against three rungs of ink. The default is base on body, which is --ink-2 rather than --ink on purpose: a page whose paragraphs are all full-strength ink has spent the top of the ladder on its body copy and has nothing left for the headings. Every Text has margin: 0, so the gap between these comes from the container, not from the paragraph.
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 changes the element and nothing else. Inside a sentence that has to be span: a p nested in a p is not nesting — the HTML parser closes the outer one and leaves two paragraphs and a broken layout. Inside a list someone else opened it is li, so the markup says what the content is while the type stays exactly where the size and tone put it.
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
The one place lead belongs: the standfirst that carries a piece, directly under its title. It is --fs-item, the bottom rung of the heading ladder, and the ladder is where it stops — a paragraph larger than a record title is a heading that has not admitted it, and a p at that size is invisible to the heading list a screen reader navigates by. The gaps here come from the column, because every Text is 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。