From 4b54b61c35166ce13cd26863f45655be8a611d3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Fri, 5 Apr 2024 09:35:03 -0500 Subject: [PATCH] feat: gradient interpolation --- src/app/tools/compare/page.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/app/tools/compare/page.tsx b/src/app/tools/compare/page.tsx index 190b7191f..49897d799 100644 --- a/src/app/tools/compare/page.tsx +++ b/src/app/tools/compare/page.tsx @@ -137,7 +137,8 @@ export default function Page() { {values.map((value, index) => { const deltaPercentage = (value ?? 1) / (values[0] ?? 1) - 1; - const significantChange = Math.abs(deltaPercentage) >= 0.15; + const normalizedDeltaPercentage = + Math.abs(deltaPercentage) * 100 + 25; return ( values[0] : value < values[0] ) - ? significantChange - ? theme.colors.componentInteractiveActive_green - : theme.colors.componentInteractive_green - : significantChange - ? theme.colors.componentInteractiveActive_red - : theme.colors.componentInteractive_red, + ? `color-mix(in srgb, ${theme.colors.componentInteractiveActive_green} ${normalizedDeltaPercentage}%, ${theme.colors.componentInteractiveActive_green}00)` + : `color-mix(in srgb, ${theme.colors.componentInteractiveActive_red} ${normalizedDeltaPercentage}%, ${theme.colors.componentInteractiveActive_red}00)`, }} >