GK-3779 (Gitlens side) - Some CSS variables are defined directly in Gitlens, so the graph can't render some things correctly when used in another web application (#2720)

* Provide CSS "stats" and "scroll marker" variables to the graph component by using the "cssVariables" property

* Updates graph dependency

* Formatting

---------

Co-authored-by: Ramin Tadayon <ramin.tadayon@gitkraken.com>

package.json

@@ -14426,7 +14426,7 @@
 		"vscode:prepublish": "yarn run bundle"
 	},
 	"dependencies": {
-		"@gitkraken/gitkraken-components": "10.1.3",
+		"@gitkraken/gitkraken-components": "10.1.5",
 		"@microsoft/fast-element": "1.12.0",
 		"@microsoft/fast-react-wrapper": "0.3.18",
 		"@octokit/core": "4.2.1",

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

@@ -535,6 +535,33 @@ export class GraphApp extends App {
 					? `1px dashed ${getCssVariable('--color-graph-contrast-border', computedStyle)}`
 					: 'none',
 
+				'--scroll-marker-head-color': getCssVariable('--color-graph-scroll-marker-head', computedStyle),
+				'--scroll-marker-upstream-color': getCssVariable('--color-graph-scroll-marker-upstream', computedStyle),
+				'--scroll-marker-highlights-color': getCssVariable(
+					'--color-graph-scroll-marker-highlights',
+					computedStyle,
+				),
+				'--scroll-marker-local-branches-color': getCssVariable(
+					'--color-graph-scroll-marker-local-branches',
+					computedStyle,
+				),
+				'--scroll-marker-remote-branches-color': getCssVariable(
+					'--color-graph-scroll-marker-remote-branches',
+					computedStyle,
+				),
+				'--scroll-marker-stashes-color': getCssVariable('--color-graph-scroll-marker-stashes', computedStyle),
+				'--scroll-marker-tags-color': getCssVariable('--color-graph-scroll-marker-tags', computedStyle),
+				'--scroll-marker-selection-color': getCssVariable(
+					'--color-graph-scroll-marker-selection',
+					computedStyle,
+				),
+
+				'--stats-added-color': getCssVariable('--color-graph-stats-added', computedStyle),
+				'--stats-deleted-color': getCssVariable('--color-graph-stats-deleted', computedStyle),
+				'--stats-files-color': getCssVariable('--color-graph-stats-files', computedStyle),
+				'--stats-bar-border-radius': getCssVariable('--graph-stats-bar-border-radius', computedStyle),
+				'--stats-bar-height': getCssVariable('--graph-stats-bar-height', computedStyle),
+
 				'--text-selected': getCssVariable('--color-graph-text-selected', computedStyle),
 				'--text-selected-row': getCssVariable('--color-graph-text-selected-row', computedStyle),
 				'--text-hovered': getCssVariable('--color-graph-text-hovered', computedStyle),

yarn.lock

@@ -202,10 +202,10 @@
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
   integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==
 
-"@gitkraken/gitkraken-components@10.1.3":
-  version "10.1.3"
-  resolved "https://registry.yarnpkg.com/@gitkraken/gitkraken-components/-/gitkraken-components-10.1.3.tgz#a6ae29f72d8f8f38c5e69e26328968e55db72b6e"
-  integrity sha512-49mqDvmBr6xCARAvj7EhwUOKy9ZKzUrzOnOqZzD848vrqrvZzWRIRlILE018p7pqw/K/V5pkIDZZI35uRb3i0A==
+"@gitkraken/gitkraken-components@10.1.5":
+  version "10.1.5"
+  resolved "https://registry.yarnpkg.com/@gitkraken/gitkraken-components/-/gitkraken-components-10.1.5.tgz#556e6a0bf3157fc98b3a18d068c95d4f120a1637"
+  integrity sha512-hmkpTWe9cEs/IfhpgkuvAkdwbzyRkaIQ0uwa5/m+WVSm0IS753H4l5/vG5LJ4B4KoqkKWCvHscCDtm0kc4cIfA==
   dependencies:
     "@axosoft/react-virtualized" "9.22.3-gitkraken.3"
     classnames "2.3.2"
@@ -214,7 +214,6 @@
     react-bootstrap "0.32.4"
     react-dom "16.8.4"
     react-dragula "1.1.17"
-    react-helmet "6.1.0"
 
 "@humanwhocodes/config-array@^0.11.10":
   version "0.11.10"
@@ -5997,21 +5996,6 @@ react-dragula@1.1.17:
     atoa "1.0.0"
     dragula "3.7.2"
 
-react-fast-compare@^3.1.1:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
-  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
-
-react-helmet@6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
-  integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
-  dependencies:
-    object-assign "^4.1.1"
-    prop-types "^15.7.2"
-    react-fast-compare "^3.1.1"
-    react-side-effect "^2.1.0"
-
 react-is@^16.13.1, react-is@^16.3.2:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -6041,11 +6025,6 @@ react-prop-types@^0.4.0:
   dependencies:
     warning "^3.0.0"
 
-react-side-effect@^2.1.0:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.2.tgz#dc6345b9e8f9906dc2eeb68700b615e0b4fe752a"
-  integrity sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==
-
 react-transition-group@^2.0.0, react-transition-group@^2.2.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"