From a753cb135e41dab8adda892370f9592f48287be2 Mon Sep 17 00:00:00 2001
From: Evan Alferez <eoalferez@gmail.com>
Date: Tue, 21 Jul 2026 10:23:06 +0900
Subject: [PATCH] fix(a11y): use --ms-yellow-fg for remaining amber text/icons

#78 introduced theme-aware --ms-yellow-fg for WCAG 2.1 AA amber
foreground, but four inline component styles still used bright
--ms-yellow / #FFB900 and fail (~1.7:1) on light/crimson themes.
---
 src/components/DataSourcesModal.tsx | 2 +-
 src/components/HelpModal.tsx        | 2 +-
 src/components/QuestPanel.tsx       | 2 +-
 src/components/WelcomeModal.tsx     | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/DataSourcesModal.tsx b/src/components/DataSourcesModal.tsx
index fea6bf06..6c78d961 100644
--- a/src/components/DataSourcesModal.tsx
+++ b/src/components/DataSourcesModal.tsx
@@ -108,7 +108,7 @@ export function DataSourcesModal({ onClose }: DataSourcesModalProps) {
                     borderRadius: 'var(--radius-sm)',
                     fontSize: 12,
                     fontWeight: 600,
-                    color: isLakehouse ? 'var(--ms-blue)' : 'var(--ms-yellow)'
+                    color: isLakehouse ? 'var(--ms-blue)' : 'var(--ms-yellow-fg)'
                   }}>
                     {isSemanticModel ? <BarChart3 size={14} /> : <Table size={14} />}
                     {isSemanticModel ? 'Semantic model' : 'Lakehouse'}
diff --git a/src/components/HelpModal.tsx b/src/components/HelpModal.tsx
index 4351bdb4..9555b738 100644
--- a/src/components/HelpModal.tsx
+++ b/src/components/HelpModal.tsx
@@ -54,7 +54,7 @@ export function HelpModal({ onClose }: HelpModalProps) {
 
           <div className="feature-card">
             <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
-              <MessageSquare size={20} color="var(--ms-yellow)" />
+              <MessageSquare size={20} color="var(--ms-yellow-fg)" />
               <span className="feature-title" style={{ marginBottom: 0 }}>Ask Natural Language Questions</span>
             </div>
             <p className="feature-text">
diff --git a/src/components/QuestPanel.tsx b/src/components/QuestPanel.tsx
index 1ec566ba..91bce7a7 100644
--- a/src/components/QuestPanel.tsx
+++ b/src/components/QuestPanel.tsx
@@ -133,7 +133,7 @@ export function QuestPanel() {
               </motion.div>
             ))}
           </div>
-          <div style={{ marginTop: 8, fontSize: 12, color: 'var(--ms-yellow)', fontWeight: 600 }}>
+          <div style={{ marginTop: 8, fontSize: 12, color: 'var(--ms-yellow-fg)', fontWeight: 600 }}>
             Total: {totalPoints} points
           </div>
         </div>
diff --git a/src/components/WelcomeModal.tsx b/src/components/WelcomeModal.tsx
index 5243d3b1..54dd4f93 100644
--- a/src/components/WelcomeModal.tsx
+++ b/src/components/WelcomeModal.tsx
@@ -60,7 +60,7 @@ export function WelcomeModal({ onClose }: WelcomeModalProps) {
 
           <div className="feature-card">
             <div className="feature-icon">
-              <MessageSquare size={24} color="#FFB900" />
+              <MessageSquare size={24} color="var(--ms-yellow-fg)" />
             </div>
             <div className="feature-title">NL Queries</div>
             <div className="feature-text">