Merge pull request #4920 from Tyriar/tyriar/bg_blend

Add bg+powerline background blend behavior

src/common/Color.test.ts

@@ -271,6 +271,27 @@ describe('Color', () => {
   });
 
   describe('rgba', () => {
+    describe('blend', () => {
+      it('should blend colors based on the alpha channel', () => {
+        assert.deepEqual(rgba.blend(0x000000FF, 0xFFFFFF00), 0x000000FF);
+        assert.deepEqual(rgba.blend(0x000000FF, 0xFFFFFF10), 0x101010FF);
+        assert.deepEqual(rgba.blend(0x000000FF, 0xFFFFFF20), 0x202020FF);
+        assert.deepEqual(rgba.blend(0x000000FF, 0xFFFFFF30), 0x303030FF);
+        assert.deepEqual(rgba.blend(0x000000FF, 0xFFFFFF40), 0x404040FF);
+        assert.deepEqual(rgba.blend(0x000000FF, 0xFFFFFF50), 0x505050FF);
+        assert.deepEqual(rgba.blend(0x000000FF, 0xFFFFFF60), 0x606060FF);
+        assert.deepEqual(rgba.blend(0x000000FF, 0xFFFFFF70), 0x707070FF);
+        assert.deepEqual(rgba.blend(0x000000FF, 0xFFFFFF80), 0x808080FF);
+        assert.deepEqual(rgba.blend(0x000000FF, 0xFFFFFF90), 0x909090FF);
+        assert.deepEqual(rgba.blend(0x000000FF, 0xFFFFFFA0), 0xA0A0A0FF);
+        assert.deepEqual(rgba.blend(0x000000FF, 0xFFFFFFB0), 0xB0B0B0FF);
+        assert.deepEqual(rgba.blend(0x000000FF, 0xFFFFFFC0), 0xC0C0C0FF);
+        assert.deepEqual(rgba.blend(0x000000FF, 0xFFFFFFD0), 0xD0D0D0FF);
+        assert.deepEqual(rgba.blend(0x000000FF, 0xFFFFFFE0), 0xE0E0E0FF);
+        assert.deepEqual(rgba.blend(0x000000FF, 0xFFFFFFF0), 0xF0F0F0FF);
+        assert.deepEqual(rgba.blend(0x000000FF, 0xFFFFFFFF), 0xFFFFFFFF);
+      });
+    });
     describe('ensureContrastRatio', () => {
       it('should return undefined if the color already meets the contrast ratio (black bg)', () => {
         assert.equal(rgba.ensureContrastRatio(0x000000ff, 0x606060ff, 1), undefined);

src/common/Color.ts

@@ -245,6 +245,23 @@ export namespace rgb {
  * Helper functions where the source type is "rgba" (number: 0xrrggbbaa).
  */
 export namespace rgba {
+  export function blend(bg: number, fg: number): number {
+    $a = (fg & 0xFF) / 0xFF;
+    if ($a === 1) {
+      return fg;
+    }
+    const fgR = (fg >> 24) & 0xFF;
+    const fgG = (fg >> 16) & 0xFF;
+    const fgB = (fg >> 8) & 0xFF;
+    const bgR = (bg >> 24) & 0xFF;
+    const bgG = (bg >> 16) & 0xFF;
+    const bgB = (bg >> 8) & 0xFF;
+    $r = bgR + Math.round((fgR - bgR) * $a);
+    $g = bgG + Math.round((fgG - bgG) * $a);
+    $b = bgB + Math.round((fgB - bgB) * $a);
+    return channels.toRgba($r, $g, $b);
+  }
+
   /**
    * Given a foreground color and a background color, either increase or reduce the luminance of the
    * foreground color until the specified contrast ratio is met. If pure white or black is hit