Rename --trace-viewer-foreground where applicable

Previously, the --theia-menu-foreground CSS variable was replaced by
the variable --trace-viewer-foreground in an attempt to abstract the
CSS definition. This is incorrect and the variable should have been mapped
to --trace-viewer-menu-foreground instead. This commit corrects this error
(where --theia-menu-foreground was previously --theia-menu-foreground).

Relates to #977.

Signed-off-by: Hoang Thuan Pham <hoang.pham@calian.ca>

packages/react-components/style/output-components-style.css

@@ -333,7 +333,7 @@ canvas {
     z-index: 2;
     min-width: 170px;
     background: var(--trace-viewer-menu-background);
-    color: var(--trace-viewer-foreground);
+    color: var(--trace-viewer-menu-foreground);
     font-size: var(--trace-viewer-ui-font-size1);
     box-shadow: 0px 0px 12px var(--trace-viewer-widget-shadow);
     border: 1px solid var(--trace-viewer-menu-border);
@@ -368,7 +368,7 @@ canvas {
     overflow: scroll;
     z-index: 999 !important;
     background: var(--trace-viewer-menu-background);
-    color: var(--trace-viewer-foreground);
+    color: var(--trace-viewer-menu-foreground);
     font-size: var(--trace-viewer-ui-font-size1);
     box-shadow: 0px 0px 15px var(--trace-viewer-widget-shadow);
     border: 1px solid var(--trace-viewer-menu-border);

packages/react-components/style/react-contextify.css

@@ -68,7 +68,7 @@
     -ms-flex-align: center;
         align-items: center;
     white-space: nowrap;
-    color: var(--trace-viewer-foreground);
+    color: var(--trace-viewer-menu-foreground);
     position: relative;
   }
 
@@ -82,26 +82,26 @@
     background-color: var(--trace-viewer-menu-background);
   }
   .react-contexify__theme--dark .react-contexify__item__content {
-    color: var(--trace-viewer-foreground);
+    color: var(--trace-viewer-menu-foreground);
   }
 
   .react-contexify__theme--light {
     background-color: var(--trace-viewer-menu-background);
   }
   .react-contexify__theme--light .react-contexify__separator {
-    background-color: var(--trace-viewer-foreground);
+    background-color: var(--trace-viewer-menu-foreground);
   }
   .react-contexify__theme--light .react-contexify__submenu--is-open,
   .react-contexify__theme--light .react-contexify__submenu--is-open > .react-contexify__item__content {
-    color: var(--trace-viewer-foreground);
+    color: var(--trace-viewer-menu-foreground);
     background-color: var(--trace-viewer-menu-background);;
   }
   .react-contexify__theme--light .react-contexify__item:not(.react-contexify__item--disabled):hover > .react-contexify__item__content, .react-contexify__theme--light .react-contexify__item:not(.react-contexify__item--disabled):focus > .react-contexify__item__content {
     color: var(--trace-viewer-menu-selectionForeground);
     background-color: var(--trace-viewer-menu-selectionBackground);
   }
   .react-contexify__theme--light .react-contexify__item__content {
-    color: var(--trace-viewer-foreground);
+    color: var(--trace-viewer-menu-foreground);
   }
 
   @keyframes react-contexify__scaleIn {

theia-extensions/viewer-prototype/style/trace-viewer.css

@@ -15,7 +15,7 @@
     --trace-viewer-ui-font-family: var(--theia-ui-font-family);
     --trace-viewer-content-font-size: var(--theia-content-font-size);
     --trace-viewer-menu-background: var(--theia-menu-background);
-    --trace-viewer-foreground: var(--theia-menu-foreground);
+    --trace-viewer-menu-foreground: var(--theia-menu-foreground);
     --trace-viewer-menu-border: var(--theia-menu-border);
     --trace-viewer-private-menu-item-height: var(--theia-private-menu-item-height);
     --trace-viewer-menu-selectionBackground: var(--theia-menu-selectionBackground);