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

1.3.1 #4

Merged
merged 5 commits into from
Jan 11, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -81,3 +81,4 @@ web_modules/
.yarn/install-state.gz
.pnp.*

.npmrc
2,098 changes: 1,016 additions & 1,082 deletions package-lock.json

Large diffs are not rendered by default.

30 changes: 14 additions & 16 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{
"name": "color-2-name",
"version": "1.3.0",
"version": "1.3.1",
"author": "Erik <[email protected]>",
"license": "ISC",
"main": "lib/cjs/index.cjs",
"module": "lib/esm/index.mjs",
"types": "./lib/@types/index.d.ts",
"unpkg": "lib/browser/color-2-name.js",
"unpkg": "lib/browser/color-2-name.min.js",
"jsdelivr": "lib/browser/color-2-name.js",
"type": "module",
"exports": {
Expand All @@ -26,7 +26,8 @@
"lint": "eslint ./src --fix && prettier --write ./src",
"module-tsc": "tsc --declaration --emitDeclarationOnly --outDir lib/@types --rootDir src",
"module-rollup": "rollup -c",
"module-browser": "esbuild src/color-2-name.ts --outfile=lib/browser/color-2-name.js --allow-overwrite --bundle --minify --sourcemap"
"module-browser": "esbuild src/color-2-name.ts --outfile=lib/browser/color-2-name.js --global-name=color2name --allow-overwrite --bundle --sourcemap",
"module-browser:min": "esbuild src/color-2-name.ts --outfile=lib/browser/color-2-name.min.js --global-name=color2name --allow-overwrite --bundle --minify --sourcemap"
},
"files": [
"lib/",
Expand All @@ -41,9 +42,6 @@
"type": "git",
"url": "https://github.com/wp-blocks/color-2-name.git"
},
"publishConfig": {
"registry": "https://npm.pkg.github.com"
},
"bugs": {
"url": "https://github.com/wp-blocks/color-2-name/issues"
},
Expand All @@ -66,26 +64,26 @@
"color picker"
],
"devDependencies": {
"@babel/core": "^7.23.6",
"@babel/preset-env": "^7.23.6",
"@babel/core": "^7.23.7",
"@babel/preset-env": "^7.23.7",
"@babel/preset-typescript": "^7.23.3",
"@jest/globals": "^29.7.0",
"@rollup/plugin-terser": "^0.4.4",
"@types/jest": "^29.5.11",
"@types/node": "^20.10.5",
"@typescript-eslint/eslint-plugin": "^6.15.0",
"@typescript-eslint/parser": "^6.14.0",
"@types/node": "^20.10.6",
"@typescript-eslint/eslint-plugin": "^6.16.0",
"@typescript-eslint/parser": "^6.16.0",
"babel-jest": "^29.7.0",
"concurrently": "^8.2.2",
"esbuild": "^0.19.10",
"esbuild": "^0.19.11",
"eslint": "^8.55.0",
"eslint-config-standard": "^17.1.0",
"eslint-plugin-n": "^16.3.1",
"eslint-plugin-n": "^16.6.0",
"eslint-plugin-promise": "^6.1.1",
"jest": "^29.7.0",
"prettier": "^2.8.8",
"rimraf": "^4.1.2",
"rollup": "^4.9.1",
"prettier": "^3.1.1",
"rimraf": "^5.0.5",
"rollup": "^4.9.2",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-typescript2": "^0.36.0",
"typescript": "^5.3.3"
Expand Down
8 changes: 4 additions & 4 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

[![](https://img.shields.io/npm/v/color-2-name.svg?label=npm%20version)](https://www.npmjs.com/package/color-2-name)
[![](https://badgen.net/npm/types/color-2-name)](https://github.com/wp-blocks/color-2-name/blob/main/LICENSE)
![](https://badgen.net/bundlephobia/minzip/color-2-name)
[![](https://badgen.net/bundlephobia/minzip/color-2-name)](https://badgen.net/bundlephobia/minzip/color-2-name)
[![](https://img.shields.io/npm/l/color-2-name)](https://github.com/wp-blocks/color-2-name/blob/main/LICENSE)
![](https://github.com/wp-blocks/color-2-name/actions/workflows/node.js.yml/badge.svg)
[![](https://github.com/wp-blocks/color-2-name/actions/workflows/node.js.yml/badge.svg)](https://github.com/wp-blocks/color-2-name/actions/workflows/node.js.yml)

Find the name of the color given a hex, rgb and hsl string!

Expand All @@ -19,7 +19,7 @@ It uses the Euclidean distance formula to calculate the distance between colors
- 🪶 **Lightweight** - The module WITH the 140 css colors definitions [weights 4kb gzipped](https://bundlephobia.com/package/[email protected])!
- 📦 **Bundled** - Optimized and minified build, with ESM, CJS, UMD and browser versions available!
- 💪️ **Typed** - Written in typescript (with types included)
- 🛡️️ **Tested** - Tested with 100% of coverage and over 4000 tests (most of all from [wpt](https://github.com/web-platform-tests/wpt/)) to ensure the full adherence to the css standards
- 🛡️️ **Tested** - Over 4000 tests (most of all from [wpt](https://github.com/web-platform-tests/wpt/)) with 100% coverage to ensure the full adherence to the css standards
- 🎈 **No dependencies** - Dependencies tend to have dependencies endlessly and this can lead to security issues. This is a small module, and it doesn't need anything else!

## 🚀 Benchmarks
Expand All @@ -28,7 +28,7 @@ Designed with the performance in mind, it is 20 times faster than the self-procl

| Library | <nobr>Operations/sec</nobr> | Size<br /> (minified) | Size<br /> (gzipped) |
|--------------------------------------------------------------------|---------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| <nobr><b>[color-2-name](#color-2-name) v1.3.0 🚀</b></nobr> | <nobr>🟢 <b>11 955 ops/s,</b> ±0.29%</nobr> | [![color-2-name](https://snyk.io/advisor/npm-package/color-2-name/badge.svg)](https://snyk.io/advisor/npm-package/color-2-name) | [![](https://badgen.net/bundlephobia/minzip/color-2-name?color=yellow&label=)](https://bundlephobia/package/color-2-name) |
| <nobr><b>[color-2-name](#color-2-name) v1.3.0 🚀</b></nobr> | <nobr>🟢 <b>11 955 ops/s,</b> ±0.29%</nobr> | [![color-2-name](https://snyk.io/advisor/npm-package/color-2-name/badge.svg)](https://snyk.io/advisor/npm-package/color-2-name) | [![](https://badgen.net/bundlephobia/minzip/color-2-name?color=yellow&label=)](https://bundlephobia.com/result?p=color-2-name) |
| <nobr>[colord](https://www.npmjs.com/package/colord) v2.9.3</nobr> | <nobr>🔴 765 ops/s, ±0.39% ( 93.6% slower)</nobr> | [![colord](https://snyk.io/advisor/npm-package/colord/badge.svg)](https://snyk.io/advisor/npm-package/colord) | [![](https://badgen.net/bundlephobia/minzip/colord?color=6ead0a&label=)](https://bundlephobia.com/result?p=colord) + [plugins](https://github.com/omgovich/colord/tree/master/src/plugins) |

- The performance results were generated on a common Intel i5 by running `npm run benchmark` in the library folder. See [tests/benchmark.testts](https://github.com/wp-blocks/color-2-name/blob/master/tests/benchmark.testts).
Expand Down
2 changes: 1 addition & 1 deletion src/color-2-name.ts
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export * as default from "./";
export * as color2name from "./";
12 changes: 12 additions & 0 deletions src/color-utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,15 @@ export function getColor(searchedColor: string, set: RGBCOLORDEF[] | undefined =

throw new Error(`Error: invalid color ${searchedColor} or empty colorSet`);
}

export function getColors() {
const colors = colorSet.map( (colorData) => {
const currentColor = {
name: colorData[3],
...getColor(colorData[3] as string)
};
return currentColor;
} );

return colors
}
2 changes: 1 addition & 1 deletion src/hsl-utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,6 @@ export function valuesToHsl({ r, g, b }: RGBVALUE): string {
* @param {number} hsl.l - The lightness value of the color.
* @return {string} The HSL color as a string.
*/
function HSL(hsl: { h: number; s: number; l: number }): string {
export function HSL(hsl: { h: number; s: number; l: number }): string {
return `hsl(${hsl.h},${hsl.s}%,${hsl.l}%)`;
}
4 changes: 2 additions & 2 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { hexToRgb, parseHex, valuesToHex } from "./hex-utils";
import { getRgbValues, parseRgb } from "./rgb-utils";
import { hslToRgb, parseHsl } from "./hsl-utils";
import type { COLORDEF, COLORSTRING, HEX, RGBCOLORDEF, RGBDEF, RGBVALUE } from "./types";
import { getColor } from "./color-utils";
import { getColor, getColors } from "./color-utils";

/**
* Given a color string, it returns the closest corresponding name of the color.
Expand Down Expand Up @@ -163,4 +163,4 @@ export function parseColor(colorString: string): RGBVALUE {
throw new Error(`Invalid color: ${colorString}`);
}

export { closest, rgbToHex, distance, isLight, isDark, closestRGB, getColor };
export { closest, rgbToHex, distance, isLight, isDark, closestRGB, getColor, getColors };
27 changes: 27 additions & 0 deletions tests/core.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import {closest, closestRGB, distance, getColor, isDark, isLight, rgbToHex} from
import {MAXDISTANCE} from "../src/common";
import {valuesToHex} from "../src/hex-utils";
import {jest} from "@jest/globals";
import {getColors} from "../src/color-utils";
import ColorSet from "../src/data/colorSet";

describe('Color Conversions functions', () => {
it('Returns the correct distance between colors', () => {
Expand Down Expand Up @@ -102,4 +104,29 @@ describe('Color Conversions functions', () => {
})
expect(() => getColor(null)).toThrow("Error: invalid color null or empty colorSet")
})



it('Get colors function', () => {
const expected = [
{
name: 'white',
hex: '#ffffff',
rgb: 'rgb(255,255,255)',
hsl: 'hsl(0,0%,100%)'
},
{
name: 'black',
hex: '#000000',
rgb: 'rgb(0,0,0)',
hsl: 'hsl(0,0%,0%)'
},
]
const colors = getColors()
// check if the length of the colors is the same as the length of the colorSet
expect(colors).toHaveLength(ColorSet.length)

// check if the colors expected are included in the colors
expect(colors).toEqual(expect.arrayContaining(expected))
})
})