feat(root): add dark variants of Accessibility, Styles images

[GCHQ-Developer-299]

(this is based on the work of #1326)

Summary of the changes

Add dark variants of accessibility, styles pages PNGs. Add helper function passImage to set image based on theme.

Added index pages to each images/ folder to make the importing of images tidier.

This PR does not include images for:

• Each Component page
• Patterns pages (pending image confirmation from design team)

Related issue

issue #1348

Checklist

• I have manually accessibility tested any changes, if relevant.
• I have raised this pull request against the develop branch

[github-actions]

View your branch deployment here: https://mi6.github.io/ic-design-system-githubpages/branches/1348-transfer-dark-mode-images

[GCHQ-Developer-741]

Component Gallery looks fine, but I'm seeing a few issues on the other pages:

1. Some images are only displaying the dark mode variant. Seeing this on /styles/layout-spacing, /styles/templates, /styles/focus-indicator, /accessibility/needs/invisible, /accessibility/needs/motor, /accessibility/needs/neurodiversity, /accessibility/needs/visual, /accessibility/needs/general.
   

2. Some images aren't displaying when switching to dark mode. Only seeing this at /styles/layout-spacing.
   

3. Some images haven't been created correctly. Only seeing this at /accessibility/needs/motor.
   

[GCHQ-Developer-741]

Don't know if this is part of the ticket or was discussed, but are the .mp4 files going to be changed to dark mode as well?

[GCHQ-Developer-847]

Spotted a few more things to add to @GCHQ-Developer-741’s points. I think these will mostly require Figma changes though

1. On the /accessibility/needs/neurodiversity page, the images on the left side of the page look quite fuzzy (especially compared to the ones on the right).

2. On the /accessibility/needs/visual page, when viewed in dark mode, the image on the left has red label text on the first text field (doesn’t match the light mode image or the developed ic-text-field).

3. On the /styles/layout-spacing page, in the dark mode image with the subtitle “Group components into containers…”, the grid and container are not really visible so it’s difficult to understand what the image is showing.

4. On the /styles/focus-indicator page, the white part of the focus indicator in the image is not displayed. Also the image in the “Links” section is not showing at all (both light and dark mode).

Also, the text in a lot of the dark mode images in the component gallery use a different font to when they are in light mode. However, it might take quite a bit of time to fix and it’s not really that noticeable, so I think it would be fine to leave them for now and sort it at a later date?

And I think it would be nice to have the image names in camelCase if possible? It would make them easier to read so it would be quicker to find certain images if we need to make changes in future. However I don't think it's essential and would be happy for them to stay as they are if making them camelCase isn't very easy :)

[GCHQ-Developer-299]

@GCHQ-Developer-847 @GCHQ-Developer-741 thanks for your comments. I've had a go at addressing them today (updating some of the poorly exported images, switching to camelCase) and here are the outstanding issues from my perspective:

• Where dark mode aren't as expected, these will need figma changes so I would have to go back to Design. Would this prevent this PR going in for pre-release? One upside of merging this in would be that the Design team would be able to more easily see which images work and which don't, and update them for us.
• In cases where the dark mode image is displaying in Light Mode, i'm not sure what's happening here. The image files are being correctly imported and passed into the image array. I want to say it's a quirk of the github deployment but I haven't debugged through it to see if it's a code failure

I might put ComponentGallery in its own, smaller PR since it's all good to go, so that something gets into this release

[GCHQ-Developer-741]

@GCHQ-Developer-847 @GCHQ-Developer-741 thanks for your comments. I've had a go at addressing them today (updating some of the poorly exported images, switching to camelCase) and here are the outstanding issues from my perspective:

• Where dark mode aren't as expected, these will need figma changes so I would have to go back to Design. Would this prevent this PR going in for pre-release? One upside of merging this in would be that the Design team would be able to more easily see which images work and which don't, and update them for us.
• In cases where the dark mode image is displaying in Light Mode, i'm not sure what's happening here. The image files are being correctly imported and passed into the image array. I want to say it's a quirk of the github deployment but I haven't debugged through it to see if it's a code failure

I might put ComponentGallery in its own, smaller PR since it's all good to go, so that something gets into this release

I would agree that it could maybe go in for pre-release and the adjustments could be made after the fact on the Figma side, but the dark mode images displaying in Light Mode shouldn't. If it is a deployment issue (I noticed the layout example I included is working now after the changes you made) then hopefully should be fine, but I don't think it should be on the site if they aren't switching correctly.

Also, one thing I have noticed is that the third image I added earlier (on the motor needs page) doesn't line up when put next to each other. Just recording for future amendment as it seems to be a Figma change

[gd2910]

One for designers but this .png is smaller than its light variant, and I'm not sure on the box shadow used on the images as it's not something we implement?

[GCHQ-Developer-299]

Updated the image, although it now has a subtle background to all the text