# Label: Стилизация

## Обзор

У `Label` минимальный локальный контракт стилей. Типографику он в основном наследует от `Text` и добавляет только `display: inline-block`.

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

Собственных публичных локальных переменных `--label-*` у `Label` нет.

Компонент наследует модель токенов `Text`, в том числе:

| Переменная | Где используется | Назначение |
| --- | --- | --- |
| `--default-font-family` | основа `Text` | базовое семейство шрифтов подписи |
| `--text-color` | унаследованный цвет текста | читаемый цвет подписи |
| `--text-font-size-*` | шкала размеров | соответствие размеров подписи |
| `--line-height-*` | шкала размеров | соответствие межстрочного интервала подписи |

## Переменные частей

### Корень

Сам `Label` задаёт только `display: inline-block`. Типографика берётся из `Text`.

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

- визуальный размер наследуется от data-атрибутов размера текста
- отдельных стилей для отключённого состояния или ошибки на корне подписи нет
- вид отключённого состояния обычно задаёт окружающая раскладка или связанный элемент управления

## Примеры

### Размеры

`size` сопоставляется со шкалой текста: `sm`, `md` и `lg` подходят к полям тех же размеров.

```tsx
import { Label, TextField, TextFieldInput } from '@vega-ui/react';
import { useId } from 'react';

const SIZES = ['sm', 'md', 'lg'] as const;

export default function LabelSizes() {
  const id = useId();

  return (
    <div style={{ display: 'grid', gap: 'var(--spacing-8)', width: '100%' }}>
      {SIZES.map((size) => (
        <div key={size} style={{ display: 'grid', gap: 'var(--spacing-3)' }}>
          <Label htmlFor={`${id}-${size}`} size={size}>Project name ({size})</Label>
          <TextField size={size}>
            <TextFieldInput id={`${id}-${size}`} />
          </TextField>
        </div>
      ))}
    </div>
  );
}
```

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

- семантику нативного элемента подписи
- стили подписей, из-за которых они становятся неотличимы от вспомогательного текста