Presets
Prism, Ink, Avalonia e Simple: o que cada um muda, e como começar um quinto.
Quatro presets vêm prontos. Cada um é um tema completo, com os tokens de todos os componentes nos dois esquemas de cores, cada um é um ponto de partida para definePreset, e todo template deste site pode ser visto em qualquer um deles, porque um tema se julga melhor trabalhando do que numa amostra. Um quinto é um objeto: veja temas.
Prism
O visual nativo da web: primária azul, cantos de 6px, um halo de foco suave e uma sombra sob cada sobreposição. É o preset do qual todos os outros são uma diferença, e aquele para o qual os tokens de componente são desenhados primeiro.
Primária azulCantos de 6pxSombras suavesAnel de foco em halo
Ink
Cor reservada para o que tem significado: o botão primário é tinta sobre o branco e papel sobre o preto, as bordas são linhas finas e a única sombra é a que fica sob um popover. O anel de foco fica a dois pixels do controle, com a cor da página entre eles.
Primária em tintaBordas finasAnel de foco afastadoUma sombra, usada com parcimônia
Avalonia
O visual de desktop: um destaque #0078d4, preenchimentos de controle que deixam a janela transparecer, uma linha de destaque de dois pixels sob a caixa de texto em foco, um anel de foco em dois tons e uma pílula de destaque na linha selecionada de uma lista.
Azul de destaquePreenchimentos translúcidosLinha de destaque no focoPílula de seleção
Simple
Para as telas que são lidas o dia inteiro: cantos retos, preenchimentos cinza nos controles com borda cinza média, um tamanho de texto compacto de 13px e transições totalmente desligadas, para que nada se mova enquanto você trabalha.
Cantos retosTexto de 13pxSem sombrasSem animação
Começando do zero
import { definePreset, palette, Base } from '@vitral/vue';
// Base is the preset the others are built on: every component's tokens,
// with nothing opinionated about the look.
export const House = definePreset(Base, {
semantic: {
primary: palette('#0f766e'),
focusRing: { width: '1px', offset: '1px' }
}
});