Refactor commit graph styling to use css variables (#17860)

- Use common variables for colors and font
- Alter graph color 5 to provide enough contrast on both themes

web_src/less/features/gitgraph.less

@@ -68,15 +68,15 @@
     align-items: center;
 
     .node-relation {
-      font-family: "Bitstream Vera Sans Mono", Courier, monospace;
+      font-family: var(--fonts-monospace);
     }
 
     .author {
-      color: #666666;
+      color: var(--color-text-light);
     }
 
     .time {
-      color: #999999;
+      color: var(--color-text-light-3);
       font-size: 80%;
     }
 
@@ -85,8 +85,8 @@
     }
 
     a em {
-      color: #bb0000;
+      color: var(--color-red);
-      border-bottom: 1px dotted #bbbbbb;
+      border-bottom: 1px dotted var(--color-secondary);
       text-decoration: none;
       font-style: normal;
     }
@@ -108,7 +108,7 @@
     width: 100%;
 
     li.highlight.hover {
-      background-color: rgba(0, 0, 0, .05);
+      background-color: var(--color-secondary-alpha-30);
     }
 
     .tags a.button {
@@ -146,13 +146,13 @@
 
   &.monochrome #rel-container {
     .flow-group {
-      stroke: grey;
+      stroke: var(--color-secondary-dark-5);
-      fill: grey;
+      fill: var(--color-secondary-dark-5);
     }
 
     .flow-group.highlight {
-      stroke: black;
+      stroke: var(--color-secondary-dark-12);
-      fill: black;
+      fill: var(--color-secondary-dark-12);
     }
   }
 
@@ -164,7 +164,7 @@
       }
 
       &.flow-color-16-2 {
-        stroke: hsl(356, 58%, 54%);
+        stroke: #ce4751;
         fill: #ce4751;
       }
 
@@ -179,8 +179,8 @@
       }
 
       &.flow-color-16-5 {
-        stroke: #3d27aa;
+        stroke: #7445e9;
-        fill: #3d27aa;
+        fill: #7445e9;
       }
 
       &.flow-color-16-6 {
@@ -261,8 +261,8 @@
       }
 
       &.flow-color-16-5 {
-        stroke: #4e33d1;
+        stroke: #8455f9;
-        fill: #4f35d1;
+        fill: #8455f9;
       }
 
       &.flow-color-16-6 {

web_src/less/themes/theme-arc-green.less

@@ -676,44 +676,6 @@ img[src$="/img/matrix.svg"] {
   filter: invert(80%);
 }
 
-#git-graph-container li .time {
-  color: #6a737d;
-}
-
-#git-graph-container.monochrome #rel-container .flow-group {
-  stroke: dimgrey;
-  fill: dimgrey;
-}
-
-#git-graph-container.monochrome #rel-container .flow-group.highlight {
-  stroke: darkgrey;
-  fill: darkgrey;
-}
-
-#git-graph-container:not(.monochrome) #rel-container .flow-group {
-  &.flow-color-16-5 {
-    stroke: #5543b1;
-    fill: #5543b1;
-  }
-}
-
-#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight {
-  &.flow-color-16-5 {
-    stroke: #7058e6;
-    fill: #7058e6;
-  }
-}
-
-#git-graph-container #rev-list li.highlight.hover {
-  background-color: rgba(255, 255, 255, .1);
-}
-
-#git-graph-container .ui.buttons button#flow-color-monochrome.ui.button {
-  border-left-color: rgb(76, 80, 92);
-  border-left-style: solid;
-  border-left-width: 1px;
-}
-
 .mermaid-chart {
   filter: invert(84%) hue-rotate(180deg);
 }