Update docs sidebar text color

[carlosabadia]

No description provided.

[codspeed-hq]

Merging this PR will not alter performance

✅ 9 untouched benchmarks

---

_{Comparing carlos/update-sidebar-docs-color (0b23bb0) with main (e3766be)}

[greptile-apps]

Greptile Summary

This PR updates the text color styling for sidebar items in the docs app (sidebar.py). The changes affect how active and inactive sidebar leaf nodes and section headers are colored in both light and dark mode, using Tailwind utility classes and the c_color helper from reflex_ui_shared.

Confidence Score: 5/5

Safe to merge — changes are cosmetic styling only with no functional impact.

All findings are P2 style/clarification items. The dark-mode hover color direction is worth confirming but does not break functionality. The !hover:bg-transparent syntax quirk does not affect visual output in practice since the background is already transparent.

docs/app/reflex_docs/templates/docpage/sidebar/sidebar.py — line 208 accordion trigger class_name.

Vulnerabilities

No security concerns identified.

Important Files Changed

Filename	Overview
docs/app/reflex_docs/templates/docpage/sidebar/sidebar.py	Sidebar text color updates across leaf nodes and section header triggers; potential dark-mode hover color regression in the accordion trigger class.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[sidebar_item_comp] --> B{item.children?}
    B -- No --> C[sidebar_leaf]
    B -- Yes --> D[accordion.item with trigger]
    C --> E{item.outer?}
    E -- Yes --> F[c_color violet/slate based on active]
    E -- No --> G{item.link == url?}
    G -- Active --> H[text-primary-10 + bg-m-slate-2]
    G -- Inactive --> I[text-secondary-11 hover:text-secondary-12]
    D --> J["trigger class_name\nlight: text-m-slate-7 → hover:m-slate-11\ndark: text-m-slate-6 → hover:m-slate-5"]

Loading

Comments Outside Diff (2)

1. docs/app/reflex_docs/templates/docpage/sidebar/sidebar.py, line 208 (link)

   Dark mode hover color direction may be inverted

   In light mode, hovering increases contrast: !text-m-slate-7 → hover:!text-m-slate-11 (7→11). In dark mode, the direction is reversed: dark:!text-m-slate-6 → dark:hover:!text-m-slate-5 (6→5). If m-slate follows the Radix convention (higher numbers = higher contrast regardless of mode), hovering in dark mode would make the text less visible rather than more. Was this intentional, or should the hover scale go higher to produce a lighter/more-prominent label on the dark background? Does m-slate follow the Radix scale direction (higher = more contrast) in both light and dark mode? If so, should dark:hover:!text-m-slate-5 actually be a higher number to increase text prominence on hover in dark mode?

2. docs/app/reflex_docs/templates/docpage/sidebar/sidebar.py, line 208 (link)

   !hover:bg-transparent — incorrect Tailwind modifier order

   The ! important prefix must follow the variant prefix, not precede it. !hover:bg-transparent is not valid Tailwind CSS syntax; the correct form is hover:!bg-transparent.

_{Reviews (1): Last reviewed commit: "Update docs sidebar text color" | Re-trigger Greptile}