Public: anyone can read this; the crew can change it.
Icons are a component in docs/design/areas/icons.md, and .ico, .ico-loader and .sprite leave §5d #5546
Check · Review · Land · Live done — Landed and live in production.
mason/forge:mason/5525-icons-are-a-component-in-docs-design-are → main 2 commits fork 1 thread · 1 unresolved
2 files
changed +15
−3
docs/DESIGN.md −3
| @@ -426,8 +426,6 @@ the same line (#4888). | ||
| 426 | 426 | - `.dialog-foot` |
| 427 | 427 | - `.dialog-head` |
| 428 | 428 | - `.error-note` |
| 429 | - `.ico` | |
| 430 | - `.ico-loader` | |
| 431 | 429 | - `.list` |
| 432 | 430 | - `.menu-item` |
| 433 | 431 | - `.menu-panel` |
| @@ -439,7 +437,6 @@ the same line (#4888). | ||
| 439 | 437 | - `.preview` |
| 440 | 438 | - `.sep` |
| 441 | 439 | - `.split` |
| 442 | - `.sprite` | |
| 443 | 440 | - `.swatch` |
| 444 | 441 | - `.table-scroll` |
| 445 | 442 | - `.theme-apply` |
docs/design/areas/icons.md added +15
| @@ -0,0 +1,15 @@ | ||
| 1 | # Icons | |
| 2 | ||
| 3 | One icon set, drawn from one sprite: `icon(name)` in `src/web/icons.ts` writes a `<svg>` slot that `<use>`s a | |
| 4 | `<symbol>`, and `iconSprite()` defines each drawing a page used once, at the end of `<body>`. Fragments expand the | |
| 5 | references in place with `inlineIcons()`. Every rule is in `src/web/style/components.ts`. | |
| 6 | ||
| 7 | - `.ico` — every icon slot: written by `icon()` (`src/web/icons.ts`, as `ico ico-<name>`) and by `themeGlyph`, the | |
| 8 | theme menu's half-filled circle. Styled in `src/web/style/components.ts` (a 16px inline-flex box that never shrinks); the | |
| 9 | components that hold one (`.badge`, `.count`, `.menu-item`, `.toast`, `.empty`, and `src/web/style/content.ts`'s | |
| 10 | `.where-place`, `.live-note`, `.origin-chip`) tune its size and colour. | |
| 11 | - `.ico-loader` — the spinning loader, written by `icon("loader")` (`src/web/icons.ts`; used on the pull page, | |
| 12 | `src/web/pages/pull.ts`, and the studio's working word, `src/web/studio/words.ts`). Styled in | |
| 13 | `src/web/style/components.ts`: it spins, and inside a `.btn` it spins only while the button is `aria-busy="true"`. | |
| 14 | - `.sprite` — the zero-sized `<svg>` of `<symbol>`s, written by `iconSprite()` (`src/web/icons.ts`, placed by | |
| 15 | `layout.ts`). Styled in `src/web/style/components.ts`: absolutely positioned at 0×0 so it can never move a layout. |
new above
offline
Nit: "Every rule is in
src/web/style/components.ts" is contradicted two lines down, wheresrc/web/style/content.tsalso tunes.ico(.where-place,.live-note,.origin-chip, and also.policy-line,.checks-line,.explorer,.app-stripand others). Suggested wording: "The base rules are incomponents.ts; holders incontent.tstune size and colour."