mi6
Investigate colour selection inconsistencies between components
Summary
Reported in teams channel by Matt C
💬 Description
This issue was reported in the Teams channel by Matt C. There are inconsistencies in how colours are defined and applied across components, which makes it difficult to ensure accuracy when working in Figma and during implementation.
-
Some components use a single default colour that automatically shifts between light and dark mode.
-
Others use separate, explicit colours for light and dark modes.
Worth also having a look at the following confluence page: https://confluence.tdx.gss.gov.uk/spaces/DECKCREW/pages/409583367/ICDS+colour+variables+investigation+by+AUS
Suggested next steps
Audit existing components to document how colour selections are currently applied.
Identify inconsistencies in how light/dark mode colours are defined.
Recommend a standardised approach (e.g., always using tokens with explicit light/dark values vs. relying on defaults).
Propose fixes or guidelines to ensure consistency across the design system.
Made change to Figma for the following components;
- Accordion
- Chip
- Hero
- Popover menu
- Switch
- Tooltip
- Top navigation
- Tree view
Change is Figma-only, no dev change needed. Small change to refer to Material Design icons explicitly in the design rather than localised subset in Styles.
This solves the issue of designers choosing a different icon from Material Design and then having to re-map the imported image to the colour tokens. A quirk of Figma, but this change removes the need for re-mapping.
