Closed aminalhazwani closed 1 month ago
How will this interact with potential themes (#67)?
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.
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
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
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.