@lakea/ui

Purpose

@lakea/ui provides React components for building scientific visualization interfaces:

• Charts — Scatter plots, histograms, HR diagrams

Current Structure

packages/ui/src/
├── charts/
│   └── ScatterPlot.tsx
└── index.ts

Dependencies

• @lakea/core — Types for data points and celestial objects
• @lakea/design-system — Design tokens for styling

Design Principles

1. Use @lakea/core types — All props use shared type definitions
2. Use design-system tokens — Styling via @lakea/design-system/tokens, not Tailwind directly
3. Headless where possible — Logic separated from presentation
4. Accessible — ARIA labels, keyboard navigation
5. Responsive — Works on mobile and desktop

Accessibility

Target Level

WCAG 2.1 AA compliance for all interactive components.

Requirements

Requirement	Implementation
Color contrast	4.5:1 minimum for text
Keyboard navigation	All interactive elements focusable
ARIA labels	Icons and charts have descriptive labels
Focus indicators	Visible focus rings on all controls

For Charts

• Provide aria-label on SVG container
• Include text alternatives for data points
• Ensure tooltip content is accessible
• Support keyboard navigation for data points

Styling Approach

Components use inline styles with design-system tokens:

import { colors, radius, shadows } from '@lakea/design-system/tokens';

const style = {
  backgroundColor: colors.slate[800],
  borderRadius: radius.lg,
  boxShadow: shadows.md,
};

See CSS Architecture for details on the styling rules.

Planned Components

• Histogram — Distribution visualization
• HRDiagram — Hertzsprung-Russell diagram
• HubbleDiagram — Redshift vs distance