Градиент темы
Доступно
Медицинское сопровождение
Карточка использует только семантические переменные поверхности, текста, границ и действий.
Design-system foundation
Baby in Brazil UI Tokens
Компоненты используют семантические CSS Custom Properties. Изменение темы мгновенно обновляет весь интерфейс без перезагрузки и без изменения компонентных классов.
6 пресетов + независимый Custom
Actions
Кнопки и состояния
Connected group
Связанная группа кнопок
Единый контрол для переключения представления или фильтра.
Segmented control
Сегментированный выбор
Подходит для взаимоисключающих режимов с сохранением нативной radio-семантики.
Split action
Разделённая кнопка
Основное действие остаётся быстрым, дополнительные варианты открываются рядом.
Варианты
Action menu
Обычный dropdown
Универсальное меню действий с разделителями, метаданными и опасным пунктом.
Forms
Формы и элементы выбора
Кастомный select-box
Полностью контролируемый внешний вид списка и пунктов.
Searchable combobox
Поиск внутри dropdown
Для длинных справочников: врачей, клиник, городов, тегов или категорий.
Выберите врача
Медицинская команда
Ничего не найдено
Multiselect
Множественный выбор
Выбранные значения отображаются чипами, список остаётся открытым до подтверждения.
Необходимые услуги
Ничего не найдено
Surfaces
Карточки и панели
Мягкая панель
Подходит для вторичных блоков и группировки связанных элементов.
Glassmorphism
Размытие, прозрачность, насыщенность и внутренний блик также вынесены в токены.
Foundation primitives
Радиусы, границы, тени, стекло и scrollbar
Базовые визуальные примитивы оформлены как независимые токены и утилитарные модификаторы. Компоненты могут переопределять их локально без изменения темы.
Шкала радиусов
--radius-none--radius-xs--radius-sm--radius-md--radius-lg--radius-xl--radius-2xl--radius-pillТолщина границ
--border-width-0--border-width-1--border-width-2Уровни теней
--shadow-none--shadow-xs--shadow-sm--shadow-md--shadow-lg--shadow-xl--shadow-innerGlassmorphism presets
Subtle
Небольшое размытие и высокая прозрачность для ненавязчивых подложек.
Medium
Базовый стеклянный пресет для панелей, тулбаров и плавающих блоков.
Strong
Усиленное размытие и насыщенность для модальных и hero-поверхностей.
Brand glass
Полупрозрачное брендированное стекло с инверсным текстом.
Scrollbar
Тематический скролл-бар
Размер, фон дорожки, цвет ползунка, hover и радиус управляются токенами.
Density
Размеры контролов
Маленький, стандартный и большой размеры используют единую шкалу высот.
Feedback
Бейджи и уведомления
Основной
Нейтральный
Успешно
Внимание
Ошибка
Информация. Настройки успешно загружены.
Готово. Все обязательные документы проверены.
Внимание. Для продолжения требуется подтверждение.
Ошибка. Не удалось сохранить изменения.
Data display
Списки и варианты таблиц
Одна базовая таблица поддерживает внешнюю рамку, внутренние линии, полную сетку, строки, колонки, плотность, полосатость и фиксированный заголовок.
- Консультация координатораГотово
- Выбор клиникиВ работе
- Проверка документовОжидает
Outer only
Только внешняя рамка
| Клиника | Город | Статус |
|---|---|---|
| Baía Sul Mulher | Florianópolis | Партнёр |
| Santa Helena | Brasília | Доступно |
| Hospital e Maternidade | São Paulo | Каталог |
Inner only
Только внутренние линии
| Услуга | Срок | Цена |
|---|---|---|
| Координация | Весь период | R$ 4 900 |
| Документы | 14 дней | R$ 1 800 |
| Трансфер | По запросу | R$ 280 |
Full grid
Полная сетка и полосы
| Компонент | Токены | Статус |
|---|---|---|
| Button group | action, border, radius | Ready |
| Selectbox | control, dropdown, state | Ready |
| Dropdown | surface, shadow, motion | Ready |
| Table | border, density, sticky | Ready |
Rows only
Линии только по строкам
| Этап | Ответственный | Дата |
|---|---|---|
| Анкета | Координатор | 10 июля |
| Клиника | Медицинский отдел | 12 июля |
| Договор | Юрист | 14 июля |
Columns only
Линии только по колонкам
| Язык | Врач | Координатор |
|---|---|---|
| Português | Да | Да |
| English | Да | Да |
| Русский | Переводчик | Да |
Scrollable table