Extract ansiHTML

Use base16-github theme

packages/react-dev-utils/ansiHTML.js

@@ -0,0 +1,37 @@
+var ansiHTML = require('ansi-html');
+// Color scheme inspired by https://chriskempson.github.io/base16/css/base16-github.css
+var base00 = 'ffffff'; // Default Background
+var base01 = 'f5f5f5'; // Lighter Background (Used for status bars)
+var base02 = 'c8c8fa'; // Selection Background
+var base03 = '969896'; // Comments, Invisibles, Line Highlighting
+var base04 = 'e8e8e8'; // Dark Foreground (Used for status bars)
+var base05 = '333333'; // Default Foreground, Caret, Delimiters, Operators
+var base06 = 'ffffff'; // Light Foreground (Not often used)
+var base07 = 'ffffff'; // Light Background (Not often used)
+var base08 = 'ed6a43'; // Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted
+var base09 = '0086b3'; // Integers, Boolean, Constants, XML Attributes, Markup Link Url
+var base0A = '795da3'; // Classes, Markup Bold, Search Text Background
+var base0B = '183691'; // Strings, Inherited Class, Markup Code, Diff Inserted
+var base0C = '183691'; // Support, Regular Expressions, Escape Characters, Markup Quotes
+var base0D = '795da3'; // Functions, Methods, Attribute IDs, Headings
+var base0E = 'a71d5d'; // Keywords, Storage, Selector, Markup Italic, Diff Changed
+var base0F = '333333'; // Deprecated, Opening/Closing Embedded Language Tags e.g. <?php ?>
+
+// Map ANSI colors from what babel-code-frame uses to base16-github
+// See: https://github.com/babel/babel/blob/e86f62b304d280d0bab52c38d61842b853848ba6/packages/babel-code-frame/src/index.js#L9-L22
+var colors = {
+  reset: [base05, 'transparent'],
+  black: base05,
+  red: base08, /* marker, bg-invalid */
+  green: base0B, /* string */
+  yellow: base08, /* capitalized, jsx_tag, punctuator */
+  blue: base0C,
+  magenta: base0C, /* regex */
+  cyan: base0E, /* keyword */
+  gray: base03, /* comment, gutter */
+  lightgrey: base01,
+  darkgrey: base03
+};
+ansiHTML.setColors(colors);
+
+module.exports = ansiHTML;

packages/react-dev-utils/webpackHotDevClient.js

@@ -16,29 +16,14 @@
 // that looks similar to our console output. The error overlay is inspired by:
 // https://github.com/glenjamin/webpack-hot-middleware
 
-var ansiHTML = require('ansi-html');
 var SockJS = require('sockjs-client');
 var stripAnsi = require('strip-ansi');
 var url = require('url');
 var formatWebpackMessages = require('./formatWebpackMessages');
 var Entities = require('html-entities').AllHtmlEntities;
+var ansiHTML = require('./ansiHTML');
 var entities = new Entities();
 
-// Color scheme inspired by https://github.com/glenjamin/webpack-hot-middleware
-var colors = {
-  reset: ['transparent', 'transparent'],
-  black: '181818',
-  red: 'E36049',
-  green: 'B3CB74',
-  yellow: 'FFD080',
-  blue: '7CAFC2',
-  magenta: '7FACCA',
-  cyan: 'C3C2EF',
-  lightgrey: 'EBE7E3',
-  darkgrey: '6D7891'
-};
-ansiHTML.setColors(colors);
-
 function createOverlayIframe(onIframeLoad) {
   var iframe = document.createElement('iframe');
   iframe.id = 'react-dev-utils-webpack-hot-dev-client-overlay';
@@ -67,8 +52,8 @@ function addOverlayDivTo(iframe) {
   div.style.bottom = 0;
   div.style.width = '100vw';
   div.style.height = '100vh';
-  div.style.backgroundColor = 'black';
-  div.style.color = '#E8E8E8';
+  div.style.backgroundColor = '#fff';
+  div.style.color = '#333';
   div.style.fontFamily = 'Menlo, Consolas, monospace';
   div.style.fontSize = 'large';
   div.style.padding = '2rem';
@@ -116,9 +101,7 @@ function showErrorOverlay(message) {
   ensureOverlayDivExists(function onOverlayDivReady(overlayDiv) {
     // Make it look similar to our terminal.
     overlayDiv.innerHTML =
-      '<span style="color: #' +
-      colors.red +
-      '">Failed to compile.</span><br><br>' +
+      '<span style="color: #E36049">Failed to compile.</span><br><br>' +
       ansiHTML(entities.encode(message));
   });
 }