Update the UI colors to use our (blueish) ramp instead of pure greys

[abey79]

What

This PR changes most shades of grey used in the UI to those defined in the design token color ramp, which has a slight blueish taint. This reduces a lot of cold/warm contrast we used to have, for a more uniform look.

Before:

After:

Checklist

• I have read and agree to Contributor Guide and the Code of Conduct
• I've included a screenshot or gif (if applicable)
• I have tested the web demo (if applicable):
  • Using examples from latest main build: rerun.io/viewer
  • Using full set of examples from nightly build: rerun.io/viewer
• The PR title and labels are set such as to maximize their usefulness for the next release's CHANGELOG
• If applicable, add a new check to the release checklist!
• If have noted any breaking changes to the log API in CHANGELOG.md and the migration guide

• PR Build Summary
• Recent benchmark results
• Wasm size tracking

To run all checks from main, comment on the PR with @rerun-bot full-check.

[abey79]

@gavrelina

Tab bar title color is currently 175.
Bottom bar color is currently 150.

Bottom bar stroke color was pure grey(47) but I just changed it to 250, like separators. Its this one:

We need to fix tooltip background as well. Currently it's grey(35):

The top bar is grey(20). I assume it should be changed too.

[gavrelina]

@abey79 so following up your comment above, a few changes:

1. "Tab bar title color is currently 175." => change to 200
2. "Bottom bar color is currently 150." => double checking — you mean the bar of the timeline section, right? and with it the most of the timeline panel as well. We leave it as is! because we are imitating a bit of the depth with elevating the bottom part of the UI.
3. "tooltip grey(35)" => to 250 (it's lighter than most of our backgrounds, because we want a tooltip to have a feeling of elevation as well!). This also shall be apply for the Rerun menu background color.
   3a. There is a grey entity on hover (in my screenshot it has old grey, in your screenshot I see you have changed that already) => to double check it, should be 325

4. "The top bar is grey(20)" => it has some funky alignments, let's remove the extra grey shade from it, keep it 100 or actually use Alias.Color.Surface.Default.value.

5. There is also a hover on the tabs and/or rr logo that is grey. Change it to 325 (like 3a). I mean these:

[abey79]

Updated as per your comment—looks much nicer!

you mean the bar of the timeline section, right?

Yes!

[gavrelina]

So nice!