[Bug]: <Tag> carbon component hiding the content passed to it

[KKNithin]

Package

@carbon/react

Browser

Chrome

Package version

v1.63.1

React version

v18.3.0

Description

Title: carbon component hiding the content passed to it
Reason/Findings:
Below is the sample tag with type 'high-contrast' and the tag content passed as text with length 27 [Threshold after which we see the issue]

<Tag type={'high-contrast'}>
        {'abcdabcdabcdabcdabcdabcdabcd'}
</Tag>

• If I add few more characters then the string starts to fade

• Also, when the background is white then the whole content is hidden.

https://github.com/user-attachments/assets/e6cccf34-11ce-4c47-88c3-c40401502a66

Reproduction/example

https://stackblitz.com/edit/github-imeakrob?file=README.md

Steps to reproduce

• modify the text length using characters to see the issues [attaching a clip to show how I did it]

Carbon._Tag_.issue-20241218_123812-Meeting.Recording.1.mp4

Suggested Severity

Severity 1 = Must be fixed ASAP. The response must be swift. Someone from the team must drop all current work and be immediately reassigned to address the issue.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems