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

<Meta title='@dxtmisha/ru/styles/color/! О системе цветов'/>

# О системе цветов (Color System)

Библиотека `@dxtmisha/styles` предоставляет мощный и гибкий механизм для управления цветами в приложениях. В отличие от стандартного подхода с жестким кодированием HEX-цветов, эта система полностью построена на динамических CSS-переменных. Тем самым она обеспечивает мгновенное переключение тем (светлая/тёмная) и плавные переходы (transitions) без дублирования CSS-кода.

Она решает главную проблему комплексной стилизации: **как применять прозрачность к цветам, поступающим из переменных, не ломая при этом CSS-анимации?**

## Основная концепция: Разделение RGB и Прозрачности

Если вы сохраните цвет как обычную переменную (например, `--primary: #ff0000;`), вы не сможете применять к ней прозрачность «на лету» средствами CSS (без использования новых, пока еще не везде поддерживаемых функций вроде `color-mix`). Старая попытка сделать `rgba(var(--primary), 0.5)` просто не сработает с HEX-значениями.

Чтобы решить эту проблему, наша дизайн-система автоматически конвертирует все базовые цвета в список каналов RGB:

```scss
// Как это происходит под капотом:
--sys-primary: 255, 0, 0; // Вместо #ff0000
```

Это позволяет нам динамически «собирать» цвет в момент его применения:

```css
color: rgba(var(--sys-primary), 1);
background-color: rgba(var(--sys-primary), 0.5);
```

### Независимая прозрачность

Чтобы дать вам еще больше контроля и обеспечить **реактивные переходы (transitions)** для прозрачности (когда меняется только уровень прозрачности, а не сам цвет), для каждого свойства генерируется собственная System-переменная прозрачности:

```scss
--sys-color: 255, 0, 0;
--sys-color-opacity: 1;

--sys-background: 0, 255, 0;
--sys-background-opacity: 0.5;
```

Финальная верстка в браузере выглядит так:
`color: rgba(var(--sys-color), var(--sys-color-opacity));`

Вам **не нужно** писать это вручную — библиотека предоставляет удобные миксины, которые сами генерируют этот код.

## Структура библиотеки

Библиотека `color.scss` концептуально разделена на три слоя абстракции:

### 1. Системные функции генерации (Утилиты)
Функции вроде `getColor`, `toColorRbg` или `toCustomVarRgb`. Они служат низкоуровневым двигателем, который переводит обычные HEX-цвета в строковый RGB-формат и наоборот. Вы редко будете вызывать их напрямую в повседневной разработке, но они нужны для регистрации новых цветов на уровне дизайн-токенов (`@dxtmisha/theme`).

### 2. Базовые миксины свойств (Base Mixins)
Это основные инструменты для применения цветов к UI-компонентам: `@include color(...)`, `@include backgroundColor(...)`, `@include borderColor(...)`, `@include stroke(...)` и т.д.
Они принимают цвет, обновляют системную переменную компонента и применяют CSS-свойство. Это ваш каждодневный инструмент стилизации компонентов.

### 3. Миксины палитр и тем (Palette Mixins)
Продвинутый уровень стилизации, предназначенный для компонентов, которые должны моментально адаптироваться к локальному контексту (например, кнопка, которая становится красной, если она находится внутри «опасного» блока). Используются миксины вроде `@include paletteColor()` и функция `getPaletteItem()`. Они выстраивают «цепочку поиска» переменных (найти `--theme-primary`, если нет — найти `--sys-primary`, если нет — использовать резервный HEX).

## Почему нельзя просто использовать `color: #ff0000;`?

Вы можете это сделать, однако это нарушит целостность дизайн-системы:
1. **Жесткая привязка:** При смене темы (например, на тёмную), ваш жестко прописанный цвет останется прежним.
2. **Отсутствие гибкости:** Если вы захотите сделать текст полупрозрачным при наведении, вам придется заново переопределять `color: rgba(...)`, вместо того чтобы просто изменить переменную прозрачности.
3. **Ошибки анимаций:** Переход от полного цвета к полупрозрачному будет плавнее, если браузер анимирует независимую переменную `--sys-color-opacity`, а не пытается интерполировать сложные `rgba` или HEX-значения.

Воспользуйтесь миксинами, описанными в разделах **Базовые свойства** и **Работа с палитрами**, чтобы ваш интерфейс был масштабируемым и легко поддерживаемым.
