replay: replace colors for tokens on timeline

[JonasBa]

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

After

UI2 Before

UI2 After

Fixed DE-6

[ryan953]

should we not keep using the actual color values, or maybe like make new token names? I'm thinking like, a blur is not an accent, it doesn't map like that imo

cc @Jesse-Box

[JonasBa]

should we not keep using the actual color values, or maybe like make new token names? I'm thinking like, a blur is not an accent, it doesn't map like that imo

cc @Jesse-Box

We are ironing out the tokens, that will be the path forward, but we are not quite there yet.

Ultimately, we do want to guide folks away from using colors directly, and that Color type is one thing I'd like to see less of in the codebase. Main reason is that using that type gives you access to all theme colors, and so if we accept it in some generic component, like for example our Icons, we end up with a rainbow of colors for icons in production, as there is no way to enforce that e.g. only one type of gray color is used.

I agree, about the name maping, I'll defer to Jesse for that. Ultimately, what we want to encourage is for people to define their own variants, something that makes semantic meaning for the variants that they are encapsulating over, as it will be hard for us to do that, but also, we won't be able to find mapping that intuitively work for everyone.

An alternative approach here that I would recommend is creating a custom <IconNode variant='error | interaction | ...'/> that maps to a concept in replay, and then inside the IconNode, toggle the colors based off that variant. This way, we would avoid passing color aliases or value around, but also have an enumerated variant set that we could toggle on in different places as well

[ryan953]

colors seem fine in the before/after for ui1 and ui2 👍