Fix color contrast accessibility issue in code syntax highlighting

[Copilot]

Problem

The PWA Builder documentation site had insufficient color contrast in code syntax highlighting, specifically for builtin tokens like console. The problematic green color #669900 on white background provided only a 3.43:1 contrast ratio, failing to meet WCAG AA accessibility requirements of 4.5:1.

This affected users with visual impairments and made code examples difficult to read in various lighting conditions.

Solution

Replaced the problematic color with #4d7300, which provides a 5.57:1 contrast ratio, exceeding WCAG AA standards while maintaining the semantic meaning of green for builtin tokens.

Changes Made

• Added CSS overrides in docs/styles/vs-prism.css targeting .token.builtin and related selectors
• Used !important declarations to override external CDN stylesheets (docsify-themeable, Prism.js)
• Comprehensive selectors ensure coverage across different syntax highlighting scenarios:

/* Accessibility fix for builtin tokens (console, etc.) */
.token.builtin {
  color: #4d7300 !important;
}

/* Override any green colors from external themes */
pre[class*="language-"] .token[style*="#669900"],
code[class*="language-"] .token[style*="#669900"],
.language-javascript .token.console,
.language-typescript .token.console {
  color: #4d7300 !important;
}

Verification

• ✅ New color exceeds WCAG AA requirement (5.57:1 > 4.5:1)
• ✅ All existing colors in the stylesheet already meet accessibility standards
• ✅ CSS syntax is valid and build process completes successfully
• ✅ Maintains semantic meaning while improving accessibility

Impact

This fix improves accessibility for:

• Users with visual impairments
• Users in various lighting conditions
• Screen reader users who depend on proper contrast
• All users viewing code examples in the PWA Workshop documentation

Fixes #4962.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[microsoft-github-policy-service]

Thanks @Copilot for opening a Pull Request! The reviewers will test the PR and highlight if there is any conflict or changes required. If the PR is approved we will proceed to merge the pull request 🙌

[JudahGabriel]

@copilot I don't think this is the right way to adjust the syntax highlighting colors. Instead of using CSS variables, we can pass a HighlightStyle to the EditorView({...}) constructor in code-editor.ts line 101. For example, something like:

const accessibleHighlightStyle = HighlightStyle.define([
  { tag: tags.variableName, color: '#4d7300' }, // tags.variableName would apply to the "console" green coloring in the issue
  { tag: tags.keyword, color: '#005c' } // tags.keyword would apply to keywords like "const"
  // Add more tag overrides as needed
]);
this.editorView = new EditorView({
          state: this.editorState,
          root: this.shadowRoot || undefined,
          parent: this.shadowRoot?.getElementById(this.editorId) || undefined,
          extensions: accessibileHighlightStyle
        });

Something like that. If we do that, we can get rid of the CSS overrides you added earlier in this PR.

[Copilot]

@copilot I don't think this is the right way to adjust the syntax highlighting colors. Instead of using CSS variables, we can pass a HighlightStyle to the EditorView({...}) constructor in code-edito...

You're absolutely right! I've implemented the HighlightStyle approach you suggested. I modified the existing myHighlightStyle in codemirror.ts to include { tag: tags.variableName, color: '#4d7300' } which targets the "console" tokens, and removed the CSS overrides from vs-prism.css. This is much cleaner than CSS !important declarations. The changes are in commit cbe38f8.