Стандарты применения цветов в компонентах

В системе Q.Palette существует набор компонентов, к которым может применяться тот или иной цвет в зависимости от статуса этого компонента.

Такие цвета назыаются Severeties или просто "Цветовые индикаторы". Всего их 4.

Примечание: В исходных данных были обнаружены небольшие опечатки в названиях переменных (использовался дефис вместо нижнего подчёркивания). В таблице исправлено на корректный формат CSS-переменных.

Основные цвета

• Primary - Синего цвета. Стандартный. Используется для вывода информации не несущей особой важности.
• Success - Зеленого цвета. Говорит об успешной операции или о том, что, например, работа успешно завершена или будет звершена в срок. Так же может использоваться для подсветки важности задачи (Как правило, низкая).
• Warning - Оранжевый цвет. Цвет предупреждения. Говорит о том, что операция может сорваться или, например, что работа не будет успешно завершена в срок. Так же может использоваться для подсветки важности задачи (Например, средняя важность)
• Danger - Красный цвет. Цвет сигналящий о том, что что-то пошло не так. Обычно говорит об ошибке или предупреждает о том, что работа не была завершена или не будет завершена в срок.

Дополнительные цвета

Если статусов выше недостаточно предусмотрены дополнительные цвета:

• Info
• Burgundy
• Pink
• Turquoise
• Violet
• Purple
• Grey
• Ui

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

Диалоговые окна

Основная цветовая схема применима для диалоговых окон. С помощью основных цветов вы можете явно предупредить пользователя о совершаемом действии.

Primary Dialog

Стандартное отображение диалогового окна - информционное или вывод формы / лукапа.

Success Dialog

Подтверждает успешное действие.

Warning Dialog

Диалог-предупреждение.

Danger Dialog

Сообщает об ошибке или предупреждает пользователя о том, что объект будет безвозвратно удален.

Всплывающие сообщения (Toasts)

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

Basic Toast

Информирующее всплывающее сообщение. Оповещает пользователя о незначительной информации.

Success Toast

Подтверждает успешное действие.

Warning Toast

Всплывающее сообщение-предупреждение.

Danger Toast

Сообщает об ошибке или предупреждает пользователя о том, что объект убдет безвозвратно удален.

Информационные сообщения (Messages)

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

Основное применение такое же как у тостов или диалоговых окон - важность зависит от цвета.

Выделение текста цветом

В таблицах текст выделяется красным, если дата или, например, трудозатраты просрочены или превышены.