From 8e37a9a5b6b0fbc554a3583eb007b755f1f4095d Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Wed, 23 Aug 2023 00:39:39 +0200 Subject: [PATCH] css-color : bug fixes --- packages/color-helpers/CHANGELOG.md | 4 + packages/color-helpers/dist/index.cjs | 2 +- packages/color-helpers/dist/index.mjs | 2 +- .../src/conversions/srgb-to-hsl.ts | 2 +- packages/css-color-parser/CHANGELOG.md | 6 + .../css-color-parser/dist/color-data.d.ts | 1 - packages/css-color-parser/dist/index.cjs | 2 +- packages/css-color-parser/dist/index.d.ts | 1 + packages/css-color-parser/dist/index.mjs | 2 +- .../dist/serialize/oklch.d.ts | 3 + .../dist/serialize/with-alpha.d.ts | 4 + packages/css-color-parser/src/color-data.ts | 159 +++++++++--------- .../src/functions/color-mix.ts | 108 +----------- packages/css-color-parser/src/index.ts | 2 +- .../css-color-parser/src/serialize/oklch.ts | 37 ++++ packages/css-color-parser/src/serialize/p3.ts | 47 +----- .../css-color-parser/src/serialize/rgb.ts | 10 +- .../src/serialize/with-alpha.ts | 44 +++++ .../test/basic/color-mix-function-oklch.mjs | 20 +++ .../test/basic/color-mix-function.mjs | 11 ++ packages/css-color-parser/test/test.mjs | 1 + .../css-color-parser/test/util/serialize.mjs | 10 +- .../wpt/color-computed-color-mix-function.mjs | 4 +- .../test/basic.expect.css | 4 +- .../test/basic.preserve-false.expect.css | 4 +- .../test/basic.with-cloned-rules.expect.css | 4 +- 26 files changed, 246 insertions(+), 248 deletions(-) create mode 100644 packages/css-color-parser/dist/serialize/oklch.d.ts create mode 100644 packages/css-color-parser/dist/serialize/with-alpha.d.ts create mode 100644 packages/css-color-parser/src/serialize/oklch.ts create mode 100644 packages/css-color-parser/src/serialize/with-alpha.ts create mode 100644 packages/css-color-parser/test/basic/color-mix-function-oklch.mjs diff --git a/packages/color-helpers/CHANGELOG.md b/packages/color-helpers/CHANGELOG.md index 3e63fca8c..3807fbf0a 100644 --- a/packages/color-helpers/CHANGELOG.md +++ b/packages/color-helpers/CHANGELOG.md @@ -1,5 +1,9 @@ # Changes to Color Helpers +### Unreleased (patch) + +- Clamp negative saturation in `hsl` to `0`. + ### 3.0.0 _July 3, 2023_ diff --git a/packages/color-helpers/dist/index.cjs b/packages/color-helpers/dist/index.cjs index cf3e43108..814718b3c 100644 --- a/packages/color-helpers/dist/index.cjs +++ b/packages/color-helpers/dist/index.cjs @@ -315,7 +315,7 @@ function OKLab_to_OKLCH(t){const _=180*Math.atan2(t[2],t[1])/Math.PI;return[t[0] * @copyright This software or document includes material copied from or derived from https://github.com/w3c/csswg-drafts/blob/main/css-color-4/utilities.js. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang). * * @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/rgbToHsl.js - */function sRGB_to_HSL(t){const _=t[0],o=t[1],n=t[2],r=Math.max(_,o,n),e=Math.min(_,o,n),a=(e+r)/2,i=r-e;let l=NaN,u=0;if(0!==Math.round(1e5*i)){switch(u=0===Math.round(1e5*a)||1e5===Math.round(1e5*a)?0:(r-a)/Math.min(a,1-a),r){case _:l=(o-n)/i+(o; export declare function noneToZeroInRelativeColorDataChannels(x: Map): Map; export declare function colorDataFitsRGB_Gamut(x: ColorData): boolean; diff --git a/packages/css-color-parser/dist/index.cjs b/packages/css-color-parser/dist/index.cjs index c55d85b21..95e6e7ba3 100644 --- a/packages/css-color-parser/dist/index.cjs +++ b/packages/css-color-parser/dist/index.cjs @@ -1 +1 @@ -"use strict";var e,o,a=require("@csstools/css-tokenizer"),n=require("@csstools/color-helpers"),t=require("@csstools/css-parser-algorithms"),r=require("@csstools/css-calc");function colorData_to_XYZ_D50(e){switch(e.colorNotation){case exports.ColorNotation.HEX:case exports.ColorNotation.RGB:case exports.ColorNotation.sRGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Linear_sRGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.lin_sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Display_P3:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.P3_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Rec2020:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.rec_2020_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.A98_RGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.a98_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.ProPhoto_RGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.ProPhoto_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.HSL:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.HSL_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.HWB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.HWB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Lab:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.Lab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.OKLab:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.OKLab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.LCH:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.LCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.OKLCH:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.OKLCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.XYZ_D50:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.XYZ_D50_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.XYZ_D65:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.XYZ_D65_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};default:throw new Error("Unsupported color notation")}}exports.ColorNotation=void 0,(e=exports.ColorNotation||(exports.ColorNotation={})).A98_RGB="a98-rgb",e.Display_P3="display-p3",e.HEX="hex",e.HSL="hsl",e.HWB="hwb",e.LCH="lch",e.Lab="lab",e.Linear_sRGB="srgb-linear",e.OKLCH="oklch",e.OKLab="oklab",e.ProPhoto_RGB="prophoto-rgb",e.RGB="rgb",e.sRGB="srgb",e.Rec2020="rec2020",e.XYZ_D50="xyz-d50",e.XYZ_D65="xyz-d65",exports.SyntaxFlag=void 0,(o=exports.SyntaxFlag||(exports.SyntaxFlag={})).ColorKeyword="color-keyword",o.HasAlpha="has-alpha",o.HasDimensionValues="has-dimension-values",o.HasNoneKeywords="has-none-keywords",o.HasNumberValues="has-number-values",o.HasPercentageAlpha="has-percentage-alpha",o.HasPercentageValues="has-percentage-values",o.HasVariableAlpha="has-variable-alpha",o.Hex="hex",o.LegacyHSL="legacy-hsl",o.LegacyRGB="legacy-rgb",o.NamedColor="named-color",o.RelativeColorSyntax="relative-color-syntax",o.ColorMix="color-mix";const s=new Set([exports.ColorNotation.A98_RGB,exports.ColorNotation.Display_P3,exports.ColorNotation.HEX,exports.ColorNotation.Linear_sRGB,exports.ColorNotation.ProPhoto_RGB,exports.ColorNotation.RGB,exports.ColorNotation.sRGB,exports.ColorNotation.Rec2020,exports.ColorNotation.XYZ_D50,exports.ColorNotation.XYZ_D65]);function colorDataTo(e,o){const a=colorData_to_XYZ_D50(e),t={...e};switch(o){case exports.ColorNotation.HEX:case exports.ColorNotation.RGB:t.colorNotation=exports.ColorNotation.RGB,t.channels=n.xyz.XYZ_D50_to_sRGB(a.channels);break;case exports.ColorNotation.sRGB:t.colorNotation=exports.ColorNotation.sRGB,t.channels=n.xyz.XYZ_D50_to_sRGB(a.channels);break;case exports.ColorNotation.Linear_sRGB:t.colorNotation=exports.ColorNotation.Linear_sRGB,t.channels=n.xyz.XYZ_D50_to_lin_sRGB(a.channels);break;case exports.ColorNotation.Display_P3:t.colorNotation=exports.ColorNotation.Display_P3,t.channels=n.xyz.XYZ_D50_to_P3(a.channels);break;case exports.ColorNotation.Rec2020:t.colorNotation=exports.ColorNotation.Rec2020,t.channels=n.xyz.XYZ_D50_to_rec_2020(a.channels);break;case exports.ColorNotation.ProPhoto_RGB:t.colorNotation=exports.ColorNotation.ProPhoto_RGB,t.channels=n.xyz.XYZ_D50_to_ProPhoto(a.channels);break;case exports.ColorNotation.A98_RGB:t.colorNotation=exports.ColorNotation.A98_RGB,t.channels=n.xyz.XYZ_D50_to_a98_RGB(a.channels);break;case exports.ColorNotation.HSL:t.colorNotation=exports.ColorNotation.HSL,t.channels=n.xyz.XYZ_D50_to_HSL(a.channels);break;case exports.ColorNotation.HWB:t.colorNotation=exports.ColorNotation.HWB,t.channels=n.xyz.XYZ_D50_to_HWB(a.channels);break;case exports.ColorNotation.Lab:t.colorNotation=exports.ColorNotation.Lab,t.channels=n.xyz.XYZ_D50_to_Lab(a.channels);break;case exports.ColorNotation.LCH:t.colorNotation=exports.ColorNotation.LCH,t.channels=n.xyz.XYZ_D50_to_LCH(a.channels);break;case exports.ColorNotation.OKLCH:t.colorNotation=exports.ColorNotation.OKLCH,t.channels=n.xyz.XYZ_D50_to_OKLCH(a.channels);break;case exports.ColorNotation.OKLab:t.colorNotation=exports.ColorNotation.OKLab,t.channels=n.xyz.XYZ_D50_to_OKLab(a.channels);break;case exports.ColorNotation.XYZ_D50:t.colorNotation=exports.ColorNotation.XYZ_D50,t.channels=n.xyz.XYZ_D50_to_XYZ_D50(a.channels);break;case exports.ColorNotation.XYZ_D65:t.colorNotation=exports.ColorNotation.XYZ_D65,t.channels=n.xyz.XYZ_D50_to_XYZ_D65(a.channels);break;default:throw new Error("Unsupported color notation")}if(o===e.colorNotation)t.channels=carryForwardMissingComponents(e.channels,[0,1,2],t.channels,[0,1,2]);else if(s.has(o)&&s.has(e.colorNotation))t.channels=carryForwardMissingComponents(e.channels,[0,1,2],t.channels,[0,1,2]);else switch(o){case exports.ColorNotation.HSL:switch(e.colorNotation){case exports.ColorNotation.HWB:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[0]);break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:t.channels=carryForwardMissingComponents(e.channels,[2],t.channels,[0]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:t.channels=carryForwardMissingComponents(e.channels,[0,1,2],t.channels,[2,1,0])}break;case exports.ColorNotation.HWB:switch(e.colorNotation){case exports.ColorNotation.HSL:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[0]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[2])}break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:switch(e.colorNotation){case exports.ColorNotation.HSL:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[2]);break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:t.channels=carryForwardMissingComponents(e.channels,[0,1,2],t.channels,[0,1,2]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[0])}break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:switch(e.colorNotation){case exports.ColorNotation.HSL:t.channels=carryForwardMissingComponents(e.channels,[0,1,2],t.channels,[2,1,0]);break;case exports.ColorNotation.HWB:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[2]);break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[0]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:t.channels=carryForwardMissingComponents(e.channels,[0,1,2],t.channels,[0,1,2])}}return t.channels=convertPowerlessComponentsToMissingComponents(t.channels,o),t}function convertPowerlessComponentsToMissingComponents(e,o){const a=[...e];switch(o){case exports.ColorNotation.HSL:(reducePrecision(a[2],4)<=0||reducePrecision(a[2],4)>=100)&&(a[0]=NaN,a[1]=NaN),reducePrecision(a[1],4)<=0&&(a[0]=NaN);break;case exports.ColorNotation.HWB:Math.max(0,reducePrecision(a[1],4))+Math.max(0,reducePrecision(a[2],4))>=100&&(a[0]=NaN);break;case exports.ColorNotation.LCH:reducePrecision(a[1],4)<=0&&(a[2]=NaN);break;case exports.ColorNotation.OKLCH:reducePrecision(a[1],6)<=0&&(a[2]=NaN)}return a}function convertPowerlessComponentsToZeroValuesForDisplay(e,o){const a=[...e];switch(o){case exports.ColorNotation.HSL:(reducePrecision(a[2])<=0||reducePrecision(a[2])>=100)&&(a[0]=NaN,a[1]=NaN),reducePrecision(a[1])<=0&&(a[0]=NaN);break;case exports.ColorNotation.HWB:Math.max(0,reducePrecision(a[1]))+Math.max(0,reducePrecision(a[2]))>=100&&(a[0]=NaN);break;case exports.ColorNotation.Lab:(reducePrecision(a[0])<=0||reducePrecision(a[0])>=100)&&(a[1]=NaN,a[2]=NaN);break;case exports.ColorNotation.LCH:reducePrecision(a[1])<=0&&(a[2]=NaN),(reducePrecision(a[0])<=0||reducePrecision(a[0])>=100)&&(a[1]=NaN,a[2]=NaN);break;case exports.ColorNotation.OKLab:(reducePrecision(a[0])<=0||reducePrecision(a[0])>=1)&&(a[1]=NaN,a[2]=NaN);break;case exports.ColorNotation.OKLCH:reducePrecision(a[1])<=0&&(a[2]=NaN),(reducePrecision(a[0])<=0||reducePrecision(a[0])>=1)&&(a[1]=NaN,a[2]=NaN)}return a}function carryForwardMissingComponents(e,o,a,n){const t=[...a];for(const a of o)Number.isNaN(e[o[a]])&&(t[n[a]]=NaN);return t}function fillInMissingComponents(e,o){const a=[...e];for(let n=0;nString.fromCharCode(e.charCodeAt(0)+32)))}function normalize_Color_ChannelValues(e,o){const n=[];for(let t=0;t=0){i=u.value[4].value;continue}}return!1}if(!l)return!1;n.push({color:l,percentage:i}),l=!1,i=!1}}if(l&&n.push({color:l,percentage:i}),2!==n.length)return!1;let u=n[0].percentage,c=n[1].percentage;return(!1===u||!(u<0||u>100))&&((!1===c||!(c<0||c>100))&&(!1===u&&!1===c?(u=50,c=50):!1!==u&&!1===c?c=100-u:!1===u&&!1!==c&&(u=100-c),(0!==u||0!==c)&&(!1!==u&&!1!==c&&(u+c>100&&(u=u/(u+c)*100,c=c/(u+c)*100),u+c<100&&(s=(u+c)/100,u=u/(u+c)*100,c=c/(u+c)*100),{a:{color:n[0].color,percentage:u},b:{color:n[1].color,percentage:c},alphaMultiplier:s}))))}function colorMixRectangular(e,o){if(!o)return!1;const a=o.a.color,n=o.b.color,t=o.a.percentage/100;let r=a.channels,s=n.channels,l=exports.ColorNotation.RGB,i=a.alpha;if("number"!=typeof i)return!1;let u=n.alpha;if("number"!=typeof u)return!1;switch(i=Number.isNaN(i)?u:i,u=Number.isNaN(u)?i:u,e){case"srgb":l=exports.ColorNotation.RGB,a.colorNotation!==exports.ColorNotation.RGB&&a.colorNotation!==exports.ColorNotation.sRGB&&a.colorNotation!==exports.ColorNotation.HEX&&(r=colorDataTo(a,exports.ColorNotation.RGB).channels),n.colorNotation!==exports.ColorNotation.RGB&&n.colorNotation!==exports.ColorNotation.sRGB&&n.colorNotation!==exports.ColorNotation.HEX&&(s=colorDataTo(n,exports.ColorNotation.RGB).channels);break;case"srgb-linear":l=exports.ColorNotation.Linear_sRGB,a.colorNotation!==exports.ColorNotation.Linear_sRGB&&(r=colorDataTo(a,exports.ColorNotation.Linear_sRGB).channels),n.colorNotation!==exports.ColorNotation.Linear_sRGB&&(s=colorDataTo(n,exports.ColorNotation.Linear_sRGB).channels);break;case"lab":l=exports.ColorNotation.Lab,a.colorNotation!==exports.ColorNotation.Lab&&(r=colorDataTo(a,exports.ColorNotation.Lab).channels),n.colorNotation!==exports.ColorNotation.Lab&&(s=colorDataTo(n,exports.ColorNotation.Lab).channels);break;case"oklab":l=exports.ColorNotation.OKLab,a.colorNotation!==exports.ColorNotation.OKLab&&(r=colorDataTo(a,exports.ColorNotation.OKLab).channels),n.colorNotation!==exports.ColorNotation.OKLab&&(s=colorDataTo(n,exports.ColorNotation.OKLab).channels);break;case"xyz-d50":l=exports.ColorNotation.XYZ_D50,a.colorNotation!==exports.ColorNotation.XYZ_D50&&(r=colorDataTo(a,exports.ColorNotation.XYZ_D50).channels),n.colorNotation!==exports.ColorNotation.XYZ_D50&&(s=colorDataTo(n,exports.ColorNotation.XYZ_D50).channels);break;case"xyz":case"xyz-d65":l=exports.ColorNotation.XYZ_D65,a.colorNotation!==exports.ColorNotation.XYZ_D65&&(r=colorDataTo(a,exports.ColorNotation.XYZ_D65).channels),n.colorNotation!==exports.ColorNotation.XYZ_D65&&(s=colorDataTo(n,exports.ColorNotation.XYZ_D65).channels)}r=fillInMissingComponents(r,s),s=fillInMissingComponents(s,r),r[0]=premultiply(r[0],i),r[1]=premultiply(r[1],i),r[2]=premultiply(r[2],i),s[0]=premultiply(s[0],u),s[1]=premultiply(s[1],u),s[2]=premultiply(s[2],u);const c=interpolate(i,u,t);return{colorNotation:l,channels:[un_premultiply(interpolate(r[0],s[0],t),c),un_premultiply(interpolate(r[1],s[1],t),c),un_premultiply(interpolate(r[2],s[2],t),c)],alpha:c*o.alphaMultiplier,syntaxFlags:new Set([exports.SyntaxFlag.ColorMix])}}function colorMixPolar(e,o,a){if(!a)return!1;const n=a.a.color,t=a.b.color,r=a.a.percentage/100;let s=n.channels,l=t.channels,i=0,u=0,c=0,p=0,N=0,m=0,h=exports.ColorNotation.RGB,x=n.alpha;if("number"!=typeof x)return!1;let y=t.alpha;if("number"!=typeof y)return!1;switch(x=Number.isNaN(x)?y:x,y=Number.isNaN(y)?x:y,e){case"hsl":h=exports.ColorNotation.HSL,n.colorNotation!==exports.ColorNotation.HSL&&(s=colorDataTo(n,exports.ColorNotation.HSL).channels),t.colorNotation!==exports.ColorNotation.HSL&&(l=colorDataTo(t,exports.ColorNotation.HSL).channels);break;case"hwb":h=exports.ColorNotation.HWB,n.colorNotation!==exports.ColorNotation.HWB&&(s=colorDataTo(n,exports.ColorNotation.HWB).channels),t.colorNotation!==exports.ColorNotation.HWB&&(l=colorDataTo(t,exports.ColorNotation.HWB).channels);break;case"lch":h=exports.ColorNotation.LCH,n.colorNotation!==exports.ColorNotation.LCH&&(s=colorDataTo(n,exports.ColorNotation.LCH).channels),t.colorNotation!==exports.ColorNotation.LCH&&(l=colorDataTo(t,exports.ColorNotation.LCH).channels);break;case"oklch":h=exports.ColorNotation.OKLCH,n.colorNotation!==exports.ColorNotation.OKLCH&&(s=colorDataTo(n,exports.ColorNotation.OKLCH).channels),t.colorNotation!==exports.ColorNotation.OKLCH&&(l=colorDataTo(t,exports.ColorNotation.OKLCH).channels)}switch(s=fillInMissingComponents(s,l),l=fillInMissingComponents(l,s),e){case"hsl":case"hwb":i=s[0],u=l[0],c=s[1],p=l[1],N=s[2],m=l[2];break;case"lch":case"oklch":c=s[0],p=l[0],N=s[1],m=l[1],i=s[2],u=l[2]}const C=u-i;switch(o){case"shorter":C>180?i+=360:C<-180&&(u+=360);break;case"longer":-1800?i+=360:u+=360);break;case"increasing":C<0&&(u+=360);break;case"decreasing":C>0&&(i+=360);break;default:throw new Error("Unknown hue interpolation method")}c=premultiply(c,x),N=premultiply(N,x),p=premultiply(p,y),m=premultiply(m,y);let b=[0,0,0];const T=interpolate(x,y,r);switch(e){case"hsl":case"hwb":b=[interpolate(i,u,r),un_premultiply(interpolate(c,p,r),T),un_premultiply(interpolate(N,m,r),T)];break;case"lch":case"oklch":b=[un_premultiply(interpolate(c,p,r),T),un_premultiply(interpolate(N,m,r),T),interpolate(i,u,r)]}return{colorNotation:h,channels:b,alpha:T*a.alphaMultiplier,syntaxFlags:new Set([exports.SyntaxFlag.ColorMix])}}function interpolate(e,o,a){return Number.isNaN(e)?o:Number.isNaN(o)?e:e*a+o*(1-a)}function premultiply(e,o){return Number.isNaN(o)?e:Number.isNaN(e)?NaN:e*o}function un_premultiply(e,o){return 0===o||Number.isNaN(o)?e:Number.isNaN(e)?NaN:e/o}function hex(e){const o=toLowerCaseAZ(e[4].value);if(o.match(/[^a-f0-9]/))return!1;const a={colorNotation:exports.ColorNotation.HEX,channels:[0,0,0],alpha:1,syntaxFlags:new Set([exports.SyntaxFlag.Hex])},n=o.length;if(3===n){const e=o[0],n=o[1],t=o[2];return a.channels=[parseInt(e+e,16)/255,parseInt(n+n,16)/255,parseInt(t+t,16)/255],a}if(6===n){const e=o[0]+o[1],n=o[2]+o[3],t=o[4]+o[5];return a.channels=[parseInt(e,16)/255,parseInt(n,16)/255,parseInt(t,16)/255],a}if(4===n){const e=o[0],n=o[1],t=o[2],r=o[3];return a.channels=[parseInt(e+e,16)/255,parseInt(n+n,16)/255,parseInt(t+t,16)/255],a.alpha=parseInt(r+r,16)/255,a.syntaxFlags.add(exports.SyntaxFlag.HasAlpha),a}if(8===n){const e=o[0]+o[1],n=o[2]+o[3],t=o[4]+o[5],r=o[6]+o[7];return a.channels=[parseInt(e,16)/255,parseInt(n,16)/255,parseInt(t,16)/255],a.alpha=parseInt(r,16)/255,a.syntaxFlags.add(exports.SyntaxFlag.HasAlpha),a}return!1}function normalizeHue(e){if(e[0]===a.TokenType.Number)return e[4].value=e[4].value%360,e[1]=e[4].value.toString(),e;if(e[0]===a.TokenType.Dimension){let o=e[4].value;switch(toLowerCaseAZ(e[4].unit)){case"deg":break;case"rad":o=180*e[4].value/Math.PI;break;case"grad":o=.9*e[4].value;break;case"turn":o=360*e[4].value;break;default:return!1}return o%=360,[a.TokenType.Number,o.toString(),e[2],e[3],{value:o,type:a.NumberType.Number}]}return!1}function normalize_legacy_HSL_ChannelValues(e,o){const n=[];for(let t=0;t.999999&&(a=[1,0,0]),n.calculations.mapGamut(a,(e=>(e=n.conversions.OKLCH_to_OKLab(e),e=n.conversions.OKLab_to_XYZ(e),e=n.conversions.XYZ_to_lin_sRGB(e),n.conversions.gam_sRGB(e))),(e=>(e=n.conversions.lin_sRGB(e),e=n.conversions.lin_sRGB_to_XYZ(e),e=n.conversions.XYZ_to_OKLab(e),n.conversions.OKLab_to_OKLCH(e))))}function threeChannelSpaceSeparated(e,o,s,l,i){const u=toLowerCaseAZ(e.getName()),c=[],p=[],N=[],m=[];let h,x,y=!1;const C={colorNotation:s,channels:[0,0,0],alpha:1,syntaxFlags:new Set(l)};let b=c;for(let o=0;ot.isTokenNode(e)&&e.value[0]===a.TokenType.Comma))){const o=hslCommaSeparated(e);if(!1!==o)return o}{const a=hslSpaceSeparated(e,o);if(!1!==a)return a}return!1}function hslCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_HSL_ChannelValues,exports.ColorNotation.HSL,[exports.SyntaxFlag.LegacyHSL])}function hslSpaceSeparated(e,o){return threeChannelSpaceSeparated(e,normalize_modern_HSL_ChannelValues,exports.ColorNotation.HSL,[],o)}function normalize_HWB_ChannelValues(e,o){const n=[];for(let t=0;tt.isTokenNode(e)&&e.value[0]===a.TokenType.Comma))){const o=rgbCommaSeparated(e);if(!1!==o)return o}else{const a=rgbSpaceSeparated(e,o);if(!1!==a)return a}return!1}function rgbCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_sRGB_ChannelValues,exports.ColorNotation.RGB,[exports.SyntaxFlag.LegacyRGB])}function rgbSpaceSeparated(e,o){return threeChannelSpaceSeparated(e,normalize_modern_sRGB_ChannelValues,exports.ColorNotation.RGB,[],o)}function toPrecision(e,o=7){e=+e,o=+o;const a=(Math.floor(e)+"").length;if(o>a)return+e.toFixed(o-a);{const n=10**(a-o);return Math.round(e/n)*n}}function XYZ_D50_to_P3_Gamut(e){const o=n.xyz.XYZ_D50_to_P3(e);if(n.utils.inGamut(o))return n.utils.clip(o);let a=e.slice();return a=n.conversions.D50_to_D65(a),a=n.conversions.XYZ_to_OKLab(a),a=n.conversions.OKLab_to_OKLCH(a),a[0]<1e-6&&(a=[0,0,0]),a[0]>.999999&&(a=[1,0,0]),n.calculations.mapGamut(a,(e=>(e=n.conversions.OKLCH_to_OKLab(e),e=n.conversions.OKLab_to_XYZ(e),e=n.conversions.XYZ_to_lin_P3(e),n.conversions.gam_P3(e))),(e=>(e=n.conversions.lin_P3(e),e=n.conversions.lin_P3_to_XYZ(e),e=n.conversions.XYZ_to_OKLab(e),n.conversions.OKLab_to_OKLCH(e))))}exports.color=function color(e){if(t.isFunctionNode(e)){switch(toLowerCaseAZ(e.getName())){case"rgb":case"rgba":return rgb(e,color);case"hsl":case"hsla":return hsl(e,color);case"hwb":return o=color,threeChannelSpaceSeparated(e,normalize_HWB_ChannelValues,exports.ColorNotation.HWB,[],o);case"lab":return lab(e,color);case"lch":return lch(e,color);case"oklab":return oklab(e,color);case"oklch":return oklch(e,color);case"color":return color$1(e,color);case"color-mix":return colorMix(e,color)}}var o;if(t.isTokenNode(e)){if(e.value[0]===a.TokenType.Hash)return hex(e.value);if(e.value[0]===a.TokenType.Ident){const o=namedColor(e.value[4].value);return!1!==o?o:"transparent"===toLowerCaseAZ(e.value[4].value)&&{colorNotation:exports.ColorNotation.RGB,channels:[0,0,0],alpha:0,syntaxFlags:new Set([exports.SyntaxFlag.ColorKeyword])}}}return!1},exports.colorDataFitsRGB_Gamut=function colorDataFitsRGB_Gamut(e){const o=JSON.parse(JSON.stringify(e));return o.channels=convertPowerlessComponentsToZeroValuesForDisplay(o.channels,o.colorNotation),!colorDataTo(o,exports.ColorNotation.RGB).channels.find((e=>e<-1e-5||e>1.00001))},exports.colorDataTo=colorDataTo,exports.serializeP3=function serializeP3(e,o=!0){e.channels=convertPowerlessComponentsToZeroValuesForDisplay(e.channels,e.colorNotation);let r=e.channels.map((e=>Number.isNaN(e)?0:e));e.colorNotation!==exports.ColorNotation.Display_P3&&(r=o?XYZ_D50_to_P3_Gamut(colorData_to_XYZ_D50(e).channels):n.xyz.XYZ_D50_to_P3(colorData_to_XYZ_D50(e).channels));const s=toPrecision(r[0],6),l=toPrecision(r[1],6),i=toPrecision(r[2],6),u=[a.TokenType.Function,"color(",-1,-1,{value:"color"}],c=[a.TokenType.CloseParen,")",-1,-1,void 0],p=[a.TokenType.Whitespace," ",-1,-1,void 0],N=[new t.TokenNode([a.TokenType.Ident,"display-p3",-1,-1,{value:"display-p3"}]),new t.TokenNode(p),new t.TokenNode([a.TokenType.Number,s.toString(),-1,-1,{value:r[0],type:a.NumberType.Number}]),new t.TokenNode(p),new t.TokenNode([a.TokenType.Number,l.toString(),-1,-1,{value:r[1],type:a.NumberType.Number}]),new t.TokenNode(p),new t.TokenNode([a.TokenType.Number,i.toString(),-1,-1,{value:r[2],type:a.NumberType.Number}])];if("number"==typeof e.alpha){const o=Math.min(1,Math.max(0,toPrecision(Number.isNaN(e.alpha)?0:e.alpha)));return 1===toPrecision(o,4)?new t.FunctionNode(u,c,N):new t.FunctionNode(u,c,[...N,new t.TokenNode(p),new t.TokenNode([a.TokenType.Delim,"/",-1,-1,{value:"/"}]),new t.TokenNode(p),new t.TokenNode([a.TokenType.Number,toPrecision(o,4).toString(),-1,-1,{value:e.alpha,type:a.NumberType.Integer}])])}return new t.FunctionNode(u,c,[...N,new t.TokenNode(p),new t.TokenNode([a.TokenType.Delim,"/",-1,-1,{value:"/"}]),new t.TokenNode(p),e.alpha])},exports.serializeRGB=function serializeRGB(e,o=!0){e.channels=convertPowerlessComponentsToZeroValuesForDisplay(e.channels,e.colorNotation);let r=e.channels.map((e=>Number.isNaN(e)?0:e));e.colorNotation===exports.ColorNotation.HWB?r=n.conversions.HWB_to_sRGB(r):e.colorNotation===exports.ColorNotation.HSL?r=n.conversions.HSL_to_sRGB(r):e.colorNotation!==exports.ColorNotation.RGB&&e.colorNotation!==exports.ColorNotation.HEX&&(r=o?XYZ_D50_to_sRGB_Gamut(colorData_to_XYZ_D50(e).channels):n.xyz.XYZ_D50_to_sRGB(colorData_to_XYZ_D50(e).channels));const s=Math.min(255,Math.max(0,Math.round(255*toPrecision(r[0])))),l=Math.min(255,Math.max(0,Math.round(255*toPrecision(r[1])))),i=Math.min(255,Math.max(0,Math.round(255*toPrecision(r[2])))),u=[a.TokenType.CloseParen,")",-1,-1,void 0],c=[a.TokenType.Whitespace," ",-1,-1,void 0],p=[a.TokenType.Comma,",",-1,-1,void 0],N=[new t.TokenNode([a.TokenType.Number,s.toString(),-1,-1,{value:r[0],type:a.NumberType.Integer}]),new t.TokenNode(p),new t.TokenNode(c),new t.TokenNode([a.TokenType.Number,l.toString(),-1,-1,{value:r[1],type:a.NumberType.Integer}]),new t.TokenNode(p),new t.TokenNode(c),new t.TokenNode([a.TokenType.Number,i.toString(),-1,-1,{value:r[2],type:a.NumberType.Integer}])];if("number"==typeof e.alpha){const o=Math.min(1,Math.max(0,toPrecision(Number.isNaN(e.alpha)?0:e.alpha)));return 1===toPrecision(o,4)?new t.FunctionNode([a.TokenType.Function,"rgb(",-1,-1,{value:"rgb"}],u,N):new t.FunctionNode([a.TokenType.Function,"rgba(",-1,-1,{value:"rgba"}],u,[...N,new t.TokenNode(p),new t.TokenNode(c),new t.TokenNode([a.TokenType.Number,toPrecision(o,4).toString(),-1,-1,{value:e.alpha,type:a.NumberType.Number}])])}return new t.FunctionNode([a.TokenType.Function,"rgba(",-1,-1,{value:"rgba"}],u,[...N,new t.TokenNode(p),new t.TokenNode(c),e.alpha])}; +"use strict";var e,o,a=require("@csstools/css-tokenizer"),n=require("@csstools/color-helpers"),t=require("@csstools/css-parser-algorithms"),r=require("@csstools/css-calc");function colorData_to_XYZ_D50(e){switch(e.colorNotation){case exports.ColorNotation.HEX:case exports.ColorNotation.RGB:case exports.ColorNotation.sRGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Linear_sRGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.lin_sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Display_P3:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.P3_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Rec2020:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.rec_2020_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.A98_RGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.a98_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.ProPhoto_RGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.ProPhoto_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.HSL:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.HSL_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.HWB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.HWB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Lab:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.Lab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.OKLab:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.OKLab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.LCH:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.LCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.OKLCH:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.OKLCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.XYZ_D50:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.XYZ_D50_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.XYZ_D65:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.XYZ_D65_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};default:throw new Error("Unsupported color notation")}}exports.ColorNotation=void 0,(e=exports.ColorNotation||(exports.ColorNotation={})).A98_RGB="a98-rgb",e.Display_P3="display-p3",e.HEX="hex",e.HSL="hsl",e.HWB="hwb",e.LCH="lch",e.Lab="lab",e.Linear_sRGB="srgb-linear",e.OKLCH="oklch",e.OKLab="oklab",e.ProPhoto_RGB="prophoto-rgb",e.RGB="rgb",e.sRGB="srgb",e.Rec2020="rec2020",e.XYZ_D50="xyz-d50",e.XYZ_D65="xyz-d65",exports.SyntaxFlag=void 0,(o=exports.SyntaxFlag||(exports.SyntaxFlag={})).ColorKeyword="color-keyword",o.HasAlpha="has-alpha",o.HasDimensionValues="has-dimension-values",o.HasNoneKeywords="has-none-keywords",o.HasNumberValues="has-number-values",o.HasPercentageAlpha="has-percentage-alpha",o.HasPercentageValues="has-percentage-values",o.HasVariableAlpha="has-variable-alpha",o.Hex="hex",o.LegacyHSL="legacy-hsl",o.LegacyRGB="legacy-rgb",o.NamedColor="named-color",o.RelativeColorSyntax="relative-color-syntax",o.ColorMix="color-mix";const s=new Set([exports.ColorNotation.A98_RGB,exports.ColorNotation.Display_P3,exports.ColorNotation.HEX,exports.ColorNotation.Linear_sRGB,exports.ColorNotation.ProPhoto_RGB,exports.ColorNotation.RGB,exports.ColorNotation.sRGB,exports.ColorNotation.Rec2020,exports.ColorNotation.XYZ_D50,exports.ColorNotation.XYZ_D65]);function colorDataTo(e,o){const a={...e};if(e.colorNotation!==o){const e=colorData_to_XYZ_D50(a);switch(o){case exports.ColorNotation.HEX:case exports.ColorNotation.RGB:a.colorNotation=exports.ColorNotation.RGB,a.channels=n.xyz.XYZ_D50_to_sRGB(e.channels);break;case exports.ColorNotation.sRGB:a.colorNotation=exports.ColorNotation.sRGB,a.channels=n.xyz.XYZ_D50_to_sRGB(e.channels);break;case exports.ColorNotation.Linear_sRGB:a.colorNotation=exports.ColorNotation.Linear_sRGB,a.channels=n.xyz.XYZ_D50_to_lin_sRGB(e.channels);break;case exports.ColorNotation.Display_P3:a.colorNotation=exports.ColorNotation.Display_P3,a.channels=n.xyz.XYZ_D50_to_P3(e.channels);break;case exports.ColorNotation.Rec2020:a.colorNotation=exports.ColorNotation.Rec2020,a.channels=n.xyz.XYZ_D50_to_rec_2020(e.channels);break;case exports.ColorNotation.ProPhoto_RGB:a.colorNotation=exports.ColorNotation.ProPhoto_RGB,a.channels=n.xyz.XYZ_D50_to_ProPhoto(e.channels);break;case exports.ColorNotation.A98_RGB:a.colorNotation=exports.ColorNotation.A98_RGB,a.channels=n.xyz.XYZ_D50_to_a98_RGB(e.channels);break;case exports.ColorNotation.HSL:a.colorNotation=exports.ColorNotation.HSL,a.channels=n.xyz.XYZ_D50_to_HSL(e.channels);break;case exports.ColorNotation.HWB:a.colorNotation=exports.ColorNotation.HWB,a.channels=n.xyz.XYZ_D50_to_HWB(e.channels);break;case exports.ColorNotation.Lab:a.colorNotation=exports.ColorNotation.Lab,a.channels=n.xyz.XYZ_D50_to_Lab(e.channels);break;case exports.ColorNotation.LCH:a.colorNotation=exports.ColorNotation.LCH,a.channels=n.xyz.XYZ_D50_to_LCH(e.channels);break;case exports.ColorNotation.OKLCH:a.colorNotation=exports.ColorNotation.OKLCH,a.channels=n.xyz.XYZ_D50_to_OKLCH(e.channels);break;case exports.ColorNotation.OKLab:a.colorNotation=exports.ColorNotation.OKLab,a.channels=n.xyz.XYZ_D50_to_OKLab(e.channels);break;case exports.ColorNotation.XYZ_D50:a.colorNotation=exports.ColorNotation.XYZ_D50,a.channels=n.xyz.XYZ_D50_to_XYZ_D50(e.channels);break;case exports.ColorNotation.XYZ_D65:a.colorNotation=exports.ColorNotation.XYZ_D65,a.channels=n.xyz.XYZ_D50_to_XYZ_D65(e.channels);break;default:throw new Error("Unsupported color notation")}}else a.channels=e.channels.map((e=>Number.isNaN(e)?0:e));if(o===e.colorNotation)a.channels=carryForwardMissingComponents(e.channels,[0,1,2],a.channels,[0,1,2]);else if(s.has(o)&&s.has(e.colorNotation))a.channels=carryForwardMissingComponents(e.channels,[0,1,2],a.channels,[0,1,2]);else switch(o){case exports.ColorNotation.HSL:switch(e.colorNotation){case exports.ColorNotation.HWB:a.channels=carryForwardMissingComponents(e.channels,[0],a.channels,[0]);break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:a.channels=carryForwardMissingComponents(e.channels,[2],a.channels,[0]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:a.channels=carryForwardMissingComponents(e.channels,[0,1,2],a.channels,[2,1,0])}break;case exports.ColorNotation.HWB:switch(e.colorNotation){case exports.ColorNotation.HSL:a.channels=carryForwardMissingComponents(e.channels,[0],a.channels,[0]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:a.channels=carryForwardMissingComponents(e.channels,[0],a.channels,[2])}break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:switch(e.colorNotation){case exports.ColorNotation.HSL:a.channels=carryForwardMissingComponents(e.channels,[0],a.channels,[2]);break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:a.channels=carryForwardMissingComponents(e.channels,[0,1,2],a.channels,[0,1,2]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:a.channels=carryForwardMissingComponents(e.channels,[0],a.channels,[0])}break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:switch(e.colorNotation){case exports.ColorNotation.HSL:a.channels=carryForwardMissingComponents(e.channels,[0,1,2],a.channels,[2,1,0]);break;case exports.ColorNotation.HWB:a.channels=carryForwardMissingComponents(e.channels,[0],a.channels,[2]);break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:a.channels=carryForwardMissingComponents(e.channels,[0],a.channels,[0]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:a.channels=carryForwardMissingComponents(e.channels,[0,1,2],a.channels,[0,1,2])}}return a.channels=convertPowerlessComponentsToMissingComponents(a.channels,o),a}function convertPowerlessComponentsToMissingComponents(e,o){const a=[...e];switch(o){case exports.ColorNotation.HSL:reducePrecision(a[1],4)<=0&&(a[0]=NaN);break;case exports.ColorNotation.HWB:Math.max(0,reducePrecision(a[1],4))+Math.max(0,reducePrecision(a[2],4))>=100&&(a[0]=NaN);break;case exports.ColorNotation.LCH:reducePrecision(a[1],4)<=0&&(a[2]=NaN);break;case exports.ColorNotation.OKLCH:reducePrecision(a[1],6)<=0&&(a[2]=NaN)}return a}function convertPowerlessComponentsToZeroValuesForDisplay(e,o){const a=[...e];switch(o){case exports.ColorNotation.HSL:(reducePrecision(a[2])<=0||reducePrecision(a[2])>=100)&&(a[0]=NaN,a[1]=NaN),reducePrecision(a[1])<=0&&(a[0]=NaN);break;case exports.ColorNotation.HWB:Math.max(0,reducePrecision(a[1]))+Math.max(0,reducePrecision(a[2]))>=100&&(a[0]=NaN);break;case exports.ColorNotation.Lab:(reducePrecision(a[0])<=0||reducePrecision(a[0])>=100)&&(a[1]=NaN,a[2]=NaN);break;case exports.ColorNotation.LCH:reducePrecision(a[1])<=0&&(a[2]=NaN),(reducePrecision(a[0])<=0||reducePrecision(a[0])>=100)&&(a[1]=NaN,a[2]=NaN);break;case exports.ColorNotation.OKLab:(reducePrecision(a[0])<=0||reducePrecision(a[0])>=1)&&(a[1]=NaN,a[2]=NaN);break;case exports.ColorNotation.OKLCH:reducePrecision(a[1])<=0&&(a[2]=NaN),(reducePrecision(a[0])<=0||reducePrecision(a[0])>=1)&&(a[1]=NaN,a[2]=NaN)}return a}function carryForwardMissingComponents(e,o,a,n){const t=[...a];for(const a of o)Number.isNaN(e[o[a]])&&(t[n[a]]=NaN);return t}function normalizeRelativeColorDataChannels(e){const o=new Map;switch(e.colorNotation){case exports.ColorNotation.RGB:case exports.ColorNotation.HEX:o.set("r",dummyNumberToken(255*e.channels[0])),o.set("g",dummyNumberToken(255*e.channels[1])),o.set("b",dummyNumberToken(255*e.channels[2])),"number"==typeof e.alpha&&o.set("alpha",dummyNumberToken(e.alpha));break;case exports.ColorNotation.HSL:o.set("h",dummyNumberToken(e.channels[0])),o.set("s",dummyNumberToken(e.channels[1])),o.set("l",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&o.set("alpha",dummyNumberToken(e.alpha));break;case exports.ColorNotation.HWB:o.set("h",dummyNumberToken(e.channels[0])),o.set("w",dummyNumberToken(e.channels[1])),o.set("b",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&o.set("alpha",dummyNumberToken(e.alpha));break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:o.set("l",dummyNumberToken(e.channels[0])),o.set("a",dummyNumberToken(e.channels[1])),o.set("b",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&o.set("alpha",dummyNumberToken(e.alpha));break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:o.set("l",dummyNumberToken(e.channels[0])),o.set("c",dummyNumberToken(e.channels[1])),o.set("h",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&o.set("alpha",dummyNumberToken(e.alpha));break;case exports.ColorNotation.sRGB:case exports.ColorNotation.A98_RGB:case exports.ColorNotation.Display_P3:case exports.ColorNotation.Rec2020:case exports.ColorNotation.Linear_sRGB:case exports.ColorNotation.ProPhoto_RGB:o.set("r",dummyNumberToken(e.channels[0])),o.set("g",dummyNumberToken(e.channels[1])),o.set("b",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&o.set("alpha",dummyNumberToken(e.alpha));break;case exports.ColorNotation.XYZ_D50:case exports.ColorNotation.XYZ_D65:o.set("x",dummyNumberToken(e.channels[0])),o.set("y",dummyNumberToken(e.channels[1])),o.set("z",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&o.set("alpha",dummyNumberToken(e.alpha))}return o}function noneToZeroInRelativeColorDataChannels(e){const o=new Map;for(const[a,n]of e)Number.isNaN(n[4].value)?o.set(a,dummyNumberToken(0)):o.set(a,n);return o}function dummyNumberToken(e){return[a.TokenType.Number,e.toString(),-1,-1,{value:e,type:a.NumberType.Number}]}function reducePrecision(e,o=7){if(Number.isNaN(e))return 0;const a=Math.pow(10,o);return Math.round(e*a)/a}function normalize(e,o,a,n){return Math.min(Math.max(e/o,a),n)}const l=/[A-Z]/g;function toLowerCaseAZ(e){return e.replace(l,(e=>String.fromCharCode(e.charCodeAt(0)+32)))}function normalize_Color_ChannelValues(e,o){const n=[];for(let t=0;t=0){i=u.value[4].value;continue}}return!1}if(!l)return!1;n.push({color:l,percentage:i}),l=!1,i=!1}}if(l&&n.push({color:l,percentage:i}),2!==n.length)return!1;let u=n[0].percentage,c=n[1].percentage;return(!1===u||!(u<0||u>100))&&((!1===c||!(c<0||c>100))&&(!1===u&&!1===c?(u=50,c=50):!1!==u&&!1===c?c=100-u:!1===u&&!1!==c&&(u=100-c),(0!==u||0!==c)&&(!1!==u&&!1!==c&&(u+c>100&&(u=u/(u+c)*100,c=c/(u+c)*100),u+c<100&&(s=(u+c)/100,u=u/(u+c)*100,c=c/(u+c)*100),{a:{color:n[0].color,percentage:u},b:{color:n[1].color,percentage:c},alphaMultiplier:s}))))}function colorMixRectangular(e,o){if(!o)return!1;const a=o.a.color,n=o.b.color,t=o.a.percentage/100;let r=a.channels,s=n.channels,l=exports.ColorNotation.RGB,i=a.alpha;if("number"!=typeof i)return!1;let u=n.alpha;if("number"!=typeof u)return!1;switch(i=Number.isNaN(i)?u:i,u=Number.isNaN(u)?i:u,e){case"srgb":l=exports.ColorNotation.RGB;break;case"srgb-linear":l=exports.ColorNotation.Linear_sRGB;break;case"lab":l=exports.ColorNotation.Lab;break;case"oklab":l=exports.ColorNotation.OKLab;break;case"xyz-d50":l=exports.ColorNotation.XYZ_D50;break;case"xyz":case"xyz-d65":l=exports.ColorNotation.XYZ_D65}r=colorDataTo(a,l).channels,s=colorDataTo(n,l).channels,r[0]=premultiply(r[0],i),r[1]=premultiply(r[1],i),r[2]=premultiply(r[2],i),s[0]=premultiply(s[0],u),s[1]=premultiply(s[1],u),s[2]=premultiply(s[2],u);const c=interpolate(i,u,t);return{colorNotation:l,channels:[un_premultiply(interpolate(r[0],s[0],t),c),un_premultiply(interpolate(r[1],s[1],t),c),un_premultiply(interpolate(r[2],s[2],t),c)],alpha:c*o.alphaMultiplier,syntaxFlags:new Set([exports.SyntaxFlag.ColorMix])}}function colorMixPolar(e,o,a){if(!a)return!1;const n=a.a.color,t=a.b.color,r=a.a.percentage/100;let s=n.channels,l=t.channels,i=0,u=0,c=0,p=0,N=0,m=0,h=exports.ColorNotation.RGB,y=n.alpha;if("number"!=typeof y)return!1;let x=t.alpha;if("number"!=typeof x)return!1;switch(y=Number.isNaN(y)?x:y,x=Number.isNaN(x)?y:x,e){case"hsl":h=exports.ColorNotation.HSL;break;case"hwb":h=exports.ColorNotation.HWB;break;case"lch":h=exports.ColorNotation.LCH;break;case"oklch":h=exports.ColorNotation.OKLCH}switch(s=colorDataTo(n,h).channels,l=colorDataTo(t,h).channels,e){case"hsl":case"hwb":i=s[0],u=l[0],c=s[1],p=l[1],N=s[2],m=l[2];break;case"lch":case"oklch":c=s[0],p=l[0],N=s[1],m=l[1],i=s[2],u=l[2]}const b=u-i;switch(o){case"shorter":b>180?i+=360:b<-180&&(u+=360);break;case"longer":-1800?i+=360:u+=360);break;case"increasing":b<0&&(u+=360);break;case"decreasing":b>0&&(i+=360);break;default:throw new Error("Unknown hue interpolation method")}c=premultiply(c,y),N=premultiply(N,y),p=premultiply(p,x),m=premultiply(m,x);let T=[0,0,0];const C=interpolate(y,x,r);switch(e){case"hsl":case"hwb":T=[interpolate(i,u,r),un_premultiply(interpolate(c,p,r),C),un_premultiply(interpolate(N,m,r),C)];break;case"lch":case"oklch":T=[un_premultiply(interpolate(c,p,r),C),un_premultiply(interpolate(N,m,r),C),interpolate(i,u,r)]}return{colorNotation:h,channels:T,alpha:C*a.alphaMultiplier,syntaxFlags:new Set([exports.SyntaxFlag.ColorMix])}}function interpolate(e,o,a){return Number.isNaN(e)?o:Number.isNaN(o)?e:e*a+o*(1-a)}function premultiply(e,o){return Number.isNaN(o)?e:Number.isNaN(e)?NaN:e*o}function un_premultiply(e,o){return 0===o||Number.isNaN(o)?e:Number.isNaN(e)?NaN:e/o}function hex(e){const o=toLowerCaseAZ(e[4].value);if(o.match(/[^a-f0-9]/))return!1;const a={colorNotation:exports.ColorNotation.HEX,channels:[0,0,0],alpha:1,syntaxFlags:new Set([exports.SyntaxFlag.Hex])},n=o.length;if(3===n){const e=o[0],n=o[1],t=o[2];return a.channels=[parseInt(e+e,16)/255,parseInt(n+n,16)/255,parseInt(t+t,16)/255],a}if(6===n){const e=o[0]+o[1],n=o[2]+o[3],t=o[4]+o[5];return a.channels=[parseInt(e,16)/255,parseInt(n,16)/255,parseInt(t,16)/255],a}if(4===n){const e=o[0],n=o[1],t=o[2],r=o[3];return a.channels=[parseInt(e+e,16)/255,parseInt(n+n,16)/255,parseInt(t+t,16)/255],a.alpha=parseInt(r+r,16)/255,a.syntaxFlags.add(exports.SyntaxFlag.HasAlpha),a}if(8===n){const e=o[0]+o[1],n=o[2]+o[3],t=o[4]+o[5],r=o[6]+o[7];return a.channels=[parseInt(e,16)/255,parseInt(n,16)/255,parseInt(t,16)/255],a.alpha=parseInt(r,16)/255,a.syntaxFlags.add(exports.SyntaxFlag.HasAlpha),a}return!1}function normalizeHue(e){if(e[0]===a.TokenType.Number)return e[4].value=e[4].value%360,e[1]=e[4].value.toString(),e;if(e[0]===a.TokenType.Dimension){let o=e[4].value;switch(toLowerCaseAZ(e[4].unit)){case"deg":break;case"rad":o=180*e[4].value/Math.PI;break;case"grad":o=.9*e[4].value;break;case"turn":o=360*e[4].value;break;default:return!1}return o%=360,[a.TokenType.Number,o.toString(),e[2],e[3],{value:o,type:a.NumberType.Number}]}return!1}function normalize_legacy_HSL_ChannelValues(e,o){const n=[];for(let t=0;t.999999&&(a=[1,0,0]),n.calculations.mapGamut(a,(e=>(e=n.conversions.OKLCH_to_OKLab(e),e=n.conversions.OKLab_to_XYZ(e),e=n.conversions.XYZ_to_lin_sRGB(e),n.conversions.gam_sRGB(e))),(e=>(e=n.conversions.lin_sRGB(e),e=n.conversions.lin_sRGB_to_XYZ(e),e=n.conversions.XYZ_to_OKLab(e),n.conversions.OKLab_to_OKLCH(e))))}function threeChannelSpaceSeparated(e,o,s,l,i){const u=toLowerCaseAZ(e.getName()),c=[],p=[],N=[],m=[];let h,y,x=!1;const b={colorNotation:s,channels:[0,0,0],alpha:1,syntaxFlags:new Set(l)};let T=c;for(let o=0;ot.isTokenNode(e)&&e.value[0]===a.TokenType.Comma))){const o=hslCommaSeparated(e);if(!1!==o)return o}{const a=hslSpaceSeparated(e,o);if(!1!==a)return a}return!1}function hslCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_HSL_ChannelValues,exports.ColorNotation.HSL,[exports.SyntaxFlag.LegacyHSL])}function hslSpaceSeparated(e,o){return threeChannelSpaceSeparated(e,normalize_modern_HSL_ChannelValues,exports.ColorNotation.HSL,[],o)}function normalize_HWB_ChannelValues(e,o){const n=[];for(let t=0;tt.isTokenNode(e)&&e.value[0]===a.TokenType.Comma))){const o=rgbCommaSeparated(e);if(!1!==o)return o}else{const a=rgbSpaceSeparated(e,o);if(!1!==a)return a}return!1}function rgbCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_sRGB_ChannelValues,exports.ColorNotation.RGB,[exports.SyntaxFlag.LegacyRGB])}function rgbSpaceSeparated(e,o){return threeChannelSpaceSeparated(e,normalize_modern_sRGB_ChannelValues,exports.ColorNotation.RGB,[],o)}function toPrecision(e,o=7){e=+e,o=+o;const a=(Math.floor(e)+"").length;if(o>a)return+e.toFixed(o-a);{const n=10**(a-o);return Math.round(e/n)*n}}function XYZ_D50_to_P3_Gamut(e){const o=n.xyz.XYZ_D50_to_P3(e);if(n.utils.inGamut(o))return n.utils.clip(o);let a=e.slice();return a=n.conversions.D50_to_D65(a),a=n.conversions.XYZ_to_OKLab(a),a=n.conversions.OKLab_to_OKLCH(a),a[0]<1e-6&&(a=[0,0,0]),a[0]>.999999&&(a=[1,0,0]),n.calculations.mapGamut(a,(e=>(e=n.conversions.OKLCH_to_OKLab(e),e=n.conversions.OKLab_to_XYZ(e),e=n.conversions.XYZ_to_lin_P3(e),n.conversions.gam_P3(e))),(e=>(e=n.conversions.lin_P3(e),e=n.conversions.lin_P3_to_XYZ(e),e=n.conversions.XYZ_to_OKLab(e),n.conversions.OKLab_to_OKLCH(e))))}function serializeWithAlpha(e,o,n,r){const s=[a.TokenType.CloseParen,")",-1,-1,void 0];if("number"==typeof e.alpha){const l=Math.min(1,Math.max(0,toPrecision(Number.isNaN(e.alpha)?0:e.alpha)));return 1===toPrecision(l,4)?new t.FunctionNode(o,s,r):new t.FunctionNode(o,s,[...r,new t.WhitespaceNode([n]),new t.TokenNode([a.TokenType.Delim,"/",-1,-1,{value:"/"}]),new t.WhitespaceNode([n]),new t.TokenNode([a.TokenType.Number,toPrecision(l,4).toString(),-1,-1,{value:e.alpha,type:a.NumberType.Integer}])])}return new t.FunctionNode(o,s,[...r,new t.WhitespaceNode([n]),new t.TokenNode([a.TokenType.Delim,"/",-1,-1,{value:"/"}]),new t.WhitespaceNode([n]),e.alpha])}exports.color=function color(e){if(t.isFunctionNode(e)){switch(toLowerCaseAZ(e.getName())){case"rgb":case"rgba":return rgb(e,color);case"hsl":case"hsla":return hsl(e,color);case"hwb":return o=color,threeChannelSpaceSeparated(e,normalize_HWB_ChannelValues,exports.ColorNotation.HWB,[],o);case"lab":return lab(e,color);case"lch":return lch(e,color);case"oklab":return oklab(e,color);case"oklch":return oklch(e,color);case"color":return color$1(e,color);case"color-mix":return colorMix(e,color)}}var o;if(t.isTokenNode(e)){if(e.value[0]===a.TokenType.Hash)return hex(e.value);if(e.value[0]===a.TokenType.Ident){const o=namedColor(e.value[4].value);return!1!==o?o:"transparent"===toLowerCaseAZ(e.value[4].value)&&{colorNotation:exports.ColorNotation.RGB,channels:[0,0,0],alpha:0,syntaxFlags:new Set([exports.SyntaxFlag.ColorKeyword])}}}return!1},exports.colorDataFitsRGB_Gamut=function colorDataFitsRGB_Gamut(e){const o=JSON.parse(JSON.stringify(e));return o.channels=convertPowerlessComponentsToZeroValuesForDisplay(o.channels,o.colorNotation),!colorDataTo(o,exports.ColorNotation.RGB).channels.find((e=>e<-1e-5||e>1.00001))},exports.colorDataTo=colorDataTo,exports.serializeOKLCH=function serializeOKLCH(e){e.channels=convertPowerlessComponentsToZeroValuesForDisplay(e.channels,e.colorNotation);let o=e.channels.map((e=>Number.isNaN(e)?0:e));e.colorNotation!==exports.ColorNotation.OKLCH&&(o=n.xyz.XYZ_D50_to_OKLCH(colorData_to_XYZ_D50(e).channels));const r=toPrecision(o[0],6),s=toPrecision(o[1],6),l=toPrecision(o[2],6),i=[a.TokenType.Function,"oklch(",-1,-1,{value:"oklch"}],u=[a.TokenType.Whitespace," ",-1,-1,void 0];return serializeWithAlpha(e,i,u,[new t.TokenNode([a.TokenType.Number,r.toString(),-1,-1,{value:o[0],type:a.NumberType.Number}]),new t.WhitespaceNode([u]),new t.TokenNode([a.TokenType.Number,s.toString(),-1,-1,{value:o[1],type:a.NumberType.Number}]),new t.WhitespaceNode([u]),new t.TokenNode([a.TokenType.Number,l.toString(),-1,-1,{value:o[2],type:a.NumberType.Number}])])},exports.serializeP3=function serializeP3(e,o=!0){e.channels=convertPowerlessComponentsToZeroValuesForDisplay(e.channels,e.colorNotation);let r=e.channels.map((e=>Number.isNaN(e)?0:e));e.colorNotation!==exports.ColorNotation.Display_P3&&(r=o?XYZ_D50_to_P3_Gamut(colorData_to_XYZ_D50(e).channels):n.xyz.XYZ_D50_to_P3(colorData_to_XYZ_D50(e).channels));const s=toPrecision(r[0],6),l=toPrecision(r[1],6),i=toPrecision(r[2],6),u=[a.TokenType.Function,"color(",-1,-1,{value:"color"}],c=[a.TokenType.Whitespace," ",-1,-1,void 0];return serializeWithAlpha(e,u,c,[new t.TokenNode([a.TokenType.Ident,"display-p3",-1,-1,{value:"display-p3"}]),new t.WhitespaceNode([c]),new t.TokenNode([a.TokenType.Number,s.toString(),-1,-1,{value:r[0],type:a.NumberType.Number}]),new t.WhitespaceNode([c]),new t.TokenNode([a.TokenType.Number,l.toString(),-1,-1,{value:r[1],type:a.NumberType.Number}]),new t.WhitespaceNode([c]),new t.TokenNode([a.TokenType.Number,i.toString(),-1,-1,{value:r[2],type:a.NumberType.Number}])])},exports.serializeRGB=function serializeRGB(e,o=!0){e.channels=convertPowerlessComponentsToZeroValuesForDisplay(e.channels,e.colorNotation);let r=e.channels.map((e=>Number.isNaN(e)?0:e));e.colorNotation===exports.ColorNotation.HWB?r=n.conversions.HWB_to_sRGB(r):e.colorNotation===exports.ColorNotation.HSL?r=n.conversions.HSL_to_sRGB(r):e.colorNotation!==exports.ColorNotation.RGB&&e.colorNotation!==exports.ColorNotation.HEX&&(r=o?XYZ_D50_to_sRGB_Gamut(colorData_to_XYZ_D50(e).channels):n.xyz.XYZ_D50_to_sRGB(colorData_to_XYZ_D50(e).channels));const s=Math.min(255,Math.max(0,Math.round(255*toPrecision(r[0])))),l=Math.min(255,Math.max(0,Math.round(255*toPrecision(r[1])))),i=Math.min(255,Math.max(0,Math.round(255*toPrecision(r[2])))),u=[a.TokenType.CloseParen,")",-1,-1,void 0],c=[a.TokenType.Whitespace," ",-1,-1,void 0],p=[a.TokenType.Comma,",",-1,-1,void 0],N=[new t.TokenNode([a.TokenType.Number,s.toString(),-1,-1,{value:r[0],type:a.NumberType.Integer}]),new t.TokenNode(p),new t.WhitespaceNode([c]),new t.TokenNode([a.TokenType.Number,l.toString(),-1,-1,{value:r[1],type:a.NumberType.Integer}]),new t.TokenNode(p),new t.WhitespaceNode([c]),new t.TokenNode([a.TokenType.Number,i.toString(),-1,-1,{value:r[2],type:a.NumberType.Integer}])];if("number"==typeof e.alpha){const o=Math.min(1,Math.max(0,toPrecision(Number.isNaN(e.alpha)?0:e.alpha)));return 1===toPrecision(o,4)?new t.FunctionNode([a.TokenType.Function,"rgb(",-1,-1,{value:"rgb"}],u,N):new t.FunctionNode([a.TokenType.Function,"rgba(",-1,-1,{value:"rgba"}],u,[...N,new t.TokenNode(p),new t.WhitespaceNode([c]),new t.TokenNode([a.TokenType.Number,toPrecision(o,4).toString(),-1,-1,{value:e.alpha,type:a.NumberType.Number}])])}return new t.FunctionNode([a.TokenType.Function,"rgba(",-1,-1,{value:"rgba"}],u,[...N,new t.TokenNode(p),new t.WhitespaceNode([c]),e.alpha])}; diff --git a/packages/css-color-parser/dist/index.d.ts b/packages/css-color-parser/dist/index.d.ts index 4b6f7737e..9eb76378f 100644 --- a/packages/css-color-parser/dist/index.d.ts +++ b/packages/css-color-parser/dist/index.d.ts @@ -6,4 +6,5 @@ export { SyntaxFlag } from './color-data'; export { colorDataTo, colorDataFitsRGB_Gamut } from './color-data'; export { serializeP3 } from './serialize/p3'; export { serializeRGB } from './serialize/rgb'; +export { serializeOKLCH } from './serialize/oklch'; export declare function color(colorNode: ComponentValue): ColorData | false; diff --git a/packages/css-color-parser/dist/index.mjs b/packages/css-color-parser/dist/index.mjs index 5be34ea70..bb552a197 100644 --- a/packages/css-color-parser/dist/index.mjs +++ b/packages/css-color-parser/dist/index.mjs @@ -1 +1 @@ -import{TokenType as e,NumberType as a}from"@csstools/css-tokenizer";import{xyz as n,utils as o,conversions as r,calculations as t,namedColors as l}from"@csstools/color-helpers";import{isWhitespaceNode as s,isCommentNode as c,isTokenNode as u,isFunctionNode as i,TokenNode as h,FunctionNode as m}from"@csstools/css-parser-algorithms";import{mathFunctionNames as N,calcFromComponentValues as p}from"@csstools/css-calc";var b,_;function colorData_to_XYZ_D50(e){switch(e.colorNotation){case b.HEX:case b.RGB:case b.sRGB:return{...e,colorNotation:b.XYZ_D50,channels:n.sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.Linear_sRGB:return{...e,colorNotation:b.XYZ_D50,channels:n.lin_sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.Display_P3:return{...e,colorNotation:b.XYZ_D50,channels:n.P3_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.Rec2020:return{...e,colorNotation:b.XYZ_D50,channels:n.rec_2020_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.A98_RGB:return{...e,colorNotation:b.XYZ_D50,channels:n.a98_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.ProPhoto_RGB:return{...e,colorNotation:b.XYZ_D50,channels:n.ProPhoto_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.HSL:return{...e,colorNotation:b.XYZ_D50,channels:n.HSL_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.HWB:return{...e,colorNotation:b.XYZ_D50,channels:n.HWB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.Lab:return{...e,colorNotation:b.XYZ_D50,channels:n.Lab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.OKLab:return{...e,colorNotation:b.XYZ_D50,channels:n.OKLab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.LCH:return{...e,colorNotation:b.XYZ_D50,channels:n.LCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.OKLCH:return{...e,colorNotation:b.XYZ_D50,channels:n.OKLCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.XYZ_D50:return{...e,colorNotation:b.XYZ_D50,channels:n.XYZ_D50_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.XYZ_D65:return{...e,colorNotation:b.XYZ_D50,channels:n.XYZ_D65_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};default:throw new Error("Unsupported color notation")}}!function(e){e.A98_RGB="a98-rgb",e.Display_P3="display-p3",e.HEX="hex",e.HSL="hsl",e.HWB="hwb",e.LCH="lch",e.Lab="lab",e.Linear_sRGB="srgb-linear",e.OKLCH="oklch",e.OKLab="oklab",e.ProPhoto_RGB="prophoto-rgb",e.RGB="rgb",e.sRGB="srgb",e.Rec2020="rec2020",e.XYZ_D50="xyz-d50",e.XYZ_D65="xyz-d65"}(b||(b={})),function(e){e.ColorKeyword="color-keyword",e.HasAlpha="has-alpha",e.HasDimensionValues="has-dimension-values",e.HasNoneKeywords="has-none-keywords",e.HasNumberValues="has-number-values",e.HasPercentageAlpha="has-percentage-alpha",e.HasPercentageValues="has-percentage-values",e.HasVariableAlpha="has-variable-alpha",e.Hex="hex",e.LegacyHSL="legacy-hsl",e.LegacyRGB="legacy-rgb",e.NamedColor="named-color",e.RelativeColorSyntax="relative-color-syntax",e.ColorMix="color-mix"}(_||(_={}));const g=new Set([b.A98_RGB,b.Display_P3,b.HEX,b.Linear_sRGB,b.ProPhoto_RGB,b.RGB,b.sRGB,b.Rec2020,b.XYZ_D50,b.XYZ_D65]);function colorDataTo(e,a){const o=colorData_to_XYZ_D50(e),r={...e};switch(a){case b.HEX:case b.RGB:r.colorNotation=b.RGB,r.channels=n.XYZ_D50_to_sRGB(o.channels);break;case b.sRGB:r.colorNotation=b.sRGB,r.channels=n.XYZ_D50_to_sRGB(o.channels);break;case b.Linear_sRGB:r.colorNotation=b.Linear_sRGB,r.channels=n.XYZ_D50_to_lin_sRGB(o.channels);break;case b.Display_P3:r.colorNotation=b.Display_P3,r.channels=n.XYZ_D50_to_P3(o.channels);break;case b.Rec2020:r.colorNotation=b.Rec2020,r.channels=n.XYZ_D50_to_rec_2020(o.channels);break;case b.ProPhoto_RGB:r.colorNotation=b.ProPhoto_RGB,r.channels=n.XYZ_D50_to_ProPhoto(o.channels);break;case b.A98_RGB:r.colorNotation=b.A98_RGB,r.channels=n.XYZ_D50_to_a98_RGB(o.channels);break;case b.HSL:r.colorNotation=b.HSL,r.channels=n.XYZ_D50_to_HSL(o.channels);break;case b.HWB:r.colorNotation=b.HWB,r.channels=n.XYZ_D50_to_HWB(o.channels);break;case b.Lab:r.colorNotation=b.Lab,r.channels=n.XYZ_D50_to_Lab(o.channels);break;case b.LCH:r.colorNotation=b.LCH,r.channels=n.XYZ_D50_to_LCH(o.channels);break;case b.OKLCH:r.colorNotation=b.OKLCH,r.channels=n.XYZ_D50_to_OKLCH(o.channels);break;case b.OKLab:r.colorNotation=b.OKLab,r.channels=n.XYZ_D50_to_OKLab(o.channels);break;case b.XYZ_D50:r.colorNotation=b.XYZ_D50,r.channels=n.XYZ_D50_to_XYZ_D50(o.channels);break;case b.XYZ_D65:r.colorNotation=b.XYZ_D65,r.channels=n.XYZ_D50_to_XYZ_D65(o.channels);break;default:throw new Error("Unsupported color notation")}if(a===e.colorNotation)r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[0,1,2]);else if(g.has(a)&&g.has(e.colorNotation))r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[0,1,2]);else switch(a){case b.HSL:switch(e.colorNotation){case b.HWB:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0]);break;case b.Lab:case b.OKLab:r.channels=carryForwardMissingComponents(e.channels,[2],r.channels,[0]);break;case b.LCH:case b.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[2,1,0])}break;case b.HWB:switch(e.colorNotation){case b.HSL:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0]);break;case b.LCH:case b.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[2])}break;case b.Lab:case b.OKLab:switch(e.colorNotation){case b.HSL:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[2]);break;case b.Lab:case b.OKLab:r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[0,1,2]);break;case b.LCH:case b.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0])}break;case b.LCH:case b.OKLCH:switch(e.colorNotation){case b.HSL:r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[2,1,0]);break;case b.HWB:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[2]);break;case b.Lab:case b.OKLab:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0]);break;case b.LCH:case b.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[0,1,2])}}return r.channels=convertPowerlessComponentsToMissingComponents(r.channels,a),r}function convertPowerlessComponentsToMissingComponents(e,a){const n=[...e];switch(a){case b.HSL:(reducePrecision(n[2],4)<=0||reducePrecision(n[2],4)>=100)&&(n[0]=NaN,n[1]=NaN),reducePrecision(n[1],4)<=0&&(n[0]=NaN);break;case b.HWB:Math.max(0,reducePrecision(n[1],4))+Math.max(0,reducePrecision(n[2],4))>=100&&(n[0]=NaN);break;case b.LCH:reducePrecision(n[1],4)<=0&&(n[2]=NaN);break;case b.OKLCH:reducePrecision(n[1],6)<=0&&(n[2]=NaN)}return n}function convertPowerlessComponentsToZeroValuesForDisplay(e,a){const n=[...e];switch(a){case b.HSL:(reducePrecision(n[2])<=0||reducePrecision(n[2])>=100)&&(n[0]=NaN,n[1]=NaN),reducePrecision(n[1])<=0&&(n[0]=NaN);break;case b.HWB:Math.max(0,reducePrecision(n[1]))+Math.max(0,reducePrecision(n[2]))>=100&&(n[0]=NaN);break;case b.Lab:(reducePrecision(n[0])<=0||reducePrecision(n[0])>=100)&&(n[1]=NaN,n[2]=NaN);break;case b.LCH:reducePrecision(n[1])<=0&&(n[2]=NaN),(reducePrecision(n[0])<=0||reducePrecision(n[0])>=100)&&(n[1]=NaN,n[2]=NaN);break;case b.OKLab:(reducePrecision(n[0])<=0||reducePrecision(n[0])>=1)&&(n[1]=NaN,n[2]=NaN);break;case b.OKLCH:reducePrecision(n[1])<=0&&(n[2]=NaN),(reducePrecision(n[0])<=0||reducePrecision(n[0])>=1)&&(n[1]=NaN,n[2]=NaN)}return n}function carryForwardMissingComponents(e,a,n,o){const r=[...n];for(const n of a)Number.isNaN(e[a[n]])&&(r[o[n]]=NaN);return r}function fillInMissingComponents(e,a){const n=[...e];for(let o=0;oe<-1e-5||e>1.00001))}function normalize(e,a,n,o){return Math.min(Math.max(e/a,n),o)}const d=/[A-Z]/g;function toLowerCaseAZ(e){return e.replace(d,(e=>String.fromCharCode(e.charCodeAt(0)+32)))}function normalize_Color_ChannelValues(n,o){const r=[];for(let t=0;t=0){l=h.value[4].value;continue}}return!1}if(!t)return!1;o.push({color:t,percentage:l}),t=!1,l=!1}}if(t&&o.push({color:t,percentage:l}),2!==o.length)return!1;let h=o[0].percentage,m=o[1].percentage;return(!1===h||!(h<0||h>100))&&((!1===m||!(m<0||m>100))&&(!1===h&&!1===m?(h=50,m=50):!1!==h&&!1===m?m=100-h:!1===h&&!1!==m&&(h=100-m),(0!==h||0!==m)&&(!1!==h&&!1!==m&&(h+m>100&&(h=h/(h+m)*100,m=m/(h+m)*100),h+m<100&&(r=(h+m)/100,h=h/(h+m)*100,m=m/(h+m)*100),{a:{color:o[0].color,percentage:h},b:{color:o[1].color,percentage:m},alphaMultiplier:r}))))}function colorMixRectangular(e,a){if(!a)return!1;const n=a.a.color,o=a.b.color,r=a.a.percentage/100;let t=n.channels,l=o.channels,s=b.RGB,c=n.alpha;if("number"!=typeof c)return!1;let u=o.alpha;if("number"!=typeof u)return!1;switch(c=Number.isNaN(c)?u:c,u=Number.isNaN(u)?c:u,e){case"srgb":s=b.RGB,n.colorNotation!==b.RGB&&n.colorNotation!==b.sRGB&&n.colorNotation!==b.HEX&&(t=colorDataTo(n,b.RGB).channels),o.colorNotation!==b.RGB&&o.colorNotation!==b.sRGB&&o.colorNotation!==b.HEX&&(l=colorDataTo(o,b.RGB).channels);break;case"srgb-linear":s=b.Linear_sRGB,n.colorNotation!==b.Linear_sRGB&&(t=colorDataTo(n,b.Linear_sRGB).channels),o.colorNotation!==b.Linear_sRGB&&(l=colorDataTo(o,b.Linear_sRGB).channels);break;case"lab":s=b.Lab,n.colorNotation!==b.Lab&&(t=colorDataTo(n,b.Lab).channels),o.colorNotation!==b.Lab&&(l=colorDataTo(o,b.Lab).channels);break;case"oklab":s=b.OKLab,n.colorNotation!==b.OKLab&&(t=colorDataTo(n,b.OKLab).channels),o.colorNotation!==b.OKLab&&(l=colorDataTo(o,b.OKLab).channels);break;case"xyz-d50":s=b.XYZ_D50,n.colorNotation!==b.XYZ_D50&&(t=colorDataTo(n,b.XYZ_D50).channels),o.colorNotation!==b.XYZ_D50&&(l=colorDataTo(o,b.XYZ_D50).channels);break;case"xyz":case"xyz-d65":s=b.XYZ_D65,n.colorNotation!==b.XYZ_D65&&(t=colorDataTo(n,b.XYZ_D65).channels),o.colorNotation!==b.XYZ_D65&&(l=colorDataTo(o,b.XYZ_D65).channels)}t=fillInMissingComponents(t,l),l=fillInMissingComponents(l,t),t[0]=premultiply(t[0],c),t[1]=premultiply(t[1],c),t[2]=premultiply(t[2],c),l[0]=premultiply(l[0],u),l[1]=premultiply(l[1],u),l[2]=premultiply(l[2],u);const i=interpolate(c,u,r);return{colorNotation:s,channels:[un_premultiply(interpolate(t[0],l[0],r),i),un_premultiply(interpolate(t[1],l[1],r),i),un_premultiply(interpolate(t[2],l[2],r),i)],alpha:i*a.alphaMultiplier,syntaxFlags:new Set([_.ColorMix])}}function colorMixPolar(e,a,n){if(!n)return!1;const o=n.a.color,r=n.b.color,t=n.a.percentage/100;let l=o.channels,s=r.channels,c=0,u=0,i=0,h=0,m=0,N=0,p=b.RGB,g=o.alpha;if("number"!=typeof g)return!1;let d=r.alpha;if("number"!=typeof d)return!1;switch(g=Number.isNaN(g)?d:g,d=Number.isNaN(d)?g:d,e){case"hsl":p=b.HSL,o.colorNotation!==b.HSL&&(l=colorDataTo(o,b.HSL).channels),r.colorNotation!==b.HSL&&(s=colorDataTo(r,b.HSL).channels);break;case"hwb":p=b.HWB,o.colorNotation!==b.HWB&&(l=colorDataTo(o,b.HWB).channels),r.colorNotation!==b.HWB&&(s=colorDataTo(r,b.HWB).channels);break;case"lch":p=b.LCH,o.colorNotation!==b.LCH&&(l=colorDataTo(o,b.LCH).channels),r.colorNotation!==b.LCH&&(s=colorDataTo(r,b.LCH).channels);break;case"oklch":p=b.OKLCH,o.colorNotation!==b.OKLCH&&(l=colorDataTo(o,b.OKLCH).channels),r.colorNotation!==b.OKLCH&&(s=colorDataTo(r,b.OKLCH).channels)}switch(l=fillInMissingComponents(l,s),s=fillInMissingComponents(s,l),e){case"hsl":case"hwb":c=l[0],u=s[0],i=l[1],h=s[1],m=l[2],N=s[2];break;case"lch":case"oklch":i=l[0],h=s[0],m=l[1],N=s[1],c=l[2],u=s[2]}const v=u-c;switch(a){case"shorter":v>180?c+=360:v<-180&&(u+=360);break;case"longer":-1800?c+=360:u+=360);break;case"increasing":v<0&&(u+=360);break;case"decreasing":v>0&&(c+=360);break;default:throw new Error("Unknown hue interpolation method")}i=premultiply(i,g),m=premultiply(m,g),h=premultiply(h,d),N=premultiply(N,d);let f=[0,0,0];const y=interpolate(g,d,t);switch(e){case"hsl":case"hwb":f=[interpolate(c,u,t),un_premultiply(interpolate(i,h,t),y),un_premultiply(interpolate(m,N,t),y)];break;case"lch":case"oklch":f=[un_premultiply(interpolate(i,h,t),y),un_premultiply(interpolate(m,N,t),y),interpolate(c,u,t)]}return{colorNotation:p,channels:f,alpha:y*n.alphaMultiplier,syntaxFlags:new Set([_.ColorMix])}}function interpolate(e,a,n){return Number.isNaN(e)?a:Number.isNaN(a)?e:e*n+a*(1-n)}function premultiply(e,a){return Number.isNaN(a)?e:Number.isNaN(e)?NaN:e*a}function un_premultiply(e,a){return 0===a||Number.isNaN(a)?e:Number.isNaN(e)?NaN:e/a}function hex(e){const a=toLowerCaseAZ(e[4].value);if(a.match(/[^a-f0-9]/))return!1;const n={colorNotation:b.HEX,channels:[0,0,0],alpha:1,syntaxFlags:new Set([_.Hex])},o=a.length;if(3===o){const e=a[0],o=a[1],r=a[2];return n.channels=[parseInt(e+e,16)/255,parseInt(o+o,16)/255,parseInt(r+r,16)/255],n}if(6===o){const e=a[0]+a[1],o=a[2]+a[3],r=a[4]+a[5];return n.channels=[parseInt(e,16)/255,parseInt(o,16)/255,parseInt(r,16)/255],n}if(4===o){const e=a[0],o=a[1],r=a[2],t=a[3];return n.channels=[parseInt(e+e,16)/255,parseInt(o+o,16)/255,parseInt(r+r,16)/255],n.alpha=parseInt(t+t,16)/255,n.syntaxFlags.add(_.HasAlpha),n}if(8===o){const e=a[0]+a[1],o=a[2]+a[3],r=a[4]+a[5],t=a[6]+a[7];return n.channels=[parseInt(e,16)/255,parseInt(o,16)/255,parseInt(r,16)/255],n.alpha=parseInt(t,16)/255,n.syntaxFlags.add(_.HasAlpha),n}return!1}function normalizeHue(n){if(n[0]===e.Number)return n[4].value=n[4].value%360,n[1]=n[4].value.toString(),n;if(n[0]===e.Dimension){let o=n[4].value;switch(toLowerCaseAZ(n[4].unit)){case"deg":break;case"rad":o=180*n[4].value/Math.PI;break;case"grad":o=.9*n[4].value;break;case"turn":o=360*n[4].value;break;default:return!1}return o%=360,[e.Number,o.toString(),n[2],n[3],{value:o,type:a.Number}]}return!1}function normalize_legacy_HSL_ChannelValues(n,o){const r=[];for(let t=0;t.999999&&(l=[1,0,0]),t.mapGamut(l,(e=>(e=r.OKLCH_to_OKLab(e),e=r.OKLab_to_XYZ(e),e=r.XYZ_to_lin_sRGB(e),r.gam_sRGB(e))),(e=>(e=r.lin_sRGB(e),e=r.lin_sRGB_to_XYZ(e),e=r.XYZ_to_OKLab(e),r.OKLab_to_OKLCH(e))))}function threeChannelSpaceSeparated(a,n,o,t,l){const m=toLowerCaseAZ(a.getName()),g=[],d=[],v=[],f=[];let y,C,L=!1;const H={colorNotation:o,channels:[0,0,0],alpha:1,syntaxFlags:new Set(t)};let D=g;for(let n=0;nu(a)&&a.value[0]===e.Comma))){const e=hslCommaSeparated(a);if(!1!==e)return e}{const e=hslSpaceSeparated(a,n);if(!1!==e)return e}return!1}function hslCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_HSL_ChannelValues,b.HSL,[_.LegacyHSL])}function hslSpaceSeparated(e,a){return threeChannelSpaceSeparated(e,normalize_modern_HSL_ChannelValues,b.HSL,[],a)}function normalize_HWB_ChannelValues(n,o){const r=[];for(let t=0;tu(a)&&a.value[0]===e.Comma))){const e=rgbCommaSeparated(a);if(!1!==e)return e}else{const e=rgbSpaceSeparated(a,n);if(!1!==e)return e}return!1}function rgbCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_sRGB_ChannelValues,b.RGB,[_.LegacyRGB])}function rgbSpaceSeparated(e,a){return threeChannelSpaceSeparated(e,normalize_modern_sRGB_ChannelValues,b.RGB,[],a)}function toPrecision(e,a=7){e=+e,a=+a;const n=(Math.floor(e)+"").length;if(a>n)return+e.toFixed(a-n);{const o=10**(n-a);return Math.round(e/o)*o}}function XYZ_D50_to_P3_Gamut(e){const a=n.XYZ_D50_to_P3(e);if(o.inGamut(a))return o.clip(a);let l=e.slice();return l=r.D50_to_D65(l),l=r.XYZ_to_OKLab(l),l=r.OKLab_to_OKLCH(l),l[0]<1e-6&&(l=[0,0,0]),l[0]>.999999&&(l=[1,0,0]),t.mapGamut(l,(e=>(e=r.OKLCH_to_OKLab(e),e=r.OKLab_to_XYZ(e),e=r.XYZ_to_lin_P3(e),r.gam_P3(e))),(e=>(e=r.lin_P3(e),e=r.lin_P3_to_XYZ(e),e=r.XYZ_to_OKLab(e),r.OKLab_to_OKLCH(e))))}function serializeP3(o,r=!0){o.channels=convertPowerlessComponentsToZeroValuesForDisplay(o.channels,o.colorNotation);let t=o.channels.map((e=>Number.isNaN(e)?0:e));o.colorNotation!==b.Display_P3&&(t=r?XYZ_D50_to_P3_Gamut(colorData_to_XYZ_D50(o).channels):n.XYZ_D50_to_P3(colorData_to_XYZ_D50(o).channels));const l=toPrecision(t[0],6),s=toPrecision(t[1],6),c=toPrecision(t[2],6),u=[e.Function,"color(",-1,-1,{value:"color"}],i=[e.CloseParen,")",-1,-1,void 0],N=[e.Whitespace," ",-1,-1,void 0],p=[new h([e.Ident,"display-p3",-1,-1,{value:"display-p3"}]),new h(N),new h([e.Number,l.toString(),-1,-1,{value:t[0],type:a.Number}]),new h(N),new h([e.Number,s.toString(),-1,-1,{value:t[1],type:a.Number}]),new h(N),new h([e.Number,c.toString(),-1,-1,{value:t[2],type:a.Number}])];if("number"==typeof o.alpha){const n=Math.min(1,Math.max(0,toPrecision(Number.isNaN(o.alpha)?0:o.alpha)));return 1===toPrecision(n,4)?new m(u,i,p):new m(u,i,[...p,new h(N),new h([e.Delim,"/",-1,-1,{value:"/"}]),new h(N),new h([e.Number,toPrecision(n,4).toString(),-1,-1,{value:o.alpha,type:a.Integer}])])}return new m(u,i,[...p,new h(N),new h([e.Delim,"/",-1,-1,{value:"/"}]),new h(N),o.alpha])}function serializeRGB(o,t=!0){o.channels=convertPowerlessComponentsToZeroValuesForDisplay(o.channels,o.colorNotation);let l=o.channels.map((e=>Number.isNaN(e)?0:e));o.colorNotation===b.HWB?l=r.HWB_to_sRGB(l):o.colorNotation===b.HSL?l=r.HSL_to_sRGB(l):o.colorNotation!==b.RGB&&o.colorNotation!==b.HEX&&(l=t?XYZ_D50_to_sRGB_Gamut(colorData_to_XYZ_D50(o).channels):n.XYZ_D50_to_sRGB(colorData_to_XYZ_D50(o).channels));const s=Math.min(255,Math.max(0,Math.round(255*toPrecision(l[0])))),c=Math.min(255,Math.max(0,Math.round(255*toPrecision(l[1])))),u=Math.min(255,Math.max(0,Math.round(255*toPrecision(l[2])))),i=[e.CloseParen,")",-1,-1,void 0],N=[e.Whitespace," ",-1,-1,void 0],p=[e.Comma,",",-1,-1,void 0],_=[new h([e.Number,s.toString(),-1,-1,{value:l[0],type:a.Integer}]),new h(p),new h(N),new h([e.Number,c.toString(),-1,-1,{value:l[1],type:a.Integer}]),new h(p),new h(N),new h([e.Number,u.toString(),-1,-1,{value:l[2],type:a.Integer}])];if("number"==typeof o.alpha){const n=Math.min(1,Math.max(0,toPrecision(Number.isNaN(o.alpha)?0:o.alpha)));return 1===toPrecision(n,4)?new m([e.Function,"rgb(",-1,-1,{value:"rgb"}],i,_):new m([e.Function,"rgba(",-1,-1,{value:"rgba"}],i,[..._,new h(p),new h(N),new h([e.Number,toPrecision(n,4).toString(),-1,-1,{value:o.alpha,type:a.Number}])])}return new m([e.Function,"rgba(",-1,-1,{value:"rgba"}],i,[..._,new h(p),new h(N),o.alpha])}function color(a){if(i(a)){switch(toLowerCaseAZ(a.getName())){case"rgb":case"rgba":return rgb(a,color);case"hsl":case"hsla":return hsl(a,color);case"hwb":return n=color,threeChannelSpaceSeparated(a,normalize_HWB_ChannelValues,b.HWB,[],n);case"lab":return lab(a,color);case"lch":return lch(a,color);case"oklab":return oklab(a,color);case"oklch":return oklch(a,color);case"color":return color$1(a,color);case"color-mix":return colorMix(a,color)}}var n;if(u(a)){if(a.value[0]===e.Hash)return hex(a.value);if(a.value[0]===e.Ident){const e=namedColor(a.value[4].value);return!1!==e?e:"transparent"===toLowerCaseAZ(a.value[4].value)&&{colorNotation:b.RGB,channels:[0,0,0],alpha:0,syntaxFlags:new Set([_.ColorKeyword])}}}return!1}export{b as ColorNotation,_ as SyntaxFlag,color,colorDataFitsRGB_Gamut,colorDataTo,serializeP3,serializeRGB}; +import{TokenType as e,NumberType as a}from"@csstools/css-tokenizer";import{xyz as n,utils as r,conversions as o,calculations as t,namedColors as l}from"@csstools/color-helpers";import{isWhitespaceNode as s,isCommentNode as u,isTokenNode as c,isFunctionNode as i,TokenNode as h,FunctionNode as m,WhitespaceNode as p}from"@csstools/css-parser-algorithms";import{mathFunctionNames as N,calcFromComponentValues as b}from"@csstools/css-calc";var _,g;function colorData_to_XYZ_D50(e){switch(e.colorNotation){case _.HEX:case _.RGB:case _.sRGB:return{...e,colorNotation:_.XYZ_D50,channels:n.sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.Linear_sRGB:return{...e,colorNotation:_.XYZ_D50,channels:n.lin_sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.Display_P3:return{...e,colorNotation:_.XYZ_D50,channels:n.P3_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.Rec2020:return{...e,colorNotation:_.XYZ_D50,channels:n.rec_2020_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.A98_RGB:return{...e,colorNotation:_.XYZ_D50,channels:n.a98_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.ProPhoto_RGB:return{...e,colorNotation:_.XYZ_D50,channels:n.ProPhoto_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.HSL:return{...e,colorNotation:_.XYZ_D50,channels:n.HSL_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.HWB:return{...e,colorNotation:_.XYZ_D50,channels:n.HWB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.Lab:return{...e,colorNotation:_.XYZ_D50,channels:n.Lab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.OKLab:return{...e,colorNotation:_.XYZ_D50,channels:n.OKLab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.LCH:return{...e,colorNotation:_.XYZ_D50,channels:n.LCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.OKLCH:return{...e,colorNotation:_.XYZ_D50,channels:n.OKLCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.XYZ_D50:return{...e,colorNotation:_.XYZ_D50,channels:n.XYZ_D50_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.XYZ_D65:return{...e,colorNotation:_.XYZ_D50,channels:n.XYZ_D65_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};default:throw new Error("Unsupported color notation")}}!function(e){e.A98_RGB="a98-rgb",e.Display_P3="display-p3",e.HEX="hex",e.HSL="hsl",e.HWB="hwb",e.LCH="lch",e.Lab="lab",e.Linear_sRGB="srgb-linear",e.OKLCH="oklch",e.OKLab="oklab",e.ProPhoto_RGB="prophoto-rgb",e.RGB="rgb",e.sRGB="srgb",e.Rec2020="rec2020",e.XYZ_D50="xyz-d50",e.XYZ_D65="xyz-d65"}(_||(_={})),function(e){e.ColorKeyword="color-keyword",e.HasAlpha="has-alpha",e.HasDimensionValues="has-dimension-values",e.HasNoneKeywords="has-none-keywords",e.HasNumberValues="has-number-values",e.HasPercentageAlpha="has-percentage-alpha",e.HasPercentageValues="has-percentage-values",e.HasVariableAlpha="has-variable-alpha",e.Hex="hex",e.LegacyHSL="legacy-hsl",e.LegacyRGB="legacy-rgb",e.NamedColor="named-color",e.RelativeColorSyntax="relative-color-syntax",e.ColorMix="color-mix"}(g||(g={}));const v=new Set([_.A98_RGB,_.Display_P3,_.HEX,_.Linear_sRGB,_.ProPhoto_RGB,_.RGB,_.sRGB,_.Rec2020,_.XYZ_D50,_.XYZ_D65]);function colorDataTo(e,a){const r={...e};if(e.colorNotation!==a){const e=colorData_to_XYZ_D50(r);switch(a){case _.HEX:case _.RGB:r.colorNotation=_.RGB,r.channels=n.XYZ_D50_to_sRGB(e.channels);break;case _.sRGB:r.colorNotation=_.sRGB,r.channels=n.XYZ_D50_to_sRGB(e.channels);break;case _.Linear_sRGB:r.colorNotation=_.Linear_sRGB,r.channels=n.XYZ_D50_to_lin_sRGB(e.channels);break;case _.Display_P3:r.colorNotation=_.Display_P3,r.channels=n.XYZ_D50_to_P3(e.channels);break;case _.Rec2020:r.colorNotation=_.Rec2020,r.channels=n.XYZ_D50_to_rec_2020(e.channels);break;case _.ProPhoto_RGB:r.colorNotation=_.ProPhoto_RGB,r.channels=n.XYZ_D50_to_ProPhoto(e.channels);break;case _.A98_RGB:r.colorNotation=_.A98_RGB,r.channels=n.XYZ_D50_to_a98_RGB(e.channels);break;case _.HSL:r.colorNotation=_.HSL,r.channels=n.XYZ_D50_to_HSL(e.channels);break;case _.HWB:r.colorNotation=_.HWB,r.channels=n.XYZ_D50_to_HWB(e.channels);break;case _.Lab:r.colorNotation=_.Lab,r.channels=n.XYZ_D50_to_Lab(e.channels);break;case _.LCH:r.colorNotation=_.LCH,r.channels=n.XYZ_D50_to_LCH(e.channels);break;case _.OKLCH:r.colorNotation=_.OKLCH,r.channels=n.XYZ_D50_to_OKLCH(e.channels);break;case _.OKLab:r.colorNotation=_.OKLab,r.channels=n.XYZ_D50_to_OKLab(e.channels);break;case _.XYZ_D50:r.colorNotation=_.XYZ_D50,r.channels=n.XYZ_D50_to_XYZ_D50(e.channels);break;case _.XYZ_D65:r.colorNotation=_.XYZ_D65,r.channels=n.XYZ_D50_to_XYZ_D65(e.channels);break;default:throw new Error("Unsupported color notation")}}else r.channels=e.channels.map((e=>Number.isNaN(e)?0:e));if(a===e.colorNotation)r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[0,1,2]);else if(v.has(a)&&v.has(e.colorNotation))r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[0,1,2]);else switch(a){case _.HSL:switch(e.colorNotation){case _.HWB:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0]);break;case _.Lab:case _.OKLab:r.channels=carryForwardMissingComponents(e.channels,[2],r.channels,[0]);break;case _.LCH:case _.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[2,1,0])}break;case _.HWB:switch(e.colorNotation){case _.HSL:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0]);break;case _.LCH:case _.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[2])}break;case _.Lab:case _.OKLab:switch(e.colorNotation){case _.HSL:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[2]);break;case _.Lab:case _.OKLab:r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[0,1,2]);break;case _.LCH:case _.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0])}break;case _.LCH:case _.OKLCH:switch(e.colorNotation){case _.HSL:r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[2,1,0]);break;case _.HWB:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[2]);break;case _.Lab:case _.OKLab:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0]);break;case _.LCH:case _.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[0,1,2])}}return r.channels=convertPowerlessComponentsToMissingComponents(r.channels,a),r}function convertPowerlessComponentsToMissingComponents(e,a){const n=[...e];switch(a){case _.HSL:reducePrecision(n[1],4)<=0&&(n[0]=NaN);break;case _.HWB:Math.max(0,reducePrecision(n[1],4))+Math.max(0,reducePrecision(n[2],4))>=100&&(n[0]=NaN);break;case _.LCH:reducePrecision(n[1],4)<=0&&(n[2]=NaN);break;case _.OKLCH:reducePrecision(n[1],6)<=0&&(n[2]=NaN)}return n}function convertPowerlessComponentsToZeroValuesForDisplay(e,a){const n=[...e];switch(a){case _.HSL:(reducePrecision(n[2])<=0||reducePrecision(n[2])>=100)&&(n[0]=NaN,n[1]=NaN),reducePrecision(n[1])<=0&&(n[0]=NaN);break;case _.HWB:Math.max(0,reducePrecision(n[1]))+Math.max(0,reducePrecision(n[2]))>=100&&(n[0]=NaN);break;case _.Lab:(reducePrecision(n[0])<=0||reducePrecision(n[0])>=100)&&(n[1]=NaN,n[2]=NaN);break;case _.LCH:reducePrecision(n[1])<=0&&(n[2]=NaN),(reducePrecision(n[0])<=0||reducePrecision(n[0])>=100)&&(n[1]=NaN,n[2]=NaN);break;case _.OKLab:(reducePrecision(n[0])<=0||reducePrecision(n[0])>=1)&&(n[1]=NaN,n[2]=NaN);break;case _.OKLCH:reducePrecision(n[1])<=0&&(n[2]=NaN),(reducePrecision(n[0])<=0||reducePrecision(n[0])>=1)&&(n[1]=NaN,n[2]=NaN)}return n}function carryForwardMissingComponents(e,a,n,r){const o=[...n];for(const n of a)Number.isNaN(e[a[n]])&&(o[r[n]]=NaN);return o}function normalizeRelativeColorDataChannels(e){const a=new Map;switch(e.colorNotation){case _.RGB:case _.HEX:a.set("r",dummyNumberToken(255*e.channels[0])),a.set("g",dummyNumberToken(255*e.channels[1])),a.set("b",dummyNumberToken(255*e.channels[2])),"number"==typeof e.alpha&&a.set("alpha",dummyNumberToken(e.alpha));break;case _.HSL:a.set("h",dummyNumberToken(e.channels[0])),a.set("s",dummyNumberToken(e.channels[1])),a.set("l",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&a.set("alpha",dummyNumberToken(e.alpha));break;case _.HWB:a.set("h",dummyNumberToken(e.channels[0])),a.set("w",dummyNumberToken(e.channels[1])),a.set("b",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&a.set("alpha",dummyNumberToken(e.alpha));break;case _.Lab:case _.OKLab:a.set("l",dummyNumberToken(e.channels[0])),a.set("a",dummyNumberToken(e.channels[1])),a.set("b",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&a.set("alpha",dummyNumberToken(e.alpha));break;case _.LCH:case _.OKLCH:a.set("l",dummyNumberToken(e.channels[0])),a.set("c",dummyNumberToken(e.channels[1])),a.set("h",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&a.set("alpha",dummyNumberToken(e.alpha));break;case _.sRGB:case _.A98_RGB:case _.Display_P3:case _.Rec2020:case _.Linear_sRGB:case _.ProPhoto_RGB:a.set("r",dummyNumberToken(e.channels[0])),a.set("g",dummyNumberToken(e.channels[1])),a.set("b",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&a.set("alpha",dummyNumberToken(e.alpha));break;case _.XYZ_D50:case _.XYZ_D65:a.set("x",dummyNumberToken(e.channels[0])),a.set("y",dummyNumberToken(e.channels[1])),a.set("z",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&a.set("alpha",dummyNumberToken(e.alpha))}return a}function noneToZeroInRelativeColorDataChannels(e){const a=new Map;for(const[n,r]of e)Number.isNaN(r[4].value)?a.set(n,dummyNumberToken(0)):a.set(n,r);return a}function dummyNumberToken(n){return[e.Number,n.toString(),-1,-1,{value:n,type:a.Number}]}function reducePrecision(e,a=7){if(Number.isNaN(e))return 0;const n=Math.pow(10,a);return Math.round(e*n)/n}function colorDataFitsRGB_Gamut(e){const a=JSON.parse(JSON.stringify(e));a.channels=convertPowerlessComponentsToZeroValuesForDisplay(a.channels,a.colorNotation);return!colorDataTo(a,_.RGB).channels.find((e=>e<-1e-5||e>1.00001))}function normalize(e,a,n,r){return Math.min(Math.max(e/a,n),r)}const d=/[A-Z]/g;function toLowerCaseAZ(e){return e.replace(d,(e=>String.fromCharCode(e.charCodeAt(0)+32)))}function normalize_Color_ChannelValues(n,r){const o=[];for(let t=0;t=0){l=h.value[4].value;continue}}return!1}if(!t)return!1;r.push({color:t,percentage:l}),t=!1,l=!1}}if(t&&r.push({color:t,percentage:l}),2!==r.length)return!1;let h=r[0].percentage,m=r[1].percentage;return(!1===h||!(h<0||h>100))&&((!1===m||!(m<0||m>100))&&(!1===h&&!1===m?(h=50,m=50):!1!==h&&!1===m?m=100-h:!1===h&&!1!==m&&(h=100-m),(0!==h||0!==m)&&(!1!==h&&!1!==m&&(h+m>100&&(h=h/(h+m)*100,m=m/(h+m)*100),h+m<100&&(o=(h+m)/100,h=h/(h+m)*100,m=m/(h+m)*100),{a:{color:r[0].color,percentage:h},b:{color:r[1].color,percentage:m},alphaMultiplier:o}))))}function colorMixRectangular(e,a){if(!a)return!1;const n=a.a.color,r=a.b.color,o=a.a.percentage/100;let t=n.channels,l=r.channels,s=_.RGB,u=n.alpha;if("number"!=typeof u)return!1;let c=r.alpha;if("number"!=typeof c)return!1;switch(u=Number.isNaN(u)?c:u,c=Number.isNaN(c)?u:c,e){case"srgb":s=_.RGB;break;case"srgb-linear":s=_.Linear_sRGB;break;case"lab":s=_.Lab;break;case"oklab":s=_.OKLab;break;case"xyz-d50":s=_.XYZ_D50;break;case"xyz":case"xyz-d65":s=_.XYZ_D65}t=colorDataTo(n,s).channels,l=colorDataTo(r,s).channels,t[0]=premultiply(t[0],u),t[1]=premultiply(t[1],u),t[2]=premultiply(t[2],u),l[0]=premultiply(l[0],c),l[1]=premultiply(l[1],c),l[2]=premultiply(l[2],c);const i=interpolate(u,c,o);return{colorNotation:s,channels:[un_premultiply(interpolate(t[0],l[0],o),i),un_premultiply(interpolate(t[1],l[1],o),i),un_premultiply(interpolate(t[2],l[2],o),i)],alpha:i*a.alphaMultiplier,syntaxFlags:new Set([g.ColorMix])}}function colorMixPolar(e,a,n){if(!n)return!1;const r=n.a.color,o=n.b.color,t=n.a.percentage/100;let l=r.channels,s=o.channels,u=0,c=0,i=0,h=0,m=0,p=0,N=_.RGB,b=r.alpha;if("number"!=typeof b)return!1;let v=o.alpha;if("number"!=typeof v)return!1;switch(b=Number.isNaN(b)?v:b,v=Number.isNaN(v)?b:v,e){case"hsl":N=_.HSL;break;case"hwb":N=_.HWB;break;case"lch":N=_.LCH;break;case"oklch":N=_.OKLCH}switch(l=colorDataTo(r,N).channels,s=colorDataTo(o,N).channels,e){case"hsl":case"hwb":u=l[0],c=s[0],i=l[1],h=s[1],m=l[2],p=s[2];break;case"lch":case"oklch":i=l[0],h=s[0],m=l[1],p=s[1],u=l[2],c=s[2]}const d=c-u;switch(a){case"shorter":d>180?u+=360:d<-180&&(c+=360);break;case"longer":-1800?u+=360:c+=360);break;case"increasing":d<0&&(c+=360);break;case"decreasing":d>0&&(u+=360);break;default:throw new Error("Unknown hue interpolation method")}i=premultiply(i,b),m=premultiply(m,b),h=premultiply(h,v),p=premultiply(p,v);let f=[0,0,0];const y=interpolate(b,v,t);switch(e){case"hsl":case"hwb":f=[interpolate(u,c,t),un_premultiply(interpolate(i,h,t),y),un_premultiply(interpolate(m,p,t),y)];break;case"lch":case"oklch":f=[un_premultiply(interpolate(i,h,t),y),un_premultiply(interpolate(m,p,t),y),interpolate(u,c,t)]}return{colorNotation:N,channels:f,alpha:y*n.alphaMultiplier,syntaxFlags:new Set([g.ColorMix])}}function interpolate(e,a,n){return Number.isNaN(e)?a:Number.isNaN(a)?e:e*n+a*(1-n)}function premultiply(e,a){return Number.isNaN(a)?e:Number.isNaN(e)?NaN:e*a}function un_premultiply(e,a){return 0===a||Number.isNaN(a)?e:Number.isNaN(e)?NaN:e/a}function hex(e){const a=toLowerCaseAZ(e[4].value);if(a.match(/[^a-f0-9]/))return!1;const n={colorNotation:_.HEX,channels:[0,0,0],alpha:1,syntaxFlags:new Set([g.Hex])},r=a.length;if(3===r){const e=a[0],r=a[1],o=a[2];return n.channels=[parseInt(e+e,16)/255,parseInt(r+r,16)/255,parseInt(o+o,16)/255],n}if(6===r){const e=a[0]+a[1],r=a[2]+a[3],o=a[4]+a[5];return n.channels=[parseInt(e,16)/255,parseInt(r,16)/255,parseInt(o,16)/255],n}if(4===r){const e=a[0],r=a[1],o=a[2],t=a[3];return n.channels=[parseInt(e+e,16)/255,parseInt(r+r,16)/255,parseInt(o+o,16)/255],n.alpha=parseInt(t+t,16)/255,n.syntaxFlags.add(g.HasAlpha),n}if(8===r){const e=a[0]+a[1],r=a[2]+a[3],o=a[4]+a[5],t=a[6]+a[7];return n.channels=[parseInt(e,16)/255,parseInt(r,16)/255,parseInt(o,16)/255],n.alpha=parseInt(t,16)/255,n.syntaxFlags.add(g.HasAlpha),n}return!1}function normalizeHue(n){if(n[0]===e.Number)return n[4].value=n[4].value%360,n[1]=n[4].value.toString(),n;if(n[0]===e.Dimension){let r=n[4].value;switch(toLowerCaseAZ(n[4].unit)){case"deg":break;case"rad":r=180*n[4].value/Math.PI;break;case"grad":r=.9*n[4].value;break;case"turn":r=360*n[4].value;break;default:return!1}return r%=360,[e.Number,r.toString(),n[2],n[3],{value:r,type:a.Number}]}return!1}function normalize_legacy_HSL_ChannelValues(n,r){const o=[];for(let t=0;t.999999&&(l=[1,0,0]),t.mapGamut(l,(e=>(e=o.OKLCH_to_OKLab(e),e=o.OKLab_to_XYZ(e),e=o.XYZ_to_lin_sRGB(e),o.gam_sRGB(e))),(e=>(e=o.lin_sRGB(e),e=o.lin_sRGB_to_XYZ(e),e=o.XYZ_to_OKLab(e),o.OKLab_to_OKLCH(e))))}function threeChannelSpaceSeparated(a,n,r,t,l){const m=toLowerCaseAZ(a.getName()),p=[],v=[],d=[],f=[];let y,C,L=!1;const H={colorNotation:r,channels:[0,0,0],alpha:1,syntaxFlags:new Set(t)};let w=p;for(let n=0;nc(a)&&a.value[0]===e.Comma))){const e=hslCommaSeparated(a);if(!1!==e)return e}{const e=hslSpaceSeparated(a,n);if(!1!==e)return e}return!1}function hslCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_HSL_ChannelValues,_.HSL,[g.LegacyHSL])}function hslSpaceSeparated(e,a){return threeChannelSpaceSeparated(e,normalize_modern_HSL_ChannelValues,_.HSL,[],a)}function normalize_HWB_ChannelValues(n,r){const o=[];for(let t=0;tc(a)&&a.value[0]===e.Comma))){const e=rgbCommaSeparated(a);if(!1!==e)return e}else{const e=rgbSpaceSeparated(a,n);if(!1!==e)return e}return!1}function rgbCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_sRGB_ChannelValues,_.RGB,[g.LegacyRGB])}function rgbSpaceSeparated(e,a){return threeChannelSpaceSeparated(e,normalize_modern_sRGB_ChannelValues,_.RGB,[],a)}function toPrecision(e,a=7){e=+e,a=+a;const n=(Math.floor(e)+"").length;if(a>n)return+e.toFixed(a-n);{const r=10**(n-a);return Math.round(e/r)*r}}function XYZ_D50_to_P3_Gamut(e){const a=n.XYZ_D50_to_P3(e);if(r.inGamut(a))return r.clip(a);let l=e.slice();return l=o.D50_to_D65(l),l=o.XYZ_to_OKLab(l),l=o.OKLab_to_OKLCH(l),l[0]<1e-6&&(l=[0,0,0]),l[0]>.999999&&(l=[1,0,0]),t.mapGamut(l,(e=>(e=o.OKLCH_to_OKLab(e),e=o.OKLab_to_XYZ(e),e=o.XYZ_to_lin_P3(e),o.gam_P3(e))),(e=>(e=o.lin_P3(e),e=o.lin_P3_to_XYZ(e),e=o.XYZ_to_OKLab(e),o.OKLab_to_OKLCH(e))))}function serializeWithAlpha(n,r,o,t){const l=[e.CloseParen,")",-1,-1,void 0];if("number"==typeof n.alpha){const s=Math.min(1,Math.max(0,toPrecision(Number.isNaN(n.alpha)?0:n.alpha)));return 1===toPrecision(s,4)?new m(r,l,t):new m(r,l,[...t,new p([o]),new h([e.Delim,"/",-1,-1,{value:"/"}]),new p([o]),new h([e.Number,toPrecision(s,4).toString(),-1,-1,{value:n.alpha,type:a.Integer}])])}return new m(r,l,[...t,new p([o]),new h([e.Delim,"/",-1,-1,{value:"/"}]),new p([o]),n.alpha])}function serializeP3(r,o=!0){r.channels=convertPowerlessComponentsToZeroValuesForDisplay(r.channels,r.colorNotation);let t=r.channels.map((e=>Number.isNaN(e)?0:e));r.colorNotation!==_.Display_P3&&(t=o?XYZ_D50_to_P3_Gamut(colorData_to_XYZ_D50(r).channels):n.XYZ_D50_to_P3(colorData_to_XYZ_D50(r).channels));const l=toPrecision(t[0],6),s=toPrecision(t[1],6),u=toPrecision(t[2],6),c=[e.Function,"color(",-1,-1,{value:"color"}],i=[e.Whitespace," ",-1,-1,void 0];return serializeWithAlpha(r,c,i,[new h([e.Ident,"display-p3",-1,-1,{value:"display-p3"}]),new p([i]),new h([e.Number,l.toString(),-1,-1,{value:t[0],type:a.Number}]),new p([i]),new h([e.Number,s.toString(),-1,-1,{value:t[1],type:a.Number}]),new p([i]),new h([e.Number,u.toString(),-1,-1,{value:t[2],type:a.Number}])])}function serializeRGB(r,t=!0){r.channels=convertPowerlessComponentsToZeroValuesForDisplay(r.channels,r.colorNotation);let l=r.channels.map((e=>Number.isNaN(e)?0:e));r.colorNotation===_.HWB?l=o.HWB_to_sRGB(l):r.colorNotation===_.HSL?l=o.HSL_to_sRGB(l):r.colorNotation!==_.RGB&&r.colorNotation!==_.HEX&&(l=t?XYZ_D50_to_sRGB_Gamut(colorData_to_XYZ_D50(r).channels):n.XYZ_D50_to_sRGB(colorData_to_XYZ_D50(r).channels));const s=Math.min(255,Math.max(0,Math.round(255*toPrecision(l[0])))),u=Math.min(255,Math.max(0,Math.round(255*toPrecision(l[1])))),c=Math.min(255,Math.max(0,Math.round(255*toPrecision(l[2])))),i=[e.CloseParen,")",-1,-1,void 0],N=[e.Whitespace," ",-1,-1,void 0],b=[e.Comma,",",-1,-1,void 0],g=[new h([e.Number,s.toString(),-1,-1,{value:l[0],type:a.Integer}]),new h(b),new p([N]),new h([e.Number,u.toString(),-1,-1,{value:l[1],type:a.Integer}]),new h(b),new p([N]),new h([e.Number,c.toString(),-1,-1,{value:l[2],type:a.Integer}])];if("number"==typeof r.alpha){const n=Math.min(1,Math.max(0,toPrecision(Number.isNaN(r.alpha)?0:r.alpha)));return 1===toPrecision(n,4)?new m([e.Function,"rgb(",-1,-1,{value:"rgb"}],i,g):new m([e.Function,"rgba(",-1,-1,{value:"rgba"}],i,[...g,new h(b),new p([N]),new h([e.Number,toPrecision(n,4).toString(),-1,-1,{value:r.alpha,type:a.Number}])])}return new m([e.Function,"rgba(",-1,-1,{value:"rgba"}],i,[...g,new h(b),new p([N]),r.alpha])}function serializeOKLCH(r){r.channels=convertPowerlessComponentsToZeroValuesForDisplay(r.channels,r.colorNotation);let o=r.channels.map((e=>Number.isNaN(e)?0:e));r.colorNotation!==_.OKLCH&&(o=n.XYZ_D50_to_OKLCH(colorData_to_XYZ_D50(r).channels));const t=toPrecision(o[0],6),l=toPrecision(o[1],6),s=toPrecision(o[2],6),u=[e.Function,"oklch(",-1,-1,{value:"oklch"}],c=[e.Whitespace," ",-1,-1,void 0];return serializeWithAlpha(r,u,c,[new h([e.Number,t.toString(),-1,-1,{value:o[0],type:a.Number}]),new p([c]),new h([e.Number,l.toString(),-1,-1,{value:o[1],type:a.Number}]),new p([c]),new h([e.Number,s.toString(),-1,-1,{value:o[2],type:a.Number}])])}function color(a){if(i(a)){switch(toLowerCaseAZ(a.getName())){case"rgb":case"rgba":return rgb(a,color);case"hsl":case"hsla":return hsl(a,color);case"hwb":return n=color,threeChannelSpaceSeparated(a,normalize_HWB_ChannelValues,_.HWB,[],n);case"lab":return lab(a,color);case"lch":return lch(a,color);case"oklab":return oklab(a,color);case"oklch":return oklch(a,color);case"color":return color$1(a,color);case"color-mix":return colorMix(a,color)}}var n;if(c(a)){if(a.value[0]===e.Hash)return hex(a.value);if(a.value[0]===e.Ident){const e=namedColor(a.value[4].value);return!1!==e?e:"transparent"===toLowerCaseAZ(a.value[4].value)&&{colorNotation:_.RGB,channels:[0,0,0],alpha:0,syntaxFlags:new Set([g.ColorKeyword])}}}return!1}export{_ as ColorNotation,g as SyntaxFlag,color,colorDataFitsRGB_Gamut,colorDataTo,serializeOKLCH,serializeP3,serializeRGB}; diff --git a/packages/css-color-parser/dist/serialize/oklch.d.ts b/packages/css-color-parser/dist/serialize/oklch.d.ts new file mode 100644 index 000000000..1963c49e7 --- /dev/null +++ b/packages/css-color-parser/dist/serialize/oklch.d.ts @@ -0,0 +1,3 @@ +import { ColorData } from '../color-data'; +import { FunctionNode } from '@csstools/css-parser-algorithms'; +export declare function serializeOKLCH(color: ColorData): FunctionNode; diff --git a/packages/css-color-parser/dist/serialize/with-alpha.d.ts b/packages/css-color-parser/dist/serialize/with-alpha.d.ts new file mode 100644 index 000000000..c214a9ccc --- /dev/null +++ b/packages/css-color-parser/dist/serialize/with-alpha.d.ts @@ -0,0 +1,4 @@ +import { ColorData } from '../color-data'; +import type { TokenFunction, TokenWhitespace } from '@csstools/css-tokenizer'; +import { FunctionNode, TokenNode, WhitespaceNode } from '@csstools/css-parser-algorithms'; +export declare function serializeWithAlpha(color: ColorData, fn: TokenFunction, space: TokenWhitespace, channels: Array): FunctionNode; diff --git a/packages/css-color-parser/src/color-data.ts b/packages/css-color-parser/src/color-data.ts index f5a1ce39d..5be3d5bfa 100644 --- a/packages/css-color-parser/src/color-data.ts +++ b/packages/css-color-parser/src/color-data.ts @@ -135,77 +135,81 @@ const predefinedRGB_or_XYZ_Spaces = new Set([ ]); export function colorDataTo(colorData: ColorData, toNotation: ColorNotation): ColorData { - // 1. Convert to XYZ_D50 - const xyzColorData = colorData_to_XYZ_D50(colorData); const outputColorData: ColorData = { ...colorData, }; - // 1. Convert to destination color notation - switch (toNotation) { - case ColorNotation.HEX: - case ColorNotation.RGB: - outputColorData.colorNotation = ColorNotation.RGB; - outputColorData.channels = xyz.XYZ_D50_to_sRGB(xyzColorData.channels); - break; - case ColorNotation.sRGB: - outputColorData.colorNotation = ColorNotation.sRGB; - outputColorData.channels = xyz.XYZ_D50_to_sRGB(xyzColorData.channels); - break; - case ColorNotation.Linear_sRGB: - outputColorData.colorNotation = ColorNotation.Linear_sRGB; - outputColorData.channels = xyz.XYZ_D50_to_lin_sRGB(xyzColorData.channels); - break; - case ColorNotation.Display_P3: - outputColorData.colorNotation = ColorNotation.Display_P3; - outputColorData.channels = xyz.XYZ_D50_to_P3(xyzColorData.channels); - break; - case ColorNotation.Rec2020: - outputColorData.colorNotation = ColorNotation.Rec2020; - outputColorData.channels = xyz.XYZ_D50_to_rec_2020(xyzColorData.channels); - break; - case ColorNotation.ProPhoto_RGB: - outputColorData.colorNotation = ColorNotation.ProPhoto_RGB; - outputColorData.channels = xyz.XYZ_D50_to_ProPhoto(xyzColorData.channels); - break; - case ColorNotation.A98_RGB: - outputColorData.colorNotation = ColorNotation.A98_RGB; - outputColorData.channels = xyz.XYZ_D50_to_a98_RGB(xyzColorData.channels); - break; - case ColorNotation.HSL: - outputColorData.colorNotation = ColorNotation.HSL; - outputColorData.channels = xyz.XYZ_D50_to_HSL(xyzColorData.channels); - break; - case ColorNotation.HWB: - outputColorData.colorNotation = ColorNotation.HWB; - outputColorData.channels = xyz.XYZ_D50_to_HWB(xyzColorData.channels); - break; - case ColorNotation.Lab: - outputColorData.colorNotation = ColorNotation.Lab; - outputColorData.channels = xyz.XYZ_D50_to_Lab(xyzColorData.channels); - break; - case ColorNotation.LCH: - outputColorData.colorNotation = ColorNotation.LCH; - outputColorData.channels = xyz.XYZ_D50_to_LCH(xyzColorData.channels); - break; - case ColorNotation.OKLCH: - outputColorData.colorNotation = ColorNotation.OKLCH; - outputColorData.channels = xyz.XYZ_D50_to_OKLCH(xyzColorData.channels); - break; - case ColorNotation.OKLab: - outputColorData.colorNotation = ColorNotation.OKLab; - outputColorData.channels = xyz.XYZ_D50_to_OKLab(xyzColorData.channels); - break; - case ColorNotation.XYZ_D50: - outputColorData.colorNotation = ColorNotation.XYZ_D50; - outputColorData.channels = xyz.XYZ_D50_to_XYZ_D50(xyzColorData.channels); - break; - case ColorNotation.XYZ_D65: - outputColorData.colorNotation = ColorNotation.XYZ_D65; - outputColorData.channels = xyz.XYZ_D50_to_XYZ_D65(xyzColorData.channels); - break; - default: - throw new Error('Unsupported color notation'); + if (colorData.colorNotation !== toNotation) { + const xyzColorData = colorData_to_XYZ_D50(outputColorData); + + // 1. Convert to destination color notation + switch (toNotation) { + case ColorNotation.HEX: + case ColorNotation.RGB: + outputColorData.colorNotation = ColorNotation.RGB; + outputColorData.channels = xyz.XYZ_D50_to_sRGB(xyzColorData.channels); + break; + case ColorNotation.sRGB: + outputColorData.colorNotation = ColorNotation.sRGB; + outputColorData.channels = xyz.XYZ_D50_to_sRGB(xyzColorData.channels); + break; + case ColorNotation.Linear_sRGB: + outputColorData.colorNotation = ColorNotation.Linear_sRGB; + outputColorData.channels = xyz.XYZ_D50_to_lin_sRGB(xyzColorData.channels); + break; + case ColorNotation.Display_P3: + outputColorData.colorNotation = ColorNotation.Display_P3; + outputColorData.channels = xyz.XYZ_D50_to_P3(xyzColorData.channels); + break; + case ColorNotation.Rec2020: + outputColorData.colorNotation = ColorNotation.Rec2020; + outputColorData.channels = xyz.XYZ_D50_to_rec_2020(xyzColorData.channels); + break; + case ColorNotation.ProPhoto_RGB: + outputColorData.colorNotation = ColorNotation.ProPhoto_RGB; + outputColorData.channels = xyz.XYZ_D50_to_ProPhoto(xyzColorData.channels); + break; + case ColorNotation.A98_RGB: + outputColorData.colorNotation = ColorNotation.A98_RGB; + outputColorData.channels = xyz.XYZ_D50_to_a98_RGB(xyzColorData.channels); + break; + case ColorNotation.HSL: + outputColorData.colorNotation = ColorNotation.HSL; + outputColorData.channels = xyz.XYZ_D50_to_HSL(xyzColorData.channels); + break; + case ColorNotation.HWB: + outputColorData.colorNotation = ColorNotation.HWB; + outputColorData.channels = xyz.XYZ_D50_to_HWB(xyzColorData.channels); + break; + case ColorNotation.Lab: + outputColorData.colorNotation = ColorNotation.Lab; + outputColorData.channels = xyz.XYZ_D50_to_Lab(xyzColorData.channels); + break; + case ColorNotation.LCH: + outputColorData.colorNotation = ColorNotation.LCH; + outputColorData.channels = xyz.XYZ_D50_to_LCH(xyzColorData.channels); + break; + case ColorNotation.OKLCH: + outputColorData.colorNotation = ColorNotation.OKLCH; + outputColorData.channels = xyz.XYZ_D50_to_OKLCH(xyzColorData.channels); + break; + case ColorNotation.OKLab: + outputColorData.colorNotation = ColorNotation.OKLab; + outputColorData.channels = xyz.XYZ_D50_to_OKLab(xyzColorData.channels); + break; + case ColorNotation.XYZ_D50: + outputColorData.colorNotation = ColorNotation.XYZ_D50; + outputColorData.channels = xyz.XYZ_D50_to_XYZ_D50(xyzColorData.channels); + break; + case ColorNotation.XYZ_D65: + outputColorData.colorNotation = ColorNotation.XYZ_D65; + outputColorData.channels = xyz.XYZ_D50_to_XYZ_D65(xyzColorData.channels); + break; + default: + throw new Error('Unsupported color notation'); + } + } else { + outputColorData.channels = colorData.channels.map((x) => Number.isNaN(x) ? 0 : x) as Color; } // 2. Carry forward missing components @@ -296,11 +300,6 @@ export function convertPowerlessComponentsToMissingComponents(a: Color, colorNot switch (colorNotation) { case ColorNotation.HSL: - if (reducePrecision(out[2], 4) <= 0 || reducePrecision(out[2], 4) >= 100) { - out[0] = NaN; - out[1] = NaN; - } - if (reducePrecision(out[1], 4) <= 0) { out[0] = NaN; } @@ -398,18 +397,6 @@ function carryForwardMissingComponents(a: Color, aIndices: Array, b: Col return output; } -export function fillInMissingComponents(a: Color, b: Color): Color { - const output: Color = [...a]; - - for (let i = 0; i < a.length; i++) { - if (Number.isNaN(a[i])) { - output[i] = b[i]; - } - } - - return output; -} - export function normalizeRelativeColorDataChannels(x: ColorData): Map { const globals: Map = new Map(); @@ -519,6 +506,10 @@ function dummyNumberToken(x: number): TokenNumber { } function reducePrecision(x: number, precision = 7): number { + if (Number.isNaN(x)) { + return 0; + } + const factor = Math.pow(10, precision); return Math.round(x * factor) / factor; } diff --git a/packages/css-color-parser/src/functions/color-mix.ts b/packages/css-color-parser/src/functions/color-mix.ts index c2fa47fbd..27ea1853a 100644 --- a/packages/css-color-parser/src/functions/color-mix.ts +++ b/packages/css-color-parser/src/functions/color-mix.ts @@ -5,7 +5,7 @@ import { Color } from '@csstools/color-helpers'; import { ColorNotation } from '../color-notation'; import { TokenType } from '@csstools/css-tokenizer'; import { calcFromComponentValues } from '@csstools/css-calc'; -import { colorDataTo, fillInMissingComponents, SyntaxFlag } from '../color-data'; +import { colorDataTo, SyntaxFlag } from '../color-data'; import { isCommentNode, isFunctionNode, isTokenNode, isWhitespaceNode } from '@csstools/css-parser-algorithms'; import { toLowerCaseAZ } from '../util/to-lower-case-a-z'; import { mathFunctionNames } from '@csstools/css-calc'; @@ -296,91 +296,29 @@ function colorMixRectangular(colorSpace: string, colors: ColorMixColors | false) switch (colorSpace) { case 'srgb': outputColorNotation = ColorNotation.RGB; - - if ( - a_color.colorNotation !== ColorNotation.RGB && - a_color.colorNotation !== ColorNotation.sRGB && - a_color.colorNotation !== ColorNotation.HEX - ) { - a_channels = colorDataTo(a_color, ColorNotation.RGB).channels; - } - - if ( - b_color.colorNotation !== ColorNotation.RGB && - b_color.colorNotation !== ColorNotation.sRGB && - b_color.colorNotation !== ColorNotation.HEX - ) { - b_channels = colorDataTo(b_color, ColorNotation.RGB).channels; - } - break; case 'srgb-linear': outputColorNotation = ColorNotation.Linear_sRGB; - - if (a_color.colorNotation !== ColorNotation.Linear_sRGB) { - a_channels = colorDataTo(a_color, ColorNotation.Linear_sRGB).channels; - } - - if (b_color.colorNotation !== ColorNotation.Linear_sRGB) { - b_channels = colorDataTo(b_color, ColorNotation.Linear_sRGB).channels; - } - break; case 'lab': outputColorNotation = ColorNotation.Lab; - - if (a_color.colorNotation !== ColorNotation.Lab) { - a_channels = colorDataTo(a_color, ColorNotation.Lab).channels; - } - - if (b_color.colorNotation !== ColorNotation.Lab) { - b_channels = colorDataTo(b_color, ColorNotation.Lab).channels; - } - break; case 'oklab': outputColorNotation = ColorNotation.OKLab; - - if (a_color.colorNotation !== ColorNotation.OKLab) { - a_channels = colorDataTo(a_color, ColorNotation.OKLab).channels; - } - - if (b_color.colorNotation !== ColorNotation.OKLab) { - b_channels = colorDataTo(b_color, ColorNotation.OKLab).channels; - } - break; case 'xyz-d50': outputColorNotation = ColorNotation.XYZ_D50; - - if (a_color.colorNotation !== ColorNotation.XYZ_D50) { - a_channels = colorDataTo(a_color, ColorNotation.XYZ_D50).channels; - } - - if (b_color.colorNotation !== ColorNotation.XYZ_D50) { - b_channels = colorDataTo(b_color, ColorNotation.XYZ_D50).channels; - } - break; case 'xyz': case 'xyz-d65': outputColorNotation = ColorNotation.XYZ_D65; - - if (a_color.colorNotation !== ColorNotation.XYZ_D65) { - a_channels = colorDataTo(a_color, ColorNotation.XYZ_D65).channels; - } - - if (b_color.colorNotation !== ColorNotation.XYZ_D65) { - b_channels = colorDataTo(b_color, ColorNotation.XYZ_D65).channels; - } - break; default: break; } - a_channels = fillInMissingComponents(a_channels, b_channels); - b_channels = fillInMissingComponents(b_channels, a_channels); + a_channels = colorDataTo(a_color, outputColorNotation).channels; + b_channels = colorDataTo(b_color, outputColorNotation).channels; a_channels[0] = premultiply(a_channels[0], a_alpha); a_channels[1] = premultiply(a_channels[1], a_alpha); @@ -447,58 +385,22 @@ function colorMixPolar(colorSpace: string, hueInterpolationMethod: string, color switch (colorSpace) { case 'hsl': outputColorNotation = ColorNotation.HSL; - - if (a_color.colorNotation !== ColorNotation.HSL) { - a_channels = colorDataTo(a_color, ColorNotation.HSL).channels; - } - - if (b_color.colorNotation !== ColorNotation.HSL) { - b_channels = colorDataTo(b_color, ColorNotation.HSL).channels; - } - break; case 'hwb': outputColorNotation = ColorNotation.HWB; - - if (a_color.colorNotation !== ColorNotation.HWB) { - a_channels = colorDataTo(a_color, ColorNotation.HWB).channels; - } - - if (b_color.colorNotation !== ColorNotation.HWB) { - b_channels = colorDataTo(b_color, ColorNotation.HWB).channels; - } - break; case 'lch': outputColorNotation = ColorNotation.LCH; - - if (a_color.colorNotation !== ColorNotation.LCH) { - a_channels = colorDataTo(a_color, ColorNotation.LCH).channels; - } - - if (b_color.colorNotation !== ColorNotation.LCH) { - b_channels = colorDataTo(b_color, ColorNotation.LCH).channels; - } - break; case 'oklch': outputColorNotation = ColorNotation.OKLCH; - - if (a_color.colorNotation !== ColorNotation.OKLCH) { - a_channels = colorDataTo(a_color, ColorNotation.OKLCH).channels; - } - - if (b_color.colorNotation !== ColorNotation.OKLCH) { - b_channels = colorDataTo(b_color, ColorNotation.OKLCH).channels; - } - break; default: break; } - a_channels = fillInMissingComponents(a_channels, b_channels); - b_channels = fillInMissingComponents(b_channels, a_channels); + a_channels = colorDataTo(a_color, outputColorNotation).channels; + b_channels = colorDataTo(b_color, outputColorNotation).channels; switch (colorSpace) { case 'hsl': diff --git a/packages/css-color-parser/src/index.ts b/packages/css-color-parser/src/index.ts index a5ca64139..fd8440a9d 100644 --- a/packages/css-color-parser/src/index.ts +++ b/packages/css-color-parser/src/index.ts @@ -22,7 +22,7 @@ export { SyntaxFlag } from './color-data'; export { colorDataTo, colorDataFitsRGB_Gamut } from './color-data'; export { serializeP3 } from './serialize/p3'; export { serializeRGB } from './serialize/rgb'; - +export { serializeOKLCH } from './serialize/oklch'; export function color(colorNode: ComponentValue): ColorData | false { if (isFunctionNode(colorNode)) { diff --git a/packages/css-color-parser/src/serialize/oklch.ts b/packages/css-color-parser/src/serialize/oklch.ts new file mode 100644 index 000000000..bbe4f58f2 --- /dev/null +++ b/packages/css-color-parser/src/serialize/oklch.ts @@ -0,0 +1,37 @@ +import { ColorData, convertPowerlessComponentsToZeroValuesForDisplay } from '../color-data'; +import type { TokenFunction, TokenWhitespace } from '@csstools/css-tokenizer'; +import { colorData_to_XYZ_D50 } from '../color-data'; +import { ColorNotation } from '../color-notation'; +import { FunctionNode, TokenNode, WhitespaceNode } from '@csstools/css-parser-algorithms'; +import { NumberType, TokenType } from '@csstools/css-tokenizer'; +import { xyz } from '@csstools/color-helpers'; +import { toPrecision } from './to-precision'; +import { serializeWithAlpha } from './with-alpha'; + +export function serializeOKLCH(color: ColorData): FunctionNode { + color.channels = convertPowerlessComponentsToZeroValuesForDisplay(color.channels, color.colorNotation); + let oklch = color.channels.map((x) => Number.isNaN(x) ? 0 : x); + + if ( + color.colorNotation !== ColorNotation.OKLCH + ) { + oklch = xyz.XYZ_D50_to_OKLCH(colorData_to_XYZ_D50(color).channels); + } + + const l = toPrecision(oklch[0], 6); + const c = toPrecision(oklch[1], 6); + const h = toPrecision(oklch[2], 6); + + const fn: TokenFunction = [TokenType.Function, 'oklch(', -1, -1, { value: 'oklch' }]; + const space: TokenWhitespace = [TokenType.Whitespace, ' ', -1, -1, undefined]; + + const channels = [ + new TokenNode([TokenType.Number, l.toString(), -1, -1, { value: oklch[0], type: NumberType.Number }]), + new WhitespaceNode([space]), + new TokenNode([TokenType.Number, c.toString(), -1, -1, { value: oklch[1], type: NumberType.Number }]), + new WhitespaceNode([space]), + new TokenNode([TokenType.Number, h.toString(), -1, -1, { value: oklch[2], type: NumberType.Number }]), + ]; + + return serializeWithAlpha(color, fn, space, channels); +} diff --git a/packages/css-color-parser/src/serialize/p3.ts b/packages/css-color-parser/src/serialize/p3.ts index 92862d01a..250b9db2c 100644 --- a/packages/css-color-parser/src/serialize/p3.ts +++ b/packages/css-color-parser/src/serialize/p3.ts @@ -1,12 +1,13 @@ import { ColorData, convertPowerlessComponentsToZeroValuesForDisplay } from '../color-data'; -import type { TokenCloseParen, TokenFunction, TokenWhitespace } from '@csstools/css-tokenizer'; +import type { TokenFunction, TokenWhitespace } from '@csstools/css-tokenizer'; import { colorData_to_XYZ_D50 } from '../color-data'; import { ColorNotation } from '../color-notation'; -import { FunctionNode, TokenNode } from '@csstools/css-parser-algorithms'; +import { FunctionNode, TokenNode, WhitespaceNode } from '@csstools/css-parser-algorithms'; import { NumberType, TokenType } from '@csstools/css-tokenizer'; import { xyz } from '@csstools/color-helpers'; import { toPrecision } from './to-precision'; import { XYZ_D50_to_P3_Gamut } from '../gamut-mapping/p3'; +import { serializeWithAlpha } from './with-alpha'; export function serializeP3(color: ColorData, gamutMapping = true): FunctionNode { color.channels = convertPowerlessComponentsToZeroValuesForDisplay(color.channels, color.colorNotation); @@ -27,51 +28,17 @@ export function serializeP3(color: ColorData, gamutMapping = true): FunctionNode const b = toPrecision(p3[2], 6); const fn: TokenFunction = [TokenType.Function, 'color(', -1, -1, { value: 'color' }]; - const close: TokenCloseParen = [TokenType.CloseParen, ')', -1, -1, undefined]; const space: TokenWhitespace = [TokenType.Whitespace, ' ', -1, -1, undefined]; const channels = [ new TokenNode([TokenType.Ident, 'display-p3', -1, -1, { value: 'display-p3' }]), - new TokenNode(space), + new WhitespaceNode([space]), new TokenNode([TokenType.Number, r.toString(), -1, -1, { value: p3[0], type: NumberType.Number }]), - new TokenNode(space), + new WhitespaceNode([space]), new TokenNode([TokenType.Number, g.toString(), -1, -1, { value: p3[1], type: NumberType.Number }]), - new TokenNode(space), + new WhitespaceNode([space]), new TokenNode([TokenType.Number, b.toString(), -1, -1, { value: p3[2], type: NumberType.Number }]), ]; - if (typeof color.alpha === 'number') { - const a = Math.min(1, Math.max(0, toPrecision(Number.isNaN(color.alpha) ? 0 : color.alpha))); - if (toPrecision(a, 4) === 1) { - return new FunctionNode( - fn, - close, - channels, - ); - } - - return new FunctionNode( - fn, - close, - [ - ...channels, - new TokenNode(space), - new TokenNode([TokenType.Delim, '/', -1, -1, { value: '/' }]), - new TokenNode(space), - new TokenNode([TokenType.Number, toPrecision(a, 4).toString(), -1, -1, { value: color.alpha, type: NumberType.Integer }]), - ], - ); - } - - return new FunctionNode( - fn, - close, - [ - ...channels, - new TokenNode(space), - new TokenNode([TokenType.Delim, '/', -1, -1, { value: '/' }]), - new TokenNode(space), - color.alpha, - ], - ); + return serializeWithAlpha(color, fn, space, channels); } diff --git a/packages/css-color-parser/src/serialize/rgb.ts b/packages/css-color-parser/src/serialize/rgb.ts index 2de64de8b..806e3ab8d 100644 --- a/packages/css-color-parser/src/serialize/rgb.ts +++ b/packages/css-color-parser/src/serialize/rgb.ts @@ -1,7 +1,7 @@ import { ColorData, convertPowerlessComponentsToZeroValuesForDisplay } from '../color-data'; import type { TokenCloseParen, TokenComma, TokenWhitespace } from '@csstools/css-tokenizer'; import { ColorNotation } from '../color-notation'; -import { FunctionNode, TokenNode } from '@csstools/css-parser-algorithms'; +import { FunctionNode, TokenNode, WhitespaceNode } from '@csstools/css-parser-algorithms'; import { NumberType, TokenType } from '@csstools/css-tokenizer'; import { conversions, xyz } from '@csstools/color-helpers'; import { colorData_to_XYZ_D50 } from '../color-data'; @@ -38,10 +38,10 @@ export function serializeRGB(color: ColorData, gamutMapping = true): FunctionNod const channels = [ new TokenNode([TokenType.Number, r.toString(), -1, -1, { value: srgb[0], type: NumberType.Integer }]), new TokenNode(comma), - new TokenNode(space), + new WhitespaceNode([space]), new TokenNode([TokenType.Number, g.toString(), -1, -1, { value: srgb[1], type: NumberType.Integer }]), new TokenNode(comma), - new TokenNode(space), + new WhitespaceNode([space]), new TokenNode([TokenType.Number, b.toString(), -1, -1, { value: srgb[2], type: NumberType.Integer }]), ]; @@ -61,7 +61,7 @@ export function serializeRGB(color: ColorData, gamutMapping = true): FunctionNod [ ...channels, new TokenNode(comma), - new TokenNode(space), + new WhitespaceNode([space]), new TokenNode([TokenType.Number, toPrecision(a, 4).toString(), -1, -1, { value: color.alpha, type: NumberType.Number }]), ], ); @@ -73,7 +73,7 @@ export function serializeRGB(color: ColorData, gamutMapping = true): FunctionNod [ ...channels, new TokenNode(comma), - new TokenNode(space), + new WhitespaceNode([space]), color.alpha, ], ); diff --git a/packages/css-color-parser/src/serialize/with-alpha.ts b/packages/css-color-parser/src/serialize/with-alpha.ts new file mode 100644 index 000000000..ef9a12afb --- /dev/null +++ b/packages/css-color-parser/src/serialize/with-alpha.ts @@ -0,0 +1,44 @@ +import { ColorData } from '../color-data'; +import type { TokenCloseParen, TokenFunction, TokenWhitespace } from '@csstools/css-tokenizer'; +import { FunctionNode, TokenNode, WhitespaceNode } from '@csstools/css-parser-algorithms'; +import { NumberType, TokenType } from '@csstools/css-tokenizer'; +import { toPrecision } from './to-precision'; + +export function serializeWithAlpha(color: ColorData, fn: TokenFunction, space: TokenWhitespace, channels: Array): FunctionNode { + const close: TokenCloseParen = [TokenType.CloseParen, ')', -1, -1, undefined]; + + if (typeof color.alpha === 'number') { + const a = Math.min(1, Math.max(0, toPrecision(Number.isNaN(color.alpha) ? 0 : color.alpha))); + if (toPrecision(a, 4) === 1) { + return new FunctionNode( + fn, + close, + channels, + ); + } + + return new FunctionNode( + fn, + close, + [ + ...channels, + new WhitespaceNode([space]), + new TokenNode([TokenType.Delim, '/', -1, -1, { value: '/' }]), + new WhitespaceNode([space]), + new TokenNode([TokenType.Number, toPrecision(a, 4).toString(), -1, -1, { value: color.alpha, type: NumberType.Integer }]), + ], + ); + } + + return new FunctionNode( + fn, + close, + [ + ...channels, + new WhitespaceNode([space]), + new TokenNode([TokenType.Delim, '/', -1, -1, { value: '/' }]), + new WhitespaceNode([space]), + color.alpha, + ], + ); +} diff --git a/packages/css-color-parser/test/basic/color-mix-function-oklch.mjs b/packages/css-color-parser/test/basic/color-mix-function-oklch.mjs new file mode 100644 index 000000000..90661d940 --- /dev/null +++ b/packages/css-color-parser/test/basic/color-mix-function-oklch.mjs @@ -0,0 +1,20 @@ +import { color } from '@csstools/css-color-parser'; +import assert from 'assert'; +import { parse } from '../util/parse.mjs'; +import { serialize_OKLCH_data } from '../util/serialize.mjs'; + +const tests = [ + ['color-mix(in oklch, oklch(100% 0% 60deg), oklch(50% 50% 0deg))', 'oklch(0.75 0.1 0)'], + ['color-mix(in oklch, rgb(255, 255, 255), rgb(180, 6, 95))', 'oklch(0.75031 0.10016 359.858)'], + ['color-mix(in lch, oklch(75% 0% 60deg), oklch(75% 50% 0deg))', 'oklch(0.74979 0.09824 0.1059)'], + ['color-mix(in oklch, oklch(100% 0% none), oklch(50% 50% 0deg))', 'oklch(0.75 0.1 0)'], + ['color-mix(in oklch, oklch(100% none 60deg), oklch(50% 50% 0deg))', 'oklch(0.75 0.2 0)'], +]; + +for (const test of tests) { + assert.deepStrictEqual( + serialize_OKLCH_data(color(parse(test[0]))), + test[1], + `"${test[0]}" : ${test[1]}`, + ); +} diff --git a/packages/css-color-parser/test/basic/color-mix-function.mjs b/packages/css-color-parser/test/basic/color-mix-function.mjs index cfdaba4cd..503a6eb51 100644 --- a/packages/css-color-parser/test/basic/color-mix-function.mjs +++ b/packages/css-color-parser/test/basic/color-mix-function.mjs @@ -2,6 +2,7 @@ import { color } from '@csstools/css-color-parser'; import assert from 'assert'; import { parse } from '../util/parse.mjs'; import { serialize_sRGB_data } from '../util/serialize.mjs'; +import { canonicalize } from '../util/canonical.mjs'; const tests = [ ['color-mix(in srgb, green 40%, color(srgb 0.8978862558205767 0.4885001647805462 0.9594359763905097))', 'rgb(137, 126, 147)'], @@ -67,6 +68,16 @@ const tests = [ ['color-mix(in srgb, color(xyz 1 none 0) 30%, rgb(none 255 128))', 'rgb(255, 255, 110)'], ['color-mix(in oklab, #09232c, white 50%)', 'rgb(123, 137, 142)'], + + ['color-mix(in hsl longer hue, hsl(90deg 50% 50%), hsl(0deg 50% 50%)', canonicalize('hsl(225deg 50% 50%)')], + ['color-mix(in hsl longer hue, hsl(90deg 50% 50%), hsl(none 50% 50%)', canonicalize('hsl(90deg 50% 50%)')], + ['color-mix(in hsl shorter hue, hsl(90deg 50% 50%), hsl(none 50% 50%)', canonicalize('hsl(90deg 50% 50%)')], + ['color-mix(in hsl increasing hue, hsl(90deg 50% 50%), hsl(none 50% 50%)', canonicalize('hsl(90deg 50% 50%)')], + ['color-mix(in hsl decreasing hue, hsl(90deg 50% 50%), hsl(none 50% 50%)', canonicalize('hsl(90deg 50% 50%)')], + ['color-mix(in hsl longer hue, hsl(none 50% 50%), hsl(90deg 50% 50%)', canonicalize('hsl(90deg 50% 50%)')], + ['color-mix(in hsl shorter hue, hsl(none 50% 50%), hsl(90deg 50% 50%)', canonicalize('hsl(90deg 50% 50%)')], + ['color-mix(in hsl increasing hue, hsl(none 50% 50%), hsl(90deg 50% 50%)', canonicalize('hsl(90deg 50% 50%)')], + ['color-mix(in hsl decreasing hue, hsl(none 50% 50%), hsl(90deg 50% 50%)', canonicalize('hsl(90deg 50% 50%)')], ]; for (const test of tests) { diff --git a/packages/css-color-parser/test/test.mjs b/packages/css-color-parser/test/test.mjs index db7d42c67..35ac31b91 100644 --- a/packages/css-color-parser/test/test.mjs +++ b/packages/css-color-parser/test/test.mjs @@ -1,5 +1,6 @@ import './basic/basic.mjs'; import './basic/color-function.mjs'; +import './basic/color-mix-function-oklch.mjs'; import './basic/color-mix-function.mjs'; import './basic/hwb.mjs'; import './basic/invalid.mjs'; diff --git a/packages/css-color-parser/test/util/serialize.mjs b/packages/css-color-parser/test/util/serialize.mjs index 082b4aefd..15b2f4197 100644 --- a/packages/css-color-parser/test/util/serialize.mjs +++ b/packages/css-color-parser/test/util/serialize.mjs @@ -1,4 +1,4 @@ -import { serializeRGB, serializeP3 } from '@csstools/css-color-parser'; +import { serializeRGB, serializeP3, serializeOKLCH } from '@csstools/css-color-parser'; export function serialize_sRGB_data(x) { if (!x) { @@ -15,3 +15,11 @@ export function serialize_P3_data(x) { return serializeP3(x).toString(); } + +export function serialize_OKLCH_data(x) { + if (!x) { + return ''; + } + + return serializeOKLCH(x).toString(); +} diff --git a/packages/css-color-parser/test/wpt/color-computed-color-mix-function.mjs b/packages/css-color-parser/test/wpt/color-computed-color-mix-function.mjs index 51ce87d55..8c408a2fb 100644 --- a/packages/css-color-parser/test/wpt/color-computed-color-mix-function.mjs +++ b/packages/css-color-parser/test/wpt/color-computed-color-mix-function.mjs @@ -72,7 +72,7 @@ import { serialize_sRGB_data } from '../util/serialize.mjs'; ['color-mix(in hsl, hsl(120deg 20% 40%), hsl(none none none))', canonicalize('hsl(120deg 20% 40%)')], ['color-mix(in hsl, hsl(120deg 20% none), hsl(30deg 40% 60%))', canonicalize('hsl(75deg 30% 60%)')], ['color-mix(in hsl, hsl(120deg 20% 40%), hsl(30deg 20% none))', canonicalize('hsl(75deg 20% 40%)')], - ['color-mix(in hsl, hsl(none 20% 40%), hsl(30deg none 80%))', canonicalize('hsl(30deg 20% 60%)')], + ['color-mix(in hsl, hsl(none 20% 40%), hsl(30deg none 80%))', canonicalize('hsl(0deg 20% 60%)')], ['color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40%))', canonicalize('hsl(60deg 40% 40%)')], ['color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40% / 0.5))', canonicalize('hsl(60deg 40% 40% / 0.5)')], @@ -213,7 +213,7 @@ import { serialize_sRGB_data } from '../util/serialize.mjs'; ['color-mix(in lch, lch(10 20 30deg), lch(none none none))', canonicalize('lch(10 20 30)')], ['color-mix(in lch, lch(10 20 none), lch(50 60 70deg))', canonicalize('lch(30 40 70)')], ['color-mix(in lch, lch(10 20 30deg), lch(50 60 none))', canonicalize('lch(30 40 30)')], - ['color-mix(in lch, lch(none 20 30deg), lch(50 none 70deg))', canonicalize('lch(50 20 50)')], + ['color-mix(in lch, lch(none 20 30deg), lch(50 none 70deg))', canonicalize('lch(50 20 30)')], ['color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg))', canonicalize('lch(30 40 50)')], ['color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg / 0.5))', canonicalize('lch(30 40 50 / 0.5)')], ['color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg / none))', canonicalize('lch(30 40 50 / none)')], diff --git a/plugins/postcss-gradients-interpolation-method/test/basic.expect.css b/plugins/postcss-gradients-interpolation-method/test/basic.expect.css index 0f3429189..a9f8fd30d 100644 --- a/plugins/postcss-gradients-interpolation-method/test/basic.expect.css +++ b/plugins/postcss-gradients-interpolation-method/test/basic.expect.css @@ -350,9 +350,9 @@ .patterns-2 { background: - conic-gradient(at 20px calc(100% - 20px), rgba(0, 0, 0, 0) 270deg, rgba(192, 107, 41, 0.1), rgba(187, 192, 41, 0.2), rgba(96, 192, 41, 0.3), rgba(41, 192, 76, 0.4), rgba(41, 192, 167, 0.5), rgba(41, 126, 192, 0.6), rgba(46, 41, 192, 0.7), rgba(137, 41, 192, 0.8), rgba(192, 41, 157, 0.9), rgb(192, 41, 66) 0) calc(20px + 15px) 0, + conic-gradient(at 20px calc(100% - 20px), rgba(0, 0, 0, 0) 270deg, rgba(192, 41, 66, 0.1), rgba(192, 41, 66, 0.2), rgba(192, 41, 66, 0.3), rgba(192, 41, 66, 0.4), rgba(192, 41, 66, 0.5), rgba(192, 41, 66, 0.6), rgba(192, 41, 66, 0.7), rgba(192, 41, 66, 0.8), rgba(192, 41, 66, 0.9), rgb(192, 41, 66) 0) calc(20px + 15px) 0, linear-gradient(#53777A 20px, #0000 0) 0 15px, - conic-gradient(at 20px calc(100% - 20px), rgba(0, 0, 0, 0) 90deg, rgba(83, 96, 122, 0.1), rgba(94, 83, 122, 0.2), rgba(117, 83, 122, 0.3), rgba(122, 83, 103, 0.4), rgba(122, 86, 83, 0.5), rgba(122, 109, 83, 0.6), rgba(111, 122, 83, 0.7), rgba(88, 122, 83, 0.8), rgba(83, 122, 102, 0.9), rgb(83, 119, 122) 0, rgb(83, 96, 122), rgb(94, 83, 122), rgb(117, 83, 122), rgb(122, 83, 103), rgb(122, 86, 83), rgb(122, 109, 83), rgb(111, 122, 83), rgb(88, 122, 83), rgb(83, 122, 102), rgb(83, 119, 122) 180deg, rgb(79, 128, 116), rgb(76, 135, 101), rgb(72, 142, 79), rgb(86, 148, 68), rgb(114, 155, 64), rgb(149, 162, 59), rgb(170, 148, 55), rgb(177, 112, 50), rgb(184, 68, 46), rgb(192, 41, 66) 0), + conic-gradient(at 20px calc(100% - 20px), rgba(0, 0, 0, 0) 90deg, rgba(83, 119, 122, 0.1), rgba(83, 119, 122, 0.2), rgba(83, 119, 122, 0.3), rgba(83, 119, 122, 0.4), rgba(83, 119, 122, 0.5), rgba(83, 119, 122, 0.6), rgba(83, 119, 122, 0.7), rgba(83, 119, 122, 0.8), rgba(83, 119, 122, 0.9), rgb(83, 119, 122) 0, rgb(83, 96, 122), rgb(94, 83, 122), rgb(117, 83, 122), rgb(122, 83, 103), rgb(122, 86, 83), rgb(122, 109, 83), rgb(111, 122, 83), rgb(88, 122, 83), rgb(83, 122, 102), rgb(83, 119, 122) 180deg, rgb(79, 128, 116), rgb(76, 135, 101), rgb(72, 142, 79), rgb(86, 148, 68), rgb(114, 155, 64), rgb(149, 162, 59), rgb(170, 148, 55), rgb(177, 112, 50), rgb(184, 68, 46), rgb(192, 41, 66) 0), #ECD078; background: conic-gradient(in hsl longer hue at 20px calc(100% - 20px), #0000 270deg, #C02942 0) calc(20px + 15px) 0, diff --git a/plugins/postcss-gradients-interpolation-method/test/basic.preserve-false.expect.css b/plugins/postcss-gradients-interpolation-method/test/basic.preserve-false.expect.css index 5dcbf9b7d..5163dae9d 100644 --- a/plugins/postcss-gradients-interpolation-method/test/basic.preserve-false.expect.css +++ b/plugins/postcss-gradients-interpolation-method/test/basic.preserve-false.expect.css @@ -283,9 +283,9 @@ .patterns-2 { background: - conic-gradient(at 20px calc(100% - 20px), rgba(0, 0, 0, 0) 270deg, rgba(192, 107, 41, 0.1), rgba(187, 192, 41, 0.2), rgba(96, 192, 41, 0.3), rgba(41, 192, 76, 0.4), rgba(41, 192, 167, 0.5), rgba(41, 126, 192, 0.6), rgba(46, 41, 192, 0.7), rgba(137, 41, 192, 0.8), rgba(192, 41, 157, 0.9), rgb(192, 41, 66) 0) calc(20px + 15px) 0, + conic-gradient(at 20px calc(100% - 20px), rgba(0, 0, 0, 0) 270deg, rgba(192, 41, 66, 0.1), rgba(192, 41, 66, 0.2), rgba(192, 41, 66, 0.3), rgba(192, 41, 66, 0.4), rgba(192, 41, 66, 0.5), rgba(192, 41, 66, 0.6), rgba(192, 41, 66, 0.7), rgba(192, 41, 66, 0.8), rgba(192, 41, 66, 0.9), rgb(192, 41, 66) 0) calc(20px + 15px) 0, linear-gradient(#53777A 20px, #0000 0) 0 15px, - conic-gradient(at 20px calc(100% - 20px), rgba(0, 0, 0, 0) 90deg, rgba(83, 96, 122, 0.1), rgba(94, 83, 122, 0.2), rgba(117, 83, 122, 0.3), rgba(122, 83, 103, 0.4), rgba(122, 86, 83, 0.5), rgba(122, 109, 83, 0.6), rgba(111, 122, 83, 0.7), rgba(88, 122, 83, 0.8), rgba(83, 122, 102, 0.9), rgb(83, 119, 122) 0, rgb(83, 96, 122), rgb(94, 83, 122), rgb(117, 83, 122), rgb(122, 83, 103), rgb(122, 86, 83), rgb(122, 109, 83), rgb(111, 122, 83), rgb(88, 122, 83), rgb(83, 122, 102), rgb(83, 119, 122) 180deg, rgb(79, 128, 116), rgb(76, 135, 101), rgb(72, 142, 79), rgb(86, 148, 68), rgb(114, 155, 64), rgb(149, 162, 59), rgb(170, 148, 55), rgb(177, 112, 50), rgb(184, 68, 46), rgb(192, 41, 66) 0), + conic-gradient(at 20px calc(100% - 20px), rgba(0, 0, 0, 0) 90deg, rgba(83, 119, 122, 0.1), rgba(83, 119, 122, 0.2), rgba(83, 119, 122, 0.3), rgba(83, 119, 122, 0.4), rgba(83, 119, 122, 0.5), rgba(83, 119, 122, 0.6), rgba(83, 119, 122, 0.7), rgba(83, 119, 122, 0.8), rgba(83, 119, 122, 0.9), rgb(83, 119, 122) 0, rgb(83, 96, 122), rgb(94, 83, 122), rgb(117, 83, 122), rgb(122, 83, 103), rgb(122, 86, 83), rgb(122, 109, 83), rgb(111, 122, 83), rgb(88, 122, 83), rgb(83, 122, 102), rgb(83, 119, 122) 180deg, rgb(79, 128, 116), rgb(76, 135, 101), rgb(72, 142, 79), rgb(86, 148, 68), rgb(114, 155, 64), rgb(149, 162, 59), rgb(170, 148, 55), rgb(177, 112, 50), rgb(184, 68, 46), rgb(192, 41, 66) 0), #ECD078; } diff --git a/plugins/postcss-gradients-interpolation-method/test/basic.with-cloned-rules.expect.css b/plugins/postcss-gradients-interpolation-method/test/basic.with-cloned-rules.expect.css index 64e96c7bb..1973ed525 100644 --- a/plugins/postcss-gradients-interpolation-method/test/basic.with-cloned-rules.expect.css +++ b/plugins/postcss-gradients-interpolation-method/test/basic.with-cloned-rules.expect.css @@ -350,9 +350,9 @@ .patterns-2 { background: - conic-gradient(at 20px calc(100% - 20px), rgba(0, 0, 0, 0) 270deg, rgba(192, 107, 41, 0.1), rgba(187, 192, 41, 0.2), rgba(96, 192, 41, 0.3), rgba(41, 192, 76, 0.4), rgba(41, 192, 167, 0.5), rgba(41, 126, 192, 0.6), rgba(46, 41, 192, 0.7), rgba(137, 41, 192, 0.8), rgba(192, 41, 157, 0.9), rgb(192, 41, 66) 0) calc(20px + 15px) 0, + conic-gradient(at 20px calc(100% - 20px), rgba(0, 0, 0, 0) 270deg, rgba(192, 41, 66, 0.1), rgba(192, 41, 66, 0.2), rgba(192, 41, 66, 0.3), rgba(192, 41, 66, 0.4), rgba(192, 41, 66, 0.5), rgba(192, 41, 66, 0.6), rgba(192, 41, 66, 0.7), rgba(192, 41, 66, 0.8), rgba(192, 41, 66, 0.9), rgb(192, 41, 66) 0) calc(20px + 15px) 0, linear-gradient(#53777A 20px, #0000 0) 0 15px, - conic-gradient(at 20px calc(100% - 20px), rgba(0, 0, 0, 0) 90deg, rgba(83, 96, 122, 0.1), rgba(94, 83, 122, 0.2), rgba(117, 83, 122, 0.3), rgba(122, 83, 103, 0.4), rgba(122, 86, 83, 0.5), rgba(122, 109, 83, 0.6), rgba(111, 122, 83, 0.7), rgba(88, 122, 83, 0.8), rgba(83, 122, 102, 0.9), rgb(83, 119, 122) 0, rgb(83, 96, 122), rgb(94, 83, 122), rgb(117, 83, 122), rgb(122, 83, 103), rgb(122, 86, 83), rgb(122, 109, 83), rgb(111, 122, 83), rgb(88, 122, 83), rgb(83, 122, 102), rgb(83, 119, 122) 180deg, rgb(79, 128, 116), rgb(76, 135, 101), rgb(72, 142, 79), rgb(86, 148, 68), rgb(114, 155, 64), rgb(149, 162, 59), rgb(170, 148, 55), rgb(177, 112, 50), rgb(184, 68, 46), rgb(192, 41, 66) 0), + conic-gradient(at 20px calc(100% - 20px), rgba(0, 0, 0, 0) 90deg, rgba(83, 119, 122, 0.1), rgba(83, 119, 122, 0.2), rgba(83, 119, 122, 0.3), rgba(83, 119, 122, 0.4), rgba(83, 119, 122, 0.5), rgba(83, 119, 122, 0.6), rgba(83, 119, 122, 0.7), rgba(83, 119, 122, 0.8), rgba(83, 119, 122, 0.9), rgb(83, 119, 122) 0, rgb(83, 96, 122), rgb(94, 83, 122), rgb(117, 83, 122), rgb(122, 83, 103), rgb(122, 86, 83), rgb(122, 109, 83), rgb(111, 122, 83), rgb(88, 122, 83), rgb(83, 122, 102), rgb(83, 119, 122) 180deg, rgb(79, 128, 116), rgb(76, 135, 101), rgb(72, 142, 79), rgb(86, 148, 68), rgb(114, 155, 64), rgb(149, 162, 59), rgb(170, 148, 55), rgb(177, 112, 50), rgb(184, 68, 46), rgb(192, 41, 66) 0), #ECD078; background: conic-gradient(in hsl longer hue at 20px calc(100% - 20px), #0000 270deg, #C02942 0) calc(20px + 15px) 0,