fix(a11y): update code highlight colors to meet contrast requirement (#…

…1724)

* fix(codeblock): ensure dark mode color meet contrast requirements

Resolves https://stackoverflow.atlassian.net/browse/A11Y-10, https://stackoverflow.atlassian.net/browse/A11Y-11

* Update HC code block variable color to meet WCAG AAA

Addresses https://stackoverflow.atlassian.net/browse/A11Y-12

* Tweak dark mode orange colors again

* Update less snapshot

* Remove skipped tests ids

lib/components/code-block/code-block.a11y.test.ts

@@ -16,12 +16,6 @@ describe("code block", () => {
  attributes: {
  tabindex: "0",
  },
- // TODO revisit these skipped test ids
- skippedTestids: [
- /s-code-block-language-(html|css|javascript)-dark/,
- /s-code-block-language-html-highcontrast-(light|dark)/,
- "s-code-block-language-javascript-highcontrast-light",
- ],
  });
  });
 });

lib/exports/__snapshots__/color.less.test.ts.snap

@@ -296,10 +296,10 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
  --highlight-comment: hsl(0, 0%, 60%);
  --highlight-deletion: var(--red-500);
  --highlight-keyword: var(--blue-400);
- --highlight-literal: hsl(27, 85%, 61.5%);
- --highlight-namespace: hsl(27, 85%, 61.5%);
+ --highlight-literal: hsl(27, 95%, 65%);
+ --highlight-namespace: hsl(27, 95%, 65%);
  --highlight-punctuation: hsl(0, 0%, 80%);
- --highlight-symbol: hsl(306, 43%, 69%);
+ --highlight-symbol: hsl(306, 50%, 75%);
  --highlight-variable: hsl(65.5, 39%, 57.5%);
  --scrollbar: hsla(0, 0%, 100%, 0.2);
  --theme-primary: var(--theme-dark-primary-custom, var(--orange-400));
@@ -429,10 +429,10 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
  --highlight-comment: hsl(0, 0%, 60%);
  --highlight-deletion: var(--red-500);
  --highlight-keyword: var(--blue-400);
- --highlight-literal: hsl(27, 85%, 61.5%);
- --highlight-namespace: hsl(27, 85%, 61.5%);
+ --highlight-literal: hsl(27, 95%, 65%);
+ --highlight-namespace: hsl(27, 95%, 65%);
  --highlight-punctuation: hsl(0, 0%, 80%);
- --highlight-symbol: hsl(306, 43%, 69%);
+ --highlight-symbol: hsl(306, 50%, 75%);
  --highlight-variable: hsl(65.5, 39%, 57.5%);
  --scrollbar: hsla(0, 0%, 100%, 0.2);
  --theme-primary: var(--theme-dark-primary-custom, var(--orange-400));
@@ -566,7 +566,7 @@ body.theme-highcontrast.theme-system .theme-light__forced {
  --highlight-namespace: hsl(16, 94%, 31%);
  --highlight-punctuation: var(--black-500);
  --highlight-symbol: hsl(309, 45%, 31%);
- --highlight-variable: hsl(88, 100%, 19%);
+ --highlight-variable: hsl(88, 100%, 18%);
  --scrollbar: var(--black);
  --theme-primary: var(--orange-400);
  --theme-primary-100: var(--orange-100);

lib/exports/color-sets.less

@@ -506,10 +506,10 @@
  comment: hsl(0, 0%, 60%);
  deletion: var(--red-500);
  keyword:var(--blue-400);
- literal: hsl(27, 85%, 61.5%);
- namespace: hsl(27, 85%, 61.5%);
+ literal: hsl(27, 95%, 65%);
+ namespace: hsl(27, 95%, 65%);
  punctuation: hsl(0, 0%, 80%);
- symbol: hsl(306, 43%, 69%);
+ symbol: hsl(306, 50%, 75%);
  variable: hsl(65.5, 39%, 57.5%);
 }
 .set-highlight-hc() {
@@ -524,7 +524,7 @@
  namespace: hsl(16, 94%, 31%);
  punctuation: var(--black-500);
  symbol: hsl(309, 45%, 31%);
- variable: hsl(88, 100%, 19%);
+ variable: hsl(88, 100%, 18%);
 }
 .set-highlight-hc-dark() {
  addition: var(--green-500);