Skip to main content
xoji

Text
Info:Display html svelte astro Success: coverage 17/17

A body-text primitive: paragraph or inline span across four sizes, four weights, three leadings, and four tones.

Live demo

live · @xoji/astro

Text

Four sizes

A theme is a full invocation of an algorithm — a finished, shareable design resting on a durable engine.

lg

A theme is a full invocation of an algorithm — a finished, shareable design resting on a durable engine.

body

A theme is a full invocation of an algorithm — a finished, shareable design resting on a durable engine.

sm

A theme is a full invocation of an algorithm — a finished, shareable design resting on a durable engine.

xs

Weight and tone

normal

medium

semibold

bold

default tone

muted tone

subtle tone

accent tone

monospaced

Leading, set on running prose

tight

The open register is not a fixed schema. Authors declare new tokens and rewire any derivation; the only hard contract is a coverage check between what components consume and what a module produces.

snug

The open register is not a fixed schema. Authors declare new tokens and rewire any derivation; the only hard contract is a coverage check between what components consume and what a module produces.

loose

The open register is not a fixed schema. Authors declare new tokens and rewire any derivation; the only hard contract is a coverage check between what components consume and what a module produces.

Inline spans in flow

Render emphasis , a muted aside , or a token-name right inside a paragraph — same primitive, different element.

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 (default ink, muted, subtle, or accent).

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: default reads as --fg-0, muted steps down to --fg-2, subtle to --fg-3, and accent tints to --accent-text.

When to use

How this component composes with the rest of the set.

Pair with Heading for titles; Text carries the running copy beneath them.
Use mono for inline code spans; for code blocks reach for a dedicated Code component once it lands.
Compose tone="subtle" with size="xs" for captions and metadata under cards and figures.

Props

6 props, straight from the manifest.

PropTypeDefaultBindingsDescription
as TextAs
p span
p
html svelte astro
The element to render: a block paragraph or an inline span.
size TextSize
xs sm body lg
body
html svelte astro
Type scale step. `body` is the default and emits no class.
weight TextWeight
normal medium semibold bold
normal
html svelte astro
Font weight. `normal` is the default and emits no class.
leading TextLeading
tight snug loose
snug
html svelte astro
Line height. `snug` is the default (maps to `--leading-normal`) and emits no class.
tone TextTone
default muted subtle accent
default
html svelte astro
Ink emphasis: default, muted, subtle, or `accent` for a tinted line. `default` emits no class.
mono boolean false
html svelte astro
Switches the font family to the monospace stack for inline code and tabular figures.

Appearance

Variants

default

 .xoji-text

Primary ink at full strength; the standard reading tone.

muted

 .xoji-text--muted

A step down the ink ladder for secondary copy and asides.

subtle

 .xoji-text--subtle

The quietest ink: captions, fine print, and metadata.

accent

 .xoji-text--accent

Accent-tinted ink for a highlighted word, link-like emphasis, or a figure.

mono

 .xoji-text--mono

Monospace family for inline code and tabular figures; composes with any tone or size.

Sizes

xs
.xoji-text--xs

Smallest: fine print.

sm
.xoji-text--sm

Small: secondary copy.

body

 default
.xoji-text

Default reading size.

lg
.xoji-text--lg

Large: lead paragraphs.

Anatomy

The named parts that make up the component, with their selectors.

text

 .xoji-text

The paragraph or span element carrying the size, weight, leading, tone, and mono classes.
--font-sans --text-body --weight-normal --leading-normal --fg-0

Tokens & coverage

What the component consumes, checked live against what the algorithm produces.

Success:fully covered 17/17 consumed tokens produced default register: 276 tokens

Live coverage check against the xoji-default register (derive(xojiDefault, { anchors }) → coverComponent(manifest, register)). Every token this component consumes must be a key the algorithm produces.

--accent-text --fg-0 --fg-2 --fg-3 --font-mono --font-sans --leading-loose --leading-normal --leading-tight --text-body --text-lg --text-sm --text-xs --weight-bold --weight-medium --weight-normal --weight-semibold

Slots
default
html svelte astro

The text content.

Accessibility
Renders a native <p> or <span>, so the semantics carry meaning; no ARIA needed.
Tone is purely visual; the ink ladder (default / muted / subtle) is derived to stay legible against the theme's surfaces, never below contrast thresholds.
mono changes only the font family, not the accessible text, so screen readers announce the content unchanged.
Choose 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.

 
<xoji-text>The quiet default — body copy at comfortable measure.</xoji-text>

<xoji-text size="lg" weight="semibold">A lead paragraph that sets up the section.</xoji-text>

<xoji-text tone="muted" size="sm">A muted aside, dialed down a notch.</xoji-text>

<xoji-text as="span" tone="subtle" size="xs">inline fine print</xoji-text>

<xoji-text mono size="sm">npm install @xoji/core</xoji-text>
 
<script lang="ts">
	import { Text } from "@xoji/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 @xoji/core</Text>
 
---
import { Text } from "@xoji/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 @xoji/core</Text>