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
-// change (green up, red down) and fades back to its normal colour
+// Highlight of a changed value: the whole figure (sign, number and unit) gets
+// 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%,
-  35% {
-    color: var(--bs-success, #198754);
+  from {
+    background-color: color-mix(
+      in srgb,
+      var(--bs-success, #198754) 30%,
+      transparent
+    );
   }
 }
 
 @keyframes gf-flash-down {
-  0%,
-  35% {
-    color: var(--bs-danger, #dc3545);
+  from {
+    background-color: color-mix(
+      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,31 +42,33 @@
       [class.justify-content-end]="position === 'end'"
     >
       @if (isNumber || value === null) {
-        @if (colorizeSign && !useAbsoluteValue && value !== null) {
-          @if (+value > 0) {
-            <div class="me-1 text-success">+</div>
+        <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>
+            }
+            @if (+value < 0) {
+              <div class="me-1 text-danger">-</div>
+            }
           }
-          @if (+value < 0) {
-            <div class="me-1 text-danger">-</div>
-          }
-        }
-        <div
-          class="mb-0 value"
-          [class.fw-bold]="size === 'large'"
-          [class.h2]="size === 'large'"
-          [class.h4]="size === 'medium'"
-        >
-          @if (value === null) {
-            <span class="font-monospace text-body-secondary">*****</span>
-          } @else {
-            {{ formattedValue }}
+          <div
+            class="mb-0 value"
+            [class.fw-bold]="size === 'large'"
+            [class.h2]="size === 'large'"
+            [class.h4]="size === 'medium'"
+          >
+            @if (value === null) {
+              <span class="font-monospace text-body-secondary">*****</span>
+            } @else {
+              {{ formattedValue }}
+            }
+          </div>
+          @if (isPercent || unit) {
+            <div class="ms-1">
+              {{ isPercent ? '%' : unit }}
+            </div>
           }
         </div>
-        @if (isPercent || unit) {
-          <div class="ms-1">
-            {{ isPercent ? '%' : unit }}
-          </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;