Neumorfismo

O neumorphism é soft UI: cada superfície é a própria página, e um controlo destaca-se só pela luz e pela sombra — em relevo sobre a página, ou afundado nela. Mantém duas coisas de que este estilo costuma abdicar, texto que cumpre WCAG AA e o contorno de foco, e segue o modo escuro como tudo o resto. Precisa, no entanto, que o fundo da própria página seja var(--su-bg), porque o efeito assenta em ambos terem a mesma cor.

Um cartão

A mesma marcação, com outro estilo graças a uma só folha.

  1. Conta

  2. Perfil

  3. Confirmar

Progresso50%
50
Guardado
As suas alterações já estão publicadas.
Copiado para a área de transferência
O que é um preset?
Uma segunda folha que muda o estilo de todos os componentes de uma vez.
Segue o modo escuro?
Sim — experimenta o interruptor no topo da página.
Ainda posso usar o theme()?
Sim, e ele prevalece sobre o preset.

  1. Hoje

    Preset publicado

    O aspeto todo, numa chamada.

  2. Ontem

    Documentação escrita

  3. Segunda-feira

    Primeiro esboço

O aspeto todo, numa chamada.
Liga-o depois da folha principal.
Uma opção: preset.
RascunhoPublicadoArquivado
AL312GH

Como usar

import { styles } from 'sitelo/ui'

head(
  title('O meu site'),
  styles({ preset: 'neumorphism' }),
)
// <link rel="stylesheet" href="/su/ui-c9428b65.css">
// <link rel="stylesheet" href="/su/neumorphism-5d0e7b91.css">
body {
  background: var(--su-bg);
}

As tuas próprias cores

O theme() continua a funcionar por cima, por isso um preset é um ponto de partida e não um fork. Este acrescenta uma décima ranhura a cada paleta, glow — a cor em que a ponta de uma barra de progresso ou de um interruptor se desvanece — para que um novo primário possa trazer a sua.

head(
  styles({ preset: 'neumorphism' }),
  theme({
    primary: { base: '#7c3aed', hover: '#6d28d9', active: '#5b21b6', glow: '#e879f9' },
  }),
)