tokens: Update to core palette

[randybascue]

Description

We're updating the core color tokens to adhere to our new palette to improve accessibility, flexibility, and brand expression. This includes updates to semantic token references. 

Screenshots

Resources

Migration tables

Token table

Engineering pre-requisites

• Successful design review with Design System Team.
• Supports dark mode.
• Supports responsive design.
• Tokens have been provided (or already exist).
• Successful accessibility review with Core A11Y Team.
• Successful frontend review with eBayUI Team.

[ArtBlue]

@randybascue , I'm a bit confused. Are we renaming core tokens as well? For example, we currently have this:

--color-neutral-0: #fff;

You have that now listed as this:

color.core.neutral.100: #FFF

[randybascue]

@ArtBlue Correct, the core palette is updated as well

[ArtBlue]

@randybascue , I'm not seeing this color in the Figma.

Is there some sort of a table or list that has a mapping of current token to new token? That would be really helpful.

[randybascue]

Yes! I'll grab that table for you

[ArtBlue]

Also, a bit confused about this. The token next to the color is one thing, but the token in the right panel is something else. Which one should we be using?

[randybascue]

The visual name is correct. I'm not sure why that file is trying to use variables since it doesn't have access to the core variables

[ArtBlue]

Thanks, @randybascue . Any luck on that table? Our code freeze is tomorrow. If we can get that soon, we can get this into the release.

[randybascue]

We have a visual migration table that shows some of the less intuitive mappings, like lime to avocado. (we didn't want to overload on citrus 😉)

[ArtBlue]

Thanks, @randybascue ! That's very helpful!

[ArtBlue]

@randybascue , is this a mistake or intentional? Two distinct colors are being renamed to a single token with the same color.

[randybascue]

@ArtBlue I believe it was intentional. Checking with Ryan now

[ratinsl]

Yes, that is correct! Those two "green" colors were very close to each other and the closest color was Kiwi 600. Kiwi 500 and Kiwi 700 are both to drastic of a change - which is why they both visually map to the same new color.

The same thing happens in the Lime to Avocado visual migration.

[ArtBlue]

@randybascue , @ratinsl , in that case, shouldn't we be using only one of those tokens? it seem very odd to have 2 tokens pointing to the same color.

[ArtBlue]

@randybascue , @ratinsl , another questions...

I don't see lime in the new core tokens and this transition is only moving only some of the current tokens. Are we sunsetting lime-1, lime-5, and lime-6.

[ratinsl]

Hi @ArtBlue,

Ultimately - there are a lot of instances in which the old color palette was used which included old names like lime, etc... We have two color tables meant to help devs with the color migration. The first one - which I think is the one web already did was the core and other semantic tokens.

The table you are referencing in the ticket is the "visual migration" table we created which is different. This table is to map old colors "visually" to new ones. The purpose of this was to be sure that when new colors are used - the old designs don't get negatively impacted by wide color shifts - so we found what new colors are as close as possible to the old.

In the lime case - if someone used either Lime 3 or Lime 4 in say a banner or marketing ad on the site - that banner/ad would now get Avocado 500. This is because Avocado 500 is visually the closet match to what the old Lime 3/4 colors were.

[ratinsl]

And yes, lime 1, 5, 6 are no longer going to be used. If you already added the core colors - this visual migration table is meant to help "point" the old colors/names - to their visual partners in the new system.