Fix: Animated scrollbar renders black in NO_COLOR mode (#13188)

packages/cli/src/ui/themes/color-utils.test.ts

@@ -233,5 +233,26 @@ describe('Color Utils', () => {
     it('should return end color when factor is 1', () => {
       expect(interpolateColor('#ff0000', '#0000ff', 1)).toBe('#0000ff');
     });
+
+    it('should return start color when factor is < 0', () => {
+      expect(interpolateColor('#ff0000', '#0000ff', -0.5)).toBe('#ff0000');
+    });
+
+    it('should return end color when factor is > 1', () => {
+      expect(interpolateColor('#ff0000', '#0000ff', 1.5)).toBe('#0000ff');
+    });
+
+    it('should return valid color if one is empty but factor selects the valid one', () => {
+      expect(interpolateColor('', '#ffffff', 1)).toBe('#ffffff');
+      expect(interpolateColor('#ffffff', '', 0)).toBe('#ffffff');
+    });
+
+    it('should return empty string if either color is empty and factor does not select the valid one', () => {
+      expect(interpolateColor('', '#ffffff', 0.5)).toBe('');
+      expect(interpolateColor('#ffffff', '', 0.5)).toBe('');
+      expect(interpolateColor('', '', 0.5)).toBe('');
+      expect(interpolateColor('', '#ffffff', 0)).toBe('');
+      expect(interpolateColor('#ffffff', '', 1)).toBe('');
+    });
   });
 });

packages/cli/src/ui/themes/color-utils.ts

@@ -238,6 +238,15 @@ export function interpolateColor(
   color2: string,
   factor: number,
 ) {
+  if (factor <= 0 && color1) {
+    return color1;
+  }
+  if (factor >= 1 && color2) {
+    return color2;
+  }
+  if (!color1 || !color2) {
+    return '';
+  }
   const gradient = tinygradient(color1, color2);
   const color = gradient.rgbAt(factor);
   return color.toHexString();