Migrate to Radix color table and "2D color coordinates"

[abey79]

These are some notes following a discussion with @martenbjork on how to evolve the current design token system in the short term, such as to address some of its shortcoming and go in the direction of emilk/egui#3284.

Goals

• start using the Radix color tables and use taint/index color coordinates
• make it much easier to iterate on alias (mapping from "type of use in the UI" -> "color coordinate"), while retaining a single source of truth (so both rerun, Figma, and @martenbjork's React prototype use the same mappings)

Solutions

1. Create a public, single-file repository containing a dead-simple JSON containing the aliases.
   The idea is to minimise friction when new alias must be created by rerun dev (use-case example: subdued container color in the blueprint tree UI, etc.) during dev iterations. Using a file on rerun-io/landing is not possible since that repo is private (can't easy pull the json where it's needed).
2. Hard-code the radix color table in Rerun.
3. Use that file instead of the current design-token.json file. Create/update script to automate pulling the file from the reference repo.
4. Take similar steps on the side of Figma and @martenbjork's proto.
5. Progressively update the code-base use the new system instead of ugly hacks (like setting 50% gamma, etc.)

[martenbjork]

Thanks for taking notes!

Hard-code the radix color table in Rerun

I think it might be worth having this live in the tokens file for 3 reasons:

1. Radix may update their values in the future (they frequently tweak them)
2. Other systems (Figma import, website) need the values as well. It's good if they can do it without having to install radix or copy paste and hard code radix values.
3. We want to have non-radix values in there as well, for typography, shadows etc.

Based on this, I suggest this JSON format:

{
  // We add radix colors and other global tokens here
  "colors": {
    "slate": {
      "1": {
        "$type": "color",
        "$description": "",
        "$value": {
          "hex": "#000000"
        }
      },
      "2": {
        "$type": "color",
        "$description": "",
        "$value": {
          "hex": "#000000"
        }
      },
      "3": {
        "$type": "color",
        "$description": "",
        "$value": {
          "hex": "#000000"
        }
      }
    }
  },

  // This is where we add our custom values
  "surface": {
    "default": {
      "$type": "color",
      "$description": "Default color in...",
      "$value": "{color.slate.2}"
    }
  },
  "interactive": {
    "default": {
      "$type": "color",
      "$description": "Default color in...",
      "$value": "{color.slate.4}"
    },
    "hover": {
      "$type": "color",
      "$description": "Default color in...",
      "$value": "{color.slate.5}"
    },
    "pressed": {
      "$type": "color",
      "$description": "Default color in...",
      "$value": "{color.slate.3}"
    }
  }
}

[martenbjork]

Related reading:

• Recent thread on Figma updates + design tokens progress: https://twitter.com/DesignTokens/status/1674124310892654598

• Draft spec for tokens: https://design-tokens.github.io/community-group/format/

[frankvgompel]

In case you hadn't noticed, I published an egui toolkit based on the Radix system and APCA luminosity contrast and without .json files. Its purpose is to give food for thought about colour styling.