Use core lab caret icon for the tree view

src/variables/tree.tsx

@@ -1,14 +1,16 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { ArrayExt } from '@lumino/algorithm';
+import { ReactWidget } from '@jupyterlab/apputils';
 
-import { convertType } from '.';
+import { caretDownEmptyIcon } from '@jupyterlab/ui-components';
 
-import { ReactWidget } from '@jupyterlab/apputils';
+import { ArrayExt } from '@lumino/algorithm';
 
 import React, { useEffect, useState } from 'react';
 
+import { convertType } from '.';
+
 import { IDebugger } from '../tokens';
 
 import { VariablesModel } from './model';
@@ -133,10 +135,6 @@ const VariableComponent = ({
   const [variable] = useState(data);
   const [expanded, setExpanded] = useState(null);
   const [details, setDetails] = useState(null);
-  const stylesCaret = {
-    transform: `rotate(90deg)`
-  };
-
   const styleName = {
     color: 'var(--jp-mirror-editor-attribute-color)'
   };
@@ -163,9 +161,11 @@ const VariableComponent = ({
   return (
     <li onClick={e => onVariableClicked(e)}>
       {expandable && (
-        <span className="caret" style={expanded ? stylesCaret : {}}>
-          ▶
-        </span>
+        <caretDownEmptyIcon.react
+          stylesheet="menuItem"
+          tag="span"
+          transform={expanded ? 'rotate(0deg)' : 'rotate(-90deg)'}
+        />
       )}
       <span style={styleName}>{variable.name}</span>
       <span>: </span>

style/variables.css

@@ -15,19 +15,11 @@
 }
 
 .jp-DebuggerVariables-body ul li {
-  padding: 5px;
+  padding: 5px 0 5px 0;
   cursor: pointer;
   color: var(--jp-content-font-color1);
 }
 
-.jp-DebuggerVariables-body ul li .caret {
-  display: inline-block;
-  color: var(--jp-content-font-color2);
-  font-size: 12px;
-  margin-right: 3px;
-  user-select: none;
-}
-
 .jp-DebuggerVariables header .jp-Toolbar {
   margin-left: auto;
 }