@ecopages/radiant-themes

Optional complete themes for @ecopages/radiant-ui. Radiant UI exports one accessible default theme; this package adds a curated set of ready-to-use visual presets.

Install both packages when using an optional theme:

pnpm add @ecopages/radiant-ui @ecopages/radiant-themes

Tailwind CSS applications

Import a complete theme and the component stylesheet:

@import 'tailwindcss';
@import '@ecopages/radiant-themes/github';
@import '@ecopages/radiant-ui/styles.css';

Themes include GitHub, Cloudflare, VS Code, Vercel, Material Design, High Contrast, Windows 95, Mac OS Classic, macOS, and Zed. Each owns its shape, typography, spacing, semantic colors, and any component-specific styling. Theme source remains composable internally, while the public API stays at one import per complete theme.

Theme entries define font-family stacks but do not bundle font files. An app can load properly licensed font files separately and override --font-sans, --font-heading, or --font-mono after the theme import.

Fonts

Themes that name a web font expect the app to load it; without it the stack falls back to the system font.

Import the Fontsource CSS once in the app, for example import '@fontsource/ibm-plex-sans/400.css';.

Compact variants have their own export, for example:

@import 'tailwindcss';
@import '@ecopages/radiant-themes/github/compact';
@import '@ecopages/radiant-ui/styles.css';

Each compact entry applies the theme's shared compact spacing composition while keeping the same theme-owned palette, font stacks, shape, and component treatment. The full and compact entries follow the document's .dark class.

Treegrid surfaces follow the same file-browser treatments: VS Code is flat and compact, GitHub and macOS use quiet list separators, and Mac OS Classic and Windows 95 use their native-style triangle or square disclosure affordances.

Radiant Default (@ecopages/radiant-ui/themes/default) uses three OKLCH seed colors plus density, corner radius, and border opacity inputs. The docs tuner shows the six values and produces copyable CSS. Those controls only apply to Radiant Default; branded themes keep their own values.

High Contrast targets at least 7:1 contrast for published semantic text pairs in both modes and uses prominent focus indicators. Its control surfaces, including switch tracks and thumbs, use square corners, radios stay round with a checked dot, and muted text stays above 7:1. Radiant UI's shared foundation supports reduced motion, increased contrast, visible keyboard focus, and Windows forced colors. Verify non-text boundaries and application content after custom overrides.

Windows 95 draws every control with the two-tone 2px bevel: gray push buttons with a black frame on the default action, sunken white fields, check boxes, and radio wells, raised property tabs joined to their page, navy title bars, navy selection, flat menu bars with navy menu highlights, trackbars with a sunken channel and raised pointer, drop-down lists and combo boxes with a raised arrow button, sunken list boxes and tree views with dotted lines and plus/minus boxes, and pale yellow tooltips. Mac OS Classic is Mac OS 9 Platinum, built from the Mac OS 8 Human Interface Guidelines and the Appearance Manager's default theme: the seven system greys #eeeeee to #202020, grey push buttons with a black outline and a two-pixel bevel, a three-layer ring around the default button, 12px bevelled check boxes, shaded radio spheres, sunken white fields, trapezoid tabs that merge into a black-framed page, and 1px striped title bars. Selection and focus use the default #6666cc accent. Menus and the menu bar highlight items in that accent, list views are black-framed white wells with bevelled column headers, tooltips are outlined help balloons, and disclosures use the Platinum triangle. Both dark modes keep the same bevel structure on darker faces and fields, since neither system shipped one. macOS follows Sonoma AppKit: the SF Pro system font at 13px, 6px push buttons outlined by a hairline shadow, accent-filled default buttons, check boxes, and radio buttons, pop-up buttons with an accent arrow well, segmented tabs centered on a group box's top edge, white slider knobs, translucent menus and popovers, and accent row selection with white text. Destructive buttons use red text, as AppKit alerts do. Windows 95 also provides a full-size dithered scrollbar with raised arrow buttons and a bevelled thumb; Mac OS Classic provides Platinum's grey bevelled track, end-positioned arrow buttons, and striped blue scroll box. Chrome and Safari receive the detailed WebKit scrollbar treatment; Firefox receives the standard scrollbar-width and scrollbar-color fallback, whose native API does not expose classic arrow buttons, bevels, or stripe images. Material Design uses the Material 3 baseline scheme: full-radius buttons, 4px outlined fields and menus, 8px chips, 28px dialogs, tonal surface-container overlays, inverse-surface tooltips and toasts, and a 3px secondary focus indicator. These are original implementations written with Radiant semantic roles, Tailwind @apply, and catalog selectors; they do not copy third-party CSS.

The Cloudflare theme leads with Cloudflare orange on restrained neutral layers inspired by Cloudflare Kumo. Its semantic primary role uses the same contrast-safe orange #cc3a00 in both modes. Filled primary buttons use that orange with white text in both modes. Links and focus stay blue, and warnings use a yellow amber that stays distinct from the primary. Chosen options, menu items, and active navigation use Kumo's neutral grey, so they no longer use orange; breadcrumb links are blue, dark mode uses a brighter orange for orange text, and controls are 26, 36, and 40px tall. GitHub maps Primer's functional roles: green is limited to the primary button, the meter, and success states, blue marks links, focus, and selected, checked, or current states, the selected tab uses Primer's coral underline, and secondary actions use Primer's grey default button.

The Zed theme follows One Light and One Dark: flat panels, hairline borders, 4px controls, 6px popovers, 13px control text, and translucent accent fills for hover and selection.

The Vercel theme uses Background 2 for the light canvas and Background 1 for primary surfaces. Its component colors drive hover and active fills, Colors 4–6 drive default, hover, and active borders, and blue stays focused on links and keyboard focus. Control boundaries are strengthened for visibility. VS Code follows Light Modern and Dark Modern: 26px controls with 2px corners, filled buttons in #005fb8 (light) or #0078d4 (dark) with white text, grey secondary buttons for the outline variant, a 1px blue focus outline, blue menu highlights, editor-style boxed tabs with a blue top border, and see-through square scrollbars. Button treatments vary by theme: Cloudflare uses a contrast-safe orange primary fill, Cloudflare and Vercel use saturated fills with white text for dark-mode destructive buttons, and GitHub uses Primer's danger button: red text on the default button face, filling red on hover. Other variants follow each theme's semantic roles. These palettes adapt product cues to Radiant UI roles without reproducing the products pixel for pixel.

Design references

The themes draw on public guidance for role mapping and component behavior: Material Design 3 color roles, Primer's color token layers, Vercel Geist colors, VS Code theme color roles, Cloudflare Kumo, Apple's Human Interface Guidelines, the Mac OS 8 Platinum guidelines, and Microsoft property sheet guidance. These sources informed the design decisions; all theme CSS is authored for Radiant's tokens and components.

Radiant Themes is an independent project. It is not affiliated with, sponsored by, or endorsed by GitHub, Cloudflare, Vercel, Microsoft, Apple, or Google. Product names such as GitHub, Cloudflare, Vercel, VS Code, Windows 95, Mac OS, macOS, and Material Design are trademarks of their respective owners and are used only to describe the design inspiration.

Browser-ready CSS

For applications that consume compiled CSS rather than Tailwind theme sources, load the base bundle, one compiled theme, and component styles:

@import '@ecopages/radiant-ui/radiant-ui.css';
@import '@ecopages/radiant-themes/compiled/github.css';
@import '@ecopages/radiant-ui/styles.css';

Use compiled/github/compact.css for the compact variant. Matching compiled entries exist for every full theme and compact variant. Override semantic CSS properties after the imports when an application needs local adjustments.