diff --git a/openlibrary/i18n/messages.pot b/openlibrary/i18n/messages.pot index 5c015619729..8f6c153b838 100644 --- a/openlibrary/i18n/messages.pot +++ b/openlibrary/i18n/messages.pot @@ -261,6 +261,22 @@ msgstr "" msgid "Web Component Library" msgstr "" +#: design.html +msgid "Tokens" +msgstr "" + +#: design.html +msgid "Font Sizes" +msgstr "" + +#: design.html +msgid "Font Weights" +msgstr "" + +#: design.html +msgid "Components" +msgstr "" + #: OlPagination.html OlPaginationArrows.html design.html type/edition/view.html #: type/work/view.html msgid "Pagination" @@ -286,6 +302,126 @@ msgstr "" msgid "Markdown Editor" msgstr "" +#: design.html +msgid "" +"A 9-step t-shirt scale plus semantic tokens. Use semantic tokens in new " +"code; primitives are escape hatches. Pick heading tokens by visual " +"weight, not HTML element — \"--font-size-heading-md\" is a visual style, " +"independent of

/

/etc." +msgstr "" + +#: design.html +msgid "Primitives" +msgstr "" + +#: design.html +msgid "Raw scale steps. Prefer the semantic tokens below." +msgstr "" + +#: design.html +msgid "The quick brown fox" +msgstr "" + +#: design.html +msgid "Semantic — Headings" +msgstr "" + +#: design.html +msgid "" +"Visual heading hierarchy. Decoupled from HTML element: pick the heading " +"level based on document outline, pick the token based on visual weight." +msgstr "" + +#: design.html +msgid "Card titles, tiny section labels" +msgstr "" + +#: design.html +msgid "Small section headings" +msgstr "" + +#: design.html +msgid "Section headings" +msgstr "" + +#: design.html +msgid "Page section headers" +msgstr "" + +#: design.html +msgid "Large page headings" +msgstr "" + +#: design.html +msgid "Hero / banner" +msgstr "" + +#: design.html +msgid "Semantic — Body" +msgstr "" + +#: design.html +msgid "Paragraph text and prose." +msgstr "" + +#: design.html +msgid "Small print, footnotes" +msgstr "" + +#: design.html +msgid "Default paragraph text" +msgstr "" + +#: design.html +msgid "Lead paragraph, prominent body" +msgstr "" + +#: design.html +msgid "Semantic — UI" +msgstr "" + +#: design.html +msgid "Controls, labels, and metadata." +msgstr "" + +#: design.html +msgid "Bylines, counts, timestamps" +msgstr "" + +#: design.html +msgid "Pills, tags, badges" +msgstr "" + +#: design.html +msgid "Form labels" +msgstr "" + +#: design.html +msgid "Buttons, CTAs" +msgstr "" + +#: design.html +msgid "" +"Four primitive weights plus semantic tokens for body, headings, emphasis," +" and buttons." +msgstr "" + +#: design.html +msgid "Semantic" +msgstr "" + +#: design.html +msgid "Paragraphs, default text" +msgstr "" + +#: design.html +msgid "Inline emphasis" +msgstr "" + +#: design.html +msgid "Headings" +msgstr "" + #: design.html msgid "" "The ol-pagination component provides support for both event-based and " diff --git a/openlibrary/templates/design.html b/openlibrary/templates/design.html index 495f7c202c9..8be1974f377 100644 --- a/openlibrary/templates/design.html +++ b/openlibrary/templates/design.html @@ -11,6 +11,12 @@

$_("Web Component Library")

+
+

$_("Font Sizes")

+

$_("A 9-step t-shirt scale plus semantic tokens. Use semantic tokens in new code; primitives are escape hatches. Pick heading tokens by visual weight, not HTML element — \"--font-size-heading-md\" is a visual style, independent of

/

/etc.")

+ +
+

$_("Primitives")

+

$_("Raw scale steps. Prefer the semantic tokens below.")

+
+
+ --font-size-2xs + 0.6875rem · 11px + $_("The quick brown fox") +
+
+ --font-size-xs + 0.75rem · 12px + $_("The quick brown fox") +
+
+ --font-size-sm + 0.875rem · 14px + $_("The quick brown fox") +
+
+ --font-size-base + 1rem · 16px + $_("The quick brown fox") +
+
+ --font-size-md + 1.125rem · 18px + $_("The quick brown fox") +
+
+ --font-size-lg + 1.5rem · 24px + $_("The quick brown fox") +
+
+ --font-size-xl + 1.75rem · 28px + $_("The quick brown fox") +
+
+ --font-size-2xl + 2rem · 32px + $_("The quick brown fox") +
+
+ --font-size-3xl + 2.25rem · 36px + $_("The quick brown fox") +
+
+
+ +
+

$_("Semantic — Headings")

+

$_("Visual heading hierarchy. Decoupled from HTML element: pick the heading level based on document outline, pick the token based on visual weight.")

+
+
+ --font-size-heading-xs + 14px + $_("Card titles, tiny section labels") +
+
+ --font-size-heading-sm + 18px + $_("Small section headings") +
+
+ --font-size-heading-md + 24px + $_("Section headings") +
+
+ --font-size-heading-lg + 28px + $_("Page section headers") +
+
+ --font-size-heading-xl + 32px + $_("Large page headings") +
+
+ --font-size-heading-xxl + 36px + $_("Hero / banner") +
+
+
+ +
+

$_("Semantic — Body")

+

$_("Paragraph text and prose.")

+
+
+ --font-size-body-small + 12px + $_("Small print, footnotes") +
+
+ --font-size-body + 14px + $_("Default paragraph text") +
+
+ --font-size-body-large + 16px + $_("Lead paragraph, prominent body") +
+
+
+ +
+

$_("Semantic — UI")

+

$_("Controls, labels, and metadata.")

+
+
+ --font-size-meta + 12px + $_("Bylines, counts, timestamps") +
+
+ --font-size-chip + 12px + $_("Pills, tags, badges") +
+
+ --font-size-label + 14px + $_("Form labels") +
+
+ --font-size-button + 14px + $_("Buttons, CTAs") +
+
+ --font-size-code + 14px + const fox = "quick"; +
+
+
+

+ +
+

$_("Font Weights")

+

$_("Four primitive weights plus semantic tokens for body, headings, emphasis, and buttons.")

+ +
+

$_("Primitives")

+
+
+ --font-weight-regular + 400 + $_("The quick brown fox") +
+
+ --font-weight-medium + 500 + $_("The quick brown fox") +
+
+ --font-weight-semibold + 600 + $_("The quick brown fox") +
+
+ --font-weight-bold + 700 + $_("The quick brown fox") +
+
+
+ +
+

$_("Semantic")

+
+
+ --font-weight-body + 400 + $_("Paragraphs, default text") +
+
+ --font-weight-emphasis + 600 + $_("Inline emphasis") +
+
+ --font-weight-button + 600 + $_("Buttons, CTAs") +
+
+ --font-weight-heading + 700 + $_("Headings") +
+
+
+
+

$_("Pagination")

$_("The ol-pagination component provides support for both event-based and URL-based navigation.")

diff --git a/static/css/components/footer.css b/static/css/components/footer.css index 1da3ff274b7..75f9592bdf1 100644 --- a/static/css/components/footer.css +++ b/static/css/components/footer.css @@ -22,7 +22,7 @@ footer { display: flex; width: 100%; bottom: 0; - font-size: 0.8em; + font-size: var(--font-size-meta); } footer #footer-details { @@ -33,7 +33,7 @@ footer #footer-details { footer h2 { color: var(--dark-grey); - font-size: 1em; + font-size: var(--font-size-meta); margin: 0; } @@ -49,7 +49,7 @@ footer ul { } footer ul li { - font-size: 1em; + font-size: var(--font-size-meta); list-style-type: none; white-space: nowrap; margin: var(--spacing-stack-xs) 0; diff --git a/static/css/page-design.css b/static/css/page-design.css index 89ba2bb6168..97bdf5764a3 100644 --- a/static/css/page-design.css +++ b/static/css/page-design.css @@ -154,4 +154,46 @@ pre.example__code code[class*="language-"] { .color-block-link-unclicked { background-color: var(--link-blue); } + +/* Token showcase rows (font sizes, font weights, etc.) */ +.token-list { + display: flex; + flex-direction: column; + gap: var(--spacing-stack-sm); +} + +.token-row { + display: grid; + grid-template-columns: + minmax(180px, max-content) minmax(110px, max-content) + 1fr; + gap: var(--spacing-inline-xl); + align-items: baseline; + padding: var(--spacing-inset-sm) 0; + border-bottom: var(--border-divider); +} + +.token-row:last-child { + border-bottom: none; +} + +.token-row__name { + font-family: var(--font-family-code); + font-size: var(--font-size-body-small); + color: var(--dark-grey); + background: none; + padding: 0; +} + +.token-row__value { + font-family: var(--font-family-code); + font-size: var(--font-size-body-small); + color: var(--mid-grey); +} + +.token-row__sample { + color: var(--dark-grey); + line-height: var(--line-height-tight); +} + @import "legacy.css"; diff --git a/static/css/tokens.css b/static/css/tokens.css index 707fbb2f667..ee7a8f49999 100644 --- a/static/css/tokens.css +++ b/static/css/tokens.css @@ -13,6 +13,8 @@ @import "tokens/breakpoints.css"; @import "tokens/colors.css"; @import "tokens/font-families.css"; +@import "tokens/font-sizes.css"; +@import "tokens/font-weights.css"; @import "tokens/line-heights.css"; @import "tokens/spacing.css"; @import "tokens/z-index.css"; diff --git a/static/css/tokens/font-families.css b/static/css/tokens/font-families.css index 28fe67966fd..5ef48c60d34 100644 --- a/static/css/tokens/font-families.css +++ b/static/css/tokens/font-families.css @@ -24,30 +24,4 @@ --font-family-subheading: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* subheadings in body text */ --font-family-quote: Georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif; /* quotes */ --font-family-button: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* buttons */ - -} - -/** - * Font Sizes - * ========== - */ -:root { - --font-size-display-large: 57px; - --font-size-display-medium: 45px; - --font-size-display-small: 36px; - - --font-size-headline-large: 32px; - --font-size-headline-medium: 28px; - --font-size-headline-small: 24px; - - --font-size-title-large: 22px; - --font-size-title-medium: 16px; - --font-size-title-small: 14px; - - --font-size-label-large: 14px; - --font-size-label-medium: 12px; - --font-size-label-small: 11px; - - --font-size-body-large: 16px; - --font-size-body-medium: 14px; } diff --git a/static/css/tokens/font-sizes.css b/static/css/tokens/font-sizes.css new file mode 100644 index 00000000000..f4fd11bb180 --- /dev/null +++ b/static/css/tokens/font-sizes.css @@ -0,0 +1,74 @@ +/** + * Font Size Primitives + * ==================== + * A 9-step t-shirt scale covering ~95% of OL's current usage. + * Rarely used directly in components — use semantic tokens instead. + * + * rem-based so sizes scale with user preferences. + */ +:root { + --font-size-2xs: 0.6875rem; /* 11px */ + --font-size-xs: 0.75rem; /* 12px */ + --font-size-sm: 0.875rem; /* 14px */ + --font-size-base: 1rem; /* 16px */ + --font-size-md: 1.125rem; /* 18px */ + --font-size-lg: 1.5rem; /* 24px */ + --font-size-xl: 1.75rem; /* 28px */ + --font-size-2xl: 2rem; /* 32px */ + --font-size-3xl: 2.25rem; /* 36px */ +} + +/** + * Font Size Semantic Tokens + * ========================= + * Reference these throughout the app. Pick by role, not HTML element — + * --font-size-heading-* is a visual style, not a claim about

/

/etc. + * Choose the heading HTML element based on document outline; choose the + * token based on visual weight. + */ +:root { + /* Headings — visual hierarchy, decoupled from HTML element */ + --font-size-heading-xs: var(--font-size-sm); /* 14px — card titles, tiny section labels */ + --font-size-heading-sm: var(--font-size-md); /* 18px — small section headings */ + --font-size-heading-md: var(--font-size-lg); /* 24px — section headings */ + --font-size-heading-lg: var(--font-size-xl); /* 28px — page section headers */ + --font-size-heading-xl: var(--font-size-2xl); /* 32px — large page headings */ + --font-size-heading-xxl: var(--font-size-3xl); /* 36px — hero / banner */ + + /* Reading / content */ + --font-size-body: var(--font-size-sm); /* 14px — default paragraph */ + --font-size-body-large: var(--font-size-base); /* 16px — lead paragraph */ + --font-size-body-small: var(--font-size-xs); /* 12px — small print */ + + /* UI */ + --font-size-meta: var(--font-size-xs); /* 12px — bylines, counts, timestamps */ + --font-size-label: var(--font-size-sm); /* 14px — form labels */ + --font-size-button: var(--font-size-sm); /* 14px */ + --font-size-code: var(--font-size-sm); /* 14px */ + --font-size-chip: var(--font-size-xs); /* 12px */ +} + +/** + * Deprecated Aliases (Material 3 vocabulary) + * ========================================== + * Kept so existing consumers (~150 references) keep working during migration. + * Do NOT use in new code. Will be removed once all usages are migrated. + * + * Note: --font-size-body-large keeps its name and is defined in the semantic + * section above (16px); no alias needed here. + */ +:root { + --font-size-display-large: 3.5625rem; /* 57px — no primitive; one-off */ + --font-size-display-medium: 2.8125rem; /* 45px — no primitive; one-off */ + --font-size-display-small: var(--font-size-3xl); /* 36px → --font-size-heading-xxl */ + --font-size-headline-large: var(--font-size-2xl); /* 32px → --font-size-heading-xl */ + --font-size-headline-medium: var(--font-size-xl); /* 28px → --font-size-heading-lg */ + --font-size-headline-small: var(--font-size-lg); /* 24px → --font-size-heading-md */ + --font-size-title-large: 1.375rem; /* 22px — no primitive; round to --font-size-heading-md (24px) on migration */ + --font-size-title-medium: var(--font-size-base); /* 16px → --font-size-body-large */ + --font-size-title-small: var(--font-size-sm); /* 14px → --font-size-body */ + --font-size-label-large: var(--font-size-sm); /* 14px → --font-size-label */ + --font-size-label-medium: var(--font-size-xs); /* 12px → --font-size-meta or --font-size-body-small */ + --font-size-label-small: var(--font-size-2xs); /* 11px → --font-size-2xs (primitive, no semantic) */ + --font-size-body-medium: var(--font-size-sm); /* 14px → --font-size-body */ +} diff --git a/static/css/tokens/font-weights.css b/static/css/tokens/font-weights.css new file mode 100644 index 00000000000..a9c82d6b00c --- /dev/null +++ b/static/css/tokens/font-weights.css @@ -0,0 +1,23 @@ +/** + * Font Weight Primitives + * ====================== + * Rarely used directly in components — use semantic tokens instead. + */ +:root { + --font-weight-regular: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; +} + +/** + * Font Weight Semantic Tokens + * =========================== + * Reference these throughout the app for consistent emphasis. + */ +:root { + --font-weight-body: var(--font-weight-regular); /* paragraphs, default text */ + --font-weight-heading: var(--font-weight-bold); /* headings */ + --font-weight-emphasis: var(--font-weight-semibold); /* inline emphasis, strong */ + --font-weight-button: var(--font-weight-semibold); /* buttons, CTAs */ +}