Files

C. Cassel 0d38bd3108 feat(web): implement complete workspace with themes, tabs, sidebar, and mobile

Transform CalcText from a single-document calculator into a full workspace
application with multi-document support, theming, and responsive mobile experience.

- Theme system: 5 presets (Light, Dark, Matrix, Midnight, Warm) + accent colors
- Document model with localStorage persistence and auto-save
- Tab bar with keyboard shortcuts (Ctrl+N/W/Tab/1-9), rename, close
- Sidebar with search, recent, favorites, folders, templates, drag-and-drop
- 5 templates: Budget, Invoice, Unit Converter, Trip Planner, Loan Calculator
- Status bar with cursor position, engine status, dedication to Igor Cassel
- Results panel: type-specific colors, click-to-copy, error hints
- Format toolbar: H, B, I, //, color labels with live preview toggle
- Syntax highlighting using theme CSS variables
- Error hover tooltips
- Mobile: bottom results tray, sidebar drawer, touch targets, safe areas
- Docker multi-stage build (Rust WASM + Vite + Nginx)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-03-18 09:12:05 -04:00

2.5 KiB

Raw Blame History

Design System: CalcText

Components, tokens, and patterns that grow from actual usage — not upfront planning.

Created: 2026-03-17 Phase: 7 — Design System (optional) Agent: Freya (Designer)

What Belongs Here

The Design System captures reusable patterns that emerge during UX Design (Phase 4). It is not designed upfront — it crystallizes from real page specifications.

What goes here:

Design Tokens — Colors, spacing, typography, shadows
Components — Buttons, inputs, cards, navigation elements
Patterns — Layouts, form structures, content blocks
Visual Design — Mood boards, design concepts, color and typography explorations
Assets — Logos, icons, images, graphics

Folder Structure

D-Design-System/
├── 00-design-system.md          <- This file (hub + guide)
├── 01-Visual-Design/
│   ├── mood-boards/
│   ├── design-concepts/
│   ├── color-exploration/
│   └── typography-tests/
├── 02-Assets/
│   ├── logos/
│   ├── icons/
│   ├── images/
│   └── graphics/
└── components/
    ├── interactive/
    ├── form/
    ├── layout/
    ├── content/
    ├── feedback/
    └── navigation/

Spacing Scale

Will be defined during first design session.

Token	Value	Use
space-3xs	—	Hairline gaps
space-2xs	—	Minimal spacing
space-xs	—	Tight spacing
space-sm	—	Small gaps
space-md	—	Default element spacing
space-lg	—	Comfortable spacing
space-xl	—	Section padding
space-2xl	—	Section gaps
space-3xl	—	Page-level breathing room

Type Scale

Will be defined during first design session.

Token	Value	Use
text-3xs	—	Fine print
text-2xs	—	Metadata
text-xs	—	Captions
text-sm	—	Labels
text-md	—	Body text
text-lg	—	Emphasis
text-xl	—	Subheadings
text-2xl	—	Section titles
text-3xl	—	Hero headings

Tokens

Additional design tokens will be documented here as they emerge from page specifications.

Patterns

Patterns will be documented here as spacing objects recur across pages.

Components

Components will be documented here as patterns emerge across scenarios.

Created using Whiteport Design Studio (WDS) methodology

2.5 KiB Raw Blame History