himynameisdave / hue-radar Goto Github PK

View Code? Open in Web Editor NEW

0.0 3.0 2.0 589 KB

🎨 Find and list all colors used in a project.

License: MIT License

TypeScript 68.44% JavaScript 4.49% HTML 27.08%

hue-radar color colors audit color-report code-analysis

hue-radar's Introduction

hue-radar

🎨 A tool for discovering all of the colors used in your project.

hue-radar is a CLI tool for discovering all of the colors used in your project.

Purpose

If not maintained well, large and long-running web app projects are likely to have colors littered throughout the codebase. This can make it difficult for your design or front-end team to audit, scale and maintain in the long run. This tool was created to help you identify and wrangle every color in your codebase.

It's sort of like greping for various colors, but better for the following reasons:

Handles lots of edge-cases that a complex grep may miss.
Supports all color types (eg: hex, hsl, rgb(a)).
Presents findings in a normalized and reasonable way.
Can produce a comprehensive color audit report for you.

Installation

Note: This has only been tested on NodeJS v12+. It is unlikely to work on versions below this.

Install the tool in your project, or (optionally) you can do it globally.

yarn add hue-radar
npm i hue-radar

# Or globally
npm i -g hue-radar

Usage

Call hue-radar with the options you desire, in the project.

hue-radar -p "*/**.{less,jsx}"

Options

Option	Description	Default	Notes
`--pattern, -p`	Glob pattern for files to match. More info.	`"*/.css,!node_modules/*/"`	Defaults are always included before these patterns., so specify overrides if these do not suit you.
`--debug, -d`	Print debug statements.	`false`
`--format, -f`	Output format for the color report, `json` or `html`	`json`
`--output, -o`	Path to the color report outputted file (optional).	`hue-radar.report.{format}`
`--sort-algorithm, -s`	Algorithm for sorting colors (`distance	deltaE`).	`distance`
`--convert-to-hex, -h`	Converts all rgb/hsl colors in the report to hex, for grouping purposes.	`false`	You will still see the discovered source color, this just helps group same colors.

Contributing

Feel free to file issues with ideas or questions, or submit pull requests with new features or bugfixes.

When submitting pull requests, at the very least please add unit tests for any new functionality, and follow the code styles set forth in the config.

License

✌️ Built by Dave.

hue-radar's People

Contributors

Watchers

Forkers

fossabot jsfix-ci

hue-radar's Issues

Support HSL/HSLA colors

Forgot to include a regex for HSL colors, which should be included before this is published to NPM.

Allow user to specify JSON output path

Allow the user to specify where they want to the generated report to live.

Calculate & group colors based on color difference

It would be very very handy and helpful to sort/group colors together in the final report.

There's a very cool library (called chroma.js) that could help with this. Not sure which of these two methods to use, and how to pass them to a .sort call, but that could be figured out.

chroma-distance - calculate the Euclidean distance between two colors.
chroma-deltaE - calculate color difference between two colors (which is I think what we want).

If using deltaE, rather than sorting them all based on the difference between each other, create an "anchor" color and then have them all diffed from that, and then sort them based on those numbers. You could use black or white, or perhaps elect one of the colors to be the "anchor" (perhaps the most used color that we discover).

Improve HTML report: include project name

The report would be much nicer if it displayed the name of the project/folder it was run on.

Improve HTML report: Discovery list

The discovery list is fine as it is right now, but could be greatly improved.

Make each row expand and display all the discovered lines of code and where we found them.
Make the list sortable would be a nice to have.

rgb(0, 0, 0) == '#000' == '#000000' == 'black'

This means that some results will be verbose if the same color is used in different formats. Luckily there are libraries we can use to convert them:

Note that we'll want to retain the original color in the verbatim string.

This should be configurable with a CLI option:

--color-format hex
--color-format rgb
--color-format rgba

Options should be anything we support, except named CSS colors.