Float Alpha

src/vs/base/common/color.ts

@@ -29,15 +29,15 @@ export class RGBA {
 	readonly b: number;
 
 	/**
-	 * Alpha: integer in [0-255]
+	 * Alpha: float in [0-1]
 	 */
 	readonly a: number;
 
-	constructor(r: number, g: number, b: number, a: number = 255) {
+	constructor(r: number, g: number, b: number, a: number = 1) {
 		this.r = Math.min(255, Math.max(0, r)) | 0;
 		this.g = Math.min(255, Math.max(0, g)) | 0;
 		this.b = Math.min(255, Math.max(0, b)) | 0;
-		this.a = Math.min(255, Math.max(0, a)) | 0;
+		this.a = roundFloat(Math.max(Math.min(1, a), 0), 3);
 	}
 
 	static equals(a: RGBA, b: RGBA): boolean {
@@ -90,7 +90,7 @@ export class HSLA {
 		const r = rgba.r / 255;
 		const g = rgba.g / 255;
 		const b = rgba.b / 255;
-		const a = rgba.a / 255;
+		const a = rgba.a;
 
 		const max = Math.max(r, g, b);
 		const min = Math.min(r, g, b);
@@ -154,7 +154,7 @@ export class HSLA {
 			b = HSLA._hue2rgb(p, q, h - 1 / 3);
 		}
 
-		return new RGBA(Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), Math.round(a * 255));
+		return new RGBA(Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), a);
 	}
 }
 
@@ -214,7 +214,7 @@ export class HSVA {
 			m = ((r - g) / delta) + 4;
 		}
 
-		return new HSVA(m * 60, s, cmax, rgba.a / 255);
+		return new HSVA(m * 60, s, cmax, rgba.a);
 	}
 
 	// from http://www.rapidtables.com/convert/color/hsv-to-rgb.htm
@@ -249,7 +249,7 @@ export class HSVA {
 		g = Math.round((g + m) * 255);
 		b = Math.round((b + m) * 255);
 
-		return new RGBA(r, g, b, Math.round(a * 255));
+		return new RGBA(r, g, b, a);
 	}
 }
 
@@ -349,7 +349,7 @@ export class Color {
 
 	transparent(factor: number): Color {
 		const { r, g, b, a } = this.rgba;
-		return new Color(new RGBA(r, g, b, Math.round(a * factor)));
+		return new Color(new RGBA(r, g, b, a * factor));
 	}
 
 	isTransparent(): boolean {
@@ -357,7 +357,7 @@ export class Color {
 	}
 
 	isOpaque(): boolean {
-		return this.rgba.a === 255;
+		return this.rgba.a === 1;
 	}
 
 	opposite(): Color {
@@ -368,8 +368,8 @@ export class Color {
 		const rgba = c.rgba;
 
 		// Convert to 0..1 opacity
-		const thisA = this.rgba.a / 255;
-		const colorA = rgba.a / 255;
+		const thisA = this.rgba.a;
+		const colorA = rgba.a;
 
 		let a = thisA + colorA * (1 - thisA);
 		if (a < 1.0e-6) {
@@ -379,7 +379,6 @@ export class Color {
 		const r = this.rgba.r * thisA / a + rgba.r * colorA * (1 - thisA) / a;
 		const g = this.rgba.g * thisA / a + rgba.g * colorA * (1 - thisA) / a;
 		const b = this.rgba.b * thisA / a + rgba.b * colorA * (1 - thisA) / a;
-		a *= 255;
 
 		return new Color(new RGBA(r, g, b, a));
 	}
@@ -410,13 +409,13 @@ export class Color {
 		return of.darken(factor);
 	}
 
-	static readonly white = new Color(new RGBA(255, 255, 255, 255));
-	static readonly black = new Color(new RGBA(0, 0, 0, 255));
-	static readonly red = new Color(new RGBA(255, 0, 0, 255));
-	static readonly blue = new Color(new RGBA(0, 0, 255, 255));
-	static readonly green = new Color(new RGBA(0, 255, 0, 255));
-	static readonly cyan = new Color(new RGBA(0, 255, 255, 255));
-	static readonly lightgrey = new Color(new RGBA(211, 211, 211, 255));
+	static readonly white = new Color(new RGBA(255, 255, 255, 1));
+	static readonly black = new Color(new RGBA(0, 0, 0, 1));
+	static readonly red = new Color(new RGBA(255, 0, 0, 1));
+	static readonly blue = new Color(new RGBA(0, 0, 255, 1));
+	static readonly green = new Color(new RGBA(0, 255, 0, 1));
+	static readonly cyan = new Color(new RGBA(0, 255, 255, 1));
+	static readonly lightgrey = new Color(new RGBA(211, 211, 211, 1));
 	static readonly transparent = new Color(new RGBA(0, 0, 0, 0));
 }
 
@@ -425,7 +424,7 @@ export namespace Color {
 		export namespace CSS {
 
 			export function formatRGB(color: Color): string {
-				if (color.rgba.a === 255) {
+				if (color.rgba.a === 1) {
 					return `rgb(${color.rgba.r}, ${color.rgba.g}, ${color.rgba.b})`;
 				}
 
@@ -433,7 +432,7 @@ export namespace Color {
 			}
 
 			export function formatRGBA(color: Color): string {
-				return `rgba(${color.rgba.r}, ${color.rgba.g}, ${color.rgba.b}, ${+(color.rgba.a / 255).toFixed(2)})`;
+				return `rgba(${color.rgba.r}, ${color.rgba.g}, ${color.rgba.b}, ${+(color.rgba.a).toFixed(2)})`;
 			}
 
 			export function formatHSL(color: Color): string {
@@ -465,11 +464,11 @@ export namespace Color {
 			 * If 'compact' is set, colors without transparancy will be printed as #RRGGBB
 			 */
 			export function formatHexA(color: Color, compact = false): string {
-				if (compact && color.rgba.a === 0xFF) {
+				if (compact && color.rgba.a === 1) {
 					return Color.Format.CSS.formatHex(color);
 				}
 
-				return `#${_toTwoDigitHex(color.rgba.r)}${_toTwoDigitHex(color.rgba.g)}${_toTwoDigitHex(color.rgba.b)}${_toTwoDigitHex(color.rgba.a)}`;
+				return `#${_toTwoDigitHex(color.rgba.r)}${_toTwoDigitHex(color.rgba.g)}${_toTwoDigitHex(color.rgba.b)}${_toTwoDigitHex(Math.round(color.rgba.a * 255))}`;
 			}
 
 			/**
@@ -515,7 +514,7 @@ export namespace Color {
 					const r = 16 * _parseHexDigit(hex.charCodeAt(1)) + _parseHexDigit(hex.charCodeAt(2));
 					const g = 16 * _parseHexDigit(hex.charCodeAt(3)) + _parseHexDigit(hex.charCodeAt(4));
 					const b = 16 * _parseHexDigit(hex.charCodeAt(5)) + _parseHexDigit(hex.charCodeAt(6));
-					return new Color(new RGBA(r, g, b, 255));
+					return new Color(new RGBA(r, g, b, 1));
 				}
 
 				if (length === 9) {
@@ -524,7 +523,7 @@ export namespace Color {
 					const g = 16 * _parseHexDigit(hex.charCodeAt(3)) + _parseHexDigit(hex.charCodeAt(4));
 					const b = 16 * _parseHexDigit(hex.charCodeAt(5)) + _parseHexDigit(hex.charCodeAt(6));
 					const a = 16 * _parseHexDigit(hex.charCodeAt(7)) + _parseHexDigit(hex.charCodeAt(8));
-					return new Color(new RGBA(r, g, b, a));
+					return new Color(new RGBA(r, g, b, a / 255));
 				}
 
 				if (length === 4) {
@@ -541,7 +540,7 @@ export namespace Color {
 					const g = _parseHexDigit(hex.charCodeAt(2));
 					const b = _parseHexDigit(hex.charCodeAt(3));
 					const a = _parseHexDigit(hex.charCodeAt(4));
-					return new Color(new RGBA(16 * r + r, 16 * g + g, 16 * b + b, 16 * a + a));
+					return new Color(new RGBA(16 * r + r, 16 * g + g, 16 * b + b, (16 * a + a) / 255));
 				}
 
 				// Invalid color

src/vs/editor/common/view/minimapCharRenderer.ts

@@ -43,7 +43,7 @@ export class MinimapTokensColorTracker {
 		for (let colorId = 1; colorId < colorMap.length; colorId++) {
 			const source = colorMap[colorId].rgba;
 			// Use a VM friendly data-type
-			this._colors[colorId] = new RGBA8(source.r, source.g, source.b, source.a);
+			this._colors[colorId] = new RGBA8(source.r, source.g, source.b, Math.round(source.a * 255));
 		}
 		let backgroundLuminosity = colorMap[ColorId.DefaultBackground].getRelativeLuminance();
 		this._backgroundIsLight = (backgroundLuminosity >= 0.5);

src/vs/editor/contrib/colorPicker/browser/colorPickerWidget.ts

@@ -47,7 +47,7 @@ export class ColorPickerHeader extends Disposable {
 
 	private onDidChangeColor(color: Color): void {
 		this.pickedColorNode.style.backgroundColor = Color.Format.CSS.format(color);
-		dom.toggleClass(this.pickedColorNode, 'light', color.rgba.a < 128 ? this.backgroundColor.isLighter() : color.isLighter());
+		dom.toggleClass(this.pickedColorNode, 'light', color.rgba.a < 0.5 ? this.backgroundColor.isLighter() : color.isLighter());
 		this.onDidChangeFormatter();
 	}
 
@@ -277,7 +277,7 @@ class OpacityStrip extends Strip {
 
 	private onDidChangeColor(color: Color): void {
 		const { r, g, b } = color.rgba;
-		const opaque = new Color(new RGBA(r, g, b, 255));
+		const opaque = new Color(new RGBA(r, g, b, 1));
 		const transparent = new Color(new RGBA(r, g, b, 0));
 
 		this.overlay.style.background = `linear-gradient(to bottom, ${opaque} 0%, ${transparent} 100%)`;

src/vs/editor/contrib/colorPicker/common/colorFormatter.ts

@@ -32,7 +32,7 @@ function getPropertyValue(color: Color, variable: string): number | undefined {
 		case 'blue':
 			return color.rgba.b / 255;
 		case 'alpha':
-			return color.rgba.a / 255;
+			return color.rgba.a;
 		case 'hue':
 			return color.hsla.h / 360;
 		case 'saturation':

src/vs/editor/contrib/colorPicker/test/common/colorFormatter.test.ts

@@ -55,12 +55,12 @@ suite('ColorFormatter', () => {
 		assert.equal(rgb.format(color), 'rgb(255, 127, 0)');
 
 		const rgba = new ColorFormatter('rgba({red:d[0-255]}, {green:d[0-255]}, {blue:d[0-255]}, {alpha})');
-		assert.equal(rgba.format(color), 'rgba(255, 127, 0, 1)');
+		assert.equal(rgba.format(color), 'rgba(255, 127, 0, 0)');
 
 		const hex = new ColorFormatter('#{red:X}{green:X}{blue:X}');
 		assert.equal(hex.format(color), '#FF7F00');
 
 		const hsla = new ColorFormatter('hsla({hue:d[0-360]}, {saturation:d[0-100]}%, {luminance:d[0-100]}%, {alpha})');
-		assert.equal(hsla.format(color), 'hsla(30, 100%, 50%, 1)');
+		assert.equal(hsla.format(color), 'hsla(30, 100%, 50%, 0)');
 	});
 });
\ No newline at end of file

src/vs/editor/contrib/hover/browser/modesContentHover.ts

@@ -338,7 +338,7 @@ export class ModesContentHoverWidget extends ContentHoverWidget {
 					});
 			} else {
 				const { red, green, blue, alpha } = msg.color;
-				const rgba = new RGBA(red * 255, green * 255, blue * 255, alpha * 255);
+				const rgba = new RGBA(red * 255, green * 255, blue * 255, alpha);
 				const color = new Color(rgba);
 
 				const formatters = [...msg.formatters];

src/vs/platform/theme/common/colorRegistry.ts

@@ -264,8 +264,8 @@ export const editorActiveLinkForeground = registerColor('editorLink.activeForegr
 /**
  * Diff Editor Colors
  */
-export const defaultInsertColor = new Color(new RGBA(155, 185, 85, 255 * 0.2));
-export const defaultRemoveColor = new Color(new RGBA(255, 0, 0, 255 * 0.2));
+export const defaultInsertColor = new Color(new RGBA(155, 185, 85, 0.2));
+export const defaultRemoveColor = new Color(new RGBA(255, 0, 0, 0.2));
 
 export const diffInserted = registerColor('diffEditor.insertedTextBackground', { dark: defaultInsertColor, light: defaultInsertColor, hc: null }, nls.localize('diffEditorInserted', 'Background color for text that got inserted.'));
 export const diffRemoved = registerColor('diffEditor.removedTextBackground', { dark: defaultRemoveColor, light: defaultRemoveColor, hc: null }, nls.localize('diffEditorRemoved', 'Background color for text that got removed.'));

src/vs/workbench/api/node/extHostTypes.ts

@@ -1029,14 +1029,14 @@ export class Color {
 
 	static fromHSLA(hue: number, saturation: number, luminance: number, alpha: number): Color {
 		const color = new BaseColor(new HSLA(hue, saturation, luminance, alpha)).rgba;
-		return new Color(color.r, color.g, color.b, color.a / 255);
+		return new Color(color.r, color.g, color.b, color.a);
 	}
 
 	static fromHex(hex: string): Color | null {
 		let baseColor = BaseColor.Format.CSS.parseHex(hex);
 		if (baseColor) {
 			const rgba = baseColor.rgba;
-			return new Color(rgba.r, rgba.g, rgba.b, rgba.a / 255);
+			return new Color(rgba.r, rgba.g, rgba.b, rgba.a);
 		}
 		return null;
 	}