feat(console): Add gray ANSI color and use it for silly levels (#472)

* feat(core): Add `gray` ANSI color

* feat(console): Use `gray` style for `verbose`+`debug`+`silly` levels

* feat(console): Add log.transports.console.colorMap option

---------

Co-authored-by: Alexey Prokhorov <[email protected]>

Author: thomasbachem

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 5.4.2
+
+- [#472](https://github.com/megahertz/electron-log/pull/472) Add the gray color
+  and `log.transports.console.colorMap` option.
+
 ## 5.4.0
 
 - [#465](https://github.com/megahertz/electron-log/issues/465) Allow using `%c` 

README.md

@@ -196,6 +196,7 @@ Available colors:
  - magenta
  - cyan
  - white
+ - gray
 
 For DevTools console you can use other CSS properties.
 

docs/transports/console.md

@@ -4,6 +4,23 @@ Displays a log message in the console
 
 ## Options
 
+#### `colorMap` {Record<LogLevel, string>}
+
+Default:
+```
+{
+  error: 'red', 
+  warn: 'yellow',
+  info: 'cyan',
+  verbose: 'unset',
+  debug: 'gray',
+  silly: 'gray',
+  default: 'unset',
+}
+```
+
+A map of log levels to colors.
+
 #### `format` {string | (message: LogMessage) => void}
 
 Default: `'[{y}-{m}-{d} {h}:{i}:{s}.{ms}] [{level}] {text}'`

src/core/transforms/style.js

@@ -22,6 +22,7 @@ const ANSI_COLORS = {
   magenta: '\x1b[35m',
   cyan: '\x1b[36m',
   white: '\x1b[37m',
+  gray: '\x1b[90m',
 };
 
 function styleToAnsi(style) {

src/index.d.ts

@@ -82,6 +82,11 @@ declare namespace Logger {
   }
 
   interface ConsoleTransport extends Transport {
+    /**
+     * A mapping of log levels to their corresponding color name
+     */
+    colorMap: Record<LogLevel, string>;
+
     /**
      * String template of function for message serialization
      */

src/node/transports/console.js

@@ -34,6 +34,15 @@ Object.assign(consoleTransportFactory, {
 
 function consoleTransportFactory(logger) {
   return Object.assign(transport, {
+    colorMap: {
+      error: 'red',
+      warn: 'yellow',
+      info: 'cyan',
+      verbose: 'unset',
+      debug: 'gray',
+      silly: 'gray',
+      default: 'unset',
+    },
     format: DEFAULT_FORMAT,
     level: 'silly',
     transforms: [
@@ -68,7 +77,11 @@ function addTemplateColors({ data, message, transport }) {
     return data;
   }
 
-  return [`color:${levelToStyle(message.level)}`, 'color:unset', ...data];
+  return [
+    `color:${levelToStyle(message.level, transport)}`,
+    'color:unset',
+    ...data,
+  ];
 }
 
 function canUseStyles(useStyleValue, level) {
@@ -88,7 +101,6 @@ function formatStyles(args) {
   return nextTransform(args);
 }
 
-function levelToStyle(level) {
-  const map = { error: 'red', warn: 'yellow', info: 'cyan', default: 'unset' };
-  return map[level] || map.default;
+function levelToStyle(level, transport) {
+  return transport.colorMap[level] || transport.colorMap.default;
 }