@xalerate/xlr-ds

Xalerate Design System — the shared foundation for the product fleet (BrainOrchestra, Nootio, …). Owned by design-cowork. Governing doc: ../XLR-DS-CHARTER-v1.md.

Status — v0 skeleton (token contract only)

This is the first extraction slice: the token contract. It is deliberately isolated — it does not yet touch BrainOrchestra's live DS, so it can't entangle the in-flight prod cut. Primitives, patterns, and templates land in later slices; BO migrates to consume this package after the prod cut.

What's here:

• src/tokens.css — the semantic token contract (--xlr-*), the scale tokens (incl. the net-new spacing scale bo.css lacked), and the default theme = the BrainOrchestra brand (the seed).
• src/themes/nootio.css — a stub Nootio theme proving per-product override ([data-xlr-product="nootio"]); values are placeholders pending the Nootio brand pass.

Token tiers (the contract)

| Tier | Examples | Who sets it | |---|---|---| | Scale | --xlr-space-1..8, --xlr-radius-*, --xlr-font-* | the DS (shared) | | Semantic | --xlr-ink, --xlr-accent, --xlr-surface, --xlr-danger | the DS default (BO) + product/mood themes | | Theme values | the actual hex/font behind the semantics | per product (data-xlr-product) / mood (data-xlr-mood) |

Components consume only SEMANTIC tokens — never a raw value. That's what lets one product re-skin without forking a component.

Usage (intended, once consumed)

import "@xalerate/xlr-ds/tokens.css";
import "@xalerate/xlr-ds/themes/nootio.css"; // only in Nootio

<div className="xlr-root" data-xlr-product="nootio" data-xlr-mood="light">
  {/* app */}
</div>

Next slices (per charter §7–9)

1. (this) token contract + theming skeleton.
2. Port the moods/energies/densities from bo.css verbatim.
3. Primitives (Button, Badge, Input, Modal, Segmented, Dropdown, …) — --bo-*→--xlr-*, de-BO names, a11y bar (charter §3.4).
4. Compound patterns + the Templates layer (AppShell, ListPage, SettingsPage, AuthPage…).
5. Lift the 7 PROMOTEs (BrandLogo, ConfirmDialog, Meter, Reveal, …); fold merges (Banner⊃Callout, Tooltip⊃InfoTip); delete dead CSS; add build-new gaps (Tabs, Toast, Skeleton…).
6. BO consumes the package (replace its copy; delete the 2 duplicate copies). Then Nootio builds on it.

Storybook + a11y harness (the "in core" gate)

Every component ships with a story; interactive primitives carry keyboard play-tests; the toolbar flips Product/Mood for the per-theme review. This is the charter a11y bar (RULES.md → Accessibility bar). Details + the CI test-runner wiring: .storybook/README.md.

npm run storybook        # dev server :6006 — flip Product/Mood in the toolbar
npm run build-storybook  # static build (compiles every story + play function)
npm run check            # tsc + DS conformance lint — must stay green

axe (a11y) runs via @storybook/addon-a11y; keyboard/interaction tests via @storybook/test play functions; test-storybook (@storybook/test-runner) is the documented headless CI step that turns axe + play into hard failures.

Open packaging decision (charter §11)

Where this physically lives — a workspace inside the BO repo vs a standalone design-cowork-owned repo — and the registry, are the one open packaging call. The source here is home-agnostic, so that decision can be made without reworking these files.