Estou falando sobre uma pequena estrutura de cores que é usada em nosso DS. Primeiro, como de costume, uma pequena revisão das melhores práticas e, em seguida, minha bicicleta. Vamos em ordem.
Quantas flores você precisa
Nossos "clientes" de cores são designer de produto, marketing e desenvolvimento.
O que um simples designer precisa para ser feliz?
O que um marketing precisa?
O que o desenvolvimento precisa?
Ok, quantos tons de cada cor você precisa? Não é a pergunta mais fácil, aliás.
Método 1
Para fazer isso uma vez e isso é o suficiente, eles geralmente fazem o seguinte:
/ - ( ), . - , .
- , — :
2
, , . .
— , 49 , , , , , , , .
, :
—
, , , ?
,
- . , , . - .
3
. Default, hover, pressed, .. . , , — - .
-
Color name / Default
Color name / Hover
Color name / Disabled
. .
. , . , , - .
2 :
— . .
Base — ;
BG — ;
Functional — .
— . .
Brand — , ;
Promo — -.
, -, . . , .
. — , — , - . , .
.
.
, , .
.
- - , : , . .
, . , , , .
— .
, , .
, , . , .
, - . , , - . , , , . "" .
, , . "" .
, " ", . , .
:
/ / _ / Tea / Solid / Base / Primary_Inverted / Default Sugar / Gradient / Brand / Secondary / Up
Há uma opinião de que os tokens devem ter a mesma nomenclatura na figma e no código. Mas nem tudo é tão simples. Os padrões de cores na figma e no layout são diferentes. Ao fazer tudo igual, vamos dobrar o designer e obter curvas do conjunto de cores da Figma com as quais será difícil para ele trabalhar. Portanto, para as cores, vale a pena descrever a convenção de nomenclatura, que descreverá os princípios pelos quais as cores são nomeadas na figma e como essa nomenclatura deve ser transferida para o código. Como resultado, todos devem estar bem.
A ideia com os turnos foi espiada no esquema de cores Opium.Fill .