Prism
Tokens, componentes y primitivas de diseño para Designed.org. Cada ejemplo en esta página es el componente real y en vivo — no una captura de pantalla — tomado directamente de src/prism/.
Color
Alias semánticos primero — los componentes deben usar estos, no un tono directamente (ver el comentario de src/prism/tokens.css sobre por qué). Los tonos de marca y la escala neutra de abajo respaldan esos alias.
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
Tonos de marca
Purple
--prism-color-purple
Blue
--prism-color-blue
Pink
--prism-color-pink
Yellow
--prism-color-yellow
Green
--prism-color-green
Escala de grises
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
Tipografía
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"
Espaciado
Una escala base simple de 4px — ver el comentario de tokens.css sobre por qué esto reemplaza los antiguos tokens $spacing-1..9, que llevaban un !important literal en cada valor.
Íconos
El conjunto de íconos de línea de la navegación (src/icons/nav-icons.tsx) — datos de rutas de Lucide, copiados como SVG simple en lugar de agregar lucide-react como dependencia para ~25 íconos. Compartido entre la navegación antigua y el Header/Footer propios de Prism, por lo que vive fuera de src/prism/ propiamente dicho; reexportado desde aquí para seguir siendo parte de la superficie pública de 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
Enlace
Enlaces de texto en línea — distintos del propio variant="link" de Button, que es un control con forma de botón que simplemente parece texto. Ver src/prism/primitives/Link.tsx.
underline="hover" (default)
Insignia
all variants
Tarjeta
Predeterminada
padding="md" (predeterminado), sin comportamiento al pasar el cursor.
Interactiva
interactive — se eleva y gana sombra al pasar el cursor. Pruébala.
Avatar
tamaños, y un respaldo cuando no hay foto disponible