Allow theming with arbitrary CSS color strings

This mostly worked before, but clearColor made the assumption that the
colors were always in #RRBBGG format. See the discussion here:
https://github.com/xtermjs/xterm.js/pull/1327#issuecomment-374812842

This changes the internal representation of a color so that we hold onto
into an object containing the original css string along with an RGBA
value encoded as a 32-bit uint. clearColor can then use that RGBA
representation.

Additionally, this deduplicates some code between ColorManager and
Terminal. Terminal was generating the 256 ansi colors the same way
ColorManager was, so this just makes Terminal use the same constant.

src/shared/Types.ts

@@ -3,11 +3,16 @@
  * @license MIT
  */
 
-export interface IColorSet {
-  foreground: string;
-  background: string;
-  cursor: string;
-  cursorAccent: string;
-  selection: string;
-  ansi: string[];
+export interface IColor {
+  css: string;
+  rgba: number; // 32-bit int with rgba in each byte
+}
+
+export interface IColorSet {
+  foreground: IColor;
+  background: IColor;
+  cursor: IColor;
+  cursorAccent: IColor;
+  selection: IColor;
+  ansi: IColor[];
 }

src/shared/atlas/CharAtlasGenerator.ts

@@ -31,11 +31,11 @@ export function generateCharAtlas(context: Window, canvasFactory: (width: number
   );
   const ctx = canvas.getContext('2d', {alpha: config.allowTransparency});
 
-  ctx.fillStyle = config.colors.background;
+  ctx.fillStyle = config.colors.background.css;
   ctx.fillRect(0, 0, canvas.width, canvas.height);
 
   ctx.save();
-  ctx.fillStyle = config.colors.foreground;
+  ctx.fillStyle = config.colors.foreground.css;
   ctx.font = getFont(config.fontWeight, config);
   ctx.textBaseline = 'top';
 
@@ -75,7 +75,7 @@ export function generateCharAtlas(context: Window, canvasFactory: (width: number
       ctx.beginPath();
       ctx.rect(i * cellWidth, y, cellWidth, cellHeight);
       ctx.clip();
-      ctx.fillStyle = config.colors.ansi[colorIndex];
+      ctx.fillStyle = config.colors.ansi[colorIndex].css;
       ctx.fillText(String.fromCharCode(i), i * cellWidth, y);
       ctx.restore();
     }
@@ -100,9 +100,9 @@ export function generateCharAtlas(context: Window, canvasFactory: (width: number
   const charAtlasImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
 
   // Remove the background color from the image so characters may overlap
-  const r = parseInt(config.colors.background.substr(1, 2), 16);
-  const g = parseInt(config.colors.background.substr(3, 2), 16);
-  const b = parseInt(config.colors.background.substr(5, 2), 16);
+  const r = config.colors.background.rgba >>> 24;
+  const g = config.colors.background.rgba >>> 16 & 0xFF;
+  const b = config.colors.background.rgba >>> 8 & 0xFF;
   clearColor(charAtlasImageData, r, g, b);
 
   return context.createImageBitmap(charAtlasImageData);