Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support 256 colors #481

Closed
wants to merge 2 commits into from
Closed

Support 256 colors #481

wants to merge 2 commits into from

Conversation

Qix-
Copy link
Member

@Qix- Qix- commented Aug 8, 2017

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
Copy link

coveralls commented Aug 8, 2017

Coverage Status

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

@coveralls
Copy link

coveralls commented Aug 8, 2017

Coverage Status

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

@coveralls
Copy link

coveralls commented Aug 8, 2017

Coverage Status

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

@TooTallNate
Copy link
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
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
Contributor

Love it! Let's get the build passing?

@Qix-
Copy link
Member Author

Qix- commented Aug 8, 2017

@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-
Copy link
Member Author

Qix- commented Aug 8, 2017

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

@coveralls
Copy link

coveralls commented Aug 8, 2017

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