From a0bcb9c5f6775bda1e79366db778052ab2c59917 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C4=A9nh=20Ph=C6=B0=E1=BB=9Bc?= <vinhphuoc9919@gmail.com>
Date: Sat, 8 Mar 2025 15:46:05 +0700
Subject: [PATCH] fix: Extract punctuation color to variable

---
 assets/css/color/blue.scss   | 1 +
 assets/css/color/green.scss  | 1 +
 assets/css/color/orange.scss | 1 +
 assets/css/color/paper.scss  | 1 +
 assets/css/color/pink.scss   | 1 +
 assets/css/color/red.scss    | 1 +
 assets/css/syntax.scss       | 2 +-
 7 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/assets/css/color/blue.scss b/assets/css/color/blue.scss
index 57c56e7..7167fe4 100644
--- a/assets/css/color/blue.scss
+++ b/assets/css/color/blue.scss
@@ -9,6 +9,7 @@
     // Use in code syntax highlighting
     --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%);
     --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
+    --syntax-punctuation-color: white;
     --syntax-value-color: color-mix(in srgb, var(--accent), white);
     --syntax-comment-color: rgba(255, 255, 255, 0.3);
     --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%);
diff --git a/assets/css/color/green.scss b/assets/css/color/green.scss
index d7db043..308aab2 100644
--- a/assets/css/color/green.scss
+++ b/assets/css/color/green.scss
@@ -10,6 +10,7 @@
     --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%);
     --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
     --syntax-value-color: color-mix(in srgb, var(--accent), white);
+    --syntax-punctuation-color: white;
     --syntax-comment-color: rgba(255, 255, 255, 0.3);
     --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%);
     --syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4);
diff --git a/assets/css/color/orange.scss b/assets/css/color/orange.scss
index 475f606..c030d87 100644
--- a/assets/css/color/orange.scss
+++ b/assets/css/color/orange.scss
@@ -10,6 +10,7 @@
     --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%);
     --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
     --syntax-value-color: color-mix(in srgb, var(--accent), white);
+    --syntax-punctuation-color: white;
     --syntax-comment-color: rgba(255, 255, 255, 0.3);
     --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%);
     --syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4);
diff --git a/assets/css/color/paper.scss b/assets/css/color/paper.scss
index 243f91e..192e843 100644
--- a/assets/css/color/paper.scss
+++ b/assets/css/color/paper.scss
@@ -10,6 +10,7 @@
     --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #000 30%);
     --syntax-var-color: color-mix(in srgb, var(--accent) 90%, #000);
     --syntax-value-color: color-mix(in srgb, var(--accent), black);
+    --syntax-punctuation-color: black;
     --syntax-comment-color: rgba(0, 0, 0, 0.3);
     --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #000 10%);
     --syntax-line-highlight-background-color: hsla(336, 20%, 50%, 0.4);
diff --git a/assets/css/color/pink.scss b/assets/css/color/pink.scss
index f86a24d..7850feb 100644
--- a/assets/css/color/pink.scss
+++ b/assets/css/color/pink.scss
@@ -10,6 +10,7 @@
     --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%);
     --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
     --syntax-value-color: color-mix(in srgb, var(--accent), white);
+    --syntax-punctuation-color: white;
     --syntax-comment-color: rgba(255, 255, 255, 0.3);
     --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%);
     --syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4);
diff --git a/assets/css/color/red.scss b/assets/css/color/red.scss
index a63db95..a8880d4 100644
--- a/assets/css/color/red.scss
+++ b/assets/css/color/red.scss
@@ -10,6 +10,7 @@
     --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%);
     --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
     --syntax-value-color: color-mix(in srgb, var(--accent), white);
+    --syntax-punctuation-color: white;
     --syntax-comment-color: rgba(255, 255, 255, 0.3);
     --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%);
     --syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4);
diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss
index 8279dbf..7eff1e7 100644
--- a/assets/css/syntax.scss
+++ b/assets/css/syntax.scss
@@ -50,7 +50,7 @@ code.language-html,
 .token.selector,
 .token.tag,
 .token.punctuation {
-    color: white;
+    color: var(--syntax-punctuation-color);
 }
 
 .token.comment,