lhumina_code/hero_whiteboard

Fork 0

Theme: kanban, mindmap, connectors, sticky palette ignore the active theme #116

New issue

Open

opened 2026-04-30 09:02:11 +00:00 by AhmedHanafy725 · 4 comments

AhmedHanafy725 commented

2026-04-30 09:02:11 +00:00

Member

Summary

After #115 the chrome (navbar / toolbar / properties / zoom / minimap) follows the active theme, and calendar.js was already wired to WhiteboardThemes.get(...). But several object types still paint themselves with hard-coded colors, so a Light or Ocean board still has dark-grey kanban columns, dark-grey mindmap nodes, etc.

Affected object types

Kanban — uses hard-coded #212529 (board bg), #2b3035 (column / card bg), #dee2e6 (title), #3b3b5c / #495057 (borders), #888 / #555 / #666 (labels / icons), #007AFF (selected). The theme already exposes kanban-bg / kanban-column-bg / kanban-card-bg / kanban-card-border / kanban-text-color / kanban-title-color — kanban.js just doesn’t read them.
Mind map — hard-codes node fill #2b3035, text #dee2e6 / #fff, link stroke #555, comment editor #1a1d21 / #495057 / #a78bfa / #007AFF. No mindmap-* tokens exist on the theme dict yet.
Connectors — connectors.js defaults stroke to #007AFF literally instead of reading connector-stroke from the theme.
Objects (text / shapes / sticky default palette) — objects.js hard-codes the sticky color palette (STICKY_COLORS) and the default text/shape fills (#dee2e6, #1a1a1a) even though the theme already defines sticky-colors, text-color, shape-text-color, shape-stroke, etc.

Steps to reproduce

Switch to Light, Ocean, or Warm theme.
Add a kanban / mindmap / connector / sticky on the board.

Expected

Each new object renders in the theme’s palette. Switching theme also re-paints existing objects of these types.

Actual

Kanban / mindmap render in the Dark palette regardless of theme. Connector defaults stay the same #007AFF blue across all themes. Sticky palette is identical regardless of theme.

Approach

Two-part fix:

Wire existing tokens in kanban / connectors / objects to WhiteboardThemes.get(...) and re-render the affected objects from applyTheme the same way calendar does today.
Add mindmap-* tokens to defaultTheme and each built-in (and the existing custom themes), then make mindmap.js read them. Mindmap nodes / link / text / comment-editor get a dedicated mini-palette per theme.

The "re-paint on theme change" hook is already wired for calendars in themes.js::applyTheme; we extend the same loop to walk all kanbans / mindmaps / connectors and call their respective redraw helpers (kanban + mindmap already expose redraw functions; connectors will need a small applyTheme helper that walks the connector layer).

## Summary After #115 the chrome (navbar / toolbar / properties / zoom / minimap) follows the active theme, and `calendar.js` was already wired to `WhiteboardThemes.get(...)`. But several object types still paint themselves with hard-coded colors, so a Light or Ocean board still has dark-grey kanban columns, dark-grey mindmap nodes, etc. ## Affected object types - **Kanban** — uses hard-coded `#212529` (board bg), `#2b3035` (column / card bg), `#dee2e6` (title), `#3b3b5c` / `#495057` (borders), `#888` / `#555` / `#666` (labels / icons), `#007AFF` (selected). The theme already exposes `kanban-bg / kanban-column-bg / kanban-card-bg / kanban-card-border / kanban-text-color / kanban-title-color` — kanban.js just doesn’t read them. - **Mind map** — hard-codes node fill `#2b3035`, text `#dee2e6` / `#fff`, link stroke `#555`, comment editor `#1a1d21` / `#495057` / `#a78bfa` / `#007AFF`. No `mindmap-*` tokens exist on the theme dict yet. - **Connectors** — `connectors.js` defaults stroke to `#007AFF` literally instead of reading `connector-stroke` from the theme. - **Objects (text / shapes / sticky default palette)** — `objects.js` hard-codes the sticky color palette (`STICKY_COLORS`) and the default text/shape fills (`#dee2e6`, `#1a1a1a`) even though the theme already defines `sticky-colors`, `text-color`, `shape-text-color`, `shape-stroke`, etc. ## Steps to reproduce 1. Switch to Light, Ocean, or Warm theme. 2. Add a kanban / mindmap / connector / sticky on the board. ## Expected Each new object renders in the theme’s palette. Switching theme also re-paints existing objects of these types. ## Actual Kanban / mindmap render in the Dark palette regardless of theme. Connector defaults stay the same `#007AFF` blue across all themes. Sticky palette is identical regardless of theme. ## Approach Two-part fix: 1. **Wire existing tokens** in kanban / connectors / objects to `WhiteboardThemes.get(...)` and re-render the affected objects from `applyTheme` the same way calendar does today. 2. **Add `mindmap-*` tokens** to `defaultTheme` and each built-in (and the existing custom themes), then make `mindmap.js` read them. Mindmap nodes / link / text / comment-editor get a dedicated mini-palette per theme. The "re-paint on theme change" hook is already wired for calendars in `themes.js::applyTheme`; we extend the same loop to walk all kanbans / mindmaps / connectors and call their respective `redraw` helpers (kanban + mindmap already expose redraw functions; connectors will need a small `applyTheme` helper that walks the connector layer).

AhmedHanafy725 commented

2026-04-30 09:03:42 +00:00

Author

Member

Implementation Spec for Issue #116

Objective

Make kanban, mindmap, connectors, and the sticky/text/shape defaults follow the active theme. Today only the canvas, the chrome (after #115), and calendars (always) follow the theme; everything else is hard-coded to the Dark palette.

Files to Modify

crates/hero_whiteboard_ui/static/web/js/whiteboard/themes.js — extend defaultTheme and the four built-ins with mindmap-* tokens; extend applyTheme's redraw loop to cover kanban / mindmap / connectors.
crates/hero_whiteboard_ui/static/web/js/whiteboard/kanban.js — replace hard-coded chrome colors with WhiteboardThemes.get('kanban-*').
crates/hero_whiteboard_ui/static/web/js/whiteboard/mindmap.js — replace hard-coded node / link / text / comment-editor colors with new mindmap-* theme reads.
crates/hero_whiteboard_ui/static/web/js/whiteboard/connectors.js — default new-connector stroke from connector-stroke; expose an applyTheme() helper that recolors any default-stroke connectors when the theme switches.
crates/hero_whiteboard_ui/static/web/js/whiteboard/objects.js — sticky color palette from sticky-colors; default text and shape stroke/text fills from text-color / shape-stroke / shape-text-color.

Implementation Plan

Step 1: themes.js — add mindmap tokens + redraw loop

File: crates/hero_whiteboard_ui/static/web/js/whiteboard/themes.js

Add to defaultTheme:

'mindmap-node-bg': '#2b3035',
'mindmap-node-text': '#dee2e6',
'mindmap-node-text-root': '#ffffff',
'mindmap-link-stroke': '#555',
'mindmap-placeholder-text': '#666',
'mindmap-comment-bg': '#1a1d21',
'mindmap-comment-border': '#495057',
'mindmap-comment-text': '#e0e0e0',
'mindmap-comment-accent': '#a78bfa',

Override these per built-in (Light / Ocean / Warm / Minimal) so each theme has a coherent mindmap palette. (Reuse kanban-* shades where the meaning matches.)
In applyTheme's post-canvas section, expand the existing calendar redraw loop so the same iteration also calls WhiteboardKanban.redraw(group) for each type === 'kanban', and WhiteboardMindmap.redraw(group) for each type === 'mindmap'.
After the loop, call WhiteboardConnectors.applyTheme() (added in step 4 below) to recolor any connector that was using the default stroke.

Dependencies: none.

Step 2: kanban.js — read theme tokens

File: crates/hero_whiteboard_ui/static/web/js/whiteboard/kanban.js

Replace literal colors in renderKanban and renderColumn with WhiteboardThemes.get('kanban-*'):

Hard-coded	Token
`#212529` (board bg)	`kanban-bg`
`#3b3b5c` (board border), `#495057` (card border, also selected stroke baseline)	`kanban-card-border`
`#2b3035` (column bg, card bg)	`kanban-column-bg` / `kanban-card-bg`
`#dee2e6` (column title)	`kanban-text-color`
`#888` (board label), `#555` (delete-col idle / "+ Column"), `#666` (add-card idle)	`kanban-title-color`

Selection / hover accents (#007AFF, #dc3545 for delete hover) stay as-is — those are functional state colors, not theme surfaces.

COL_COLORS (the per-column accent palette) stays hard-coded since it conveys per-column identity, not chrome.

Dependencies: Step 1 (so applyTheme triggers a redraw on theme change).

Step 3: mindmap.js — read mindmap-* tokens

File: crates/hero_whiteboard_ui/static/web/js/whiteboard/mindmap.js

Replace literal colors in renderMindmap and the comment-popup builder:

Hard-coded	Token
`#2b3035` (non-root node fill)	`mindmap-node-bg`
`#dee2e6` (non-root node text)	`mindmap-node-text`
`#fff` (root node text)	`mindmap-node-text-root`
`#555` (link default), `#888` / `#666` (placeholder text)	`mindmap-link-stroke` / `mindmap-placeholder-text`
`#1a1d21` (comment textarea bg), `#495057` (border), `#e0e0e0` (text), `#a78bfa` (header accent)	`mindmap-comment-bg / -border / -text / -accent`

Per-node user-chosen colors (tree.color, child.node.color) stay as-is — those are content, not chrome.

Dependencies: Step 1.

Step 4: connectors.js — theme default + applyTheme helper

File: crates/hero_whiteboard_ui/static/web/js/whiteboard/connectors.js

Replace the '#007AFF' literals at create time with WhiteboardThemes.get('connector-stroke').
Tag new connectors with _themeDefault: true if they were created without an explicit stroke override (so we can recolor them on theme change without clobbering user-chosen colors).
Add function applyTheme() to the public API that walks the connector layer and re-applies connector-stroke to every connector flagged _themeDefault.

Dependencies: none. (Step 1 will call applyTheme on theme switch.)

Step 5: objects.js — sticky palette + shape defaults

File: crates/hero_whiteboard_ui/static/web/js/whiteboard/objects.js

Replace the module-level STICKY_COLORS constant with a getter that returns WhiteboardThemes.get('sticky-colors') at call time (so theme switches see the new palette immediately for new stickies; existing stickies keep their chosen color).
Replace default text-fill #dee2e6 with WhiteboardThemes.get('text-color').
Replace default shape stroke #007AFF and shape-text #dee2e6 with WhiteboardThemes.get('shape-stroke') / WhiteboardThemes.get('shape-text-color') at create time.

Existing objects already store their resolved color, so theme switches don't retroactively repaint them — that's intentional, since users may have customized individual objects.

Dependencies: none.

Acceptance Criteria

Switch to Light / Ocean / Warm / Minimal — kanban renders with the theme's kanban-* palette (board, columns, cards, titles, labels).
Same — mindmaps render with the theme's mindmap-* palette (node, link, text, comment popup).
Switch theme on a board with existing kanbans / mindmaps — they re-paint live without reload.
New connectors created in Light / Ocean / Warm use the theme's connector-stroke instead of a hard-coded blue.
New stickies and shapes pick up the theme's defaults at create time; existing ones keep their chosen color.
No regression on calendar (already wired) or chrome (#115).
cargo fmt, cargo clippy --workspace --all-targets -- -D warnings, cargo test --workspace --lib clean.

Notes

Why mindmap needs new tokens — the four hard-coded colors don't have semantic equivalents in the existing token set; adding mindmap-* keeps the override surface explicit.
Why connectors get an _themeDefault flag — without it, recoloring on theme switch would erase user-customized colors. The flag is set only when a connector is created without explicit opts.stroke, so user-customized ones stay untouched.
Why existing stickies/shapes don't repaint — they store resolved colors in their server payload; retroactively repainting would change persisted data. Only future objects pick up the new defaults.
Cross-tab sync — applyTheme already broadcasts via board.theme.updated, and the receiver path calls loadTheme(...) which calls applyTheme(...). Adding redraws to applyTheme therefore fires on every tab automatically.

## Implementation Spec for Issue #116 ### Objective Make kanban, mindmap, connectors, and the sticky/text/shape defaults follow the active theme. Today only the canvas, the chrome (after #115), and calendars (always) follow the theme; everything else is hard-coded to the Dark palette. ### Files to Modify - `crates/hero_whiteboard_ui/static/web/js/whiteboard/themes.js` — extend `defaultTheme` and the four built-ins with `mindmap-*` tokens; extend `applyTheme`'s redraw loop to cover kanban / mindmap / connectors. - `crates/hero_whiteboard_ui/static/web/js/whiteboard/kanban.js` — replace hard-coded chrome colors with `WhiteboardThemes.get('kanban-*')`. - `crates/hero_whiteboard_ui/static/web/js/whiteboard/mindmap.js` — replace hard-coded node / link / text / comment-editor colors with new `mindmap-*` theme reads. - `crates/hero_whiteboard_ui/static/web/js/whiteboard/connectors.js` — default new-connector stroke from `connector-stroke`; expose an `applyTheme()` helper that recolors any default-stroke connectors when the theme switches. - `crates/hero_whiteboard_ui/static/web/js/whiteboard/objects.js` — sticky color palette from `sticky-colors`; default text and shape stroke/text fills from `text-color` / `shape-stroke` / `shape-text-color`. ### Implementation Plan #### Step 1: themes.js — add mindmap tokens + redraw loop File: `crates/hero_whiteboard_ui/static/web/js/whiteboard/themes.js` 1. Add to `defaultTheme`: ```js 'mindmap-node-bg': '#2b3035', 'mindmap-node-text': '#dee2e6', 'mindmap-node-text-root': '#ffffff', 'mindmap-link-stroke': '#555', 'mindmap-placeholder-text': '#666', 'mindmap-comment-bg': '#1a1d21', 'mindmap-comment-border': '#495057', 'mindmap-comment-text': '#e0e0e0', 'mindmap-comment-accent': '#a78bfa', ``` 2. Override these per built-in (Light / Ocean / Warm / Minimal) so each theme has a coherent mindmap palette. (Reuse `kanban-*` shades where the meaning matches.) 3. In `applyTheme`'s post-canvas section, expand the existing calendar redraw loop so the same iteration also calls `WhiteboardKanban.redraw(group)` for each `type === 'kanban'`, and `WhiteboardMindmap.redraw(group)` for each `type === 'mindmap'`. 4. After the loop, call `WhiteboardConnectors.applyTheme()` (added in step 4 below) to recolor any connector that was using the default stroke. Dependencies: none. #### Step 2: kanban.js — read theme tokens File: `crates/hero_whiteboard_ui/static/web/js/whiteboard/kanban.js` Replace literal colors in `renderKanban` and `renderColumn` with `WhiteboardThemes.get('kanban-*')`: | Hard-coded | Token | |---|---| | `#212529` (board bg) | `kanban-bg` | | `#3b3b5c` (board border), `#495057` (card border, also selected stroke baseline) | `kanban-card-border` | | `#2b3035` (column bg, card bg) | `kanban-column-bg` / `kanban-card-bg` | | `#dee2e6` (column title) | `kanban-text-color` | | `#888` (board label), `#555` (delete-col idle / "+ Column"), `#666` (add-card idle) | `kanban-title-color` | Selection / hover accents (`#007AFF`, `#dc3545` for delete hover) stay as-is — those are functional state colors, not theme surfaces. `COL_COLORS` (the per-column accent palette) stays hard-coded since it conveys per-column identity, not chrome. Dependencies: Step 1 (so `applyTheme` triggers a redraw on theme change). #### Step 3: mindmap.js — read mindmap-* tokens File: `crates/hero_whiteboard_ui/static/web/js/whiteboard/mindmap.js` Replace literal colors in `renderMindmap` and the comment-popup builder: | Hard-coded | Token | |---|---| | `#2b3035` (non-root node fill) | `mindmap-node-bg` | | `#dee2e6` (non-root node text) | `mindmap-node-text` | | `#fff` (root node text) | `mindmap-node-text-root` | | `#555` (link default), `#888` / `#666` (placeholder text) | `mindmap-link-stroke` / `mindmap-placeholder-text` | | `#1a1d21` (comment textarea bg), `#495057` (border), `#e0e0e0` (text), `#a78bfa` (header accent) | `mindmap-comment-bg / -border / -text / -accent` | Per-node user-chosen colors (`tree.color`, `child.node.color`) stay as-is — those are content, not chrome. Dependencies: Step 1. #### Step 4: connectors.js — theme default + applyTheme helper File: `crates/hero_whiteboard_ui/static/web/js/whiteboard/connectors.js` 1. Replace the `'#007AFF'` literals at create time with `WhiteboardThemes.get('connector-stroke')`. 2. Tag new connectors with `_themeDefault: true` if they were created without an explicit stroke override (so we can recolor them on theme change without clobbering user-chosen colors). 3. Add `function applyTheme()` to the public API that walks the connector layer and re-applies `connector-stroke` to every connector flagged `_themeDefault`. Dependencies: none. (Step 1 will call `applyTheme` on theme switch.) #### Step 5: objects.js — sticky palette + shape defaults File: `crates/hero_whiteboard_ui/static/web/js/whiteboard/objects.js` 1. Replace the module-level `STICKY_COLORS` constant with a getter that returns `WhiteboardThemes.get('sticky-colors')` at call time (so theme switches see the new palette immediately for new stickies; existing stickies keep their chosen color). 2. Replace default text-fill `#dee2e6` with `WhiteboardThemes.get('text-color')`. 3. Replace default shape stroke `#007AFF` and shape-text `#dee2e6` with `WhiteboardThemes.get('shape-stroke')` / `WhiteboardThemes.get('shape-text-color')` at create time. Existing objects already store their resolved color, so theme switches don't retroactively repaint them — that's intentional, since users may have customized individual objects. Dependencies: none. ### Acceptance Criteria - [ ] Switch to Light / Ocean / Warm / Minimal — kanban renders with the theme's `kanban-*` palette (board, columns, cards, titles, labels). - [ ] Same — mindmaps render with the theme's `mindmap-*` palette (node, link, text, comment popup). - [ ] Switch theme on a board with existing kanbans / mindmaps — they re-paint live without reload. - [ ] New connectors created in Light / Ocean / Warm use the theme's `connector-stroke` instead of a hard-coded blue. - [ ] New stickies and shapes pick up the theme's defaults at create time; existing ones keep their chosen color. - [ ] No regression on calendar (already wired) or chrome (#115). - [ ] `cargo fmt`, `cargo clippy --workspace --all-targets -- -D warnings`, `cargo test --workspace --lib` clean. ### Notes - **Why mindmap needs new tokens** — the four hard-coded colors don't have semantic equivalents in the existing token set; adding `mindmap-*` keeps the override surface explicit. - **Why connectors get an `_themeDefault` flag** — without it, recoloring on theme switch would erase user-customized colors. The flag is set only when a connector is created without explicit `opts.stroke`, so user-customized ones stay untouched. - **Why existing stickies/shapes don't repaint** — they store resolved colors in their server payload; retroactively repainting would change persisted data. Only future objects pick up the new defaults. - **Cross-tab sync** — `applyTheme` already broadcasts via `board.theme.updated`, and the receiver path calls `loadTheme(...)` which calls `applyTheme(...)`. Adding redraws to `applyTheme` therefore fires on every tab automatically.

AhmedHanafy725 commented

2026-04-30 09:21:06 +00:00

Author

Member

Test Results

cargo fmt --all -- --check — clean
cargo clippy --workspace --all-targets -- -D warnings — clean
cargo test --workspace --lib — 0 failed
node --check on themes.js / kanban.js / mindmap.js / connectors.js / objects.js — clean

## Test Results - `cargo fmt --all -- --check` — clean - `cargo clippy --workspace --all-targets -- -D warnings` — clean - `cargo test --workspace --lib` — 0 failed - `node --check` on themes.js / kanban.js / mindmap.js / connectors.js / objects.js — clean

AhmedHanafy725 commented

2026-04-30 09:21:42 +00:00

Author

Member

Implementation Summary

Wire kanban / mindmap / connectors / sticky / shape / drawing defaults to the active theme. Existing widgets re-paint live when the theme changes; persisted user-chosen colors are preserved.

`crates/hero_whiteboard_ui/static/web/js/whiteboard/themes.js`

Added 9 mindmap-* tokens to defaultTheme (Dark) and per-theme overrides for Light / Ocean / Warm / Minimal.
Expanded the post-canvas redraw loop in applyTheme: instead of only re-drawing calendars, it now walks every registered object and calls WhiteboardKanban.redraw(group) / WhiteboardMindmap.redraw(group) / WhiteboardCalendar.redraw(group) for the matching type.
After the loop, calls WhiteboardConnectors.applyTheme() (added below) to recolor any default-stroke connectors.

`crates/hero_whiteboard_ui/static/web/js/whiteboard/kanban.js`

Replaced hard-coded surface colors with WhiteboardThemes.get('kanban-*'):

Was	Token
`#212529` (board bg)	`kanban-bg`
`#3b3b5c`, `#495057` (borders)	`kanban-card-border`
`#2b3035` (column / card bg)	`kanban-column-bg` / `kanban-card-bg`
`#dee2e6` (titles / text)	`kanban-text-color`
`#888` / `#555` / `#666` (label / del / add idle)	`kanban-title-color`

Selection accents (#007AFF / #dc3545) are functional state colors and stayed as-is. COL_COLORS (per-column palette) also stayed since it conveys identity, not chrome.

`crates/hero_whiteboard_ui/static/web/js/whiteboard/mindmap.js`

Replaced hard-coded node / link / placeholder / comment-popup colors with mindmap-* reads. Per-node user colors stayed as-is (content). The flip indicator, +/− toggle, "+" add button, and the entire comment popup now use the theme palette. Title-edit and node-edit inline inputs read the theme background and text color.

`crates/hero_whiteboard_ui/static/web/js/whiteboard/connectors.js`

Default new-connector stroke now reads from connector-stroke instead of a hard-coded #007AFF.
Connectors created without an explicit stroke override are flagged _themeDefault: true.
New public applyTheme() walks all connectors, recolors only those flagged _themeDefault. User-customized strokes are left alone, as are server-loaded connectors (which always carry an explicit stroke in their style payload).

`crates/hero_whiteboard_ui/static/web/js/whiteboard/objects.js`

STICKY_COLORS constant replaced with getStickyColors() that returns WhiteboardThemes.get('sticky-colors') at call time, falling back to the legacy palette.
Default text fill (group._mdFill) reads text-color from the theme.
createShape defaults read shape-fill / shape-stroke / shape-stroke-width / shape-text-color.
createDrawing defaults read draw-stroke / draw-stroke-width.

Existing stickies / shapes / drawings keep their persisted colors — only future objects pick up the new defaults at create time. Existing kanbans / mindmaps re-paint on theme change.

Files Changed

themes.js — new mindmap-* tokens + redraw loop expansion
kanban.js — surface tokens
mindmap.js — node / link / popup tokens
connectors.js — theme default + applyTheme helper
objects.js — sticky palette + shape / text / drawing defaults

Test Results

cargo fmt --all -- --check — clean
cargo clippy --workspace --all-targets -- -D warnings — clean
cargo test --workspace --lib — 0 failed
node --check on all five modules — clean

Manual smoke

Switch theme on a board with existing kanbans — columns / cards / titles re-paint to match.
Switch theme on a board with existing mindmaps — non-root nodes / links / placeholders re-paint; the comment popup reflects the new palette.
Create a connector under Light / Ocean / Warm — uses the theme accent instead of #007AFF.
Switch theme — connectors that weren't user-customized recolor; user-customized ones keep their chosen color.
Create a sticky / shape / drawing under Ocean / Warm — picks up theme defaults; existing objects keep their persisted colors.

Notes

Calendar already worked — it was always wired to WhiteboardThemes.get('calendar-*'); only the redraw loop was missing the kanban / mindmap branches.
Kanban hover states now derive from existing tokens (kanban-card-border for the menu hit hover, kanban-card-border for card hover) so hover transitions remain visible across themes.
Existing persisted colors are intentional — repainting them retroactively would change persisted server data. The fix only affects defaults at creation time and live re-render of widgets that build their content from state.

## Implementation Summary Wire kanban / mindmap / connectors / sticky / shape / drawing defaults to the active theme. Existing widgets re-paint live when the theme changes; persisted user-chosen colors are preserved. ### `crates/hero_whiteboard_ui/static/web/js/whiteboard/themes.js` - Added 9 `mindmap-*` tokens to `defaultTheme` (Dark) and per-theme overrides for Light / Ocean / Warm / Minimal. - Expanded the post-canvas redraw loop in `applyTheme`: instead of only re-drawing calendars, it now walks every registered object and calls `WhiteboardKanban.redraw(group)` / `WhiteboardMindmap.redraw(group)` / `WhiteboardCalendar.redraw(group)` for the matching type. - After the loop, calls `WhiteboardConnectors.applyTheme()` (added below) to recolor any default-stroke connectors. ### `crates/hero_whiteboard_ui/static/web/js/whiteboard/kanban.js` Replaced hard-coded surface colors with `WhiteboardThemes.get('kanban-*')`: | Was | Token | |---|---| | `#212529` (board bg) | `kanban-bg` | | `#3b3b5c`, `#495057` (borders) | `kanban-card-border` | | `#2b3035` (column / card bg) | `kanban-column-bg` / `kanban-card-bg` | | `#dee2e6` (titles / text) | `kanban-text-color` | | `#888` / `#555` / `#666` (label / del / add idle) | `kanban-title-color` | Selection accents (`#007AFF` / `#dc3545`) are functional state colors and stayed as-is. `COL_COLORS` (per-column palette) also stayed since it conveys identity, not chrome. ### `crates/hero_whiteboard_ui/static/web/js/whiteboard/mindmap.js` Replaced hard-coded node / link / placeholder / comment-popup colors with `mindmap-*` reads. Per-node user colors stayed as-is (content). The flip indicator, +/− toggle, "+" add button, and the entire comment popup now use the theme palette. Title-edit and node-edit inline inputs read the theme background and text color. ### `crates/hero_whiteboard_ui/static/web/js/whiteboard/connectors.js` - Default new-connector stroke now reads from `connector-stroke` instead of a hard-coded `#007AFF`. - Connectors created without an explicit stroke override are flagged `_themeDefault: true`. - New public `applyTheme()` walks all connectors, recolors only those flagged `_themeDefault`. User-customized strokes are left alone, as are server-loaded connectors (which always carry an explicit stroke in their style payload). ### `crates/hero_whiteboard_ui/static/web/js/whiteboard/objects.js` - `STICKY_COLORS` constant replaced with `getStickyColors()` that returns `WhiteboardThemes.get('sticky-colors')` at call time, falling back to the legacy palette. - Default text fill (`group._mdFill`) reads `text-color` from the theme. - `createShape` defaults read `shape-fill` / `shape-stroke` / `shape-stroke-width` / `shape-text-color`. - `createDrawing` defaults read `draw-stroke` / `draw-stroke-width`. Existing stickies / shapes / drawings keep their persisted colors — only future objects pick up the new defaults at create time. Existing kanbans / mindmaps re-paint on theme change. ### Files Changed - `themes.js` — new `mindmap-*` tokens + redraw loop expansion - `kanban.js` — surface tokens - `mindmap.js` — node / link / popup tokens - `connectors.js` — theme default + `applyTheme` helper - `objects.js` — sticky palette + shape / text / drawing defaults ### Test Results - `cargo fmt --all -- --check` — clean - `cargo clippy --workspace --all-targets -- -D warnings` — clean - `cargo test --workspace --lib` — 0 failed - `node --check` on all five modules — clean ### Manual smoke 1. Switch theme on a board with existing kanbans — columns / cards / titles re-paint to match. 2. Switch theme on a board with existing mindmaps — non-root nodes / links / placeholders re-paint; the comment popup reflects the new palette. 3. Create a connector under Light / Ocean / Warm — uses the theme accent instead of `#007AFF`. 4. Switch theme — connectors that weren't user-customized recolor; user-customized ones keep their chosen color. 5. Create a sticky / shape / drawing under Ocean / Warm — picks up theme defaults; existing objects keep their persisted colors. ### Notes - **Calendar already worked** — it was always wired to `WhiteboardThemes.get('calendar-*')`; only the redraw loop was missing the kanban / mindmap branches. - **Kanban hover states** now derive from existing tokens (`kanban-card-border` for the menu hit hover, `kanban-card-border` for card hover) so hover transitions remain visible across themes. - **Existing persisted colors are intentional** — repainting them retroactively would change persisted server data. The fix only affects defaults at creation time and live re-render of widgets that build their content from state.

AhmedHanafy725 commented

2026-04-30 09:26:43 +00:00

Author

Member

Iteration: fix `ReferenceError` regression

Renaming STICKY_COLORS to a getter inside objects.js left a stale STICKY_COLORS: STICKY_COLORS line in the public API export at line 1922. That undefined reference threw on module load, so WhiteboardObjects was never set, which cascaded into "can't put anything or see the old board content" since every other module that touches objects would fail.

Fix

objects.js — replaced the dead export with getStickyColors: getStickyColors (the actual function added in step 5).
properties.js — the one consumer at line 118 (WhiteboardObjects.STICKY_COLORS.forEach(...)) updated to WhiteboardObjects.getStickyColors().forEach(...).

node --check clean, cargo check clean, cargo clippy --all-targets -D warnings clean, cargo test --workspace --lib 0 failures.

## Iteration: fix `ReferenceError` regression Renaming `STICKY_COLORS` to a getter inside `objects.js` left a stale `STICKY_COLORS: STICKY_COLORS` line in the public API export at line 1922. That undefined reference threw on module load, so `WhiteboardObjects` was never set, which cascaded into "can't put anything or see the old board content" since every other module that touches objects would fail. ### Fix - `objects.js` — replaced the dead export with `getStickyColors: getStickyColors` (the actual function added in step 5). - `properties.js` — the one consumer at line 118 (`WhiteboardObjects.STICKY_COLORS.forEach(...)`) updated to `WhiteboardObjects.getStickyColors().forEach(...)`. `node --check` clean, `cargo check` clean, `cargo clippy --all-targets -D warnings` clean, `cargo test --workspace --lib` 0 failures.