|
|
@@ -165,6 +165,86 @@ When a cell or range is selected, show a compact set of floating action buttons
|
|
|
|
|
|
---
|
|
|
|
|
|
+## 13. Visual Design & Styling
|
|
|
+
|
|
|
+The goal is intentional minimalism — not bare HTML. The current stylesheet has good structural foundations but is visibly unfinished: placeholder colours throughout, a content-template base, and unstyled interactive elements. Items are ordered so that each one builds on the previous.
|
|
|
+
|
|
|
+### Foundational
|
|
|
+
|
|
|
+- [ ] **13.1 Establish a CSS design token set**
|
|
|
+
|
|
|
+ Define all colours, spacing, and radii as CSS custom properties on `:root` before touching anything else. Suggested palette:
|
|
|
+ - `--color-bg: #f9fafb` (page background)
|
|
|
+ - `--color-surface: #ffffff` (cell / panel background)
|
|
|
+ - `--color-border: #e5e7eb` (grid lines, panel edges)
|
|
|
+ - `--color-header-bg: #f3f4f6` (row/column headers)
|
|
|
+ - `--color-text: #111827` (primary text)
|
|
|
+ - `--color-text-muted: #6b7280` (header labels, hints)
|
|
|
+ - `--color-accent: #3b82f6` (focus ring, selection border)
|
|
|
+ - `--color-accent-subtle: #eff6ff` (selection fill, hover tint)
|
|
|
+
|
|
|
+- [ ] **13.2 Strip out content-template CSS**
|
|
|
+
|
|
|
+ The stylesheet was adapted from a blog template. Remove or replace:
|
|
|
+ - `max-width: 600px` on `body` — clips the table on most screens; a spreadsheet should use available width
|
|
|
+ - `h1`, `h2`, `h3` type scale — not used in the app
|
|
|
+ - `line-height: 1.5em` on `body` — intended for prose, not a grid
|
|
|
+ - `a` tag styles (`text-decoration`, `color: #09f`) — not relevant to the app chrome
|
|
|
+
|
|
|
+- [ ] **13.3 Replace all placeholder colours**
|
|
|
+
|
|
|
+ Several elements have placeholder colours that were clearly never updated:
|
|
|
+ - `#controls-left`: `background-color: pink` → `var(--color-surface)`
|
|
|
+ - `#controls-bottom`: `background-color: lightblue` → `var(--color-surface)`
|
|
|
+ - `#main-logo`: `background-color: lightblue` → transparent (let the SVG stand alone)
|
|
|
+ - `.control-group`: `background-color: lightgreen` → remove; use spacing to separate groups
|
|
|
+
|
|
|
+- [ ] **13.4 Change grid lines from black to the border token**
|
|
|
+
|
|
|
+ Replace `border: 1px solid black` on `td, th` with `border: 1px solid var(--color-border)`. This is the single highest-impact change to the table's appearance.
|
|
|
+
|
|
|
+### Typography
|
|
|
+
|
|
|
+- [ ] **13.5 Switch to a system font stack**
|
|
|
+
|
|
|
+ Replace the current `'Helvetica Neue', Verdana, Helvetica, Arial, sans-serif` with `system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`. This makes the app feel native on each platform rather than web-circa-2010.
|
|
|
+
|
|
|
+- [ ] **13.6 Use monospace for cell values**
|
|
|
+
|
|
|
+ Numbers in a proportional font look accidental; numbers in a monospace font look deliberate. Apply `font-family: 'SF Mono', ui-monospace, 'Fira Code', monospace` to `td input` and use a slightly smaller size (around `0.875rem`) relative to the header labels.
|
|
|
+
|
|
|
+### Grid & Cells
|
|
|
+
|
|
|
+- [ ] **13.7 Make inputs fill their cells**
|
|
|
+
|
|
|
+ `td input` currently has a fixed `width: 80px`, leaving dead space in the `<td>` that does not respond to clicks. Set `width: 100%` and ensure `box-sizing: border-box` so the input expands to fill the full cell width.
|
|
|
+
|
|
|
+- [ ] **13.8 Refine hover and focus states**
|
|
|
+
|
|
|
+ Current states (`#ccc` hover, `#ccf` focus background) are heavy and generic. Suggested approach:
|
|
|
+ - Hover: `var(--color-accent-subtle)` — a very light tint
|
|
|
+ - Focus: remove the background change entirely; rely on the `smartborder` ring (13.9) as the focus indicator, which avoids the "form field in a table" feeling
|
|
|
+
|
|
|
+- [ ] **13.9 Style the `smartborder` selection ring**
|
|
|
+
|
|
|
+ The `smartborder` concept (an absolutely-positioned overlay extending ~2px beyond the cell boundary) is the right approach — it mirrors how professional spreadsheets handle selection. Replace the current `3px solid blue` with `2px solid var(--color-accent)` and ensure `pointer-events: none` so it does not interfere with clicking adjacent cells.
|
|
|
+
|
|
|
+- [ ] **13.10 Style the `smartborder` action buttons**
|
|
|
+
|
|
|
+ The range-action buttons (extend, fill, move, empty, delete, copy) are currently unstyled blue circles. Redesign as small, clean pill buttons: white background, `var(--color-border)` border, `var(--color-text)` icon or label, with a shadow on hover. Size them to be comfortably tappable (minimum 32×32px touch target).
|
|
|
+
|
|
|
+- [ ] **13.11 Differentiate row and column headers**
|
|
|
+
|
|
|
+ Apply `background: var(--color-header-bg)` and `color: var(--color-text-muted)` to `th`. Remove bold weight — a medium-weight muted label reads as a header without competing with cell content.
|
|
|
+
|
|
|
+### Control Panel & Chrome
|
|
|
+
|
|
|
+- [ ] **13.12 Redesign the panel toggle buttons**
|
|
|
+
|
|
|
+ `#left-controls-button` and `#bottom-controls-button` currently render as `xx-large` bold unicode arrows with a 2px border radius — too raw. Replace with small, refined pill or tab buttons: consistent padding, `var(--color-border)` border, `border-radius: 6px`, normal font weight, subtle hover state.
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
## 9. Touch Support
|
|
|
|
|
|
- [ ] **9.1 Make cells tap-friendly**
|
Brandon Wong