From ba66aef272146fe27d6664a22bc3ef4cbd34cd87 Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Sat, 14 Feb 2026 13:35:06 -0500
Subject: [PATCH] fix: Improve color-text-info preview examples

Changed the preview to show more appropriate use cases:
- Information heading on neutral background
- Pro tip callout with accent bar

Previously showed info text on info background which was confusing.
Now clearly demonstrates where info text color is actually used
in the UI (tips, notifications, informational messages).
---
 .../ThemeColorEditor/Preview/ColorPreview.tsx | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/ui/desktop/src/components/settings/app/ThemeColorEditor/Preview/ColorPreview.tsx b/ui/desktop/src/components/settings/app/ThemeColorEditor/Preview/ColorPreview.tsx
index 1b92635a13..8d9a9db352 100644
--- a/ui/desktop/src/components/settings/app/ThemeColorEditor/Preview/ColorPreview.tsx
+++ b/ui/desktop/src/components/settings/app/ThemeColorEditor/Preview/ColorPreview.tsx
@@ -333,12 +333,24 @@ function TextPreview({ variable, color }: { variable: ColorVariable; color: stri
   
   if (varName === 'color-text-info') {
     return (
-      <div className="p-3 rounded-lg border border-border-info bg-background-info">
-        <p className="text-sm font-semibold" style={{ color }}>ℹ️ Tip</p>
-        <p className="text-xs mt-1" style={{ color }}>
-          You can use keyboard shortcuts to navigate faster
-        </p>
-      </div>
+      <>
+        <div className="p-3 rounded-lg border border-border-primary bg-background-secondary">
+          <p className="text-sm font-semibold" style={{ color }}>ℹ️ Information</p>
+          <p className="text-xs mt-1 text-text-secondary">
+            Info text is used for helpful tips, notifications, and informational messages
+          </p>
+        </div>
+        
+        <div className="flex items-start gap-2 p-3 rounded-lg bg-background-primary border border-border-primary">
+          <div className="w-1 h-full rounded-full" style={{ backgroundColor: color }} />
+          <div>
+            <p className="text-xs font-semibold" style={{ color }}>Pro Tip</p>
+            <p className="text-xs text-text-secondary mt-1">
+              You can use keyboard shortcuts to navigate faster through the app
+            </p>
+          </div>
+        </div>
+      </>
     );
   }