import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/styles/ru/About'/>

# @dxtmisha/styles

Библиотека SCSS утилит для экосистемы DXT UI. Содержит готовые миксины и функции для стилизации с поддержкой CSS Custom Properties, автоматической обработкой RTL и паттернами адаптивного дизайна.

## Что входит в пакет

### Управление цветом

- **Функции цвета** — валидация, конвертация, управление палитрой, обработка прозрачности
- **getColor** — извлечение значения цвета с поддержкой прозрачности
- **getPalette** — управление цветами палитры
- **toColorRbg** — конвертация цвета в формат RGB
- **toGradient** — преобразование цвета в градиент

### Раскладка и позиционирование

- **Миксины Flexbox** — горизонтальные/вертикальные раскладки, центрирование, пресеты отступов
- **Миксины позиционирования** — абсолютное/относительное позиционирование с автоматической поддержкой RTL через inset-inline
- **Миксины размеров** — ширина, высота, соотношение сторон, viewport единицы (dvw/dvh)
- **Margin и Padding** — утилиты отступов с поддержкой RTL через margin-inline/padding-inline

### Типографика

- **Миксины шрифтов** — размер шрифта, межстрочный интервал, отступы между параграфами с CSS переменными
- **Выравнивание текста** — автоматическая инверсия выравнивания текста для RTL
- **Переполнение текста** — обрезка, ограничение строк, обработка многоточия
- **Преобразование текста** — утилиты uppercase, lowercase, capitalize

### Направление и поддержка RTL

- **Система Dir** — автоматическое управление направлением LTR/RTL через CSS переменные
- **initDir** — инициализация с множителем --d-dir (1 для LTR, -1 для RTL)
- **dirLeft/dirRight** — автоматическая инверсия значений для RTL
- **dirFlexLeft/dirFlexRight** — flex-выравнивание с поддержкой RTL

### Адаптивный дизайн

- **Медиа-запросы** — контрольные точки min/max width из дизайн-системы
- **Контейнерные запросы** — адаптивные компоненты на основе размера родительского контейнера
- **mediaMinWidth/mediaMaxWidth** — удобные обёртки для медиа-запросов
- **containerMinWidth/containerMaxWidth** — утилиты контейнерных запросов

### Трансформации и анимация

- **Миксины трансформаций** — translateX/Y, scale, rotate с CSS переменными
- **transformInit** — применяет все трансформации с автоматическим RTL для translateX
- **translateInit** — только translate-трансформации

### Интерактивные состояния

- **Миксины селекторов** — состояния hover, active, focus, disabled, readonly
- **enabled** — автоматическое исключение состояний disabled/readonly/loading
- **focus** — включает :focus, :focus-within и поддержку BEM-модификатора

### Утилиты

- **Content Visibility** — оптимизация производительности для контента вне экрана
- **Scrollbar** — скрытие полосы прокрутки с сохранением функциональности
- **Rules** — операции с мапами, манипуляции строками, утилиты селекторов
- **Custom Properties** — управление CSS переменными и валидация

## Ключевые возможности

**Поддержка RTL:** Автоматическая поддержка раскладки справа налево через CSS Logical Properties (margin-inline, padding-inline, inset-inline) и интеграцию с системой направлений

**CSS Custom Properties:** Все значения размеров, отступов и трансформаций хранятся как CSS переменные для динамического изменения темы

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

**Производительность:** Оптимизации content visibility, эффективная генерация селекторов, минимальный вывод CSS

**Типобезопасность:** Функции валидации для цветов, custom properties и типов данных

**Совместимость с BEM:** Все миксины работают бесшовно с методологией BEM
