[radio,checkbox] Use accent-color

[astronautintheocean]

The CSS accent-color property is used to specify the accent color for user-interface controls such as checkboxes, radio buttons, range, and progress elements. It has been shipped and available in all major browsers. With accent-color we could easily change the "selected" state without implementing hacks.

https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color

Actual Behaviour

It looks like Spectrum uses .spectrum-Checkbox-box together with some svg files in order to generate the highlighted state:

<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" />
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Checkmark100" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Dash100" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>

New Behaviour

Above markup could be simplified to:

<label class="spectrum-Checkbox spectrum-Checkbox--sizeM">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" />
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>

with below CSS changes:

1. spectrum-Checkbox: remove vertical-align and min-block-size; add align-items: center
2. spectrum-Checkbox-input: remove opacity, position, block-size, inline-size, and margin; add accent-color
3. spectrum-Checkbox-label: remove margin-block-start

for example:

.spectrum-Checkbox {
  align-items: center;
  color: var(--highcontrast-checkbox-content-color-default, var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default)));
  display: inline-flex;
}

.spectrum-Checkbox-input {
  accent-color: var(--spectrum-checkbox-control-selected-color-default);
  cursor: pointer;
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
}

.spectrum-Checkbox-label {
  text-align: start;
  margin-inline-start: var(--mod-checkbox-text-to-control, var(--spectrum-checkbox-text-to-control));
  font-size: var(--mod-checkbox-font-size, var(--spectrum-checkbox-font-size));
}

Results

default

invalid

[castastrophe]

Very cool idea! Our current approach leverages design tokens which outline very specific values and states in a way that keeps us consistent across implementations. I'm going to close this issue for now but we've noted the idea for future enhancements.