mi6 / mi6/ic-design-system

New content for Theme and Customisation group in Components

Open
#1,663 0 comments 0 reactions 0 assignees View on GitHub
guidance
Dominant language
MDX
Stars
79
Forks
52
Avg merge
18h 58m
Merged PRs (30d)
4

Description

### What component is this related to?
See new component groups ticket

### Description

### Sub pages

#### Theme
Same information as the current [Theme page](https://design.sis.gov.uk/components/theme/#customising-component-colours).

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)

Contributor guide

Open the contributing guide

Research direction

Start with the current Theme page and review the related #1662 Tokens restructure and #1664 Component page grouping issues before planning the new content. Inventory the existing Theme guidance and linked style, pattern, WCAG, policy, and accessibility resources. Done means the Theme and Customize ICDS sections cover the requested theming, monochrome, dark mode, styling, and accessibility guidance with the relevant links and Code-tab example.

Written by the indexing model from the issue text.

Assessment

Domain
accessibility, documentation
Issue type
Documentation
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.