Platforms
Web
The CSS system, transit.js and how pages consume them.
The web platform is the CSS system in platforms/web/ plus the transit renderers. Every value comes from tokens.json or components.tokens.json; go test ./... fails on a raw colour or size in a component file.
| File | What it is |
|---|---|
tokens.css | Every token as a custom property, light and dark (generated) |
chitransit.css | The bundle: tokens and base in cascade layers, then components and utilities (generated) |
base/ | Reset and global element styles |
components/ | One stylesheet per web component |
utilities/ | Layout and visual helpers, and the generated spacing, text and visual utilities |
transit.js, transit.css | The web implementations of the contracts: routeIcon, lineBar, station and vehicle markers, arrival cards |
icons/ | The transit SVGs (generated from icons/) |
Conventions
Classes use the ct- prefix and --modifier variants; state comes from aria-pressed, aria-current, [disabled] and :focus-visible. Each component reads var(--button-radius, var(--ct-button-radius)): change the token to restyle every instance, or set --button-radius on one element to override it.
Transit icons
/site/site.js fetches /icons/{train,bus,train-bus,refresh}.svg, the single source of truth, and turns each into a <symbol id="i-{name}">, so a page draws them with <svg><use href="#i-train"/></svg>, coloured through currentColor. A refresh control's arrow spins one turn when pressed (none under Reduce Motion).
This site
This site is a consumer: every page loads /site/chitransit.css first and uses the ct- classes for its controls (search field, theme switch, buttons, cards, tables). The page shell's layout is the only page-local CSS.