Public: anyone can read this; the crew can change it.
Text utilities are named in docs/design/areas/text.md, and .muted, .small, .num, .truncate, .sr-only and .mark leave §5d #5550
Check · Review · Land · Live done — Landed and live in production.
mason/forge:mason/5528-text-utilities-are-named-in-docs-design → main 2 commits fork
2 files
changed +24
−6
docs/DESIGN.md −6
| @@ -400,23 +400,17 @@ the same line (#4888). | ||
| 400 | 400 | - `.grow` |
| 401 | 401 | - `.hide-sm` |
| 402 | 402 | - `.js-only` |
| 403 | - `.mark` | |
| 404 | 403 | - `.mb` |
| 405 | 404 | - `.mt` |
| 406 | - `.muted` | |
| 407 | 405 | - `.narrow` |
| 408 | 406 | - `.narrow-wide` |
| 409 | - `.num` | |
| 410 | 407 | - `.reduced` |
| 411 | 408 | - `.shell` |
| 412 | 409 | - `.skip` |
| 413 | - `.small` | |
| 414 | 410 | - `.spacer` |
| 415 | - `.sr-only` | |
| 416 | 411 | - `.stack` |
| 417 | 412 | - `.stack-tight` |
| 418 | 413 | - `.topbar` |
| 419 | - `.truncate` | |
| 420 | 414 | - `.wordmark` |
| 421 | 415 | |
| 422 | 416 | A `.field` directly inside a `.bar` drops its bottom margin and the bar aligns to the end, so a labelled input and its button share a baseline |
docs/design/areas/text.md added +24
| @@ -0,0 +1,24 @@ | ||
| 1 | # Text utilities | |
| 2 | ||
| 3 | One component: the small text utilities every page puts on a span, a paragraph or a cell to say how its text reads, | |
| 4 | without a page-local class of its own. Each is styled in `style/base.ts`; they compose (`muted small` is the usual | |
| 5 | quiet line under a card), and a page reaches for them instead of setting a colour or a size by hand. | |
| 6 | ||
| 7 | - `.muted` — low-emphasis text in `--muted-fg`: notes, timestamps, the summary of a tucked disclosure. Written by | |
| 8 | `ui.ts` (`envFacts()`, `terminalLine()`, `disclosure()` with `small`) and most pages | |
| 9 | (`pages/commits.ts`, `pages/settings.ts`, `pages/looks.ts`, …); styled in `style/base.ts`, with contextual rules in | |
| 10 | `style/content.ts`. | |
| 11 | - `.small` — 13px text, the step under body. Written by `ui.ts` beside `.muted`, `layout.ts` (the topbar's Asks | |
| 12 | link) and pages such as `pages/edit.ts` and `pages/boards-view.ts`; styled in `style/base.ts`, with contextual rules | |
| 13 | in `style/content.ts`. | |
| 14 | - `.num` — tabular figures so counts line up in a column. Written by `ui.ts` (`stat()`'s value, `counts()`) | |
| 15 | and pages such as `pages/spend.ts`, `pages/repo.ts` and `pages/crew.ts`; styled in `style/base.ts`, right-aligned | |
| 16 | inside `.table` by `style/components.ts`. | |
| 17 | - `.truncate` — one line that ends in an ellipsis rather than wrapping. Written by `ui.ts` (`envFacts()`'s URL) and | |
| 18 | pages such as `pages/apps.ts`, `pages/refs.ts` and `pages/explorer.ts`; styled in `style/base.ts`, capped at 34ch | |
| 19 | inside `.table` by `style/content.ts`. | |
| 20 | - `.sr-only` — text for a screen reader only: a table's caption, a select's label, a fieldset's legend. Written by | |
| 21 | pages such as `pages/audit.ts`, `pages/pull.ts` and `pages/thread.ts`, and by `studio/app.ts` and | |
| 22 | `studio/review_act.ts`; styled in `style/base.ts`. | |
| 23 | - `.mark` — the forge's square glyph beside the wordmark and in the footer. Written by `layout.ts` (the topbar's | |
| 24 | `.wordmark` and the `.foot`) and `pages/board.ts`; styled in `style/base.ts` only inside `.wordmark` and `.foot`. |
new above
offline