Bug-1915777: Make test tags theme aware

src/__tests__/CompareResults/__snapshots__/OverTimeResultsView.test.tsx.snap

@@ -637,7 +637,7 @@ exports[`Results View The table should match snapshot and other elements should
                 </div>
               </div>
               <div
-                class="fexjzun"
+                class="MuiBox-root css-56tgmi"
               >
                 <span
                   class="f1rpr1m5"

src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap

@@ -1479,7 +1479,7 @@ exports[`Results Table Should match snapshot 1`] = `
                             </div>
                           </div>
                           <div
-                            class="fexjzun"
+                            class="MuiBox-root css-56tgmi"
                           >
                             <span
                               class="f1rpr1m5"
@@ -2149,7 +2149,7 @@ exports[`Results Table Should match snapshot 1`] = `
                             </div>
                           </div>
                           <div
-                            class="fexjzun"
+                            class="MuiBox-root css-56tgmi"
                           >
                             <span
                               class="f1rpr1m5"
@@ -4117,7 +4117,7 @@ exports[`Results Table for MannWhitneyResultsItem for mann-whitney-u testVersion
                             </div>
                           </div>
                           <div
-                            class="fexjzun"
+                            class="MuiBox-root css-56tgmi"
                           >
                             <span
                               class="f1rpr1m5"
@@ -4813,7 +4813,7 @@ exports[`Results Table for MannWhitneyResultsItem for mann-whitney-u testVersion
                             </div>
                           </div>
                           <div
-                            class="fexjzun"
+                            class="MuiBox-root css-56tgmi"
                           >
                             <span
                               class="f1rpr1m5"
@@ -5402,7 +5402,7 @@ exports[`Results Table for MannWhitneyResultsItem for mann-whitney-u testVersion
       </strong>
     </div>
     <div
-      class="fexjzun"
+      class="MuiBox-root css-56tgmi"
     >
       <span
         class="f1rpr1m5"
@@ -5943,7 +5943,7 @@ exports[`Results Table should render different blocks when rendering several rev
       </strong>
     </div>
     <div
-      class="fexjzun"
+      class="MuiBox-root css-56tgmi"
     >
       <span
         class="f1rpr1m5"

src/__tests__/CompareResults/__snapshots__/ResultsView.test.tsx.snap

@@ -1488,7 +1488,7 @@ exports[`Results View The table should match snapshot and other elements should
                 </div>
               </div>
               <div
-                class="fexjzun"
+                class="MuiBox-root css-56tgmi"
               >
                 <span
                   class="f1rpr1m5"

src/__tests__/CompareResults/__snapshots__/SubtestsResultsView.test.tsx.snap

@@ -619,7 +619,7 @@ exports[`SubtestsResultsView Component Tests should render the subtests results
                   </span>
                 </div>
                 <div
-                  class="f1oxa67k"
+                  class="MuiBox-root css-56tgmi"
                 >
                   <span
                     class="f1rpr1m5"
@@ -2396,7 +2396,7 @@ exports[`SubtestsViewCompareOverTime Component Tests in mann-whitney-u testVersi
                   </span>
                 </div>
                 <div
-                  class="f1oxa67k"
+                  class="MuiBox-root css-56tgmi"
                 >
                   <span
                     class="f1rpr1m5"
@@ -3825,7 +3825,7 @@ exports[`SubtestsViewCompareOverTime Component Tests in mann-whitney-u testVersi
                   </span>
                 </div>
                 <div
-                  class="f1oxa67k"
+                  class="MuiBox-root css-56tgmi"
                 >
                   <span
                     class="f1rpr1m5"
@@ -5254,7 +5254,7 @@ exports[`SubtestsViewCompareOverTime Component Tests renders over-time view when
                   </span>
                 </div>
                 <div
-                  class="f1oxa67k"
+                  class="MuiBox-root css-56tgmi"
                 >
                   <span
                     class="f1rpr1m5"
@@ -6683,7 +6683,7 @@ exports[`SubtestsViewCompareOverTime Component Tests should render the subtests
                   </span>
                 </div>
                 <div
-                  class="f1oxa67k"
+                  class="MuiBox-root css-56tgmi"
                 >
                   <span
                     class="f1rpr1m5"

src/components/CompareResults/SubtestsResults/SubtestsRevisionHeader.tsx

@@ -1,7 +1,7 @@
 import { type ReactNode } from 'react';
 
 import AppleIcon from '@mui/icons-material/Apple';
-import { Link } from '@mui/material';
+import { Box, Link } from '@mui/material';
 import Tooltip from '@mui/material/Tooltip';
 import { useLoaderData } from 'react-router';
 import { style } from 'typestyle';
@@ -173,14 +173,34 @@ function SubtestsRevisionHeader(props: SubtestsRevisionHeaderProps) {
           </span>
         </Tooltip>
       </div>
-      <div className={styles.tagsOptions}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: '4px',
+          margin: '0 4px',
+          textAlign: 'right',
+          '& span': {
+            color: 'tagOptions.text',
+          },
+          '& span:nth-of-type(3n)': {
+            bgcolor: 'tagOptions.backgroundColorOption1',
+          },
+          '& span:nth-of-type(3n+1)': {
+            bgcolor: 'tagOptions.backgroundColorOption2',
+          },
+          '& span:nth-of-type(3n+2)': {
+            bgcolor: 'tagOptions.backgroundColorOption3',
+          },
+        }}
+      >
         <span className={styles.chip}>{header.option_name}</span>
         {extraOptions.map((option, index) => (
           <span className={styles.chip} key={index}>
             {option}
           </span>
         ))}
-      </div>
+      </Box>
     </div>
   );
 }

src/components/CompareResults/TestHeader.tsx

@@ -1,4 +1,4 @@
-import { Link } from '@mui/material';
+import { Box, Link } from '@mui/material';
 import { style } from 'typestyle';
 
 import LinkToRevision from './LinkToRevision';
@@ -118,14 +118,34 @@ export default function TestHeader(props: TestHeaderProps) {
           </>
         )}
       </div>
-      <div className={styles.tagsOptions}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: '4px',
+          margin: '0 4px',
+          textAlign: 'right',
+          '& span': {
+            color: 'tagOptions.text',
+          },
+          '& span:nth-of-type(3n)': {
+            bgcolor: 'tagOptions.backgroundColorOption1',
+          },
+          '& span:nth-of-type(3n+1)': {
+            bgcolor: 'tagOptions.backgroundColorOption2',
+          },
+          '& span:nth-of-type(3n+2)': {
+            bgcolor: 'tagOptions.backgroundColorOption3',
+          },
+        }}
+      >
         <span className={styles.chip}>{result.option_name}</span>
         {extraOptions.map((option, index) => (
           <span className={styles.chip} key={index}>
             {option}
           </span>
         ))}
-      </div>
+      </Box>
     </div>
   );
 }

src/styles/Colors.ts

@@ -59,6 +59,16 @@ export enum Colors {
   Background500Dark = '#004725',
   BackgroundScrimDark = '#5b5b66 45%',
 
+  //tag option colors light theme
+  TagOptionBackground3n = '#592ACB',
+  TagOptionBackground3n1 = '#005E5E',
+  TagOptionBackground3n2 = '#0250BB',
+
+  //tag option colors dark theme
+  TagOptionBackground3nDark = '#E88CE8',
+  TagOptionBackground3n1Dark = '#97E6C1',
+  TagOptionBackground3n2Dark = '#00FFFFFC',
+
   //border colors light theme
   BorderDefault = '#8F8F9D',
   BorderDropdownMenu = '#CFCFD8',

src/theme/protocolTheme.ts

@@ -46,6 +46,12 @@ const lightMode = {
     background: Colors.Background100,
     compareMetricsBg: Colors.Background300,
   },
+  tagOptions: {
+    text: Colors.InvertedText,
+    backgroundColorOption1: Colors.TagOptionBackground3n,
+    backgroundColorOption2: Colors.TagOptionBackground3n1,
+    backgroundColorOption3: Colors.TagOptionBackground3n2,
+  },
 };
 
 const darkMode = {
@@ -86,6 +92,12 @@ const darkMode = {
     background: Colors.Background100Dark,
     compareMetricsBg: Colors.Background300Dark,
   },
+  tagOptions: {
+    text: Colors.InvertedTextDark,
+    backgroundColorOption1: Colors.TagOptionBackground3nDark,
+    backgroundColorOption2: Colors.TagOptionBackground3n1Dark,
+    backgroundColorOption3: Colors.TagOptionBackground3n2Dark,
+  },
 };
 
 const getDesignTokens = (modeVal: ThemeMode) => ({