Цветаlink

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

Основные понятия:

  1. Примитивы (Primitives) — базовые цвета (transparent, white, black, neutral) формируют основу цветовой схемы.
  2. Токены (Tokens) — переменные, использующие примитивы для описания цвета в контексте определённых ролей.
  3. Цветовые роли (Color Roles) — набор именованных цветов, используемых для конкретных задач в интерфейсе. Каждая роль соответствует определённому смыслу или состоянию:
    1. Surface — нейтральная фоновая поверхность.
    2. Primary, Secondary, Tertiary — акцентные цвета для выделения элементов.
    3. Error, Warning, Success — цвета для обозначения ошибок, предупреждений и успеха.
    4. On- цвета (например, on-surface, on-primary) — цвета текста и иконок, предназначенные для использования поверх соответствующих ролей.

Примеры использования:

  • bg-surface-container — фон на основе нейтральной поверхности.
  • color-primary — цвет текста или иконок из роли Primary.
  • border-warning — цвет границы для предупредительных элементов.

Наследуемые цвета:

  • inherit — унаследовать цвет от родительского элемента.
  • current — использовать текущий цвет текста (например, для рамок или иконок, чтобы они совпадали по цвету с текстом).

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