mi6
New content for Theme and Customisation group in Components
What component is this related to?
See new component groups ticket
Description
Sub pages
Theme
Same information as the current Theme page.
Add a link to colour contrast guidance to help users select appropriate colours (or create a ticket if this guidance has not been added to the site) and the "Toggle dark mode" pattern.
Update the monochrome guidance to explain why the monochrome prop exists. This could be in the form of use/don't use (tick and cross) picture examples with a component on a coloured background that only meets contrast requirements if monochrome is used, with one picture showing the monochrome variant and the other showing the component without monochrome set. Consider linking to relevant WCAG success criteria for contrast requirements.
Add guidance on consider the user's system settings
Additionally, add an example of using the monochrome variant of a component to the Code tab, with developer-specific guidance to help users know when they should be using the monochrome prop.
Customize ICDS
This is guidance-only (no code).
Explain that custom components can be styled to fit in with ICDS components.
Provide a set of cards with links to necessary information and a quick overview of what the linked information is for:
- Style tokens (Styles > Tokens)
- Icons and images (styles)
- Page and component layout (patterns) or just the main patterns page
Explain that some components have built-in customisation options (e.g. respond to changes in branding or have css props like --input-width).
Accessibility section: explain that ICDS components have been tested for accessibility, but users are responsible for ensuring that any customisation meets accessibility policy. Provide links to the policy and "Testing for accessibility" on the main Accessibility page.
Why do we need it?
Provides a central location for developers to access guidance on theming, branding, dark mode and styling custom components to look like ICDS components using our Style tokens and patterns.
🚨 Urgency (low, medium or high)
Priority 4/5
Related open issues
After #1662 (Tokens restructure) After #1664 (Component page grouping)
