Replaces graph color settings with theme colors

package.json

@@ -2112,30 +2112,6 @@
 						"markdownDescription": "Specifies the number of additional items to fetch when paginating in the _Commit Graph_. Use 0 to specify no limit",
 						"scope": "window",
 						"order": 60
-					},
-					"gitlens.graph.columnColors": {
-						"type": "array",
-						"items": {
-							"type": "string",
-							"pattern": "^#(?:[0-9a-fA-F]{3,4}){1,2}$"
-						},
-						"default": [
-							"#15a0bf",
-							"#0669f7",
-							"#8e00c2",
-							"#c517b6",
-							"#d90171",
-							"#cd0101",
-							"#f25d2e",
-							"#f2ca33",
-							"#7bd938",
-							"#2ece9d"
-						],
-						"markdownDescription": "Specifies the colors used for the different columns in the _Commit Graph_",
-						"scope": "window",
-						"order": 100,
-						"maxItems": 10,
-						"minItems": 10
 					}
 				}
 			},
@@ -3840,6 +3816,96 @@
 					"dark": "#E2C08D",
 					"highContrast": "#E2C08D"
 				}
+			},
+			{
+				"id": "gitlens.graphLane1Color",
+				"description": "Specifies the color for the first commit lane of the _Commit Graph_ visualization",
+				"defaults": {
+					"light": "#15a0bf",
+					"dark": "#15a0bf",
+					"highContrast": "#15a0bf"
+				}
+			},
+			{
+				"id": "gitlens.graphLane2Color",
+				"description": "Specifies the color for the second commit lane of the _Commit Graph_ visualization",
+				"defaults": {
+					"light": "#0669f7",
+					"dark": "#0669f7",
+					"highContrast": "#0669f7"
+				}
+			},
+			{
+				"id": "gitlens.graphLane3Color",
+				"description": "Specifies the color for the third commit lane of the _Commit Graph_ visualization",
+				"defaults": {
+					"light": "#8e00c2",
+					"dark": "#8e00c2",
+					"highContrast": "#8e00c2"
+				}
+			},
+			{
+				"id": "gitlens.graphLane4Color",
+				"description": "Specifies the color for the fourth commit lane of the _Commit Graph_ visualization",
+				"defaults": {
+					"light": "#c517b6",
+					"dark": "#c517b6",
+					"highContrast": "#c517b6"
+				}
+			},
+			{
+				"id": "gitlens.graphLane5Color",
+				"description": "Specifies the color for the fifth commit lane of the _Commit Graph_ visualization",
+				"defaults": {
+					"light": "#d90171",
+					"dark": "#d90171",
+					"highContrast": "#d90171"
+				}
+			},
+			{
+				"id": "gitlens.graphLane6Color",
+				"description": "Specifies the color for the sixth commit lane of the _Commit Graph_ visualization",
+				"defaults": {
+					"light": "#cd0101",
+					"dark": "#cd0101",
+					"highContrast": "#cd0101"
+				}
+			},
+			{
+				"id": "gitlens.graphLane7Color",
+				"description": "Specifies the color for the seventh commit lane of the _Commit Graph_ visualization",
+				"defaults": {
+					"light": "#f25d2e",
+					"dark": "#f25d2e",
+					"highContrast": "#f25d2e"
+				}
+			},
+			{
+				"id": "gitlens.graphLane8Color",
+				"description": "Specifies the color for the eighth commit lane of the _Commit Graph_ visualization",
+				"defaults": {
+					"light": "#f2ca33",
+					"dark": "#f2ca33",
+					"highContrast": "#f2ca33"
+				}
+			},
+			{
+				"id": "gitlens.graphLane9Color",
+				"description": "Specifies the color for the ninth commit lane of the _Commit Graph_ visualization",
+				"defaults": {
+					"light": "#7bd938",
+					"dark": "#7bd938",
+					"highContrast": "#7bd938"
+				}
+			},
+			{
+				"id": "gitlens.graphLane10Color",
+				"description": "Specifies the color for the tenth commit lane of the _Commit Graph_ visualization",
+				"defaults": {
+					"light": "#2ece9d",
+					"dark": "#2ece9d",
+					"highContrast": "#2ece9d"
+				}
 			}
 		],
 		"commands": [

src/config.ts

@@ -378,7 +378,6 @@ export interface GraphColumnConfig {
 }
 
 export interface GraphConfig {
-	columnColors: string[];
 	defaultItemLimit: number;
 	pageItemLimit: number;
 	statusBar: {

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

@@ -2,7 +2,7 @@
 import type { CssVariables } from '@gitkraken/gitkraken-components';
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
-import type { GraphColumnConfig, GraphConfig } from '../../../../config';
+import type { GraphColumnConfig } from '../../../../config';
 import type { CommitListCallback, GraphCommit, GraphRepository, State } from '../../../../plus/webviews/graph/protocol';
 import {
 	DidChangeCommitsNotificationType,
@@ -21,6 +21,19 @@ import { mix, opacity } from '../../shared/colors';
 import { GraphWrapper } from './GraphWrapper';
 import './graph.scss';
 
+const graphLaneThemeColors = new Map([
+	['--vscode-gitlens-graphLane1Color', '#15a0bf'],
+	['--vscode-gitlens-graphLane2Color', '#0669f7'],
+	['--vscode-gitlens-graphLane3Color', '#8e00c2'],
+	['--vscode-gitlens-graphLane4Color', '#c517b6'],
+	['--vscode-gitlens-graphLane5Color', '#d90171'],
+	['--vscode-gitlens-graphLane6Color', '#cd0101'],
+	['--vscode-gitlens-graphLane7Color', '#f25d2e'],
+	['--vscode-gitlens-graphLane8Color', '#f2ca33'],
+	['--vscode-gitlens-graphLane9Color', '#7bd938'],
+	['--vscode-gitlens-graphLane10Color', '#2ece9d'],
+]);
+
 export class GraphApp extends App<State> {
 	private callback?: CommitListCallback;
 	private $menu?: HTMLElement;
@@ -68,7 +81,7 @@ export class GraphApp extends App {
 				this.log(`${this.appName}.onMessageReceived(${msg.id}): name=${msg.method}`);
 
 				onIpc(DidChangeNotificationType, msg, params => {
-					this.setState({ ...this.state, ...params.state, mixedColumnColors: undefined });
+					this.setState({ ...this.state, ...params.state });
 					this.refresh(this.state);
 				});
 				break;
@@ -93,7 +106,6 @@ export class GraphApp extends App {
 					this.setState({
 						...this.state,
 						config: params.config,
-						mixedColumnColors: undefined,
 					});
 					this.refresh(this.state);
 				});
@@ -111,31 +123,36 @@ export class GraphApp extends App {
 
 	protected override setState(state: State) {
 		if (state.mixedColumnColors == null) {
-			state.mixedColumnColors = this.getGraphColors(state.config);
+			state.mixedColumnColors = this.getGraphColors();
 		}
 		super.setState(state);
 	}
 
-	private getGraphColors(config: GraphConfig | undefined): CssVariables {
+	private getGraphColors(): CssVariables {
 		// this will be called on theme updated as well as on config updated since it is dependent on the column colors from config changes and the background color from the theme
-		const body = document.body;
-		const computedStyle = window.getComputedStyle(body);
+		const computedStyle = window.getComputedStyle(document.body);
 		const bgColor = computedStyle.getPropertyValue('--color-background');
-		const columnColors =
-			config?.columnColors != null
-				? config.columnColors
-				: ['#00bcd4', '#ff9800', '#9c27b0', '#2196f3', '#009688', '#ffeb3b', '#ff5722', '#795548'];
+
 		const mixedGraphColors: CssVariables = {};
-		for (let i = 0; i < columnColors.length; i++) {
-			mixedGraphColors[`--graph-color-${i}`] = columnColors[i];
-			mixedGraphColors[`--column-${i}-color`] = columnColors[i];
+
+		let i = 0;
+		let color;
+		for (const [colorVar, colorDefault] of graphLaneThemeColors) {
+			color = computedStyle.getPropertyValue(colorVar) || colorDefault;
+
+			mixedGraphColors[`--column-${i}-color`] = color;
+
+			mixedGraphColors[`--graph-color-${i}`] = color;
 			for (const mixInt of [15, 25, 45, 50]) {
-				mixedGraphColors[`--graph-color-${i}-bg${mixInt}`] = mix(bgColor, columnColors[i], mixInt);
+				mixedGraphColors[`--graph-color-${i}-bg${mixInt}`] = mix(bgColor, color, mixInt);
 			}
 			for (const mixInt of [10, 50]) {
-				mixedGraphColors[`--graph-color-${i}-f${mixInt}`] = opacity(columnColors[i], mixInt);
+				mixedGraphColors[`--graph-color-${i}-f${mixInt}`] = opacity(color, mixInt);
 			}
+
+			i++;
 		}
+
 		return mixedGraphColors;
 	}