increase contrast of code syntax highlights (#94)

Author: rezrah

.changeset/tame-moons-fry.md

@@ -0,0 +1,8 @@
+---
+'@primer/doctocat-nextjs': patch
+---
+
+Increase contrast of all `code span` syntax highlights in code fences on light mode.
+
+Before: 4.31:1 AA (fails WCAG AA)
+After: 5.03:1 AA (passes WCAG AA)

packages/theme/css/global.css

@@ -5,8 +5,8 @@
 html,
 body {
   background-color: var(--brand-color-canvas-default) !important;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji';
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
 }
 
 [data-color-mode='dark'] {
@@ -39,6 +39,11 @@ code span {
   color: var(--shiki-light);
 }
 
+/* Override shiki-light keyword color for better contrast */
+code span[style*='--shiki-light:#D73A49'] {
+  --shiki-light: var(--base-color-scale-red-5) !important;
+}
+
 [data-color-mode='dark'] code span {
   color: var(--shiki-dark);
 }