pastilhasandClaude Opus 5
905e2e3325
Fonts and Font Sizes are the same four things, so they now read in the same order under the same names — Menu, Titles, Headings, Body — from one list. font_display is the largest statements and font_title is a section heading, which is the reverse of what the words suggest. The labels say what the reader sees. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
22 lines
1.0 KiB
TypeScript
22 lines
1.0 KiB
TypeScript
/**
|
|
* The four type roles, named and ordered once.
|
|
*
|
|
* ── One list, two sections ──
|
|
*
|
|
* Fonts picks the FACE for a role and Font Sizes picks its SIZE. They are the same four things, so a
|
|
* reader moving between the two sections is entitled to find them in the same order under the same
|
|
* names — and that only holds if there is one list.
|
|
*
|
|
* ── The names are the site's, not the stylesheet's ──
|
|
*
|
|
* `font_display` is the largest statements and `font_title` is a section heading, which is the reverse
|
|
* of what those two words suggest. So the labels say Titles and Headings, in the order somebody reads
|
|
* a page: the menu above it, the title, the headings under that, the words.
|
|
*/
|
|
export const ROLES = [
|
|
{ size: 'sub' as const, font: 'font_sub' as const, label: 'Menu' },
|
|
{ size: 'display' as const, font: 'font_display' as const, label: 'Titles' },
|
|
{ size: 'title' as const, font: 'font_title' as const, label: 'Headings' },
|
|
{ size: 'body' as const, font: 'font_body' as const, label: 'Body' },
|
|
];
|