Примитивы
28
Mark
Выделенный текст — акцентная подложка под словами. Цвет самого текста сознательно не трогается: если перекрасить и его, выделение станет нечитаемым.
чистая разметка — библиотеки на странице нет
Matches are highlighted in place.
Код
index.html
<p class="aura-text aura-text--body">
Matches are <mark class="aura-mark">highlighted</mark> in place.
</p>Разметка выше и есть весь API: обёртки нет ни в одном из четырёх пакетов, потому что компонент здесь поставил бы класс и не добавил ничего. Пишите её как есть, в любом фреймворке.
Пропсы
У чистой разметки нет пропсов — классы ниже и есть весь API. Четыре пакета не делают ничего сверх того, что проставляют вам те же самые классы.
Какие классы отдаёт
Все фреймворки отдают одни и те же классы — именно поэтому четыре библиотеки выглядят одинаково. Их можно использовать напрямую, вообще без библиотеки компонентов.
| Класс | Роль | Примечания |
|---|---|---|
| .aura-mark | база | Обязательный. Без него модификатор не работает. |
Токены и правила
components.css- подложка
- color-mix(var(--accent) 22%, transparent)
- текст
- inherit — never repainted