From 3013c22dee23a5ee049b5030e3993d8cb746a119 Mon Sep 17 00:00:00 2001
From: wadii <wadii.zaim@flagsmith.com>
Date: Fri, 10 Jul 2026 13:34:06 +0200
Subject: [PATCH] fix(Experiments): Replace hardcoded colours with design
 tokens for dark mode

---
 .../experiments/results/ExperimentConfiguration.tsx   |  4 ++--
 .../experiments/results/ExperimentDetailHeader.tsx    |  6 +++---
 .../results/ExperimentResultsScorecardTable.tsx       |  6 +++---
 .../web/components/experiments/results/StatCard.tsx   |  4 ++--
 .../web/components/experiments/results/results.scss   | 11 +++++++++++
 5 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/frontend/web/components/experiments/results/ExperimentConfiguration.tsx b/frontend/web/components/experiments/results/ExperimentConfiguration.tsx
index 17fa45161474..200e943914b3 100644
--- a/frontend/web/components/experiments/results/ExperimentConfiguration.tsx
+++ b/frontend/web/components/experiments/results/ExperimentConfiguration.tsx
@@ -28,7 +28,7 @@ const ExperimentConfiguration: FC<ExperimentConfigurationProps> = ({
       <div className='col-md-4'>
         <ContentCard compact title='Feature flag'>
           <div>
-            <span className='selectable-card__tag'>
+            <span className='experiment-results__tag'>
               {experiment.feature.name}
             </span>
           </div>
@@ -40,7 +40,7 @@ const ExperimentConfiguration: FC<ExperimentConfigurationProps> = ({
             <div>
               <div>{metric.metric_name}</div>
               <div className='mt-3'>
-                <span className='selectable-card__tag'>
+                <span className='experiment-results__tag'>
                   {EXPECTED_DIRECTION_CHIP[metric.expected_direction]}
                 </span>
               </div>
diff --git a/frontend/web/components/experiments/results/ExperimentDetailHeader.tsx b/frontend/web/components/experiments/results/ExperimentDetailHeader.tsx
index ae3c52aac377..273ae76c8d7e 100644
--- a/frontend/web/components/experiments/results/ExperimentDetailHeader.tsx
+++ b/frontend/web/components/experiments/results/ExperimentDetailHeader.tsx
@@ -200,7 +200,7 @@ const ExperimentDetailHeader: FC<ExperimentDetailHeaderProps> = ({
     if (isEditingHypothesis) {
       return (
         <div className='mt-3' style={{ maxWidth: 640 }}>
-          <span className='fs-caption text-muted fw-bold'>Hypothesis</span>
+          <span className='fs-caption text-secondary fw-bold'>Hypothesis</span>
           <div className='d-flex align-items-start gap-2 mt-1'>
             <textarea
               autoFocus
@@ -252,9 +252,9 @@ const ExperimentDetailHeader: FC<ExperimentDetailHeaderProps> = ({
 
     return (
       <div className='mt-3' style={{ maxWidth: 640 }}>
-        <span className='fs-caption text-muted fw-bold'>Hypothesis</span>
+        <span className='fs-caption text-secondary fw-bold'>Hypothesis</span>
         <div className='d-flex align-items-start gap-1'>
-          <p className='text-muted mb-0'>
+          <p className='text-secondary mb-0'>
             {experiment.hypothesis || (
               <span className='fst-italic'>No hypothesis</span>
             )}
diff --git a/frontend/web/components/experiments/results/ExperimentResultsScorecardTable.tsx b/frontend/web/components/experiments/results/ExperimentResultsScorecardTable.tsx
index c3c14ef5ace5..f3d126de22b8 100644
--- a/frontend/web/components/experiments/results/ExperimentResultsScorecardTable.tsx
+++ b/frontend/web/components/experiments/results/ExperimentResultsScorecardTable.tsx
@@ -52,10 +52,10 @@ const renderLift = (
   liftRange: number,
 ): ReactNode => {
   if (identity.isControl) {
-    return <span className='text-muted fs-caption'>Baseline</span>
+    return <span className='text-secondary fs-caption'>Baseline</span>
   }
   if (!inference) {
-    return <span className='text-muted fs-caption'>Collecting data…</span>
+    return <span className='text-secondary fs-caption'>Collecting data…</span>
   }
   const colour = getLiftColour(inference.lift, direction)
   const left = liftToPercent(inference.ci_low, liftRange)
@@ -94,7 +94,7 @@ const renderCI = (
   inference: Inference | null,
 ): ReactNode => {
   if (identity.isControl) {
-    return <span className='text-muted fs-caption'>Baseline</span>
+    return <span className='text-secondary fs-caption'>Baseline</span>
   }
   if (!inference) return '—'
   return (
diff --git a/frontend/web/components/experiments/results/StatCard.tsx b/frontend/web/components/experiments/results/StatCard.tsx
index 42d3a6baf32a..6d48057eb56f 100644
--- a/frontend/web/components/experiments/results/StatCard.tsx
+++ b/frontend/web/components/experiments/results/StatCard.tsx
@@ -9,9 +9,9 @@ type StatCardProps = {
 
 const StatCard: FC<StatCardProps> = ({ label, loading, value }) => (
   <ContentCard compact>
-    <div className='text-muted fs-caption'>{label}</div>
+    <div className='text-secondary fs-caption'>{label}</div>
     <div className='fs-3 mt-1'>
-      {loading ? <span className='text-muted'>—</span> : value ?? '—'}
+      {loading ? <span className='text-secondary'>—</span> : value ?? '—'}
     </div>
   </ContentCard>
 )
diff --git a/frontend/web/components/experiments/results/results.scss b/frontend/web/components/experiments/results/results.scss
index ac35fe7ff5ee..0866ca5d0bc5 100644
--- a/frontend/web/components/experiments/results/results.scss
+++ b/frontend/web/components/experiments/results/results.scss
@@ -4,6 +4,17 @@
 
 .experiment-recommendation {
   font-size: 16px;
+  color: var(--color-text-default);
+}
+
+.experiment-results__tag {
+  display: inline-block;
+  font-size: 12px;
+  font-weight: var(--font-weight-regular);
+  padding: 2px 8px;
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-emphasis);
+  color: var(--color-text-secondary);
 }
 
 .experiment-results {