Use jupyterlab css variables for the selected suggestions (#733)

* Use jupyterlab css variables for the selected suggestions.

* Add relevant css rules for the icons of the toolbar of the selection elements of the suggestion panel.

* Add a css rule for the text color of the anonymous user name. Add missing line breaks in base.css.

Author: HaudinFlorence

packages/base/src/tools.ts

@@ -35,6 +35,7 @@ export const visibilityIcon = new LabIcon({
   name: 'jupytercad:visibilityIcon',
   svgstr: visibilitySvg
 });
+
 export const visibilityOffIcon = new LabIcon({
   name: 'jupytercad:visibilityOffIcon',
   svgstr: visibilityOffSvg

packages/base/style/icon/visibility.svg

@@ -199,6 +199,7 @@ div.jpcad-toolbar-widget > div.jp-Toolbar-item:last-child {
   display: flex;
   flex-direction: row-reverse;
 }
+
 .jpcad-toolbar-react-widget {
   display: flex;
   flex-direction: row;
@@ -398,10 +399,12 @@ div.jpcad-toolbar-widget > div.jp-Toolbar-item:last-child {
 .highlight {
   background-color: var(--jp-layout-color2) !important;
 }
+
 .jupytercad-notebook-widget {
   height: 600px;
   width: 100%;
 }
+
 .jupytercad-notebook-widget > div {
   height: 100%;
   width: 100%;
@@ -439,8 +442,14 @@ div.jpcad-toolbar-widget > div.jp-Toolbar-item:last-child {
 }
 
 .jpcad-control-panel-suggestion.selected {
-  background-color: rgba(0, 122, 255, 0.23);
+  color: var(--jp-ui-inverse-font-color1);
+  background: var(--jp-brand-color1);
 }
+
+.jpcad-control-panel-suggestion.selected .jp-icon-selectable[fill] {
+  fill: #fff;
+}
+
 .jcad-suggestion-tree-node-icon {
   display: flex;
   flex-direction: column;
@@ -459,18 +468,22 @@ div.jpcad-toolbar-widget > div.jp-Toolbar-item:last-child {
   vertical-align: middle;
   border-radius: 100%;
 }
+
 .jcad-suggestion-tree-node-user span {
   width: 20px;
   text-align: center;
   font-size: 12px;
+  color: var(--jp-ui-font-color1);
 }
+
 span.jcad-suggestion-tree-node-label {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow-x: hidden;
   flex-grow: 1;
   padding-left: 5px;
 }
+
 .jpcad-SplitSlider {
   position: absolute;
   cursor: ew-resize;
@@ -489,6 +502,7 @@ span.jcad-suggestion-tree-node-label {
 body[data-jp-theme-light='false'] {
   --jcad-splitview-background: #120b07;
 }
+
 body[data-jp-theme-light='true'] {
   --jcad-splitview-background: #edf4f8;
 }