Grid focus highlight improvements

[lawsie]

Summary

Improve focus highlighting in various places:

• When selecting a material (also fixed a bug where using kb nav in this grid didn't bother to scroll)

• When selecting an object - now just uses standard highlight outline to show focus, plus the mouseover (removed background highlight for focus which was confusing in addition to the mouseover)

• Fixed an odd bug I noticed in the colour picker where the hex code field previously had a double bordered purple highlight(??) It's now consistent with other focus highlights.

Notes

I noticed that when you use the left/right to scroll through meshes on the add shape menu, the column alignment of the grid gets out of line. I'll record this as an issue.

AI usage

Claude Sonnet 4.6 used throughout, with all changes designed and approved by a human.

Summary by CodeRabbit

• Style
  • Improved focus indicators across interactive elements by updating outline styling and colors. All focus indicators now use theme-based variables instead of hardcoded values, providing consistent visual feedback during keyboard navigation for dropdown menus, field grids, and color controls.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 66e0ca97-fcf7-43d4-89ca-4ed8bab72d12

📥 Commits

Reviewing files that changed from the base of the PR and between 342f9f9 and 880dbc4.

📒 Files selected for processing (3)

• style.css
• style/blockly.css
• ui/colourpicker.css

---

📝 Walkthrough

Walkthrough

This PR systematically replaces hardcoded focus colors with theme CSS variables across shape dropdowns, Blockly field grids, and color picker controls. All focus indicators now use --color-outline-focus or --color-focus for consistent, theme-driven styling.

Changes

Focus Styling Theme Variables

Layer / File(s)	Summary
Shape dropdown keyboard focus style.css	Shape dropdown tile focus changes from background/shadow highlight to a theme-driven outline with --color-outline-focus, negative outline-offset, and border-radius: 5px.
Blockly field grid layout and focus style/blockly.css	Grid container receives position: relative for scroll-into-view targeting, and grid item focus now uses --color-outline-focus theme variable for a 3px solid outline.
Color picker component focus styling ui/colourpicker.css	Close button, brightness control, advanced toggle, RGB slider, RGB number input, and CSS color input all switch from hardcoded #511d91 to --color-focus theme variable; transition on CSS color input is narrowed to border-color only.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

Possibly related PRs

• flipcomputing/flock#625: Also modifies Blockly field grid focus styling in style/blockly.css with overlapping selector targeting.

Poem

🐰 A rabbit hops through colors bright,
With theme variables set just right—
No hardcoded hues, just CSS fame,
Outlines and focus all the same!
Consistency blooms, the UI's delight. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Grid focus highlight improvements' is partially related to the changeset. While focus highlighting is a central theme, the PR also addresses keyboard navigation scrolling bugs and color picker styling consistency—not just grid focus. The title focuses on one aspect rather than the full scope.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}