Andreas Reinhold / reiniandClaude Opus 5
f307079a45
Both applications show values a person reads or types character by character: SealShare's share tokens and recovery codes, ReStride's file and folder names and its keyboard shortcuts. The package wrote the platform's monospace stack twice (the reset's <code>, <kbd>, <samp> and the mono field) and gave everything else nothing, so an app copied the stack by hand. --md-ref-typeface-mono now holds it, read by the reset, the field and a new md-mono text class; the guard points font-mono at <code> or md-mono. Not an M3 token: M3 names a brand and a plain typeface and nothing for code. Decided with the user (plan step 46). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
331 lines
11 KiB
CSS
331 lines
11 KiB
CSS
/*
|
|
* The text classes: a fixed, documented set for text on plain elements. A component sets its own
|
|
* type and ink; these are for the headings, paragraphs and captions an application writes around
|
|
* them, and the set the package's own views use for text once they leave Tailwind.
|
|
*
|
|
* Type — one per text element, the whole style at once (size, line height, weight, tracking;
|
|
* tokens/type.css), never assembled by hand. Roles from docs/reference/m3/styles.md § Typography:
|
|
*
|
|
* md-type-display-{lg|md|sm} the largest text on a screen: short, important text or numerals,
|
|
* best on large screens
|
|
* md-type-headline-{lg|md|sm} short, high-emphasis text: page and section titles
|
|
* md-type-title-{lg|md|sm} medium-emphasis, relatively short text: card, dialog and
|
|
* list-section titles
|
|
* md-type-body-{lg|md|sm} longer passages and paragraphs; body-lg for reading
|
|
* md-type-label-{lg|md|sm} small, utilitarian text inside components, and captions
|
|
*
|
|
* `md-type-emphasized-*` is the same style one weight step heavier and fully rounded, with its own
|
|
* tracking. M3's components do not use it by default: it is a deliberate choice for a selected
|
|
* item, a primary action, a headline or a badge, not decoration. `font-variation-settings`
|
|
* inherits, so every regular class resets it and body copy inside an emphasized heading reads as
|
|
* itself again. The heading level is structure; the class is appearance.
|
|
*
|
|
* Ink — an M3 role, never an opacity (38% means disabled):
|
|
*
|
|
* md-ink on-surface: default text
|
|
* md-ink-variant on-surface-variant: lower emphasis — secondary text, metadata
|
|
* md-ink-quiet outline: decoration only, never text that must be read
|
|
* md-ink-primary primary: a link, together with `md-link`
|
|
* md-ink-error error: the text of an error
|
|
* md-ink-success, md-ink-warning, md-ink-info: the text of that state, and nothing else
|
|
* md-ink-inverse inverse-on-surface: text on an inverse surface (a snackbar)
|
|
*
|
|
* On a container, the ink is the container's `on-` role, which the component sets; these inks are
|
|
* for the surface roles.
|
|
*
|
|
* Layout of text:
|
|
*
|
|
* md-text-start|center|end logical alignment, so it turns with the writing direction
|
|
* md-truncate one line with an ellipsis — only where the whole text can be read
|
|
* elsewhere, because M3's text must scale to 200% without loss
|
|
* md-line-clamp-2|3 at most two or three lines, the same caveat
|
|
* md-nowrap never wraps: a figure with its unit, a short label
|
|
* md-tabular tabular figures, where digits change often (tables, clocks,
|
|
* counters), so the layout does not shift
|
|
* md-mono the monospace typeface (`--md-ref-typeface-mono`), for a value read
|
|
* character by character outside `<code>`; after an `md-type-*` class,
|
|
* whose `font` would otherwise set the brand face
|
|
* md-visually-hidden read by assistive technology, not drawn: a label a picture already
|
|
* gives the eye
|
|
*
|
|
* In `material.text`, above every component: a text class on a component's root or on an element
|
|
* inside it wins over the component's own type and ink. The `md-type-*` declarations are the
|
|
* `type-*` utilities' (tokens/utilities.css), which the components still written in Tailwind use.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@layer material.text {
|
|
.md-type-display-lg {
|
|
font: var(--md-sys-typescale-display-lg);
|
|
letter-spacing: var(--md-sys-typescale-display-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-display-lg {
|
|
font: var(--md-sys-typescale-emphasized-display-lg);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-display-lg-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-display-md {
|
|
font: var(--md-sys-typescale-display-md);
|
|
letter-spacing: var(--md-sys-typescale-display-md-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-display-md {
|
|
font: var(--md-sys-typescale-emphasized-display-md);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-display-md-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-display-sm {
|
|
font: var(--md-sys-typescale-display-sm);
|
|
letter-spacing: var(--md-sys-typescale-display-sm-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-display-sm {
|
|
font: var(--md-sys-typescale-emphasized-display-sm);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-display-sm-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-headline-lg {
|
|
font: var(--md-sys-typescale-headline-lg);
|
|
letter-spacing: var(--md-sys-typescale-headline-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-headline-lg {
|
|
font: var(--md-sys-typescale-emphasized-headline-lg);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-headline-lg-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-headline-md {
|
|
font: var(--md-sys-typescale-headline-md);
|
|
letter-spacing: var(--md-sys-typescale-headline-md-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-headline-md {
|
|
font: var(--md-sys-typescale-emphasized-headline-md);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-headline-md-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-headline-sm {
|
|
font: var(--md-sys-typescale-headline-sm);
|
|
letter-spacing: var(--md-sys-typescale-headline-sm-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-headline-sm {
|
|
font: var(--md-sys-typescale-emphasized-headline-sm);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-headline-sm-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-title-lg {
|
|
font: var(--md-sys-typescale-title-lg);
|
|
letter-spacing: var(--md-sys-typescale-title-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-title-lg {
|
|
font: var(--md-sys-typescale-emphasized-title-lg);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-title-lg-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-title-md {
|
|
font: var(--md-sys-typescale-title-md);
|
|
letter-spacing: var(--md-sys-typescale-title-md-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-title-md {
|
|
font: var(--md-sys-typescale-emphasized-title-md);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-title-md-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-title-sm {
|
|
font: var(--md-sys-typescale-title-sm);
|
|
letter-spacing: var(--md-sys-typescale-title-sm-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-title-sm {
|
|
font: var(--md-sys-typescale-emphasized-title-sm);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-title-sm-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-body-lg {
|
|
font: var(--md-sys-typescale-body-lg);
|
|
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-body-lg {
|
|
font: var(--md-sys-typescale-emphasized-body-lg);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-body-lg-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-body-md {
|
|
font: var(--md-sys-typescale-body-md);
|
|
letter-spacing: var(--md-sys-typescale-body-md-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-body-md {
|
|
font: var(--md-sys-typescale-emphasized-body-md);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-body-md-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-body-sm {
|
|
font: var(--md-sys-typescale-body-sm);
|
|
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-body-sm {
|
|
font: var(--md-sys-typescale-emphasized-body-sm);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-body-sm-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-label-lg {
|
|
font: var(--md-sys-typescale-label-lg);
|
|
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-label-lg {
|
|
font: var(--md-sys-typescale-emphasized-label-lg);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-label-lg-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-label-md {
|
|
font: var(--md-sys-typescale-label-md);
|
|
letter-spacing: var(--md-sys-typescale-label-md-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-label-md {
|
|
font: var(--md-sys-typescale-emphasized-label-md);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-label-md-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-label-sm {
|
|
font: var(--md-sys-typescale-label-sm);
|
|
letter-spacing: var(--md-sys-typescale-label-sm-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-label-sm {
|
|
font: var(--md-sys-typescale-emphasized-label-sm);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-label-sm-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-ink {
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
|
|
.md-ink-variant {
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
|
|
.md-ink-quiet {
|
|
color: var(--md-sys-color-outline);
|
|
}
|
|
|
|
.md-ink-primary {
|
|
color: var(--md-sys-color-primary);
|
|
}
|
|
|
|
.md-ink-error {
|
|
color: var(--md-sys-color-error);
|
|
}
|
|
|
|
.md-ink-success {
|
|
color: var(--md-sys-color-success);
|
|
}
|
|
|
|
.md-ink-warning {
|
|
color: var(--md-sys-color-warning);
|
|
}
|
|
|
|
.md-ink-info {
|
|
color: var(--md-sys-color-info);
|
|
}
|
|
|
|
.md-ink-inverse {
|
|
color: var(--md-sys-color-inverse-on-surface);
|
|
}
|
|
|
|
.md-text-start {
|
|
text-align: start;
|
|
}
|
|
|
|
.md-text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.md-text-end {
|
|
text-align: end;
|
|
}
|
|
|
|
.md-truncate {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.md-line-clamp-2 {
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
|
|
.md-line-clamp-3 {
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 3;
|
|
}
|
|
|
|
.md-nowrap {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.md-tabular {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.md-mono {
|
|
font-family: var(--md-ref-typeface-mono);
|
|
}
|
|
|
|
.md-visually-hidden {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip-path: inset(50%);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
}
|