From 3037127e5c002eb7d6dd43580608a6ec895d235f Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Mon, 9 Sep 2024 22:26:40 +0800
Subject: [PATCH] Update Eric Bailey's a11y syntax highlighting stylesheet

---
 .../css/a11y-syntax-highlighting-dark.css     | 376 ++++++++++--------
 src/assets/css/general.css                    |   7 +-
 2 files changed, 207 insertions(+), 176 deletions(-)

diff --git a/src/assets/css/a11y-syntax-highlighting-dark.css b/src/assets/css/a11y-syntax-highlighting-dark.css
index 93014372..b565c0d5 100644
--- a/src/assets/css/a11y-syntax-highlighting-dark.css
+++ b/src/assets/css/a11y-syntax-highlighting-dark.css
@@ -1,188 +1,218 @@
-/**
- * a11y-dark theme for JavaScript, CSS, and HTML
+/*
+ * a11y theme for JavaScript, CSS, and HTML
  * Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
  * @author ericwbailey
  */
 
 /*
- Theme
+ * MARK: Setup
  */
-code[class*="language-"],
-pre[class*="language-"] {
-  color: #f8f8f2;
-  background: none;
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
-  line-height: 1.5;
-
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-
-/* Code blocks */
-pre[class*="language-"] {
-  padding: 1em;
-  margin: 0.5em 0;
-  overflow: auto;
-  border-radius: 0.3em;
-}
-
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
-  background: #2b2b2b;
-}
-
-/* Inline code */
-:not(pre) > code[class*="language-"] {
-  padding: 0.1em;
-  border-radius: 0.3em;
-  white-space: normal;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: #d4d0ab;
-}
-
-.token.punctuation {
-  color: #fefefe;
-}
-
-.token.property,
-.token.tag,
-.token.constant,
-.token.symbol,
-.token.deleted {
-  color: #ffa07a;
-}
-
-.token.boolean,
-.token.number {
-  color: #00e0e0;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-  color: #abe338;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string,
-.token.variable {
-  color: #00e0e0;
-}
-
-.token.atrule,
-.token.attr-value,
-.token.function {
-  color: #ffd700;
-}
-
-.token.keyword {
-  color: #00e0e0;
-}
-
-.token.regex,
-.token.important {
-  color: #ffd700;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}
-
-
-/*
- Plugin support
- */
-
-/* Line highlight */
-.line-highlight {
-  background: rgba(255, 217, 0, 0.10);
-  border-top: 1px solid rgba(255, 217, 0, 0.55);
-  border-bottom: 1px solid rgba(255, 217, 0, 0.55);
-}
-
-/* Line numbers */
-.line-numbers .line-numbers-rows {
-  border-right: 1px solid #F8F8F2;
-}
-
-.line-numbers-rows > span:before {
-  color: #D4D0AB;
-}
-
-
-/*
- High contrast mode support
-*/
-@media screen and (-ms-high-contrast: active) {
-  code[class*="language-"],
-  pre[class*="language-"] {
-    color: windowText;
-    background: window;
+ @layer vendor-prism {
+  @media (forced-colors: none), (forced-colors: active) {
+    :root {
+      --prism-a11y-border-radius: 0.3em;
+      --prism-a11y-font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+      --prism-a11y-line-height: 1.5;
+      --prism-a11y-code-block-margin: 0.5em 0;
+      --prism-a11y-code-block-padding: 1em;
+      --prism-a11y-code-inline-padding: 0.1em;
+      --prism-a11y-width-border: 1px;
+      --prism-a11y-width-tab: 2;
+    }
   }
 
-  :not(pre) > code[class*="language-"],
-  pre[class*="language-"] {
-    background: window;
+  @media (forced-colors: none), (forced-colors: active) {
+    :root {
+      --prism-a11y-color-background: hsla(0, 0%, 17%, 1);
+      --prism-a11y-color-text-no-token: hsla(60, 30%, 96%, 1);
+      --prism-a11y-color-text-comment: hsla(54, 32%, 75%, 1);
+      --prism-a11y-color-text-blue: hsla(180, 100%, 44%, 1);
+      --prism-a11y-color-text-green: hsla(80, 75%, 55%, 1);
+      --prism-a11y-color-text-gray: hsla(60, 30%, 96%, 1);
+      --prism-a11y-color-text-purple: hsla(291, 30%, 83%, 1);
+      --prism-a11y-color-text-red: hsla(17, 100%, 74%, 1);
+      --prism-a11y-color-text-yellow: hsla(51, 100%, 50%, 1);
+      --prism-a11y-plugin-color-border: hsla(51, 100%, 50%, 0.55);
+      --prism-a11y-plugin-color-background: hsla(51, 100%, 50%, 0.1);
+    }
   }
 
-  .token.important {
-    background: highlight;
-    color: window;
-    font-weight: normal;
+
+  @media (forced-colors: none), (forced-colors: active) {
+    /*
+     * MARK: Theme
+     */
+    :where(
+      code[class*="language-"],
+      pre[class*="language-"]
+    ) {
+      color: var(--prism-a11y-color-text-no-token);
+      background: var(--prism-a11y-color-background);
+      font-family: var(--prism-a11y-font-family);
+      text-align: start;
+      white-space: pre;
+      word-spacing: normal;
+      word-break: normal;
+      word-wrap: normal;
+      line-height: var(--prism-a11y-line-height);
+
+      -moz-tab-size: var(--prism-a11y-width-tab);
+      -o-tab-size: var(--prism-a11y-width-tab);
+      tab-size: var(--prism-a11y-width-tab);
+
+      -webkit-hyphens: none;
+      -moz-hyphens: none;
+      -ms-hyphens: none;
+      hyphens: none;
+    }
+
+    /* Code blocks */
+    pre[class*="language-"] {
+      padding: var(--prism-a11y-code-block-padding);
+      margin: var(--prism-a11y-code-block-margin);
+      overflow: auto;
+      border-radius: var(--prism-a11y-border-radius);
+    }
+
+    :where(
+      :not(pre) > code[class*="language-"],
+      pre[class*="language-"]
+    ) {
+      background: var(--prism-a11y-color-background);
+    }
+
+    /* Inline code */
+    :not(pre) > code[class*="language-"] {
+      padding: var(--prism-a11y-code-inline-padding);
+      border-radius: var(--prism-a11y-border-radius);
+      white-space: normal;
+    }
+
+    :where(
+      .token.comment,
+      .token.prolog,
+      .token.doctype,
+      .token.cdata
+    ) {
+      color: var(--prism-a11y-color-text-comment);
+    }
+
+    .token.punctuation {
+      color: var(--prism-a11y-color-text-gray);
+    }
+
+    :where(
+      .token.property,
+      .token.tag,
+      .token.constant,
+      .token.symbol,
+      .token.deleted
+    ) {
+      color: var(--prism-a11y-color-text-red);
+    }
+
+    :where(
+      .token.operator,
+      .token.entity,
+      .token.url,
+      .language-css .token.string,
+      .style .token.string,
+      .token.variable,
+      .token.keyword
+    ) {
+      color: var(--prism-a11y-color-text-blue);
+    }
+
+    :where(
+      .token.selector,
+      .token.attr-name,
+      .token.string,
+      .token.char,
+      .token.builtin,
+      .token.inserted
+    ) {
+      color: var(--prism-a11y-color-text-green);
+    }
+
+    :where(
+      .token.atrule,
+      .token.attr-value,
+      .token.function,
+      .token.regex,
+      .token.important
+    ) {
+      color: var(--prism-a11y-color-text-yellow);
+    }
+
+    :where(
+      .token.boolean,
+      .token.number,
+      .token.keyword
+    ) {
+      color: var(--prism-a11y-color-text-purple);
+    }
+
+    :where(
+      .token.important,
+      .token.bold
+    ) {
+      font-weight: bold;
+    }
+
+    .token.italic {
+      font-style: italic;
+    }
+
+    .token.entity {
+      cursor: help;
+    }
+
+
+    /*
+     * MARK: Plugin support
+     */
+    /* Line highlight */
+    .line-highlight {
+      background: var(--prism-a11y-plugin-color-background);
+      border-top: var(--prism-a11y-width-border) solid var(--prism-a11y-plugin-color-border);
+      border-bottom: var(--prism-a11y-width-border) solid var(--prism-a11y-plugin-color-border);
+    }
+
+    /* Line numbers */
+    .line-numbers .line-numbers-rows {
+      border-right: var(--prism-a11y-width-border) solid var(--prism-a11y-color-text-no-token);
+    }
+
+    .line-numbers-rows > span:before {
+      color: var(--prism-a11y-color-text-comment);
+    }
   }
 
-  .token.atrule,
-  .token.attr-value,
-  .token.function,
-  .token.keyword,
-  .token.operator,
-  .token.selector {
-    font-weight: bold;
-  }
 
-  .token.attr-value,
-  .token.comment,
-  .token.doctype,
-  .token.function,
-  .token.keyword,
-  .token.operator,
-  .token.property,
-  .token.string {
-    color: highlight;
-  }
+  /*
+   * MARK: Forced color mode support
+   */
+  @media (forced-colors: active) {
+    :root {
+      --prism-a11y-color-background: Canvas;
+      --prism-a11y-color-text-no-token: CanvasText;
+      --prism-a11y-color-text-comment: GrayText;
+      --prism-a11y-color-text-blue: LinkText;
+      --prism-a11y-color-text-gray: LinkText;
+      --prism-a11y-color-text-green: CanvasText;
+      --prism-a11y-color-text-purple: CanvasText;
+      --prism-a11y-color-text-red: CanvasText;
+      --prism-a11y-color-text-yellow: GrayText;
+      --prism-a11y-plugin-color-border: LinkText;
+      --prism-a11y-plugin-color-background: Canvas;
+    }
 
-  .token.attr-value,
-  .token.url {
-    font-weight: normal;
+    :where(
+      .token.boolean,
+      .token.number,
+      .token.keyword
+    ) {
+      font-weight: bold;
+    }
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/css/general.css b/src/assets/css/general.css
index 69a50444..66784819 100644
--- a/src/assets/css/general.css
+++ b/src/assets/css/general.css
@@ -96,9 +96,10 @@ code {
     word-break: break-word;
 }
 
-:not(pre) > code { padding: 0.125em 0.25em; }
-:not(pre) > code,
-pre { background-color: var(--clr-code-bg); }
+:not(pre) > code {
+    padding: 0.125em 0.25em;
+    background-color: var(--clr-code-bg);
+}
 
 pre {
     border: 0.1em solid var(--clr-code-border);