Text

Text — базовый примитив основной типографики.

Обзор

Text — основной слой типографики основного текста. Он управляется общими токенами темы и одним внутренним пользовательским свойством для цвета текста.

Публичные CSS-переменные

The quick brown fox jumps over the lazy dog.

Переменная	Значение	Влияет на
локальное переопределение цвета текстакорень		В этом состоянии изменений не видно
семейство шрифтов основного текстакорень		В этом состоянии изменений не видно
читаемый цвет текста по умолчаниюзапасной вариант корня		В этом состоянии изменений не видно
соответствие размеров основного тексташкала размеров	—	В этом состоянии изменений не видно
соответствие межстрочных интерваловшкала размеров	—	В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные уровня частей

Корень

Корень использует:

--t-color с запасным вариантом --text-color
--default-font-family
токены font-size и line-height для конкретного размера

Взаимодействие состояний и вариантов

начертание управляется через data-font-weight
размер управляется через data-size
у Text нет отдельных вариантов ошибки или отключения; обычно их выражают переопределением цвета

Примеры

Локальное переопределение цвета

--t-color — пользовательское свойство и наследуется: заданное на обёртке, оно перекрашивает все Text внутри, а отдельный Text может переопределить его снова. Обычный color на обёртке до них не дойдёт, потому что каждый Text задаёт свой цвет.

LTRRTL

local-color-override.tsx · 17 строк

import { Text } from '@vega-ui/react';
import type { CSSProperties } from 'react';

export default function LocalColorOverride() {
  return (
    <div style={{ display: 'grid', gap: 'var(--spacing-4)', width: '100%' }}>
      <Text size={3}>Starter plan, billed monthly</Text>
      <div style={{ display: 'grid', gap: 'var(--spacing-1)', '--t-color': 'var(--label-secondary)' } as CSSProperties}>
        <Text size={2}>Renews on April 1</Text>
        <Text size={2}>Visa ending in 4242</Text>
        <Text size={2} style={{ '--t-color': 'var(--color-error)' } as CSSProperties}>
          Card expires this month

Шкала размеров

Вводный абзац, основной текст и мелкий шрифт используют шаги шкалы size, а не произвольные размеры шрифта, поэтому межстрочные интервалы остаются согласованными.

LTRRTL

larger-body-copy.tsx · 18 строк

import { Text } from '@vega-ui/react';
import type { CSSProperties } from 'react';

export default function LargerBodyCopy() {
  return (
    <div style={{ display: 'grid', gap: 'var(--spacing-6)', width: '100%', maxWidth: '60ch' }}>
      <Text asChild size={5}>
        <p>Ship design changes to every product from one set of tokens.</p>
      </Text>
      <Text asChild size={3}>
        <p>Update a color or radius once and every app that uses the theme picks it up on the next build.</p>
      </Text>

Не переопределяйте

не обходите общую шкалу текста произвольными жёстко заданными размерами шрифта
не делайте основной текст по умолчанию цветом, похожим на placeholder