Text
A body-text primitive: paragraph or inline span across four sizes, four weights, three leadings, and four tones.
Live demo
Text is the primitive for running copy. It renders a block <p> by default or an inline <span> via the as prop, then tunes appearance along four independent axes: size (xs, sm, body, lg), weight (normal, medium, semibold, bold), leading (tight, snug, loose), and tone.
A mono flag swaps the family to the monospace stack for inline code and tabular figures. Every axis maps to a design token, so a paragraph picks up the active theme's type scale and ink ladder without any local color: the default/muted/subtle emphasis tones read as --fg-0/--fg-2/--fg-3, and the full color roster (every semantic role, accent variant, or named hue) paints the copy in that tone's on-surface ink, derived to stay legible against the page.
When to use
How this component composes with the rest of the set.
mono for inline code spans; for code blocks reach for a dedicated Code component once it lands. tone="subtle" with size="xs" for captions and metadata under cards and figures. --{tone}-vivid ink by contract. To pin text to a tone's base shade instead, style ::part(text) from the consumer side: xtyle-text::part(text) { color: var(--accent) }. A per-instance custom property set on the host does not reach the inner element's own token register, so ::part is the reliable seam for a one-off color. Props
6 props, straight from the manifest.
| Prop | Type | Default | Bindings | Description |
|---|---|---|---|---|
body is the default and emits no class. | ||||
normal is the default and emits no class. | ||||
snug is the default (maps to --leading-normal) and emits no class. | ||||
default/muted/subtle emphasis ramp off the foreground, or any tone in the full roster (semantic role, accent variant, or named hue) for colored copy in that tone's on-surface ink. default emits no class. | ||||
Appearance
Variants
default
Primary ink at full strength; the standard reading tone.
muted
A step down the ink ladder for secondary copy and asides.
subtle
The quietest ink: captions, fine print, and metadata.
accent
Accent-colored ink for a highlighted word, link-like emphasis, or a figure; the first stop of the full tone roster, which paints any run in a tone's on-surface --{tone}-vivid ink.
mono
Monospace family for inline code and tabular figures; composes with any tone or size.
Sizes
xs
Smallest: fine print.
sm
Small: secondary copy.
body
Default reading size.
lg
Large: lead paragraphs.
Anatomy
The named parts that make up the component. A ::part() handle is reachable from your own stylesheet; the class beside it is the component's internal selector, which a shadow boundary keeps to itself.
text
The paragraph or span element carrying the size, weight, leading, tone, and mono classes; exposed as ::part(text) for a consumer-side color override.
Tokens & coverage
What the component consumes, checked live against what the algorithm produces.
Live coverage check against the xtyle-default register
(derive(xtyleDefault, { anchors }) →
coverComponent(manifest, register)). Every token this component
consumes must be a key the algorithm produces.
--accent-2-vivid--accent-3-vivid--accent-4-vivid--accent-vivid--black-vivid--blue-vivid--brown-vivid--cyan-vivid--danger-vivid--fg-0--fg-2--fg-3--font-mono--font-sans--gray-vivid--green-vivid--info-vivid--leading-loose--leading-normal--leading-tight--neutral-vivid--orange-vivid--pink-vivid--purple-vivid--red-vivid--success-vivid--text-body--text-lg--text-sm--text-xs--warn-vivid--weight-bold--weight-medium--weight-normal--weight-semibold--white-vivid--yellow-vividSlots
The text content.
Accessibility
<p> or <span>, so the semantics carry meaning; no ARIA needed. mono changes only the font family, not the accessible text, so screen readers announce the content unchanged. as="span" only for genuinely inline runs; block copy should stay a <p> so structure is conveyed. Code
Sizes, tones, and mono
The four axes are independent: size, weight, leading, and tone mix freely, and mono layers on top.
<xtyle-text>The quiet default: body copy at comfortable measure.</xtyle-text>
<xtyle-text size="lg" weight="semibold">A lead paragraph that sets up the section.</xtyle-text>
<xtyle-text tone="muted" size="sm">A muted aside, dialed down a notch.</xtyle-text>
<xtyle-text as="span" tone="subtle" size="xs">inline fine print</xtyle-text>
<xtyle-text mono size="sm">npm install @xtyle/core</xtyle-text><script lang="ts">
import { Text } from "@xtyle/svelte";
</script>
<Text>The quiet default: body copy at comfortable measure.</Text>
<Text size="lg" weight="semibold">A lead paragraph that sets up the section.</Text>
<Text tone="muted" size="sm">A muted aside, dialed down a notch.</Text>
<Text as="span" tone="subtle" size="xs">inline fine print</Text>
<Text mono size="sm">npm install @xtyle/core</Text>---
import { Text } from "@xtyle/astro";
---
<Text>The quiet default: body copy at comfortable measure.</Text>
<Text size="lg" weight="semibold">A lead paragraph that sets up the section.</Text>
<Text tone="muted" size="sm">A muted aside, dialed down a notch.</Text>
<Text as="span" tone="subtle" size="xs">inline fine print</Text>
<Text mono size="sm">npm install @xtyle/core</Text>