fix(docs): tooltip color contrast accessibility #2662

coderabbitai · 2025-11-10T02:16:30Z

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Verify the CSS file is properly imported in the docs app.

The new docs/style.css file contains the tooltip styling, but it must be imported or linked in the docs application for the rule to take effect. Confirm that this file is referenced in the docs build configuration or main HTML/template file.

🏁 Script executed:

#!/bin/bash # Search for references to docs/style.css or global style imports in docs configuration files rg -i "style\.css|@import|<link.*stylesheet" docs/ -g '*.html' -g '*.jsx' -g '*.tsx' -g '*.js' -g '*.ts' -C 2

Length of output: 0

🏁 Script executed:

#!/bin/bash # Check if docs/style.css exists and list docs directory structure echo "=== Checking docs/style.css existence ===" ls -la docs/style.css 2>&1 || echo "File not found" echo -e "\n=== Docs directory structure ===" find docs -type f -name "*.css" -o -name "*.html" -o -name "*.jsx" -o -name "*.tsx" | head -20 echo -e "\n=== Build/config files in docs ===" find docs -maxdepth 2 -type f \( -name "*.config.*" -o -name "vite*" -o -name "webpack*" -o -name "next*" -o -name "tsconfig*" -o -name "package.json" \) echo -e "\n=== Root level build config ===" ls -la *.config.* package.json 2>&1 | head -10

Length of output: 519

🏁 Script executed:

#!/bin/bash # Check docs/package.json and search for CSS imports in JS/TS echo "=== docs/package.json ===" cat docs/package.json echo -e "\n=== Search for style.css import/require in JS/TS files ===" rg "style\.css" docs/ -g '*.js' -g '*.ts' -g '*.jsx' -g '*.tsx' -g '*.mdx' -C 2 echo -e "\n=== Look for main entry files (index, app, layout, _document) ===" find docs -maxdepth 2 -type f \( -name "index.*" -o -name "app.*" -o -name "layout.*" -o -name "_document.*" -o -name "main.*" \) echo -e "\n=== Check root package.json for docs build ===" cat package.json | grep -A 5 "docs\|scripts" | head -30

Length of output: 655

🏁 Script executed:

#!/bin/bash # Search for Mintlify config and understand docs structure echo "=== Look for Mintlify config files ===" find docs -maxdepth 2 -type f \( -name "mint.json" -o -name ".mintlify*" -o -name "mintlify*" \) echo -e "\n=== Check docs directory structure ===" ls -la docs/ echo -e "\n=== Look for public/static/assets directories ===" find docs -maxdepth 2 -type d \( -name "public" -o -name "static" -o -name "assets" -o -name "css" \) echo -e "\n=== Search for any reference to CSS in docs files ===" rg -i "css|style" docs/ -g '*.json' -g '*.md' -g '*.mdx' | head -20

Length of output: 9796

🌐 Web query:

Mintlify custom CSS how to include external stylesheet

💡 Result:

Short answer — Mintlify doesn't provide a dedicated UI to paste an external tag; instead either add CSS files to your docs repo (they're auto-applied) or load an external stylesheet from inside your repo CSS/JS.

Options:

Add a local CSS file (recommended)

Put style.css in your docs/content (or repo) — Mintlify will include it site‑wide. [1]

Import a remote stylesheet from your local CSS

In your style.css add:
@import url("https://example.com/your.css");

Mintlify will load the local file which then imports the external stylesheet. [1][2]

Inject a via custom JS (if you need dynamic loading)

Create a .js file in the content directory and include code to append a link element to head:
const l = document.createElement('link');
l.rel = 'stylesheet';
l.href = 'https://example.com/your.css';
document.head.appendChild(l);

Mintlify includes any .js in the content directory globally. [1]

References:

Mintlify Custom scripts (Custom CSS / Custom JS). [1]

Mintlify blog: Global CSS feature announcement. [2]

🏁 Script executed:

#!/bin/bash # Check Mintlify config to understand expected CSS location echo "=== docs.json (Mintlify config) ===" cat docs/docs.json | head -50 echo -e "\n=== Search for 'content' or 'css' references in docs.json ===" cat docs/docs.json | grep -i "content\|css\|style" | head -20

Length of output: 1875

The CSS file is not integrated with the Mintlify build system and won't take effect.

According to Mintlify documentation, CSS files should be placed in docs/content or auto-included from the repo. The docs/style.css file is at the docs root level and is not:

Imported in any JavaScript or MDX files

Configured in docs.json

Located in a docs/content directory where Mintlify expects CSS files

Move the CSS file to the correct location (docs/content/ directory) or add explicit configuration to docs.json to ensure the tooltip styling is actually applied by Mintlify.

🤖 Prompt for AI Agents

In docs/style.css around lines 1 to 2: the stylesheet is placed at the repo root and is not being included by Mintlify, so its tooltip/button styling will not take effect; either move this CSS file into docs/content/ (so Mintlify auto-includes it) or update docs.json to explicitly reference docs/style.css (or its new path) so Mintlify loads it; ensure any imports in MDX/JS files point to the new path if you move the file.

-Original file line number
+Diff line change
@@ -0,0 +1,3 @@
+    button~.absolute.peer-hover\:opacity-100 {
+        color: #000
+    }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(docs): tooltip color contrast accessibility #2662

Uh oh!

Diff view

Diff view

There are no files selected for viewing

coderabbitai Bot Nov 10, 2025

Uh oh!

Uh oh!

Uh oh!

fix(docs): tooltip color contrast accessibility #2662

Uh oh!

fix(docs): tooltip color contrast accessibility #2662

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

coderabbitai Bot Nov 10, 2025

Choose a reason for hiding this comment

Uh oh!