Focus styles for side panel buttons & form elements

[DphnZwp]

• Focus shadow color
• Improved focus styling for html editor
• Focus styling for side panel buttons

Alle elementen hebben tenminste deze focus css code nodig

self:focus {
    border:1px solid var(--inn-gray-900);
    box-shadow:0 0 0 1px var(--inn-gray-900);
}

Nieuwe focus ontwerpen

Oude ontwerpen

Summary by CodeRabbit

• Style

  • Standardized focus styling across inputs, editors, side-panel buttons, and other controls for more consistent visual feedback.

• Refactor

  • Consolidated per-input focus settings into a centralized focus token system and removed legacy per-control focus declarations to simplify maintenance and ensure uniform behavior.

[coderabbitai]

Walkthrough

Refactors focus-state styling by replacing per-input focus variables (--inn-input-focus-*) with centralized --inn-focus-* tokens in the global stylesheet, updates component CSS to reference the new tokens, and adds focus rules for SidePanel interactive elements.

Changes

Cohort / File(s)	Summary
Global focus tokens ExampleApp/wwwroot/css/app.css	Removes --inn-input-focus-* variables and the --inn-border declaration. Introduces centralized --inn-focus-* variables (e.g., --inn-focus-border-color, --inn-focus-shadow-color, --inn-focus-border, --inn-focus-shadow, --inn-focus-outline, --inn-focus-outline-offset, --inn-focus-border-radius, --inn-focus-border-block-end) and reorders focus-related declarations into the root token blocks.
Form component focus updates Src/Innovative.Blazor.Components/Components/Form/InnovativeForm.razor.css	Replaces references to --inn-input-focus-* with --inn-focus-* variables for focused input-like controls and the HTML editor; removes focus background usage and applies border/box-shadow/outline tokens.
SidePanel focus styling additions Src/Innovative.Blazor.Components/Components/SidePanel/SidePanelComponent.razor.css	Adds focus rules for .sidepanel-icon-button and focused ::deep .rz-button variants using the new --inn-focus-* variables (border, border-color, border-block-end, box-shadow, outline, outline-offset); minor background change for danger button on focus.

Sequence Diagram(s)

sequenceDiagram
    participant AppCSS as app.css (tokens)
    participant Component as Component CSS
    participant Browser as Browser (focus event)

    Browser->>Component: element receives :focus
    Component->>AppCSS: reads --inn-focus-* tokens
    AppCSS-->>Component: provides border/outline/shadow values
    Component-->>Browser: applies focus border / shadow / outline

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Double-check for any remaining --inn-input-focus-* references across the repo.
• Verify the new --inn-focus-* tokens cover all previously used focus properties (border, shadow, outline, offsets).
• Review SidePanel focus additions for visual consistency and accessibility (contrast / outline-offset).

Possibly related PRs

• 157 task css class naam rz veranderen naar innov #159 — Alters the same focus/token surface and appears to be the predecessor to this token consolidation.
• improved icon button size #143 — Modifies .sidepanel-icon-button styles; related to the SidePanel focus rules added here.
• 126 Sidepanel hover achtergrond voor knoppen #129 — Previously changed layout/hover rules for .sidepanel-icon-button; overlaps with the selector updated in this PR.

Suggested reviewers

• vdboots
• MatthijsvanderPlas
• peereflits

Poem

🐇 I hopped through CSS at night,
Swapped my tokens, made them tight.
Borders bright and shadows play,
Buttons wink when you tab their way.
A little rabbit, styled just right.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Focus styles for side panel buttons & form elements' directly and clearly summarizes the main changes: refactoring focus styling tokens and adding focus styles to side panel buttons and form components.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch focus-styles

---

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.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 51627c2 and ad570cb.

📒 Files selected for processing (3)

• ExampleApp/wwwroot/css/app.css (3 hunks)
• Src/Innovative.Blazor.Components/Components/Form/InnovativeForm.razor.css (2 hunks)
• Src/Innovative.Blazor.Components/Components/SidePanel/SidePanelComponent.razor.css (4 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

• ExampleApp/wwwroot/css/app.css
• Src/Innovative.Blazor.Components/Components/Form/InnovativeForm.razor.css

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-08-12T08:54:04.127Z

Learnt from: DphnZwp
Repo: innovative365nl/SharedBlazorCompoments PR: 159
File: ExampleApp/wwwroot/css/app.css:121-135
Timestamp: 2025-08-12T08:54:04.127Z
Learning: In the Innovative Blazor Components design system, there are intentionally two border variants: --innov-border-1-dark for prominent UI components that need attention (inputs, dropdowns, html editor) and --innov-border-1-light for subtle/unobtrusive elements like table dividers.

Applied to files:

• Src/Innovative.Blazor.Components/Components/SidePanel/SidePanelComponent.razor.css

🪛 Biome (2.1.2)

Src/Innovative.Blazor.Components/Components/SidePanel/SidePanelComponent.razor.css

[error] 88-88: Unexpected unknown pseudo-elements: deep

See MDN web docs for more details.
Use a known pseudo-elements instead, such as:

(lint/correctness/noUnknownPseudoElement)

---

[error] 114-114: Unexpected unknown pseudo-elements: deep

See MDN web docs for more details.
Use a known pseudo-elements instead, such as:

(lint/correctness/noUnknownPseudoElement)

---

[error] 140-140: Unexpected unknown pseudo-elements: deep

See MDN web docs for more details.
Use a known pseudo-elements instead, such as:

(lint/correctness/noUnknownPseudoElement)

🔇 Additional comments (2)

Src/Innovative.Blazor.Components/Components/SidePanel/SidePanelComponent.razor.css (2)

88-88: Static analysis warnings are false positives for Blazor context.

Biome reports "Unexpected unknown pseudo-elements: deep" at lines 88, 114, and 140. The ::deep combinator is valid Blazor/Vue.js syntax for piercing component encapsulation scopes. These warnings can be safely ignored or suppressed if a linter configuration is available.

Also applies to: 114-114, 140-140

---

55-62: Focus styling implementation aligns with PR objectives.

The addition of consistent focus styling across .sidepanel-icon-button, primary, secondary, and danger button variants reflects the PR's goal to consolidate focus tokens. The refactoring from per-input focus variables to centralized --inn-focus-* tokens improves maintainability and design system consistency.

Also applies to: 88-95, 114-121, 140-148