Intro
As cores semânticas são cores específicas com significados predefinidos e estabelecidos por padrões, como o Material Design ou a Apple Human Interface Guidelines. Essas cores são usadas para transmitir mensagens específicas, como alerta de erro, ênfase na importância de um elemento ou indicação de status de progresso.
Anatomia
As cores semânticas são usadas como camada de aplicação final no design, em muitos casos essas cores aparecem mais frequentes que as cores de paletas, ou seja, as cores semânticas são compostas pelas paletas, mas com intenção nos elementos e componentes.
Aplicações das cores semânticas:
- Componentes
- Buttons
- Cards
- Textfields
- Shapes
- Backgrounds
- Overlays
- Surfaces
- Elements
- Textos
- Paragraphys
- Links
- Alerts
- Bordas
- Iconografia
Componentes
As cores disponíveis para composição dos componentes podem ser usadas por intenção considerando estados, estilos e tipos diferentes que o componente possa conter.
Novamente por ser uma escala aplicada aos espaçamentos entre elementos ele possuí uma escala menor de valores para serem aplicados, isso não quer dizer que não possa usar outro valor arbitrário, basta seguir a regra usando o token de –ms-spacing-base*número desejado e obter o valor mais adequado para seu design.