[docs] Improve a11y color contrast

[oliviertassinari]

The color used for --color-docs-infra-syntax-nullish works well in dark mode, but has a problem in light mode. For example, it breaks the 100% a11y score.

Before

https://base-ui.com/react/components/select

After

One way to solve this is going from --color-gray-500 to --color-gray-600. This feels easier to read in light mode:

And, personally, in dark mode too: https://deploy-preview-4812--base-ui.netlify.app/react/components/select#root.

Another option would be to change the color system (but then, it's no longer a quick win).

[pkg-pr-new]

• base-ui-tanstack-start

• vite-css-base-ui-example

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/react@4812
  

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/utils@4812
  

commit: c8fdce9

[code-infra-dashboard]

Bundle size

Bundle	Parsed size	Gzip size
@base-ui/react	0B(0.00%)	0B(0.00%)

Details of bundle changes

Performance

Total duration: 1,773.98 ms 🔺+753.50 ms^(+73.8%) | Renders: 50 ⁽⁺⁰⁾ | Paint: 2,686.41 ms 🔺+1,137.37 ms^(+73.4%)

Test	Duration	Renders
Slider mount (300 instances)	264.97 ms 🔺+128.34 ms(+93.9%)	3 (+0)
Menu mount (300 instances)	210.29 ms 🔺+92.98 ms(+79.3%)	2 (+0)
Select mount (200 instances)	207.83 ms 🔺+91.68 ms(+78.9%)	3 (+0)
Tabs mount (200 instances)	288.36 ms 🔺+91.27 ms(+46.3%)	4 (+0)
Scroll Area mount (300 instances)	134.32 ms 🔺+60.16 ms(+81.1%)	3 (+0)

…and 7 more — details

---

Check out the code infra dashboard for more information about this PR.

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	c8fdce9
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/6a02730ca7e6a60008c30706
😎 Deploy Preview	https://deploy-preview-4812--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.