fix: DC-3820 Update code highlight on search bar - #7128
Conversation
WalkthroughMigrated primary and hover color tokens from Indigo to Teal across light and dark themes, added sidebar selection tokens, updated navbar/menu and sidebar active/hover rules to use the new tokens, and removed a dark-theme Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests
Comment |
Dangerous URL checkNo absolute URLs to prisma.io/docs found. |
Redirect checkThis PR probably requires the following redirects to be added to static/_redirects:
|
Deploying docs with
|
| Latest commit: |
d69bda8
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://fdb4a8c5.docs-51g.pages.dev |
| Branch Preview URL: | https://fix-dc-3820-search-color.docs-51g.pages.dev |
There was a problem hiding this comment.
Actionable comments posted: 4
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/css/theming.css(4 hunks)
🧰 Additional context used
🪛 Biome (2.1.2)
src/css/theming.css
[error] 39-39: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--ifm-color-primary is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 358-358: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--ifm-color-primary is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Check internal links
- GitHub Check: runner / linkspector
- GitHub Check: Cloudflare Pages
- GitHub Check: Lost Pixel
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/css/theming.css (2)
355-357: Repeat the hover alignment in the light-in-dark-OS block.Same teal/indigo mix here. Align hover with teal to keep the primary family consistent.
- --ifm-color-primary-hover: var(--indigo-400); + --ifm-color-primary-hover: var(--teal-400);If the goal is only “search bar code highlight,” consider scoping to the search highlight selectors/variables instead of redefining global primary here. I can provide a scoped patch if helpful.
38-40: Align primary-hover to teal & consolidate duplicate declarations.
- Multiple occurrences of --ifm-color-primary-hover are set to var(--indigo-400) in src/css/theming.css — update to var(--teal-400) to match --ifm-color-primary (#25c2a0). Occurrences found: src/css/theming.css:39, 134, 356, 439.
- Consolidate/remove duplicate declarations (keep one per theme root / per light‑dark block) to avoid brittle overrides.
Apply:
- --ifm-color-primary-hover: var(--indigo-400); + --ifm-color-primary-hover: var(--teal-400);Quick check: src/theme/SearchBar/styles.css sets --docsearch-primary-color: var(--ifm-color-primary) — verify if search highlight should follow this change.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/css/theming.css(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: runner / linkspector
- GitHub Check: Check internal links
- GitHub Check: Lost Pixel
- GitHub Check: Cloudflare Pages
🔇 Additional comments (1)
src/css/theming.css (1)
617-617: Confirm removal and brace balance.This closing brace changed because a trailing block was removed. Please confirm the deletion was intentional and that no dark-theme styles (e.g., external-link) were inadvertently dropped. Run your CSS linter to ensure no unmatched blocks remain.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/theme/DocSidebarItem/Link/styles.module.css (1)
21-23: Use shared tokens instead of raw teal values for active:hover.Prefer
var(--selected-hover)to centralize theming and automatically pick light/dark variants defined in theming.css.Proposed change:
-[data-theme="light"] .active:hover { - color: var(--teal-800) !important; -} +[data-theme="light"] .active:hover { + color: var(--selected-hover) !important; +} -[data-theme="dark"] .active:hover { - color: var(--teal-200); -} +[data-theme="dark"] .active:hover { + color: var(--selected-hover); +}Also applies to: 24-26
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/css/custom.css(2 hunks)src/css/theming.css(14 hunks)src/theme/DocSidebarItem/Link/styles.module.css(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Check internal links
- GitHub Check: runner / linkspector
- GitHub Check: Lost Pixel
🔇 Additional comments (10)
src/css/theming.css (6)
37-39: Global primary switched to teal — confirm scope vs. PR objective.This globally changes Infima primary and hover tokens. If the goal is only “search bar code highlight,” consider scoping to search-related tokens/selectors instead to avoid unintended site-wide shifts; otherwise confirm that a brand-wide palette change is intended.
192-196: Side‑navbar tokens (light) look good.Clear, semantically named tokens; aligns with usages in custom.css.
217-217: Dark theme primary/overlay aligned to teal — LGTM.Consistent with the root palette shift.
Also applies to: 232-232
323-326: Side‑navbar tokens (dark) — LGTM.Balanced mapping (selected=teal‑400, hovers=teal‑200) for dark UI.
506-509: Side‑navbar tokens (light within @media) — LGTM.Matches light theme values set at top-level root.
517-517: Dark theme (@media) tokens — LGTM.Primary/overlay and side‑navbar tokens are consistent with earlier dark block.
Also applies to: 531-531, 625-628
src/css/custom.css (4)
104-106: Hover color now uses token and drops !important — verify specificity.Good move toward tokens; please sanity‑check that sidebar/nav hover still wins over default Infima styles in mobile/sidebar states without !important.
513-516: Active state now uses --selected — LGTM.Matches new tokens; improves consistency.
519-521: Active:hover uses --selected-hover — LGTM.Consistent with tokenization; readability improved.
527-529: Navbar item hover uses --normal-hover — LGTM.Token-based and consistent with sidebar hover behavior.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/css/theming.css (2)
37-39: Align Infima primary “family” vars with the new teal primary (light theme).You switched --ifm-color-primary to teal but left the related -dark/-light variants as the old green in the same :root. This can produce mixed hues in components that use those siblings. Recommend updating them to teal, mirroring what you already did for the dark theme.
Apply in :root:
- --ifm-color-primary-dark: #29784c; - --ifm-color-primary-darker: #277148; - --ifm-color-primary-darkest: #205d3b; - --ifm-color-primary-light: #33925d; - --ifm-color-primary-lighter: #359962; - --ifm-color-primary-lightest: #3cad6e; + --ifm-color-primary-dark: var(--teal-700); + --ifm-color-primary-darker: var(--teal-800); + --ifm-color-primary-darkest: var(--teal-900); + --ifm-color-primary-light: var(--teal-500); + --ifm-color-primary-lighter: var(--teal-400); + --ifm-color-primary-lightest: var(--teal-300);
215-216: Teal primary/hover overlay consistency looks good across themes; consider deduping within selectors.Values are consistent across :root, html[data-theme="dark"], and media-gated blocks. Minor: the html[data-theme="dark"] block contains other duplicate custom properties (e.g., --navbar-teal-color, --homepage-hero-gradient, --ifm-color-content) later in the same selector, which can trip lint and complicate cascade. Suggest consolidating duplicates within that selector in a follow-up.
Also applies to: 230-230, 362-362, 426-426, 445-445, 513-513, 527-527
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/css/theming.css(12 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: runner / linkspector
- GitHub Check: Check internal links
- GitHub Check: Lost Pixel
🔇 Additional comments (2)
src/css/theming.css (2)
190-194: Side‑navbar tokens LGTM.Tokenization for selected/hover across light/dark is clear and consistent. Please confirm dependent styles (e.g., navbar/menu/sidebar link active/hover) now consume these tokens exclusively so there’s no leftover indigo reference.
Also applies to: 321-324, 502-505, 621-624
633-633: No action needed.Trailing brace change only.
Fixes #DC-3820
Summary by CodeRabbit