Дизайн-система

Все визуальные свойства управляются через CSS custom properties (--vtk-*). Переопределяйте их глобально в :root, для конкретного контейнера, либо передайте объект ToastDesignTokens через проп theme.

Встроенные темы

<!-- Светлая (по умолчанию) -->
<ToastContainer theme="light" />

<!-- Тёмная -->
<ToastContainer theme="dark" />

<!-- Следует prefers-color-scheme -->
<ToastContainer theme="system" />

Инлайн-переопределение токенов

Передайте объект ToastDesignTokens, чтобы переопределить конкретные токены, не трогая глобальный CSS:

<ToastContainer
  :theme="{
    colorBg: '#1a1a2e',
    colorText: '#e2e8f0',
    colorSuccess: '#00ff88',
    colorError: '#ff4d6d',
    borderRadius: '16px',
    shadow: '0 8px 32px rgba(0, 0, 0, 0.5)',
    maxWidth: '360px',
  }"
/>

Полный справочник токенов

Токен	CSS-переменная	По умолчанию (светлая)	Описание
colorBg	--vtk-color-bg	#ffffff	Фон тоста
colorText	--vtk-color-text	#1a1a1a	Основной цвет текста
colorBorder	--vtk-color-border	rgba(0,0,0,0.08)	Цвет границы
colorSuccess	--vtk-color-success	#16a34a	Акцент успеха
colorError	--vtk-color-error	#dc2626	Акцент ошибки
colorWarning	--vtk-color-warning	#d97706	Акцент предупреждения
colorInfo	--vtk-color-info	#2563eb	Акцент инфо
colorLoading	--vtk-color-loading	#7c3aed	Акцент загрузки
fontFamily	--vtk-font-family	system-ui	Стек шрифтов
fontSize	--vtk-font-size	0.875rem	Базовый размер шрифта
fontWeight	--vtk-font-weight	400	Базовая насыщенность шрифта
lineHeight	--vtk-line-height	1.4	Высота строки
borderRadius	--vtk-border-radius	10px	Радиус скругления углов
borderWidth	--vtk-border-width	1px	Толщина границы
shadow	--vtk-shadow	многослойная	Тень
paddingX	--vtk-padding-x	1rem	Горизонтальный отступ
paddingY	--vtk-padding-y	0.75rem	Вертикальный отступ
iconSize	--vtk-icon-size	1.25rem	Размер иконки
progressHeight	--vtk-progress-height	3px	Высота прогресс-бара
maxWidth	--vtk-max-width	400px	Максимальная ширина тоста
minWidth	--vtk-min-width	280px	Минимальная ширина тоста
transitionDuration	--vtk-transition-duration	300ms	Длительность анимации
transitionEasing	--vtk-transition-easing	ease	Функция плавности анимации
zIndex	--vtk-z-index	9999	z-index контейнера

Глобальное переопределение CSS

/* styles/toasts.css */
:root {
  --vtk-border-radius: 6px;
  --vtk-font-family: 'Inter', sans-serif;
  --vtk-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  --vtk-max-width: 360px;
}