docs: style Ask AI buttons with composio orange

[Sushmithamallesh]

Summary

• Navbar "Ask AI" button: orange text, subtle orange background (5%), soft orange border (20%), darker hover (10%)
• Search dialog "Ask AI" footer: orange text to match

Test plan

• Check navbar "Ask AI" button stands out in both light and dark mode
• Open search dialog (Cmd+K) — verify "You can also Ask AI" text is orange
• Both buttons remain readable and not too loud

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs	Ready	Preview, Comment	Feb 20, 2026 11:19pm

[claude]

Claude finished @Sushmithamallesh's task in 2m 7s —— View job

---

PR Review

• Gathering context
• Reading docs reviewer guidelines
• Analyzing PR changes
• Posting review feedback

---

Looks good. Two small, focused style changes — here's what I checked:

docs/components/ask-ai-button.tsx:81 — Navbar "Ask AI" button

The new classes use --composio-orange with Tailwind opacity modifiers (/5, /10, /20). This works correctly because the project uses Tailwind v4 (^4.1.18), which generates color-mix(in oklab, var(--composio-orange) N%, transparent) — valid with hex CSS variables. The border class is still present alongside border-[var(--composio-orange)]/20, so border-width is preserved. ✓

Orange (#ea580c) on a 5% orange tint background achieves ~5:1 contrast in both light and dark modes, which passes WCAG AA. ✓

docs/components/custom-search-dialog.tsx:88 — Search dialog "Ask AI" footer

Simpler change: text color updated from text-fd-muted-foreground to text-[var(--composio-orange)] with a hover fade to /80. Consistent with the navbar treatment. ✓

One thing to note: The mobile icon button (SearchAndAskAIMobile, line 110–117) still uses the default hover:text-fd-accent-foreground styling — no orange applied. This appears intentional since the mobile version is icon-only and doesn't carry the "Ask AI" text label. If you want visual consistency across breakpoints, you could consider adding orange to the mobile icon, but it's not a blocker.

The --composio-orange variable is already used across 14 files in the docs, so this is on-pattern. No accessibility, mobile layout, or pattern concerns.

Approved.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}

[cursor]

Opacity modifiers on CSS variable arbitrary values ignored

High Severity

In Tailwind CSS v4, the opacity slash modifier (/20, /5, /10, /80) does not work with the [var(--...)] bracket syntax. Classes like bg-[var(--composio-orange)]/5 will either be ignored entirely or apply full-opacity orange — making the button an opaque orange rectangle instead of a subtle 5% tint. The correct v4 syntax for CSS variables with opacity is bg-(--composio-orange)/5 using parentheses without var().

Additional Locations (1)

• docs/components/custom-search-dialog.tsx#L87-L88