Krizaka UI
Krizaka UI
Components

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.

Web · ✓Mobile · ✗ to buildDesktop · ✓BetaForms
import { TextStylePicker, StyledText, textStyleProps, parseTextStyle, textStyleLabelsFr } from "@krizaka/ui/text-style";

Web only — React, from @krizaka/ui/text-style. Beta: its API may still change in a minor version.

  • Mobile · ✗ to build. 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

Why it is here. 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).

When to use

  • 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).

When not to use

  • 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.Use instead: Slider
  • For a few named options that are not a text's look.Use instead: Radio group

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { TextStylePicker, StyledText, textStyleProps, parseTextStyle, textStyleLabelsFr } from "@krizaka/ui/text-style";

Examples

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.

PropTypeDefaultDescription
asElementType<any, keyof IntrinsicElements>—The element drawn: h1…h6, p, span, div.
classNamestring—Merged after the style's own class.
valueunknown—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.

PropTypeDefaultDescription
onChangerequired(value: TextStyle) => void—Called with the whole new text style at each change.
previewTextrequiredstring—The sample the preview shows, passed translated ("Boulangerie Martin").
valuerequiredTextStyle—The text style, controlled. Validated by parseTextStyle: anything invalid shows the default.
classNamestring—Merged last on the root.
compactboolean—A denser form for a popover from a toolbar.
fieldsreadonly ("size" | "leading" | "tone" | "align" | "weight" | "font" | "tracking" | "case" | "italic")[]["font", "size", "weight", "leading", "tracking", "align", "case", "italic", "tone"] as constThe controls to show, in the order of textStyleFields (just ["font", "size"]). A preset then changes only these.
labelsPartial<TextStyleLabels>—The words, passed translated: textStyleLabels (EN) or textStyleLabelsFr, or the host's own.
minBodySize"sm" | "lg" | "md" | "xs" | "xl" | "2xl" | "3xl" | "4xl"smThe smallest step advised for body text: under it, a warning shows — the size is never forced.
presetsreadonly TextStylePreset[]—Styles the person can start from, as data.
role"body" | "title"bodyWhat the text is for: body (reading text, which minBodySize guards) or title (a heading, which may be small).
surfacestring—The colour the text will sit on, for the preview and the contrast check (a CSS colour). By default the page's own surface.

Accessibility

  • 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 minBodySize is warned too. Warnings are announced politely.
  • On a phone the controls stack in one column; the primitives honour reduced motion.

Keyboard

KeysAction
TabMove from one control to the next.
Arrow keysChoose within a font, weight, spacing, alignment, case or tone group; move the size slider by a step.
SpaceToggle italic; press a preset.

Best practices

  • Store the value as it is and draw it with StyledText or textStyleProps; re-validate what a server receives with parseTextStyle.
  • Pass previewText with the text people will actually read, and role="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 surface when 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.

Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub

Tag selector

Previous

Account menu

Next

On this page

When to useInstallationExamplesPropsAccessibilityBest practicesRelated components