mi6 / mi6/ic-ui-kit

[ic-badge] - Review styling of badge in High Contrast mode

Open
#2,169 0 comments 0 reactions 0 assignees View on GitHub
badge component good first issue
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

## Summary
The current styling of ic-badge in high contrast mode should be reviewed.

## 💬 Description
With the current styling, it is hard to distinguish the badge. For example:
![image](https://github.com/user-attachments/assets/0202a4bb-71b6-48f4-a973-555a216fb127)

there are a few possible options to explore:

1) could an outline be added around the badge?
2) should the badge detail use the high contrast text colour? For example, MUI does this:
![image](https://github.com/user-attachments/assets/122afba0-fe3a-4d23-8c66-b8785293d005)

3) Should the colour change depending on the variant? Currently an "error", "warning", etc variant all display the same & have no visual difference in high contrast mode. This is inconsistent with other components such as ic-alert and validation on -ic-text-field:
![image](https://github.com/user-attachments/assets/b5a4535c-66d1-4d55-af7e-8821dc452ec2)

## 📝 Acceptance Criteria
To be defined when review complete

*Given*
*When*
*Then*

## ✏ Designs
If there's a Figma design file (or other mock-up), include it here.

## Additional Info
Can be investigated by development, but may want to run the solutions past design

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the ic-badge high-contrast styling described in the issue and compare it with ic-alert and validation on -ic-text-field. Evaluate the outline, high-contrast text colour, and variant-specific colour options, then confirm the preferred approach with design. Done means the review has a decided direction and defined acceptance criteria.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.