Construtor de Temas

Cores

Marca principal Marca secundária Marca terciária

@if (!verifyIfItemVisibility()) { }

@switch (itemSelected) { @case ('button') {

Estados

Live demo

Acessibilidade

@if (kindButton === 1) {

} @if (kindButton === 2 || kindButton === 3) {

}

Personalizar

@if (kindButton === 1) {

Border radius:

Padding:

Cor principal:

Cor principal Hover:

Cor da borda:

Cor do texto:

Cor principal Pressed:

} @if (kindButton === 2) {

Border radius:

Padding:

Espessura da borda:

Cor principal:

Cor Principal Hover:

Cor do background Hover:

Cor do background Pressed:

} @if (kindButton === 3) {

Border radius:

Padding:

Cor principal:

Cor principal Hover:

Cor do background Hover:

Cor do background Pressed:

} } @case ('switch') {

Estados

Acessibilidade

Personalizar

Cor principal:

Cor do track ativado:

Cor do track desativado:

Cor do icone:

Cor da borda:

} @case ('disclaimer') {

Estados

Acessibilidade

Personalizar

Tamanho da fonte:

Border radius:

Cor do background:

Cor da borda:

Cor do texto:

Cor do icone:

Background hover para remover:

} @case ('input') {

Estados

Acessibilidade

Personalizar

Tamanho da fonte:

Padding:

Cor da borda:

Cor da borda Hover:

Cor do background:

Cor do background Hover:

Cor do texto:

} @case ('select') {

Estados

Acessibilidade

Personalizar

Tamanho da fonte:

Padding horizontal:

Padding vertical:

Cor da borda:

Cor da borda Hover:

Cor do background:

Cor do background Hover:

Cor do texto:

} @case ('textarea') {

Estados

Acessibilidade

Personalizar

Tamanho da fonte:

Cor da borda:

Cor da borda Hover:

Cor do background:

Cor do background Hover:

Cor do texto:

} @case ('dropdown') {

Estados

Acessibilidade

Personalizar

Tamanho da fonte:

Border radius:

Espessura da borda:

Padding:

Cor principal:

Cor principal Hover:

Cor do background Hover:

} @case ('datepicker') {

Estados

Acessibilidade

Personalizar

Padding:

Tamanho da fonte:

Padding do botão:

Cor da borda:

Cor do background:

Cor do texto:

Cor da borda Hover:

Cor do botão:

Cor do background Hover do botão:

Cor do botão hover:

} @case ('link') {

Estados

Acessibilidade

Personalizar

Cor do link não visitado:

Cor do link visitado:

Cor do outline:

} @case ('tooltip') {

Estados

Acessibilidade

Personalizar

Cor:

Cor do texto:

Border radius:

} @case ('modal') {

Estados

Acessibilidade

Personalizar

Border radius:

Espessura da borda:

Opacidade do overlay:

Cor do background:

Cor da borda:

Cor do overlay:

Cor do separador:

} @case ('popup') {

Estados

Acessibilidade

Personalizar

Cor do background:

Cor do texto:

Cor do texto hover:

Background hover:

} @case ('radio') {

Estados

Acessibilidade

Personalizar

Cor Principal:

Cor do background:

Cor da sombra:

Cor da borda:

} @case ('checkbox') {

Estados

Acessibilidade

Personalizar

Cor Principal:

Cor do background:

Cor da sombra:

Cor da borda:

} @case ('multiselect') {

Estados

Acessibilidade

Personalizar

Tamanho da fonte:

Cor da borda:

Cor da borda Hover:

Cor do background:

Cor do background Hover:

Cor do texto do placeholder:

Cor Focus:

Cor Disabled:

} @case ('combo') {

Estados

Acessibilidade

Personalizar

Tamanho da fonte:

Cor da borda:

Cor da borda Hover:

Cor do background:

Cor do background Hover:

Cor do texto:

Cor do texto do placeholder:

Cor Focus:

Cor Disabled:

} @case ('accordion') {

Estados

Live demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Acessibilidade

Personalizar

Tamanho da fonte:

Cor do background:

Cor do background Hover:

Cor do background Pressed:

Cor do texto:

Cor do texto Hover:

Cor do texto Pressed:

Cor do texto Focus:

Cor Disabled:

Cor do texto Disabled:

} @case ('breadcrumb') {

Estados

Acessibilidade

Personalizar

Cor página atual:

Cor do ícone de separação dos links:

Cor do ícone de agrupamento dos links:

} @case ('tag') {

Estados

Acessibilidade

Personalizar

Border radius:

Tamanho da fonte:

Line height:

Cor da tag:

Cor do texto da tag:

@if (tagSelected === 6) {

Cor da borda:

}

@if (tagSelected === 6) {

Cor Hover:

Cor Disabled:

Cor do texto Disabled:

Cor da borda Disabled:

}

} }

Nível de Contraste

Texto normal

Texto grande

Gráficos

Nenhum componente selecionado

Customizando cores do tema padrão

Dúvidas sobre as possíveis customizações? Entre em contato com o time PO-UI pelo GitHub