镜像站点 · 本页由第三方 GitHub 只读镜像提供,非 GitHub 官方站点,不接受任何登录或凭据输入。前往 github.com
Skip to content

Support 256 colors - #481

Closed
Qix- wants to merge 2 commits into
debug-js:masterfrom
Qix-:256-colors
Closed

Qix- wants to merge 2 commits into
debug-js:masterfrom
Qix-:256-colors

Conversation

@Qix-

@Qix- Qix- commented Aug 8, 2017 •

Copy link
Copy Markdown
Member

Only having a select few colors gets old and can make certain namespace prefixes harder to read (especially when they have similar lengths and are the same color).

This PR enables 256 colors when both of the following are true:

  • supports-color is available
  • require('supports-color').level >= 2

Otherwise, the color level falls back to the current selection of basic colors.


To generate the list of colors, I selected all ANSI 256 colors that satisfy the following requirements:

  • HSV saturation of at least 70
  • HSV value of at least 80
  • The min of the contrast against both white and black is no less than 1.5

You can use the following script to experiment:

const Color = require('color');

const cols = [];
for (let i = 0; i < 256; i++) {
	const c = Color.ansi256(i);
	
	if (c.saturationv() < 70) {
		continue;
	}

	if (c.value() < 80) {
		continue;
	}

	const minContrast = Math.min(c.contrast(new Color('white')), c.contrast(new Color('black')));
	if (minContrast < 1.5) {
		continue;
	}

	console.error(`\x1b[48;5;${i}m    \x1b[m`, i, '\t', c.saturationv(), c.value(), c.contrast(new Color('white')), c.contrast(new Color('black')));
	cols.push(i);
}

console.log(cols.join(', '));

How I personally will be using this modification is to add supports-color to my dev dependencies since it's not required in production. Great for local development with no overhead in prod.

@coveralls

coveralls commented Aug 8, 2017 •

Copy link
Copy Markdown

Coverage Status

Coverage increased (+0.3%) to 64.072% when pulling 1269f1d on Qix-:256-colors into 659ac02 on visionmedia:master.

@coveralls

coveralls commented Aug 8, 2017 •

Copy link
Copy Markdown

Coverage Status

Coverage decreased (-0.1%) to 63.69% when pulling a8909c1 on Qix-:256-colors into 659ac02 on visionmedia:master.

@coveralls

coveralls commented Aug 8, 2017 •

Copy link
Copy Markdown

Coverage Status

Coverage decreased (-0.1%) to 63.69% when pulling 3297168 on Qix-:256-colors into 659ac02 on visionmedia:master.

@TooTallNate

Copy link
Copy Markdown
Contributor

This is awesome! A few comments:

  1. Needs Readme docs about the optional supports-color dep (it's lame because peerDependencies would output a warning upon npm i which we wouldn't want in this case, so meh we can't use that feature).
  2. The screenshots in the Readme are woefully outdated. This is especially true if/when we merge Use Date#toISOString() instead to Date#toUTCString() when output is n… #418. I'm not asking you to do it, but just something I want to keep in mind.
  3. It would be cool to generate the equivalent CSS colors for the browser implementation. We can basically always output 256 color mode since we can use arbitrary CSS colors in the browser.

@TooTallNate

Copy link
Copy Markdown
Contributor

For comparison, before:

screen shot 2017-08-08 at 9 47 45 am

After Qix-:256-colors:

screen shot 2017-08-08 at 9 46 53 am

@thebigredgeek

Copy link
Copy Markdown
Contributor

Love it! Let's get the build passing?

@Qix-

Qix- commented Aug 8, 2017 •

Copy link
Copy Markdown
Member Author

@thebigredgeek https://travis-ci.org/visionmedia/debug/jobs/262103770 <- re-run that test :) You have coveralls as a part of the pass/fail steps, and coveralls likes to fail from time to time, randomly. If you re-run it, it should pass.

Unless coverage going down makes tests fail. In which case, a 0.1% decrease is a bit harsh to cause a failure, no? O.o

@TooTallNate can do :)

TooTallNate pushed a commit that referenced this pull request Aug 8, 2017
@Qix-

Qix- commented Aug 8, 2017

Copy link
Copy Markdown
Member Author

@TooTallNate I updated the colors to be color bounded so they look better on white backgrounds.

@coveralls

coveralls commented Aug 8, 2017 •

Copy link
Copy Markdown

Coverage Status

Coverage decreased (-0.1%) to 63.69% when pulling 82b1c66 on Qix-:256-colors into 659ac02 on visionmedia:master.

TooTallNate added a commit that referenced this pull request Aug 8, 2017
Like #481, but for the web browser.
TooTallNate added a commit that referenced this pull request Aug 8, 2017
Like #481, but for the web browser.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

4 participants