Directly use photon-colors (#5821)

Fixed #5820

This removes a cached copy of photon colors inside the colors.ts, and
let it directly use the photon-colors module.

Author: mstange

src/components/js-tracer/Canvas.tsx

@@ -1,7 +1,7 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-import { GREY_20 } from 'photon-colors';
+import { GREY_20, BLUE_40 } from 'photon-colors';
 import * as React from 'react';
 import classNames from 'classnames';
 import {
@@ -16,7 +16,6 @@ import { ChartCanvas } from 'firefox-profiler/components/shared/chart/Canvas';
 import TextMeasurement from 'firefox-profiler/utils/text-measurement';
 import { FastFillStyle } from 'firefox-profiler/utils';
 import type { updatePreviewSelection } from 'firefox-profiler/actions/profile-view';
-import { BLUE_40 } from 'firefox-profiler/utils/colors';
 
 import type {
   Milliseconds,

src/utils/colors.ts

@@ -4,76 +4,28 @@
 
 import { lightDark, maybeLightDark } from './dark-mode';
 
-/**
- * These are the colors from Photon. They are inlined to provide easy access. If updating
- * please change the CSS variables as well.
- *
- * Firefox Colors v1.0.3
- * https://github.com/FirefoxUX/photon-colors/blob/master/photon-colors.js
- */
-
-export const MAGENTA_50 = '#ff1ad9';
-export const MAGENTA_60 = '#ed00b5';
-export const MAGENTA_70 = '#b5007f';
-export const MAGENTA_80 = '#7d004f';
-export const MAGENTA_90 = '#440027';
-
-export const PURPLE_50 = '#9400ff';
-export const PURPLE_60 = '#8000d7';
-export const PURPLE_70 = '#6200a4';
-export const PURPLE_80 = '#440071';
-export const PURPLE_90 = '#25003e';
-
-export const BLUE_40 = '#45a1ff';
-export const BLUE_50 = '#0a84ff';
-export const BLUE_60 = '#0060df';
-export const BLUE_70 = '#003eaa';
-export const BLUE_80 = '#002275';
-export const BLUE_90 = '#000f40';
-
-export const TEAL_50 = '#00feff';
-export const TEAL_60 = '#00c8d7';
-export const TEAL_70 = '#008ea4';
-export const TEAL_80 = '#005a71';
-export const TEAL_90 = '#002d3e';
-
-export const GREEN_50 = '#30e60b';
-export const GREEN_60 = '#12bc00';
-export const GREEN_70 = '#058b00';
-export const GREEN_80 = '#006504';
-export const GREEN_90 = '#003706';
-
-export const YELLOW_50 = '#ffe900';
-export const YELLOW_60 = '#d7b600';
-export const YELLOW_70 = '#a47f00';
-export const YELLOW_80 = '#715100';
-export const YELLOW_90 = '#3e2800';
-
-export const RED_50 = '#ff0039';
-export const RED_60 = '#d70022';
-export const RED_70 = '#a4000f';
-export const RED_80 = '#5a0002';
-export const RED_90 = '#3e0200';
-
-export const ORANGE_50 = '#ff9400';
-export const ORANGE_60 = '#d76e00';
-export const ORANGE_70 = '#a44900';
-export const ORANGE_80 = '#712b00';
-export const ORANGE_90 = '#3e1300';
-
-export const GREY_10 = '#f9f9fa';
-export const GREY_20 = '#ededf0';
-export const GREY_30 = '#d7d7db';
-export const GREY_40 = '#b1b1b3';
-export const GREY_50 = '#737373';
-export const GREY_60 = '#4a4a4f';
-export const GREY_70 = '#38383d';
-export const GREY_80 = '#2a2a2e';
-export const GREY_90 = '#0c0c0d';
-
-export const INK_70 = '#363959';
-export const INK_80 = '#202340';
-export const INK_90 = '#0f1126';
+import {
+  BLUE_40,
+  BLUE_60,
+  GREEN_50,
+  GREEN_60,
+  GREEN_70,
+  GREY_20,
+  GREY_30,
+  GREY_40,
+  GREY_50,
+  GREY_60,
+  GREY_70,
+  MAGENTA_60,
+  MAGENTA_70,
+  ORANGE_50,
+  ORANGE_60,
+  ORANGE_70,
+  PURPLE_70,
+  RED_60,
+  RED_70,
+  YELLOW_50,
+} from 'photon-colors';
 
 type ColorStyles = {
   readonly _selectedFillStyle: string | [string, string];