Merge pull request #723 from craftcms/a11y/more-color-contrast-updates

Color updates for code blocks (including dark mode colors)

Author: gcamacho079

docs/.vuepress/theme/components/ToggleSidebarGroup.vue

@@ -85,7 +85,7 @@ export default {
 
   .toggle {
     @apply text-xs tracking-wide uppercase font-bold;
-    color: #a0aec0;
+    color: var(--text-color-muted);
   }
 
   .toggle-arrow {

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

@@ -9,6 +9,7 @@
   --medium-zoom-overlay-color: theme("colors.soft");
   --heading-color: theme("colors.slate");
   --link-color-default: theme("colors.blue.default");
+  --code-link-color: theme("colors.blue.darker");
   --link-underline-color: #5E8BF7;
   --sidebar-link-color: theme("colors.slate");
   --sidebar-active-link-color: theme("colors.blue.default");
@@ -22,6 +23,15 @@
   --custom-block-bg-color: theme("colors.softer");
   --custom-block-border-color: theme("colors.soft");
   --craft-red: #e5422b;
+
+  /* Code */
+  --code-color-default: #476582;
+  --code-color-gold: #8A6700;
+  --code-color-green: #1F7A74;
+  --code-color-blue: #2075B1;
+  --code-color-orange: #C14915;
+  --code-color-olive: #667500;
+  --code-color-gray: #6A707C;
 }
 
 html {

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

@@ -7,7 +7,7 @@
     @apply py-1 px-2 m-0 rounded;
     font-size: 0.8rem;
     background-color: var(--code-bg-color);
-    color: #476582;
+    color: var(--code-color-default);
 
     .token {
       &.deleted {
@@ -17,6 +17,50 @@
       &.inserted {
         color: #27ab83;
       }
+
+      &.comment,
+      &.prolog,
+      &.doctype,
+      &.cdata {
+        color: var(--code-color-gray);
+      }
+
+      &.function,
+      &.class-name {
+        color: var(--code-color-gold);
+      }
+
+      &.selector,
+      &.attr-name,
+      &.string,
+      &.char,
+      &.builtin,
+      &.url,
+      &.inserted {
+        color: var(--code-color-green);
+      }
+
+      &.property,
+      &.tag,
+      &.boolean,
+      &.number,
+      &.constant,
+      &.symbol,
+      &.deleted {
+        color: var(--code-color-blue);
+      }
+
+      &.regex,
+      &.important,
+      &.variable {
+        color: var(--code-color-orange);
+      }
+
+      &.atrule,
+      &.attr-value,
+      &.keyword {
+        color: var(--code-color-olive);
+      }
     }
   }
 

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

@@ -27,6 +27,16 @@
     --link-underline-color: var(--link-color-default);
     --sidebar-link-color: theme("colors.gray.400");
     --sidebar-active-link-color: var(--link-color-default);
+    --code-link-color: theme("colors.blue.lighter");
+
+    /* Code */
+    --code-color-default: #7F9CB8;
+    --code-color-gold: #BD8E00;
+    --code-color-green: #29A39B;
+    --code-color-blue: #3093D9;
+    --code-color-orange: #E96E3A;
+    --code-color-olive: #778A00;
+    --code-color-gray: #7C8F00;
   }
 }
 
@@ -55,6 +65,16 @@
   --link-underline-color: var(--link-color-default);
   --sidebar-link-color: theme("colors.gray.400");
   --sidebar-active-link-color: var(--link-color-default);
+  --code-link-color: theme("colors.blue.lighter");
+
+  /* Code */
+  --code-color-default: #7F9CB8;
+  --code-color-gold: #BD8E00;
+  --code-color-green: #29A39B;
+  --code-color-blue: #3093D9;
+  --code-color-orange: #E96E3A;
+  --code-color-olive: #778A00;
+  --code-color-gray: #7C8F00;
 
   .link-panel {
     background-color: var(--border-color);
@@ -160,7 +180,7 @@
 
   kbd {
     background-color: rgba(0, 0, 0, 0.4);
-    color: #476582;
+    color: var(--code-color-default);
     border: 1px solid rgba(0, 0, 0, 0.3);
     border-bottom: 3px solid #111;
   }
@@ -184,10 +204,6 @@
     }
   }
 
-  .token.comment {
-    @apply opacity-50;
-  }
-
   .token.treeview-part .line-h:before,
   .token.treeview-part .line-v:before {
     border-left: 1px solid var(--border-color);

docs/.vuepress/theme/styles/typography.pcss

@@ -212,7 +212,7 @@
   }
 
   p a code {
-    @apply font-normal text-blue;
+    @apply font-normal;
   }
 
   blockquote {

tailwind.config.js

@@ -20,6 +20,7 @@ module.exports = {
         blue: {
           "lighter": "#86A7F9",
           "default": "#2E68F5",
+          "darker": "#1554F4",
         },
         red: "#da5a47",
         cinder: "#131119",