Акцентные цвета (Variants)
Акцентные цвета используются для семантического обозначения состояний и действий в интерфейсе. Основаны на токенах дизайн-системы.
Primary
50
100
200
300
400
500
| Класс | Токен |
|---|---|
bg-primary-50 ... bg-primary-500 | --color-primary-50 ... --color-primary-500 |
text-primary-50 ... text-primary-500 | --color-primary-50 ... --color-primary-500 |
Secondary
50
100
200
300
400
500
| Класс | Токен |
|---|---|
bg-secondary-50 ... bg-secondary-500 | --color-secondary-50 ... --color-secondary-500 |
text-secondary-50 ... text-secondary-500 | --color-secondary-50 ... --color-secondary-500 |
Success
50
100
200
300
400
500
| Класс | Токен |
|---|---|
bg-success-50 ... bg-success-500 | --color-success-50 ... --color-success-500 |
text-success-50 ... text-success-500 | --color-success-50 ... --color-success-500 |
Info
50
100
200
300
400
500
| Класс | Токен |
|---|---|
bg-info-50 ... bg-info-500 | --color-info-50 ... --color-info-500 |
text-info-50 ... text-info-500 | --color-info-50 ... --color-info-500 |
Warning
50
100
200
300
400
500
| Класс | Токен |
|---|---|
bg-warning-50 ... bg-warning-500 | --color-warning-50 ... --color-warning-500 |
text-warning-50 ... text-warning-500 | --color-warning-50 ... --color-warning-500 |
Danger
50
100
200
300
400
500
| Класс | Токен |
|---|---|
bg-danger-50 ... bg-danger-500 | --color-danger-50 ... --color-danger-500 |
text-danger-50 ... text-danger-500 | --color-danger-50 ... --color-danger-500 |
Примеры использования
Кнопки
Бейджи
PrimarySecondarySuccessInfoWarningDanger