Brickslab.Tools

@brickslab./ui-web

Composant de texte courant avec 4 variantes typographiques (body-lg, body-md, body-sm, caption). Supporte 3 tons de couleur, l'alignement et des effets visuels avec gestion automatique de l'accessibilité ARIA.

Aperçu

variant — tone: default

variant="body-lg"

The quick brown fox

variant="body-md"

The quick brown fox

variant="body-sm"

The quick brown fox

variant="caption"The quick brown fox

tone — variant: body-md

tone="default"

The quick brown fox

tone="muted"

The quick brown fox

tone="brand"

The quick brown fox

align — variant: body-md

align="left"

The quick brown fox jumps

align="center"

The quick brown fox jumps

align="right"

The quick brown fox jumps

opacity + blurPx (accessibilité automatique)

opacity=0.4

Opacité réduite

blurPx=2

Texte flouté

variant="caption" tone="muted" (aria-hidden)

Props

Prop	Type	Défaut	Requis	Description
`texte`	`string`	—	✓	Contenu textuel à afficher.
`variant`	`"body-sm" \| "body-md" \| "body-lg" \| "caption"`	`"body-sm"`	—	Variante typographique. Détermine la balise HTML (p ou span) et la taille/graisse via le token mapping interne. "caption" génère un <span>.
`align`	`"left" \| "center" \| "right"`	`"left"`	—	Alignement horizontal du texte.
`tone`	`"default" \| "muted" \| "brand"`	`"default"`	—	Couleur du texte. "default" → var(--color-fg), "muted" → var(--color-muted), "brand" → var(--color-brand).
`opacity`	`number`	—	—	Opacité CSS du texte (0–1). Déclenche un aria-label si < 0.3 pour l'accessibilité.
`blurPx`	`number`	—	—	Flou CSS en pixels. Déclenche un aria-label si > 0 pour l'accessibilité.

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  texte="..."
  variant="body-sm"
  align="left"
  tone="default"
  opacity={0}
  blurPx={0}
/>

textevariantaligntoneopacityblurPx

Override texte: taille + couleur

Exemple cible pour personnaliser la taille et la couleur du texte avec les props disponibles sur ce composant.

<MyComponent
  texte="Votre texte"
  variant="body-lg"
  tone="brand"
/>

Utilisation

tsx

import { Text } from "@brickslab./ui-web";

// Variantes
<Text texte="Corps de texte large"  variant="body-lg" />
<Text texte="Corps de texte moyen"  variant="body-md" />
<Text texte="Corps de texte petit"  variant="body-sm" />
<Text texte="Légende / meta"        variant="caption" />

// Tones
<Text texte="Texte par défaut"  variant="body-md" tone="default" />
<Text texte="Texte secondaire"  variant="body-md" tone="muted" />
<Text texte="Texte brand"       variant="body-md" tone="brand" />

// Alignement
<Text texte="Centré"  variant="body-md" align="center" />
<Text texte="Droite"  variant="body-md" align="right" />

// Effets (avec accessibilité automatique)
<Text texte="Opacité réduite"  variant="body-md" opacity={0.4} />
<Text texte="Texte flouté"     variant="body-md" blurPx={2} />

// Caption décorative (aria-hidden automatique)
<Text texte="Légende décorative" variant="caption" tone="muted" />