From 29c71fe8f17edfcc37e66a37a2fa723221f63c10 Mon Sep 17 00:00:00 2001
From: Wolfsblvt <wolfsblvt@gmail.com>
Date: Fri, 21 Feb 2025 17:30:56 +0100
Subject: [PATCH 1/2] Update reasoning block coloring to CSS vars

---
 public/style.css | 43 ++++++++++++++++++++++---------------------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/public/style.css b/public/style.css
index 6278d9960..3b07f593d 100644
--- a/public/style.css
+++ b/public/style.css
@@ -55,6 +55,9 @@
     --interactable-outline-color: var(--white100);
     --interactable-outline-color-faint: var(--white20a);
 
+    --reasoning-mix-rate: 50%;
+    --reasoning-mix-color: var(--grey30);
+
 
     /*Default Theme, will be changed by ToolCool Color Picker*/
     --SmartThemeBodyColor: rgb(220, 220, 210);
@@ -354,7 +357,7 @@ input[type='checkbox']:focus-visible {
     padding-left: 14px;
     margin-bottom: 0.5em;
     overflow-y: auto;
-    color: var(--SmartThemeEmColor);
+    color: color-mix(in srgb, var(--SmartThemeBodyColor) var(--reasoning-mix-rate), var(--reasoning-mix-color));
 }
 
 .mes_reasoning_details {
@@ -374,18 +377,6 @@ input[type='checkbox']:focus-visible {
     margin-bottom: 0;
 }
 
-.mes_reasoning em,
-.mes_reasoning i,
-.mes_reasoning u,
-.mes_reasoning q,
-.mes_reasoning blockquote {
-    filter: saturate(0.5);
-}
-
-.mes_reasoning_details .mes_reasoning em {
-    color: color-mix(in srgb, var(--SmartThemeEmColor) 67%, var(--SmartThemeBlurTintColor) 33%);
-}
-
 .mes_reasoning_header_block {
     flex-grow: 1;
 }
@@ -461,26 +452,36 @@ input[type='checkbox']:focus-visible {
 }
 
 .mes_text i,
-.mes_text em,
+.mes_text em {
+    color: var(--SmartThemeEmColor);
+}
 .mes_reasoning i,
 .mes_reasoning em {
-    color: var(--SmartThemeEmColor);
+    color: color-mix(in srgb, var(--SmartThemeEmColor) var(--reasoning-mix-rate), var(--reasoning-mix-color));
 }
 
 .mes_text q i,
 .mes_text q em {
     color: inherit;
 }
-
-.mes_text u,
-.mes_reasoning u {
-    color: var(--SmartThemeUnderlineColor);
+.mes_reasoning q i,
+.mes_reasoning q em {
+    color: color-mix(in srgb, var(--SmartThemeQuoteColor) var(--reasoning-mix-rate), var(--reasoning-mix-color));
 }
 
-.mes_text q,
-.mes_reasoning q {
+.mes_text u {
+    color: var(--SmartThemeUnderlineColor);
+}
+.mes_reasoning u {
+    color: color-mix(in srgb, var(--SmartThemeUnderlineColor) var(--reasoning-mix-rate), var(--reasoning-mix-color));
+}
+
+.mes_text q {
     color: var(--SmartThemeQuoteColor);
 }
+.mes_reasoning q {
+    color: color-mix(in srgb, var(--SmartThemeQuoteColor) var(--reasoning-mix-rate), var(--reasoning-mix-color));
+}
 
 .mes_text font[color] em,
 .mes_text font[color] i,

From 0cc0d6763ed95f9a0e331858838aef7f05c39c08 Mon Sep 17 00:00:00 2001
From: Wolfsblvt <wolfsblvt@gmail.com>
Date: Fri, 21 Feb 2025 19:40:36 +0100
Subject: [PATCH 2/2] Use hsl instead of color-mix for reasoning css

---
 public/style.css | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/public/style.css b/public/style.css
index 3b07f593d..bafc9e288 100644
--- a/public/style.css
+++ b/public/style.css
@@ -55,8 +55,9 @@
     --interactable-outline-color: var(--white100);
     --interactable-outline-color-faint: var(--white20a);
 
-    --reasoning-mix-rate: 50%;
-    --reasoning-mix-color: var(--grey30);
+    --reasoning-body-color: var(--SmartThemeEmColor);
+    --reasoning-em-color: color-mix(in srgb, var(--SmartThemeEmColor) 67%, var(--SmartThemeBlurTintColor) 33%);
+    --reasoning-saturation: 0.5;
 
 
     /*Default Theme, will be changed by ToolCool Color Picker*/
@@ -351,13 +352,13 @@ input[type='checkbox']:focus-visible {
 
 .mes_reasoning {
     display: block;
-    border-left: 2px solid var(--SmartThemeEmColor);
+    border-left: 2px solid var(--reasoning-body-color);
     border-radius: 2px;
     padding: 5px;
     padding-left: 14px;
     margin-bottom: 0.5em;
     overflow-y: auto;
-    color: color-mix(in srgb, var(--SmartThemeBodyColor) var(--reasoning-mix-rate), var(--reasoning-mix-color));
+    color: hsl(from var(--reasoning-body-color) h calc(s * var(--reasoning-saturation)) l);
 }
 
 .mes_reasoning_details {
@@ -457,7 +458,7 @@ input[type='checkbox']:focus-visible {
 }
 .mes_reasoning i,
 .mes_reasoning em {
-    color: color-mix(in srgb, var(--SmartThemeEmColor) var(--reasoning-mix-rate), var(--reasoning-mix-color));
+    color: hsl(from var(--reasoning-em-color) h calc(s * var(--reasoning-saturation)) l);
 }
 
 .mes_text q i,
@@ -466,21 +467,21 @@ input[type='checkbox']:focus-visible {
 }
 .mes_reasoning q i,
 .mes_reasoning q em {
-    color: color-mix(in srgb, var(--SmartThemeQuoteColor) var(--reasoning-mix-rate), var(--reasoning-mix-color));
+    color: hsl(from var(--SmartThemeQuoteColor) h calc(s * var(--reasoning-saturation)) l);
 }
 
 .mes_text u {
     color: var(--SmartThemeUnderlineColor);
 }
 .mes_reasoning u {
-    color: color-mix(in srgb, var(--SmartThemeUnderlineColor) var(--reasoning-mix-rate), var(--reasoning-mix-color));
+    color: hsl(from var(--SmartThemeUnderlineColor) h calc(s * var(--reasoning-saturation)) l);
 }
 
 .mes_text q {
     color: var(--SmartThemeQuoteColor);
 }
 .mes_reasoning q {
-    color: color-mix(in srgb, var(--SmartThemeQuoteColor) var(--reasoning-mix-rate), var(--reasoning-mix-color));
+    color: hsl(from var(--SmartThemeQuoteColor) h calc(s * var(--reasoning-saturation)) l);
 }
 
 .mes_text font[color] em,