@ezragubbay/forge

The engineering register: a dark, structural chassis with a visible grid, Geist for headings and prose, Geist Mono for data, labels and code, one amber accent, fixed status colours (ok, warn, err, info). Light mode via theme="light". Projects layer a theme pack on top: a CSS file that overrides the --eg-* / --forge-* variables on [data-theme-pack="name"] (see themes/quantum.css, themes/campfire.css).

Two ways to consume:

/* 1. Your own Tailwind v4 build (recommended for apps) */
@import "tailwindcss";
@import "@ezragubbay/core/tokens.css";
@import "@ezragubbay/forge/tokens.css";
@import "@ezragubbay/forge/fonts.css";
@import "@ezragubbay/forge/preset.css";
@import "@ezragubbay/forge/themes/quantum.css"; /* optional */

/* 2. Precompiled stylesheet (no Tailwind in the consumer) */
import '@ezragubbay/forge/styles.css';

import { ForgeProvider, Nav, Stage, PipelineProgress, StatusChip, LogPanel, Reveal } from '@ezragubbay/forge';

<ForgeProvider themePack="quantum">
  <Nav system="q-route" links={[...]} />
  <Stage status={<StatusChip tone="accent" dot pulse>running</StatusChip>}>
    <PipelineProgress stages={stages} activeIndex={1} progress={62} />
  </Stage>
</ForgeProvider>

Styling idiom: Tailwind utilities from the preset. Colours: bg-bg bg-surface bg-surface-2 border-rule text-ink text-ink-2 text-muted bg-accent text-accent-text text-ok/warn/err/info. Type: font-sans font-mono text-xs/sm/base/lg/h3/h2/h1/display. Radii: rounded-control rounded-card. Custom utilities: grid-bg (chassis grid), lbl (mono uppercase label), focus-ring. Motion presets (enter, pop, stagger) and Reveal wrap the motion library; 3D and canvas work stays in the project and reads the same variables.