Interactivity

Accent Color

Utilities for re-tinting the accented color of form controls including checkbox, radio button and, range.

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

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

Usage

Override the checkboxes and radio-buttons browser default style.

Checkbox

Radio

<input class="accent-tint-teal-1 ... width-24 height-24" type="checkbox">
<input class="accent-tint-teal-1 ... width-24 height-24" type="radio">

HTML

.dummy {
  @extend
    .accent-tint-teal-1,
    .width-24,
    .height-24;
}

SCSS