Типография

1. Шрифты и начертания
2. Заголовки
• h1
• h2
• h3
• h4
3. Дополнителньные стили
• .lead например
4. Учитывать в типографии, что все текстовые блоки и текстовые страницы идут через .prose с дефолтной типографией, поэтому на каждый проект придумать что-то новое крайне нежелательно. Заголовки меняем ок, он межсточные расстояния, отсупы для каждого тэга, списки и тд прописать сомнительно. Пример.

Цвета

Основной цвет бренда

• --color-primary - основной цвет для главных кнопок, ключевых действий
• --color-primary-content - контрастный текст на основном фоне

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

• --color-secondary - второстепенные кнопки, иконки, подписи
• --color-secondary-content - текст на дополнительном фоне

Акцентный цвет

• --color-accent - ховеры, спец. состояния, выделение
• --color-accent-content - текст на акцентном фоне

Нейтральные цвета

• --color-neutral - границы, разделители, неактивные элементы
• --color-neutral-content - текст на нейтральном фоне

Базовые фоны (светлая тема)

• --color-base-100 - основной фон приложения
• --color-base-200 - фон для карточек, модальных окон
• --color-base-300 - ховер-состояния, глубокие возвышения
• --color-base-content - основной цвет текста

Статусные цвета

• --color-info - информационные сообщения, подсказки
• --color-info-content - текст на информационном фоне
• --color-success - успешные действия, подтверждения
• --color-success-content - текст на фоне успеха
• --color-warning - предупреждения, осторожные действия
• --color-warning-content - текст на предупреждающем фоне
• --color-error - ошибки, критические сообщения
• --color-error-content - текст на фоне ошибки

Доп общие переменные

• /* border radius */
• --radius-selector: 1rem;
• --radius-field: 0.25rem;
• --radius-box: 0.5rem;
• /* base sizes */
• --size-selector: 0.25rem;
• --size-field: 0.25rem;
• /* border size */
• --border: 1px;
• /* effects */
• --depth: 1;
• --noise: 0;

Кнопки

По цветам:

По типу (btn-soft):

btn-outline:

btn-dash:

btn-ghost + btn-link + btn-wide + disabled + btn-square + btn-circle:

Размеры по умолчанию от значения --size-field: но можно кастом

И так ко почти ко всему

Формы

Алерты