Use design token in GlInputRadio and GlInputCheckbox for checked and indeterminate SVGs

Description

There are three icons which we used for the checked and indeterminate states of checkboxes and radio buttons:

  1. $gl-icon-check
  2. $gl-icon-indeterminate
  3. $gl-icon-radio

They're used in the Checkbox Stylesheet File.

All three icons have fill or stroke values set to white. Instead of hardcoding white, we want to use the design token var(--gl-control-indicator-color-selected). This design token is already set as background color since !4337 (merged). But it takes no effect, as it is overridden by the stroke and fill values of the SVGs.

AFAIK it is not possible to use CSS Custom properties in url() values of background.

The task is to find out how to replace the hardcoded white with the value of the design token var(--gl-control-indicator-color-selected).

More Context

The following discussion from !4337 (merged) should be addressed:

  • @vanessaotto started a discussion: (+6 comments)

    Hi @danmh, @jerasmus, this MR is now ready for review.

    While working on it, I stumbled over one thing with the selected indicator color. I don't think this is blocking this MR, but wanted to raise awareness.

    output

    🔉 Sound on

Checklist

Make sure the following are completed before closing the issue:

  1. Assign the correct component label to this issue.
  2. Create an MR with the additions or updates needed.
  3. Be sure to get your MR reviewed by a FE/UX Foundations designer.
  4. When applicable, create an MR in Pajamas to update the demos. If you do not have capacity to complete the demos, create an issue in Pajamas and bring the issue to your team planning session for prioritization and scheduling. Mark the issue as related to this one.
  5. When applicable, create an MR in Pajamas to update the component status.
  6. When applicable, create an issue in Pajamas using the "Component Documentation" issue template to update guidelines. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling.
  7. When applicable, create an issue in Pajamas using the "Figma update" issue template to update the Figma UI Kit. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling.
  8. When introducing a major or breaking change, communicate the changes within the Engineering Week in Review.
  9. 🎉 Congrats, you made it! You can now close this issue.
Edited by Vanessa Otto