Color of exclamation mark in the status icon gets lighter as the size decreases

[fbarroso24]

Title line template: [Title]:

Color of exclamation mark in the status icon gets lighter as the size decreases

What package(s) are you using?

"@carbon/ibm-products": "1.13.0"

• [ ] Carbon for IBM Products (or Carbon for IBM Cloud & Cognitive)
• [ ] Legacy/CDAI
• [ ] Legacy/Security

Detailed description

Describe in detail the issue you're having. Regarding the Status Icon component, the color of the exclamation mark gets lighter as the size of the icon gets smaller. This behavior is also observed in the story book. See 1st screenshot of the progression from sm->md->lg->xlg .

The spec (2nd screenshot) says the light and dark themes for the major-warning icon should be the same regardless of light or dark theme but doesn't mention anything about the exclamation point progressively getting darker.

       <StatusIcon
	        iconDescription='low score'
	        kind='major-warning'
	        size='sm'
	        theme='light'
        />

Is this issue related to a specific component? Yes the StatusIcon component

What did you expect to happen? What happened instead? What would you like to see changed?

What browser are you working in? Chrome 100.0.4896.88

What version of the @carbon/ibm-products (or @carbon/ibm-cloud-cognitive) package are you using? "@carbon/ibm-products": "1.13.0"

What offering/product do you work on? Any pressing ship or release dates we should be aware of? OpenPages

Steps to reproduce the issue

It is reproducible on the storybook online https://carbon-for-ibm-products.netlify.app/?path=/story/ibm-products-patterns-status-icons-statusicon--default&args=kind:major-warning

Additional information

• Screenshots or code
• Notes

[fbarroso24]

@AlexanderMelox any updates on this one? Thanks in advance!

[paul-balchin-ibm]

The source of the problem is not that the assigned colors are changing as the icon gets smaller.

The problem is the browser’s rendering engine. To provide smoother, cleaner graphics, the browser uses anti-aliasing to “smooth” adjacent pixels to reduce “jagged edges”.

As an example, I enlarged your screenshot. Notice how, as the icon gets smaller and smaller, the rendering doesn’t just “smooth” the shape of the exclamation point, but also the difference between the orange and black colors.

Anti-aliasing is a great feature for producing smoother images and icons, but the penalty is that small details will lose both definition and color.

This is something that cannot be fixed by web developers.