Pull out colors.

packages/utils/src/lib/PerformanceTracker.ts

@@ -1,3 +1,5 @@
+import { PERFORMANCE_COLORS, PERFORMANCE_PREFIX_COLOR } from './perf'
+
 /** @public */
 export class PerformanceTracker {
 	private startTime = 0
@@ -26,13 +28,18 @@ export class PerformanceTracker {
 		if (this.frame !== null) cancelAnimationFrame(this.frame)
 		const duration = (performance.now() - this.startTime) / 1000
 		const fps = duration === 0 ? 0 : Math.floor(this.frames / duration)
-		const background = fps > 55 ? '#40C057' : fps > 30 ? '#FFC078' : '#E03131'
-		const color = background === '#FFC078' ? 'black' : 'white'
+		const background =
+			fps > 55
+				? PERFORMANCE_COLORS.Good
+				: fps > 30
+					? PERFORMANCE_COLORS.Mid
+					: PERFORMANCE_COLORS.Poor
+		const color = background === PERFORMANCE_COLORS.Mid ? 'black' : 'white'
 		const capitalized = this.name[0].toUpperCase() + this.name.slice(1)
 		// eslint-disable-next-line no-console
 		console.debug(
 			`%cPerf%c ${capitalized} %c${fps}%c fps`,
-			`color: white; background: #40C057;padding: 2px;border-radius: 3px;`,
+			`color: white; background: ${PERFORMANCE_PREFIX_COLOR};padding: 2px;border-radius: 3px;`,
 			'font-weight: normal',
 			`font-weight: bold; padding: 2px; background: ${background};color: ${color};`,
 			'font-weight: normal'

packages/utils/src/lib/perf.ts

@@ -1,3 +1,11 @@
+export const PERFORMANCE_COLORS = {
+	Good: '#40C057',
+	Mid: '#FFC078',
+	Poor: '#E03131',
+}
+
+export const PERFORMANCE_PREFIX_COLOR = PERFORMANCE_COLORS.Good
+
 /** @internal */
 export function measureCbDuration(name: string, cb: () => any) {
 	const start = performance.now()
@@ -5,7 +13,7 @@ export function measureCbDuration(name: string, cb: () => any) {
 	// eslint-disable-next-line no-console
 	console.debug(
 		`%cPerf%c ${name} took ${performance.now() - start}ms`,
-		`color: white; background: #40C057;padding: 2px;border-radius: 3px;`,
+		`color: white; background: ${PERFORMANCE_PREFIX_COLOR};padding: 2px;border-radius: 3px;`,
 		'font-weight: normal'
 	)
 	return result
@@ -20,7 +28,7 @@ export function measureDuration(_target: any, propertyKey: string, descriptor: P
 		// eslint-disable-next-line no-console
 		console.debug(
 			`%cPerf%c ${propertyKey} took: ${performance.now() - start}ms`,
-			`color: white; background: #40C057;padding: 2px;border-radius: 3px;`,
+			`color: white; background: ${PERFORMANCE_PREFIX_COLOR};padding: 2px;border-radius: 3px;`,
 			'font-weight: normal'
 		)
 		return result
@@ -49,7 +57,7 @@ export function measureAverageDuration(
 		// eslint-disable-next-line no-console
 		console.debug(
 			`%cPerf%c ${propertyKey} took ${(end - start).toFixed(2)}ms | average ${(total / count).toFixed(2)}ms`,
-			`color: white; background: #40C057;padding: 2px;border-radius: 3px;`,
+			`color: white; background: ${PERFORMANCE_PREFIX_COLOR};padding: 2px;border-radius: 3px;`,
 			'font-weight: normal'
 		)
 		return result