@orangecheck/design 0.20.0 → 0.22.0

package/README.md

@@ -21,10 +21,14 @@ Canonical design + rollout plan: `~/Projects/ochk/DESIGN-SYSTEM-PLAN.md`.
 
 - **Mode** — `light | dark`, owned by `next-themes` via the `.dark` class. Toggle
   with `<ThemeToggle />`. Unchanged from today.
-- **Skin** — a named theme (`orangecheck` default, `midnight`, …), owned by
-  `<OcThemeProvider>` via the `data-oc-theme` attribute, persisted in the
-  `oc_skin` cookie at `Domain=.ochk.io` so a choice carries across every family
-  site. Pick with `<OcThemePicker />`.
+- **Skin** — a named theme, owned by `<OcThemeProvider>` via the `data-oc-theme`
+  attribute, persisted in the `oc_skin` cookie at `Domain=.ochk.io` so a choice
+  carries across every family site. Pick with `<OcThemePicker />`. Five skins
+  ship: **`ember`** — the family **default** (a warm, rounded consumer skin:
+  terracotta, 1rem radius, pill buttons, self-hosted Hanken Grotesk; owns the
+  bare `:root`/`.dark` base) — plus `orangecheck`, `phosphor`, `lightning`,
+  `gold` (the four sharp/flat Bitcoin-ethos alternates, attribute-only arms). A
+  skin re-skins color, radius, type, and elevation — not just hue.
 
 The two compose: any skin renders in both modes.
 
@@ -65,15 +69,32 @@ Header (gate the picker behind a flag during staged rollout):
 ```
 
 Fonts are still loaded by the app via `next/font` into `--font-sans-display`
-and `--font-mono-display`, exactly as before.
+and `--font-mono-display`, exactly as before — the default skins defer to them.
+A skin may instead **self-host its own font in-package**: `ember` ships Hanken
+Grotesk as a variable woff2 under `src/styles/fonts/`, declared in
+`src/styles/fonts.css` (imported first by `styles.css`). Tailwind v4 (Lightning
+CSS) rebases the relative `url()` on `@import`, so the woff2 emits through every
+consumer's build with **zero per-site `next/font` wiring**; the browser only
+fetches it when ember is the active skin.
 
 ## Adding a skin
 
 1. Add `src/styles/themes/<id>.css` declaring the full token set for both modes
-   (under `[data-oc-theme='<id>']` and `[data-oc-theme='<id>'].dark`).
+   (under `[data-oc-theme='<id>']` and `[data-oc-theme='<id>'].dark`). Scope every
+   selector to the two `[data-oc-theme='<id>']` arms — never touch bare `:root`/
+   `.dark`, or you re-skin the default.
 2. `@import` it from `src/styles/themes.css`.
-3. Add a row to `OC_THEMES` in `src/tokens/themes.ts`.
-4. Publish. Every site picks it up on the next Renovate bump — no per-site edits.
+3. Add a row to `OC_THEMES` in `src/tokens/themes.ts` (this auto-populates the
+   appearance menu, picker, Storybook toolbar, and favicon recolor).
+4. Add the id to the hardcoded `SKINS` arrays in `scripts/verify-themes.mjs` +
+   `scripts/verify-contrast.mjs`, then `yarn verify` (asserts the skin is
+   distinct and AA-clean in both modes).
+5. (Optional) self-host a font: see the Hanken Grotesk note above.
+6. Publish. Every site picks it up on the next Renovate bump — no per-site edits.
+
+A skin is **opt-in** by default — shipping one makes it a picker option, not the
+default. Changing `DEFAULT_OC_THEME` (family-wide) or a per-site
+`<OcThemeProvider defaultSkin>` is a separate, deliberate flip.
 
 ## Build
 

package/dist/chrome.d.mts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import { DisplayIdentity, OcSignOutScope, DisplayIdentityKind, OcAccountSummary } from '@orangecheck/auth-client';
 
-type EcosystemSlug = 'home' | 'docs' | 'fleet' | 'me' | 'vault' | 'chat' | 'cosign' | 'attest' | 'lock' | 'vote' | 'stamp' | 'agent' | 'pledge' | 'analytics' | 'bot' | 'forge';
+type EcosystemSlug = 'home' | 'docs' | 'fleet' | 'me' | 'vault' | 'chat' | 'cosign' | 'btc' | 'attest' | 'lock' | 'vote' | 'stamp' | 'agent' | 'pledge' | 'analytics' | 'bot' | 'forge';
 interface EcosystemSwitcherProps {
     current: EcosystemSlug;
     className?: string;

package/dist/chrome.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import { DisplayIdentity, OcSignOutScope, DisplayIdentityKind, OcAccountSummary } from '@orangecheck/auth-client';
 
-type EcosystemSlug = 'home' | 'docs' | 'fleet' | 'me' | 'vault' | 'chat' | 'cosign' | 'attest' | 'lock' | 'vote' | 'stamp' | 'agent' | 'pledge' | 'analytics' | 'bot' | 'forge';
+type EcosystemSlug = 'home' | 'docs' | 'fleet' | 'me' | 'vault' | 'chat' | 'cosign' | 'btc' | 'attest' | 'lock' | 'vote' | 'stamp' | 'agent' | 'pledge' | 'analytics' | 'bot' | 'forge';
 interface EcosystemSwitcherProps {
     current: EcosystemSlug;
     className?: string;

package/dist/chrome.js

@@ -79,6 +79,13 @@ var ENTRIES = [
     sub: "cofound \u2014 get behind builders",
     docsHref: "https://docs.ochk.io/cosign"
   },
+  {
+    slug: "btc",
+    href: "https://btc.ochk.io",
+    label: "oc\xB7btc",
+    sub: "read \u2014 bitcoin desk",
+    docsHref: "https://btc.ochk.io/data"
+  },
   {
     slug: "attest",
     href: "https://attest.ochk.io",
@@ -437,6 +444,15 @@ var FAMILY_PROPERTIES = [
     docsHref: "https://docs.ochk.io/cosign",
     category: "product"
   },
+  {
+    slug: "btc",
+    origin: "https://btc.ochk.io",
+    hostname: "btc.ochk.io",
+    label: "oc\xB7btc",
+    sub: "read \u2014 bitcoin desk",
+    docsHref: "https://btc.ochk.io/data",
+    category: "product"
+  },
   {
     slug: "attest",
     origin: "https://attest.ochk.io",