Skip to content

Commit

Permalink
Merge pull request #162 from xml-wizard/dev
Browse files Browse the repository at this point in the history
Dev
  • Loading branch information
prjctimg authored Mar 22, 2024
2 parents 7a3a741 + 16431f1 commit 6dba1e8
Show file tree
Hide file tree
Showing 28 changed files with 848 additions and 681 deletions.
76 changes: 76 additions & 0 deletions demo.js
Original file line number Diff line number Diff line change
@@ -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);
75 changes: 75 additions & 0 deletions demo/demo.js
Original file line number Diff line number Diff line change
@@ -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);
Binary file added demo/sample.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 5 additions & 5 deletions docs/assets/gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -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`
}
}),
Expand Down
1 change: 0 additions & 1 deletion docs/assets/js/docs.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -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',

Expand Down
2 changes: 2 additions & 0 deletions docs/assets/js/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ function setProgress() {
progressBar.style.width = width;
}

setProgress();

window.addEventListener('scroll', setProgress);

/* Dark/light mode toggle */
Expand Down
20 changes: 10 additions & 10 deletions docs/assets/pages/api.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
1 change: 0 additions & 1 deletion docs/assets/tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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':
Expand Down
4 changes: 2 additions & 2 deletions docs/assets/xml/layouts/base.njk
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
{% include "partials/head.njk" %}

<body class="markdown-body">
<body class="markdown-body md:container md:mx-auto font-sans bg-slate-100">
{% include "partials/navbar.njk" %}
{% block content %} {% endblock content %}

Expand Down Expand Up @@ -60,7 +60,7 @@


<div class="pt-2">
<blockquote class="inline-block text-sm">
<blockquote class="inline-block text-sm font-sans text-white">
<p class="text-sm">
<span class="inline-block"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="14"
viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.75"
Expand Down
7 changes: 4 additions & 3 deletions docs/assets/xml/partials/navbar.njk
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<header class="pb-8 sticky top-0 left-0 w-full text-slate-700">
<header class="pb-8 font-sans sticky top-0 left-0 w-full text-slate-700">
<nav
class="py-4 flex flex-wrap items-center justify-between w-full px-4 text-lg text-slate-700 bg-slate-100 dark:text-slate-200 shadow-md shadow-gray-200 dark:shadow-black dark:bg-slate-800">
class="py-4 flex flex-wrap items-center justify-between w-full px-4 text-lg text-slate-700 bg-slate-200 dark:text-slate-200 shadow-md shadow-gray-200 dark:shadow-black dark:bg-slate-800">

<a class="inline-flex space-y-1 items-center font-medium text-base" href="https://huetiful-js.com"
id="home"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
Expand Down Expand Up @@ -43,5 +43,6 @@
</a>

</nav>
<div id='progress-bar' class='progress bg-gradient-to-r from-orange-600 via-purple-600 to-emerald-600' />
<div id='progress-bar'
class='progress dark:bg-gradient-to-r from-orange-400 via-purple-400 to-emerald-400 bg-gradient-to-r from-orange-600 via-purple-600 to-emerald-600' />
</header>
15 changes: 8 additions & 7 deletions docs/assets/xml/partials/pagination.njk
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
<section class="flex justify-between divide-x-[1px] divide-slate-400">

<a href="{{page.previous.href}}" class='flex align-middle space-x-2 p-4' id="previous-button"><svg
xmlns="http://www.w3.org/2000/svg" width="22" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-chevron-left">
<polyline points="15 18 9 12 15 6"></polyline>
</svg><span></span>
<h5 class="font-sans text-sm text-slate-700 tracking-tight dark:text-slate-300">{{page.previous.title}}</h5>
<a href="{{page.previous.href}}" class='flex space-x-2 p-4' id="previous-button"><span><svg
xmlns="http://www.w3.org/2000/svg" width="22" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-chevron-left">
<polyline points="15 18 9 12 15 6"></polyline>
</svg></span>
<h5 class="inline font-sans text-sm text-slate-700 tracking-tight dark:text-slate-300">{{page.previous.title}}
</h5>
</a>

<a href="{{page.next.href}}" class='flex space-x-2 p-4 items-center'><span><svg xmlns="http://www.w3.org/2000/svg"
Expand Down
14 changes: 5 additions & 9 deletions docs/assets/xml/views/demo.njk
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,18 @@

{% block content %}
{% for mod,prop in demoData %}
<section class="flex-col p-4 bg-slate-100 my-3 shadow-md">
<section class="flex-col bg-slate-100 my-3 shadow-md">

<h3 class="px-8 font-sans text-lg font-semibold text-slate-800">{{mod}}</h3>
<h3 class="font-sans text-lg font-semibold text-slate-700">{{mod}}</h3>

<p class="pb-6 font-sans text-slate-500 text-base font-normal">{{prop.description}}</p>

{% for func,props in prop.specs %}
<h4 class="font-sans text-slate-700 font-semibold text-base">{{func}}</h4>
<p class="pt-3 font-sans text-slate-500 text-sm ">{{props.description}}</p>
<div class="px-1.5 flex-col">
<h5 class="font-sans text-slate-700 font-semibold text-base">Parameters:</h5>
<pre><code class="hljs">
{{props.params}}
</code></pre>
<hr class="divide-y">
</div>

<hr class="divide-y">

<div class="flex space-x-2 p-2 flex-wrap">
{% if isColorCollection(props.expect) %}
{% for color in props.expect %}
Expand Down
60 changes: 31 additions & 29 deletions docs/assets/xml/views/post.njk
Original file line number Diff line number Diff line change
Expand Up @@ -4,55 +4,57 @@


{% block content %}
<div>
<article class='markdown-body'>
<div class="flex justify-start w-full space-x-2">

<div class='flex flex-row w-full justify-end'>
<article class='markdown-body font-sans'>
<div class="flex justify-start w-full space-x-2">

<div class='flex flex-row w-full justify-end'>

<a class='flex w-fit items-center' href={{data.declFile}}><button
class="pr-2 py-2 bg-sky-500 border-none text-sm text-white">Edit this page</button><span
class="inline ml-1"><span> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="18"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
</svg>

</span>
</a>
<a class='grid-rows-2 place-items-start' href={{data.declFile}}>
<button class="flex-col place-items-start py-1 bg-sky-500 border-none font-sans text-sm text-white">Edit
this page</button>
<span class="inline ml-1"><span> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="18"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
</svg>

<div class='flex flex-col'><span class='font-normal text-sm text-slate-500'>last updated</span'>
<p class='text-slate-600 text-xs font-sans font-semibold'>{{data.lastUpdated}}</p>
</div>
</span>
</a>

<div class='flex flex-col'><span class='font-normal font-sans text-sm text-slate-500'>last updated
</span'>
<p class='text-slate-600 text-xs font-sans font-semibold'>{{data.lastUpdated}}</p>
</div>
</div>
</div>
<div class="flex flex-row space-x-2 pt-8 pb-1 mb-4 w-fit">
<a href="{{data.specFile}}" class="flex space-x-1">
<span>Tests 🧪</span>
</a>
<a href="{{data.srcFile}}" class="flex space-x-1">
<span>Source 🧾</span>
</a>
</div>
<div class="flex flex-row space-x-2 pt-8 pb-1 mb-4 w-fit">
<a href="{{data.specFile}}" class="flex space-x-1 font-sans">
<span>Tests 🧪</span>
</a>
<a href="{{data.srcFile}}" class="flex space-x-1 font-sans">
<span>Source 🧾</span>
</a>
</div>
</article>
</article>
{{data.mainContent|safe}}
{{data.mainContent|safe}}
</article>
</article>
</div>
{% include "./partials/pagination.njk" %}
Expand Down
Loading

0 comments on commit 6dba1e8

Please sign in to comment.