francy51
7c93b8a1ae
- Add MiniStarMap, NpcMarketPanel, ShipStatusPanel, useKeyboardShortcuts - Add progress bars for approach/mining operations and cargo fill indicator - Rewrite docs from spreadsheet-first to exploration-first open-world RPG - Replace dev:db + dev:standalone with unified dev script (scripts/dev.sh) - Add Vite chunk splitting for three.js and spacetimedb - Fix displayName dependency in useSpacetimeConnection - Remove stale usePlayerSession.ts - Add AGENTS.md files across all packages
32 lines
1.0 KiB
Markdown
32 lines
1.0 KiB
Markdown
# packages/ui — Shared UI Primitives & Design Tokens
|
|
|
|
Package: `@void-nav/ui`
|
|
Exports: `Button`, `Panel` components and a CSS design token system.
|
|
|
|
## Structure
|
|
|
|
```
|
|
src/
|
|
index.ts Barrel export: Button, Panel
|
|
primitives/
|
|
Button.tsx Button component with variant support
|
|
Panel.tsx Panel/card container component
|
|
styles.css Design tokens (dark space theme)
|
|
```
|
|
|
|
## Design Tokens
|
|
|
|
The CSS file in `src/styles.css` defines the visual identity of the entire project:
|
|
|
|
- **15 color tokens** — dark space palette (bg, fg, surface, accent, cyan, green, purple, red, muted, border)
|
|
- **3 font stacks** — display (Space Grotesk), body (Inter), mono (JetBrains Mono)
|
|
- **Border radius**, spacing, and shadow scales
|
|
|
|
These tokens are imported by `apps/game` and `apps/site` via Tailwind CSS `@import`.
|
|
|
|
## Conventions
|
|
|
|
- Components are minimal — they define structure, not complex behavior
|
|
- No external dependencies beyond React peer dependency
|
|
- Styles use CSS custom properties, not Tailwind classes directly (consumers apply Tailwind)
|