Variants
This content is not available in your language yet.
Акцентные цвета (Variants)
Заголовок раздела «Акцентные цвета (Variants)»Акцентные цвета используются для семантического обозначения состояний и действий в интерфейсе. Основаны на токенах дизайн-системы.
Primary
Заголовок раздела «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
Заголовок раздела «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
Заголовок раздела «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 |
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
Заголовок раздела «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 |
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 |
Примеры использования
Заголовок раздела «Примеры использования»<div class="flex gap-2 flex-wrap"> <button class="px-4 py-2 bg-primary-500 text-white rounded hover:bg-primary-600 cursor-pointer active:pulse" > <p>Primary</p> </button> <button class="px-4 py-2 bg-secondary-500 text-white rounded hover:bg-secondary-600 cursor-pointer active:pulse" > <p>Secondary</p> </button> <button class="px-4 py-2 bg-success-500 text-white rounded hover:bg-success-600 cursor-pointer active:pulse" > <p>Success</p> </button> <button class="px-4 py-2 bg-info-500 text-white rounded hover:bg-info-600 cursor-pointer active:pulse" > <p>Info</p> </button> <button class="px-4 py-2 bg-warning-500 text-white rounded hover:bg-warning-600 cursor-pointer active:pulse" > <p>Warning</p> </button> <button class="px-4 py-2 bg-danger-500 text-white rounded hover:bg-danger-600 cursor-pointer active:pulse" > <p>Danger</p> </button></div>PrimarySecondarySuccessInfoWarningDanger
<div class="flex gap-2 flex-wrap"> <span class="px-2 py-1 bg-primary-100 text-primary-700 rounded text-sm"> Primary </span> <span class="px-2 py-1 bg-secondary-100 text-secondary-700 rounded text-sm"> Secondary </span> <span class="px-2 py-1 bg-success-100 text-success-700 rounded text-sm"> Success </span> <span class="px-2 py-1 bg-info-100 text-info-700 rounded text-sm">Info</span> <span class="px-2 py-1 bg-warning-100 text-warning-700 rounded text-sm"> Warning </span> <span class="px-2 py-1 bg-danger-100 text-danger-700 rounded text-sm"> Danger </span></div>