fix(experiments): Unify fonts (1)

frontend/src/scenes/experiments/ExperimentView/Exposures.tsx

@@ -192,7 +192,7 @@ export function Exposures(): JSX.Element {
     const headerContent = {
         style: { backgroundColor: 'var(--color-bg-table)' },
         children: (
-            <div className="flex items-center gap-3 text-xs font-semibold text-text-secondary">
+            <div className="flex items-center gap-3 metric-cell">
                 <span>Exposures</span>
 
                 {!isExperimentDraft && (
@@ -220,12 +220,10 @@ export function Exposures(): JSX.Element {
                                         <div className="flex items-center gap-4">
                                             {variants.map(({ variant, percentage }) => (
                                                 <div key={variant} className="flex items-center gap-2">
-                                                    <div className="text-xs">
+                                                    <div className="metric-cell">
                                                         <VariantTag experimentId={experimentId} variantKey={variant} />
                                                     </div>
-                                                    <span className="text-xs font-medium">
-                                                        {percentage.toFixed(1)}%
-                                                    </span>
+                                                    <span className="metric-cell">{percentage.toFixed(1)}%</span>
                                                 </div>
                                             ))}
                                         </div>

frontend/src/scenes/experiments/MetricsView/new/MetricRowGroup.scss

@@ -0,0 +1,5 @@
+.metric-cell {
+    font-size: 13px;
+    font-weight: 500;
+    color: #404040;
+}

frontend/src/scenes/experiments/MetricsView/new/MetricRowGroup.tsx

@@ -1,3 +1,5 @@
+import './MetricRowGroup.scss'
+
 import { useValues } from 'kea'
 import { useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
@@ -317,12 +319,12 @@ export function MetricRowGroup({
 
                 {/* Variant name */}
                 <td
-                    className={`w-20 pt-1 pl-3 pr-3 pb-1 text-xs font-semibold text-left whitespace-nowrap overflow-hidden ${
+                    className={`w-20 pt-1 pl-3 pr-3 pb-1 font-semibold text-left whitespace-nowrap overflow-hidden ${
                         isAlternatingRow ? 'bg-bg-table' : 'bg-bg-light'
                     } ${variantResults.length === 0 ? 'border-b' : ''}`}
                     style={{ height: `${CELL_HEIGHT}px`, maxHeight: `${CELL_HEIGHT}px` }}
                 >
-                    <div className="text-xs font-semibold">{baselineResult.key}</div>
+                    <div className="metric-cell">{baselineResult.key}</div>
                 </td>
 
                 {/* Value */}
@@ -332,8 +334,8 @@ export function MetricRowGroup({
                     } ${variantResults.length === 0 ? 'border-b' : ''}`}
                     style={{ height: `${CELL_HEIGHT}px`, maxHeight: `${CELL_HEIGHT}px` }}
                 >
-                    <div className="text-sm">
-                        <div className="text-text-primary">{formatMetricValue(baselineResult, metric)}</div>
+                    <div className="metric-cell">
+                        <div>{formatMetricValue(baselineResult, metric)}</div>
                         {ratioMetricLabel(baselineResult, metric)}
                     </div>
                 </td>
@@ -345,7 +347,7 @@ export function MetricRowGroup({
                     } ${variantResults.length === 0 ? 'border-b' : ''}`}
                     style={{ height: `${CELL_HEIGHT}px`, maxHeight: `${CELL_HEIGHT}px` }}
                 >
-                    <div className="text-xs text-muted" />
+                    <div />
                 </td>
 
                 {/* Details column - with rowspan */}
@@ -433,7 +435,7 @@ export function MetricRowGroup({
                             } ${isLastRow ? 'border-b' : ''}`}
                             style={{ height: `${CELL_HEIGHT}px`, maxHeight: `${CELL_HEIGHT}px` }}
                         >
-                            <div className="text-xs font-semibold whitespace-nowrap">{variant.key}</div>
+                            <div className="metric-cell whitespace-nowrap">{variant.key}</div>
                         </td>
 
                         {/* Value */}
@@ -443,8 +445,8 @@ export function MetricRowGroup({
                             } ${isLastRow ? 'border-b' : ''}`}
                             style={{ height: `${CELL_HEIGHT}px`, maxHeight: `${CELL_HEIGHT}px` }}
                         >
-                            <div className="text-sm">
-                                <div className="text-text-primary">{formatMetricValue(variant, metric)}</div>
+                            <div className="metric-cell">
+                                <div>{formatMetricValue(variant, metric)}</div>
                                 {ratioMetricLabel(variant, metric)}
                             </div>
                         </td>
@@ -456,14 +458,14 @@ export function MetricRowGroup({
                             } ${isLastRow ? 'border-b' : ''}`}
                             style={{ height: `${CELL_HEIGHT}px`, maxHeight: `${CELL_HEIGHT}px` }}
                         >
-                            <div className="flex items-center gap-1 text-sm">
+                            <div className="flex items-center gap-1">
                                 <span
                                     className={`${
                                         significant
                                             ? winning
-                                                ? 'text-success font-semibold'
-                                                : 'text-danger font-semibold'
-                                            : 'text-text-primary'
+                                                ? 'metric-cell text-success font-bold'
+                                                : 'metric-cell text-danger font-bold'
+                                            : 'metric-cell'
                                     }`}
                                 >
                                     {deltaText}