Recentemente, precisei fazer alguns ajustes nas cores do design system do nosso aplicativo e me deparei com uma situação em que tínhamos algumas variáveis de cores nomeadas como white, black, gray e red.
No entanto, como teremos múltiplos temas no futuro, não seria viável manter a mesma nomenclatura para todas as cores.
Por exemplo, a cor white, que tem o valor hexadecimal #fff em um tema, poderia ter o valor #000 em outro tema. Semanticamente, isso não é ideal.

Então decidi renomear todas as cores. Para me orientar nesse processo, pesquisei e contei com a ajuda da Karina Tronkos, que me passou os seguintes conteúdos:

How Should You Name Your Colors in a Design System?

Entendendo Sistema de Cores Semântico, Especificação de Cores e Naming

Com base nessas referências, fiz as seguintes mudanças:

Antes:

white: #fff
black: #000
red: #cf0000
gray50: #e3e5e4
gray100: #f0f4f2

Depois:

summaryBackground: #fff
summaryText: #fff
base: #000
baseText: #000
error: #cf0000
alert: #cf0000
neutral50: #e3e5e4
neutral100: #f0f4f2

Essa nova nomenclatura atende muito bem às nossas necessidades.

Dividi algumas cores entre background e texto, pois no futuro podemos ter cores diferentes para cada um deles. Também separei as cores de alerta e erro por causa da mesma razão. O gray, por ser uma cor neutra com várias variações, agora está agrupado como neutral, com cada variação indicada.

Espero ter ajudado de alguma maneira.