💡 Proposal - colors tokens naming convention and migration

In order to make our pallet scalable, we are thinking about the new approach to color tokens naming.

Currently we expose colors tokens in the following way (it’s the case in most of the cases, some exceptions are there, like colorsElements, where the naming is slightly different, but still similar):

'color-blue-dark': '#174E8C', 
'color-blue-base': '#2D64B3', 
'color-blue-mid': '#2E75D4', 
'color-blue-light': '#84B9F5', 
'color-blue-lightest': '#EDF4FC',

The upcoming update of the pallete would look like this for all the colors: Based on that it would be maybe useful to migrate colors into slightly different naming convention.

Approach to the migration

Proposed tokens naming convention. We would have new tokens for GREY, BLUE, GREEN, RED, PURPLE, ORANGE, YELLOW in the following convention:

blue-900: #003297
blue-800: #00379F
blue-700: #0044AF
blue-600: #0059C8
blue-500: #036FE3
blue-400: #40A0FF
blue-300: #93CCFF
blue-200: #CBEDFF
blue-100: #DCF2FF

Colors Mapping for existing tokens and deprecation cases

1. blue, green, purple, red, yellow will be mapped the same as blue. We could export both current colors with mapping and new color tokens, example for blue shades 👀 ➡️ https://gist.github.com/burakukula/73a3169063d5cee1c476127e1db2ddb8

2. grey - we would expose additional, new tokens and colors-contrast, colors-elements, colors-text will be mapped with those new tokens, something like that 👀 ➡️
   https://gist.github.com/burakukula/1d038f1481af414a12a41e00844c0722

3. Deprecate or remove coral, ice, mint and peach

• 🔪 option 1: add deprecation note to those colors and map them to new shades from red, blue, green, and orange (@fabe maybe you could help out here). Remove those colors in v5.
• 🔪 option 2: remove colors in v4 and add documentation for customers to which colors they should migrate they use those shades (we are using only colorIceMid - 3 times in the code - which we should migrate to other color anyway. We can do it even now, before the color migration).

1. Maybe we should deprecate semantic colors - open question to @fabe @domarku and Daniel (I don’t know his GitHub profile 😬)

Proposed migration plan:

1. Add new tokens and export both, old and new tokens
2. Add deprecation note for old tokens and create migration documentation plan for customers
3. Migrate tokens in our applications slowly (or hackathon style like last time 😁)
4. Remove old tokens in v5

Open questions:

• maybe we would be able to provide some sort of script to allow customers to migrate their tokens to new namespaces?
• what should we do with colors that we would like to get rid of - coral, ice, mint, peach and semantic colors - remove now or depracate and remove in v5?

[domarku]

@denkristoffer

I’m not sure it’s a good idea for us to plan for v5 changes already That’s a good point!

@damann the token names are not going to contain hex values, that’s just the mapping

[domarku]

That sounds like a good plan!