@tfrc/product 1.0.0

package/README.md

@@ -0,0 +1,38 @@
+# @tfrc/product
+
+The product dialect of the company's visual language. Mobile-first,
+restrained, built to be used daily for years. ~40 components, 44px touch
+floor, near-zero novelty tolerance.
+
+**This package is not an app.** It is the UI kit every product themes over —
+the finance app is a separate repository that installs this package plus
+`themes/finance` (`decisions/0007.md`). Building a product? Read
+`CONSUMING.md` at the repo root. Renamed from `@tfrc/app` because that name
+was read as "the app"; see `decisions/0008.md`.
+
+**Products theme over this layer; they do not fork it.** See
+`src/themes/finance.css` for the pattern — a product theme imports this
+package and adds only what's genuinely product-specific (currently: a
+`--theme-product-hue` identity tag). Everything else — button, field,
+transaction row, balance card, tab bar — is shared by every product that
+will ever theme over this layer.
+
+Never imports from `@tfrc/marketing`. If you're tempted to reuse a marketing component
+here, that's a sign it belongs in `@tfrc/foundation` instead, and only
+once a third consumer needs it — see `AGENTS.md` rule 4.
+
+## Reserved tokens
+
+`--color-gain` and `--color-loss` are owned by this package. See
+`decisions/0002-reserved-hues-for-financial-semantics.md`. Every amount
+or direction indicator must pair color with a sign or arrow — never
+color alone.
+
+## Adding a new product theme
+
+1. Copy the shape of `src/themes/finance.css`.
+2. Pick an unused hue from `STATE.md`'s `product_hues_in_use` — check the
+   ceiling in `decisions/0005.md` first.
+3. Only add token overrides if the product genuinely needs different
+   values — most won't. The finance theme adds none.
+4. Update `STATE.md`.

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@tfrc/product",
+  "version": "1.0.0",
+  "license": "MIT",
+  "description": "The product dialect of the visual language — application UI. Mobile-first, ~40 components, 44px touch floor. Products theme over this layer; they do not fork it. Never imports from @tfrc/marketing.",
+  "keywords": ["design-system", "design-tokens", "css", "tailwind", "product-ui"],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/the-full-remote-company/design-system.git",
+    "directory": "packages/product"
+  },
+  "homepage": "https://github.com/the-full-remote-company/design-system/tree/main/packages/product#readme",
+  "bugs": "https://github.com/the-full-remote-company/design-system/issues",
+  "main": "src/index.css",
+  "exports": {
+    ".": "./src/index.css",
+    "./themes/*": "./src/themes/*.css"
+  },
+  "files": ["src", "README.md"],
+  "dependencies": {
+    "@tfrc/foundation": "1.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  }
+}

package/src/components.css

@@ -0,0 +1,137 @@
+/* ==========================================================================
+   @tfrc/product — components
+   Reference only tokens from tokens.css. Zero raw color literals.
+   Every interactive element clears --touch-min (44px) — see AGENTS.md
+   and decisions/0001.md's comparison table.
+   ========================================================================== */
+
+body { font-family: var(--font-ui); }
+h1, h2, h3 { font-family: var(--font-display); font-weight: 800; margin: 0; letter-spacing: -0.028em; }
+
+/* ---- Button — same API/class names as @tfrc/marketing, different values ---- */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: var(--touch-min);
+  padding: 0 1rem;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  font-family: inherit;
+  font-size: var(--step-body);
+  font-weight: 600;
+  cursor: pointer;
+  transition: background var(--duration-fast) var(--ease-quint),
+              border-color var(--duration-fast) var(--ease-quint);
+}
+.btn--primary { background: var(--color-accent); color: var(--color-accent-fg); }
+.btn--primary:active { background: var(--color-accent-hover); }
+.btn--secondary { background: var(--color-surface-raised); border-color: var(--color-border-strong); color: var(--color-text-primary); }
+.btn--ghost { background: transparent; color: var(--color-accent); }
+.btn--block { width: 100%; }
+
+/* ---- Field — app only ---- */
+.field label { display: block; font-size: var(--step-sm); font-weight: 600; margin-bottom: 0.375rem; }
+.field input {
+  width: 100%;
+  min-height: var(--touch-min);
+  padding: 0 0.75rem;
+  background: var(--color-surface-raised);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-sm);
+  font-family: inherit;
+  font-size: 1rem;
+  color: var(--color-text-primary);
+}
+/* Amounts are a typographic problem, not just an input: tabular numerals,
+   right-aligned, decimal-locked. See packages/product README. */
+.field input.num {
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+/* ---- Badge / pill — app only. Reserved gain/loss variants live here. ---- */
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3125rem;
+  padding: 0.1875rem 0.5rem;
+  border-radius: 0.375rem;
+  font-size: var(--step-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  background: var(--color-surface-sunken);
+  color: var(--color-text-secondary);
+}
+.pill--gain { background: var(--color-gain-tint); color: var(--color-gain); }
+.pill--loss { background: var(--color-loss-tint); color: var(--color-loss); }
+
+/* ---- Amount — app only. Direction is never color-only; every consumer
+   must pair this with a sign or arrow glyph. See decisions/0002.md. ---- */
+.amt {
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  font-size: var(--step-body);
+  white-space: nowrap;
+  letter-spacing: -0.01em;
+}
+.amt--gain { color: var(--color-gain); }
+.amt--loss { color: var(--color-text-primary); }
+
+/* ---- Transaction row / list — app only, no web equivalent ---- */
+.list { background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); overflow: hidden; }
+.row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-height: var(--touch-min);
+  padding: var(--pad-row);
+  border-bottom: 1px solid var(--color-border-subtle);
+  cursor: pointer;
+  transition: background var(--duration-fast) var(--ease-quint);
+}
+.row:last-child { border-bottom: 0; }
+.row:hover, .row:active { background: var(--color-surface-sunken); }
+.row__icon {
+  width: 2rem; height: 2rem; border-radius: 0.625rem; flex-shrink: 0;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 0.875rem; background: var(--color-surface-sunken);
+}
+.row__main { flex: 1; min-width: 0; }
+.row__t { font-size: var(--step-body); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.row__s { font-size: var(--step-xs); color: var(--color-text-muted); margin-top: 0.0625rem; }
+
+/* ---- Balance card — app only ---- */
+.balance { background: var(--color-accent); color: #fff; border-radius: var(--radius-lg); padding: 1.125rem; }
+.balance__k { font-size: var(--step-xs); text-transform: uppercase; letter-spacing: 0.09em; }
+.balance__v {
+  font-family: var(--font-ui); font-size: 2rem; font-weight: 600;
+  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 0.25rem; line-height: 1.1;
+}
+
+/* ---- Segmented control — app only ---- */
+.seg { display: flex; background: var(--color-surface-sunken); border-radius: var(--radius-sm); padding: 2px; gap: 2px; }
+.seg button {
+  flex: 1; min-height: 2.25rem; border: 0; border-radius: calc(var(--radius-sm) - 2px);
+  background: transparent; font-family: inherit; font-size: var(--step-sm); font-weight: 600;
+  color: var(--color-text-secondary); cursor: pointer;
+  transition: background var(--duration-fast) var(--ease-quint), color var(--duration-fast) var(--ease-quint);
+}
+.seg button[aria-pressed="true"] { background: var(--color-surface-raised); color: var(--color-text-primary); }
+
+/* ---- Tab bar — app only, no web equivalent ---- */
+.tabs {
+  display: flex; background: var(--color-surface-raised);
+  border-top: 1px solid var(--color-border-subtle); padding-bottom: var(--safe-bottom);
+}
+.tabs button {
+  flex: 1; min-height: var(--touch-min); border: 0; background: transparent; cursor: pointer;
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1875rem;
+  font-family: inherit; font-size: 0.625rem; font-weight: 600; color: var(--color-text-muted);
+  transition: color var(--duration-fast) var(--ease-quint);
+}
+.tabs button[aria-pressed="true"] { color: var(--color-accent); }

package/src/index.css

@@ -0,0 +1,11 @@
+/* ==========================================================================
+   @tfrc/product — entry point
+   Import order: foundation (ramps + reset) -> tokens (semantic layer) ->
+   components. A product theme (see src/themes/) imports THIS file first,
+   then layers its own overrides on top. Never import anything from
+   @tfrc/marketing — see AGENTS.md rule 3 and scripts/lint-boundaries.js.
+   ========================================================================== */
+
+@import "@tfrc/foundation";
+@import "./tokens.css";
+@import "./components.css";

package/src/themes/finance.css

@@ -0,0 +1,41 @@
+/* ==========================================================================
+   @tfrc/product/themes/finance — the first product theme
+   Themes over @tfrc/product; does not fork it. See decisions/0001.md — "one
+   product system, not one per product" — this file is the proof of that
+   principle, not an exception to it.
+
+   For v1, the finance theme needs no token overrides: the base @tfrc/product
+   semantic layer already IS the finance-appropriate one (reserved gain/
+   loss, tabular numerals, 44px touch floor). This file exists so future
+   product themes have a real example to follow, and so finance-specific
+   additions have an obvious home instead of leaking into @tfrc/product itself.
+   ========================================================================== */
+
+@import "@tfrc/product";
+
+:root {
+  /* This theme's identity within the product spectrum. See
+     decisions/0005-product-spectrum-hue-ceiling.md before reusing this
+     hue elsewhere, and before adding a new product theme. */
+  --theme-product-hue: var(--product-capital);
+  --theme-product-hue-tint: var(--color-accent-bg);
+}
+
+/* Finance-specific composition, not present in base @tfrc/product: a labeled
+   accent strip for surfaces that need to say "this is the finance
+   product" inside a cross-product shell (e.g. a unified dashboard). */
+.theme-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: var(--step-xs);
+  font-weight: 600;
+  color: var(--theme-product-hue);
+}
+.theme-tag::before {
+  content: "";
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 9999px;
+  background: var(--theme-product-hue);
+}

package/src/tokens.css

@@ -0,0 +1,72 @@
+/* ==========================================================================
+   @tfrc/product — semantic tokens
+   Same token NAMES as @tfrc/marketing (see CONTRACT.md). Values diverge on
+   purpose. Self-contained per decisions/0004.md — does not import
+   anything from @tfrc/marketing.
+   ========================================================================== */
+
+:root {
+  --color-surface:        oklch(0.980 0.004 270);
+  --color-surface-raised: oklch(1 0 0);
+  --color-surface-sunken: oklch(0.958 0.006 270);
+
+  --color-border-subtle: oklch(0.916 0.009 270);
+  --color-border-strong: oklch(0.812 0.015 270);
+
+  --color-text-primary:   var(--ramp-neutral-900);
+  --color-text-secondary: var(--ramp-neutral-600);
+  --color-text-muted:     var(--ramp-neutral-400);
+
+  --color-accent:       var(--ramp-brand-600);
+  --color-accent-hover: var(--ramp-brand-700);
+  --color-accent-fg:    #fff;
+  --color-accent-bg:    var(--ramp-brand-100);
+  --color-accent-bg-fg: var(--ramp-brand-800);
+
+  --color-focus: oklch(0.560 0.150 235);
+
+  --color-info-bg:   oklch(0.940 0.032 235);
+  --color-info-fg:   oklch(0.360 0.070 237);
+  --color-info-line: oklch(0.560 0.150 235);
+
+  --color-danger-solid: oklch(0.615 0.205 25);
+  --color-danger-bg:    oklch(0.940 0.035 25);
+  --color-danger-fg:    oklch(0.475 0.170 25);
+  --color-danger-line:  oklch(0.615 0.205 25);
+
+  --color-success-bg:   oklch(0.940 0.040 150);
+  --color-success-fg:   oklch(0.455 0.090 150);
+  --color-success-line: oklch(0.590 0.110 150);
+
+  /* Reserved — this package OWNS these. @tfrc/marketing must never define or
+     reference them. See decisions/0002.md. */
+  --color-gain:      oklch(0.510 0.120 150);
+  --color-gain-tint: oklch(0.945 0.045 150);
+  --color-loss:      oklch(0.530 0.190 25);
+  --color-loss-tint: oklch(0.940 0.040 25);
+
+  /* ---- product-only scale: this is most of the divergence ---- */
+  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
+  --font-ui:      "IBM Plex Sans", system-ui, -apple-system, sans-serif;
+  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
+
+  --step-title: 1.75rem;      /* web hero is up to 6rem */
+  --step-lg:    1.25rem;
+  --step-body:  0.9375rem;    /* web body is 1.0625rem */
+  --step-sm:    0.8125rem;
+  --step-xs:    0.6875rem;
+
+  --touch-min: 2.75rem;       /* 44px. A floor, not a guideline. */
+  --radius-sm: 0.5rem;
+  --radius-md: 0.75rem;
+  --radius-lg: 1rem;          /* web goes to 1.5rem */
+
+  --pad-screen: 1rem;         /* web gutter goes up to 4rem */
+  --pad-row:    0.75rem;
+
+  --duration-fast: 100ms;
+  --duration-base: 180ms;     /* web goes to 640ms */
+
+  --safe-top:    env(safe-area-inset-top, 0px);
+  --safe-bottom: env(safe-area-inset-bottom, 0px);
+}