Polaris-react: [Color system] purple

[danrosenthal]

Context

Purple and its variants are only used two times in the system.

• Icon (purple variant)
• Avatar (purple variant)

Usage

• Lighter #F6F0FD - 0
• Light #E3D0FF - 0
• Purple #9C6ADE - 2
• Dark #50248F - 0
• Darker #230051 - 0
• Text #50495A - 0

Recommendation

Remove purple Icon and Avatar variants and :fire: purple and each of its variants from the system.

[kaelig]

Codename: purpless 💟

[danrosenthal]

Components

|icon|
|-|
||

[ry5n]

According to the style guide on color usage:

“Purple is used as our primary graphing color. It is not used in other types of data visualization such as trend signifiers.”

@mirualves Can you confirm if this is still true of data visualization work you’ve seen recently?

If true, we shouldn’t necessarily remove it from the design system until we can replace it with a more complete color paletter for data viz.

[mirualves]

That's correct. Purple #9C6ADE (RGB 156, 106, 222) is the primary color for data visualization in Overview dashboard, sparklines on Reports index, bar/line charts on Reports, and Customer behavior chart on Live view.
It also shows up on the Live view box at the top of the Home page.

[danrosenthal]

This is great context, thanks @ry5n and @mirualves!

[danrosenthal]

Closed in favor of https://github.com/Shopify/polaris-react/issues/1593