Skip to content

Commit

Permalink
Merge pull request #4 from wp-blocks/1.3.1
Browse files Browse the repository at this point in the history
1.3.1
  • Loading branch information
erikyo committed Jan 11, 2024
2 parents 6109230 + 955db3f commit 28dc756
Show file tree
Hide file tree
Showing 9 changed files with 1,078 additions and 1,106 deletions.
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 <erik@codekraft.it>",
"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/color-2-name@1.1.1)!
- 📦 **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))
})
})

0 comments on commit 28dc756

Please sign in to comment.