Кастомные темы

Slim Select строится вокруг минималистичной DOM-структуры и предсказуемого набора CSS-классов, что делает систему оформления управляемой и расширяемой без вмешательства в JavaScript-логику. Основная идея кастомных тем заключается в отделении визуального слоя от поведения компонента, где вся стилизация реализуется через переопределение классов, использование каскада и CSS-переменных.

Базовая модель стилизации

Компонент после инициализации создаёт собственную структуру DOM, в которой ключевые элементы получают фиксированные классы:

  • контейнер селекта
  • область отображения выбранного значения
  • выпадающий список
  • элементы списка
  • состояния (disabled, open, active, selected)

Эта структура позволяет строить темы как набор переопределений, не затрагивая внутреннюю логику библиотеки.

Основной контейнер обычно получает класс вида:

.ss-main

Выпадающий блок:

.ss-content

Элементы списка:

.ss-list
.ss-option

Состояния:

.ss-disabled
.ss-open
.ss-selected
.ss-highlighted

Такое разделение обеспечивает точечную кастомизацию каждого визуального слоя.

Переопределение базовой темы

Кастомизация чаще всего начинается с переопределения базовых стилей. Slim Select поставляется с дефолтным набором правил, которые можно перекрыть через более специфичные селекторы или подключение отдельного CSS-файла, загружаемого после стандартного стиля библиотеки.

Пример базового переопределения:

.ss-main {
  border-radius: 8px;
  border: 1px solid #2d2d2d;
  background-color: #1e1e1e;
  color: #eaeaea;
  min-height: 42px;
}

Изменение визуального поведения выпадающего списка:

.ss-content {
  border-radius: 8px;
  background-color: #1b1b1b;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

Переопределение опций списка:

.ss-option {
  padding: 10px 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ss-option:hover {
  background-color: #2a2a2a;
}

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

Более гибкий подход к темизации строится на использовании CSS-переменных. Slim Select не навязывает строгую систему токенов, поэтому переменные могут быть определены на уровне корневого элемента или контейнера.

Пример декларации темы:

:root {
  --ss-bg: #121212;
  --ss-surface: #1e1e1e;
  --ss-border: #333;
  --ss-text: #e6e6e6;
  --ss-hover: #2b2b2b;
  --ss-primary: #4f9cff;
}

Применение переменных в стилях:

.ss-main {
  background-color: var(--ss-surface);
  border: 1px solid var(--ss-border);
  color: var(--ss-text);
}

.ss-content {
  background-color: var(--ss-bg);
}

.ss-option:hover {
  background-color: var(--ss-hover);
}

.ss-option.ss-selected {
  background-color: var(--ss-primary);
  color: #fff;
}

Такой подход позволяет переключать темы без дублирования правил, изменяя только набор переменных.

Темная и светлая темы через переключение классов

Управление темами часто реализуется через добавление класса на корневой элемент приложения или body. Slim Select наследует стили контекста, что позволяет переключать внешний вид без пересоздания экземпляра.

Пример структуры:

<body class="theme-dark">
  <select class="slim-select"></select>
</body>

Стили для светлой и тёмной темы:

.theme-dark .ss-main {
  background-color: #1a1a1a;
  color: #f0f0f0;
  border-color: #333;
}

.theme-light .ss-main {
  background-color: #ffffff;
  color: #111;
  border-color: #ddd;
}

Дополнительно переопределяются состояния:

.theme-dark .ss-option:hover {
  background-color: #2a2a2a;
}

.theme-light .ss-option:hover {
  background-color: #f2f2f2;
}

Кастомизация состояния компонентов

Состояния играют ключевую роль в визуальной целостности интерфейса. Slim Select использует отдельные классы для отражения логики взаимодействия.

Открытое состояние:

.ss-main.ss-open {
  border-color: var(--ss-primary);
}

Неактивный элемент:

.ss-option.ss-disabled {
  opacity: 0.4;
  pointer-events: none;
}

Выбранный элемент:

.ss-option.ss-selected {
  font-weight: 600;
  background-color: var(--ss-primary);
}

Подсветка навигации с клавиатуры:

.ss-option.ss-highlighted {
  background-color: var(--ss-hover);
}

Чёткое разделение состояний позволяет строить сложные темы без изменения JavaScript-логики компонента.

Управление размерами и плотностью интерфейса

Темизация часто включает настройку плотности элементов. Slim Select не фиксирует высоту элементов, поэтому поведение контролируется через CSS.

Компактный вариант:

.ss-main {
  min-height: 34px;
  font-size: 13px;
}

.ss-option {
  padding: 6px 10px;
}

Расширенный вариант:

.ss-main {
  min-height: 48px;
  font-size: 15px;
}

.ss-option {
  padding: 12px 16px;
}

Такая вариативность позволяет адаптировать компонент под плотные таблицы или крупные формы.

Скругления, тени и визуальная иерархия

Визуальная иерархия темы формируется через сочетание радиусов, теней и границ.

.ss-main {
  border-radius: 10px;
}

.ss-content {
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

Для более строгих интерфейсов:

.ss-main,
.ss-content {
  border-radius: 0;
  box-shadow: none;
}

Интеграция с дизайн-системами

Slim Select легко интегрируется в существующие дизайн-системы за счёт полного контроля над классами. Часто используется привязка к токенам дизайн-системы:

.ss-main {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  color: var(--ds-text-primary);
}
.ss-option.ss-selected {
  background: var(--ds-accent);
}

Такой подход обеспечивает консистентность с остальными компонентами интерфейса.

Темизация через scoped-контейнеры

При использовании нескольких селектов с разными визуальными стилями применяется контейнерная изоляция:

<div class="select select--primary">
  <select></select>
</div>

<div class="select select--danger">
  <select></select>
</div>
.select--primary .ss-main {
  border-color: #4f9cff;
}

.select--danger .ss-main {
  border-color: #ff4f4f;
}

Это позволяет применять разные темы внутри одного интерфейса без глобальных конфликтов.

Адаптивность в рамках тем

Темы часто включают поведение под разные размеры экрана. Slim Select не навязывает адаптивную модель, поэтому управление осуществляется через media queries.

@media (max-width: 600px) {
  .ss-main {
    font-size: 14px;
    min-height: 40px;
  }

  .ss-content {
    border-radius: 0;
  }
}

На мобильных устройствах часто уменьшается глубина теней и упрощается визуальная иерархия для снижения нагрузки на интерфейс.

Темизация через JavaScript-инициализацию

Некоторые параметры можно комбинировать с CSS через добавление классов при инициализации:

new SlimSelect({
  select: '#select',
  classBefore: 'ss-theme-dark'
});

Далее стили привязываются к этому классу:

.ss-theme-dark .ss-main {
  background-color: #111;
  color: #eee;
}

Такой способ позволяет динамически переключать темы на уровне экземпляра компонента.

Расширенные паттерны визуальной кастомизации

При построении сложных интерфейсов используются комбинированные техники:

  • переменные для глобальных токенов
  • scoped-классы для локальных тем
  • переопределение состояний для интерактивности
  • media queries для адаптивности

Пример комбинированного подхода:

:root {
  --accent: #5aa9ff;
}

.select--analytics .ss-main {
  border-left: 3px solid var(--accent);
}

.select--analytics .ss-option.ss-selected {
  background: var(--accent);
}

Управление визуальной консистентностью

При масштабировании интерфейса важна унификация поведения всех состояний. Slim Select обеспечивает одинаковую модель классов, что позволяет строить единые правила:

.ss-main,
.ss-content,
.ss-option {
  transition: all 0.15s ease;
}

Согласованная анимация создаёт единое восприятие интерфейса вне зависимости от темы.

Перекрытие дефолтных стилей библиотеки

В ряде случаев требуется полное отключение стандартной стилизации:

.ss-main {
  all: unset;
  display: block;
}

После этого строится полностью кастомная визуальная модель. Такой подход используется в рамках дизайн-систем с жёсткими требованиями к внешнему виду компонентов.

Оглавление