mi6 / mi6/ic-ui-kit

[ic-theme] Implement a contrast prop with high and low options

Open
#3,707 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

### Summary
The outcome of https://github.com/mi6/ic-ui-kit/issues/3675 is to add a `contrast` prop to the ic-theme component to offer high and low contrast modes to users who are unable to set it through browser/system settings.

### 💬 Description
We'll need colours/tokens for:

- Low contrast light theme (off-black on off-white)
- Low contrast dark theme (off-white on off-black)
- High contrast light theme (few colours, just black on white, basically following `forced-colors: active` colours we use at the moment)
- High contrast dark theme (few colours, just white on black, basically following `forced-colors: active` colours we use at the moment)

Whilst my suggestion is to use the colours we use currently for high contrast, it's worth checking that every colour works in light theme high contrast mode because we don't have Cypress tests checking for that.

### 💰 Use value

Customers have asked for this. Creates consistency and improves the overall design system accessibility wise.

### Additional info
Full outcome from initial investigation is internal.

Contributor guide

Open the contributing guide

Research direction

Start at the ic-theme component and inspect the existing forced-colors styles and color tokens. Check the current Cypress coverage for high-contrast light mode. Done means high- and low-contrast light and dark modes are available through the contrast prop, with the relevant colors working and tests covering the stated cases.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, design, frontend
Issue type
Feature
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.