Skip to content

Commit

Permalink
add CSS export functions
Browse files Browse the repository at this point in the history
  • Loading branch information
meodai committed Dec 17, 2023
1 parent 257a14f commit e479271
Show file tree
Hide file tree
Showing 10 changed files with 127 additions and 33 deletions.
11 changes: 9 additions & 2 deletions dist/index.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ var __export = (target, all) => {

// src/index.ts
__export(exports, {
colorToCSS: () => colorToCSS,
easingFunctions: () => easingFunctions,
generateRandomColorRamp: () => generateRandomColorRamp,
generateRandomColorRampParams: () => generateRandomColorRampParams,
Expand Down Expand Up @@ -142,6 +143,12 @@ function generateRandomColorRamp({
all: [...lightColors, ...baseColors, ...darkColors]
};
}
var colorModsCSS = {
oklch: (color) => [color[2], color[1] * 0.4, color[0]],
lch: (color) => [color[2] * 100, color[1] * 150, color[0]],
hsl: (color) => [color[0], color[1] * 100 + "%", color[2] * 100 + "%"]
};
var colorToCSS = (color, mode = "oklch") => `${mode}(${colorModsCSS[mode](color).join(" ")})`;
var generateRandomColorRampParams = {
curveMethod: {
default: "lam\xE9",
Expand Down Expand Up @@ -187,11 +194,11 @@ var generateRandomColorRampParams = {
},
minSaturation: {
default: 0,
props: { min: 0, max: 1, step: 1e-3 }
props: { min: -0.25, max: 1, step: 1e-3 }
},
minLight: {
default: 0,
props: { min: 0, max: 1, step: 1e-3 }
props: { min: -0.25, max: 1, step: 1e-3 }
},
maxSaturation: {
default: 1,
Expand Down
13 changes: 12 additions & 1 deletion dist/index.d.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export declare type FuncNumberReturn = (arg0: number, arg1?: number) => Vector2;
export declare type CurveMethod = "lamé" | "arc" | "pow" | "powY" | "powX" | "linear" | "easeInSine" | "easeOutSine" | "easeInOutSine" | "easeInQuad" | "easeOutQuad" | "easeInOutQuad" | "easeInCubic" | "easeOutCubic" | "easeInOutCubic" | "easeInQuart" | "easeOutQuart" | "easeInOutQuart" | "easeInQuint" | "easeOutQuint" | "easeInOutQuint" | "easeInExpo" | "easeOutExpo" | "easeInOutExpo" | "easeInCirc" | "easeOutCirc" | "easeInOutCirc" | "random" | FuncNumberReturn;
export declare type ColorModel = "hsl" | "hsv";
export declare type ColorModel = "hsl" | "hsv" | "lch" | "oklch";
export declare type Vector2 = [number, number];
export declare type Vector3 = [number, number, number];
export declare type GenerateRandomColorRampArgument = {
Expand Down Expand Up @@ -100,6 +100,17 @@ export declare function generateRandomColorRamp({ total, centerHue, hueCycle, of
base: Vector3[];
all: Vector3[];
};
export declare type colorToCSSxLCHMode = "oklch" | "lch" | "hsl";
/**
* Converts Hxx (Hue, Chroma, Lightness) values to a CSS `oklch()` color function string.
*
* @param {Object} hxx - An object with hue, chroma, and lightness properties.
* @param {number} hxx.hue - The hue value.
* @param {number} hxx.chroma - The chroma value.
* @param {number} hxx.lightness - The lightness value.
* @returns {string} - The CSS color function string in the format `oklch(lightness% chroma hue)`.
*/
export declare const colorToCSS: (color: Vector3, mode?: colorToCSSxLCHMode) => string;
export declare const generateRandomColorRampParams: {
curveMethod: {
default: string;
Expand Down
66 changes: 48 additions & 18 deletions dist/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,8 @@
flex: 1 0 calc(var(--w, 0.11) * 100%);
width: calc(var(--w, 0.11) * 100%);
padding-top: calc(var(--w, 0.11) * 100%);
background: hsl(var(--h), calc(var(--s) * 1%), calc(var(--l) * 1%));
/*background: hsl(var(--h), calc(var(--s) * 1%), calc(var(--l) * 1%));*/
background: var(--c);
}

[data-palette] {
Expand Down Expand Up @@ -205,11 +206,12 @@
padding: 0;
}
[data-figure] {

background-image: linear-gradient(to top, black, rgba(0, 0, 0, 0)),
linear-gradient(
to left,
hsl(var(--deg, 0deg), 100%, 50%),
hsl(var(--deg, 0deg), 0%, 100%)
var(--col1),
var(--col2)
);
}
[data-ramp] {
Expand Down Expand Up @@ -671,14 +673,15 @@ <h2>Color Properties</h2>
<div data-names></div>
</aside>
</article>
<script src="https://cdn.jsdelivr.net/npm/culori@2.0.3/bundled/culori.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/culori@3.3.0/bundled/culori.umd.js"></script>

<script type="module">
import {
generateRandomColorRamp,
generateRandomColorRampParams,
hsv2hsl,
pointOnCurve,
colorToCSS,
} from "./index.mjs";

console.clear();
Expand Down Expand Up @@ -894,12 +897,18 @@ <h2>Color Properties</h2>

const PARAMS = {};

PARAMS.model = 'hsl';

Object.keys(generateRandomColorRampParams).forEach((key) => {
const param = generateRandomColorRampParams[key];
PARAMS[key] = param.default;
pane.addInput(PARAMS, key, param.props);
});

pane.addInput(PARAMS, 'model', {
options: ['hsl', 'oklch', 'lch']
});

const $pal = document.querySelector("[data-palette]");
const $picker = document.querySelector("[data-figure]");
const $ramp = document.querySelector("[data-ramp]");
Expand Down Expand Up @@ -964,7 +973,7 @@ <h2>Color Properties</h2>
.slice(0, 4)
.sort((a, b) => b.hsl[2] - a.hsl[2])
.map(
(c) => `hsl(${c.hsl[0]},${c.hsl[1] * 100}%,${c.hsl[2] * 100}%)`
(c) => c.css
)
.join(",")})`
);
Expand All @@ -979,9 +988,7 @@ <h2>Color Properties</h2>
for (let i = 0; i < 4; i++) {
$div.style.setProperty(
`--col-${i}`,
`hsl(${colorArr[i].hsl[0]},${colorArr[i].hsl[1] * 100}%,${
colorArr[i].hsl[2] * 100
}%)`
colorArr[i].css
);
}

Expand Down Expand Up @@ -1019,6 +1026,7 @@ <h2>Color Properties</h2>
hsl: [h, s, l],
rgb: [r * 255, g * 255, b * 255],
hex: culori.formatHex({ mode: "hsl", h, s, l }),
css: colorToCSS([h, s, l], PARAMS.model),
contrast: {
white: culori.wcagContrast("#ffffff", { mode: "hsl", h, s, l }),
black: culori.wcagContrast("#000000", { mode: "hsl", h, s, l }),
Expand Down Expand Up @@ -1059,16 +1067,35 @@ <h2>Color Properties</h2>
[PARAMS.maxSaturation, PARAMS.maxLight]
);


$picker.style.setProperty(
`--deg`,
`${colors.all[Math.floor(colors.all.length * 0.5)].hsl[0]}deg`
);

let col1 = `hsl(var(--deg, 0deg), 100%, 50%)`;
let col2 = `hsl(var(--deg, 0deg), 0%, 100%)`;

if (PARAMS.model === 'oklch') {
col1 = `oklch(.5 .4 var(--deg, 0deg))`;
col2 = `oklch(1 0 var(--deg, 0deg))`;
} else if (PARAMS.model === 'lch') {
col1 = `lch(50 150 var(--deg, 0deg))`;
col2 = `lch(100 0 var(--deg, 0deg))`;
}
$picker.style.setProperty(
`--col1`, col1
);
$picker.style.setProperty(
`--col2`, col2
)


document.querySelector("[data-colors]").innerHTML = colors.all.reduce(
(r, c) => {
return `${r}<i style="--w: ${1 / PARAMS.total}; --h: ${
c.hsl[0]
}; --s: ${c.hsl[1] * 100}; --l: ${c.hsl[2] * 100}"></i>`;
}; --s: ${c.hsl[1] * 100}; --l: ${c.hsl[2] * 100}; --c: ${c.css};"></i>`;
},
""
);
Expand Down Expand Up @@ -1120,8 +1147,9 @@ <h2>Color Properties</h2>
newElement.style.fill = `hsl(${colorsArr[i - 1].hsl[0]}deg,${
hsl[1] * 100
}%,${hsl[2] * 100}%)`;
newElement.style.stroke = "#212121";
newElement.style.strokeWidth = ".5px";
newElement.style.fill = colorsArr[i - 1].css;
newElement.style.stroke = "#202126";
newElement.style.strokeWidth = ".25px";

const [xl, yl] = pointOnCurve(
curveMethod,
Expand All @@ -1140,10 +1168,11 @@ <h2>Color Properties</h2>
newElementLight.setAttribute("cx", (xl - offsetTint) * 100);
newElementLight.setAttribute("cy", 100 - (yl + offsetTint) * 100);

newElementLight.setAttribute("r", "1");
newElementLight.setAttribute("r", ".5");

newElementLight.style.fill = `#fff`;
newElementLight.style.strokeWidth = "0px";
newElementLight.style.strokeWidth = ".1px";
newElementLight.style.stroke = "#000";

const newElementDark = document.createElementNS(
xmlns,
Expand All @@ -1162,10 +1191,11 @@ <h2>Color Properties</h2>
newElementDark.setAttribute("cx", (xd - offsetShade) * 100);
newElementDark.setAttribute("cy", 100 - (yd - offsetShade) * 100);

newElementDark.setAttribute("r", "1");
newElementDark.setAttribute("r", ".5");

newElementDark.style.fill = `#000`;
newElementDark.style.strokeWidth = "0px";
newElementDark.style.strokeWidth = ".1px";
newElementDark.style.stroke = "#fff";

$picker.appendChild(newElement);
$picker.appendChild(newElementLight);
Expand All @@ -1175,10 +1205,10 @@ <h2>Color Properties</h2>

const printColors = (arr, simple, names) =>
arr
.map(({ hsl, rgb, hex, contrast }, i) => {
.map(({ hsl, rgb, hex, contrast, css }, i) => {
if (simple) {
return `
<li class="swatch swatch--simple" style="--col:${hex}; --coltext: ${
<li class="swatch swatch--simple" style="--col:${css}; --coltext: ${
contrast.black > contrast.white ? "#202125" : "#fff"
}">
<div data-copy title="Click to copy">${Math.floor(
Expand All @@ -1187,7 +1217,7 @@ <h2>Color Properties</h2>
</li>`;
} else {
return `
<li class="full" style="--col:${hex}; --coltext: ${
<li class="full" style="--col:${css}; --coltext: ${
contrast.black < contrast.white ? "#202125" : "#fff"
}; --colbg: ${
contrast.black > contrast.white ? "#202125" : "#fff"
Expand Down
11 changes: 9 additions & 2 deletions dist/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ var fettepalette = (() => {
// src/index.ts
var src_exports = {};
__export(src_exports, {
colorToCSS: () => colorToCSS,
easingFunctions: () => easingFunctions,
generateRandomColorRamp: () => generateRandomColorRamp,
generateRandomColorRampParams: () => generateRandomColorRampParams,
Expand Down Expand Up @@ -144,6 +145,12 @@ var fettepalette = (() => {
all: [...lightColors, ...baseColors, ...darkColors]
};
}
var colorModsCSS = {
oklch: (color) => [color[2], color[1] * 0.4, color[0]],
lch: (color) => [color[2] * 100, color[1] * 150, color[0]],
hsl: (color) => [color[0], color[1] * 100 + "%", color[2] * 100 + "%"]
};
var colorToCSS = (color, mode = "oklch") => `${mode}(${colorModsCSS[mode](color).join(" ")})`;
var generateRandomColorRampParams = {
curveMethod: {
default: "lam\xE9",
Expand Down Expand Up @@ -189,11 +196,11 @@ var fettepalette = (() => {
},
minSaturation: {
default: 0,
props: { min: 0, max: 1, step: 1e-3 }
props: { min: -0.25, max: 1, step: 1e-3 }
},
minLight: {
default: 0,
props: { min: 0, max: 1, step: 1e-3 }
props: { min: -0.25, max: 1, step: 1e-3 }
},
maxSaturation: {
default: 1,
Expand Down
2 changes: 1 addition & 1 deletion dist/index.min.cjs
Original file line number Diff line number Diff line change
@@ -1 +1 @@
var V=Object.defineProperty;var F=e=>V(e,"__esModule",{value:!0});var X=(e,t)=>{F(e);for(var r in t)V(e,r,{get:t[r],enumerable:!0})};X(exports,{easingFunctions:()=>O,generateRandomColorRamp:()=>Y,generateRandomColorRampParams:()=>H,hsv2hsl:()=>y,hsv2hsx:()=>d,pointOnCurve:()=>I});var O={linear:e=>e,easeInSine:(e,t=0)=>1-Math.cos(e*Math.PI/2+t*Math.PI/2),easeOutSine:(e,t=0)=>Math.sin(e*Math.PI/2+t*Math.PI/2),easeInOutSine:(e,t=0)=>-(Math.cos(Math.PI*(e+t)/(1+2*t))-1)/2,easeInQuad:(e,t=0)=>e*e+t*e*(1-e),easeOutQuad:(e,t=0)=>1-(1-e)*(1-e)-t*e*(1-e),easeInOutQuad:(e,t=0)=>e<.5?2*e*e+t*e*(1-2*e):1-Math.pow(-2*e+2,2)/2-t*(2*e-1)*(1-Math.pow(-2*e+2,2)/2),easeInCubic:(e,t=0)=>e*e*e+t*e*e*(1-e),easeOutCubic:(e,t=0)=>1-Math.pow(1-e,3)-t*Math.pow(1-e,2)*(1-e),easeInOutCubic:(e,t=0)=>e<.5?4*e*e*e+t*e*e*(1-2*e):1-Math.pow(-2*e+2,3)/2-t*Math.pow(-2*e+2,2)*(2*e-1)/2,easeInQuart:(e,t=0)=>e*e*e*e+t*e*e*e*(1-e),easeOutQuart:(e,t=0)=>1-Math.pow(1-e,4)-t*Math.pow(1-e,3)*(1-e),easeInOutQuart:(e,t=0)=>e<.5?8*e*e*e*e+t*e*e*e*(1-2*e):1-Math.pow(-2*e+2,4)/2-t*Math.pow(-2*e+2,3)*(2*e-1)/2,easeInQuint:(e,t=0)=>e*e*e*e*e+t*e*e*e*e*(1-e),easeOutQuint:(e,t=0)=>1-Math.pow(1-e,5)-t*Math.pow(1-e,4)*(1-e),easeInOutQuint:(e,t=0)=>e<.5?16*e*e*e*e*e+t*e*e*e*e*(1-2*e):1-Math.pow(-2*e+2,5)/2-t*Math.pow(-2*e+2,4)*(2*e-1)/2,easeInExpo:(e,t=0)=>(e===0?0:Math.pow(2,10*e-10))+t*Math.pow(2,10*(e-1)),easeOutExpo:(e,t=0)=>(e===1?1:1-Math.pow(2,-10*e))-t*(1-Math.pow(2,-10*e)),easeInOutExpo:(e,t=0)=>e===0?0:e===1?1:e<.5?Math.pow(2,20*e-10)/2+t*Math.pow(2,20*e-10)/2:(2-Math.pow(2,-20*e+10))/2-t*(2-Math.pow(2,-20*e+10))/2,easeInCirc:(e,t=0)=>1-Math.sqrt(1-Math.pow(e,2))+t*Math.sqrt(1-Math.pow(e,2)),easeOutCirc:(e,t=0)=>Math.sqrt(1-Math.pow(e-1,2))-t*Math.sqrt(1-Math.pow(e-1,2)),easeInOutCirc:(e,t=0)=>e<.5?(1-Math.sqrt(1-Math.pow(2*e,2)))/2+t*(1-Math.sqrt(1-Math.pow(2*e,2)))/2:(Math.sqrt(1-Math.pow(-2*e+2,2))+1)/2-t*(Math.sqrt(1-Math.pow(-2*e+2,2))+1)/2,random:()=>Math.random()},g=Object.keys(O),y=(e,t,r,n=r-r*t/2,u=Math.min(n,1-n))=>[e,u?(r-n)/u:0,n],d=(e,t,r,n)=>n==="hsl"?y(e,t,r):[e,t,r],I=(e,t,r,n,u=[0,0],m=[1,1])=>{let w=Math.PI/2,b=w/r,o=t/r,s=0,a=0;if(e==="lam\xE9"){let p=o*w,h=2/(2+20*n),i=Math.cos(p),M=Math.sin(p);s=Math.sign(i)*Math.abs(i)**h,a=Math.sign(M)*Math.abs(M)**h}else if(e==="arc")a=Math.cos(-Math.PI/2+t*b+n),s=Math.sin(Math.PI/2+t*b-n);else if(e==="pow")s=Math.pow(1-o,1-n),a=Math.pow(o,1-n);else if(e==="powY")s=Math.pow(1-o,n),a=Math.pow(o,1-n);else if(e==="powX")s=Math.pow(o,n),a=Math.pow(o,1-n);else if(typeof e=="function"){let p=e(o,n);s=p[0],a=p[1]}else if(g.includes(e))s=o,a=1-O[e](o,n*-1)||0;else throw new Error(`pointOnCurve() curveAccent parameter is expected to be "lam\xE9" | "arc" | "pow" | "powY" | "powX" or a function but \`${e}\` given.`);return s=u[0]+Math.min(Math.max(s,0),1)*(m[0]-u[0]),a=u[1]+Math.min(Math.max(a,0),1)*(m[1]-u[1]),[s,a]};function Y({total:e=3,centerHue:t=0,hueCycle:r=.3,offsetTint:n=.1,offsetShade:u=.1,curveAccent:m=0,tintShadeHueShift:w=.1,curveMethod:b="arc",offsetCurveModTint:o=.03,offsetCurveModShade:s=.03,minSaturationLight:a=[0,0],maxSaturationLight:p=[1,1],colorModel:h="hsl"}={}){let i=[],M=[],C=[];for(let l=1;l<e+1;l++){let[S,P]=I(b,l,e+1,m,a,p),f=(360+(-180*r+(t+l*(360/(e+1))*r)))%360,R=d(f,S,P,h);i.push(R);let[q,E]=I(b,l,e+1,m+o,a,p),c=d(f,q,E,h);M.push([(f+360*w)%360,c[1]-n,c[2]+n]);let[T,k]=I(b,l,e+1,m-s,a,p),Q=d(f,T,k,h);C.push([(360+(f-360*w))%360,Q[1]-u,Q[2]-u])}return{light:M,dark:C,base:i,all:[...M,...i,...C]}}var H={curveMethod:{default:"lam\xE9",props:{options:["lam\xE9","arc","pow","powY","powX",...g]}},curveAccent:{default:0,props:{min:-.095,max:1,step:.001}},total:{default:9,props:{min:3,max:35,step:1}},centerHue:{default:0,props:{min:0,max:360,step:.1}},hueCycle:{default:.3,props:{min:-1.25,max:1.5,step:.001}},offsetTint:{default:.01,props:{min:0,max:.4,step:.001}},offsetShade:{default:.01,props:{min:0,max:.4,step:.001}},tintShadeHueShift:{default:.01,props:{min:0,max:1,step:.001}},offsetCurveModTint:{default:.03,props:{min:0,max:.4,step:1e-4}},offsetCurveModShade:{default:.03,props:{min:0,max:.4,step:1e-4}},minSaturation:{default:0,props:{min:0,max:1,step:.001}},minLight:{default:0,props:{min:0,max:1,step:.001}},maxSaturation:{default:1,props:{min:0,max:1,step:.001}},maxLight:{default:1,props:{min:0,max:1,step:.001}}};
var Q=Object.defineProperty;var F=e=>Q(e,"__esModule",{value:!0});var H=(e,t)=>{F(e);for(var r in t)Q(e,r,{get:t[r],enumerable:!0})};H(exports,{colorToCSS:()=>L,easingFunctions:()=>I,generateRandomColorRamp:()=>X,generateRandomColorRampParams:()=>$,hsv2hsl:()=>g,hsv2hsx:()=>d,pointOnCurve:()=>C});var I={linear:e=>e,easeInSine:(e,t=0)=>1-Math.cos(e*Math.PI/2+t*Math.PI/2),easeOutSine:(e,t=0)=>Math.sin(e*Math.PI/2+t*Math.PI/2),easeInOutSine:(e,t=0)=>-(Math.cos(Math.PI*(e+t)/(1+2*t))-1)/2,easeInQuad:(e,t=0)=>e*e+t*e*(1-e),easeOutQuad:(e,t=0)=>1-(1-e)*(1-e)-t*e*(1-e),easeInOutQuad:(e,t=0)=>e<.5?2*e*e+t*e*(1-2*e):1-Math.pow(-2*e+2,2)/2-t*(2*e-1)*(1-Math.pow(-2*e+2,2)/2),easeInCubic:(e,t=0)=>e*e*e+t*e*e*(1-e),easeOutCubic:(e,t=0)=>1-Math.pow(1-e,3)-t*Math.pow(1-e,2)*(1-e),easeInOutCubic:(e,t=0)=>e<.5?4*e*e*e+t*e*e*(1-2*e):1-Math.pow(-2*e+2,3)/2-t*Math.pow(-2*e+2,2)*(2*e-1)/2,easeInQuart:(e,t=0)=>e*e*e*e+t*e*e*e*(1-e),easeOutQuart:(e,t=0)=>1-Math.pow(1-e,4)-t*Math.pow(1-e,3)*(1-e),easeInOutQuart:(e,t=0)=>e<.5?8*e*e*e*e+t*e*e*e*(1-2*e):1-Math.pow(-2*e+2,4)/2-t*Math.pow(-2*e+2,3)*(2*e-1)/2,easeInQuint:(e,t=0)=>e*e*e*e*e+t*e*e*e*e*(1-e),easeOutQuint:(e,t=0)=>1-Math.pow(1-e,5)-t*Math.pow(1-e,4)*(1-e),easeInOutQuint:(e,t=0)=>e<.5?16*e*e*e*e*e+t*e*e*e*e*(1-2*e):1-Math.pow(-2*e+2,5)/2-t*Math.pow(-2*e+2,4)*(2*e-1)/2,easeInExpo:(e,t=0)=>(e===0?0:Math.pow(2,10*e-10))+t*Math.pow(2,10*(e-1)),easeOutExpo:(e,t=0)=>(e===1?1:1-Math.pow(2,-10*e))-t*(1-Math.pow(2,-10*e)),easeInOutExpo:(e,t=0)=>e===0?0:e===1?1:e<.5?Math.pow(2,20*e-10)/2+t*Math.pow(2,20*e-10)/2:(2-Math.pow(2,-20*e+10))/2-t*(2-Math.pow(2,-20*e+10))/2,easeInCirc:(e,t=0)=>1-Math.sqrt(1-Math.pow(e,2))+t*Math.sqrt(1-Math.pow(e,2)),easeOutCirc:(e,t=0)=>Math.sqrt(1-Math.pow(e-1,2))-t*Math.sqrt(1-Math.pow(e-1,2)),easeInOutCirc:(e,t=0)=>e<.5?(1-Math.sqrt(1-Math.pow(2*e,2)))/2+t*(1-Math.sqrt(1-Math.pow(2*e,2)))/2:(Math.sqrt(1-Math.pow(-2*e+2,2))+1)/2-t*(Math.sqrt(1-Math.pow(-2*e+2,2))+1)/2,random:()=>Math.random()},V=Object.keys(I),g=(e,t,r,n=r-r*t/2,u=Math.min(n,1-n))=>[e,u?(r-n)/u:0,n],d=(e,t,r,n)=>n==="hsl"?g(e,t,r):[e,t,r],C=(e,t,r,n,u=[0,0],m=[1,1])=>{let w=Math.PI/2,h=w/r,o=t/r,s=0,a=0;if(e==="lam\xE9"){let p=o*w,b=2/(2+20*n),i=Math.cos(p),M=Math.sin(p);s=Math.sign(i)*Math.abs(i)**b,a=Math.sign(M)*Math.abs(M)**b}else if(e==="arc")a=Math.cos(-Math.PI/2+t*h+n),s=Math.sin(Math.PI/2+t*h-n);else if(e==="pow")s=Math.pow(1-o,1-n),a=Math.pow(o,1-n);else if(e==="powY")s=Math.pow(1-o,n),a=Math.pow(o,1-n);else if(e==="powX")s=Math.pow(o,n),a=Math.pow(o,1-n);else if(typeof e=="function"){let p=e(o,n);s=p[0],a=p[1]}else if(V.includes(e))s=o,a=1-I[e](o,n*-1)||0;else throw new Error(`pointOnCurve() curveAccent parameter is expected to be "lam\xE9" | "arc" | "pow" | "powY" | "powX" or a function but \`${e}\` given.`);return s=u[0]+Math.min(Math.max(s,0),1)*(m[0]-u[0]),a=u[1]+Math.min(Math.max(a,0),1)*(m[1]-u[1]),[s,a]};function X({total:e=3,centerHue:t=0,hueCycle:r=.3,offsetTint:n=.1,offsetShade:u=.1,curveAccent:m=0,tintShadeHueShift:w=.1,curveMethod:h="arc",offsetCurveModTint:o=.03,offsetCurveModShade:s=.03,minSaturationLight:a=[0,0],maxSaturationLight:p=[1,1],colorModel:b="hsl"}={}){let i=[],M=[],c=[];for(let l=1;l<e+1;l++){let[y,P]=C(h,l,e+1,m,a,p),f=(360+(-180*r+(t+l*(360/(e+1))*r)))%360,R=d(f,y,P,b);i.push(R);let[k,T]=C(h,l,e+1,m+o,a,p),O=d(f,k,T,b);M.push([(f+360*w)%360,O[1]-n,O[2]+n]);let[q,E]=C(h,l,e+1,m-s,a,p),S=d(f,q,E,b);c.push([(360+(f-360*w))%360,S[1]-u,S[2]-u])}return{light:M,dark:c,base:i,all:[...M,...i,...c]}}var Y={oklch:e=>[e[2],e[1]*.4,e[0]],lch:e=>[e[2]*100,e[1]*150,e[0]],hsl:e=>[e[0],e[1]*100+"%",e[2]*100+"%"]},L=(e,t="oklch")=>`${t}(${Y[t](e).join(" ")})`,$={curveMethod:{default:"lam\xE9",props:{options:["lam\xE9","arc","pow","powY","powX",...V]}},curveAccent:{default:0,props:{min:-.095,max:1,step:.001}},total:{default:9,props:{min:3,max:35,step:1}},centerHue:{default:0,props:{min:0,max:360,step:.1}},hueCycle:{default:.3,props:{min:-1.25,max:1.5,step:.001}},offsetTint:{default:.01,props:{min:0,max:.4,step:.001}},offsetShade:{default:.01,props:{min:0,max:.4,step:.001}},tintShadeHueShift:{default:.01,props:{min:0,max:1,step:.001}},offsetCurveModTint:{default:.03,props:{min:0,max:.4,step:1e-4}},offsetCurveModShade:{default:.03,props:{min:0,max:.4,step:1e-4}},minSaturation:{default:0,props:{min:-.25,max:1,step:.001}},minLight:{default:0,props:{min:-.25,max:1,step:.001}},maxSaturation:{default:1,props:{min:0,max:1,step:.001}},maxLight:{default:1,props:{min:0,max:1,step:.001}}};
Loading

0 comments on commit e479271

Please sign in to comment.