getStableColor

Детерминированно выбирает цвет из палитры темы (--theme-stable-color-1 … --theme-stable-color-8) по переданной строке: одна и та же строка всегда даёт один и тот же цвет — во всех списках, сессиях и приложениях. Возвращает CSS-значение вида var(--theme-stable-color-N).

Применим везде, где сущности нужен постоянный узнаваемый цвет: аватары, метки, теги, календарные события.

import { getStableColor } from "@tulls/ui/helpers";

getStableColor("Tulls User"); // "var(--theme-stable-color-1)"
getStableColor("Дементьева Алина"); // "var(--theme-stable-color-2)"

Автоматически в Avatar

Если color не передан, а children — строка, Avatar.Fallback сам вычисляет цвет через getStableColor: у каждого имени — свой стабильный цвет без ручной настройки. Контрастный цвет инициалов компонент подбирает к любому цвету палитры автоматически.

<Avatar.Root>
  {/* фон var(--theme-stable-color-1) */}
  <Avatar.Fallback>Tulls User</Avatar.Fallback>
</Avatar.Root>

Стабильный цвет по UUID

Цвет, вычисленный из имени, «переедет» при переименовании пользователя. Чтобы цвет был привязан к пользователю навсегда, передавайте в хелпер его id и отдавайте результат явно через color:

<Avatar.Fallback color={getStableColor(user.id)}>{user.name}</Avatar.Fallback>

// user.id = "6f9619ff-8b86-d011-b42d-00c04fc964ff" → var(--theme-stable-color-6)