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

abey79 commented 1 year ago

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 commented 1 year ago

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:

Radix may update their values in the future (they frequently tweak them)
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.
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 commented 1 year ago

rerun-io / rerun

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

Goals

Solutions