Text style
The look of one text role chosen by a person — font, size, weight, spacing, alignment, case, italic and tone — as a plain value the app stores, a live preview, and the same value drawn safely by StyledText.
import { TextStylePicker, StyledText, textStyleProps, parseTextStyle, textStyleLabelsFr } from "@krizaka/ui/text-style";Web uniquement — React, depuis @krizaka/ui/text-style. Bêta : son API peut encore changer à une version mineure.
- Mobile · ✗ à construire. A shop owner styles the storefront's text from a computer; the native picker is a follow-up when a mobile admin needs it.
StyledText's value is the same on a phone. issue #561
Pourquoi il est là. Akinaza storefronts: the shop owner sets the font, size and tone of the shop's titles and text (krizaka/akinaza#236); then the product theme settings of the admin consoles (krizaka-ui#561).
Quand l’utiliser
- A person sets the look of a title, a text or a price that the app then draws: a shop's storefront, a product's theme settings.
- In a popover from a toolbar (
compact), or reduced to a few controls (fields).
Quand ne pas l’utiliser
- For bold, links or colours inside a paragraph: this styles a whole text role, it is not a rich-text editor.
- For one number chosen by feel, such as a volume.À la place : Slider
- For a few named options that are not a text's look.À la place : Radio group
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { TextStylePicker, StyledText, textStyleProps, parseTextStyle, textStyleLabelsFr } from "@krizaka/ui/text-style";Exemples
Storefront title
A shop owner styles the shop's title, starting from presets.
Product price
Only font, size, weight and tone, and the stored value drawn by StyledText.
Compact toolbar
compact in a popover, in French, with two controls.
Props
StyledText
A text role drawn from a TextStyle: its font, size, weight, spacing, alignment, case and tone, all from CSS variables.
| Prop | Type | Défaut | Description |
|---|---|---|---|
as | ElementType<any, keyof IntrinsicElements> | — | The element drawn: h1…h6, p, span, div. |
className | string | — | Merged after the style's own class. |
value | unknown | — | The stored text style — validated here: anything invalid draws the default. |
TextStylePicker
The control of a text style: font, size, weight, spacing, alignment, case, italic and tone, with a live preview.
| Prop | Type | Défaut | Description |
|---|---|---|---|
onChangerequis | (value: TextStyle) => void | — | Called with the whole new text style at each change. |
previewTextrequis | string | — | The sample the preview shows, passed translated ("Boulangerie Martin"). |
valuerequis | TextStyle | — | The text style, controlled. Validated by parseTextStyle: anything invalid shows the default. |
className | string | — | Merged last on the root. |
compact | boolean | — | A denser form for a popover from a toolbar. |
fields | readonly ("size" | "leading" | "tone" | "align" | "weight" | "font" | "tracking" | "case" | "italic")[] | ["font", "size", "weight", "leading", "tracking", "align", "case", "italic", "tone"] as const | The controls to show, in the order of textStyleFields (just ["font", "size"]). A preset then changes only these. |
labels | Partial<TextStyleLabels> | — | The words, passed translated: textStyleLabels (EN) or textStyleLabelsFr, or the host's own. |
minBodySize | "sm" | "lg" | "md" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | sm | The smallest step advised for body text: under it, a warning shows — the size is never forced. |
presets | readonly TextStylePreset[] | — | Styles the person can start from, as data. |
role | "body" | "title" | body | What the text is for: body (reading text, which minBodySize guards) or title (a heading, which may be small). |
surface | string | — | The colour the text will sit on, for the preview and the contrast check (a CSS colour). By default the page's own surface. |
Accessibilité
- Every control is named by a visible label; the tones are named swatches (a radio group), never a colour alone.
- The contrast of the tone against the surface is measured on the preview and warned under 4.5:1 for body text, 3:1 for large text; a body size under
minBodySizeis warned too. Warnings are announced politely. - On a phone the controls stack in one column; the primitives honour reduced motion.
Clavier
| Touches | Action |
|---|---|
| Tab | Move from one control to the next. |
| Arrow keys | Choose within a font, weight, spacing, alignment, case or tone group; move the size slider by a step. |
| Space | Toggle italic; press a preset. |
Bonnes pratiques
- Store the value as it is and draw it with
StyledTextortextStyleProps; re-validate what a server receives withparseTextStyle. - Pass
previewTextwith the text people will actually read, androle="title"for a heading so a small size is not flagged. - Give the host's own
presets(« Titre », « Sous-titre », « Texte », « Prix ») as data, translated. - Pass
surfacewhen the text sits on a colour the page cannot tell the picker about. - The warnings advise, they never change the value: let the person decide.
Composants liés
Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub