Prism
Tokens, Komponenten und Layout-Primitiven für Designed.org. Jedes Beispiel auf dieser Seite ist die echte, live funktionierende Komponente — kein Screenshot — direkt entnommen aus src/prism/.
Farbe
Semantische Aliase zuerst — Komponenten sollten diese verwenden, nicht direkt einen Farbton (siehe den Kommentar in src/prism/tokens.css für den Grund). Die Markenfarben und die neutrale Skala unten stützen diese Aliase.
Semantisch
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
Markenfarben
Purple
--prism-color-purple
Blue
--prism-color-blue
Pink
--prism-color-pink
Yellow
--prism-color-yellow
Green
--prism-color-green
Graustufen
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
Typografie
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"
Abstände
Eine einfache 4px-Basisskala — warum diese die alten $spacing-1..9-Tokens ersetzt, die ein literales !important in jedem Wert enthielten, erfahren Sie im Kommentar von tokens.css.
Symbole
Der Satz an Linien-Icons der Navigation (src/icons/nav-icons.tsx) — Pfaddaten von Lucide, als einfaches SVG kopiert, anstatt lucide-react als Abhängigkeit für ~25 Icons hinzuzufügen. Wird zwischen der alten Navigation und Prisms eigenem Header/Footer geteilt und liegt daher außerhalb von src/prism/ selbst; wird von hier aus reexportiert, damit es weiterhin Teil der öffentlichen Oberfläche von Prism ist.
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
Inline-Textlinks — zu unterscheiden von Buttons eigener variant="link", einem knopfförmigen Steuerelement, das lediglich wie Text aussieht. Siehe src/prism/primitives/Link.tsx.
underline="hover" (default)
Badge
all variants
Karte
Standard
padding="md" (Standard), kein Hover-Verhalten.
Interaktiv
interactive — hebt sich beim Hover an und erhält einen Schatten. Probieren Sie es aus.
Avatar
Größen, und ein Platzhalter, wenn kein Foto hinterlegt ist