Merge pull request #766 from craftcms/a11y/code-blocks-again

Tweak colors, fix remaining issues in dark mode, add 3:1 indicator ne…

Author: gcamacho079

docs/.vuepress/theme/global-components/BrowserShot.vue

@@ -113,7 +113,7 @@
   text-align: center;
   margin-top: 1em;
   font-size: 0.9em;
-  color: #637599;
+  color: var(--text-color-muted);
 }
 
 /* Points of Interest */

docs/.vuepress/theme/styles/base.pcss

@@ -19,7 +19,8 @@
   --badge-bg-color-tip: #2F835D;
   --border-color: #e2e8f0;
   --doc-set-color: theme("colors.slate");
-  --code-highlight-color: rgba(252, 233, 106, 0.3);
+  --code-highlight-color: rgba(254, 246, 192, 0.5);
+  --code-highlight-border: #938E25;
   --selection-color: rgba(74, 124, 246, 0.3);
   --code-bg-color: theme("colors.soft");
   --custom-block-bg-color: theme("colors.softer");

docs/.vuepress/theme/styles/code.pcss

@@ -113,6 +113,7 @@ div[class*="language-"] {
 
     .highlighted {
       background-color: var(--code-highlight-color);
+      border-left: 3px solid var(--code-highlight-border);
     }
   }
 
@@ -127,7 +128,7 @@ div[class*="language-"] {
     z-index: 3;
     top: 0.8em;
     right: 1em;
-    color: rgba(0, 0, 0, 0.25);
+    color: var(--text-color-muted);
   }
 
   &:not(.line-numbers-mode) {

docs/.vuepress/theme/styles/color-mode.pcss

@@ -88,8 +88,9 @@
   --code-color-green: #29A39B;
   --code-color-blue: #3093D9;
   --code-color-orange: #E96E3A;
-  --code-color-olive: #778A00;
-  --code-color-gray: #7C8F00;
+  --code-color-olive: #809400;
+  --code-color-gray: #868F9D;
+  --code-highlight-border: #55697D;
 
   .link-panel {
     background-color: var(--border-color);
@@ -231,7 +232,7 @@
 
   div[class*="language-"] {
     &:before {
-      color: rgba(255, 255, 255, 0.2);
+      color: var(--text-color-muted);
     }
   }
 }