Loading page…
Loading page…
A brand is a token layer, not a component fork. data-brand=… selectively re-points semantic variables on top of whichever theme is in force. ColdHarbor holds warm neutrals and gold; Calypso inherits that complete system and changes only its primary blue family; Maelstrom owns a broader graphite skin.
The skin re-points keys the themes already define and never adds new ones. The build refuses a brand that invents a token or defines a key on only one theme. Dark binds at [data-brand]; the light pair out-specifies it so a skinned light region receives its own coordinated canvas and ink.
/* dist/css/coldharbor.css — emitted by packages/tokens */
[data-brand="calypso"] {
--ch-primary: #2a91d8;
--ch-focus: #6cc6ff;
/* … */
}
[data-theme="light"] [data-brand="calypso"],
[data-theme="light"][data-brand="calypso"] {
--ch-primary: #155f96;
/* … */
}// Scoped — a skinned region sits beside base chrome on the same page.
<BrandSkin brand="calypso">
<CalypsoDeck />
</BrandSkin>--ch-primary--ch-primary-bright--ch-primary-fg--ch-primary-muted--ch-focus--ch-info--ch-viz-1--ch-viz-2Every value is read from compiled token JSON. Calypso lists only keys it changes; omitted surfaces, typography, borders, gold accents, danger, and success inherit ColdHarbor unchanged.
<div>{/* base — no data-brand */}</div>No attribute. Rich gold on the neutral monochrome ground — the master shell.
<div data-brand="alternate">…</div>The original ColdHarbor warm shell, preserved in full — abyss canvas, bone ink, bronze hairlines, Aurum primary over the parchment light theme.
<div data-brand="calypso">…</div>ColdHarbor styling unchanged except for a blue primary, focus, info, and leading visualization ramp.
<div data-brand="maelstrom">…</div>Exchange and swap. Deep graphite and cool-gray surfaces carry the storm-violet primary ramp; Aurum accent is held.
--ch-primary--ch-primary-bright--ch-primary-fg--ch-primary-muted--ch-focus--ch-info--ch-viz-1--ch-viz-2Calypso uses the same ColdHarbor canvas and surfaces with blue primary actions. Alternate and Maelstrom retain their broader surface overrides.
Warm black master harbor
Aurum action and bronze linework
#080807 canvas · #11110f surface
CALYPSO
ColdHarbor wallet surfaces
Blue primary action; shared warm linework
undefined canvas · undefined surface
MAELSTROM
Graphite exchange field
Violet action and cool gray linework
#0c0d10 canvas · #171a21 surface
<BrandSkin brand="calypso" className="bg-canvas text-fg">…</BrandSkin>
<BrandSkin brand="maelstrom" className="bg-canvas text-fg">…</BrandSkin>--ch-bg--ch-bg-raised--ch-surface--ch-surface-raised--ch-fg--ch-border--ch-primaryOne component tree rendered twice. Both keep ColdHarbor surfaces, text, and borders; Calypso changes primary actions, focus, info, and leading chart colors to blue.
CALYPSO
Wallet · 51°28′N 0°00′W
Total balance
Chain sync
Recent movements
<CalypsoDeck />No attribute — rich gold.
CALYPSO
Wallet · 51°28′N 0°00′W
Total balance
Chain sync
Recent movements
<BrandSkin brand="calypso">
<CalypsoDeck />
</BrandSkin>Skinned — only the primary family turns blue; gold and semantic statuses stay put.
--ch-primary--ch-primary-fg--ch-primary-muted--ch-focusThe wallet starter surface as it ships. Titan, the treasury skin, is deliberately absent from the brand layer here — it lands with the treasury surface, so data-brand='titan' is inert until then.
CALYPSO
Wallet · 51°28′N 0°00′W
Total balance
Chain sync
Recent movements
import { CalypsoDeckSurface } from "@coldharbor/webui";
<CalypsoDeckSurface />--ch-primary--ch-primary-bright--ch-viz-1--ch-viz-2