[Fix Accessibility Bug] improve accessibility of syntax highlighting by adding string token color (#1715)

jpg619 · web-flow · commit 5599acf1ea9d · 2025-09-18T12:07:06.000-04:00
### Fix Accessibility Bug - Improve Syntax Highlighting Colors for Code Blocks - **File Changes** code.js - Added string token color mapping to improve syntax highlighting accessibility - **Summary** This PR enhances code block syntax highlighting accessibility by adding a specific color (#db1068) for string tokens to improve visual contrast and readability. ## BEFORE <img width="600" height="199" alt="image" src="https://github.com/user-attachments/assets/32825831-8230-4e8d-a298-a19cfff7bf4d" /> <img width="180" height="437" alt="image" src="https://github.com/user-attachments/assets/e2ae8ce4-7474-45d9-9cb4-fd62eb39ae98" /> ## AFTER <img width="600" height="188" alt="image" src="https://github.com/user-attachments/assets/def9ec13-8d61-47f3-8d18-a34247d97d88" /> <img width="180" height="437" alt="image" src="https://github.com/user-attachments/assets/4bca70be-d2b6-4a81-bf0e-821e16dd2245" />
diff --git a/src/mdx/code.js b/src/mdx/code.js
@@ -49,6 +49,7 @@ const colorMap = {
   'token function': '#cf3846',
   'token parameter variable': '#277d7b',
   'token assign-left variable': '#277d7b',
+  'token string': '#db1068',
 }
 
 const MonoText = props => <Text sx={{fontFamily: 'mono', fontSize: 1}} {...props} />

Original file line number	Diff line number	Diff line change
`@@ -49,6 +49,7 @@ const colorMap = {`
`49`	`49`	`'token function': '#cf3846',`
`50`	`50`	`'token parameter variable': '#277d7b',`
`51`	`51`	`'token assign-left variable': '#277d7b',`
	`52`	`+ 'token string': '#db1068',`
`52`	`53`	`}`
`53`	`54`
`54`	`55`	`const MonoText = props => <Text sx={{fontFamily: 'mono', fontSize: 1}} {...props} />`