Adopting Pixie Dust in Studio
This mapping is based on the reviewed Studio stylesheet in apps/studio/src/styles.css. Verify the current branch before applying. The kit does not modify any app behavior.
Token bridge
| Existing token | Pixie token | Purpose |
|---|---|---|
| --bg | --px-bg | Workspace |
| --panel | --px-surface | Panels and navigation |
| --line | --px-border | Decorative separators |
| --text | --px-text | Primary text |
| --muted | --px-muted | Secondary text |
| --accent | --px-accent | Primary action and selection |
| --ok | --px-success | Accepted result |
| --warn | --px-warning | Needs review |
| --bad | --px-danger | Failure |
Important implementation details
- Change primary button text from white to
--px-on-accent. White text on lime does not provide sufficient contrast. - Use
--px-control-borderon input boundaries and secondary buttons. The softer panel border is decorative, not the only cue identifying a control. - Replace hard-coded blue selected backgrounds, graph glows, and chart fills alongside the legacy variables. Update the React Flow theme and controls too.
- Keep one selected-row treatment, a visible keyboard focus ring, and a textual description for each status. Tooltips cannot be the only source of required information.
- Prefer a 240px navigation rail and a flexible workspace. Allow a 320–400px inspector at wide widths; stack it or use a focus-managed sheet on smaller screens.
- Use semantic tabs with arrow-key handling, properly labeled dialogs with focus return, and a navigable graph alternative. These behavioral primitives must come from the app, not from CSS.
- Provide loading, empty, error, permission-denied, and unavailable states. Never fill a live screen with synthetic results to hide missing data.
- Keep destructive confirmation language specific: name the automation or revision, explain the consequence, and retain a cancel action.
- Self-host licensed font files. The kit uses safe system fallbacks and does not load remote fonts.
Motion contract
Decorative dust is opt-in at the product surface level. It must never obscure evidence or suggest a run is active. Graph events animate only after their events exist. Reduced-motion users get the same state and information without motion.
Acceptance checklist
- Normal text meets 4.5:1 contrast; meaningful non-text boundaries and focus indicators meet 3:1 against adjacent surfaces.
- At 200% zoom, controls remain usable and content reflows. A table can scroll inside its own container.
- All actions work with keyboard; focus remains visible and moves predictably after overlays close.
- 320px-wide screens retain readable controls and a complete path to every operation.
- Current, accepted, review-needed, failed, and waiting states are distinguishable without color.
- Test at least automation list, recorder, run inspector, API explorer, and a failed verification.
Scope: reusable dark-theme design kit. Light mode and an application-wide rollout are separate work.