fourthwall-components

@sourcescape/components — the presentation/styling component library for fw-apps. It is a React + vanilla-extract mirror of the fw-components design system (which itself mirrors @fourthwall/components).

These are presentation components: they render the markup and styling of their fw-components counterparts and expose props for the visual variants. They intentionally do not implement behavioral mechanisms (floating positioning, validation, focus traps, data fetching, async state).

Install / use

// Once, at the app root — load the brand fonts + design tokens:
import '@sourcescape/components/fonts.css';
import '@sourcescape/components/tokens.css';

import { Button, Input, Tag, Modal } from '@sourcescape/components';

<Button appearance="primary" size="medium">Save changes</Button>

tokens.css is the @fourthwall/design-system CSS custom-property layer (verbatim, via systems/fw-components/references). Component styles reference those var(--token) variables, so the token layer must be present.

fonts.css registers the brand typefaces (Suisse Int'l + PP Telegraf) via @font-face, with the .woff2 files bundled under dist/fonts/. Without it, text falls back to Helvetica/Arial. These are licensed commercial typefaces — the package is private and intended for Fourthwall use only; do not redistribute the font binaries outside that license.

Architecture

• Tokens — src/tokens/tokens.css, shipped as @sourcescape/components/tokens.css.
• Components — src/components/<Name>/ each contains:
  • <Name>.css.ts — vanilla-extract styles (recipe() for variants).
  • <Name>.tsx — the React component (forwardRef, clsx className merge).
  • index.ts — public exports.
• src/styles/vars.ts — typed helpers for the token scales.
• src/index.ts — aggregated public surface (one export * per component).

55 components are mirrored (31 molecules, 22 cells, 2 tissues). See PORTING.md for the mapping rules and how to add or update one.

Scripts

pnpm build       # tsup → dist (ESM + CJS + types + tokens.css)
pnpm typecheck   # tsc --noEmit
pnpm dev         # tsup --watch

Known fidelity notes

• Banner appearance="danger-strong": the fw-components source references --text-on-critical, which is undefined in the design-system token layer. Corrected here to --text-on-brand — the token Button's destructive appearance uses for text on the same --bg-critical background.