Цвета

Лейблы, статусы и смарт-лейблы поддерживают настраиваемые цвета через тип EntityColor. Цвета могут ссылаться на дизайн-систему темы (автоматически адаптируясь к светлому/тёмному режиму) или задавать явные пользовательские значения.

Тип EntityColor

Поле color в конфигурациях сущностей принимает две формы:

Системные цвета

Ссылка на одно из 5 цветов дизайн-системы по имени. Они сопоставляются с CSS-переменными, определёнными вашей темой, поэтому автоматически адаптируются к светлому и тёмному режиму.

{
  "color": "accent"
}

Доступные имена системных цветов:

Системные цвета с непрозрачностью

Добавьте /{opacity} к любому имени системного цвета, где opacity — значение от 0 до 100:

{
  "color": "foreground/50"
}

Это отобразится как полупрозрачная версия системного цвета. Полезно для приглушённых или вторичных состояний.

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

• "accent/80" — акцент с 80% непрозрачностью
• "destructive/60" — красный с 60% непрозрачностью
• "foreground/30" — очень ненавязчивый цвет текста

Пользовательские цвета

Укажите явные CSS-значения цвета с помощью объекта, содержащего light и необязательно dark:

{
  "color": {
    "light": "#EF4444",
    "dark": "#F87171"
  }
}

Если dark опущен, он автоматически выводится из light:

• Hex-цвета: Осветляются за счёт смешивания с белым на 30%
• Другие форматы (OKLCH, RGB, HSL): Используются как есть — укажите dark явно для лучших результатов

{
  "color": {
    "light": "#3B82F6"
  }
}

Форматы цветов

Пользовательские цвета принимают любой допустимый CSS-формат цвета:

Рекомендация: Используйте OKLCH для перцептивно равномерных цветов. Для простых случаев hex с автоматически выводимым тёмным вариантом отлично подходит.

Где используются цвета

Лейблы

Лейблы отображаются как цветные круги. Поле color управляет цветом круга:

{
  "id": "bug",
  "name": "Bug",
  "color": "destructive"
}

{
  "id": "feature",
  "name": "Feature",
  "color": {
    "light": "#8B5CF6",
    "dark": "#A78BFA"
  }
}

Лейблы без поля color отображаются как приглушённый круг цвета текста.

Статусы

Статусы используют цвет для своих иконок и визуальных индикаторов:

{
  "id": "in-progress",
  "label": "In Progress",
  "color": "success",
  "category": "open"
}

Цвета статусов по умолчанию (применяются, когда color не указан):

Смарт-лейблы

Смарт-лейблы поддерживают поле color:

{
  "id": "smart-error",
  "name": "ERROR",
  "color": "destructive",
  "expression": "hasError == true"
}

Связь с темой

Системные цвета (accent, info, success, destructive, foreground) ссылается на те же CSS-переменные, которые определяет ваша тема. Это означает:

• Цвета сущностей автоматически адаптируются при смене темы
• Статус с "color": "accent" будет фиолетовым с темой по умолчанию, но синим, если вы переопределите акцент на синий
• Пользовательские цвета ({ light, dark }) не зависят от темы

Справочник OKLCH

Для пользовательских цветов в формате OKLCH: oklch(lightness chroma hue)

Распространённые оттенки:

• Красный: ~25
• Оранжевый: ~70
• Жёлтый: ~100
• Зелёный: ~145
• Циан: ~195
• Синий: ~250
• Фиолетовый: ~293
• Розовый: ~330

Примеры

Минимальный — системный цвет

{ "color": "success" }

Приглушённое состояние

{ "color": "foreground/40" }

Брендовый цвет с явным тёмным вариантом

{
  "color": {
    "light": "oklch(0.55 0.20 250)",
    "dark": "oklch(0.70 0.18 250)"
  }
}

Hex с автоматически выводимым тёмным режимом

{
  "color": {
    "light": "#059669"
  }
}

Советы

Начинайте с системных цветов

Системные цвета — самый простой вариант: они автоматически адаптируются к темам и режимам. Используйте пользовательские цвета только при необходимости конкретного брендового цвета или оттенка, не охваченного пятью системными цветами.

Используйте непрозрачность для иерархии

foreground/50 и foreground/30 полезны для приглушённых, вторичных или отключённых состояний без введения новых цветов.

Проверяйте в обоих режимах

Если используются пользовательские цвета, всегда проверяйте отображение в светлом и тёмном режимах. Указывайте явные значения dark для лучших результатов с не-hex форматами.

Цвет не применяется?

• Убедитесь, что поле color находится на верхнем уровне конфигурации сущности (не вложено)
• Имена системных цветов чувствительны к регистру: используйте "accent", а не "Accent"
• Непрозрачность должна быть от 0 до 100 (не от 0 до 1): используйте "foreground/50", а не "foreground/0.5"
• Объекты пользовательских цветов требуют как минимум поля light