Skip to content

Commit

Permalink
version update + build + updated documentation + springclean
Browse files Browse the repository at this point in the history
  • Loading branch information
@erikyo
erikyo committed Jan 21, 2023
1 parent ce34058 commit b775dc1
Show file tree
Hide file tree
Showing 16 changed files with 289 additions and 149 deletions.
2 changes: 1 addition & 1 deletion dist/color-2-name.js.map
View file

Large diffs are not rendered by default.

14 changes: 7 additions & 7 deletions dist/types/index.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import colorSet from './data/colorSet';
import { COLORDEF, COLORSTRING, HEX, RGBCOLORDEF, RGBDEF } from './types';
import { COLORDEF, HEX } from './types';
/**
* Given a color string it returns the closest corresponding name of the color.
* Uses the Euclidean distance formula to calculate the distance between colors in the RGB color space.
Expand All @@ -16,7 +16,7 @@ import { COLORDEF, COLORSTRING, HEX, RGBCOLORDEF, RGBDEF } from './types';
*
* closest('#f00', undefined, {info:true}); // { name: 'red', color: 'rgb(255,0,0)', hex: '#ff0000', hsl: 'hsl(0, 100%, 50%)', distance: 0 ) }
*/
declare function closest(color: COLORSTRING, set?: RGBCOLORDEF[] | undefined, ...args: any[string | number]): COLORDEF;
declare function closest(color: string, set?: Array<[number, number, number, string]> | undefined, ...args: any[string | number]): COLORDEF;
/**
* Given a color returns if the color is light (by light is meant more mathematically closer to white)
*
Expand All @@ -26,7 +26,7 @@ declare function closest(color: COLORSTRING, set?: RGBCOLORDEF[] | undefined, ..
*
* @example isLight('#ddd'); // true
*/
declare function isLight(color: COLORSTRING): boolean;
declare function isLight(color: string): boolean;
/**
* Given a color returns if the color is dark (by dark is meant more mathematically closer to black)
*
Expand All @@ -36,7 +36,7 @@ declare function isLight(color: COLORSTRING): boolean;
*
* @example isDark('#333'); // true
*/
declare function isDark(color: COLORSTRING): boolean;
declare function isDark(color: string): boolean;
/**
* Given a color returns if the color is light or dark (by dark is meant more mathematically closer to black)
*
Expand All @@ -46,7 +46,7 @@ declare function isDark(color: COLORSTRING): boolean;
*
* @example isLightOrDark('#fff'); // 'light'
*/
declare function isLightOrDark(color: COLORSTRING): string;
declare function isLightOrDark(color: string): string;
/**
* Given a color returns if the color is closer to "red", "green" or "blue".
*
Expand All @@ -56,7 +56,7 @@ declare function isLightOrDark(color: COLORSTRING): string;
*
* @example closestRGB('#f00'); // 'red'
*/
declare function closestRGB(color: COLORSTRING): string;
declare function closestRGB(color: string): string;
/**
* Compute the distance between the two RGB values
* There are two modes:
Expand All @@ -71,7 +71,7 @@ declare function closestRGB(color: COLORSTRING): string;
*
* @example distance([10, 20, 30], [120, 120, 120]); // 173.78147196982766
*/
declare function distance(rgb1: RGBDEF, rgb2: RGBCOLORDEF | number[], fast?: boolean): number;
declare function distance(rgb1: [number, number, number], rgb2: [number, number, number, string] | number[], fast?: boolean): number;
/**
* Given a color string it returns the hex representation
*
Expand Down
2 changes: 1 addition & 1 deletion dist/types/index.d.ts.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 14 additions & 0 deletions docs/color-utils.ts.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,20 @@ <h1 class="navbar-item">color-2-name.js!</h1>
Example
</a>

<a
class="link user-link "
href="https://github.com/erikyo/color-2-name"
>
GitHub Project
</a>

<a
class="link user-link "
href="https://codesandbox.io/s/color-2-name-js-playground-b5f9gj"
>
Playground
</a>



</div>
Expand Down
14 changes: 14 additions & 0 deletions docs/common.ts.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,20 @@ <h1 class="navbar-item">color-2-name.js!</h1>
Example
</a>

<a
class="link user-link "
href="https://github.com/erikyo/color-2-name"
>
GitHub Project
</a>

<a
class="link user-link "
href="https://codesandbox.io/s/color-2-name-js-playground-b5f9gj"
>
Playground
</a>



</div>
Expand Down
14 changes: 14 additions & 0 deletions docs/global.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,20 @@ <h1 class="navbar-item">color-2-name.js!</h1>
Example
</a>

<a
class="link user-link "
href="https://github.com/erikyo/color-2-name"
>
GitHub Project
</a>

<a
class="link user-link "
href="https://codesandbox.io/s/color-2-name-js-playground-b5f9gj"
>
Playground
</a>



</div>
Expand Down
14 changes: 14 additions & 0 deletions docs/hex-utils.ts.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,20 @@ <h1 class="navbar-item">color-2-name.js!</h1>
Example
</a>

<a
class="link user-link "
href="https://github.com/erikyo/color-2-name"
>
GitHub Project
</a>

<a
class="link user-link "
href="https://codesandbox.io/s/color-2-name-js-playground-b5f9gj"
>
Playground
</a>



</div>
Expand Down
16 changes: 15 additions & 1 deletion docs/hsl-utils.ts.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,20 @@ <h1 class="navbar-item">color-2-name.js!</h1>
Example
</a>

<a
class="link user-link "
href="https://github.com/erikyo/color-2-name"
>
GitHub Project
</a>

<a
class="link user-link "
href="https://codesandbox.io/s/color-2-name-js-playground-b5f9gj"
>
Playground
</a>



</div>
Expand Down Expand Up @@ -98,7 +112,7 @@ <h1>hsl-utils.ts</h1>

<section>
<article>
<pre class="prettyprint source linenums"><code>import {hslRegex, normalizeDegree, RGBSET, splitValues} from './common'
<pre class="prettyprint source linenums"><code>import { hslRegex, normalizeDegree, splitValues } from './common'
import { HSLVALUE, RGBVALUE } from './types'

/**
Expand Down
20 changes: 16 additions & 4 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,20 @@ <h1 class="navbar-item">color-2-name.js!</h1>
Example
</a>

<a
class="link user-link "
href="https://github.com/erikyo/color-2-name"
>
GitHub Project
</a>

<a
class="link user-link "
href="https://codesandbox.io/s/color-2-name-js-playground-b5f9gj"
>
Playground
</a>



</div>
Expand Down Expand Up @@ -161,13 +175,11 @@ <h3>As a Node module</h3>
</code></pre>
<h3>As script (browser)</h3>
<p>To load color-2-name add the script tag like below in your head/footer:</p>
<pre class="prettyprint source lang-js"><code>&lt;script src=&quot;color-2-name.js&quot;>&lt;/script>
<pre class="prettyprint source lang-js"><code>&lt;script src=&quot;https://cdn.jsdelivr.net/npm/color-2-name/dist/color-2-name.js&quot;>&lt;/script>
&lt;script>
// Then the color-2-name module will be available using the following command:
// You will find the packed script loaded into window.color2name
color2name.closest('#123456') // color name
color2name.rgbToHex('rgb(18 52 86)') // #123456
color2name.distance([0, 0, 0], [255, 255, 255]) // 431.12
color2name.closest('#123456') // returns -> {name: &quot;midnightblue&quot; , color: &quot;rgb(25,25,112)&quot; }
&lt;/script>
</code></pre>
<hr>
Expand Down
30 changes: 22 additions & 8 deletions docs/index.ts.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,20 @@ <h1 class="navbar-item">color-2-name.js!</h1>
Example
</a>

<a
class="link user-link "
href="https://github.com/erikyo/color-2-name"
>
GitHub Project
</a>

<a
class="link user-link "
href="https://codesandbox.io/s/color-2-name-js-playground-b5f9gj"
>
Playground
</a>



</div>
Expand Down Expand Up @@ -103,7 +117,7 @@ <h1>index.ts</h1>
import { valuesToHex } from './hex-utils'
import { getRgbValues, parseRgb } from './rgb-utils'
import { valuesToHsl } from './hsl-utils'
import { COLORDEF, COLORSTRING, HEX, RGBCOLORDEF, RGBDEF, RGBVALUE } from './types'
import { COLORDEF, HEX, RGBCOLORDEF, RGBDEF, RGBVALUE } from './types'

/**
* Given a color string it returns the closest corresponding name of the color.
Expand All @@ -122,8 +136,8 @@ <h1>index.ts</h1>
* closest('#f00', undefined, {info:true}); // { name: 'red', color: 'rgb(255,0,0)', hex: '#ff0000', hsl: 'hsl(0, 100%, 50%)', distance: 0 ) }
*/
function closest (
color: COLORSTRING,
set: RGBCOLORDEF[] | undefined = colorSet as RGBCOLORDEF[],
color: string,
set: Array&lt;[number, number, number, string]> | undefined = colorSet as RGBCOLORDEF[],
...args: any[ string | number ]
): COLORDEF {
let closestGap = Number.MAX_SAFE_INTEGER
Expand Down Expand Up @@ -176,7 +190,7 @@ <h1>index.ts</h1>
*
* @example isLight('#ddd'); // true
*/
function isLight (color: COLORSTRING): boolean {
function isLight (color: string): boolean {
return closest(color, BLACKANDWHITE).name === 'white'
}

Expand All @@ -189,7 +203,7 @@ <h1>index.ts</h1>
*
* @example isDark('#333'); // true
*/
function isDark (color: COLORSTRING): boolean {
function isDark (color: string): boolean {
return closest(color, BLACKANDWHITE).name === 'black'
}

Expand All @@ -202,7 +216,7 @@ <h1>index.ts</h1>
*
* @example isLightOrDark('#fff'); // 'light'
*/
function isLightOrDark (color: COLORSTRING): string {
function isLightOrDark (color: string): string {
return isLight(color) ? 'light' : 'dark'
}

Expand All @@ -215,7 +229,7 @@ <h1>index.ts</h1>
*
* @example closestRGB('#f00'); // 'red'
*/
function closestRGB (color: COLORSTRING): string {
function closestRGB (color: string): string {
return closest(color, RGBSET).name
}

Expand All @@ -233,7 +247,7 @@ <h1>index.ts</h1>
*
* @example distance([10, 20, 30], [120, 120, 120]); // 173.78147196982766
*/
function distance (rgb1: RGBDEF, rgb2: RGBCOLORDEF | number[], fast: boolean = false): number {
function distance (rgb1: [number, number, number], rgb2: [number, number, number, string] | number[], fast: boolean = false): number {
const r = Math.pow(rgb2[0] - rgb1[0], 2) +
Math.pow(rgb2[1] - rgb1[1], 2) +
Math.pow(rgb2[2] - rgb1[2], 2)
Expand Down
14 changes: 14 additions & 0 deletions docs/rgb-utils.ts.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,20 @@ <h1 class="navbar-item">color-2-name.js!</h1>
Example
</a>

<a
class="link user-link "
href="https://github.com/erikyo/color-2-name"
>
GitHub Project
</a>

<a
class="link user-link "
href="https://codesandbox.io/s/color-2-name-js-playground-b5f9gj"
>
Playground
</a>



</div>
Expand Down
8 changes: 8 additions & 0 deletions jsdoc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,14 @@
{
"label": "Example",
"href": "example.html"
},
{
"label": "GitHub Project",
"href": "https://github.com/erikyo/color-2-name"
},
{
"label": "Playground",
"href": "https://codesandbox.io/s/color-2-name-js-playground-b5f9gj"
}
]
}
Expand Down
Loading

0 comments on commit b775dc1

Please sign in to comment.