1873883 - Add context properties and inline fill/stroke overrides for feature callout logos/inline icons

Status: NEW

(Firefox :: Messaging System, task, P3)

Description

[Shane Hughes [:aminomancer]]

One way of achieving light and dark modes for SVG illustrations is the use of context properties. We have currentColor context fill for inline icons, but nothing for big illustrations, and that also only lets you make an icon the same color as the text. If you want a light color for light mode and a dark color for dark mode, you'd need to provide 2 separate images.

If an SVG has fill="context-fill" and the element it's displayed on has -moz-context-properties: fill, it will use the color provided by the CSS fill property. And the CSS fill property can be given by an inline style. We could allow the logo JSON to define the fill and apply it as an inline style. That way, an experiment can say something like:

"logo": {
  "fill": "var(--primary-button-bgcolor)",
}

and the color will get light/dark modes, since the CSS variable varies by color scheme.

So what we need is -moz-context-properties rules for the logo elements and a fill handler for the logo react component.

Comment 1

[Shane Hughes [:aminomancer]]

For the upcoming Fakespot experiment (bug 1874047), we've used transparency as a workaround. In the future we'd like to have this capability, but it's not a blocker for an experiment yet.