Feature/tint the whole changed figure instead of coloring its digits

apps/client/src/styles.scss

@@ -503,28 +503,42 @@ ngx-skeleton-loader {
   }
 }
 
-// Highlight of a changed value: the number briefly takes the colour of the
+// Highlight of a changed value: the whole figure (sign, number and unit) gets
-// change (green up, red down) and fades back to its normal colour
+// a soft background tint in the direction of the change, which fades out. The
+// text colors stay untouched, so the persistent colors of the sign (positive
+// / negative) and the temporary highlight (value just changed) never mix up
 @keyframes gf-flash-up {
-  0%,
+  from {
-  35% {
+    background-color: color-mix(
-    color: var(--bs-success, #198754);
+      in srgb,
+      var(--bs-success, #198754) 30%,
+      transparent
+    );
   }
 }
 
 @keyframes gf-flash-down {
-  0%,
+  from {
-  35% {
+    background-color: color-mix(
-    color: var(--bs-danger, #dc3545);
+      in srgb,
+      var(--bs-danger, #dc3545) 30%,
+      transparent
+    );
   }
 }
 
+.gf-flash-up,
+.gf-flash-down {
+  border-radius: 0.25rem;
+  box-shadow: 0 0 0 0.125rem transparent;
+}
+
 .gf-flash-up {
-  animation: gf-flash-up 1.8s ease-out;
+  animation: gf-flash-up 1.2s ease-out;
 }
 
 .gf-flash-down {
-  animation: gf-flash-down 1.8s ease-out;
+  animation: gf-flash-down 1.2s ease-out;
 }
 
 @media (prefers-reduced-motion: reduce) {

libs/ui/src/lib/value/value.component.html

@@ -42,6 +42,7 @@
       [class.justify-content-end]="position === 'end'"
     >
       @if (isNumber || value === null) {
+        <div class="align-items-center d-flex gf-value-line">
           @if (colorizeSign && !useAbsoluteValue && value !== null) {
             @if (+value > 0) {
               <div class="me-1 text-success">+</div>
@@ -67,6 +68,7 @@
               {{ isPercent ? '%' : unit }}
             </div>
           }
+        </div>
       }
       @if (isString) {
         <div

libs/ui/src/lib/value/value.component.ts

@@ -120,9 +120,11 @@ export class GfValueComponent implements AfterViewInit, OnChanges, OnDestroy {
       return;
     }
 
-    // Highlight the number only, not the whole (full width) host element
+    // Highlight the whole figure (sign, number and unit) but not the full width host element
     const element =
-      this.elementRef.nativeElement.querySelector<HTMLElement>('.value');
+      this.elementRef.nativeElement.querySelector<HTMLElement>(
+        '.gf-value-line'
+      );
 
     if (!element) {
       return;