tokenizer-ui-kit 0.2.19 → 0.2.21

package/VARIABLES-ICONBUTTON.md

@@ -0,0 +1,252 @@
+# IconButton Component Variables
+
+Документация по CSS переменным для компонента `CIconButton`.
+
+## 📋 Содержание
+
+- [Варианты (Variants)](#варианты-variants)
+  - [filled-green](#variant-filled-green)
+  - [outlined-green](#variant-outlined-green)
+  - [small-green](#variant-small-green)
+  - [filled-dark-gray](#variant-filled-dark-gray)
+  - [small-black](#variant-small-black)
+  - [filled-red](#variant-filled-red)
+  - [outlined-red](#variant-outlined-red)
+  - [small-red](#variant-small-red)
+  - [small-black-to-green](#variant-small-black-to-green)
+  - [small-success](#variant-small-success)
+- [Примеры использования](#примеры-использования)
+- [Полный список переменных](#полный-список-переменных)
+
+---
+
+## Варианты (Variants)
+
+### Variant: filled-green
+
+Зеленая кнопка с заполненным фоном.
+
+| Переменная | Описание | Значение по умолчанию |
+|------------|----------|----------------------|
+| `--ui-kit-iconbutton-filled-green-bg` | Фон кнопки | `var(--ui-kit-color-primary)` |
+| `--ui-kit-iconbutton-filled-green-text` | Цвет иконки | `var(--ui-kit-color-text-white)` |
+| `--ui-kit-iconbutton-filled-green-hover-bg` | Фон при наведении | `var(--ui-kit-color-primary-hover)` |
+| `--ui-kit-iconbutton-filled-green-disabled-bg` | Фон в disabled состоянии | `var(--ui-kit-color-disabled-bg)` |
+
+### Variant: outlined-green
+
+Зеленая кнопка с обводкой.
+
+| Переменная | Описание | Значение по умолчанию |
+|------------|----------|----------------------|
+| `--ui-kit-iconbutton-outlined-green-border` | Цвет границы | `var(--ui-kit-color-primary)` |
+| `--ui-kit-iconbutton-outlined-green-text` | Цвет иконки | `var(--ui-kit-color-primary)` |
+| `--ui-kit-iconbutton-outlined-green-hover-bg` | Фон при наведении | `var(--ui-kit-color-primary)` |
+| `--ui-kit-iconbutton-outlined-green-hover-text` | Цвет иконки при наведении | `var(--ui-kit-color-text-white)` |
+| `--ui-kit-iconbutton-outlined-green-disabled-border` | Цвет границы в disabled состоянии | `var(--ui-kit-color-disabled-border)` |
+| `--ui-kit-iconbutton-outlined-green-disabled-text` | Цвет иконки в disabled состоянии | `var(--ui-kit-color-disabled-text)` |
+
+### Variant: small-green
+
+Маленькая зеленая кнопка без фона.
+
+| Переменная | Описание | Значение по умолчанию |
+|------------|----------|----------------------|
+| `--ui-kit-iconbutton-small-green-text` | Цвет иконки | `var(--ui-kit-color-primary)` |
+| `--ui-kit-iconbutton-small-green-hover-text` | Цвет иконки при наведении | `var(--ui-kit-color-primary-hover)` |
+| `--ui-kit-iconbutton-small-green-disabled-text` | Цвет иконки в disabled состоянии | `var(--ui-kit-color-disabled-text)` |
+
+### Variant: filled-dark-gray
+
+Темно-серая кнопка с заполненным фоном.
+
+| Переменная | Описание | Значение по умолчанию |
+|------------|----------|----------------------|
+| `--ui-kit-iconbutton-filled-dark-gray-bg` | Фон кнопки | `#36373f` |
+| `--ui-kit-iconbutton-filled-dark-gray-text` | Цвет иконки | `var(--ui-kit-color-text-white)` |
+| `--ui-kit-iconbutton-filled-dark-gray-hover-bg` | Фон при наведении | `#0c0d10` |
+| `--ui-kit-iconbutton-filled-dark-gray-disabled-bg` | Фон в disabled состоянии | `var(--ui-kit-color-disabled-bg)` |
+
+### Variant: small-black
+
+Маленькая черная кнопка без фона.
+
+| Переменная | Описание | Значение по умолчанию |
+|------------|----------|----------------------|
+| `--ui-kit-iconbutton-small-black-text` | Цвет иконки | `#36373f` |
+| `--ui-kit-iconbutton-small-black-hover-text` | Цвет иконки при наведении | `#0c0d10` |
+| `--ui-kit-iconbutton-small-black-disabled-text` | Цвет иконки в disabled состоянии | `var(--ui-kit-color-disabled-text)` |
+
+### Variant: filled-red
+
+Красная кнопка с заполненным фоном.
+
+| Переменная | Описание | Значение по умолчанию |
+|------------|----------|----------------------|
+| `--ui-kit-iconbutton-filled-red-bg` | Фон кнопки | `var(--ui-kit-color-error)` |
+| `--ui-kit-iconbutton-filled-red-text` | Цвет иконки | `var(--ui-kit-color-text-white)` |
+| `--ui-kit-iconbutton-filled-red-hover-bg` | Фон при наведении | `#c63c28` |
+| `--ui-kit-iconbutton-filled-red-disabled-bg` | Фон в disabled состоянии | `var(--ui-kit-color-disabled-bg)` |
+
+### Variant: outlined-red
+
+Красная кнопка с обводкой.
+
+| Переменная | Описание | Значение по умолчанию |
+|------------|----------|----------------------|
+| `--ui-kit-iconbutton-outlined-red-border` | Цвет границы | `var(--ui-kit-color-error)` |
+| `--ui-kit-iconbutton-outlined-red-text` | Цвет иконки | `var(--ui-kit-color-error)` |
+| `--ui-kit-iconbutton-outlined-red-hover-bg` | Фон при наведении | `var(--ui-kit-color-error)` |
+| `--ui-kit-iconbutton-outlined-red-hover-text` | Цвет иконки при наведении | `var(--ui-kit-color-text-white)` |
+| `--ui-kit-iconbutton-outlined-red-disabled-border` | Цвет границы в disabled состоянии | `var(--ui-kit-color-disabled-border)` |
+| `--ui-kit-iconbutton-outlined-red-disabled-text` | Цвет иконки в disabled состоянии | `var(--ui-kit-color-disabled-text)` |
+
+### Variant: small-red
+
+Маленькая красная кнопка без фона.
+
+| Переменная | Описание | Значение по умолчанию |
+|------------|----------|----------------------|
+| `--ui-kit-iconbutton-small-red-text` | Цвет иконки | `var(--ui-kit-color-error)` |
+| `--ui-kit-iconbutton-small-red-hover-text` | Цвет иконки при наведении | `#c63c28` |
+| `--ui-kit-iconbutton-small-red-disabled-text` | Цвет иконки в disabled состоянии | `var(--ui-kit-color-disabled-text)` |
+
+### Variant: small-black-to-green
+
+Маленькая кнопка, меняющая цвет с черного на зеленый при наведении.
+
+| Переменная | Описание | Значение по умолчанию |
+|------------|----------|----------------------|
+| `--ui-kit-iconbutton-small-black-to-green-text` | Цвет иконки | `var(--ui-kit-color-text-primary)` |
+| `--ui-kit-iconbutton-small-black-to-green-hover-text` | Цвет иконки при наведении | `var(--ui-kit-color-primary)` |
+| `--ui-kit-iconbutton-small-black-to-green-disabled-text` | Цвет иконки в disabled состоянии | `var(--ui-kit-color-disabled-text)` |
+
+### Variant: small-success
+
+Маленькая кнопка с цветом успеха.
+
+| Переменная | Описание | Значение по умолчанию |
+|------------|----------|----------------------|
+| `--ui-kit-iconbutton-small-success-text` | Цвет иконки | `var(--ui-kit-system-success-700)` |
+| `--ui-kit-iconbutton-small-success-hover-text` | Цвет иконки при наведении | `var(--ui-kit-color-primary-hover)` |
+| `--ui-kit-iconbutton-small-success-disabled-text` | Цвет иконки в disabled состоянии | `var(--ui-kit-color-disabled-text)` |
+
+---
+
+## Примеры использования
+
+### Глобальное переопределение
+
+```css
+:root {
+  /* Изменить цвет зеленых кнопок */
+  --ui-kit-iconbutton-filled-green-bg: #007bff;
+  --ui-kit-iconbutton-filled-green-hover-bg: #0056b3;
+  
+  /* Изменить цвет красных кнопок */
+  --ui-kit-iconbutton-filled-red-bg: #dc3545;
+  --ui-kit-iconbutton-filled-red-hover-bg: #c82333;
+}
+```
+
+### Переопределение для конкретной кнопки
+
+```vue
+<template>
+  <CIconButton variant="filled-green" icon="check" class="custom-icon-button" />
+</template>
+
+<style>
+.custom-icon-button {
+  --ui-kit-iconbutton-filled-green-bg: #28a745;
+  --ui-kit-iconbutton-filled-green-hover-bg: #218838;
+}
+</style>
+```
+
+---
+
+## Полный список переменных
+
+Готовый блок CSS для копирования:
+
+```css
+.ui-kit-icon-button {
+  /* Variant: filled-green */
+  --ui-kit-iconbutton-filled-green-bg: var(--ui-kit-color-primary);
+  --ui-kit-iconbutton-filled-green-text: var(--ui-kit-color-text-white);
+  --ui-kit-iconbutton-filled-green-hover-bg: var(--ui-kit-color-primary-hover);
+  --ui-kit-iconbutton-filled-green-disabled-bg: var(--ui-kit-color-disabled-bg);
+
+  /* Variant: outlined-green */
+  --ui-kit-iconbutton-outlined-green-border: var(--ui-kit-color-primary);
+  --ui-kit-iconbutton-outlined-green-text: var(--ui-kit-color-primary);
+  --ui-kit-iconbutton-outlined-green-hover-bg: var(--ui-kit-color-primary);
+  --ui-kit-iconbutton-outlined-green-hover-text: var(--ui-kit-color-text-white);
+  --ui-kit-iconbutton-outlined-green-disabled-border: var(--ui-kit-color-disabled-border);
+  --ui-kit-iconbutton-outlined-green-disabled-text: var(--ui-kit-color-disabled-text);
+
+  /* Variant: small-green */
+  --ui-kit-iconbutton-small-green-text: var(--ui-kit-color-primary);
+  --ui-kit-iconbutton-small-green-hover-text: var(--ui-kit-color-primary-hover);
+  --ui-kit-iconbutton-small-green-disabled-text: var(--ui-kit-color-disabled-text);
+
+  /* Variant: filled-dark-gray */
+  --ui-kit-iconbutton-filled-dark-gray-bg: #36373f;
+  --ui-kit-iconbutton-filled-dark-gray-text: var(--ui-kit-color-text-white);
+  --ui-kit-iconbutton-filled-dark-gray-hover-bg: #0c0d10;
+  --ui-kit-iconbutton-filled-dark-gray-disabled-bg: var(--ui-kit-color-disabled-bg);
+
+  /* Variant: small-black */
+  --ui-kit-iconbutton-small-black-text: #36373f;
+  --ui-kit-iconbutton-small-black-hover-text: #0c0d10;
+  --ui-kit-iconbutton-small-black-disabled-text: var(--ui-kit-color-disabled-text);
+
+  /* Variant: filled-red */
+  --ui-kit-iconbutton-filled-red-bg: var(--ui-kit-color-error);
+  --ui-kit-iconbutton-filled-red-text: var(--ui-kit-color-text-white);
+  --ui-kit-iconbutton-filled-red-hover-bg: #c63c28;
+  --ui-kit-iconbutton-filled-red-disabled-bg: var(--ui-kit-color-disabled-bg);
+
+  /* Variant: outlined-red */
+  --ui-kit-iconbutton-outlined-red-border: var(--ui-kit-color-error);
+  --ui-kit-iconbutton-outlined-red-text: var(--ui-kit-color-error);
+  --ui-kit-iconbutton-outlined-red-hover-bg: var(--ui-kit-color-error);
+  --ui-kit-iconbutton-outlined-red-hover-text: var(--ui-kit-color-text-white);
+  --ui-kit-iconbutton-outlined-red-disabled-border: var(--ui-kit-color-disabled-border);
+  --ui-kit-iconbutton-outlined-red-disabled-text: var(--ui-kit-color-disabled-text);
+
+  /* Variant: small-red */
+  --ui-kit-iconbutton-small-red-text: var(--ui-kit-color-error);
+  --ui-kit-iconbutton-small-red-hover-text: #c63c28;
+  --ui-kit-iconbutton-small-red-disabled-text: var(--ui-kit-color-disabled-text);
+
+  /* Variant: small-black-to-green */
+  --ui-kit-iconbutton-small-black-to-green-text: var(--ui-kit-color-text-primary);
+  --ui-kit-iconbutton-small-black-to-green-hover-text: var(--ui-kit-color-primary);
+  --ui-kit-iconbutton-small-black-to-green-disabled-text: var(--ui-kit-color-disabled-text);
+
+  /* Variant: small-success */
+  --ui-kit-iconbutton-small-success-text: var(--ui-kit-system-success-700);
+  --ui-kit-iconbutton-small-success-hover-text: var(--ui-kit-color-primary-hover);
+  --ui-kit-iconbutton-small-success-disabled-text: var(--ui-kit-color-disabled-text);
+
+  /* Disabled (общий для filled вариантов) */
+  --ui-kit-iconbutton-disabled-bg: var(--ui-kit-color-disabled-bg);
+  --ui-kit-iconbutton-disabled-text: var(--ui-kit-color-text-white);
+}
+```
+
+---
+
+## 📝 Примечания
+
+- Все переменные имеют значения по умолчанию, поэтому кастомизация опциональна
+- Переменные можно переопределять на разных уровнях: глобально (`:root`), для конкретного варианта, или для конкретного элемента через класс
+- Базовые токены (`--ui-kit-color-*`) используются по умолчанию и должны быть определены в `variables.css`
+- Компонентные переменные определены в `src/lib/assets/css/components/iconbutton.css`
+
+---
+
+[← Назад к списку компонентов](./VARIABLES.md)
+

package/VARIABLES-INPUT.md

@@ -0,0 +1,143 @@
+# Input Component Variables
+
+Документация по CSS переменным для компонентов `CInput` и `CSearchInput`.
+
+## 📋 Содержание
+
+- [Общие переменные](#общие-переменные)
+- [Примеры использования](#примеры-использования)
+- [Полный список переменных](#полный-список-переменных)
+
+---
+
+## Общие переменные
+
+Все переменные применяются к компонентам `CInput` и `CSearchInput`.
+
+| Переменная | Описание | Значение по умолчанию |
+|------------|----------|----------------------|
+| `--ui-kit-input-label-color` | Цвет метки (label) | `var(--ui-kit-color-text-primary)` |
+| `--ui-kit-input-border` | Цвет границы по умолчанию | `var(--ui-kit-color-border)` |
+| `--ui-kit-input-border-hover` | Цвет границы при наведении | `var(--ui-kit-color-border-hover)` |
+| `--ui-kit-input-border-focus` | Цвет границы при фокусе | `var(--ui-kit-color-border-focus)` |
+| `--ui-kit-input-border-disabled` | Цвет границы в disabled состоянии | `var(--ui-kit-color-disabled-border)` |
+| `--ui-kit-input-border-error` | Цвет границы при ошибке | `var(--ui-kit-color-error-light)` |
+| `--ui-kit-input-bg` | Фон поля ввода | `var(--ui-kit-color-bg-white)` |
+| `--ui-kit-input-bg-disabled` | Фон поля ввода в disabled состоянии | `var(--ui-kit-color-disabled-bg)` |
+| `--ui-kit-input-text` | Цвет текста | `var(--ui-kit-color-text-primary)` |
+| `--ui-kit-input-text-disabled` | Цвет текста в disabled состоянии | `var(--ui-kit-color-disabled-text)` |
+| `--ui-kit-input-text-error` | Цвет текста при ошибке | `var(--ui-kit-color-error)` |
+| `--ui-kit-input-placeholder` | Цвет placeholder | `var(--ui-kit-color-disabled-text)` |
+| `--ui-kit-input-icon-color` | Цвет иконки | `var(--ui-kit-color-disabled-text)` |
+| `--ui-kit-input-clear-color` | Цвет кнопки очистки (CSearchInput) | `var(--ui-kit-color-disabled-text)` |
+| `--ui-kit-input-clear-color-hover` | Цвет кнопки очистки при наведении | `var(--ui-kit-color-border-hover)` |
+| `--ui-kit-input-clear-color-error` | Цвет кнопки очистки при ошибке | `var(--ui-kit-color-error)` |
+| `--ui-kit-input-error-text` | Цвет текста ошибки | `var(--ui-kit-color-error)` |
+
+---
+
+## Примеры использования
+
+### Глобальное переопределение для всех полей ввода
+
+```css
+:root {
+  --ui-kit-input-border: #ff0000;
+  --ui-kit-input-border-focus: #00ff00;
+}
+```
+
+### Переопределение для конкретного поля
+
+```vue
+<template>
+  <CInput v-model="value" class="my-custom-input" />
+</template>
+
+<style>
+.my-custom-input {
+  --ui-kit-input-border: #0000ff;
+  --ui-kit-input-border-focus: #0000cc;
+}
+</style>
+```
+
+### Переопределение цвета границы при ошибке
+
+```css
+:root {
+  --ui-kit-input-border-error: #ff0000;
+}
+```
+
+### Кастомизация CSearchInput
+
+```vue
+<template>
+  <CSearchInput v-model="search" class="custom-search" />
+</template>
+
+<style>
+.custom-search {
+  --ui-kit-input-clear-color: #666666;
+  --ui-kit-input-clear-color-hover: #000000;
+}
+</style>
+```
+
+---
+
+## Полный список переменных
+
+Готовый блок CSS для копирования:
+
+```css
+:root {
+  /* Label */
+  --ui-kit-input-label-color: var(--ui-kit-color-text-primary);
+
+  /* Field Wrapper Borders */
+  --ui-kit-input-border: var(--ui-kit-color-border);
+  --ui-kit-input-border-hover: var(--ui-kit-color-border-hover);
+  --ui-kit-input-border-focus: var(--ui-kit-color-border-focus);
+  --ui-kit-input-border-disabled: var(--ui-kit-color-disabled-border);
+  --ui-kit-input-border-error: var(--ui-kit-color-error-light);
+  
+  /* Field Wrapper Background */
+  --ui-kit-input-bg: var(--ui-kit-color-bg-white);
+  --ui-kit-input-bg-disabled: var(--ui-kit-color-disabled-bg);
+
+  /* Field Text */
+  --ui-kit-input-text: var(--ui-kit-color-text-primary);
+  --ui-kit-input-text-disabled: var(--ui-kit-color-disabled-text);
+  --ui-kit-input-text-error: var(--ui-kit-color-error);
+  --ui-kit-input-placeholder: var(--ui-kit-color-disabled-text);
+
+  /* Icon */
+  --ui-kit-input-icon-color: var(--ui-kit-color-disabled-text);
+  
+  /* Clear Button (для CSearchInput) */
+  --ui-kit-input-clear-color: var(--ui-kit-color-disabled-text);
+  --ui-kit-input-clear-color-hover: var(--ui-kit-color-border-hover);
+  --ui-kit-input-clear-color-error: var(--ui-kit-color-error);
+
+  /* Error Text */
+  --ui-kit-input-error-text: var(--ui-kit-color-error);
+}
+```
+
+---
+
+## 📝 Примечания
+
+- Все переменные имеют значения по умолчанию, поэтому кастомизация опциональна
+- Переменные можно переопределять на разных уровнях: глобально (`:root`), для конкретного компонента (через класс), или для конкретного состояния
+- Базовые токены (`--ui-kit-color-*`) используются по умолчанию и должны быть определены в `variables.css`
+- Компонентные переменные определены в `src/lib/assets/css/components/input.css`
+- Переменные применяются к обоим компонентам: `CInput` и `CSearchInput`
+
+---
+
+[← Назад к списку компонентов](../VARIABLES.md)
+
+

package/VARIABLES-LABEL.md

@@ -0,0 +1,137 @@
+# Label Component Variables
+
+Документация по CSS переменным для компонента `CLabel`.
+
+## 📋 Содержание
+
+- [Варианты (Variants)](#варианты-variants)
+  - [success](#variant-success)
+  - [warning](#variant-warning)
+  - [pending](#variant-pending)
+- [Примеры использования](#примеры-использования)
+- [Полный список переменных](#полный-список-переменных)
+
+---
+
+## Варианты (Variants)
+
+### Variant: success
+
+Зеленый лейбл для успешных статусов.
+
+| Переменная | Описание | Значение по умолчанию |
+|------------|----------|----------------------|
+| `--ui-kit-label-success-bg` | Фон лейбла | `var(--ui-kit-system-success-400)` |
+| `--ui-kit-label-success-text` | Цвет текста | `var(--ui-kit-system-success-700)` |
+
+### Variant: warning
+
+Красный/оранжевый лейбл для предупреждений.
+
+| Переменная | Описание | Значение по умолчанию |
+|------------|----------|----------------------|
+| `--ui-kit-label-warning-bg` | Фон лейбла | `var(--ui-kit-system-error-400)` |
+| `--ui-kit-label-warning-text` | Цвет текста | `var(--ui-kit-system-error-700)` |
+
+### Variant: pending
+
+Желтый/оранжевый лейбл для ожидающих статусов.
+
+| Переменная | Описание | Значение по умолчанию |
+|------------|----------|----------------------|
+| `--ui-kit-label-pending-bg` | Фон лейбла | `var(--ui-kit-system-attention-400)` |
+| `--ui-kit-label-pending-text` | Цвет текста | `var(--ui-kit-system-attention-700)` |
+
+---
+
+## Примеры использования
+
+### Глобальное переопределение
+
+```css
+:root {
+  /* Изменить цвет успешных лейблов */
+  --ui-kit-label-success-bg: #d4edda;
+  --ui-kit-label-success-text: #155724;
+  
+  /* Изменить цвет предупреждающих лейблов */
+  --ui-kit-label-warning-bg: #fff3cd;
+  --ui-kit-label-warning-text: #856404;
+  
+  /* Изменить цвет ожидающих лейблов */
+  --ui-kit-label-pending-bg: #ffeaa7;
+  --ui-kit-label-pending-text: #fdcb6e;
+}
+```
+
+### Переопределение для конкретного лейбла
+
+```vue
+<template>
+  <CLabel variant="success" class="custom-success-label">
+    Активен
+  </CLabel>
+</template>
+
+<style>
+.custom-success-label {
+  --ui-kit-label-success-bg: #c8e6c9;
+  --ui-kit-label-success-text: #1b5e20;
+}
+</style>
+```
+
+### Кастомизация всех вариантов
+
+```css
+:root {
+  /* Success */
+  --ui-kit-label-success-bg: #e8f5e9;
+  --ui-kit-label-success-text: #2e7d32;
+  
+  /* Warning */
+  --ui-kit-label-warning-bg: #ffebee;
+  --ui-kit-label-warning-text: #c62828;
+  
+  /* Pending */
+  --ui-kit-label-pending-bg: #fff9c4;
+  --ui-kit-label-pending-text: #f57f17;
+}
+```
+
+---
+
+## Полный список переменных
+
+Готовый блок CSS для копирования:
+
+```css
+.ui-kit-label {
+  /* Variant: success */
+  --ui-kit-label-success-bg: var(--ui-kit-system-success-400);
+  --ui-kit-label-success-text: var(--ui-kit-system-success-700);
+
+  /* Variant: warning */
+  --ui-kit-label-warning-bg: var(--ui-kit-system-error-400);
+  --ui-kit-label-warning-text: var(--ui-kit-system-error-700);
+
+  /* Variant: pending */
+  --ui-kit-label-pending-bg: var(--ui-kit-system-attention-400);
+  --ui-kit-label-pending-text: var(--ui-kit-system-attention-700);
+}
+```
+
+---
+
+## 📝 Примечания
+
+- Все переменные имеют значения по умолчанию, поэтому кастомизация опциональна
+- Переменные можно переопределять на разных уровнях: глобально (`:root`), для конкретного варианта, или для конкретного элемента через класс
+- Базовые токены (`--ui-kit-color-*` и `--ui-kit-system-*`) используются по умолчанию и должны быть определены в `variables.css`
+- Компонентные переменные определены в `src/lib/assets/css/components/label.css`
+- Для варианта `custom` стили задаются через классы извне
+
+---
+
+[← Назад к списку компонентов](./VARIABLES.md)
+

package/VARIABLES-SELECT.md

@@ -0,0 +1,157 @@
+# Select Component Variables
+
+Документация по CSS переменным для компонента `Select`.
+
+## 📋 Содержание
+
+- [Общие переменные](#общие-переменные)
+- [Примеры использования](#примеры-использования)
+- [Полный список переменных](#полный-список-переменных)
+
+---
+
+## Общие переменные
+
+Все переменные применяются к компоненту `Select`.
+
+| Переменная | Описание | Значение по умолчанию |
+|------------|----------|----------------------|
+| `--ui-kit-select-border` | Цвет границы кнопки | `var(--ui-kit-color-border)` |
+| `--ui-kit-select-border-hover` | Цвет границы при наведении | `var(--ui-kit-color-primary)` |
+| `--ui-kit-select-border-focus` | Цвет границы при фокусе | `var(--ui-kit-color-primary)` |
+| `--ui-kit-select-border-open` | Цвет границы когда открыт | `var(--ui-kit-color-primary)` |
+| `--ui-kit-select-bg` | Фон кнопки | `var(--ui-kit-color-bg-white)` |
+| `--ui-kit-select-bg-transparent` | Фон кнопки в прозрачном режиме | `transparent` |
+| `--ui-kit-select-shadow-focus` | Тень при фокусе | `0 0 0 1px var(--ui-kit-color-primary) inset` |
+| `--ui-kit-select-placeholder` | Цвет placeholder | `var(--ui-kit-color-text-tertiary)` |
+| `--ui-kit-select-tag-bg` | Фон тега | `var(--ui-kit-color-bg-light-1)` |
+| `--ui-kit-select-tag-text` | Цвет текста тега | `var(--ui-kit-color-text-secondary)` |
+| `--ui-kit-select-tag-label` | Цвет текста метки тега | `var(--ui-kit-color-text-primary)` |
+| `--ui-kit-select-tag-bg-transparent` | Фон тега в прозрачном режиме | `var(--ui-kit-color-bg-white)` |
+| `--ui-kit-select-tag-count-bg` | Фон счетчика тегов | `var(--ui-kit-color-bg-light-1)` |
+| `--ui-kit-select-tag-count-text` | Цвет текста счетчика тегов | `var(--ui-kit-color-text-secondary)` |
+| `--ui-kit-select-tag-count-bg-transparent` | Фон счетчика тегов в прозрачном режиме | `transparent` |
+| `--ui-kit-select-input-text` | Цвет текста в поле поиска | `var(--ui-kit-color-text-primary)` |
+| `--ui-kit-select-input-placeholder` | Цвет placeholder в поле поиска | `var(--ui-kit-color-text-tertiary)` |
+| `--ui-kit-select-dropdown-border` | Цвет границы выпадающего списка | `var(--ui-kit-color-border)` |
+| `--ui-kit-select-dropdown-bg` | Фон выпадающего списка | `var(--ui-kit-color-bg-white)` |
+| `--ui-kit-select-list-text` | Цвет текста списка | `var(--ui-kit-color-text-secondary)` |
+| `--ui-kit-select-option-bg` | Фон опции | `var(--ui-kit-color-bg-white)` |
+| `--ui-kit-select-option-bg-hover` | Фон опции при наведении | `var(--ui-kit-color-bg-light-1)` |
+| `--ui-kit-select-option-text-selected` | Цвет текста выбранной опции | `var(--ui-kit-color-primary)` |
+| `--ui-kit-select-option-text-hover` | Цвет текста опции при наведении | `var(--ui-kit-color-primary)` |
+| `--ui-kit-select-check-color` | Цвет иконки галочки | `var(--ui-kit-color-primary)` |
+
+---
+
+## Примеры использования
+
+### Глобальное переопределение для всех селектов
+
+```css
+:root {
+  --ui-kit-select-border: #ff0000;
+  --ui-kit-select-border-hover: #00ff00;
+}
+```
+
+### Переопределение для конкретного селекта
+
+```vue
+<template>
+  <Select v-model="value" :options="options" class="my-custom-select" />
+</template>
+
+<style>
+.my-custom-select {
+  --ui-kit-select-border: #0000ff;
+  --ui-kit-select-border-focus: #0000cc;
+}
+</style>
+```
+
+### Кастомизация цветов опций
+
+```css
+:root {
+  --ui-kit-select-option-text-selected: #ff0000;
+  --ui-kit-select-option-bg-hover: #f0f0f0;
+}
+```
+
+### Кастомизация тегов
+
+```css
+:root {
+  --ui-kit-select-tag-bg: #e0e0e0;
+  --ui-kit-select-tag-text: #333333;
+}
+```
+
+---
+
+## Полный список переменных
+
+Готовый блок CSS для копирования:
+
+```css
+:root {
+  /* Button */
+  --ui-kit-select-border: var(--ui-kit-color-border);
+  --ui-kit-select-border-hover: var(--ui-kit-color-primary);
+  --ui-kit-select-border-focus: var(--ui-kit-color-primary);
+  --ui-kit-select-border-open: var(--ui-kit-color-primary);
+  --ui-kit-select-bg: var(--ui-kit-color-bg-white);
+  --ui-kit-select-bg-transparent: transparent;
+  --ui-kit-select-shadow-focus: 0 0 0 1px var(--ui-kit-color-primary) inset;
+
+  /* Placeholder */
+  --ui-kit-select-placeholder: var(--ui-kit-color-text-tertiary);
+
+  /* Tag */
+  --ui-kit-select-tag-bg: var(--ui-kit-color-bg-light-1);
+  --ui-kit-select-tag-text: var(--ui-kit-color-text-secondary);
+  --ui-kit-select-tag-label: var(--ui-kit-color-text-primary);
+  --ui-kit-select-tag-bg-transparent: var(--ui-kit-color-bg-white);
+
+  /* Tag Count */
+  --ui-kit-select-tag-count-bg: var(--ui-kit-color-bg-light-1);
+  --ui-kit-select-tag-count-text: var(--ui-kit-color-text-secondary);
+  --ui-kit-select-tag-count-bg-transparent: transparent;
+
+  /* Input (внутри селекта) */
+  --ui-kit-select-input-text: var(--ui-kit-color-text-primary);
+  --ui-kit-select-input-placeholder: var(--ui-kit-color-text-tertiary);
+
+  /* Dropdown */
+  --ui-kit-select-dropdown-border: var(--ui-kit-color-border);
+  --ui-kit-select-dropdown-bg: var(--ui-kit-color-bg-white);
+
+  /* List */
+  --ui-kit-select-list-text: var(--ui-kit-color-text-secondary);
+
+  /* Option */
+  --ui-kit-select-option-bg: var(--ui-kit-color-bg-white);
+  --ui-kit-select-option-bg-hover: var(--ui-kit-color-bg-light-1);
+  --ui-kit-select-option-text-selected: var(--ui-kit-color-primary);
+  --ui-kit-select-option-text-hover: var(--ui-kit-color-primary);
+
+  /* Check Icon */
+  --ui-kit-select-check-color: var(--ui-kit-color-primary);
+}
+```
+
+---
+
+## 📝 Примечания
+
+- Все переменные имеют значения по умолчанию, поэтому кастомизация опциональна
+- Переменные можно переопределять на разных уровнях: глобально (`:root`), для конкретного компонента (через класс), или для конкретного состояния
+- Базовые токены (`--ui-kit-color-*`) используются по умолчанию и должны быть определены в `variables.css`
+- Компонентные переменные определены в `src/lib/assets/css/components/select.css`
+
+---
+
+[← Назад к списку компонентов](../VARIABLES.md)
+
+