feat: refine colorings of SequenceDiagram view

especially for default theme

Author: starpit

plugins/plugin-client-common/web/scss/components/Table/SequenceDiagram/Bar.scss

@@ -53,16 +53,19 @@
 .kui--bar[data-overlay='1'] {
   background: repeating-linear-gradient(
     -55deg,
-    var(--color-latency-3),
-    var(--color-latency-0) 2px,
-    var(--color-latency-3) 2px,
-    var(--color-latency-3) 8px
+    var(--color-latency-2),
+    var(--color-latency-1) 2px,
+    var(--color-latency-2) 2px,
+    var(--color-latency-2) 8px
   );
   border: 1px solid var(--color-latency-0);
+  filter: grayscale(0.125) opacity(0.9);
 }
 .kui--bar[data-overlay='0'] {
-  opacity: 0.5;
-  background: var(--color-latency-1);
+  background: var(--color-latency-0);
+  top: 12.5%;
+  height: 75%;
+  filter: grayscale(0.25) opacity(0.25);
 }
 
 .kui--bar {

plugins/plugin-client-common/web/scss/components/Table/_mixins.scss

@@ -17,10 +17,10 @@
 $bgcolor: transparent;
 $border-radius: 2px 4px;
 
-$bar-height-small: 1em; /* e.g. 16px */
-$bar-height-medium: 0.6875em; /* e.g. 11px */
-$bar-height-large: 0.5625em; /* e.g. 9px */
-$bar-height-huge: 0.5em; /* e.g. 8px */
+$bar-height-small: 1rem; /* e.g. 16px */
+$bar-height-medium: 0.6875rem; /* e.g. 11px */
+$bar-height-large: 0.5625rem; /* e.g. 9px */
+$bar-height-huge: 0.5rem; /* e.g. 8px */
 
 $grid-cell-hover-filter: saturate(2) brightness(1.25);
 

plugins/plugin-patternfly4-themes/web/scss/charts.scss

@@ -23,12 +23,15 @@
   --color-latency-5: #ec7a08;
   --color-latency-6: #8b8d8f; */
 
-  --color-latency-0: #00441b;
-  --color-latency-1: #1b7837;
-  --color-latency-2: #a6dba0;
-  --color-latency-3: #9970ab;
-  --color-latency-4: #762a83;
-  --color-latency-5: #40004b;
+  /*--color-latency-0: #005F60;
+  --color-latency-1: #009596;
+  --color-latency-2: #A2D9D9;*/
+  --color-latency-0: #004b95;
+  --color-latency-1: #0066cc;
+  --color-latency-2: #8bc1f7;
+  --color-latency-3: #f4b678;
+  --color-latency-4: #ec7a08;
+  --color-latency-5: #c46100;
 }
 
 @mixin charts-dark {