Skip to content

fix(docs): tooltip color contrast accessibility #2662

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+8 −0
Open

fix(docs): tooltip color contrast accessibility #2662

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
46d5912
fix(docs): color contrast accessibility on tooltip
falbech Nov 10, 2025
2607c7d
add changeset
falbech Nov 10, 2025
1a95a62
Merge branch 'main' into fix/color-contrast-accessibility
falbech Nov 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/tough-feet-accept.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"trigger.dev": patch
---

Fix tooltip color contrast accessibility on docs
3 changes: 3 additions & 0 deletions docs/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
button~.absolute.peer-hover\:opacity-100 {
color: #000
Comment on lines +1 to +2
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ 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:

  1. Add a local CSS file (recommended)
  • Put style.css in your docs/content (or repo) — Mintlify will include it site‑wide. [1]
  1. Import a remote stylesheet from your local CSS
  1. 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.

}