Акцентный цвет

Классы accent-* задают свойство accent-color — цвет, которым браузер рисует отмеченный флажок, выбранный переключатель, заполненную часть ползунка и полосу прогресса. Берите их, когда стандартный элемент формы без собственного оформления должен совпасть с цветом интерфейса.

Пример

Роли

Под каждой парой — класс на флажке и на переключателе. accent-current берёт цвет текста самого элемента формы, поэтому рядом с ним стоит класс цвета.

HTML

<div class="grid grid-col-2 sm:grid-col-4 gap-4">
  <div class="flex flex-col gap-1 items-start">
    <div class="flex gap-2 items-center">
      <input type="checkbox" class="w-c0 h-c0 accent-primary" checked aria-label="accent-primary, флажок">
      <input type="radio" name="accent-primary" class="w-c0 h-c0 accent-primary" checked aria-label="accent-primary, переключатель">
    </div>
    <code class="text-1/2 color-on-surface-variant">accent-primary</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="flex gap-2 items-center">
      <input type="checkbox" class="w-c0 h-c0 accent-secondary" checked aria-label="accent-secondary, флажок">
      <input type="radio" name="accent-secondary" class="w-c0 h-c0 accent-secondary" checked aria-label="accent-secondary, переключатель">
    </div>
    <code class="text-1/2 color-on-surface-variant">accent-secondary</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="flex gap-2 items-center">
      <input type="checkbox" class="w-c0 h-c0 accent-tertiary" checked aria-label="accent-tertiary, флажок">
      <input type="radio" name="accent-tertiary" class="w-c0 h-c0 accent-tertiary" checked aria-label="accent-tertiary, переключатель">
    </div>
    <code class="text-1/2 color-on-surface-variant">accent-tertiary</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="flex gap-2 items-center">
      <input type="checkbox" class="w-c0 h-c0 accent-on-surface" checked aria-label="accent-on-surface, флажок">
      <input type="radio" name="accent-on-surface" class="w-c0 h-c0 accent-on-surface" checked aria-label="accent-on-surface, переключатель">
    </div>
    <code class="text-1/2 color-on-surface-variant">accent-on-surface</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="flex gap-2 items-center">
      <input type="checkbox" class="w-c0 h-c0 accent-success" checked aria-label="accent-success, флажок">
      <input type="radio" name="accent-success" class="w-c0 h-c0 accent-success" checked aria-label="accent-success, переключатель">
    </div>
    <code class="text-1/2 color-on-surface-variant">accent-success</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="flex gap-2 items-center">
      <input type="checkbox" class="w-c0 h-c0 accent-warning" checked aria-label="accent-warning, флажок">
      <input type="radio" name="accent-warning" class="w-c0 h-c0 accent-warning" checked aria-label="accent-warning, переключатель">
    </div>
    <code class="text-1/2 color-on-surface-variant">accent-warning</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="flex gap-2 items-center">
      <input type="checkbox" class="w-c0 h-c0 accent-error" checked aria-label="accent-error, флажок">
      <input type="radio" name="accent-error" class="w-c0 h-c0 accent-error" checked aria-label="accent-error, переключатель">
    </div>
    <code class="text-1/2 color-on-surface-variant">accent-error</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="flex gap-2 items-center">
      <input type="checkbox" class="w-c0 h-c0 accent-current color-tertiary" checked aria-label="accent-current, флажок">
      <input type="radio" name="accent-current" class="w-c0 h-c0 accent-current color-tertiary" checked aria-label="accent-current, переключатель">
    </div>
    <code class="text-1/2 color-on-surface-variant">accent-current color-tertiary</code>
  </div>
</div>

Наведение

Префикс hover: меняет цвет, пока указатель над элементом. Наведите указатель на флажок и на ползунок.

HTML

<div class="grid grid-col-1 sm:grid-col-2 gap-4">
  <label class="flex flex-col gap-2 items-start">
    <span class="flex gap-2 items-center color-on-surface">
      <input type="checkbox" class="w-c0 h-c0 accent-primary hover:accent-error" checked>
      Наведите указатель на флажок
    </span>
    <code class="text-1/2 color-on-surface-variant">accent-primary hover:accent-error</code>
  </label>
  <label class="flex flex-col gap-2 items-start">
    <input type="range" class="w-full accent-primary hover:accent-success" min="0" max="100" value="60" aria-label="Ползунок с hover:accent-success">
    <code class="text-1/2 color-on-surface-variant">accent-primary hover:accent-success</code>
  </label>
</div>

Классы

Класс	CSS	Значения
`accent-transparent`	`accent-color: var(--sf-transparent)`	—
`accent-current`	`accent-color: var(--sf-current)`	—
`accent-on-surface`	`accent-color: var(--sf-on-surface)`	—
`accent-primary`	`accent-color: var(--sf-primary)`	—
`accent-secondary`	`accent-color: var(--sf-secondary)`	—
`accent-tertiary`	`accent-color: var(--sf-tertiary)`	—
`accent-error`	`accent-color: var(--sf-error)`	—
`accent-warning`	`accent-color: var(--sf-warning)`	—
`accent-success`	`accent-color: var(--sf-success)`	—

Условия (что это): ширина экрана — нет; состояния — hover:. Например: hover:accent-transparent.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Переменные

Классы читают эти токены темы. Изменённый токен меняет все места, где он используется, — классы, компоненты и тему; задайте его в теме проекта, а не на отдельном элементе. Все токены — на странице Все токены.

Переменная	Значение по умолчанию
`--sf-transparent`	`rgba(255,255,255,0)`
`--sf-current`	`currentColor`
`--sf-on-surface`	`light-dark(var(--sf-neutral-10), var(--sf-neutral-90))`
`--sf-primary`	`light-dark(var(--sf-primary-40), var(--sf-primary-80))`
`--sf-secondary`	`light-dark(var(--sf-secondary-40), var(--sf-secondary-80))`
`--sf-tertiary`	`light-dark(var(--sf-tertiary-40), var(--sf-tertiary-80))`
`--sf-error`	`light-dark(var(--sf-error-40), var(--sf-error-80))`
`--sf-warning`	`light-dark(var(--sf-warning-40), var(--sf-warning-80))`
`--sf-success`	`light-dark(var(--sf-success-40), var(--sf-success-80))`

Применение

Свойство наследуется: класс на элементе формы красит только его, класс на обёртке — все флажки и переключатели внутри. Цвет галочки браузер подбирает сам, чтобы она читалась на выбранном акценте.

HTML

<label class="flex gap-2 items-center">
  <input type="checkbox" class="accent-primary" checked>
  Получать уведомления
</label>

Статусные роли подходят для согласия с условиями (accent-success) или опасного действия (accent-error); основной выбор оставляйте на accent-primary. Роли переключаются вместе с темой, поэтому один класс читается и в светлой, и в тёмной теме.

Ограничения

accent-color действует только на элементы, которые браузер рисует сам: checkbox, radio, range, progress. Элементу с appearance-none и компонентам Framework со своей разметкой нужен их собственный цвет.
Форму значка, толщину рамки и размер класс не меняет — это решает браузер.
accent-transparent делает отметку прозрачной, и состояние флажка перестаёт быть видно. Не используйте его без другого признака выбора.

Навигация

Главное

Документация

Содержание

Акцентный цвет

Пример

Роли

Наведение

Классы

Переменные

Применение

Ограничения

См. также

Settings