diff --git a/demo.js b/demo.js new file mode 100644 index 00000000..72811bf8 --- /dev/null +++ b/demo.js @@ -0,0 +1,76 @@ +import * as huetiful from '../src/index.js'; +import { log } from 'console'; + +// (1. Parsing color tokens to different types +var [colArrWithAlpha, colorObj, namedColor, colorNum, colorHex, sample] = [ + ['rgb', 100, 30, 80, 0.2], + { l: 20, c: 40, h: 80, mode: 'lch' }, + pink, + 6000, + '#fc3ba1', + [ + '#00ffdc', + '#00ff78', + '#00c000', + '#007e00', + '#164100', + '#ffff00', + '#310000', + '#3e0000', + '#4e0000', + '#600000', + '#720000' + ] +]; + +log(huetiful.color2hex(colorObj)); +log(huetiful.num2color(colorNum)); +log(huetiful.toCIE('lab')(namedColor)); +log(huetiful.color2hex(colArrWithAlpha)); +log(huetiful.color2tuple(colorHex, 'oklch')); + +// (2. Fetching swatches from bundled color maps +let swatches = huetiful.tailwindColors('all', '400'); +log(swatches); +// (3. Getting and setting properties + +// Setting luminance +let setLum = huetiful.setLuminance(colArrWithAlpha, 0.5); + +// Check the color's initial luminance +log(huetiful.getLuminance(colArrWithAlpha)); + +log(huetiful.getLuminance(setLum)); + +// (4. Sorting and filtering collections of color + +// sort colors by hue angle in descending order +console.log(huetiful.sortByHue(sample, 'desc')); + +// Filter out colors that have chroma channel below 0.1 +console.log(filterByChroma(sample, 0.1)); + +// (5. Getting the stats of color attributes in a collection + +let [meanHue, meanDistance] = [ + huetiful.getMeanHue(sample, 'lch'), + huetiful.getMeanDistance(sample, 'blue') +]; + +// log the mean hue angle from the collection +log(meanHue); + +// log the mean distance between colors in the collection +log(meanDistance); + +// (6. Method chaining + +// Chaining collection methods +let chain1 = huetiful + .load(sample) + .filterByHue(30, 80) + .sortByHue('desc') + .output(); + +// Chaining color methods we first convert it to a pastel color and then return the color visision deficiency simulation of the color for someone who has trouble seeing red. +let chain2 = huetiful.color(colorHex).pastel().deficiency('red', 0.4); diff --git a/demo/demo.js b/demo/demo.js new file mode 100644 index 00000000..d5622e8f --- /dev/null +++ b/demo/demo.js @@ -0,0 +1,75 @@ +import * as huetiful from '../src/index.js'; +import { log } from 'console'; + +// (1. Parsing color tokens to different types +var [colArrWithAlpha, colorObj, namedColor, colorNum, colorHex, sample] = [ + ['rgb', 100, 30, 80, 0.2], + { l: 20, c: 40, h: 80, mode: 'lch' }, + 'pink', + 6000, + '#fc3ba1', + [ + '#00ffdc', + '#00ff78', + '#00c000', + '#007e00', + '#164100', + '#ffff00', + '#310000', + '#3e0000', + '#4e0000', + '#600000', + '#720000' + ] +]; + +log(huetiful.color2hex(colorObj)); +log(huetiful.num2color(colorNum)); +log(huetiful.color2hex(colArrWithAlpha)); +log(huetiful.color2tuple(colorHex, 'oklch')); + +// (2. Fetching swatches from bundled color maps +let swatches = huetiful.tailwindColors('all', '400'); +log(swatches); +// (3. Getting and setting properties + +// Setting luminance +let setLum = huetiful.setLuminance(colArrWithAlpha, 0.5); + +// Check the color's initial luminance +log(huetiful.getLuminance(colArrWithAlpha)); + +log(huetiful.getLuminance(setLum)); + +// (4. Sorting and filtering collections of color + +// sort colors by hue angle in descending order +console.log(huetiful.sortByHue(sample, 'desc')); + +// Filter out colors that have chroma channel below 0.1 +console.log(huetiful.filterByChroma(sample, 0.1)); + +// (5. Getting the stats of color attributes in a collection + +let [meanHue, meanDistance] = [ + huetiful.getMeanHue(sample, 'lch'), + huetiful.getMeanDistance(sample, 'blue') +]; + +// log the mean hue angle from the collection +log(meanHue); + +// log the mean distance between colors in the collection +log(meanDistance); + +// (6. Method chaining + +// Chaining collection methods +let chain1 = huetiful + .load(sample) + .filterByHue(30, 80) + .sortByHue('desc') + .output(); + +// Chaining color methods we first convert it to a pastel color and then return the color visision deficiency simulation of the color for someone who has trouble seeing red. +let chain2 = huetiful.color(colorHex).pastel().deficiency('red', 0.4); diff --git a/demo/sample.png b/demo/sample.png new file mode 100644 index 00000000..ab1b168e Binary files /dev/null and b/demo/sample.png differ diff --git a/docs/assets/gulpfile.js b/docs/assets/gulpfile.js index f291ad14..07d19d45 100644 --- a/docs/assets/gulpfile.js +++ b/docs/assets/gulpfile.js @@ -63,17 +63,17 @@ export async function xml() { path: ['./xml/'], manageEnv: ApiDocsEnv(srcFile, { previous: { - href: idx > 0 ? `/api/${moduleNames[--idx]}` : '/index.html', - title: idx > 0 ? moduleNames[--idx] : `Return to home page` + href: idx > 0 ? `/api/${moduleNames[idx - 1]}` : '/index.html', + title: idx > 0 ? moduleNames[idx - 1] : `Return to home page` }, next: { href: idx < moduleNames.length - ? `/api/${moduleNames[++idx]}` + ? `/api/${moduleNames[idx + 1]}` : `/api`, title: - idx < moduleNames.length - ? moduleNames[++idx] + idx <= moduleNames.length + ? moduleNames[idx + 1] : `Return to home page` } }), diff --git a/docs/assets/js/docs.cjs b/docs/assets/js/docs.cjs index 4f10db11..407e8f93 100644 --- a/docs/assets/js/docs.cjs +++ b/docs/assets/js/docs.cjs @@ -123,7 +123,6 @@ function generateDocs(source, cb = null) { // Loop through the markdown files for modules function buildDataObject(sourceModule, markupTransform = null) { var time = new Intl.DateTimeFormat('en-US', { - weekday: 'long', month: 'short', day: 'numeric', diff --git a/docs/assets/js/main.js b/docs/assets/js/main.js index 9928506b..6619cac1 100644 --- a/docs/assets/js/main.js +++ b/docs/assets/js/main.js @@ -23,6 +23,8 @@ function setProgress() { progressBar.style.width = width; } +setProgress(); + window.addEventListener('scroll', setProgress); /* Dark/light mode toggle */ diff --git a/docs/assets/pages/api.md b/docs/assets/pages/api.md index 914d5d4d..a0313ba6 100644 --- a/docs/assets/pages/api.md +++ b/docs/assets/pages/api.md @@ -4,13 +4,13 @@ The library is split into individual modules each with functions that have the s ### Modules -- [accessibility](api/accessibility) -- [colors](api/colors) -- [converters](api/converters) -- [filterBy](api/filterBy) -- [generators](api/generators) -- [sortBy](api/sortBy) -- [stats](api/stats) -- [types](api/types) -- [utils](api/utils) -- [wrappers](api/wrappers) +- [accessibility](accessibility) +- [colors](colors) +- [converters](converters) +- [filterBy](filterBy) +- [generators](generators) +- [sortBy](sortBy) +- [stats](stats) +- [types](types) +- [utils](utils) +- [wrappers](wrappers) diff --git a/docs/assets/tailwind.config.js b/docs/assets/tailwind.config.js index cef6284e..b0564eda 100644 --- a/docs/assets/tailwind.config.js +++ b/docs/assets/tailwind.config.js @@ -46,7 +46,6 @@ export default { backdropSepia: ({ theme }) => theme('sepia'), backgroundColor: ({ theme }) => theme('colors'), backgroundImage: { - 'hero-home': 'url(assets/img/night-sky-over-mountains.jpg)', none: 'none', 'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))', 'gradient-to-tr': diff --git a/docs/assets/xml/layouts/base.njk b/docs/assets/xml/layouts/base.njk index a8bf601a..f744dc5f 100644 --- a/docs/assets/xml/layouts/base.njk +++ b/docs/assets/xml/layouts/base.njk @@ -2,7 +2,7 @@ {% include "partials/head.njk" %} - + {% include "partials/navbar.njk" %} {% block content %} {% endblock content %} @@ -60,7 +60,7 @@
-
+

+
-

+
\ No newline at end of file diff --git a/docs/assets/xml/partials/pagination.njk b/docs/assets/xml/partials/pagination.njk index b851a6a8..aef2d4a3 100644 --- a/docs/assets/xml/partials/pagination.njk +++ b/docs/assets/xml/partials/pagination.njk @@ -1,12 +1,13 @@
- - - -
{{page.previous.title}}
+ + + +
{{page.previous.title}} +
+
-

{{mod}}

+

{{mod}}

{{prop.description}}

{% for func,props in prop.specs %}

{{func}}

{{props.description}}

-
-
Parameters:
- 

-            {{props.params}}
-
-
-
+ +
+
{% if isColorCollection(props.expect) %} {% for color in props.expect %} diff --git a/docs/assets/xml/views/post.njk b/docs/assets/xml/views/post.njk index 35c2e5fe..f13aa823 100644 --- a/docs/assets/xml/views/post.njk +++ b/docs/assets/xml/views/post.njk @@ -4,55 +4,57 @@ {% block content %} - {% include "./partials/pagination.njk" %} diff --git a/docs/www/api/accessibility/index.html b/docs/www/api/accessibility/index.html index 8bad2ecb..ba743067 100644 --- a/docs/www/api/accessibility/index.html +++ b/docs/www/api/accessibility/index.html @@ -14,10 +14,10 @@ - -
+ +
-
+
-
- -

Module ๐Ÿ“ฆ: accessibility

+ +

Module ๐Ÿ“ฆ: accessibility

Table of contents ๐Ÿ“‘

Functions ๐Ÿงฐ

- - - -
Return to home page
+ + + +
Return to home page +
stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"> -
converters
+
colors
 @@ -258,7 +262,7 @@
-
+

- -

+ +
-
+
-
- -

Module ๐Ÿ“ฆ: colors

+ +

Module ๐Ÿ“ฆ: colors

Table of contents ๐Ÿ“‘

Functions ๐Ÿงฐ

    @@ -387,21 +390,22 @@

    Returns ๐Ÿ”™

    Defined in ๐Ÿ“

    colors.d.ts:150

    - +
- - - -
Return to home page
+ + + +
accessibility +
- @@ -467,7 +471,7 @@
-
+

- -

+ +
-
+
-
- -

Module ๐Ÿ“ฆ: converters

+ +

Module ๐Ÿ“ฆ: converters

Table of contents ๐Ÿ“‘

Functions ๐Ÿงฐ

- - - -
accessibility
+ + + +
colors +
- -
converters
+
filterBy
 @@ -612,7 +616,7 @@
-
+

- -

+ +
-
+
-
- -

Module ๐Ÿ“ฆ: filterBy

+ +

Module ๐Ÿ“ฆ: filterBy

Table of contents ๐Ÿ“‘

Functions ๐Ÿงฐ

    @@ -497,26 +500,27 @@

    Returns ๐Ÿ”™

    Defined in ๐Ÿ“

    filterBy.d.ts:84

    - +
- - - -
colors
+ + + +
converters +
- -
filterBy
+
generators
 @@ -577,7 +581,7 @@
-
+

- -

+ +
-
+
-
- -

Module ๐Ÿ“ฆ: generators

+ +

Module ๐Ÿ“ฆ: generators

Table of contents ๐Ÿ“‘

Functions ๐Ÿงฐ

- - - -
converters
+ + + +
filterBy +
- -
generators
+
sortBy
 @@ -588,7 +592,7 @@
-
+

- -

+ +
-
+

The library is split into individual modules each with functions that have the same base functionality i.e sorting collections or querying color properties. Each module has a test (or .spec.js) file where the unit tests are found and a declaration (or .d.ts) file where the API documentation is generated from.

@@ -69,16 +70,16 @@

Module ๐Ÿ“ฆs

 @@ -139,7 +140,7 @@

Module ๐Ÿ“ฆs

-
+

- -

+ +
-
+
-
- -

Module ๐Ÿ“ฆ: sortBy

+ +

Module ๐Ÿ“ฆ: sortBy

Table of contents ๐Ÿ“‘

Functions ๐Ÿงฐ

    @@ -515,26 +518,27 @@

    Returns ๐Ÿ”™

    Defined in ๐Ÿ“

    sortBy.d.ts:114

    - +
- - - -
filterBy
+ + + +
generators +
- -
sortBy
+
stats
 @@ -595,7 +599,7 @@
-
+

- -

+ +
-
+
-
- -

Module ๐Ÿ“ฆ: stats

+ +

Module ๐Ÿ“ฆ: stats

Table of contents ๐Ÿ“‘

Functions ๐Ÿงฐ

    @@ -1202,26 +1205,27 @@

    Returns ๐Ÿ”™

    Defined in ๐Ÿ“

    stats.d.ts:250

    - +
- - - -
generators
+ + + +
sortBy +
- -
stats
+
types
 @@ -1282,7 +1286,7 @@
-
+

- -

+ +
-
+
-
- -

Module ๐Ÿ“ฆ: types

+ +

Module ๐Ÿ“ฆ: types

Table of contents ๐Ÿ“‘

Type Aliases

    @@ -498,26 +501,27 @@

    callback

    Defined in ๐Ÿ“

    types.d.ts:233

    - +
- - - -
sortBy
+ + + +
stats +
- -
types
+
utils
 @@ -578,7 +582,7 @@
-
+

- -

+ +
-
+
-
- -

Module ๐Ÿ“ฆ: utils

+ +

Module ๐Ÿ“ฆ: utils

Table of contents ๐Ÿ“‘

Functions ๐Ÿงฐ

    @@ -743,26 +746,27 @@

    Returns ๐Ÿ”™

    Defined in ๐Ÿ“

    utils.d.ts:178

    - +
- - - -
stats
+ + + +
types +
- -
utils
+
wrappers
 @@ -823,7 +827,7 @@
-
+

- -

+ +
-
+
-
- -

Module ๐Ÿ“ฆ: wrappers

+ +

Module ๐Ÿ“ฆ: wrappers

This module has the lazy wrappers that can bind collections of colors or individual color tokens and perform manipulations on the bound data.

Functions ๐Ÿงฐ

- - - -
types
+ + + +
utils +
- -
wrappers
+
@@ -2657,7 +2661,7 @@
-
+

- -

+ +
-
+
-
+
-

sortBy

+

sortBy

Functions for sorting collections of color using their properties.

sortBySaturation

Sorts colors by saturation value in `asc` order

-
-
Parameters:
- 

-            #94a3b8,#9ca3af,#a1a1aa,#a3a3a3,#a8a29e,#f87171,#fb923c,#fbbf24,#facc15,#a3e635,#4ade80,#34d399,#2dd4bf,#38bdf8,#60a5fa,#a78bfa,#c084fc,#e879f9,#f472b6,#fb7185,asc,lch
-
-
-
+ +
+
@@ -213,13 +210,9 @@
Parameters:

sortByLightness

Sorts colors by lightness value in `asc` order

-
-
Parameters:
- 

-            #94a3b8,#9ca3af,#a1a1aa,#a3a3a3,#a8a29e,#f87171,#fb923c,#fbbf24,#facc15,#a3e635,#4ade80,#34d399,#2dd4bf,#38bdf8,#60a5fa,#a78bfa,#c084fc,#e879f9,#f472b6,#fb7185,asc,lch
-
-
-
+ +
+
@@ -353,13 +346,9 @@
Parameters:

sortByLuminance

Sorts colors by luminance value in `asc` order

-
-
Parameters:
- 

-            #94a3b8,#9ca3af,#a1a1aa,#a3a3a3,#a8a29e,#f87171,#fb923c,#fbbf24,#facc15,#a3e635,#4ade80,#34d399,#2dd4bf,#38bdf8,#60a5fa,#a78bfa,#c084fc,#e879f9,#f472b6,#fb7185,asc
-
-
-
+ +
+
@@ -493,13 +482,9 @@
Parameters:

sortByDistance

Sorts colors by the distance from 'brown' in `asc` order

-
-
Parameters:
- 

-            #94a3b8,#9ca3af,#a1a1aa,#a3a3a3,#a8a29e,#f87171,#fb923c,#fbbf24,#facc15,#a3e635,#4ade80,#34d399,#2dd4bf,#38bdf8,#60a5fa,#a78bfa,#c084fc,#e879f9,#f472b6,#fb7185,brown,asc
-
-
-
+ +
+
@@ -633,13 +618,9 @@
Parameters:

sortByContrast

Sorts colors by contrast value in `asc` order against black

-
-
Parameters:
- 

-            #94a3b8,#9ca3af,#a1a1aa,#a3a3a3,#a8a29e,#f87171,#fb923c,#fbbf24,#facc15,#a3e635,#4ade80,#34d399,#2dd4bf,#38bdf8,#60a5fa,#a78bfa,#c084fc,#e879f9,#f472b6,#fb7185,black,asc
-
-
-
+ +
+
@@ -773,13 +754,9 @@
Parameters:

sortByHue

Sorts colors by hue angle in `asc` order

-
-
Parameters:
- 

-            #94a3b8,#9ca3af,#a1a1aa,#a3a3a3,#a8a29e,#f87171,#fb923c,#fbbf24,#facc15,#a3e635,#4ade80,#34d399,#2dd4bf,#38bdf8,#60a5fa,#a78bfa,#c084fc,#e879f9,#f472b6,#fb7185,asc,lch
-
-
-
+ +
+
@@ -914,22 +891,18 @@
Parameters:
-
+
-

colors

+

colors

Functions for returning swatches. Also contains the `load` and `color` chains.

tailwindColors

Returns the swatches of color families at 300

-
-
Parameters:
- 

-            all,300
-
-
-
+ +
+
@@ -1064,22 +1037,18 @@
Parameters:
-
+
-

filterBy

+

filterBy

Functions for filtering collections of color using `start` and `end` ranges

filterByContrast

Filters color by relative contrast

-
-
Parameters:
- 

-            #94a3b8,#9ca3af,#a1a1aa,#a3a3a3,#a8a29e,#f87171,#fb923c,#fbbf24,#facc15,#a3e635,#4ade80,#34d399,#2dd4bf,#38bdf8,#60a5fa,#a78bfa,#c084fc,#e879f9,#f472b6,#fb7185,green,3.05,12
-
-
-
+ +
+
@@ -1111,13 +1080,9 @@
Parameters:

filterByHue

Filters color by hue

-
-
Parameters:
- 

-            #94a3b8,#9ca3af,#a1a1aa,#a3a3a3,#a8a29e,#f87171,#fb923c,#fbbf24,#facc15,#a3e635,#4ade80,#34d399,#2dd4bf,#38bdf8,#60a5fa,#a78bfa,#c084fc,#e879f9,#f472b6,#fb7185,60,220,lch
-
-
-
+ +
+
@@ -1167,13 +1132,9 @@
Parameters:

filterByLuminance

Filters color by luminance

-
-
Parameters:
- 

-            #94a3b8,#9ca3af,#a1a1aa,#a3a3a3,#a8a29e,#f87171,#fb923c,#fbbf24,#facc15,#a3e635,#4ade80,#34d399,#2dd4bf,#38bdf8,#60a5fa,#a78bfa,#c084fc,#e879f9,#f472b6,#fb7185,>0.5,<0.9
-
-
-
+ +
+
@@ -1217,13 +1178,9 @@
Parameters:

filterByLightness

Filters color by lightness

-
-
Parameters:
- 

-            #94a3b8,#9ca3af,#a1a1aa,#a3a3a3,#a8a29e,#f87171,#fb923c,#fbbf24,#facc15,#a3e635,#4ade80,#34d399,#2dd4bf,#38bdf8,#60a5fa,#a78bfa,#c084fc,#e879f9,#f472b6,#fb7185,45,69,lch
-
-
-
+ +
+
@@ -1309,13 +1266,9 @@
Parameters:

filterByDistance

Filters color by distance

-
-
Parameters:
- 

-            #94a3b8,#9ca3af,#a1a1aa,#a3a3a3,#a8a29e,#f87171,#fb923c,#fbbf24,#facc15,#a3e635,#4ade80,#34d399,#2dd4bf,#38bdf8,#60a5fa,#a78bfa,#c084fc,#e879f9,#f472b6,#fb7185,yellow,>70.05
-
-
-
+ +
+
@@ -1347,13 +1300,9 @@
Parameters:

filterByChroma

Filters color by saturation

-
-
Parameters:
- 

-            #94a3b8,#9ca3af,#a1a1aa,#a3a3a3,#a8a29e,#f87171,#fb923c,#fbbf24,#facc15,#a3e635,#4ade80,#34d399,#2dd4bf,#38bdf8,#60a5fa,#a78bfa,#c084fc,#e879f9,#f472b6,#fb7185,70
-
-
-
+ +
+
@@ -1398,22 +1347,18 @@
Parameters:
-
+
-

generators

+

generators

Functions for generating custom color scales and palettes.

discoverPalettes

Takes an array of colors and finds the best matches for a set of predefined palettes.

-
-
Parameters:
- 

-            #ffff00,#00ffdc,#00ff78,#00c000,#007e00,#164100,#720000,#600000,#4e0000,#3e0000,#310000,tetradic
-
-
-
+ +
+
@@ -1451,13 +1396,9 @@
Parameters:

earthtone

Creates a scale of a spline interpolation between an earthtone and a color.

-
-
Parameters:
- 

-            pink,lch,[object Object]
-
-
-
+ +
+
@@ -1501,13 +1442,9 @@
Parameters:

hueShift

Generates a palette of hue shifted colors

-
-
Parameters:
- 

-            #3e0000
-
-
-
+ +
+
@@ -1599,13 +1536,9 @@
Parameters:

interpolateSpline

Returns a spline interpolator function with customizable interpolation methods

-
-
Parameters:
- 

-            b2c3f1,#a1bd2f,#f3bac1,lch,8,natural
-
-
-
+ +
+
@@ -1667,13 +1600,9 @@
Parameters:

pairedScheme

Creates a scheme that consists of a scheme color that is incremented by a hueStep to get the final hue to pair with

-
-
Parameters:
- 

-            green,[object Object]
-
-
-
+ +
+
@@ -1711,13 +1640,9 @@
Parameters:

pastel

Creates a pastel variant of a color

-
-
Parameters:
- 

-            green
-
-
-
+ +
+
@@ -1792,7 +1717,7 @@
Parameters:
-
+

- -

+ +
-
+
@@ -415,7 +416,7 @@

There's more

-
+