Skip to Content
Разработка шаблоновCSS переменные

CSS переменные

Все цвета, размеры, шрифты и другие стили задаются через CSS переменные. Это позволяет легко кастомизировать тему, переопределяя только нужные значения.

Как переопределить переменные

Создайте файл assets/sass/theme/_variables.scss:

// Светлая тема
:root[data-theme=light] {
    --accent: #6366f1;
    --background: #fafafa;
    --text: #1a1a2e;
}
 
// Темная тема
:root[data-theme=dark] {
    --accent: #818cf8;
    --background: #121212;
    --text: #e0e0e0;
}

Переменные задаются отдельно для светлой (data-theme=light) и темной (data-theme=dark) темы.

Палитра цветов

Акцентный цвет

Основной цвет бренда, используется для кнопок, ссылок, активных элементов:

:root[data-theme=light] {
    --accent: #007aff;           // Основной
    --accent-50: #eff6ff;        // Самый светлый
    --accent-100: #dbeafe;
    --accent-200: #bfdbfe;
    --accent-300: #93c5fd;
    --accent-400: #60a5fa;
    --accent-500: #3b82f6;       // Средний
    --accent-600: #2563eb;
    --accent-700: #1d4ed8;
    --accent-800: #1e40af;
    --accent-900: #1e3a8a;       // Самый темный
    --accent-950: #172554;
}

Цвета статусов

:root[data-theme=light] {
    // Успех
    --success: #22c55e;
    --success-100: #dcfce7;
    --success-500: #22c55e;
    --success-600: #16a34a;
    
    // Ошибка
    --error: #ef4444;
    --error-100: #fee2e2;
    --error-500: #ef4444;
    --error-600: #dc2626;
    
    // Предупреждение
    --warning: #f59e0b;
    --warning-100: #fef3c7;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    
    // Информация
    --info: #3b82f6;
    --info-100: #dbeafe;
    --info-500: #3b82f6;
    --info-600: #2563eb;
}

Цвета интерфейса

:root[data-theme=light] {
    // Фоны
    --background: #ffffff;       // Основной фон страницы
    --secondary: #f8fafc;        // Вторичный фон (карточки)
    --third: #f1f5f9;            // Третичный фон
    
    // Текст
    --text: #0f172a;             // Основной текст
    --text-muted: #64748b;       // Приглушенный текст
    --text-400: #94a3b8;         // Еще более приглушенный
    
    // Прозрачные
    --transp-1: rgba(0,0,0,0.06);    // Легкая тень
    --transp-2: rgba(0,0,0,0.1);     // Средняя тень
    --transp-3: rgba(0,0,0,0.15);    // Заметная тень
}

Типографика

Размеры шрифтов

:root {
    --h1: clamp(2rem, 4vw, 2.5rem);      // Заголовок 1
    --h2: clamp(1.5rem, 3vw, 2rem);      // Заголовок 2
    --h3: clamp(1.25rem, 2.5vw, 1.5rem); // Заголовок 3
    --h4: clamp(1.1rem, 2vw, 1.25rem);   // Заголовок 4
    --h5: 1rem;                           // Заголовок 5
    --h6: 0.875rem;                       // Заголовок 6
    
    --p: 1rem;                            // Обычный текст (16px)
    --small: 0.875rem;                    // Мелкий текст (14px)
    --smaller: 0.75rem;                   // Очень мелкий (12px)
}

clamp() обеспечивает адаптивность: размер масштабируется в зависимости от ширины экрана.

Шрифт

:root {
    --font: 'Manrope', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

Чтобы сменить шрифт:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
:root {
    --font: 'Inter', sans-serif;
}

Высота строки

:root {
    --line-height: 1.6;
    --line-height-heading: 1.2;
}

Отступы (spacing)

:root {
    --space-2xs: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
}

Использование:

.element {
    padding: var(--space-md);           // 16px
    margin-bottom: var(--space-lg);     // 24px
    gap: var(--space-sm);               // 8px
}

Скругления (border-radius)

:root {
    --border05: 6px;     // Маленькое (кнопки, inputs)
    --border1: 12px;     // Среднее (карточки)
    --border2: 16px;     // Большое (модалки)
    --border3: 24px;     // Очень большое
}

Использование:

.card {
    border-radius: var(--border1);
}
 
.btn {
    border-radius: var(--border05);
}
 
// Pill-кнопка
.btn-pill {
    border-radius: 50px;
}

Тени

:root {
    --shadow-small: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

Полный пример: смена палитры

// assets/sass/theme/_variables.scss
 
// Изумрудная палитра
:root[data-theme=light] {
    // Accent — изумрудный
    --accent: #10b981;
    --accent-50: #ecfdf5;
    --accent-100: #d1fae5;
    --accent-200: #a7f3d0;
    --accent-300: #6ee7b7;
    --accent-400: #34d399;
    --accent-500: #10b981;
    --accent-600: #059669;
    --accent-700: #047857;
    --accent-800: #065f46;
    --accent-900: #064e3b;
    
    // Фоны — теплые
    --background: #fefdfb;
    --secondary: #faf8f5;
    --third: #f5f3f0;
    
    // Текст
    --text: #1c1917;
    --text-muted: #78716c;
}
 
:root[data-theme=dark] {
    --accent: #34d399;
    --accent-100: #064e3b;
    --accent-500: #10b981;
    --accent-600: #34d399;
    
    --background: #0c0a09;
    --secondary: #1c1917;
    --third: #292524;
    
    --text: #fafaf9;
    --text-muted: #a8a29e;
}

Использование переменных

// assets/sass/app.scss
 
@import 'theme/variables';
 
.my-card {
    background: var(--secondary);
    color: var(--text);
    padding: var(--space-lg);
    border-radius: var(--border1);
    box-shadow: var(--shadow-medium);
    
    &:hover {
        box-shadow: var(--shadow-large);
    }
}
 
.my-button {
    background: var(--accent);
    color: white;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--border05);
    font-size: var(--p);
    
    &:hover {
        background: var(--accent-600);
    }
}
 
.my-text {
    color: var(--text-muted);
    font-size: var(--small);
    line-height: var(--line-height);
}

Дополнительные переменные

Hover/Focus

:root {
    --focus-ring: 0 0 0 3px var(--accent-200);
}
 
.btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

Эффект blur для header

:root {
    --blurred-background: rgba(255, 255, 255, 0.8);
}
 
:root[data-theme=dark] {
    --blurred-background: rgba(15, 15, 15, 0.8);
}
 
.header {
    background: var(--blurred-background);
    backdrop-filter: blur(20px);
}
Структура темыSCSS система