@resq-systems/constants

Shared, zero-dependency constants for ResQ Systems apps — one source of truth reused across the marketing site, dashboard, and transactional email.

Install

bun add @resq-systems/constants

Subpaths

| Import | Contents | | --- | --- | | @resq-systems/constants | everything below | | @resq-systems/constants/tokens | colors (oklch source + email-safe hex snapshot, incl. info/success/warning/danger status roles), fonts (stacks + webfont href), radii, themeColor (light/dark PWA + viewport theme-color), plus the color-role types ColorRole, StatusRole, OklchColorRole, ColorTokenName | | @resq-systems/constants/brand | brand — name, product name, email descriptor, legal name, tagline, description, domains, email addresses, legal URLs, socials, company info, logo, postal address | | @resq-systems/constants/tokens.css | Stylesheet mirroring ./tokens: the oklch color roles, --resq-chart-1..5 palette, --resq-radius-*, and --resq-font-* stacks as CSS custom properties on :root. @import it directly. |

Everything is as const, so values are literal-typed and tree-shakeable.

Usage

import { colors, fonts } from "@resq-systems/constants/tokens";
import { brand } from "@resq-systems/constants/brand";

element.style.background = colors.hex.background; // "#0A0E1A"
const from = brand.email.from; // "ResQ Systems <[email protected]>"
const emailDescriptor = brand.emailDescriptor; // "Autonomous Disaster Response"

brand.emailDescriptor is the short descriptor beneath the company name in the shared email lockup. It does not replace brand.productName or the longer brand.tagline.

@resq-systems/email-templates sources email identity, fonts, primary and dark shell colors, and status colors from this package. Its public email contract owns the remaining email-specific light shell colors and presentation values.

Adding constants

Group by domain in its own module (src/<domain>.ts), export as const, and add a subpath in package.json exports. Keep it curated — constants earn their place by being reused across apps, not by being convenient to dump here.

Rules

• Zero runtime dependencies. This package must stay dependency-free.
• Values are data only — no logic; the JS is side-effect-free. Only the stylesheet (tokens.css) is a side-effectful import, declared via sideEffects.
• A change here ripples to every dependent; prefer additive, stable edits.

Prerequisites

• Runtime: Bun 1.1+ or Node.js 20+
• Module format: ESM only ("type": "module"); every value is a plain as const object.

Consuming in CSS

Import the ready-made stylesheet — it declares the oklch color roles, the --resq-chart-1..5 palette, --resq-radius-*, and --resq-font-* stacks as CSS custom properties on :root:

@import "@resq-systems/constants/tokens.css";

.panel {
  background: var(--resq-color-surface);
  border: 1px solid var(--resq-color-border);
  border-radius: var(--resq-radius-lg);
  font-family: var(--resq-font-body);
}

The stylesheet mirrors ./tokens (a test fails if the two drift). For Tailwind v4, alias these custom properties inside your @theme block so utilities resolve against the same source of truth. If you need the raw values in TypeScript — or the email-safe hex snapshot — import the objects from ./tokens instead.

Testing

bun --filter @resq-systems/constants test

Troubleshooting

• Cannot find module '@resq-systems/constants/tokens.css': There is no CSS export. Import the token objects from @resq-systems/constants/tokens and emit variables yourself.
• Colors look wrong in email or older targets: use the email-safe colors.hex.* values, not the oklch source — many mail clients drop oklch().