replay: replace colors for tokens on timeline (#91933)

Changes replay timeline nodes to use graphic tokens. 

Note that the colors are slightly more vibrant in the new theme,
particularly the yellow and danger tokens seem to stand out more. The
current change modifies the look for both themes, but I'd be happy to
gate this to UI2 only if that's what you'd prefer.

Before
![CleanShot 2025-05-20 at 11 22
21@2x](https://github.com/user-attachments/assets/305fa274-1649-4a76-b675-f2c9a63cfa93)
After
![CleanShot 2025-05-20 at 11 22
26@2x](https://github.com/user-attachments/assets/107d3630-4d85-4c02-be97-55f9b7a25157)

UI2 Before
![CleanShot 2025-05-20 at 11 24
03@2x](https://github.com/user-attachments/assets/e02f658a-ba29-40b3-a347-4a958073c6ad)

UI2 After
![CleanShot 2025-05-20 at 11 23
52@2x](https://github.com/user-attachments/assets/2a7eae69-9174-427a-96ab-88938e37aa8d)

Fixed DE-6

Author: JonasBa

static/app/components/replays/breadcrumbs/replayTimelineEvents.tsx

@@ -12,7 +12,6 @@ import getFrameDetails from 'sentry/utils/replays/getFrameDetails';
 import useActiveReplayTab from 'sentry/utils/replays/hooks/useActiveReplayTab';
 import useCrumbHandlers from 'sentry/utils/replays/hooks/useCrumbHandlers';
 import type {ReplayFrame} from 'sentry/utils/replays/types';
-import type {Color} from 'sentry/utils/theme';
 
 const NODE_SIZES = [8, 12, 16];
 
@@ -114,14 +113,14 @@ function Event({
   // Sort the frame colors by color priority
   // Priority order: red300, yellow300, green300, purple300, gray300
   const sortedUniqueColors = uniqueColors.sort(function (x, y) {
-    const colorOrder: Color[] = [
-      'red300',
-      'yellow300',
-      'green300',
-      'purple300',
-      'gray300',
+    const colorOrder: string[] = [
+      theme.tokens.graphics.danger,
+      theme.tokens.graphics.warning,
+      theme.tokens.graphics.success,
+      theme.tokens.graphics.accent,
+      theme.tokens.graphics.muted,
     ];
-    function getColorPos(c: Color) {
+    function getColorPos(c: string) {
       return colorOrder.indexOf(c);
     }
     return getColorPos(x) - getColorPos(y);
@@ -159,13 +158,13 @@ const getBackgroundGradient = ({
   frameCount,
   theme,
 }: {
-  colors: Color[];
+  colors: Array<keyof Theme['tokens']['graphics']>;
   frameCount: number;
   theme: Theme;
 }) => {
-  const c0 = theme[colors[0]!] ?? colors[0]!;
-  const c1 = theme[colors[1]!] ?? colors[1]! ?? c0;
-  const c2 = theme[colors[2]!] ?? colors[2]! ?? c1;
+  const c0 = theme.tokens.graphics[colors[0]!] ?? colors[0]!;
+  const c1 = theme.tokens.graphics[colors[1]!] ?? colors[1]! ?? c0;
+  const c2 = theme.tokens.graphics[colors[2]!] ?? colors[2]! ?? c1;
 
   if (frameCount === 1) {
     return `background: ${c0};`;
@@ -190,7 +189,10 @@ const getBackgroundGradient = ({
     );`;
 };
 
-const IconNode = styled('button')<{colors: Color[]; frameCount: number}>`
+const IconNode = styled('button')<{
+  colors: Array<keyof Theme['tokens']['graphics']>;
+  frameCount: number;
+}>`
   padding: 0;
   border: none;
   grid-column: 1;