@rdna/radiants
v0.2.0
Published
Radiants theme package for RDNA - retro pixel aesthetic
Downloads
126
Maintainers
kemos4beReadme
@rdna/radiants
Radiants theme package for RDNA (Radiants Design Native Architecture) — a retro pixel aesthetic design system.
Package status: public package. Source truth is package.json exports,
tokens.css, dark.css, components/core/*/*.meta.ts, and the generated
schema/contract outputs refreshed by the package scripts.
Installation
npm install @rdna/radiantsUsage
CSS Tokens
Import the theme tokens in your CSS:
/* Import all tokens + base styles */
@import '@rdna/radiants';
/* Import dark mode support */
@import '@rdna/radiants/dark';Or import individual parts:
@import '@rdna/radiants/tokens'; /* Tokens only */
@import '@rdna/radiants/typography'; /* Typography styles */
@import '@rdna/radiants/fonts'; /* Font declarations */
@import '@rdna/radiants/animations'; /* Animation utilities */
@import '@rdna/radiants/base'; /* Base element styles */React Components
import { Button, Card, Badge } from '@rdna/radiants/components/core';
import { useToast } from '@rdna/radiants/components/core';
function App() {
return (
<Card>
<Badge variant="success">New</Badge>
<Button variant="primary">Click me</Button>
</Card>
);
}Available Components
The current source has 41 metadata-backed core components:
- Actions: Button, ContextMenu, DropdownMenu, Toggle, ToggleGroup, Toolbar
- Layout: AppWindow, Card, Collapsible, Pattern, ScrollArea, Separator
- Forms: Checkbox, Combobox, Input, InputSet, NumberField, Radio, Select, Slider, Switch, TextArea
- Feedback: Alert, Badge, Meter, Spinner, Toast, Tooltip
- Navigation: Breadcrumbs, Menubar, NavigationMenu, Tabs
- Overlays: AlertDialog, Dialog, Drawer, Popover, PreviewCard, Sheet
- Data Display: Avatar, CountdownTimer
- Media: Icon
Semantic Tokens
Use semantic token classes instead of hardcoded colors:
// ✅ Do this
<div className="bg-page text-main border-line">
// ❌ Not this
<div className="bg-[#FEF8E2] text-[#0F0E0C]">Token Categories
| Category | Examples | Purpose |
|----------|----------|---------|
| surface-* | bg-page | Backgrounds |
| content-* | text-main | Text/foreground |
| edge-* | border-line | Borders/outlines |
| action-* | bg-accent | Interactive elements |
| status-* | bg-success | Feedback states |
Dark Mode
Dark mode is activated by the .dark class — this is the only activation contract:
<!-- Enable dark mode -->
<html class="dark">There is no prefers-color-scheme fallback. Consumers are responsible for toggling the .dark class (e.g. via a theme switch or reading the system preference in JS).
dark.css contains two things:
- Token overrides — semantic tokens flipped for dark backgrounds
- Component slot styling —
[data-slot]/[data-variant]selectors for Moon Mode interaction (glow instead of lift)
The generic class layer (.btn-*, .card, .badge-*, etc.) was removed. Use RDNA components or semantic tokens instead.
Fonts
This package includes the current Radiants font layers:
- Mondwest — Body/sans token (
--font-sans,--font-mondwest) - Joystix Monospace — Heading/chrome token (
--font-heading,--font-joystix) - PixelCode — Monospace/code token (
--font-mono,--font-pixel-code) - Waves Blackletter CPC, Pixeloid Sans, and Waves Tiny CPC — editorial/display tokens loaded through
fonts-editorial.css
Consumers can import @rdna/radiants/fonts for the full font layer or
fonts-core.css from source when only the initial core font set is needed.
Pixel Authoring Pipeline
Corners, tiling patterns, and pixel icons are authored in @rdna/pixel and then prepared once before Radiants materializes checked-in CSS or registries from that prepared data.
Authoring source-of-truth paths:
packages/pixel/src/corners/registry.tspackages/pixel/src/patterns/registry.tspackages/pixel/src/icons/registry.ts
Materialized Radiants artifacts:
pixel-corners.generated.csspatterns.csspixel-icons/registry.ts
SVG icons remain a separate prepared-manifest pipeline in packages/radiants/icons/manifest.ts.
This is a pre-launch replacement flow. If a legacy adapter or re-export still exists, treat it as compatibility glue for the active RadOS surface, not as the authoring source of truth.
Pixel Corners
Pixel corners use CSS mask-image and the px() API from @rdna/pixel for staircase-shaped masks. Theme-following corners resolve the current <html data-corner-shape="..."> preference at materialization time; fixed corners stay locked to the authored shape. The PixelBorder component provides SVG-based staircase borders when the border itself needs to be visible.
Key files:
packages/pixel/src/corners/registry.ts— authored corner definitions and named recipespackages/pixel/src/corners/prepare.ts— shared prepare step for math-first rasterization plus authored overridespixel-corners.css— shell CSS with manual utilities onlypixel-corners.generated.css— checked-in generated artifact (do not edit by hand)components/core/PixelBorder/— SVG staircase border component
Regenerate after corner-authoring changes:
pnpm --filter @rdna/radiants generate:pixel-cornersPixel corners are opt-in. Standard rounded-* classes remain plain Tailwind border-radius. Use the pixel-corner utilities or px() when the surface should render staircase masks. Chrome tabs are the reference theme-following example; explicitly authored surfaces should use fixed bindings when they must not react to the global corner preference.
Internal Primitive Engine
Interactive primitives in this package use @base-ui/react internally for accessibility and keyboard/focus behavior. Public @rdna/radiants/components/core APIs remain stable.
Components backed by Base UI internals: Tabs, Dialog, Sheet, Popover, DropdownMenu, ContextMenu, Select, Tooltip, Toast, Checkbox, Switch, Slider.
Requirements
- React 18+ or 19
- Tailwind CSS 4
- Next.js 14+ (optional)
License
GPL-3.0 — See LICENSE for this package's implementation license.
The repository does not currently include a separate root/spec license file. If the portable RDNA specification is intended to use a different license, add an explicit license notice at the spec/root level instead of relying on this package README.