lhumina_code/hero_whiteboard

Fork 0

Floating toolbar dropdown items use hardcoded blue and chevron has no margin #164

New issue

Open

opened 2026-05-06 11:49:08 +00:00 by AhmedHanafy725 · 3 comments

AhmedHanafy725 commented

2026-05-06 11:49:08 +00:00

Member

Two related styling bugs in the floating selection toolbars dropdowns (font family list, font size presets, kanban column color, alignment, etc.):

Selected item color is hardcoded blue. The is-selected state on dropdown items uses var(--wb-primary) which resolves to the same blue regardless of the active whiteboard theme. Other selected/active states in the app respect theme accent colors. Either route through a theme-aware token or define --wb-primary per theme.
The dropdown trigger chevron has no left margin — the bi-chevron-down icon sits flush against the trigger label/value text. Add a small gap (e.g. 4-6px margin-left on the chevron, or gap on the parent flex container) so the trigger reads cleanly.

Fix both in selection_toolbar.css. Sweep the trigger DOM in selection_toolbar.js if needed to ensure the chevron is consistently the last child with the right class.

Two related styling bugs in the floating selection toolbars dropdowns (font family list, font size presets, kanban column color, alignment, etc.): 1. **Selected item color is hardcoded blue.** The `is-selected` state on dropdown items uses `var(--wb-primary)` which resolves to the same blue regardless of the active whiteboard theme. Other selected/active states in the app respect theme accent colors. Either route through a theme-aware token or define `--wb-primary` per theme. 2. **The dropdown trigger chevron has no left margin** — the `bi-chevron-down` icon sits flush against the trigger label/value text. Add a small gap (e.g. 4-6px margin-left on the chevron, or gap on the parent flex container) so the trigger reads cleanly. Fix both in `selection_toolbar.css`. Sweep the trigger DOM in `selection_toolbar.js` if needed to ensure the chevron is consistently the last child with the right class.

AhmedHanafy725 commented

2026-05-06 12:11:15 +00:00

Author

Member

Spec

Root cause

Bug 1 (selected dropdown items always blue):
--wb-primary is set per-theme by _applyChromePalette in themes.js (~L426) from theme['shape-stroke'] || theme['selection-color']. But for the two default themes:

Dark shape-stroke = #007AFF (blue)
Light shape-stroke = #0062cc (still blue)

So even with theme switching wired correctly, both default themes resolve to blue. The accent should be a dedicated token, not piggybacked on shape-stroke.

Bug 2 (chevron has no breathing room):
The font-size picker chevron (_buildSizePicker stepper) has .wb-pt-size-steppers { margin-left: 4px; } between input and the chevron buttons. The chevron glyph centered inside a 16px button reads as flush against the input value because the input only has 6px right-padding. Net visual gap is too tight.

Files to Modify

crates/hero_whiteboard_ui/static/web/js/whiteboard/themes.js — add an accent field per built-in theme; _applyChromePalette reads it.
crates/hero_whiteboard_ui/static/web/css/selection_toolbar.css — bump the size-picker gap.

Implementation Plan

Step 1 — themes.js: dedicated accent per theme

Add accent to each built-in theme entry in BUILTIN_THEMES:

Dark: #007AFF
Light: #0062cc
Ocean: #64ffda
Warm: #f59e0b
Minimal: #6366f1

In _applyChromePalette (~L426), change:

var primary = theme['shape-stroke'] || theme['selection-color'] || '#007AFF';

to:

var primary = theme['accent'] || theme['shape-stroke'] || theme['selection-color'] || '#007AFF';

No CSS-variable rename needed; --wb-primary continues to drive every existing rule and now genuinely differs per theme. The --wb-primary-text luma computation already in _applyChromePalette keeps text readable on any accent.

Step 2 — selection_toolbar.css: chevron gap

Replace .wb-pt-size-steppers { margin-left: 4px; ... } with gap on the parent flex container so the spacing matches the rest of the toolbar's wb-pt-group { gap: 4px; } pattern:

.wb-pt-size-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wb-pt-size-steppers {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  /* margin-left dropped — gap on parent handles it. */
}

Acceptance Criteria

Cycle through every built-in theme (Dark, Light, Ocean, Warm, Minimal). The font-size preset popover and the font-family popover show the selected item with the theme's accent (blue for dark/light, cyan for Ocean, amber for Warm, indigo for Minimal).
Selected item text remains readable on its accent background (preserved by existing --wb-primary-text luma logic).
Font-size input chevron has visible breathing room (≥6px) from the numeric value.
Hover/focus states on the size input still work (focus border picks up the theme accent).
Switching theme live-updates an open toolbar's selected dropdown item color.

What NOT to break

Theme switch lifecycle: applyTheme() still calls _applyChromePalette() first.
--wb-primary-text luma computation.
Recently-committed leading-divider logic from #163 — not touched.
Recently-committed font-size picker DOM (#159) — only the gap changes.
Recently-committed text/fill/stroke color icons (#158) — different CSS class space.
Other consumers of --wb-primary (tool-btn.active, btn-primary, prop-btn.active, emoji-cell.selected, etc.) — they pick up the new theme accent, which is the intended behavior.

## Spec ### Root cause **Bug 1 (selected dropdown items always blue):** `--wb-primary` is set per-theme by `_applyChromePalette` in `themes.js` (~L426) from `theme['shape-stroke'] || theme['selection-color']`. But for the two default themes: - Dark `shape-stroke = #007AFF` (blue) - Light `shape-stroke = #0062cc` (still blue) So even with theme switching wired correctly, both default themes resolve to blue. The accent should be a dedicated token, not piggybacked on `shape-stroke`. **Bug 2 (chevron has no breathing room):** The font-size picker chevron (`_buildSizePicker` stepper) has `.wb-pt-size-steppers { margin-left: 4px; }` between input and the chevron buttons. The chevron glyph centered inside a 16px button reads as flush against the input value because the input only has 6px right-padding. Net visual gap is too tight. ### Files to Modify - `crates/hero_whiteboard_ui/static/web/js/whiteboard/themes.js` — add an `accent` field per built-in theme; `_applyChromePalette` reads it. - `crates/hero_whiteboard_ui/static/web/css/selection_toolbar.css` — bump the size-picker gap. ### Implementation Plan #### Step 1 — themes.js: dedicated accent per theme Add `accent` to each built-in theme entry in `BUILTIN_THEMES`: - Dark: `#007AFF` - Light: `#0062cc` - Ocean: `#64ffda` - Warm: `#f59e0b` - Minimal: `#6366f1` In `_applyChromePalette` (~L426), change: ```js var primary = theme['shape-stroke'] || theme['selection-color'] || '#007AFF'; ``` to: ```js var primary = theme['accent'] || theme['shape-stroke'] || theme['selection-color'] || '#007AFF'; ``` No CSS-variable rename needed; `--wb-primary` continues to drive every existing rule and now genuinely differs per theme. The `--wb-primary-text` luma computation already in `_applyChromePalette` keeps text readable on any accent. #### Step 2 — selection_toolbar.css: chevron gap Replace `.wb-pt-size-steppers { margin-left: 4px; ... }` with `gap` on the parent flex container so the spacing matches the rest of the toolbar's `wb-pt-group { gap: 4px; }` pattern: ```css .wb-pt-size-picker { display: inline-flex; align-items: center; gap: 6px; } .wb-pt-size-steppers { display: inline-flex; flex-direction: column; line-height: 1; /* margin-left dropped — gap on parent handles it. */ } ``` ### Acceptance Criteria - [ ] Cycle through every built-in theme (Dark, Light, Ocean, Warm, Minimal). The font-size preset popover and the font-family popover show the selected item with the theme's accent (blue for dark/light, cyan for Ocean, amber for Warm, indigo for Minimal). - [ ] Selected item text remains readable on its accent background (preserved by existing `--wb-primary-text` luma logic). - [ ] Font-size input chevron has visible breathing room (≥6px) from the numeric value. - [ ] Hover/focus states on the size input still work (focus border picks up the theme accent). - [ ] Switching theme live-updates an open toolbar's selected dropdown item color. ### What NOT to break - Theme switch lifecycle: `applyTheme()` still calls `_applyChromePalette()` first. - `--wb-primary-text` luma computation. - Recently-committed leading-divider logic from #163 — not touched. - Recently-committed font-size picker DOM (#159) — only the gap changes. - Recently-committed text/fill/stroke color icons (#158) — different CSS class space. - Other consumers of `--wb-primary` (tool-btn.active, btn-primary, prop-btn.active, emoji-cell.selected, etc.) — they pick up the new theme accent, which is the intended behavior.

AhmedHanafy725 commented

2026-05-06 12:18:36 +00:00

Author

Member

Done

Commit 2f7755c on development.

themes.js: each built-in theme now has an accent field, and _applyChromePalette uses it ahead of shape-stroke/selection-color. Dark: #007AFF, Light: #0062cc, Ocean: #64ffda, Warm: #f59e0b, Minimal: #6366f1.
selection_toolbar.css: size-picker now uses gap: 6px on the parent flex; the steppers' margin-left is dropped.
cargo check --workspace: pass

## Done Commit `2f7755c` on `development`. - `themes.js`: each built-in theme now has an `accent` field, and `_applyChromePalette` uses it ahead of `shape-stroke`/`selection-color`. Dark: #007AFF, Light: #0062cc, Ocean: #64ffda, Warm: #f59e0b, Minimal: #6366f1. - `selection_toolbar.css`: size-picker now uses `gap: 6px` on the parent flex; the steppers' `margin-left` is dropped. - `cargo check --workspace`: pass

AhmedHanafy725 self-assigned this

2026-05-06 12:31:29 +00:00

AhmedHanafy725 commented

2026-05-06 12:31:56 +00:00

Author

Member

Follow-up

Commit ad5c8b3. Root cause: _buildSelect was a native <select> — the OS draws its dropdown with the OS accent (always blue), so --wb-primary couldn't reach it. Rewrote _buildSelect to render a button + chevron and open a wb-pt-popover with wb-pt-font-item rows; the theme accent now applies to the selected row. Affects calendar mode, mindmap direction, connector style. Theme switching now visibly recolors the selection in all three.

cargo check --workspace: pass

## Follow-up Commit `ad5c8b3`. Root cause: `_buildSelect` was a native `<select>` — the OS draws its dropdown with the OS accent (always blue), so `--wb-primary` couldn't reach it. Rewrote `_buildSelect` to render a button + chevron and open a `wb-pt-popover` with `wb-pt-font-item` rows; the theme accent now applies to the selected row. Affects calendar mode, mindmap direction, connector style. Theme switching now visibly recolors the selection in all three. - `cargo check --workspace`: pass

AhmedHanafy725 referenced this issue from a commit

2026-05-06 12:46:45 +00:00

fix(ui): per-theme accent for floating toolbar; widen size-picker chevron gap

AhmedHanafy725 referenced this issue from a commit

2026-05-06 12:46:45 +00:00

fix(ui): replace native <select> dropdowns with theme-aware popovers