Primitives
28
Mark
Highlighted text — a wash of the accent behind the words. The text colour is left alone on purpose: repainting it as well is how a highlight ends up unreadable.
plain markup — no library on the page
Matches are highlighted in place.
Code
index.html
<p class="aura-text aura-text--body">
Matches are <mark class="aura-mark">highlighted</mark> in place.
</p>The markup above is the whole API — there is no wrapper in any of the four packages, because a component here would set a class and add nothing. Write it as it stands, in whichever framework you are in.
Props
Plain markup has no props — the classes below are the whole API. The four packages do nothing more than set these same classes for you.
Emitted classes
Every framework emits the same classes — that is what makes the four libraries look identical. You can use them directly, without any component library.
| Class | Role | Notes |
|---|---|---|
| .aura-mark | base | Required. A modifier does nothing without it. |
Tokens and rules
components.css- wash
- color-mix(var(--accent) 22%, transparent)
- text
- inherit — never repainted