docs: use higher contrast color tokens for code comments (#19187)

JoshuaKGoldberg · web-flow · commit a76f233a67ab · 2024-12-01T21:58:08.000+01:00
* fix: use higher contrast color tokens for code comments

* Switched to var(--color-comments-color
diff --git a/docs/src/assets/scss/syntax-highlighter.scss b/docs/src/assets/scss/syntax-highlighter.scss
@@ -56,11 +56,7 @@ pre[class*="language-"] {
 .token.prolog,
 .token.doctype,
 .token.cdata {
-    color: #6e7f8e;
-
-    [data-theme="dark"] & {
-        color: #8e9fae;
-    }
+    color: var(--code-comments-color);
 }
 
 .token.namespace {
diff --git a/docs/src/assets/scss/tokens/themes.scss b/docs/src/assets/scss/tokens/themes.scss
@@ -74,6 +74,7 @@
     --color-brand: var(--color-primary-800);
     --body-background-color: #fff;
     --body-text-color: var(--color-neutral-500);
+    --code-comments-color: var(--color-neutral-500);
     --headings-color: var(--color-neutral-900);
 
     --border-color: var(--color-neutral-300);
@@ -115,6 +116,7 @@
     :root {
         --body-background-color: var(--color-neutral-900);
         --body-text-color: var(--color-neutral-300);
+        --code-comments-color: var(--color-neutral-400);
         --headings-color: #fff;
 
         --divider-color: var(--color-neutral-600);
@@ -156,6 +158,7 @@
 html[data-theme="light"] {
     --body-background-color: #fff;
     --body-text-color: var(--color-neutral-500);
+    --code-comments-color: var(--color-neutral-500);
     --headings-color: var(--color-neutral-900);
 
     --border-color: var(--color-neutral-300);
@@ -198,6 +201,7 @@ html[data-theme="dark"] {
 
     --body-background-color: var(--color-neutral-900);
     --body-text-color: var(--color-neutral-300);
+    --code-comments-color: var(--color-neutral-400);
     --headings-color: #fff;
 
     --divider-color: var(--color-neutral-600);
