Converts to use colorjs.io for color manipulation

package.json

@@ -12742,7 +12742,7 @@
 		"@vscode/webview-ui-toolkit": "1.2.1",
 		"ansi-regex": "6.0.1",
 		"billboard.js": "3.7.2",
-		"chroma-js": "2.4.2",
+		"colorjs.io": "0.4.2",
 		"https-proxy-agent": "5.0.1",
 		"iconv-lite": "0.6.3",
 		"lit": "2.3.1",
@@ -12756,7 +12756,6 @@
 		"sortablejs": "1.15.0"
 	},
 	"devDependencies": {
-		"@types/chroma-js": "2.1.4",
 		"@types/glob": "8.0.1",
 		"@types/lodash-es": "4.17.6",
 		"@types/mocha": "10.0.1",

src/annotations/annotations.ts

@@ -14,8 +14,8 @@ import { Colors, GlyphChars } from '../constants';
 import type { CommitFormatOptions } from '../git/formatters/commitFormatter';
 import { CommitFormatter } from '../git/formatters/commitFormatter';
 import type { GitCommit } from '../git/models/commit';
+import { steps, toRgba } from '../system/color';
 import { getWidth, interpolate, pad } from '../system/string';
-import { toRgba } from '../webviews/apps/shared/colors';
 
 export interface ComputedHeatmap {
 	coldThresholdTimestamp: number;
@@ -58,7 +58,7 @@ const defaultHeatmapColors = [
 ];
 
 let heatmapColors: { hot: string[]; cold: string[] } | undefined;
-export async function getHeatmapColors() {
+export function getHeatmapColors() {
 	if (heatmapColors == null) {
 		const { coldColor, hotColor } = configuration.get('heatmap');
 
@@ -66,10 +66,13 @@ export async function getHeatmapColors() {
 		if (coldColor === defaultHeatmapColdColor && hotColor === defaultHeatmapHotColor) {
 			colors = defaultHeatmapColors;
 		} else {
-			const chroma = (await import(/* webpackChunkName: "heatmap-chroma" */ 'chroma-js')).default;
-			colors = chroma.scale([hotColor, coldColor]).mode('lrgb').classes(20).colors(20);
+			colors = steps(hotColor, coldColor, {
+				space: 'xyz',
+				outputSpace: 'srgb',
+				steps: 20,
+				maxSteps: 20,
+			}).map(c => c.toString({ format: 'hex' }));
 		}
-
 		heatmapColors = {
 			hot: colors.slice(0, 10),
 			cold: colors.slice(10, 20),

src/annotations/blameAnnotationProvider.ts

@@ -55,7 +55,7 @@ export abstract class BlameAnnotationProviderBase extends AnnotationProviderBase
 	}
 
 	@log({ args: false })
-	protected async getComputedHeatmap(blame: GitBlame): Promise<ComputedHeatmap> {
+	protected getComputedHeatmap(blame: GitBlame): ComputedHeatmap {
 		const dates: Date[] = [];
 
 		let commit;
@@ -124,7 +124,7 @@ export abstract class BlameAnnotationProviderBase extends AnnotationProviderBase
 
 		return {
 			coldThresholdTimestamp: coldThresholdTimestamp,
-			colors: await getHeatmapColors(),
+			colors: getHeatmapColors(),
 			computeRelativeAge: (date: Date) => computeRelativeAge(date, getLookupTable(date)),
 			computeOpacity: (date: Date) => {
 				const lookup = getLookupTable(date, true);

src/annotations/gutterBlameAnnotationProvider.ts

@@ -86,7 +86,7 @@ export class GutterBlameAnnotationProvider extends BlameAnnotationProviderBase {
 
 		let computedHeatmap;
 		if (cfg.heatmap.enabled) {
-			computedHeatmap = await this.getComputedHeatmap(blame);
+			computedHeatmap = this.getComputedHeatmap(blame);
 		}
 
 		for (const l of blame.lines) {

src/annotations/gutterHeatmapBlameAnnotationProvider.ts

@@ -31,7 +31,7 @@ export class GutterHeatmapBlameAnnotationProvider extends BlameAnnotationProvide
 			string,
 			{ decorationType: TextEditorDecorationType; rangesOrOptions: Range[] }
 		>();
-		const computedHeatmap = await this.getComputedHeatmap(blame);
+		const computedHeatmap = this.getComputedHeatmap(blame);
 
 		let commit: GitCommit | undefined;
 		for (const l of blame.lines) {

src/webviews/apps/shared/colors.ts → src/system/color.ts

@@ -1,3 +1,9 @@
+import type Color from 'colorjs.io';
+import { steps as _steps } from 'colorjs.io/fn';
+import type { ColorTypes } from 'colorjs.io/types/src/color';
+import type { Methods } from 'colorjs.io/types/src/index-fn';
+import type { RangeOptions } from 'colorjs.io/types/src/interpolation';
+
 const cssColorRegex =
 	/^(?:(#?)([0-9a-f]{3}|[0-9a-f]{6})|((?:rgb|hsl)a?)\((-?\d+%?)[,\s]+(-?\d+%?)[,\s]+(-?\d+%?)[,\s]*(-?[\d.]+%?)?\))$/i;
 
@@ -46,6 +52,18 @@ const mixChannel = (channel1: number, channel2: number, percentage: number) => {
 	return channel1 + ((channel2 - channel1) * percentage) / 100;
 };
 
+interface StepsOptions extends RangeOptions {
+	maxDeltaE?: number | undefined;
+	deltaEMethod?: Methods | undefined;
+	steps?: number | undefined;
+	maxSteps?: number | undefined;
+}
+
+export function steps(color1: ColorTypes, color2: ColorTypes, options?: StepsOptions): Color[] {
+	type Steps = (color1: ColorTypes, color2: ColorTypes, options?: StepsOptions) => Color[];
+	return (_steps as Steps)(color1, color2, options);
+}
+
 export function toRgba(color: string) {
 	color = color.trim();
 

src/webviews/apps/plus/graph/graph.tsx

@@ -46,11 +46,11 @@ import {
 	UpdateRefsVisibilityCommandType,
 	UpdateSelectionCommandType,
 } from '../../../../plus/webviews/graph/protocol';
+import { mix, opacity } from '../../../../system/color';
 import { debounce } from '../../../../system/function';
 import type { IpcMessage, IpcNotificationType } from '../../../protocol';
 import { onIpc } from '../../../protocol';
 import { App } from '../../shared/appBase';
-import { mix, opacity } from '../../shared/colors';
 import { GraphWrapper } from './GraphWrapper';
 import './graph.scss';
 

src/webviews/apps/shared/theme.ts

@@ -1,5 +1,5 @@
 /*global window document MutationObserver*/
-import { darken, lighten, opacity } from './colors';
+import { darken, lighten, opacity } from '../../../system/color';
 import type { Event } from './events';
 import { Emitter } from './events';
 

yarn.lock

@@ -681,11 +681,6 @@
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
   integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
 
-"@types/chroma-js@2.1.4":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@types/chroma-js/-/chroma-js-2.1.4.tgz#52e3a8453000cdb9ad76357c2c47dbed702d136f"
-  integrity sha512-l9hWzP7cp7yleJUI7P2acmpllTJNYf5uU6wh50JzSIZt3fFHe+w2FM6w9oZGBTYzjjm2qHdnQvI+fF/JF/E5jQ==
-
 "@types/d3-selection@*", "@types/d3-selection@^3.0.4":
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-3.0.4.tgz#923d7f8985718116de56f55307d26e5f00728dc5"
@@ -1836,11 +1831,6 @@ chownr@^2.0.0:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
   integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
 
-chroma-js@2.4.2:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/chroma-js/-/chroma-js-2.4.2.tgz#dffc214ed0c11fa8eefca2c36651d8e57cbfb2b0"
-  integrity sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A==
-
 chrome-trace-event@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"
@@ -1990,6 +1980,11 @@ colorette@^2.0.14:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.19.tgz#cdf044f47ad41a0f4b56b3a0d5b4e6e1a2d5a798"
   integrity sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==
 
+colorjs.io@0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/colorjs.io/-/colorjs.io-0.4.2.tgz#5338fc185a8be3b46674420cd2be88389a18145b"
+  integrity sha512-vtpiH+BTzZtzs4Yno0GyoC05Z20fTeLwNJ7lQzjxi8GJJb1SZO2o5yUBAUXzgvrO2JNuyIqur4gb1Z6HBjpd9A==
+
 commander@7, commander@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"