fix(ag-grid-angular-theme): transparent checkbox states color (#DS-5308)

[artembelik]

Summary by CodeRabbit

• Style
  • Improved checkbox styling across themes, including clearer unchecked, checked, indeterminate, and disabled states.
  • Enhanced column-menu checkbox appearance with rounded corners, consistent backgrounds, white checked-state icons, and visible disabled-state borders.

[coderabbitai]

Warning

Review limit reached

@artembelik, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 113 minutes

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 501987b6-e923-4e35-8eb2-84c9ba0bc1ac

📥 Commits

Reviewing files that changed from the base of the PR and between 9203bbe and 3012eaa.

📒 Files selected for processing (1)

• packages/ag-grid-angular-theme/src/theme.scss

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 78fb789a-57a2-458b-9c9b-743fcf78f2cd

📥 Commits

Reviewing files that changed from the base of the PR and between 8945976 and 9203bbe.

⛔ Files ignored due to path filters (10)

• dev/ag-grid-angular/src/tests/__screenshots__/column-menu-opened-dark.png is excluded by !**/*.png
• dev/ag-grid-angular/src/tests/__screenshots__/column-menu-opened-light.png is excluded by !**/*.png
• dev/ag-grid-angular/src/tests/__screenshots__/infinite-selection-dark.png is excluded by !**/*.png
• dev/ag-grid-angular/src/tests/__screenshots__/infinite-selection-light.png is excluded by !**/*.png
• dev/ag-grid-angular/src/tests/__screenshots__/row-group-dark.png is excluded by !**/*.png
• dev/ag-grid-angular/src/tests/__screenshots__/row-group-light.png is excluded by !**/*.png
• dev/ag-grid-angular/src/tests/__screenshots__/status-bar-light.png is excluded by !**/*.png
• dev/ag-grid-angular/src/tests/__screenshots__/theme-default-dark.png is excluded by !**/*.png
• dev/ag-grid-angular/src/tests/__screenshots__/theme-default-light.png is excluded by !**/*.png
• dev/ag-grid-angular/src/tests/__screenshots__/theme-pinned-columns-light.png is excluded by !**/*.png

📒 Files selected for processing (1)

• packages/ag-grid-angular-theme/src/theme.scss

---

📝 Walkthrough

Walkthrough

Checkbox styles now separate background and icon-fill colors. Standard and column-menu checkboxes define explicit checked, indeterminate, and disabled states with full opacity and inset borders.

Changes

Checkbox Styling

Layer / File(s)	Summary
Standard checkbox states packages/ag-grid-angular-theme/src/theme.scss	Standard checkboxes use separate background and icon-fill variables. Checked, indeterminate, and disabled states now have explicit colors, full opacity, and disabled inset borders.
Column-menu checkbox states packages/ag-grid-angular-theme/src/theme.scss	Column-menu checkboxes apply background colors, border radius, icon colors, white checked icons, and disabled inset borders.

Estimated code review effort: 2 (Simple) | ~10 minutes

Mergeability Score: ⚪ Minimal · up to 9203b

This localized theme styling change is merge-ready after normal checks and review; no actionable merge-blocking risk remains.

Suggested reviewers: lskramarov, nikgurev

🚥 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 clearly identifies a checkbox-state color fix, which matches the main styling changes.
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.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/DS-5408

---

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

[github-actions]

Visit the preview URL for this PR (updated for commit 0adfbcc):

https://data-grid-next--data-grid-pr-210-yfhbzu0x.web.app

_{(expires Sun, 16 Aug 2026 13:23:11 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: b9d49913f5b5988e9af8690a8b37f16143707448}

[Copilot]

Pull request overview

Updates the @koobiq/ag-grid-angular-theme checkbox styling to avoid transparent/unclear checkbox states by separating checkbox background vs icon fill and improving checked/indeterminate/disabled visuals (including the column menu).

Changes:

• Introduced separate CSS custom properties for checkbox background and icon fill, and applied explicit background-color for checkbox wrappers.
• Updated checked/indeterminate SVG masks to icon-only glyphs and set their backgrounds to the state color with white icons.
• Refined disabled checkbox appearance by applying disabled background/icon colors and adding an inset border.

Suppressed comments (1)

packages/ag-grid-angular-theme/src/theme.scss:1295

• Hard-coded 1px for the disabled column-menu checkbox inset border can get out of sync with the theme’s border width token. Prefer var(--kbq-size-border-width) to keep sizing consistent across the theme.

            cursor: not-allowed;
            box-shadow: inset 0 0 0 1px var(--kbq-states-line-disabled);
        }

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.