tokenizer-ui-kit 0.2.19 → 0.2.21

package/VARIABLES-TOAST.md

@@ -0,0 +1,169 @@
+# Toast Component Variables
+
+Документация по CSS переменным для компонента `Toast`.
+
+## 📋 Содержание
+
+- [Базовые переменные](#базовые-переменные)
+- [Варианты (Variants)](#варианты-variants)
+  - [success](#variant-success)
+  - [error](#variant-error)
+  - [warning](#variant-warning)
+  - [default](#variant-default)
+- [Примеры использования](#примеры-использования)
+- [Полный список переменных](#полный-список-переменных)
+
+---
+
+## Базовые переменные
+
+Применяются ко всем тостам по умолчанию.
+
+| Переменная | Описание | Значение по умолчанию |
+|------------|----------|----------------------|
+| `--ui-kit-toast-bg` | Фон тоста | `var(--ui-kit-color-bg-white)` |
+| `--ui-kit-toast-shadow` | Тень тоста | `0 0 24px 0 rgba(81, 83, 86, 0.08)` |
+| `--ui-kit-toast-title-color` | Цвет заголовка | `var(--ui-kit-color-text-primary)` |
+| `--ui-kit-toast-description-color` | Цвет описания | `var(--ui-kit-color-text-secondary)` |
+
+---
+
+## Варианты (Variants)
+
+### Variant: success
+
+Зеленый тост для успешных операций.
+
+| Переменная | Описание | Значение по умолчанию |
+|------------|----------|----------------------|
+| `--ui-kit-toast-success-border` | Цвет границы | `var(--ui-kit-system-primary-700)` |
+| `--ui-kit-toast-success-text` | Цвет текста | `var(--ui-kit-system-primary-700)` |
+| `--ui-kit-toast-success-bg` | Фон тоста | `var(--ui-kit-color-bg-white)` |
+| `--ui-kit-toast-success-progress` | Цвет прогресс-бара | `var(--ui-kit-system-success-700)` |
+
+### Variant: error
+
+Красный тост для ошибок.
+
+| Переменная | Описание | Значение по умолчанию |
+|------------|----------|----------------------|
+| `--ui-kit-toast-error-border` | Цвет границы | `var(--ui-kit-system-error-700)` |
+| `--ui-kit-toast-error-text` | Цвет текста | `var(--ui-kit-system-error-900)` |
+| `--ui-kit-toast-error-bg` | Фон тоста | `var(--ui-kit-system-error-400)` |
+| `--ui-kit-toast-error-progress` | Цвет прогресс-бара | `var(--ui-kit-system-error-900)` |
+
+### Variant: warning
+
+Желтый/оранжевый тост для предупреждений.
+
+| Переменная | Описание | Значение по умолчанию |
+|------------|----------|----------------------|
+| `--ui-kit-toast-warning-border` | Цвет границы | `var(--ui-kit-system-attention-700)` |
+| `--ui-kit-toast-warning-text` | Цвет текста | `var(--ui-kit-system-attention-900)` |
+| `--ui-kit-toast-warning-bg` | Фон тоста | `var(--ui-kit-system-attention-400)` |
+| `--ui-kit-toast-warning-progress` | Цвет прогресс-бара | `var(--ui-kit-system-attention-700)` |
+
+### Variant: default
+
+Тост по умолчанию без специального типа.
+
+| Переменная | Описание | Значение по умолчанию |
+|------------|----------|----------------------|
+| `--ui-kit-toast-default-bg` | Фон тоста | `var(--ui-kit-color-bg-white)` |
+
+---
+
+## Примеры использования
+
+### Глобальное переопределение
+
+```css
+:root {
+  /* Изменить фон всех тостов */
+  --ui-kit-toast-bg: #f5f5f5;
+  
+  /* Изменить цвет успешных тостов */
+  --ui-kit-toast-success-bg: #e8f5e9;
+  --ui-kit-toast-success-text: #2e7d32;
+}
+```
+
+### Переопределение для конкретного тоста
+
+```vue
+<template>
+  <Toast type="success" class="custom-success-toast">
+    Успешно сохранено!
+  </Toast>
+</template>
+
+<style>
+.custom-success-toast {
+  --ui-kit-toast-success-bg: #c8e6c9;
+  --ui-kit-toast-success-text: #1b5e20;
+}
+</style>
+```
+
+### Кастомизация прогресс-бара
+
+```css
+:root {
+  --ui-kit-toast-success-progress: #4caf50;
+  --ui-kit-toast-error-progress: #f44336;
+  --ui-kit-toast-warning-progress: #ff9800;
+}
+```
+
+---
+
+## Полный список переменных
+
+Готовый блок CSS для копирования:
+
+```css
+.ui-kit-toast {
+  /* Base */
+  --ui-kit-toast-bg: var(--ui-kit-color-bg-white);
+  --ui-kit-toast-shadow: 0 0 24px 0 rgba(81, 83, 86, 0.08);
+  
+  /* Text */
+  --ui-kit-toast-title-color: var(--ui-kit-color-text-primary);
+  --ui-kit-toast-description-color: var(--ui-kit-color-text-secondary);
+  
+  /* Variant: success */
+  --ui-kit-toast-success-border: var(--ui-kit-system-primary-700);
+  --ui-kit-toast-success-text: var(--ui-kit-system-primary-700);
+  --ui-kit-toast-success-bg: var(--ui-kit-color-bg-white);
+  --ui-kit-toast-success-progress: var(--ui-kit-system-success-700);
+  
+  /* Variant: error */
+  --ui-kit-toast-error-border: var(--ui-kit-system-error-700);
+  --ui-kit-toast-error-text: var(--ui-kit-system-error-900);
+  --ui-kit-toast-error-bg: var(--ui-kit-system-error-400);
+  --ui-kit-toast-error-progress: var(--ui-kit-system-error-900);
+  
+  /* Variant: warning */
+  --ui-kit-toast-warning-border: var(--ui-kit-system-attention-700);
+  --ui-kit-toast-warning-text: var(--ui-kit-system-attention-900);
+  --ui-kit-toast-warning-bg: var(--ui-kit-system-attention-400);
+  --ui-kit-toast-warning-progress: var(--ui-kit-system-attention-700);
+  
+  /* Variant: default */
+  --ui-kit-toast-default-bg: var(--ui-kit-color-bg-white);
+}
+```
+
+---
+
+## 📝 Примечания
+
+- Все переменные имеют значения по умолчанию, поэтому кастомизация опциональна
+- Переменные можно переопределять на разных уровнях: глобально (`:root`), для конкретного варианта, или для конкретного элемента через класс
+- Базовые токены (`--ui-kit-color-*`) используются по умолчанию и должны быть определены в `variables.css`
+- Компонентные переменные определены в `src/lib/assets/css/components/toast.css`
+
+---
+
+[← Назад к списку компонентов](./VARIABLES.md)
+

package/VARIABLES.md

@@ -0,0 +1,124 @@
+# 🎨 UI Kit CSS Variables Documentation
+
+Документация по CSS переменным для кастомизации компонентов UI Kit.
+
+## 📋 Содержание
+
+- [Базовые токены](#базовые-токены)
+- [Компоненты](#компоненты)
+- [Полный список базовых токенов](#полный-список-базовых-токенов)
+
+---
+
+## Базовые токены
+
+Базовые семантические токены определены в `variables.css` и используются всеми компонентами по умолчанию.
+
+### Цвета
+
+```css
+/* Primary Colors */
+--ui-kit-color-primary: #39aa5d;
+--ui-kit-color-primary-hover: #268644;
+--ui-kit-color-primary-light: #56d67f;
+
+/* Text Colors */
+--ui-kit-color-text-primary: #292b32;
+--ui-kit-color-text-secondary: #757987;
+--ui-kit-color-text-tertiary: #8c9aac;
+--ui-kit-color-text-white: #ffffff;
+
+/* Background Colors */
+--ui-kit-color-bg-white: #ffffff;
+--ui-kit-color-bg-light-1: #f1f3f6;
+--ui-kit-color-bg-light-2: #e9ebee;
+--ui-kit-color-bg-light-4: #d2d8e0;
+--ui-kit-color-bg-light-5: #b4beca;
+
+/* Border Colors */
+--ui-kit-color-border: #b4beca;
+--ui-kit-color-border-hover: #268644;
+--ui-kit-color-border-focus: #39aa5d;
+
+/* Error Colors */
+--ui-kit-color-error: #f34831;
+--ui-kit-color-error-light: #f78272;
+--ui-kit-color-error-bg: #f0f4f3;
+
+/* Disabled Colors */
+--ui-kit-color-disabled-bg: #e9ebee;
+--ui-kit-color-disabled-text: #b4beca;
+--ui-kit-color-disabled-border: #b4beca;
+```
+
+---
+
+## Компоненты
+
+Документация по переменным для каждого компонента находится в отдельных файлах:
+
+- **[Button (CButton)](./VARIABLES-BUTTON.md)** - Переменные для компонента кнопки
+- **[Input (CInput, CSearchInput)](./VARIABLES-INPUT.md)** - Переменные для компонентов полей ввода
+- **[Select](./VARIABLES-SELECT.md)** - Переменные для компонента селекта
+- **[DatePicker](./VARIABLES-DATEPICKER.md)** - Переменные для компонента календаря
+- **[Checkbox (CCheckbox)](./VARIABLES-CHECKBOX.md)** - Переменные для компонента чекбокса
+- **[IconButton (CIconButton)](./VARIABLES-ICONBUTTON.md)** - Переменные для компонента иконки-кнопки
+- **[Label (CLabel)](./VARIABLES-LABEL.md)** - Переменные для компонента лейбла
+- **[Toast](./VARIABLES-TOAST.md)** - Переменные для компонента тоста
+- **[AdaptiveTabs](./VARIABLES-ADAPTIVETABS.md)** - Переменные для компонента адаптивных табов
+
+---
+
+## Полный список базовых токенов
+
+Готовый блок CSS для копирования:
+
+```css
+:root {
+  /* Primary Colors */
+  --ui-kit-color-primary: #39aa5d;
+  --ui-kit-color-primary-hover: #268644;
+  --ui-kit-color-primary-light: #56d67f;
+  
+  /* Text Colors */
+  --ui-kit-color-text-primary: #292b32;
+  --ui-kit-color-text-secondary: #757987;
+  --ui-kit-color-text-tertiary: #8c9aac;
+  --ui-kit-color-text-white: #ffffff;
+  
+  /* Background Colors */
+  --ui-kit-color-bg-white: #ffffff;
+  --ui-kit-color-bg-light-1: #f1f3f6;
+  --ui-kit-color-bg-light-2: #e9ebee;
+  --ui-kit-color-bg-light-4: #d2d8e0;
+  --ui-kit-color-bg-light-5: #b4beca;
+  
+  /* Border Colors */
+  --ui-kit-color-border: #b4beca;
+  --ui-kit-color-border-hover: #268644;
+  --ui-kit-color-border-focus: #39aa5d;
+  
+  /* Error Colors */
+  --ui-kit-color-error: #f34831;
+  --ui-kit-color-error-light: #f78272;
+  --ui-kit-color-error-bg: #f0f4f3;
+  
+  /* Disabled Colors */
+  --ui-kit-color-disabled-bg: #e9ebee;
+  --ui-kit-color-disabled-text: #b4beca;
+  --ui-kit-color-disabled-border: #b4beca;
+}
+```
+
+---
+
+## 📝 Общие примечания
+
+- Все переменные имеют значения по умолчанию, поэтому кастомизация опциональна
+- Переменные можно переопределять на разных уровнях: глобально (`:root`), для конкретного компонента (через класс), или для конкретного варианта
+- Базовые токены используются всеми компонентами и должны быть определены в `variables.css`
+- Компонентные переменные определены в соответствующих файлах в `src/lib/assets/css/components/` папке
+
+---
+
+*Последнее обновление: при добавлении новых компонентов*