ThemeProvider
Supplies the theme every primitive draws with
Usage
import { ThemeProvider, Box, Text } from "@gpuixui/primitives";
import { darkTheme } from "@gpuixui/tokens";
<ThemeProvider theme={darkTheme}>
<Box tone="background" padding="lg">
<Text role="h2">Settings</Text>
</Box>
</ThemeProvider>;API
| Prop | Type | Default | Consequence |
|---|---|---|---|
theme | PrimitiveTheme | required | every colour, size, radius and font a primitive paints |
density | Density | null | theme.density | swaps the numeric metrics group; colours stay, and a stored null is no override |
messages | MessagesSource | null | the shipped English | the words a control announces; see §Words |
children | ReactNode | — | the tree that may render primitives |
Words
A control's state word is interface copy, and this runtime has no aria-checked,
aria-pressed, aria-busy or aria-valuenow: a checkbox, a switch, a toggle, a
rating star and a busy action announce aria-valuetext or aria-description
instead, so a localised interface owns those words.
| Key | Words | Announced by |
|---|---|---|
selection | checked, unchecked, mixed | Checkbox, CheckboxGroup, RadioGroup, Switch |
press | pressed, notPressed | Toggle, ToggleGroup |
star | checked, half, unchecked | Rating |
loading | busy, indeterminate | a busy Button/IconButton and its Spinner, an indeterminate Progress |
starName(index, max) | the sentence naming one star | Rating |
codeDigit(index, label) | the sentence naming one code cell | OTPField |
rangeEnd(label, end) | the sentence naming one end | RangeSlider |
scrollRegion | the default name of a focusable scroller | ScrollArea |
A group's rows merge with the table above the provider: a row left out — or
written null — keeps that table's word, and a row written blank keeps the
shipped word. MessagesSource is the shape a stored table takes, so a decoded
one needs no cast; JSON cannot carry the three sentences, so they are absent and
inherit, and a table written as null (a settings record whose messages field
was never set) is absence whole — the table above stands.
A slot the store wrote as something a word cannot be also inherits, because a
saved table is data: an app that keeps its copy as a template string wrote text
where starName, codeDigit or rangeEnd belongs, and a row written as a
number, a flag or an object is not a word. Only a function is a sentence and only
text is a row; anything else keeps the table above, rather than being called or
trimmed mid-render.
Edit this page on GitHubpackages/primitives/docs/theme-provider.mdx