Set icons fills to Grey 90 a80/Grey 90 a60

[aminalhazwani]

Set the fill color of icons globally to Grey 90 a80 for primary icons and Grey 90 a60 for secondary icons (see https://design.firefox.com/photon/visuals/color.html#icons-and-other-elements). Would be interesting to consider if this is something we should handle on a component level or on the tokens side of things (https://github.com/FirefoxUX/photon-icons).

This change will then be reflected in the icon fill color of a ghost button for example https://firefoxux.github.io/photon-components-web/?selectedKind=Button&selectedStory=Ghost&full=0&addons=1&stories=1&panelRight=0&addonPanel=lmorchard%2Fcodesample%2Fpanel which is now set to context-fill but should be set to Grey 90 a80.

[lmorchard]

How will this interact with potential themes (#67)?

[lmorchard]

To elaborate on concerns with this vs themes - it seems like we might need some tooling to build variants of SVGs with different fill colors. We're mostly using these icons with background-image in CSS and we can't set the fill colors for those SVGs from CSS.

[meandavejustice]

We can build this into photon-components-web but it would be ideal to have the tooling in the upstream repo.

cc/ @bwinton as he is a maintainer on photon-icons

[meandavejustice]

photon-icons.json contains all of data we should need.

We would need to get confirmation that these are the only fills we'll need to include.

 "fills": [
    "blue-40",
    "blue-50",
    "context-fill",
    "green-60",
    "grey-10-a60",
    "grey-10-a80",
    "grey-90-a60",
    "grey-90-a80",
    "red-60",
    "white-100",
    "yellow-60"
],

@aminalhazwani Shared this link in our channel today, and I think it could be a good structure the photon-icons repo, as people will want to include specific themes or only a couple of icons in their project. proposal: publish-one-npm-package-instead-of-multiple-npm-packages by govuk-design-system-architecture