For example:
<img width="1904" alt="Screen Shot 2021-11-05 at 11 59 05 AM" src="https://user-images.githubusercontent.com/29597/140540816-25d6d47b-7aea-4121-aeaa-565accc65b1f.png">

NETWORK_SECONDARY: computedStyle.getPropertyValue(
      '--color-timeline-network-secondary',
    ),
    NETWORK_SECONDARY_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-network-secondary-hover',
    ),
    PRIORITY_BACKGROUND: computedStyle.getPropertyValue(
      '--color-timeline-priority-background',
    ),
    PRIORITY_BORDER: computedStyle.getPropertyValue(
      '--color-timeline-priority-border',
    ),
    PRIORITY_LABEL: computedStyle.getPropertyValue('--color-text'),
    USER_TIMING: computedStyle.getPropertyValue('--color-timeline-user-timing'),
    USER_TIMING_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-user-timing-hover',
    ),
    REACT_IDLE: computedStyle.getPropertyValue('--color-timeline-react-idle'),
    REACT_IDLE_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-react-idle-hover',
    ),
    REACT_RENDER: computedStyle.getPropertyValue(
      '--color-timeline-react-render',
    ),
    REACT_RENDER_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-react-render-hover',
    ),
    REACT_RENDER_TEXT: computedStyle.getPropertyValue(
      '--color-timeline-react-render-text',
    ),