Interactivity

Text Highlight

Utilities for overrides browser-level or system-level text highlight color to an elements.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
hightlight-`{color}`	::selection { background: `{color}`;

class
fore-shade-`{palette}`-`modifier`	See:Palette page to find more about the color options (Shades, Tones, Tints), color manipulations (saturation, brightness, contrast), and transparency.
fore-tone-`{palette}`-`modifier`
fore-tint-`{palette}`-`modifier`

class
rear-shade-`{palette}`-`modifier`	See:Palette page to find more about the color options (Shades, Tones, Tints), color manipulations (saturation, brightness, contrast), and transparency.
rear-tone-`{palette}`-`modifier`
rear-tint-`{palette}`-`modifier`

Usage

Try to drag and highlight all the text below to see different colors highlighted.

Lorem ipsum dolor sit amet

<div class="highlight fore-shade-teal-1 rear-tint-teal-4">
  ...
</div>

HTML

.dummy {
  @extend
    .highlight,
    .fore-shade-teal-1,
    .rear-tint-teal-4;
}

SCSS