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);