Prism
Tokens, componentes e primitivas de layout para a Designed.org. Cada exemplo nesta página é o componente real e ao vivo — não uma captura de tela — retirado diretamente de src/prism/.
Cor
Aliases semânticos primeiro — os componentes devem usar esses, não um tom diretamente (veja o comentário do próprio src/prism/tokens.css sobre o porquê). Os tons de marca e a escala neutra abaixo dão suporte a esses aliases.
Semântico
Primary
--prism-color-primary
Primary hover
--prism-color-primary-hover
Accent
--prism-color-accent
Accent hover
--prism-color-accent-hover
Success
--prism-color-success
Warning
--prism-color-warning
Danger
--prism-color-danger
Info
--prism-color-info
Tons de marca
Purple
--prism-color-purple
Blue
--prism-color-blue
Pink
--prism-color-pink
Yellow
--prism-color-yellow
Green
--prism-color-green
Escala de cinza
50
--prism-color-gray-50
100
--prism-color-gray-100
200
--prism-color-gray-200
300
--prism-color-gray-300
400
--prism-color-gray-400
500
--prism-color-gray-500
600
--prism-color-gray-600
700
--prism-color-gray-700
800
--prism-color-gray-800
900
--prism-color-gray-900
Tipografia
Heading — h1 / display
Heading — h2 / xl
Heading — h3 / lg
Heading — h4 / md
Heading — h5 / sm
Heading — h6 / xs
Text size="lg" — for lead paragraphs.
Text size="base" — the default body copy size.
Text size="sm" color="muted" — captions, metadata.
Text weight="semibold"
Espaçamento
Uma escala base simples de 4px — veja o comentário do próprio tokens.css sobre por que isso substitui os antigos tokens $spacing-1..9, que traziam um !important literal em cada valor.
Ícones
O conjunto de ícones de linha da navegação (src/icons/nav-icons.tsx) — dados de caminho da Lucide, copiados como SVG simples em vez de adicionar lucide-react como dependência para ~25 ícones. Compartilhado entre a navegação legada e o próprio Header/Footer do Prism, por isso fica fora do src/prism/ propriamente dito; reexportado daqui para continuar fazendo parte da superfície pública do Prism.
newspaper
calendar
graduationCap
flaskConical
messageSquareText
headphones
users
messageCircle
folderKanban
briefcase
route
info
heart
handshake
gift
shoppingBag
circleHelp
search
rocket
settings
shield
lightbulb
circleCheck
triangleAlert
Link
Links de texto embutidos — diferentes do próprio variant="link" do Button, que é um controle em formato de botão que apenas parece texto. Veja src/prism/primitives/Link.tsx.
underline="hover" (default)
Selo
all variants
Cartão
Padrão
padding="md" (padrão), sem comportamento ao passar o mouse.
Interativo
interactive — eleva e ganha sombra ao passar o mouse. Experimente.
Avatar
tamanhos, e um substituto para quando não há foto cadastrada