Adapt time-slice selection in High Contrast Mode.

[nchevobbe]

Make sure the start and end grips look like button, make the
outbound of the selection even dimmer and add border to make
the selection super obvious.

Using registered property we can get the rgb component from
given values that we can then turn into SVG filters that
we can then apply on top of the icon we use, in CSS.
The time-slice zoom icon takes advantage of this new capability
to adapt to High Contrast Mode.

---

	dark	light
timeslice selected, end "grip" is hovered
hovered zoom icon
active zoom icon

[nchevobbe]

I'm curious about your opinion on the second commit to have more control hover the icon colors

[mstange]

I think the filter solution is fine but you could use <feFlood> and <feComposite> so that you don't have to parse the rgba syntax. Example:

<filter id="--button-icon-color" color-interpolation-filters="sRGB">
  <feFlood flood-color="red"/>
  <feComposite operator="in" in2="SourceAlpha"/>
</filter>

[mstange]

Oh, I found an even better solution! You can use FillPaint in combination with the fill property! I didn't realize this worked for HTML elements, too.

<filter id="--use-fill-color" color-interpolation-filters="sRGB">
  <feComposite operator="in" in="FillPaint" in2="SourceAlpha"/>
</filter>

fill: green;
filter: url(#--use-fill-color);

[nchevobbe]

Oh, I found an even better solution! You can use FillPaint in combination with the fill property! I didn't realize this worked for HTML elements, too.

<filter id="--use-fill-color" color-interpolation-filters="sRGB">
  <feComposite operator="in" in="FillPaint" in2="SourceAlpha"/>
</filter>

fill: green;
filter: url(#--use-fill-color);

Unfortunately this doesn't seem to work in Chromium browser. Would have been nice!

I think the filter solution is fine but you could use <feFlood> and <feComposite> so that you don't have to parse the rgba syntax. Example:

<filter id="--button-icon-color" color-interpolation-filters="sRGB">
  <feFlood flood-color="red"/>
  <feComposite operator="in" in2="SourceAlpha"/>
</filter>

Ah yes that's better, I'll do that

[nchevobbe]

I don't really know flow, so not sure what's needed to please it here