@sub-design/themes

Two axes, per ADR 0001: brand × colorScheme. Nothing else. There is no runtime product prop.

How a theme is applied

Brand is a data attribute on any ancestor; scheme is the .dark class, matching the next-themes convention both NOKL and the Enterprise prototype already use.

<html class="dark">
  <div data-brand="nokl"> … </div>
</html>

Both nesting orders work — the brand element inside .dark, and the brand element that is .dark.

Because brand is an attribute rather than a build flag, one page can host both brands at once. The playgrounds rely on this to show GoodSync and NOKL side by side, which is the cheapest possible check that no brand value has leaked into component code.

Import order

Light must be imported before dark. Both selectors resolve to the same specificity (:where() contributes nothing), so the cascade falls through to source order. The per-brand index.css already does this correctly.

Settled: GoodSync separates action from accent

Explorer shipped a blue primary; the Enterprise prototype shipped a near-black one described as "Linear / Vercel inspired, no marketing blue". Two GoodSync surfaces, opposite decisions.

Resolved in favour of Enterprise: near-black is the primary action, blue is the brand accent. Two reasons decided it. Explorer's blue is 221.2 83.2% 53.3% — shadcn's default, inherited from the generator rather than chosen. And Enterprise keeps blue anyway, as --chart-1, which is exactly the accent role.

The consequence is a token split worth understanding:

| Token | Meaning | GoodSync | NOKL | | --- | --- | --- | --- | | --color-action-primary | what a primary button is | near-black | SeaGreen | | --color-brand-accent | the identifying colour — links, focus, charts | blue | SeaGreen |

For NOKL the two are the same value, so nothing about it changed. For GoodSync they differ, which is the whole point: collapsing them into one role is what made the two products look like they disagreed.

Focus rings follow the accent rather than the action. A near-black ring around a near-black button would be invisible, and focus is an accessibility guarantee.

Explorer will change appearance when it adopts the package — its buttons go from blue to near-black. That is intended, not a regression.