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.
Top comments (0)