Info colors are inconsistent

Polaris
1

Hi,

When using the info colors, it is quite inconsistent. Icon and text have different colors, and both are using a blue that is found nowhere in the admin (I would have expected the info to re-use the same colors as link):

<s-stack direction="inline">
    <s-icon type="product" tone="info"></s-icon>
    <s-text tone="info">Text</s-text>
  </s-stack>

Output:

image
image288×110 1.07 KB

2

Hey again @bakura10 :waving_hand: - thanks for flagging this, I’ll bring this to the team and loop back with you here to see if this is expected (I can’t say for sure, but I think you’re correct that this may be unintended).

I’ll touch base with you in the thread here once I have more info as always!

4

Hey again @bakura10! :waving_hand:

Got some clarity from the team on this one! My understanding is that this is actually intentional behaviour, but it is confusing for sure.

The different blue colors you’re seeing are by design - the icon-info color token uses azure[11] while the text-info color token uses azure[15]. The reason for this difference is that icons and text have different contrast requirements for accessibility, so they need slightly different shades to meet those standards.

If you want to have them display with the same colour, the team suggested a couple of approaches:

  1. Nest the icon inside the text component - This way the icon will inherit the color from the text:
<s-text tone="info">
  <s-icon type="product"></s-icon>
  Text
</s-text>
  1. Use the same token for both - If you need to keep them as siblings, you could apply the same color token (like text-info) to both elements through custom styling.

Hope this helps clarify things! Let me know if I can clarify anything more on my end here :slightly_smiling_face: