@betterstore/react 0.5.17 → 0.5.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/checkout-embed/appearance.d.ts.map +1 -1
- package/dist/components/checkout-embed/color-utils.d.ts +2 -0
- package/dist/components/checkout-embed/color-utils.d.ts.map +1 -0
- package/dist/components/checkout-embed/steps/payment/form.d.ts.map +1 -1
- package/dist/components/compounds/form/address-input/index.d.ts.map +1 -1
- package/dist/components/payment-element/betterstore-checkout-embed-payment-element.d.ts +2 -0
- package/dist/components/payment-element/betterstore-checkout-embed-payment-element.d.ts.map +1 -0
- package/dist/components/payment-element/checkout-form.d.ts +1 -0
- package/dist/components/payment-element/checkout-form.d.ts.map +1 -1
- package/dist/components/shadow-wrapper.d.ts.map +1 -1
- package/dist/index.cjs.js +4599 -57
- package/dist/index.mjs +4599 -57
- package/package.json +4 -2
package/dist/index.cjs.js
CHANGED
|
@@ -47,8 +47,8 @@ const createStoreImpl = (createState) => {
|
|
|
47
47
|
};
|
|
48
48
|
const createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
|
|
49
49
|
|
|
50
|
-
const identity = (arg) => arg;
|
|
51
|
-
function useStore(api, selector = identity) {
|
|
50
|
+
const identity$1 = (arg) => arg;
|
|
51
|
+
function useStore(api, selector = identity$1) {
|
|
52
52
|
const slice = React.useSyncExternalStore(
|
|
53
53
|
api.subscribe,
|
|
54
54
|
() => selector(api.getState()),
|
|
@@ -7517,9 +7517,9 @@ function createStoreHelpers(config) {
|
|
|
7517
7517
|
return new helpers_default(config?.proxy);
|
|
7518
7518
|
}
|
|
7519
7519
|
|
|
7520
|
-
var css_248z = "/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root, :host {\n --font-sans: var(--font-sans), Helvetica, Arial, apple-system, sans-serif;\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --color-red-500: oklch(63.7% 0.237 25.331);\n --color-black: #000;\n --color-white: #fff;\n --spacing: 0.25rem;\n --container-lg: 32rem;\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-base: 1rem;\n --text-base--line-height: calc(1.5 / 1);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-2xl: 1.5rem;\n --text-2xl--line-height: calc(2 / 1.5);\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --tracking-tight: -0.025em;\n --tracking-widest: 0.1em;\n --radius-xs: 0.125rem;\n --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n --animate-spin: spin 1s linear infinite;\n --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans), Helvetica, Arial, apple-system, sans-serif;\n --default-mono-font-family: var(--font-mono);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .-top-2 {\n top: calc(var(--spacing) * -2);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .top-0\\.5 {\n top: calc(var(--spacing) * 0.5);\n }\n .top-1\\/2 {\n top: calc(1/2 * 100%);\n }\n .top-4 {\n top: calc(var(--spacing) * 4);\n }\n .top-\\[50\\%\\] {\n top: 50%;\n }\n .top-full {\n top: 100%;\n }\n .-right-2 {\n right: calc(var(--spacing) * -2);\n }\n .right-0 {\n right: calc(var(--spacing) * 0);\n }\n .right-4 {\n right: calc(var(--spacing) * 4);\n }\n .left-0 {\n left: calc(var(--spacing) * 0);\n }\n .left-1\\/2 {\n left: calc(1/2 * 100%);\n }\n .left-2 {\n left: calc(var(--spacing) * 2);\n }\n .left-\\[50\\%\\] {\n left: 50%;\n }\n .z-0 {\n z-index: 0;\n }\n .z-10 {\n z-index: 10;\n }\n .z-50 {\n z-index: 50;\n }\n .order-3 {\n order: 3;\n }\n .order-4 {\n order: 4;\n }\n .order-5 {\n order: 5;\n }\n .order-6 {\n order: 6;\n }\n .order-7 {\n order: 7;\n }\n .order-first {\n order: -9999;\n }\n .-m-0\\.5 {\n margin: calc(var(--spacing) * -0.5);\n }\n .m-0 {\n margin: calc(var(--spacing) * 0);\n }\n .-mx-1 {\n margin-inline: calc(var(--spacing) * -1);\n }\n .my-1 {\n margin-block: calc(var(--spacing) * 1);\n }\n .my-2 {\n margin-block: calc(var(--spacing) * 2);\n }\n .-mt-1 {\n margin-top: calc(var(--spacing) * -1);\n }\n .-mt-2 {\n margin-top: calc(var(--spacing) * -2);\n }\n .-mt-4 {\n margin-top: calc(var(--spacing) * -4);\n }\n .mt-1 {\n margin-top: calc(var(--spacing) * 1);\n }\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n .mt-8 {\n margin-top: calc(var(--spacing) * 8);\n }\n .-mb-0\\.5 {\n margin-bottom: calc(var(--spacing) * -0.5);\n }\n .mb-1 {\n margin-bottom: calc(var(--spacing) * 1);\n }\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n .ml-4 {\n margin-left: calc(var(--spacing) * 4);\n }\n .ml-auto {\n margin-left: auto;\n }\n .line-clamp-1 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n }\n .block {\n display: block;\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .hidden {\n display: none;\n }\n .inline-flex {\n display: inline-flex;\n }\n .aspect-square {\n aspect-ratio: 1 / 1;\n }\n .size-2 {\n width: calc(var(--spacing) * 2);\n height: calc(var(--spacing) * 2);\n }\n .size-3 {\n width: calc(var(--spacing) * 3);\n height: calc(var(--spacing) * 3);\n }\n .size-3\\.5 {\n width: calc(var(--spacing) * 3.5);\n height: calc(var(--spacing) * 3.5);\n }\n .size-4 {\n width: calc(var(--spacing) * 4);\n height: calc(var(--spacing) * 4);\n }\n .size-5 {\n width: calc(var(--spacing) * 5);\n height: calc(var(--spacing) * 5);\n }\n .size-9 {\n width: calc(var(--spacing) * 9);\n height: calc(var(--spacing) * 9);\n }\n .size-16 {\n width: calc(var(--spacing) * 16);\n height: calc(var(--spacing) * 16);\n }\n .h-0 {\n height: calc(var(--spacing) * 0);\n }\n .h-3\\.5 {\n height: calc(var(--spacing) * 3.5);\n }\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n .h-6 {\n height: calc(var(--spacing) * 6);\n }\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n .h-9 {\n height: calc(var(--spacing) * 9);\n }\n .h-10 {\n height: calc(var(--spacing) * 10);\n }\n .h-12 {\n height: calc(var(--spacing) * 12);\n }\n .h-16 {\n height: calc(var(--spacing) * 16);\n }\n .h-\\[18px\\] {\n height: 18px;\n }\n .h-\\[20px\\] {\n height: 20px;\n }\n .h-\\[44px\\] {\n height: 44px;\n }\n .h-auto {\n height: auto;\n }\n .h-auto\\! {\n height: auto !important;\n }\n .h-full {\n height: 100%;\n }\n .h-max {\n height: max-content;\n }\n .h-px {\n height: 1px;\n }\n .max-h-\\(--radix-dropdown-menu-content-available-height\\) {\n max-height: var(--radix-dropdown-menu-content-available-height);\n }\n .max-h-0 {\n max-height: calc(var(--spacing) * 0);\n }\n .max-h-60 {\n max-height: calc(var(--spacing) * 60);\n }\n .max-h-\\[300px\\] {\n max-height: 300px;\n }\n .min-h-full {\n min-height: 100%;\n }\n .w-0 {\n width: calc(var(--spacing) * 0);\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-6 {\n width: calc(var(--spacing) * 6);\n }\n .w-12 {\n width: calc(var(--spacing) * 12);\n }\n .w-16 {\n width: calc(var(--spacing) * 16);\n }\n .w-20 {\n width: calc(var(--spacing) * 20);\n }\n .w-24 {\n width: calc(var(--spacing) * 24);\n }\n .w-28 {\n width: calc(var(--spacing) * 28);\n }\n .w-32 {\n width: calc(var(--spacing) * 32);\n }\n .w-40 {\n width: calc(var(--spacing) * 40);\n }\n .w-72 {\n width: calc(var(--spacing) * 72);\n }\n .w-full {\n width: 100%;\n }\n .max-w-0 {\n max-width: calc(var(--spacing) * 0);\n }\n .max-w-\\[calc\\(100\\%-2rem\\)\\] {\n max-width: calc(100% - 2rem);\n }\n .min-w-0 {\n min-width: calc(var(--spacing) * 0);\n }\n .min-w-\\[8rem\\] {\n min-width: 8rem;\n }\n .flex-1 {\n flex: 1;\n }\n .shrink-0 {\n flex-shrink: 0;\n }\n .origin-\\(--radix-dropdown-menu-content-transform-origin\\) {\n transform-origin: var(--radix-dropdown-menu-content-transform-origin);\n }\n .origin-\\(--radix-popover-content-transform-origin\\) {\n transform-origin: var(--radix-popover-content-transform-origin);\n }\n .-translate-x-0 {\n --tw-translate-x: calc(var(--spacing) * -0);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-x-3 {\n --tw-translate-x: calc(var(--spacing) * -3);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-2 {\n --tw-translate-x: calc(var(--spacing) * 2);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-\\[-50\\%\\] {\n --tw-translate-x: -50%;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-y-\\[-50\\%\\] {\n --tw-translate-y: -50%;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .rotate-180 {\n rotate: 180deg;\n }\n .animate-pulse {\n animation: var(--animate-pulse);\n }\n .animate-spin {\n animation: var(--animate-spin);\n }\n .cursor-default {\n cursor: default;\n }\n .cursor-pointer {\n cursor: pointer;\n }\n .scroll-py-1 {\n scroll-padding-block: calc(var(--spacing) * 1);\n }\n .grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .flex-col {\n flex-direction: column;\n }\n .flex-col-reverse {\n flex-direction: column-reverse;\n }\n .items-center {\n align-items: center;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .justify-end {\n justify-content: flex-end;\n }\n .gap-0 {\n gap: calc(var(--spacing) * 0);\n }\n .gap-0\\.5 {\n gap: calc(var(--spacing) * 0.5);\n }\n .gap-1\\.5 {\n gap: calc(var(--spacing) * 1.5);\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .gap-3 {\n gap: calc(var(--spacing) * 3);\n }\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n .gap-5 {\n gap: calc(var(--spacing) * 5);\n }\n .gap-6 {\n gap: calc(var(--spacing) * 6);\n }\n .gap-\\[10px\\] {\n gap: 10px;\n }\n .space-y-2 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-4 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-5 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-6 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .overflow-x-hidden {\n overflow-x: hidden;\n }\n .overflow-y-auto {\n overflow-y: auto;\n }\n .rounded-\\[4px\\] {\n border-radius: 4px;\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-lg {\n border-radius: var(--radius);\n }\n .rounded-md {\n border-radius: calc(var(--radius) - 2px);\n }\n .rounded-sm {\n border-radius: calc(var(--radius) - 4px);\n }\n .rounded-xs {\n border-radius: var(--radius-xs);\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n .border-border {\n border-color: var(--border);\n }\n .border-input {\n border-color: var(--input);\n }\n .border-primary {\n border-color: var(--primary);\n }\n .bg-accent {\n background-color: var(--accent);\n }\n .bg-background {\n background-color: var(--background);\n }\n .bg-black\\/50 {\n background-color: color-mix(in srgb, #000 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 50%, transparent);\n }\n }\n .bg-border {\n background-color: var(--border);\n }\n .bg-destructive {\n background-color: var(--destructive);\n }\n .bg-muted {\n background-color: var(--muted);\n }\n .bg-popover {\n background-color: var(--popover);\n }\n .bg-primary {\n background-color: var(--primary);\n }\n .bg-secondary {\n background-color: var(--secondary);\n }\n .bg-transparent {\n background-color: transparent;\n }\n .fill-current {\n fill: currentcolor;\n }\n .fill-primary {\n fill: var(--primary);\n }\n .object-cover {\n object-fit: cover;\n }\n .p-0 {\n padding: calc(var(--spacing) * 0);\n }\n .p-1 {\n padding: calc(var(--spacing) * 1);\n }\n .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n .p-6 {\n padding: calc(var(--spacing) * 6);\n }\n .px-1 {\n padding-inline: calc(var(--spacing) * 1);\n }\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n .px-6 {\n padding-inline: calc(var(--spacing) * 6);\n }\n .py-1 {\n padding-block: calc(var(--spacing) * 1);\n }\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n .py-4 {\n padding-block: calc(var(--spacing) * 4);\n }\n .py-6 {\n padding-block: calc(var(--spacing) * 6);\n }\n .pt-2 {\n padding-top: calc(var(--spacing) * 2);\n }\n .pt-4 {\n padding-top: calc(var(--spacing) * 4);\n }\n .pr-2 {\n padding-right: calc(var(--spacing) * 2);\n }\n .pb-1 {\n padding-bottom: calc(var(--spacing) * 1);\n }\n .pb-2 {\n padding-bottom: calc(var(--spacing) * 2);\n }\n .pl-8 {\n padding-left: calc(var(--spacing) * 8);\n }\n .text-center {\n text-align: center;\n }\n .text-left {\n text-align: left;\n }\n .text-right {\n text-align: right;\n }\n .text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n .text-\\[13px\\] {\n font-size: 13px;\n }\n .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .tracking-tight {\n --tw-tracking: var(--tracking-tight);\n letter-spacing: var(--tracking-tight);\n }\n .tracking-widest {\n --tw-tracking: var(--tracking-widest);\n letter-spacing: var(--tracking-widest);\n }\n .text-ellipsis {\n text-overflow: ellipsis;\n }\n .whitespace-nowrap {\n white-space: nowrap;\n }\n .text-background {\n color: var(--background);\n }\n .text-current {\n color: currentcolor;\n }\n .text-destructive {\n color: var(--destructive);\n }\n .text-destructive-foreground {\n color: var(--destructive-foreground);\n }\n .text-foreground {\n color: var(--foreground);\n }\n .text-input {\n color: var(--input);\n }\n .text-muted-foreground {\n color: var(--muted-foreground);\n }\n .text-popover-foreground {\n color: var(--popover-foreground);\n }\n .text-primary {\n color: var(--primary);\n }\n .text-primary-foreground {\n color: var(--primary-foreground);\n }\n .text-red-500 {\n color: var(--color-red-500);\n }\n .text-ring {\n color: var(--ring);\n }\n .text-secondary-foreground {\n color: var(--secondary-foreground);\n }\n .text-white {\n color: var(--color-white);\n }\n .line-through {\n text-decoration-line: line-through;\n }\n .underline {\n text-decoration-line: underline;\n }\n .underline-offset-4 {\n text-underline-offset: 4px;\n }\n .opacity-0 {\n opacity: 0%;\n }\n .opacity-50 {\n opacity: 50%;\n }\n .opacity-70 {\n opacity: 70%;\n }\n .opacity-100 {\n opacity: 100%;\n }\n .shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-md {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-xs {\n --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring-offset-background {\n --tw-ring-offset-color: var(--background);\n }\n .outline-hidden {\n --tw-outline-style: none;\n outline-style: none;\n @media (forced-colors: active) {\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n }\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-\\[color\\,box-shadow\\] {\n transition-property: color,box-shadow;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-none {\n transition-property: none;\n }\n .duration-200 {\n --tw-duration: 200ms;\n transition-duration: 200ms;\n }\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n .select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n .duration-200 {\n animation-duration: 200ms;\n }\n .ease-in-out {\n animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n }\n .group-data-\\[disabled\\=true\\]\\:pointer-events-none {\n &:is(:where(.group)[data-disabled=\"true\"] *) {\n pointer-events: none;\n }\n }\n .group-data-\\[disabled\\=true\\]\\:opacity-50 {\n &:is(:where(.group)[data-disabled=\"true\"] *) {\n opacity: 50%;\n }\n }\n .peer-disabled\\:cursor-not-allowed {\n &:is(:where(.peer):disabled ~ *) {\n cursor: not-allowed;\n }\n }\n .peer-disabled\\:opacity-50 {\n &:is(:where(.peer):disabled ~ *) {\n opacity: 50%;\n }\n }\n .file\\:inline-flex {\n &::file-selector-button {\n display: inline-flex;\n }\n }\n .file\\:h-7 {\n &::file-selector-button {\n height: calc(var(--spacing) * 7);\n }\n }\n .file\\:border-0 {\n &::file-selector-button {\n border-style: var(--tw-border-style);\n border-width: 0px;\n }\n }\n .file\\:bg-transparent {\n &::file-selector-button {\n background-color: transparent;\n }\n }\n .file\\:text-sm {\n &::file-selector-button {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n }\n .file\\:font-medium {\n &::file-selector-button {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n }\n .file\\:text-foreground {\n &::file-selector-button {\n color: var(--foreground);\n }\n }\n .placeholder\\:text-muted-foreground {\n &::placeholder {\n color: var(--muted-foreground);\n }\n }\n .after\\:absolute {\n &::after {\n content: var(--tw-content);\n position: absolute;\n }\n }\n .after\\:top-1\\/2 {\n &::after {\n content: var(--tw-content);\n top: calc(1/2 * 100%);\n }\n }\n .after\\:right-0 {\n &::after {\n content: var(--tw-content);\n right: calc(var(--spacing) * 0);\n }\n }\n .after\\:left-0 {\n &::after {\n content: var(--tw-content);\n left: calc(var(--spacing) * 0);\n }\n }\n .after\\:z-0 {\n &::after {\n content: var(--tw-content);\n z-index: 0;\n }\n }\n .after\\:h-px {\n &::after {\n content: var(--tw-content);\n height: 1px;\n }\n }\n .after\\:-translate-y-1\\/2 {\n &::after {\n content: var(--tw-content);\n --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n .after\\:bg-background {\n &::after {\n content: var(--tw-content);\n background-color: var(--background);\n }\n }\n .after\\:content-\\[\\'\\'\\] {\n &::after {\n content: var(--tw-content);\n --tw-content: '';\n content: var(--tw-content);\n }\n }\n .last\\:border-b-0 {\n &:last-child {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 0px;\n }\n }\n .hover\\:bg-accent {\n &:hover {\n @media (hover: hover) {\n background-color: var(--accent);\n }\n }\n }\n .hover\\:bg-destructive\\/90 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--destructive);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--destructive) 90%, transparent);\n }\n }\n }\n }\n .hover\\:bg-muted {\n &:hover {\n @media (hover: hover) {\n background-color: var(--muted);\n }\n }\n }\n .hover\\:bg-primary\\/90 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--primary);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--primary) 90%, transparent);\n }\n }\n }\n }\n .hover\\:bg-secondary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--secondary);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--secondary) 80%, transparent);\n }\n }\n }\n }\n .hover\\:text-accent-foreground {\n &:hover {\n @media (hover: hover) {\n color: var(--accent-foreground);\n }\n }\n }\n .hover\\:text-foreground {\n &:hover {\n @media (hover: hover) {\n color: var(--foreground);\n }\n }\n }\n .hover\\:text-muted-foreground {\n &:hover {\n @media (hover: hover) {\n color: var(--muted-foreground);\n }\n }\n }\n .hover\\:underline {\n &:hover {\n @media (hover: hover) {\n text-decoration-line: underline;\n }\n }\n }\n .hover\\:opacity-100 {\n &:hover {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n }\n .focus\\:bg-accent {\n &:focus {\n background-color: var(--accent);\n }\n }\n .focus\\:text-accent-foreground {\n &:focus {\n color: var(--accent-foreground);\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-ring {\n &:focus {\n --tw-ring-color: var(--ring);\n }\n }\n .focus\\:ring-offset-2 {\n &:focus {\n --tw-ring-offset-width: 2px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n .focus\\:outline-hidden {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n @media (forced-colors: active) {\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n }\n }\n .focus-visible\\:border-ring {\n &:focus-visible {\n border-color: var(--ring);\n }\n }\n .focus-visible\\:ring-\\[3px\\] {\n &:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus-visible\\:ring-destructive\\/20 {\n &:focus-visible {\n --tw-ring-color: var(--destructive);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n }\n }\n }\n .focus-visible\\:ring-ring\\/50 {\n &:focus-visible {\n --tw-ring-color: var(--ring);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);\n }\n }\n }\n .disabled\\:pointer-events-none {\n &:disabled {\n pointer-events: none;\n }\n }\n .disabled\\:cursor-not-allowed {\n &:disabled {\n cursor: not-allowed;\n }\n }\n .disabled\\:opacity-50 {\n &:disabled {\n opacity: 50%;\n }\n }\n .has-\\[\\>svg\\]\\:px-2\\.5 {\n &:has(>svg) {\n padding-inline: calc(var(--spacing) * 2.5);\n }\n }\n .has-\\[\\>svg\\]\\:px-3 {\n &:has(>svg) {\n padding-inline: calc(var(--spacing) * 3);\n }\n }\n .has-\\[\\>svg\\]\\:px-4 {\n &:has(>svg) {\n padding-inline: calc(var(--spacing) * 4);\n }\n }\n .aria-invalid\\:border-destructive {\n &[aria-invalid=\"true\"] {\n border-color: var(--destructive);\n }\n }\n .aria-invalid\\:ring-destructive\\/20 {\n &[aria-invalid=\"true\"] {\n --tw-ring-color: var(--destructive);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n }\n }\n }\n .data-\\[disabled\\]\\:pointer-events-none {\n &[data-disabled] {\n pointer-events: none;\n }\n }\n .data-\\[disabled\\]\\:opacity-50 {\n &[data-disabled] {\n opacity: 50%;\n }\n }\n .data-\\[disabled\\=true\\]\\:pointer-events-none {\n &[data-disabled=\"true\"] {\n pointer-events: none;\n }\n }\n .data-\\[disabled\\=true\\]\\:opacity-50 {\n &[data-disabled=\"true\"] {\n opacity: 50%;\n }\n }\n .data-\\[error\\=true\\]\\:text-destructive-foreground {\n &[data-error=\"true\"] {\n color: var(--destructive-foreground);\n }\n }\n .data-\\[inset\\]\\:pl-8 {\n &[data-inset] {\n padding-left: calc(var(--spacing) * 8);\n }\n }\n .data-\\[selected\\=true\\]\\:bg-accent {\n &[data-selected=\"true\"] {\n background-color: var(--accent);\n }\n }\n .data-\\[selected\\=true\\]\\:text-accent-foreground {\n &[data-selected=\"true\"] {\n color: var(--accent-foreground);\n }\n }\n .data-\\[side\\=bottom\\]\\:slide-in-from-top-2 {\n &[data-side=\"bottom\"] {\n --tw-enter-translate-y: -0.5rem;\n }\n }\n .data-\\[side\\=left\\]\\:slide-in-from-right-2 {\n &[data-side=\"left\"] {\n --tw-enter-translate-x: 0.5rem;\n }\n }\n .data-\\[side\\=right\\]\\:slide-in-from-left-2 {\n &[data-side=\"right\"] {\n --tw-enter-translate-x: -0.5rem;\n }\n }\n .data-\\[side\\=top\\]\\:slide-in-from-bottom-2 {\n &[data-side=\"top\"] {\n --tw-enter-translate-y: 0.5rem;\n }\n }\n .\\*\\*\\:data-\\[slot\\=command-input-wrapper\\]\\:h-12 {\n :is(& *) {\n &[data-slot=\"command-input-wrapper\"] {\n height: calc(var(--spacing) * 12);\n }\n }\n }\n .data-\\[state\\=checked\\]\\:border-primary {\n &[data-state=\"checked\"] {\n border-color: var(--primary);\n }\n }\n .data-\\[state\\=checked\\]\\:bg-primary {\n &[data-state=\"checked\"] {\n background-color: var(--primary);\n }\n }\n .data-\\[state\\=checked\\]\\:text-primary-foreground {\n &[data-state=\"checked\"] {\n color: var(--primary-foreground);\n }\n }\n .data-\\[state\\=closed\\]\\:animate-out {\n &[data-state=\"closed\"] {\n animation-name: exit;\n animation-duration: 150ms;\n --tw-exit-opacity: initial;\n --tw-exit-scale: initial;\n --tw-exit-rotate: initial;\n --tw-exit-translate-x: initial;\n --tw-exit-translate-y: initial;\n }\n }\n .data-\\[state\\=closed\\]\\:fade-out-0 {\n &[data-state=\"closed\"] {\n --tw-exit-opacity: 0;\n }\n }\n .data-\\[state\\=closed\\]\\:zoom-out-95 {\n &[data-state=\"closed\"] {\n --tw-exit-scale: .95;\n }\n }\n .data-\\[state\\=open\\]\\:bg-accent {\n &[data-state=\"open\"] {\n background-color: var(--accent);\n }\n }\n .data-\\[state\\=open\\]\\:text-accent-foreground {\n &[data-state=\"open\"] {\n color: var(--accent-foreground);\n }\n }\n .data-\\[state\\=open\\]\\:text-muted-foreground {\n &[data-state=\"open\"] {\n color: var(--muted-foreground);\n }\n }\n .data-\\[state\\=open\\]\\:animate-in {\n &[data-state=\"open\"] {\n animation-name: enter;\n animation-duration: 150ms;\n --tw-enter-opacity: initial;\n --tw-enter-scale: initial;\n --tw-enter-rotate: initial;\n --tw-enter-translate-x: initial;\n --tw-enter-translate-y: initial;\n }\n }\n .data-\\[state\\=open\\]\\:fade-in-0 {\n &[data-state=\"open\"] {\n --tw-enter-opacity: 0;\n }\n }\n .data-\\[state\\=open\\]\\:zoom-in-95 {\n &[data-state=\"open\"] {\n --tw-enter-scale: .95;\n }\n }\n .data-\\[variant\\=destructive\\]\\:text-destructive {\n &[data-variant=\"destructive\"] {\n color: var(--destructive);\n }\n }\n .data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/10 {\n &[data-variant=\"destructive\"] {\n &:focus {\n background-color: var(--destructive);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--destructive) 10%, transparent);\n }\n }\n }\n }\n .data-\\[variant\\=destructive\\]\\:focus\\:text-destructive {\n &[data-variant=\"destructive\"] {\n &:focus {\n color: var(--destructive);\n }\n }\n }\n .max-md\\:cursor-pointer {\n @media (width < 48rem) {\n cursor: pointer;\n }\n }\n .max-sm\\:hidden {\n @media (width < 40rem) {\n display: none;\n }\n }\n .sm\\:max-w-lg {\n @media (width >= 40rem) {\n max-width: var(--container-lg);\n }\n }\n .sm\\:flex-row {\n @media (width >= 40rem) {\n flex-direction: row;\n }\n }\n .sm\\:justify-end {\n @media (width >= 40rem) {\n justify-content: flex-end;\n }\n }\n .sm\\:text-left {\n @media (width >= 40rem) {\n text-align: left;\n }\n }\n .md\\:order-last {\n @media (width >= 48rem) {\n order: 9999;\n }\n }\n .md\\:order-none {\n @media (width >= 48rem) {\n order: 0;\n }\n }\n .md\\:col-span-2 {\n @media (width >= 48rem) {\n grid-column: span 2 / span 2;\n }\n }\n .md\\:col-span-3 {\n @media (width >= 48rem) {\n grid-column: span 3 / span 3;\n }\n }\n .md\\:col-span-4 {\n @media (width >= 48rem) {\n grid-column: span 4 / span 4;\n }\n }\n .md\\:block {\n @media (width >= 48rem) {\n display: block;\n }\n }\n .md\\:flex {\n @media (width >= 48rem) {\n display: flex;\n }\n }\n .md\\:grid {\n @media (width >= 48rem) {\n display: grid;\n }\n }\n .md\\:hidden {\n @media (width >= 48rem) {\n display: none;\n }\n }\n .md\\:max-w-\\[75\\%\\] {\n @media (width >= 48rem) {\n max-width: 75%;\n }\n }\n .md\\:grid-cols-2 {\n @media (width >= 48rem) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n }\n .md\\:grid-cols-3 {\n @media (width >= 48rem) {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n }\n .md\\:grid-cols-7 {\n @media (width >= 48rem) {\n grid-template-columns: repeat(7, minmax(0, 1fr));\n }\n }\n .md\\:gap-0 {\n @media (width >= 48rem) {\n gap: calc(var(--spacing) * 0);\n }\n }\n .md\\:px-8 {\n @media (width >= 48rem) {\n padding-inline: calc(var(--spacing) * 8);\n }\n }\n .md\\:py-12 {\n @media (width >= 48rem) {\n padding-block: calc(var(--spacing) * 12);\n }\n }\n .md\\:text-sm {\n @media (width >= 48rem) {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n }\n .dark\\:focus-visible\\:ring-destructive\\/40 {\n @media (prefers-color-scheme: dark) {\n &:focus-visible {\n --tw-ring-color: var(--destructive);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n }\n }\n }\n }\n .dark\\:aria-invalid\\:ring-destructive\\/40 {\n @media (prefers-color-scheme: dark) {\n &[aria-invalid=\"true\"] {\n --tw-ring-color: var(--destructive);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n }\n }\n }\n }\n .dark\\:data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/20 {\n @media (prefers-color-scheme: dark) {\n &[data-variant=\"destructive\"] {\n &:focus {\n background-color: var(--destructive);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n }\n }\n }\n }\n }\n .\\[\\&_\\[cmdk-group-heading\\]\\]\\:px-2 {\n & [cmdk-group-heading] {\n padding-inline: calc(var(--spacing) * 2);\n }\n }\n .\\[\\&_\\[cmdk-group-heading\\]\\]\\:py-1\\.5 {\n & [cmdk-group-heading] {\n padding-block: calc(var(--spacing) * 1.5);\n }\n }\n .\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-xs {\n & [cmdk-group-heading] {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n }\n .\\[\\&_\\[cmdk-group-heading\\]\\]\\:font-medium {\n & [cmdk-group-heading] {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n }\n .\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-muted-foreground {\n & [cmdk-group-heading] {\n color: var(--muted-foreground);\n }\n }\n .\\[\\&_\\[cmdk-group\\]\\]\\:px-2 {\n & [cmdk-group] {\n padding-inline: calc(var(--spacing) * 2);\n }\n }\n .\\[\\&_\\[cmdk-group\\]\\:not\\(\\[hidden\\]\\)_\\~\\[cmdk-group\\]\\]\\:pt-0 {\n & [cmdk-group]:not([hidden]) ~[cmdk-group] {\n padding-top: calc(var(--spacing) * 0);\n }\n }\n .\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:h-5 {\n & [cmdk-input-wrapper] svg {\n height: calc(var(--spacing) * 5);\n }\n }\n .\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:w-5 {\n & [cmdk-input-wrapper] svg {\n width: calc(var(--spacing) * 5);\n }\n }\n .\\[\\&_\\[cmdk-input\\]\\]\\:h-12 {\n & [cmdk-input] {\n height: calc(var(--spacing) * 12);\n }\n }\n .\\[\\&_\\[cmdk-item\\]\\]\\:px-2 {\n & [cmdk-item] {\n padding-inline: calc(var(--spacing) * 2);\n }\n }\n .\\[\\&_\\[cmdk-item\\]\\]\\:py-3 {\n & [cmdk-item] {\n padding-block: calc(var(--spacing) * 3);\n }\n }\n .\\[\\&_\\[cmdk-item\\]_svg\\]\\:h-5 {\n & [cmdk-item] svg {\n height: calc(var(--spacing) * 5);\n }\n }\n .\\[\\&_\\[cmdk-item\\]_svg\\]\\:w-5 {\n & [cmdk-item] svg {\n width: calc(var(--spacing) * 5);\n }\n }\n .\\[\\&_svg\\]\\:pointer-events-none {\n & svg {\n pointer-events: none;\n }\n }\n .\\[\\&_svg\\]\\:shrink-0 {\n & svg {\n flex-shrink: 0;\n }\n }\n .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 {\n & svg:not([class*='size-']) {\n width: calc(var(--spacing) * 4);\n height: calc(var(--spacing) * 4);\n }\n }\n .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'text-\\'\\]\\)\\]\\:text-muted-foreground {\n & svg:not([class*='text-']) {\n color: var(--muted-foreground);\n }\n }\n .data-\\[variant\\=destructive\\]\\:\\*\\:\\[svg\\]\\:\\!text-destructive {\n &[data-variant=\"destructive\"] {\n :is(& > *) {\n &:is(svg) {\n color: var(--destructive) !important;\n }\n }\n }\n }\n}\n@layer base {\n ::selection {\n background-color: var(--primary);\n color: var(--primary-foreground);\n }\n * {\n --tw-border-style: solid;\n border-style: solid;\n border-color: var(--border);\n outline-color: var(--ring);\n @supports (color: color-mix(in lab, red, red)) {\n outline-color: color-mix(in oklab, var(--ring) 50%, transparent);\n }\n }\n .checkout-embed {\n background-color: var(--background);\n font-family: var(--font-sans), Helvetica, Arial, apple-system, sans-serif;\n color: var(--foreground);\n }\n h2 {\n font-size: var(--text-2xl);\n line-height: var(--tw-leading, var(--text-2xl--line-height));\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n --tw-tracking: var(--tracking-tight);\n letter-spacing: var(--tracking-tight);\n }\n p {\n --tw-tracking: var(--tracking-tight);\n letter-spacing: var(--tracking-tight);\n }\n}\n@layer utilities {\n .scrollbar-hidden {\n scrollbar-width: none;\n }\n .scrollbar-hidden::-webkit-scrollbar {\n display: none;\n }\n}\n@keyframes enter {\n from {\n opacity: var(--tw-enter-opacity, 1);\n transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n }\n}\n@keyframes exit {\n to {\n opacity: var(--tw-exit-opacity, 1);\n transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n }\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-space-y-reverse {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-leading {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-tracking {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-offset-width {\n syntax: \"<length>\";\n inherits: false;\n initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-duration {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ease {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-content {\n syntax: \"*\";\n initial-value: \"\";\n inherits: false;\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *, ::before, ::after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-space-y-reverse: 0;\n --tw-border-style: solid;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-tracking: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-duration: initial;\n --tw-ease: initial;\n --tw-content: \"\";\n }\n }\n}\n";
|
|
7520
|
+
var css_248z = "/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root, :host {\n --font-sans: var(--font-sans), Helvetica, Arial, apple-system, sans-serif;\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --color-red-500: oklch(63.7% 0.237 25.331);\n --color-black: #000;\n --color-white: #fff;\n --spacing: 0.25rem;\n --container-lg: 32rem;\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-base: 1rem;\n --text-base--line-height: calc(1.5 / 1);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-2xl: 1.5rem;\n --text-2xl--line-height: calc(2 / 1.5);\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --tracking-tight: -0.025em;\n --tracking-widest: 0.1em;\n --radius-xs: 0.125rem;\n --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n --animate-spin: spin 1s linear infinite;\n --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans), Helvetica, Arial, apple-system, sans-serif;\n --default-mono-font-family: var(--font-mono);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .-top-2 {\n top: calc(var(--spacing) * -2);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .top-0\\.5 {\n top: calc(var(--spacing) * 0.5);\n }\n .top-1\\/2 {\n top: calc(1/2 * 100%);\n }\n .top-4 {\n top: calc(var(--spacing) * 4);\n }\n .top-\\[50\\%\\] {\n top: 50%;\n }\n .top-full {\n top: 100%;\n }\n .-right-2 {\n right: calc(var(--spacing) * -2);\n }\n .right-0 {\n right: calc(var(--spacing) * 0);\n }\n .right-4 {\n right: calc(var(--spacing) * 4);\n }\n .bottom-0 {\n bottom: calc(var(--spacing) * 0);\n }\n .left-0 {\n left: calc(var(--spacing) * 0);\n }\n .left-1\\/2 {\n left: calc(1/2 * 100%);\n }\n .left-2 {\n left: calc(var(--spacing) * 2);\n }\n .left-\\[50\\%\\] {\n left: 50%;\n }\n .z-0 {\n z-index: 0;\n }\n .z-10 {\n z-index: 10;\n }\n .z-50 {\n z-index: 50;\n }\n .order-3 {\n order: 3;\n }\n .order-4 {\n order: 4;\n }\n .order-5 {\n order: 5;\n }\n .order-6 {\n order: 6;\n }\n .order-7 {\n order: 7;\n }\n .order-first {\n order: -9999;\n }\n .container {\n width: 100%;\n @media (width >= 40rem) {\n max-width: 40rem;\n }\n @media (width >= 48rem) {\n max-width: 48rem;\n }\n @media (width >= 64rem) {\n max-width: 64rem;\n }\n @media (width >= 80rem) {\n max-width: 80rem;\n }\n @media (width >= 96rem) {\n max-width: 96rem;\n }\n }\n .-m-0\\.5 {\n margin: calc(var(--spacing) * -0.5);\n }\n .m-0 {\n margin: calc(var(--spacing) * 0);\n }\n .-mx-1 {\n margin-inline: calc(var(--spacing) * -1);\n }\n .my-1 {\n margin-block: calc(var(--spacing) * 1);\n }\n .my-2 {\n margin-block: calc(var(--spacing) * 2);\n }\n .-mt-1 {\n margin-top: calc(var(--spacing) * -1);\n }\n .-mt-2 {\n margin-top: calc(var(--spacing) * -2);\n }\n .-mt-4 {\n margin-top: calc(var(--spacing) * -4);\n }\n .mt-1 {\n margin-top: calc(var(--spacing) * 1);\n }\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n .mt-8 {\n margin-top: calc(var(--spacing) * 8);\n }\n .-mb-0\\.5 {\n margin-bottom: calc(var(--spacing) * -0.5);\n }\n .-mb-2 {\n margin-bottom: calc(var(--spacing) * -2);\n }\n .mb-1 {\n margin-bottom: calc(var(--spacing) * 1);\n }\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n .ml-4 {\n margin-left: calc(var(--spacing) * 4);\n }\n .ml-auto {\n margin-left: auto;\n }\n .line-clamp-1 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n }\n .block {\n display: block;\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .hidden {\n display: none;\n }\n .inline-flex {\n display: inline-flex;\n }\n .aspect-square {\n aspect-ratio: 1 / 1;\n }\n .size-2 {\n width: calc(var(--spacing) * 2);\n height: calc(var(--spacing) * 2);\n }\n .size-3 {\n width: calc(var(--spacing) * 3);\n height: calc(var(--spacing) * 3);\n }\n .size-3\\.5 {\n width: calc(var(--spacing) * 3.5);\n height: calc(var(--spacing) * 3.5);\n }\n .size-4 {\n width: calc(var(--spacing) * 4);\n height: calc(var(--spacing) * 4);\n }\n .size-5 {\n width: calc(var(--spacing) * 5);\n height: calc(var(--spacing) * 5);\n }\n .size-9 {\n width: calc(var(--spacing) * 9);\n height: calc(var(--spacing) * 9);\n }\n .size-16 {\n width: calc(var(--spacing) * 16);\n height: calc(var(--spacing) * 16);\n }\n .h-0 {\n height: calc(var(--spacing) * 0);\n }\n .h-3\\.5 {\n height: calc(var(--spacing) * 3.5);\n }\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n .h-6 {\n height: calc(var(--spacing) * 6);\n }\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n .h-9 {\n height: calc(var(--spacing) * 9);\n }\n .h-10 {\n height: calc(var(--spacing) * 10);\n }\n .h-12 {\n height: calc(var(--spacing) * 12);\n }\n .h-16 {\n height: calc(var(--spacing) * 16);\n }\n .h-\\[2px\\] {\n height: 2px;\n }\n .h-\\[18px\\] {\n height: 18px;\n }\n .h-\\[20px\\] {\n height: 20px;\n }\n .h-\\[44px\\] {\n height: 44px;\n }\n .h-auto {\n height: auto;\n }\n .h-auto\\! {\n height: auto !important;\n }\n .h-full {\n height: 100%;\n }\n .h-max {\n height: max-content;\n }\n .h-px {\n height: 1px;\n }\n .max-h-\\(--radix-dropdown-menu-content-available-height\\) {\n max-height: var(--radix-dropdown-menu-content-available-height);\n }\n .max-h-0 {\n max-height: calc(var(--spacing) * 0);\n }\n .max-h-60 {\n max-height: calc(var(--spacing) * 60);\n }\n .max-h-\\[300px\\] {\n max-height: 300px;\n }\n .min-h-full {\n min-height: 100%;\n }\n .w-0 {\n width: calc(var(--spacing) * 0);\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-6 {\n width: calc(var(--spacing) * 6);\n }\n .w-12 {\n width: calc(var(--spacing) * 12);\n }\n .w-16 {\n width: calc(var(--spacing) * 16);\n }\n .w-20 {\n width: calc(var(--spacing) * 20);\n }\n .w-24 {\n width: calc(var(--spacing) * 24);\n }\n .w-28 {\n width: calc(var(--spacing) * 28);\n }\n .w-32 {\n width: calc(var(--spacing) * 32);\n }\n .w-40 {\n width: calc(var(--spacing) * 40);\n }\n .w-72 {\n width: calc(var(--spacing) * 72);\n }\n .w-full {\n width: 100%;\n }\n .max-w-0 {\n max-width: calc(var(--spacing) * 0);\n }\n .max-w-\\[calc\\(100\\%-2rem\\)\\] {\n max-width: calc(100% - 2rem);\n }\n .min-w-0 {\n min-width: calc(var(--spacing) * 0);\n }\n .min-w-\\[8rem\\] {\n min-width: 8rem;\n }\n .flex-1 {\n flex: 1;\n }\n .shrink-0 {\n flex-shrink: 0;\n }\n .origin-\\(--radix-dropdown-menu-content-transform-origin\\) {\n transform-origin: var(--radix-dropdown-menu-content-transform-origin);\n }\n .origin-\\(--radix-popover-content-transform-origin\\) {\n transform-origin: var(--radix-popover-content-transform-origin);\n }\n .-translate-x-0 {\n --tw-translate-x: calc(var(--spacing) * -0);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-x-3 {\n --tw-translate-x: calc(var(--spacing) * -3);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-2 {\n --tw-translate-x: calc(var(--spacing) * 2);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-\\[-50\\%\\] {\n --tw-translate-x: -50%;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-y-\\[-50\\%\\] {\n --tw-translate-y: -50%;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .rotate-180 {\n rotate: 180deg;\n }\n .animate-pulse {\n animation: var(--animate-pulse);\n }\n .animate-spin {\n animation: var(--animate-spin);\n }\n .cursor-default {\n cursor: default;\n }\n .cursor-pointer {\n cursor: pointer;\n }\n .resize {\n resize: both;\n }\n .scroll-py-1 {\n scroll-padding-block: calc(var(--spacing) * 1);\n }\n .grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .flex-col {\n flex-direction: column;\n }\n .flex-col-reverse {\n flex-direction: column-reverse;\n }\n .items-center {\n align-items: center;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .justify-end {\n justify-content: flex-end;\n }\n .gap-0 {\n gap: calc(var(--spacing) * 0);\n }\n .gap-0\\.5 {\n gap: calc(var(--spacing) * 0.5);\n }\n .gap-1\\.5 {\n gap: calc(var(--spacing) * 1.5);\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .gap-3 {\n gap: calc(var(--spacing) * 3);\n }\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n .gap-5 {\n gap: calc(var(--spacing) * 5);\n }\n .gap-6 {\n gap: calc(var(--spacing) * 6);\n }\n .gap-\\[10px\\] {\n gap: 10px;\n }\n .space-y-2 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-4 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-5 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-6 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .overflow-x-hidden {\n overflow-x: hidden;\n }\n .overflow-y-auto {\n overflow-y: auto;\n }\n .rounded-\\[4px\\] {\n border-radius: 4px;\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-lg {\n border-radius: var(--radius);\n }\n .rounded-md {\n border-radius: calc(var(--radius) - 2px);\n }\n .rounded-sm {\n border-radius: calc(var(--radius) - 4px);\n }\n .rounded-xs {\n border-radius: var(--radius-xs);\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n .border-border {\n border-color: var(--border);\n }\n .border-input {\n border-color: var(--input);\n }\n .border-primary {\n border-color: var(--primary);\n }\n .bg-accent {\n background-color: var(--accent);\n }\n .bg-background {\n background-color: var(--background);\n }\n .bg-black\\/50 {\n background-color: color-mix(in srgb, #000 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 50%, transparent);\n }\n }\n .bg-border {\n background-color: var(--border);\n }\n .bg-destructive {\n background-color: var(--destructive);\n }\n .bg-muted {\n background-color: var(--muted);\n }\n .bg-popover {\n background-color: var(--popover);\n }\n .bg-primary {\n background-color: var(--primary);\n }\n .bg-secondary {\n background-color: var(--secondary);\n }\n .bg-transparent {\n background-color: transparent;\n }\n .fill-current {\n fill: currentcolor;\n }\n .fill-primary {\n fill: var(--primary);\n }\n .object-cover {\n object-fit: cover;\n }\n .p-0 {\n padding: calc(var(--spacing) * 0);\n }\n .p-1 {\n padding: calc(var(--spacing) * 1);\n }\n .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n .p-6 {\n padding: calc(var(--spacing) * 6);\n }\n .px-1 {\n padding-inline: calc(var(--spacing) * 1);\n }\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n .px-6 {\n padding-inline: calc(var(--spacing) * 6);\n }\n .py-1 {\n padding-block: calc(var(--spacing) * 1);\n }\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n .py-4 {\n padding-block: calc(var(--spacing) * 4);\n }\n .py-6 {\n padding-block: calc(var(--spacing) * 6);\n }\n .pt-2 {\n padding-top: calc(var(--spacing) * 2);\n }\n .pt-4 {\n padding-top: calc(var(--spacing) * 4);\n }\n .pr-2 {\n padding-right: calc(var(--spacing) * 2);\n }\n .pb-1 {\n padding-bottom: calc(var(--spacing) * 1);\n }\n .pb-2 {\n padding-bottom: calc(var(--spacing) * 2);\n }\n .pb-4 {\n padding-bottom: calc(var(--spacing) * 4);\n }\n .pb-40 {\n padding-bottom: calc(var(--spacing) * 40);\n }\n .pl-8 {\n padding-left: calc(var(--spacing) * 8);\n }\n .text-center {\n text-align: center;\n }\n .text-left {\n text-align: left;\n }\n .text-right {\n text-align: right;\n }\n .text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n .text-\\[13px\\] {\n font-size: 13px;\n }\n .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .tracking-tight {\n --tw-tracking: var(--tracking-tight);\n letter-spacing: var(--tracking-tight);\n }\n .tracking-widest {\n --tw-tracking: var(--tracking-widest);\n letter-spacing: var(--tracking-widest);\n }\n .text-ellipsis {\n text-overflow: ellipsis;\n }\n .whitespace-nowrap {\n white-space: nowrap;\n }\n .text-background {\n color: var(--background);\n }\n .text-current {\n color: currentcolor;\n }\n .text-destructive {\n color: var(--destructive);\n }\n .text-destructive-foreground {\n color: var(--destructive-foreground);\n }\n .text-foreground {\n color: var(--foreground);\n }\n .text-input {\n color: var(--input);\n }\n .text-muted-foreground {\n color: var(--muted-foreground);\n }\n .text-popover-foreground {\n color: var(--popover-foreground);\n }\n .text-primary {\n color: var(--primary);\n }\n .text-primary-foreground {\n color: var(--primary-foreground);\n }\n .text-red-500 {\n color: var(--color-red-500);\n }\n .text-ring {\n color: var(--ring);\n }\n .text-secondary-foreground {\n color: var(--secondary-foreground);\n }\n .text-white {\n color: var(--color-white);\n }\n .line-through {\n text-decoration-line: line-through;\n }\n .underline {\n text-decoration-line: underline;\n }\n .underline-offset-4 {\n text-underline-offset: 4px;\n }\n .opacity-0 {\n opacity: 0%;\n }\n .opacity-50 {\n opacity: 50%;\n }\n .opacity-70 {\n opacity: 70%;\n }\n .opacity-100 {\n opacity: 100%;\n }\n .shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-md {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-xs {\n --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring-offset-background {\n --tw-ring-offset-color: var(--background);\n }\n .outline-hidden {\n --tw-outline-style: none;\n outline-style: none;\n @media (forced-colors: active) {\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n }\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-\\[color\\,box-shadow\\] {\n transition-property: color,box-shadow;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-none {\n transition-property: none;\n }\n .duration-200 {\n --tw-duration: 200ms;\n transition-duration: 200ms;\n }\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n .select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n .duration-200 {\n animation-duration: 200ms;\n }\n .ease-in-out {\n animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n }\n .group-data-\\[disabled\\=true\\]\\:pointer-events-none {\n &:is(:where(.group)[data-disabled=\"true\"] *) {\n pointer-events: none;\n }\n }\n .group-data-\\[disabled\\=true\\]\\:opacity-50 {\n &:is(:where(.group)[data-disabled=\"true\"] *) {\n opacity: 50%;\n }\n }\n .peer-disabled\\:cursor-not-allowed {\n &:is(:where(.peer):disabled ~ *) {\n cursor: not-allowed;\n }\n }\n .peer-disabled\\:opacity-50 {\n &:is(:where(.peer):disabled ~ *) {\n opacity: 50%;\n }\n }\n .file\\:inline-flex {\n &::file-selector-button {\n display: inline-flex;\n }\n }\n .file\\:h-7 {\n &::file-selector-button {\n height: calc(var(--spacing) * 7);\n }\n }\n .file\\:border-0 {\n &::file-selector-button {\n border-style: var(--tw-border-style);\n border-width: 0px;\n }\n }\n .file\\:bg-transparent {\n &::file-selector-button {\n background-color: transparent;\n }\n }\n .file\\:text-sm {\n &::file-selector-button {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n }\n .file\\:font-medium {\n &::file-selector-button {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n }\n .file\\:text-foreground {\n &::file-selector-button {\n color: var(--foreground);\n }\n }\n .placeholder\\:text-muted-foreground {\n &::placeholder {\n color: var(--muted-foreground);\n }\n }\n .after\\:absolute {\n &::after {\n content: var(--tw-content);\n position: absolute;\n }\n }\n .after\\:top-1\\/2 {\n &::after {\n content: var(--tw-content);\n top: calc(1/2 * 100%);\n }\n }\n .after\\:right-0 {\n &::after {\n content: var(--tw-content);\n right: calc(var(--spacing) * 0);\n }\n }\n .after\\:left-0 {\n &::after {\n content: var(--tw-content);\n left: calc(var(--spacing) * 0);\n }\n }\n .after\\:z-0 {\n &::after {\n content: var(--tw-content);\n z-index: 0;\n }\n }\n .after\\:h-px {\n &::after {\n content: var(--tw-content);\n height: 1px;\n }\n }\n .after\\:-translate-y-1\\/2 {\n &::after {\n content: var(--tw-content);\n --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n .after\\:bg-background {\n &::after {\n content: var(--tw-content);\n background-color: var(--background);\n }\n }\n .after\\:content-\\[\\'\\'\\] {\n &::after {\n content: var(--tw-content);\n --tw-content: '';\n content: var(--tw-content);\n }\n }\n .last\\:border-b-0 {\n &:last-child {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 0px;\n }\n }\n .hover\\:bg-accent {\n &:hover {\n @media (hover: hover) {\n background-color: var(--accent);\n }\n }\n }\n .hover\\:bg-destructive\\/90 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--destructive);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--destructive) 90%, transparent);\n }\n }\n }\n }\n .hover\\:bg-muted {\n &:hover {\n @media (hover: hover) {\n background-color: var(--muted);\n }\n }\n }\n .hover\\:bg-primary\\/90 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--primary);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--primary) 90%, transparent);\n }\n }\n }\n }\n .hover\\:bg-secondary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--secondary);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--secondary) 80%, transparent);\n }\n }\n }\n }\n .hover\\:text-accent-foreground {\n &:hover {\n @media (hover: hover) {\n color: var(--accent-foreground);\n }\n }\n }\n .hover\\:text-foreground {\n &:hover {\n @media (hover: hover) {\n color: var(--foreground);\n }\n }\n }\n .hover\\:text-muted-foreground {\n &:hover {\n @media (hover: hover) {\n color: var(--muted-foreground);\n }\n }\n }\n .hover\\:underline {\n &:hover {\n @media (hover: hover) {\n text-decoration-line: underline;\n }\n }\n }\n .hover\\:opacity-100 {\n &:hover {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n }\n .focus\\:bg-accent {\n &:focus {\n background-color: var(--accent);\n }\n }\n .focus\\:text-accent-foreground {\n &:focus {\n color: var(--accent-foreground);\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-ring {\n &:focus {\n --tw-ring-color: var(--ring);\n }\n }\n .focus\\:ring-offset-2 {\n &:focus {\n --tw-ring-offset-width: 2px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n .focus\\:outline-hidden {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n @media (forced-colors: active) {\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n }\n }\n .focus-visible\\:border-ring {\n &:focus-visible {\n border-color: var(--ring);\n }\n }\n .focus-visible\\:ring-\\[3px\\] {\n &:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus-visible\\:ring-destructive\\/20 {\n &:focus-visible {\n --tw-ring-color: var(--destructive);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n }\n }\n }\n .focus-visible\\:ring-ring\\/50 {\n &:focus-visible {\n --tw-ring-color: var(--ring);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);\n }\n }\n }\n .disabled\\:pointer-events-none {\n &:disabled {\n pointer-events: none;\n }\n }\n .disabled\\:cursor-not-allowed {\n &:disabled {\n cursor: not-allowed;\n }\n }\n .disabled\\:opacity-50 {\n &:disabled {\n opacity: 50%;\n }\n }\n .has-\\[\\>svg\\]\\:px-2\\.5 {\n &:has(>svg) {\n padding-inline: calc(var(--spacing) * 2.5);\n }\n }\n .has-\\[\\>svg\\]\\:px-3 {\n &:has(>svg) {\n padding-inline: calc(var(--spacing) * 3);\n }\n }\n .has-\\[\\>svg\\]\\:px-4 {\n &:has(>svg) {\n padding-inline: calc(var(--spacing) * 4);\n }\n }\n .aria-invalid\\:border-destructive {\n &[aria-invalid=\"true\"] {\n border-color: var(--destructive);\n }\n }\n .aria-invalid\\:ring-destructive\\/20 {\n &[aria-invalid=\"true\"] {\n --tw-ring-color: var(--destructive);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n }\n }\n }\n .data-\\[disabled\\]\\:pointer-events-none {\n &[data-disabled] {\n pointer-events: none;\n }\n }\n .data-\\[disabled\\]\\:opacity-50 {\n &[data-disabled] {\n opacity: 50%;\n }\n }\n .data-\\[disabled\\=true\\]\\:pointer-events-none {\n &[data-disabled=\"true\"] {\n pointer-events: none;\n }\n }\n .data-\\[disabled\\=true\\]\\:opacity-50 {\n &[data-disabled=\"true\"] {\n opacity: 50%;\n }\n }\n .data-\\[error\\=true\\]\\:text-destructive-foreground {\n &[data-error=\"true\"] {\n color: var(--destructive-foreground);\n }\n }\n .data-\\[inset\\]\\:pl-8 {\n &[data-inset] {\n padding-left: calc(var(--spacing) * 8);\n }\n }\n .data-\\[selected\\=true\\]\\:bg-accent {\n &[data-selected=\"true\"] {\n background-color: var(--accent);\n }\n }\n .data-\\[selected\\=true\\]\\:text-accent-foreground {\n &[data-selected=\"true\"] {\n color: var(--accent-foreground);\n }\n }\n .data-\\[side\\=bottom\\]\\:slide-in-from-top-2 {\n &[data-side=\"bottom\"] {\n --tw-enter-translate-y: -0.5rem;\n }\n }\n .data-\\[side\\=left\\]\\:slide-in-from-right-2 {\n &[data-side=\"left\"] {\n --tw-enter-translate-x: 0.5rem;\n }\n }\n .data-\\[side\\=right\\]\\:slide-in-from-left-2 {\n &[data-side=\"right\"] {\n --tw-enter-translate-x: -0.5rem;\n }\n }\n .data-\\[side\\=top\\]\\:slide-in-from-bottom-2 {\n &[data-side=\"top\"] {\n --tw-enter-translate-y: 0.5rem;\n }\n }\n .\\*\\*\\:data-\\[slot\\=command-input-wrapper\\]\\:h-12 {\n :is(& *) {\n &[data-slot=\"command-input-wrapper\"] {\n height: calc(var(--spacing) * 12);\n }\n }\n }\n .data-\\[state\\=checked\\]\\:border-primary {\n &[data-state=\"checked\"] {\n border-color: var(--primary);\n }\n }\n .data-\\[state\\=checked\\]\\:bg-primary {\n &[data-state=\"checked\"] {\n background-color: var(--primary);\n }\n }\n .data-\\[state\\=checked\\]\\:text-primary-foreground {\n &[data-state=\"checked\"] {\n color: var(--primary-foreground);\n }\n }\n .data-\\[state\\=closed\\]\\:animate-out {\n &[data-state=\"closed\"] {\n animation-name: exit;\n animation-duration: 150ms;\n --tw-exit-opacity: initial;\n --tw-exit-scale: initial;\n --tw-exit-rotate: initial;\n --tw-exit-translate-x: initial;\n --tw-exit-translate-y: initial;\n }\n }\n .data-\\[state\\=closed\\]\\:fade-out-0 {\n &[data-state=\"closed\"] {\n --tw-exit-opacity: 0;\n }\n }\n .data-\\[state\\=closed\\]\\:zoom-out-95 {\n &[data-state=\"closed\"] {\n --tw-exit-scale: .95;\n }\n }\n .data-\\[state\\=open\\]\\:bg-accent {\n &[data-state=\"open\"] {\n background-color: var(--accent);\n }\n }\n .data-\\[state\\=open\\]\\:text-accent-foreground {\n &[data-state=\"open\"] {\n color: var(--accent-foreground);\n }\n }\n .data-\\[state\\=open\\]\\:text-muted-foreground {\n &[data-state=\"open\"] {\n color: var(--muted-foreground);\n }\n }\n .data-\\[state\\=open\\]\\:animate-in {\n &[data-state=\"open\"] {\n animation-name: enter;\n animation-duration: 150ms;\n --tw-enter-opacity: initial;\n --tw-enter-scale: initial;\n --tw-enter-rotate: initial;\n --tw-enter-translate-x: initial;\n --tw-enter-translate-y: initial;\n }\n }\n .data-\\[state\\=open\\]\\:fade-in-0 {\n &[data-state=\"open\"] {\n --tw-enter-opacity: 0;\n }\n }\n .data-\\[state\\=open\\]\\:zoom-in-95 {\n &[data-state=\"open\"] {\n --tw-enter-scale: .95;\n }\n }\n .data-\\[variant\\=destructive\\]\\:text-destructive {\n &[data-variant=\"destructive\"] {\n color: var(--destructive);\n }\n }\n .data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/10 {\n &[data-variant=\"destructive\"] {\n &:focus {\n background-color: var(--destructive);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--destructive) 10%, transparent);\n }\n }\n }\n }\n .data-\\[variant\\=destructive\\]\\:focus\\:text-destructive {\n &[data-variant=\"destructive\"] {\n &:focus {\n color: var(--destructive);\n }\n }\n }\n .max-md\\:cursor-pointer {\n @media (width < 48rem) {\n cursor: pointer;\n }\n }\n .max-sm\\:hidden {\n @media (width < 40rem) {\n display: none;\n }\n }\n .max-sm\\:h-\\[52px\\] {\n @media (width < 40rem) {\n height: 52px;\n }\n }\n .sm\\:static {\n @media (width >= 40rem) {\n position: static;\n }\n }\n .sm\\:w-fit {\n @media (width >= 40rem) {\n width: fit-content;\n }\n }\n .sm\\:max-w-lg {\n @media (width >= 40rem) {\n max-width: var(--container-lg);\n }\n }\n .sm\\:flex-row {\n @media (width >= 40rem) {\n flex-direction: row;\n }\n }\n .sm\\:justify-end {\n @media (width >= 40rem) {\n justify-content: flex-end;\n }\n }\n .sm\\:bg-transparent {\n @media (width >= 40rem) {\n background-color: transparent;\n }\n }\n .sm\\:px-0 {\n @media (width >= 40rem) {\n padding-inline: calc(var(--spacing) * 0);\n }\n }\n .sm\\:pb-0 {\n @media (width >= 40rem) {\n padding-bottom: calc(var(--spacing) * 0);\n }\n }\n .sm\\:text-left {\n @media (width >= 40rem) {\n text-align: left;\n }\n }\n .md\\:order-last {\n @media (width >= 48rem) {\n order: 9999;\n }\n }\n .md\\:order-none {\n @media (width >= 48rem) {\n order: 0;\n }\n }\n .md\\:col-span-2 {\n @media (width >= 48rem) {\n grid-column: span 2 / span 2;\n }\n }\n .md\\:col-span-3 {\n @media (width >= 48rem) {\n grid-column: span 3 / span 3;\n }\n }\n .md\\:col-span-4 {\n @media (width >= 48rem) {\n grid-column: span 4 / span 4;\n }\n }\n .md\\:block {\n @media (width >= 48rem) {\n display: block;\n }\n }\n .md\\:flex {\n @media (width >= 48rem) {\n display: flex;\n }\n }\n .md\\:grid {\n @media (width >= 48rem) {\n display: grid;\n }\n }\n .md\\:hidden {\n @media (width >= 48rem) {\n display: none;\n }\n }\n .md\\:max-w-\\[75\\%\\] {\n @media (width >= 48rem) {\n max-width: 75%;\n }\n }\n .md\\:grid-cols-2 {\n @media (width >= 48rem) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n }\n .md\\:grid-cols-3 {\n @media (width >= 48rem) {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n }\n .md\\:grid-cols-7 {\n @media (width >= 48rem) {\n grid-template-columns: repeat(7, minmax(0, 1fr));\n }\n }\n .md\\:gap-0 {\n @media (width >= 48rem) {\n gap: calc(var(--spacing) * 0);\n }\n }\n .md\\:px-8 {\n @media (width >= 48rem) {\n padding-inline: calc(var(--spacing) * 8);\n }\n }\n .md\\:py-12 {\n @media (width >= 48rem) {\n padding-block: calc(var(--spacing) * 12);\n }\n }\n .md\\:text-sm {\n @media (width >= 48rem) {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n }\n .dark\\:focus-visible\\:ring-destructive\\/40 {\n @media (prefers-color-scheme: dark) {\n &:focus-visible {\n --tw-ring-color: var(--destructive);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n }\n }\n }\n }\n .dark\\:aria-invalid\\:ring-destructive\\/40 {\n @media (prefers-color-scheme: dark) {\n &[aria-invalid=\"true\"] {\n --tw-ring-color: var(--destructive);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n }\n }\n }\n }\n .dark\\:data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/20 {\n @media (prefers-color-scheme: dark) {\n &[data-variant=\"destructive\"] {\n &:focus {\n background-color: var(--destructive);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n }\n }\n }\n }\n }\n .\\[\\&_\\[cmdk-group-heading\\]\\]\\:px-2 {\n & [cmdk-group-heading] {\n padding-inline: calc(var(--spacing) * 2);\n }\n }\n .\\[\\&_\\[cmdk-group-heading\\]\\]\\:py-1\\.5 {\n & [cmdk-group-heading] {\n padding-block: calc(var(--spacing) * 1.5);\n }\n }\n .\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-xs {\n & [cmdk-group-heading] {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n }\n .\\[\\&_\\[cmdk-group-heading\\]\\]\\:font-medium {\n & [cmdk-group-heading] {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n }\n .\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-muted-foreground {\n & [cmdk-group-heading] {\n color: var(--muted-foreground);\n }\n }\n .\\[\\&_\\[cmdk-group\\]\\]\\:px-2 {\n & [cmdk-group] {\n padding-inline: calc(var(--spacing) * 2);\n }\n }\n .\\[\\&_\\[cmdk-group\\]\\:not\\(\\[hidden\\]\\)_\\~\\[cmdk-group\\]\\]\\:pt-0 {\n & [cmdk-group]:not([hidden]) ~[cmdk-group] {\n padding-top: calc(var(--spacing) * 0);\n }\n }\n .\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:h-5 {\n & [cmdk-input-wrapper] svg {\n height: calc(var(--spacing) * 5);\n }\n }\n .\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:w-5 {\n & [cmdk-input-wrapper] svg {\n width: calc(var(--spacing) * 5);\n }\n }\n .\\[\\&_\\[cmdk-input\\]\\]\\:h-12 {\n & [cmdk-input] {\n height: calc(var(--spacing) * 12);\n }\n }\n .\\[\\&_\\[cmdk-item\\]\\]\\:px-2 {\n & [cmdk-item] {\n padding-inline: calc(var(--spacing) * 2);\n }\n }\n .\\[\\&_\\[cmdk-item\\]\\]\\:py-3 {\n & [cmdk-item] {\n padding-block: calc(var(--spacing) * 3);\n }\n }\n .\\[\\&_\\[cmdk-item\\]_svg\\]\\:h-5 {\n & [cmdk-item] svg {\n height: calc(var(--spacing) * 5);\n }\n }\n .\\[\\&_\\[cmdk-item\\]_svg\\]\\:w-5 {\n & [cmdk-item] svg {\n width: calc(var(--spacing) * 5);\n }\n }\n .\\[\\&_svg\\]\\:pointer-events-none {\n & svg {\n pointer-events: none;\n }\n }\n .\\[\\&_svg\\]\\:shrink-0 {\n & svg {\n flex-shrink: 0;\n }\n }\n .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 {\n & svg:not([class*='size-']) {\n width: calc(var(--spacing) * 4);\n height: calc(var(--spacing) * 4);\n }\n }\n .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'text-\\'\\]\\)\\]\\:text-muted-foreground {\n & svg:not([class*='text-']) {\n color: var(--muted-foreground);\n }\n }\n .data-\\[variant\\=destructive\\]\\:\\*\\:\\[svg\\]\\:\\!text-destructive {\n &[data-variant=\"destructive\"] {\n :is(& > *) {\n &:is(svg) {\n color: var(--destructive) !important;\n }\n }\n }\n }\n}\n@layer base {\n ::selection {\n background-color: var(--primary);\n color: var(--primary-foreground);\n }\n input:-webkit-autofill,\n input:-webkit-autofill:hover,\n input:-webkit-autofill:focus,\n input:-webkit-autofill:active {\n -webkit-box-shadow: 0 0 0 30px var(--muted) inset !important;\n -webkit-text-fill-color: var(--foreground) !important;\n }\n input:-moz-autofill,\n input:autofill {\n background-color: var(--muted);\n color: var(--foreground);\n }\n * {\n --tw-border-style: solid;\n border-style: solid;\n border-color: var(--border);\n outline-color: var(--ring);\n @supports (color: color-mix(in lab, red, red)) {\n outline-color: color-mix(in oklab, var(--ring) 50%, transparent);\n }\n }\n .checkout-embed {\n background-color: var(--background);\n font-family: var(--font-sans), Helvetica, Arial, apple-system, sans-serif;\n color: var(--foreground);\n }\n h2 {\n font-size: var(--text-2xl);\n line-height: var(--tw-leading, var(--text-2xl--line-height));\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n --tw-tracking: var(--tracking-tight);\n letter-spacing: var(--tracking-tight);\n }\n p {\n --tw-tracking: var(--tracking-tight);\n letter-spacing: var(--tracking-tight);\n }\n}\n@layer utilities {\n .scrollbar-hidden {\n scrollbar-width: none;\n }\n .scrollbar-hidden::-webkit-scrollbar {\n display: none;\n }\n}\n@keyframes enter {\n from {\n opacity: var(--tw-enter-opacity, 1);\n transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n }\n}\n@keyframes exit {\n to {\n opacity: var(--tw-exit-opacity, 1);\n transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n }\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-space-y-reverse {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-leading {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-tracking {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-offset-width {\n syntax: \"<length>\";\n inherits: false;\n initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-duration {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ease {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-content {\n syntax: \"*\";\n initial-value: \"\";\n inherits: false;\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *, ::before, ::after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-space-y-reverse: 0;\n --tw-border-style: solid;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-tracking: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-duration: initial;\n --tw-ease: initial;\n --tw-content: \"\";\n }\n }\n}\n";
|
|
7521
7521
|
|
|
7522
|
-
var M=(e,i,s,u,m,a,l,h)=>{let d=document.documentElement,w=["light","dark"];function p(n){(Array.isArray(e)?e:[e]).forEach(y=>{let k=y==="class",S=k&&a?m.map(f=>a[f]||f):m;k?(d.classList.remove(...S),d.classList.add(a&&a[n]?a[n]:n)):d.setAttribute(y,n);}),R(n);}function R(n){h&&w.includes(n)&&(d.style.colorScheme=n);}function c(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}if(u)p(u);else try{let n=localStorage.getItem(i)||s,y=l&&n==="system"?c():n;p(y);}catch(n){}};var x=React__namespace.createContext(void 0),U$1={setTheme:e=>{},themes:[]},z=()=>{var e;return (e=React__namespace.useContext(x))!=null?e:U$1};React__namespace.memo(({forcedTheme:e,storageKey:i,attribute:s,enableSystem:u,enableColorScheme:m,defaultTheme:a,value:l,themes:h,nonce:d,scriptProps:w})=>{let p=JSON.stringify([s,i,a,e,h,l,u,m]).slice(1,-1);return React__namespace.createElement("script",{...w,suppressHydrationWarning:true,nonce:typeof window=="undefined"?d:"",dangerouslySetInnerHTML:{__html:`(${M.toString()})(${p})`}})});
|
|
7522
|
+
var M$1=(e,i,s,u,m,a,l,h)=>{let d=document.documentElement,w=["light","dark"];function p(n){(Array.isArray(e)?e:[e]).forEach(y=>{let k=y==="class",S=k&&a?m.map(f=>a[f]||f):m;k?(d.classList.remove(...S),d.classList.add(a&&a[n]?a[n]:n)):d.setAttribute(y,n);}),R(n);}function R(n){h&&w.includes(n)&&(d.style.colorScheme=n);}function c(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}if(u)p(u);else try{let n=localStorage.getItem(i)||s,y=l&&n==="system"?c():n;p(y);}catch(n){}};var x=React__namespace.createContext(void 0),U$1={setTheme:e=>{},themes:[]},z=()=>{var e;return (e=React__namespace.useContext(x))!=null?e:U$1};React__namespace.memo(({forcedTheme:e,storageKey:i,attribute:s,enableSystem:u,enableColorScheme:m,defaultTheme:a,value:l,themes:h,nonce:d,scriptProps:w})=>{let p=JSON.stringify([s,i,a,e,h,l,u,m]).slice(1,-1);return React__namespace.createElement("script",{...w,suppressHydrationWarning:true,nonce:typeof window=="undefined"?d:"",dangerouslySetInnerHTML:{__html:`(${M$1.toString()})(${p})`}})});
|
|
7523
7523
|
|
|
7524
7524
|
function __insertCSS(code) {
|
|
7525
7525
|
if (typeof document == 'undefined') return
|
|
@@ -8666,45 +8666,4521 @@ const ShadowWrapper = React.memo(({ children, shadowRef }) => {
|
|
|
8666
8666
|
});
|
|
8667
8667
|
ShadowWrapper.displayName = "ShadowWrapper";
|
|
8668
8668
|
|
|
8669
|
-
|
|
8669
|
+
const parseNumber = (color, len) => {
|
|
8670
|
+
if (typeof color !== 'number') return;
|
|
8671
|
+
|
|
8672
|
+
// hex3: #c93 -> #cc9933
|
|
8673
|
+
if (len === 3) {
|
|
8674
|
+
return {
|
|
8675
|
+
mode: 'rgb',
|
|
8676
|
+
r: (((color >> 8) & 0xf) | ((color >> 4) & 0xf0)) / 255,
|
|
8677
|
+
g: (((color >> 4) & 0xf) | (color & 0xf0)) / 255,
|
|
8678
|
+
b: ((color & 0xf) | ((color << 4) & 0xf0)) / 255
|
|
8679
|
+
};
|
|
8680
|
+
}
|
|
8681
|
+
|
|
8682
|
+
// hex4: #c931 -> #cc993311
|
|
8683
|
+
if (len === 4) {
|
|
8684
|
+
return {
|
|
8685
|
+
mode: 'rgb',
|
|
8686
|
+
r: (((color >> 12) & 0xf) | ((color >> 8) & 0xf0)) / 255,
|
|
8687
|
+
g: (((color >> 8) & 0xf) | ((color >> 4) & 0xf0)) / 255,
|
|
8688
|
+
b: (((color >> 4) & 0xf) | (color & 0xf0)) / 255,
|
|
8689
|
+
alpha: ((color & 0xf) | ((color << 4) & 0xf0)) / 255
|
|
8690
|
+
};
|
|
8691
|
+
}
|
|
8692
|
+
|
|
8693
|
+
// hex6: #f0f1f2
|
|
8694
|
+
if (len === 6) {
|
|
8695
|
+
return {
|
|
8696
|
+
mode: 'rgb',
|
|
8697
|
+
r: ((color >> 16) & 0xff) / 255,
|
|
8698
|
+
g: ((color >> 8) & 0xff) / 255,
|
|
8699
|
+
b: (color & 0xff) / 255
|
|
8700
|
+
};
|
|
8701
|
+
}
|
|
8702
|
+
|
|
8703
|
+
// hex8: #f0f1f2ff
|
|
8704
|
+
if (len === 8) {
|
|
8705
|
+
return {
|
|
8706
|
+
mode: 'rgb',
|
|
8707
|
+
r: ((color >> 24) & 0xff) / 255,
|
|
8708
|
+
g: ((color >> 16) & 0xff) / 255,
|
|
8709
|
+
b: ((color >> 8) & 0xff) / 255,
|
|
8710
|
+
alpha: (color & 0xff) / 255
|
|
8711
|
+
};
|
|
8712
|
+
}
|
|
8713
|
+
};
|
|
8714
|
+
|
|
8715
|
+
const named = {
|
|
8716
|
+
aliceblue: 0xf0f8ff,
|
|
8717
|
+
antiquewhite: 0xfaebd7,
|
|
8718
|
+
aqua: 0x00ffff,
|
|
8719
|
+
aquamarine: 0x7fffd4,
|
|
8720
|
+
azure: 0xf0ffff,
|
|
8721
|
+
beige: 0xf5f5dc,
|
|
8722
|
+
bisque: 0xffe4c4,
|
|
8723
|
+
black: 0x000000,
|
|
8724
|
+
blanchedalmond: 0xffebcd,
|
|
8725
|
+
blue: 0x0000ff,
|
|
8726
|
+
blueviolet: 0x8a2be2,
|
|
8727
|
+
brown: 0xa52a2a,
|
|
8728
|
+
burlywood: 0xdeb887,
|
|
8729
|
+
cadetblue: 0x5f9ea0,
|
|
8730
|
+
chartreuse: 0x7fff00,
|
|
8731
|
+
chocolate: 0xd2691e,
|
|
8732
|
+
coral: 0xff7f50,
|
|
8733
|
+
cornflowerblue: 0x6495ed,
|
|
8734
|
+
cornsilk: 0xfff8dc,
|
|
8735
|
+
crimson: 0xdc143c,
|
|
8736
|
+
cyan: 0x00ffff,
|
|
8737
|
+
darkblue: 0x00008b,
|
|
8738
|
+
darkcyan: 0x008b8b,
|
|
8739
|
+
darkgoldenrod: 0xb8860b,
|
|
8740
|
+
darkgray: 0xa9a9a9,
|
|
8741
|
+
darkgreen: 0x006400,
|
|
8742
|
+
darkgrey: 0xa9a9a9,
|
|
8743
|
+
darkkhaki: 0xbdb76b,
|
|
8744
|
+
darkmagenta: 0x8b008b,
|
|
8745
|
+
darkolivegreen: 0x556b2f,
|
|
8746
|
+
darkorange: 0xff8c00,
|
|
8747
|
+
darkorchid: 0x9932cc,
|
|
8748
|
+
darkred: 0x8b0000,
|
|
8749
|
+
darksalmon: 0xe9967a,
|
|
8750
|
+
darkseagreen: 0x8fbc8f,
|
|
8751
|
+
darkslateblue: 0x483d8b,
|
|
8752
|
+
darkslategray: 0x2f4f4f,
|
|
8753
|
+
darkslategrey: 0x2f4f4f,
|
|
8754
|
+
darkturquoise: 0x00ced1,
|
|
8755
|
+
darkviolet: 0x9400d3,
|
|
8756
|
+
deeppink: 0xff1493,
|
|
8757
|
+
deepskyblue: 0x00bfff,
|
|
8758
|
+
dimgray: 0x696969,
|
|
8759
|
+
dimgrey: 0x696969,
|
|
8760
|
+
dodgerblue: 0x1e90ff,
|
|
8761
|
+
firebrick: 0xb22222,
|
|
8762
|
+
floralwhite: 0xfffaf0,
|
|
8763
|
+
forestgreen: 0x228b22,
|
|
8764
|
+
fuchsia: 0xff00ff,
|
|
8765
|
+
gainsboro: 0xdcdcdc,
|
|
8766
|
+
ghostwhite: 0xf8f8ff,
|
|
8767
|
+
gold: 0xffd700,
|
|
8768
|
+
goldenrod: 0xdaa520,
|
|
8769
|
+
gray: 0x808080,
|
|
8770
|
+
green: 0x008000,
|
|
8771
|
+
greenyellow: 0xadff2f,
|
|
8772
|
+
grey: 0x808080,
|
|
8773
|
+
honeydew: 0xf0fff0,
|
|
8774
|
+
hotpink: 0xff69b4,
|
|
8775
|
+
indianred: 0xcd5c5c,
|
|
8776
|
+
indigo: 0x4b0082,
|
|
8777
|
+
ivory: 0xfffff0,
|
|
8778
|
+
khaki: 0xf0e68c,
|
|
8779
|
+
lavender: 0xe6e6fa,
|
|
8780
|
+
lavenderblush: 0xfff0f5,
|
|
8781
|
+
lawngreen: 0x7cfc00,
|
|
8782
|
+
lemonchiffon: 0xfffacd,
|
|
8783
|
+
lightblue: 0xadd8e6,
|
|
8784
|
+
lightcoral: 0xf08080,
|
|
8785
|
+
lightcyan: 0xe0ffff,
|
|
8786
|
+
lightgoldenrodyellow: 0xfafad2,
|
|
8787
|
+
lightgray: 0xd3d3d3,
|
|
8788
|
+
lightgreen: 0x90ee90,
|
|
8789
|
+
lightgrey: 0xd3d3d3,
|
|
8790
|
+
lightpink: 0xffb6c1,
|
|
8791
|
+
lightsalmon: 0xffa07a,
|
|
8792
|
+
lightseagreen: 0x20b2aa,
|
|
8793
|
+
lightskyblue: 0x87cefa,
|
|
8794
|
+
lightslategray: 0x778899,
|
|
8795
|
+
lightslategrey: 0x778899,
|
|
8796
|
+
lightsteelblue: 0xb0c4de,
|
|
8797
|
+
lightyellow: 0xffffe0,
|
|
8798
|
+
lime: 0x00ff00,
|
|
8799
|
+
limegreen: 0x32cd32,
|
|
8800
|
+
linen: 0xfaf0e6,
|
|
8801
|
+
magenta: 0xff00ff,
|
|
8802
|
+
maroon: 0x800000,
|
|
8803
|
+
mediumaquamarine: 0x66cdaa,
|
|
8804
|
+
mediumblue: 0x0000cd,
|
|
8805
|
+
mediumorchid: 0xba55d3,
|
|
8806
|
+
mediumpurple: 0x9370db,
|
|
8807
|
+
mediumseagreen: 0x3cb371,
|
|
8808
|
+
mediumslateblue: 0x7b68ee,
|
|
8809
|
+
mediumspringgreen: 0x00fa9a,
|
|
8810
|
+
mediumturquoise: 0x48d1cc,
|
|
8811
|
+
mediumvioletred: 0xc71585,
|
|
8812
|
+
midnightblue: 0x191970,
|
|
8813
|
+
mintcream: 0xf5fffa,
|
|
8814
|
+
mistyrose: 0xffe4e1,
|
|
8815
|
+
moccasin: 0xffe4b5,
|
|
8816
|
+
navajowhite: 0xffdead,
|
|
8817
|
+
navy: 0x000080,
|
|
8818
|
+
oldlace: 0xfdf5e6,
|
|
8819
|
+
olive: 0x808000,
|
|
8820
|
+
olivedrab: 0x6b8e23,
|
|
8821
|
+
orange: 0xffa500,
|
|
8822
|
+
orangered: 0xff4500,
|
|
8823
|
+
orchid: 0xda70d6,
|
|
8824
|
+
palegoldenrod: 0xeee8aa,
|
|
8825
|
+
palegreen: 0x98fb98,
|
|
8826
|
+
paleturquoise: 0xafeeee,
|
|
8827
|
+
palevioletred: 0xdb7093,
|
|
8828
|
+
papayawhip: 0xffefd5,
|
|
8829
|
+
peachpuff: 0xffdab9,
|
|
8830
|
+
peru: 0xcd853f,
|
|
8831
|
+
pink: 0xffc0cb,
|
|
8832
|
+
plum: 0xdda0dd,
|
|
8833
|
+
powderblue: 0xb0e0e6,
|
|
8834
|
+
purple: 0x800080,
|
|
8835
|
+
|
|
8836
|
+
// Added in CSS Colors Level 4:
|
|
8837
|
+
// https://drafts.csswg.org/css-color/#changes-from-3
|
|
8838
|
+
rebeccapurple: 0x663399,
|
|
8839
|
+
|
|
8840
|
+
red: 0xff0000,
|
|
8841
|
+
rosybrown: 0xbc8f8f,
|
|
8842
|
+
royalblue: 0x4169e1,
|
|
8843
|
+
saddlebrown: 0x8b4513,
|
|
8844
|
+
salmon: 0xfa8072,
|
|
8845
|
+
sandybrown: 0xf4a460,
|
|
8846
|
+
seagreen: 0x2e8b57,
|
|
8847
|
+
seashell: 0xfff5ee,
|
|
8848
|
+
sienna: 0xa0522d,
|
|
8849
|
+
silver: 0xc0c0c0,
|
|
8850
|
+
skyblue: 0x87ceeb,
|
|
8851
|
+
slateblue: 0x6a5acd,
|
|
8852
|
+
slategray: 0x708090,
|
|
8853
|
+
slategrey: 0x708090,
|
|
8854
|
+
snow: 0xfffafa,
|
|
8855
|
+
springgreen: 0x00ff7f,
|
|
8856
|
+
steelblue: 0x4682b4,
|
|
8857
|
+
tan: 0xd2b48c,
|
|
8858
|
+
teal: 0x008080,
|
|
8859
|
+
thistle: 0xd8bfd8,
|
|
8860
|
+
tomato: 0xff6347,
|
|
8861
|
+
turquoise: 0x40e0d0,
|
|
8862
|
+
violet: 0xee82ee,
|
|
8863
|
+
wheat: 0xf5deb3,
|
|
8864
|
+
white: 0xffffff,
|
|
8865
|
+
whitesmoke: 0xf5f5f5,
|
|
8866
|
+
yellow: 0xffff00,
|
|
8867
|
+
yellowgreen: 0x9acd32
|
|
8868
|
+
};
|
|
8869
|
+
|
|
8870
|
+
// Also supports the `transparent` color as defined in:
|
|
8871
|
+
// https://drafts.csswg.org/css-color/#transparent-black
|
|
8872
|
+
const parseNamed = color => {
|
|
8873
|
+
return parseNumber(named[color.toLowerCase()], 6);
|
|
8874
|
+
};
|
|
8875
|
+
|
|
8876
|
+
const hex = /^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i;
|
|
8877
|
+
|
|
8878
|
+
const parseHex = color => {
|
|
8879
|
+
let match;
|
|
8880
|
+
// eslint-disable-next-line no-cond-assign
|
|
8881
|
+
return (match = color.match(hex))
|
|
8882
|
+
? parseNumber(parseInt(match[1], 16), match[1].length)
|
|
8883
|
+
: undefined;
|
|
8884
|
+
};
|
|
8885
|
+
|
|
8886
|
+
/*
|
|
8887
|
+
Basic building blocks for color regexes
|
|
8888
|
+
---------------------------------------
|
|
8889
|
+
|
|
8890
|
+
These regexes are expressed as strings
|
|
8891
|
+
to be interpolated in the color regexes.
|
|
8892
|
+
*/
|
|
8893
|
+
|
|
8894
|
+
// <number>
|
|
8895
|
+
const num$1 = '([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)';
|
|
8896
|
+
|
|
8897
|
+
// <percentage>
|
|
8898
|
+
const per = `${num$1}%`;
|
|
8899
|
+
|
|
8900
|
+
// <number-percentage> (<alpha-value>)
|
|
8901
|
+
const num_per = `(?:${num$1}%|${num$1})`;
|
|
8902
|
+
|
|
8903
|
+
// <hue>
|
|
8904
|
+
const hue$1 = `(?:${num$1}(deg|grad|rad|turn)|${num$1})`;
|
|
8905
|
+
|
|
8906
|
+
const c = `\\s*,\\s*`; // comma
|
|
8907
|
+
|
|
8908
|
+
/*
|
|
8909
|
+
rgb() regular expressions for legacy format
|
|
8910
|
+
Reference: https://drafts.csswg.org/css-color/#rgb-functions
|
|
8911
|
+
*/
|
|
8912
|
+
const rgb_num_old = new RegExp(
|
|
8913
|
+
`^rgba?\\(\\s*${num$1}${c}${num$1}${c}${num$1}\\s*(?:,\\s*${num_per}\\s*)?\\)$`
|
|
8914
|
+
);
|
|
8915
|
+
|
|
8916
|
+
const rgb_per_old = new RegExp(
|
|
8917
|
+
`^rgba?\\(\\s*${per}${c}${per}${c}${per}\\s*(?:,\\s*${num_per}\\s*)?\\)$`
|
|
8918
|
+
);
|
|
8919
|
+
|
|
8920
|
+
const parseRgbLegacy = color => {
|
|
8921
|
+
let res = { mode: 'rgb' };
|
|
8922
|
+
let match;
|
|
8923
|
+
if ((match = color.match(rgb_num_old))) {
|
|
8924
|
+
if (match[1] !== undefined) {
|
|
8925
|
+
res.r = match[1] / 255;
|
|
8926
|
+
}
|
|
8927
|
+
if (match[2] !== undefined) {
|
|
8928
|
+
res.g = match[2] / 255;
|
|
8929
|
+
}
|
|
8930
|
+
if (match[3] !== undefined) {
|
|
8931
|
+
res.b = match[3] / 255;
|
|
8932
|
+
}
|
|
8933
|
+
} else if ((match = color.match(rgb_per_old))) {
|
|
8934
|
+
if (match[1] !== undefined) {
|
|
8935
|
+
res.r = match[1] / 100;
|
|
8936
|
+
}
|
|
8937
|
+
if (match[2] !== undefined) {
|
|
8938
|
+
res.g = match[2] / 100;
|
|
8939
|
+
}
|
|
8940
|
+
if (match[3] !== undefined) {
|
|
8941
|
+
res.b = match[3] / 100;
|
|
8942
|
+
}
|
|
8943
|
+
} else {
|
|
8944
|
+
return undefined;
|
|
8945
|
+
}
|
|
8946
|
+
|
|
8947
|
+
if (match[4] !== undefined) {
|
|
8948
|
+
res.alpha = Math.max(0, Math.min(1, match[4] / 100));
|
|
8949
|
+
} else if (match[5] !== undefined) {
|
|
8950
|
+
res.alpha = Math.max(0, Math.min(1, +match[5]));
|
|
8951
|
+
}
|
|
8952
|
+
|
|
8953
|
+
return res;
|
|
8954
|
+
};
|
|
8955
|
+
|
|
8956
|
+
const prepare = (color, mode) =>
|
|
8957
|
+
color === undefined
|
|
8958
|
+
? undefined
|
|
8959
|
+
: typeof color !== 'object'
|
|
8960
|
+
? parse$1(color)
|
|
8961
|
+
: color.mode !== undefined
|
|
8962
|
+
? color
|
|
8963
|
+
: mode
|
|
8964
|
+
? { ...color, mode }
|
|
8965
|
+
: undefined;
|
|
8966
|
+
|
|
8967
|
+
const converter =
|
|
8968
|
+
(target_mode = 'rgb') =>
|
|
8969
|
+
color =>
|
|
8970
|
+
(color = prepare(color, target_mode)) !== undefined
|
|
8971
|
+
? // if the color's mode corresponds to our target mode
|
|
8972
|
+
color.mode === target_mode
|
|
8973
|
+
? // then just return the color
|
|
8974
|
+
color
|
|
8975
|
+
: // otherwise check to see if we have a dedicated
|
|
8976
|
+
// converter for the target mode
|
|
8977
|
+
converters[color.mode][target_mode]
|
|
8978
|
+
? // and return its result...
|
|
8979
|
+
converters[color.mode][target_mode](color)
|
|
8980
|
+
: // ...otherwise pass through RGB as an intermediary step.
|
|
8981
|
+
// if the target mode is RGB...
|
|
8982
|
+
target_mode === 'rgb'
|
|
8983
|
+
? // just return the RGB
|
|
8984
|
+
converters[color.mode].rgb(color)
|
|
8985
|
+
: // otherwise convert color.mode -> RGB -> target_mode
|
|
8986
|
+
converters.rgb[target_mode](converters[color.mode].rgb(color))
|
|
8987
|
+
: undefined;
|
|
8988
|
+
|
|
8989
|
+
const converters = {};
|
|
8990
|
+
const modes = {};
|
|
8991
|
+
|
|
8992
|
+
const parsers = [];
|
|
8993
|
+
const colorProfiles = {};
|
|
8994
|
+
|
|
8995
|
+
const identity = v => v;
|
|
8996
|
+
|
|
8997
|
+
const useMode = definition => {
|
|
8998
|
+
converters[definition.mode] = {
|
|
8999
|
+
...converters[definition.mode],
|
|
9000
|
+
...definition.toMode
|
|
9001
|
+
};
|
|
9002
|
+
|
|
9003
|
+
Object.keys(definition.fromMode || {}).forEach(k => {
|
|
9004
|
+
if (!converters[k]) {
|
|
9005
|
+
converters[k] = {};
|
|
9006
|
+
}
|
|
9007
|
+
converters[k][definition.mode] = definition.fromMode[k];
|
|
9008
|
+
});
|
|
9009
|
+
|
|
9010
|
+
// Color space channel ranges
|
|
9011
|
+
if (!definition.ranges) {
|
|
9012
|
+
definition.ranges = {};
|
|
9013
|
+
}
|
|
9014
|
+
|
|
9015
|
+
if (!definition.difference) {
|
|
9016
|
+
definition.difference = {};
|
|
9017
|
+
}
|
|
9018
|
+
|
|
9019
|
+
definition.channels.forEach(channel => {
|
|
9020
|
+
// undefined channel ranges default to the [0, 1] interval
|
|
9021
|
+
if (definition.ranges[channel] === undefined) {
|
|
9022
|
+
definition.ranges[channel] = [0, 1];
|
|
9023
|
+
}
|
|
9024
|
+
|
|
9025
|
+
if (!definition.interpolate[channel]) {
|
|
9026
|
+
throw new Error(`Missing interpolator for: ${channel}`);
|
|
9027
|
+
}
|
|
9028
|
+
|
|
9029
|
+
if (typeof definition.interpolate[channel] === 'function') {
|
|
9030
|
+
definition.interpolate[channel] = {
|
|
9031
|
+
use: definition.interpolate[channel]
|
|
9032
|
+
};
|
|
9033
|
+
}
|
|
9034
|
+
|
|
9035
|
+
if (!definition.interpolate[channel].fixup) {
|
|
9036
|
+
definition.interpolate[channel].fixup = identity;
|
|
9037
|
+
}
|
|
9038
|
+
});
|
|
9039
|
+
|
|
9040
|
+
modes[definition.mode] = definition;
|
|
9041
|
+
(definition.parse || []).forEach(parser => {
|
|
9042
|
+
useParser(parser, definition.mode);
|
|
9043
|
+
});
|
|
9044
|
+
|
|
9045
|
+
return converter(definition.mode);
|
|
9046
|
+
};
|
|
9047
|
+
|
|
9048
|
+
const getMode = mode => modes[mode];
|
|
9049
|
+
|
|
9050
|
+
const useParser = (parser, mode) => {
|
|
9051
|
+
if (typeof parser === 'string') {
|
|
9052
|
+
if (!mode) {
|
|
9053
|
+
throw new Error(`'mode' required when 'parser' is a string`);
|
|
9054
|
+
}
|
|
9055
|
+
colorProfiles[parser] = mode;
|
|
9056
|
+
} else if (typeof parser === 'function') {
|
|
9057
|
+
if (parsers.indexOf(parser) < 0) {
|
|
9058
|
+
parsers.push(parser);
|
|
9059
|
+
}
|
|
9060
|
+
}
|
|
9061
|
+
};
|
|
9062
|
+
|
|
9063
|
+
/* eslint-disable-next-line no-control-regex */
|
|
9064
|
+
const IdentStartCodePoint = /[^\x00-\x7F]|[a-zA-Z_]/;
|
|
9065
|
+
|
|
9066
|
+
/* eslint-disable-next-line no-control-regex */
|
|
9067
|
+
const IdentCodePoint = /[^\x00-\x7F]|[-\w]/;
|
|
9068
|
+
|
|
9069
|
+
const Tok = {
|
|
9070
|
+
Function: 'function',
|
|
9071
|
+
Ident: 'ident',
|
|
9072
|
+
Number: 'number',
|
|
9073
|
+
Percentage: 'percentage',
|
|
9074
|
+
ParenClose: ')',
|
|
9075
|
+
None: 'none',
|
|
9076
|
+
Hue: 'hue',
|
|
9077
|
+
Alpha: 'alpha'
|
|
9078
|
+
};
|
|
9079
|
+
|
|
9080
|
+
let _i = 0;
|
|
9081
|
+
|
|
9082
|
+
/*
|
|
9083
|
+
4.3.10. Check if three code points would start a number
|
|
9084
|
+
https://drafts.csswg.org/css-syntax/#starts-with-a-number
|
|
9085
|
+
*/
|
|
9086
|
+
function is_num(chars) {
|
|
9087
|
+
let ch = chars[_i];
|
|
9088
|
+
let ch1 = chars[_i + 1];
|
|
9089
|
+
if (ch === '-' || ch === '+') {
|
|
9090
|
+
return /\d/.test(ch1) || (ch1 === '.' && /\d/.test(chars[_i + 2]));
|
|
9091
|
+
}
|
|
9092
|
+
if (ch === '.') {
|
|
9093
|
+
return /\d/.test(ch1);
|
|
9094
|
+
}
|
|
9095
|
+
return /\d/.test(ch);
|
|
9096
|
+
}
|
|
9097
|
+
|
|
9098
|
+
/*
|
|
9099
|
+
Check if the stream starts with an identifier.
|
|
9100
|
+
*/
|
|
9101
|
+
|
|
9102
|
+
function is_ident(chars) {
|
|
9103
|
+
if (_i >= chars.length) {
|
|
9104
|
+
return false;
|
|
9105
|
+
}
|
|
9106
|
+
let ch = chars[_i];
|
|
9107
|
+
if (IdentStartCodePoint.test(ch)) {
|
|
9108
|
+
return true;
|
|
9109
|
+
}
|
|
9110
|
+
if (ch === '-') {
|
|
9111
|
+
if (chars.length - _i < 2) {
|
|
9112
|
+
return false;
|
|
9113
|
+
}
|
|
9114
|
+
let ch1 = chars[_i + 1];
|
|
9115
|
+
if (ch1 === '-' || IdentStartCodePoint.test(ch1)) {
|
|
9116
|
+
return true;
|
|
9117
|
+
}
|
|
9118
|
+
return false;
|
|
9119
|
+
}
|
|
9120
|
+
return false;
|
|
9121
|
+
}
|
|
9122
|
+
|
|
9123
|
+
/*
|
|
9124
|
+
4.3.3. Consume a numeric token
|
|
9125
|
+
https://drafts.csswg.org/css-syntax/#consume-numeric-token
|
|
9126
|
+
*/
|
|
9127
|
+
|
|
9128
|
+
const huenits = {
|
|
9129
|
+
deg: 1,
|
|
9130
|
+
rad: 180 / Math.PI,
|
|
9131
|
+
grad: 9 / 10,
|
|
9132
|
+
turn: 360
|
|
9133
|
+
};
|
|
9134
|
+
|
|
9135
|
+
function num(chars) {
|
|
9136
|
+
let value = '';
|
|
9137
|
+
if (chars[_i] === '-' || chars[_i] === '+') {
|
|
9138
|
+
value += chars[_i++];
|
|
9139
|
+
}
|
|
9140
|
+
value += digits(chars);
|
|
9141
|
+
if (chars[_i] === '.' && /\d/.test(chars[_i + 1])) {
|
|
9142
|
+
value += chars[_i++] + digits(chars);
|
|
9143
|
+
}
|
|
9144
|
+
if (chars[_i] === 'e' || chars[_i] === 'E') {
|
|
9145
|
+
if (
|
|
9146
|
+
(chars[_i + 1] === '-' || chars[_i + 1] === '+') &&
|
|
9147
|
+
/\d/.test(chars[_i + 2])
|
|
9148
|
+
) {
|
|
9149
|
+
value += chars[_i++] + chars[_i++] + digits(chars);
|
|
9150
|
+
} else if (/\d/.test(chars[_i + 1])) {
|
|
9151
|
+
value += chars[_i++] + digits(chars);
|
|
9152
|
+
}
|
|
9153
|
+
}
|
|
9154
|
+
if (is_ident(chars)) {
|
|
9155
|
+
let id = ident(chars);
|
|
9156
|
+
if (id === 'deg' || id === 'rad' || id === 'turn' || id === 'grad') {
|
|
9157
|
+
return { type: Tok.Hue, value: value * huenits[id] };
|
|
9158
|
+
}
|
|
9159
|
+
return undefined;
|
|
9160
|
+
}
|
|
9161
|
+
if (chars[_i] === '%') {
|
|
9162
|
+
_i++;
|
|
9163
|
+
return { type: Tok.Percentage, value: +value };
|
|
9164
|
+
}
|
|
9165
|
+
return { type: Tok.Number, value: +value };
|
|
9166
|
+
}
|
|
9167
|
+
|
|
9168
|
+
/*
|
|
9169
|
+
Consume digits.
|
|
9170
|
+
*/
|
|
9171
|
+
function digits(chars) {
|
|
9172
|
+
let v = '';
|
|
9173
|
+
while (/\d/.test(chars[_i])) {
|
|
9174
|
+
v += chars[_i++];
|
|
9175
|
+
}
|
|
9176
|
+
return v;
|
|
9177
|
+
}
|
|
9178
|
+
|
|
9179
|
+
/*
|
|
9180
|
+
Consume an identifier.
|
|
9181
|
+
*/
|
|
9182
|
+
function ident(chars) {
|
|
9183
|
+
let v = '';
|
|
9184
|
+
while (_i < chars.length && IdentCodePoint.test(chars[_i])) {
|
|
9185
|
+
v += chars[_i++];
|
|
9186
|
+
}
|
|
9187
|
+
return v;
|
|
9188
|
+
}
|
|
9189
|
+
|
|
9190
|
+
/*
|
|
9191
|
+
Consume an ident-like token.
|
|
9192
|
+
*/
|
|
9193
|
+
function identlike(chars) {
|
|
9194
|
+
let v = ident(chars);
|
|
9195
|
+
if (chars[_i] === '(') {
|
|
9196
|
+
_i++;
|
|
9197
|
+
return { type: Tok.Function, value: v };
|
|
9198
|
+
}
|
|
9199
|
+
if (v === 'none') {
|
|
9200
|
+
return { type: Tok.None, value: undefined };
|
|
9201
|
+
}
|
|
9202
|
+
return { type: Tok.Ident, value: v };
|
|
9203
|
+
}
|
|
9204
|
+
|
|
9205
|
+
function tokenize(str = '') {
|
|
9206
|
+
let chars = str.trim();
|
|
9207
|
+
let tokens = [];
|
|
9208
|
+
let ch;
|
|
9209
|
+
|
|
9210
|
+
/* reset counter */
|
|
9211
|
+
_i = 0;
|
|
9212
|
+
|
|
9213
|
+
while (_i < chars.length) {
|
|
9214
|
+
ch = chars[_i++];
|
|
9215
|
+
|
|
9216
|
+
/*
|
|
9217
|
+
Consume whitespace without emitting it
|
|
9218
|
+
*/
|
|
9219
|
+
if (ch === '\n' || ch === '\t' || ch === ' ') {
|
|
9220
|
+
while (
|
|
9221
|
+
_i < chars.length &&
|
|
9222
|
+
(chars[_i] === '\n' || chars[_i] === '\t' || chars[_i] === ' ')
|
|
9223
|
+
) {
|
|
9224
|
+
_i++;
|
|
9225
|
+
}
|
|
9226
|
+
continue;
|
|
9227
|
+
}
|
|
9228
|
+
|
|
9229
|
+
if (ch === ',') {
|
|
9230
|
+
return undefined;
|
|
9231
|
+
}
|
|
9232
|
+
|
|
9233
|
+
if (ch === ')') {
|
|
9234
|
+
tokens.push({ type: Tok.ParenClose });
|
|
9235
|
+
continue;
|
|
9236
|
+
}
|
|
9237
|
+
|
|
9238
|
+
if (ch === '+') {
|
|
9239
|
+
_i--;
|
|
9240
|
+
if (is_num(chars)) {
|
|
9241
|
+
tokens.push(num(chars));
|
|
9242
|
+
continue;
|
|
9243
|
+
}
|
|
9244
|
+
return undefined;
|
|
9245
|
+
}
|
|
9246
|
+
|
|
9247
|
+
if (ch === '-') {
|
|
9248
|
+
_i--;
|
|
9249
|
+
if (is_num(chars)) {
|
|
9250
|
+
tokens.push(num(chars));
|
|
9251
|
+
continue;
|
|
9252
|
+
}
|
|
9253
|
+
if (is_ident(chars)) {
|
|
9254
|
+
tokens.push({ type: Tok.Ident, value: ident(chars) });
|
|
9255
|
+
continue;
|
|
9256
|
+
}
|
|
9257
|
+
return undefined;
|
|
9258
|
+
}
|
|
9259
|
+
|
|
9260
|
+
if (ch === '.') {
|
|
9261
|
+
_i--;
|
|
9262
|
+
if (is_num(chars)) {
|
|
9263
|
+
tokens.push(num(chars));
|
|
9264
|
+
continue;
|
|
9265
|
+
}
|
|
9266
|
+
return undefined;
|
|
9267
|
+
}
|
|
9268
|
+
|
|
9269
|
+
if (ch === '/') {
|
|
9270
|
+
while (
|
|
9271
|
+
_i < chars.length &&
|
|
9272
|
+
(chars[_i] === '\n' || chars[_i] === '\t' || chars[_i] === ' ')
|
|
9273
|
+
) {
|
|
9274
|
+
_i++;
|
|
9275
|
+
}
|
|
9276
|
+
let alpha;
|
|
9277
|
+
if (is_num(chars)) {
|
|
9278
|
+
alpha = num(chars);
|
|
9279
|
+
if (alpha.type !== Tok.Hue) {
|
|
9280
|
+
tokens.push({ type: Tok.Alpha, value: alpha });
|
|
9281
|
+
continue;
|
|
9282
|
+
}
|
|
9283
|
+
}
|
|
9284
|
+
if (is_ident(chars)) {
|
|
9285
|
+
if (ident(chars) === 'none') {
|
|
9286
|
+
tokens.push({
|
|
9287
|
+
type: Tok.Alpha,
|
|
9288
|
+
value: { type: Tok.None, value: undefined }
|
|
9289
|
+
});
|
|
9290
|
+
continue;
|
|
9291
|
+
}
|
|
9292
|
+
}
|
|
9293
|
+
return undefined;
|
|
9294
|
+
}
|
|
9295
|
+
|
|
9296
|
+
if (/\d/.test(ch)) {
|
|
9297
|
+
_i--;
|
|
9298
|
+
tokens.push(num(chars));
|
|
9299
|
+
continue;
|
|
9300
|
+
}
|
|
9301
|
+
|
|
9302
|
+
if (IdentStartCodePoint.test(ch)) {
|
|
9303
|
+
_i--;
|
|
9304
|
+
tokens.push(identlike(chars));
|
|
9305
|
+
continue;
|
|
9306
|
+
}
|
|
9307
|
+
|
|
9308
|
+
/*
|
|
9309
|
+
Treat everything not already handled as an error.
|
|
9310
|
+
*/
|
|
9311
|
+
return undefined;
|
|
9312
|
+
}
|
|
9313
|
+
|
|
9314
|
+
return tokens;
|
|
9315
|
+
}
|
|
9316
|
+
|
|
9317
|
+
function parseColorSyntax(tokens) {
|
|
9318
|
+
tokens._i = 0;
|
|
9319
|
+
let token = tokens[tokens._i++];
|
|
9320
|
+
if (!token || token.type !== Tok.Function || token.value !== 'color') {
|
|
9321
|
+
return undefined;
|
|
9322
|
+
}
|
|
9323
|
+
token = tokens[tokens._i++];
|
|
9324
|
+
if (token.type !== Tok.Ident) {
|
|
9325
|
+
return undefined;
|
|
9326
|
+
}
|
|
9327
|
+
const mode = colorProfiles[token.value];
|
|
9328
|
+
if (!mode) {
|
|
9329
|
+
return undefined;
|
|
9330
|
+
}
|
|
9331
|
+
const res = { mode };
|
|
9332
|
+
const coords = consumeCoords(tokens, false);
|
|
9333
|
+
if (!coords) {
|
|
9334
|
+
return undefined;
|
|
9335
|
+
}
|
|
9336
|
+
const channels = getMode(mode).channels;
|
|
9337
|
+
for (let ii = 0, c, ch; ii < channels.length; ii++) {
|
|
9338
|
+
c = coords[ii];
|
|
9339
|
+
ch = channels[ii];
|
|
9340
|
+
if (c.type !== Tok.None) {
|
|
9341
|
+
res[ch] = c.type === Tok.Number ? c.value : c.value / 100;
|
|
9342
|
+
if (ch === 'alpha') {
|
|
9343
|
+
res[ch] = Math.max(0, Math.min(1, res[ch]));
|
|
9344
|
+
}
|
|
9345
|
+
}
|
|
9346
|
+
}
|
|
9347
|
+
return res;
|
|
9348
|
+
}
|
|
9349
|
+
|
|
9350
|
+
function consumeCoords(tokens, includeHue) {
|
|
9351
|
+
const coords = [];
|
|
9352
|
+
let token;
|
|
9353
|
+
while (tokens._i < tokens.length) {
|
|
9354
|
+
token = tokens[tokens._i++];
|
|
9355
|
+
if (
|
|
9356
|
+
token.type === Tok.None ||
|
|
9357
|
+
token.type === Tok.Number ||
|
|
9358
|
+
token.type === Tok.Alpha ||
|
|
9359
|
+
token.type === Tok.Percentage ||
|
|
9360
|
+
(includeHue && token.type === Tok.Hue)
|
|
9361
|
+
) {
|
|
9362
|
+
coords.push(token);
|
|
9363
|
+
continue;
|
|
9364
|
+
}
|
|
9365
|
+
if (token.type === Tok.ParenClose) {
|
|
9366
|
+
if (tokens._i < tokens.length) {
|
|
9367
|
+
return undefined;
|
|
9368
|
+
}
|
|
9369
|
+
continue;
|
|
9370
|
+
}
|
|
9371
|
+
return undefined;
|
|
9372
|
+
}
|
|
9373
|
+
|
|
9374
|
+
if (coords.length < 3 || coords.length > 4) {
|
|
9375
|
+
return undefined;
|
|
9376
|
+
}
|
|
9377
|
+
|
|
9378
|
+
if (coords.length === 4) {
|
|
9379
|
+
if (coords[3].type !== Tok.Alpha) {
|
|
9380
|
+
return undefined;
|
|
9381
|
+
}
|
|
9382
|
+
coords[3] = coords[3].value;
|
|
9383
|
+
}
|
|
9384
|
+
if (coords.length === 3) {
|
|
9385
|
+
coords.push({ type: Tok.None, value: undefined });
|
|
9386
|
+
}
|
|
9387
|
+
|
|
9388
|
+
return coords.every(c => c.type !== Tok.Alpha) ? coords : undefined;
|
|
9389
|
+
}
|
|
9390
|
+
|
|
9391
|
+
function parseModernSyntax(tokens, includeHue) {
|
|
9392
|
+
tokens._i = 0;
|
|
9393
|
+
let token = tokens[tokens._i++];
|
|
9394
|
+
if (!token || token.type !== Tok.Function) {
|
|
9395
|
+
return undefined;
|
|
9396
|
+
}
|
|
9397
|
+
let coords = consumeCoords(tokens, includeHue);
|
|
9398
|
+
if (!coords) {
|
|
9399
|
+
return undefined;
|
|
9400
|
+
}
|
|
9401
|
+
coords.unshift(token.value);
|
|
9402
|
+
return coords;
|
|
9403
|
+
}
|
|
9404
|
+
|
|
9405
|
+
const parse$1 = color => {
|
|
9406
|
+
if (typeof color !== 'string') {
|
|
9407
|
+
return undefined;
|
|
9408
|
+
}
|
|
9409
|
+
const tokens = tokenize(color);
|
|
9410
|
+
const parsed = tokens ? parseModernSyntax(tokens, true) : undefined;
|
|
9411
|
+
let result = undefined;
|
|
9412
|
+
let i = 0;
|
|
9413
|
+
let len = parsers.length;
|
|
9414
|
+
while (i < len) {
|
|
9415
|
+
if ((result = parsers[i++](color, parsed)) !== undefined) {
|
|
9416
|
+
return result;
|
|
9417
|
+
}
|
|
9418
|
+
}
|
|
9419
|
+
return tokens ? parseColorSyntax(tokens) : undefined;
|
|
9420
|
+
};
|
|
9421
|
+
|
|
9422
|
+
function parseRgb(color, parsed) {
|
|
9423
|
+
if (!parsed || (parsed[0] !== 'rgb' && parsed[0] !== 'rgba')) {
|
|
9424
|
+
return undefined;
|
|
9425
|
+
}
|
|
9426
|
+
const res = { mode: 'rgb' };
|
|
9427
|
+
const [, r, g, b, alpha] = parsed;
|
|
9428
|
+
if (r.type === Tok.Hue || g.type === Tok.Hue || b.type === Tok.Hue) {
|
|
9429
|
+
return undefined;
|
|
9430
|
+
}
|
|
9431
|
+
if (r.type !== Tok.None) {
|
|
9432
|
+
res.r = r.type === Tok.Number ? r.value / 255 : r.value / 100;
|
|
9433
|
+
}
|
|
9434
|
+
if (g.type !== Tok.None) {
|
|
9435
|
+
res.g = g.type === Tok.Number ? g.value / 255 : g.value / 100;
|
|
9436
|
+
}
|
|
9437
|
+
if (b.type !== Tok.None) {
|
|
9438
|
+
res.b = b.type === Tok.Number ? b.value / 255 : b.value / 100;
|
|
9439
|
+
}
|
|
9440
|
+
if (alpha.type !== Tok.None) {
|
|
9441
|
+
res.alpha = Math.min(
|
|
9442
|
+
1,
|
|
9443
|
+
Math.max(
|
|
9444
|
+
0,
|
|
9445
|
+
alpha.type === Tok.Number ? alpha.value : alpha.value / 100
|
|
9446
|
+
)
|
|
9447
|
+
);
|
|
9448
|
+
}
|
|
9449
|
+
|
|
9450
|
+
return res;
|
|
9451
|
+
}
|
|
9452
|
+
|
|
9453
|
+
const parseTransparent = c =>
|
|
9454
|
+
c === 'transparent'
|
|
9455
|
+
? { mode: 'rgb', r: 0, g: 0, b: 0, alpha: 0 }
|
|
9456
|
+
: undefined;
|
|
9457
|
+
|
|
9458
|
+
const lerp = (a, b, t) => a + t * (b - a);
|
|
9459
|
+
|
|
9460
|
+
const get_classes = arr => {
|
|
9461
|
+
let classes = [];
|
|
9462
|
+
for (let i = 0; i < arr.length - 1; i++) {
|
|
9463
|
+
let a = arr[i];
|
|
9464
|
+
let b = arr[i + 1];
|
|
9465
|
+
if (a === undefined && b === undefined) {
|
|
9466
|
+
classes.push(undefined);
|
|
9467
|
+
} else if (a !== undefined && b !== undefined) {
|
|
9468
|
+
classes.push([a, b]);
|
|
9469
|
+
} else {
|
|
9470
|
+
classes.push(a !== undefined ? [a, a] : [b, b]);
|
|
9471
|
+
}
|
|
9472
|
+
}
|
|
9473
|
+
return classes;
|
|
9474
|
+
};
|
|
9475
|
+
|
|
9476
|
+
const interpolatorPiecewise = interpolator => arr => {
|
|
9477
|
+
let classes = get_classes(arr);
|
|
9478
|
+
return t => {
|
|
9479
|
+
let cls = t * classes.length;
|
|
9480
|
+
let idx = t >= 1 ? classes.length - 1 : Math.max(Math.floor(cls), 0);
|
|
9481
|
+
let pair = classes[idx];
|
|
9482
|
+
return pair === undefined
|
|
9483
|
+
? undefined
|
|
9484
|
+
: interpolator(pair[0], pair[1], cls - idx);
|
|
9485
|
+
};
|
|
9486
|
+
};
|
|
9487
|
+
|
|
9488
|
+
const interpolatorLinear = interpolatorPiecewise(lerp);
|
|
9489
|
+
|
|
9490
|
+
const fixupAlpha = arr => {
|
|
9491
|
+
let some_defined = false;
|
|
9492
|
+
let res = arr.map(v => {
|
|
9493
|
+
if (v !== undefined) {
|
|
9494
|
+
some_defined = true;
|
|
9495
|
+
return v;
|
|
9496
|
+
}
|
|
9497
|
+
return 1;
|
|
9498
|
+
});
|
|
9499
|
+
return some_defined ? res : arr;
|
|
9500
|
+
};
|
|
9501
|
+
|
|
9502
|
+
/*
|
|
9503
|
+
sRGB color space
|
|
9504
|
+
*/
|
|
9505
|
+
|
|
9506
|
+
const definition$r = {
|
|
9507
|
+
mode: 'rgb',
|
|
9508
|
+
channels: ['r', 'g', 'b', 'alpha'],
|
|
9509
|
+
parse: [
|
|
9510
|
+
parseRgb,
|
|
9511
|
+
parseHex,
|
|
9512
|
+
parseRgbLegacy,
|
|
9513
|
+
parseNamed,
|
|
9514
|
+
parseTransparent,
|
|
9515
|
+
'srgb'
|
|
9516
|
+
],
|
|
9517
|
+
serialize: 'srgb',
|
|
9518
|
+
interpolate: {
|
|
9519
|
+
r: interpolatorLinear,
|
|
9520
|
+
g: interpolatorLinear,
|
|
9521
|
+
b: interpolatorLinear,
|
|
9522
|
+
alpha: { use: interpolatorLinear, fixup: fixupAlpha }
|
|
9523
|
+
},
|
|
9524
|
+
gamut: true,
|
|
9525
|
+
white: { r: 1, g: 1, b: 1 },
|
|
9526
|
+
black: { r: 0, g: 0, b: 0 }
|
|
9527
|
+
};
|
|
9528
|
+
|
|
9529
|
+
/*
|
|
9530
|
+
Convert A98 RGB values to CIE XYZ D65
|
|
9531
|
+
|
|
9532
|
+
References:
|
|
9533
|
+
* https://drafts.csswg.org/css-color/#color-conversion-code
|
|
9534
|
+
* http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
|
|
9535
|
+
* https://www.adobe.com/digitalimag/pdfs/AdobeRGB1998.pdf
|
|
9536
|
+
*/
|
|
9537
|
+
|
|
9538
|
+
const linearize$2 = (v = 0) => Math.pow(Math.abs(v), 563 / 256) * Math.sign(v);
|
|
9539
|
+
|
|
9540
|
+
const convertA98ToXyz65 = a98 => {
|
|
9541
|
+
let r = linearize$2(a98.r);
|
|
9542
|
+
let g = linearize$2(a98.g);
|
|
9543
|
+
let b = linearize$2(a98.b);
|
|
9544
|
+
let res = {
|
|
9545
|
+
mode: 'xyz65',
|
|
9546
|
+
x:
|
|
9547
|
+
0.5766690429101305 * r +
|
|
9548
|
+
0.1855582379065463 * g +
|
|
9549
|
+
0.1882286462349947 * b,
|
|
9550
|
+
y:
|
|
9551
|
+
0.297344975250536 * r +
|
|
9552
|
+
0.6273635662554661 * g +
|
|
9553
|
+
0.0752914584939979 * b,
|
|
9554
|
+
z:
|
|
9555
|
+
0.0270313613864123 * r +
|
|
9556
|
+
0.0706888525358272 * g +
|
|
9557
|
+
0.9913375368376386 * b
|
|
9558
|
+
};
|
|
9559
|
+
if (a98.alpha !== undefined) {
|
|
9560
|
+
res.alpha = a98.alpha;
|
|
9561
|
+
}
|
|
9562
|
+
return res;
|
|
9563
|
+
};
|
|
9564
|
+
|
|
9565
|
+
/*
|
|
9566
|
+
Convert CIE XYZ D65 values to A98 RGB
|
|
9567
|
+
|
|
9568
|
+
References:
|
|
9569
|
+
* https://drafts.csswg.org/css-color/#color-conversion-code
|
|
9570
|
+
* http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
|
|
9571
|
+
*/
|
|
9572
|
+
|
|
9573
|
+
const gamma$2 = v => Math.pow(Math.abs(v), 256 / 563) * Math.sign(v);
|
|
9574
|
+
|
|
9575
|
+
const convertXyz65ToA98 = ({ x, y, z, alpha }) => {
|
|
9576
|
+
if (x === undefined) x = 0;
|
|
9577
|
+
if (y === undefined) y = 0;
|
|
9578
|
+
if (z === undefined) z = 0;
|
|
9579
|
+
let res = {
|
|
9580
|
+
mode: 'a98',
|
|
9581
|
+
r: gamma$2(
|
|
9582
|
+
x * 2.0415879038107465 -
|
|
9583
|
+
y * 0.5650069742788597 -
|
|
9584
|
+
0.3447313507783297 * z
|
|
9585
|
+
),
|
|
9586
|
+
g: gamma$2(
|
|
9587
|
+
x * -0.9692436362808798 +
|
|
9588
|
+
y * 1.8759675015077206 +
|
|
9589
|
+
0.0415550574071756 * z
|
|
9590
|
+
),
|
|
9591
|
+
b: gamma$2(
|
|
9592
|
+
x * 0.0134442806320312 -
|
|
9593
|
+
y * 0.1183623922310184 +
|
|
9594
|
+
1.0151749943912058 * z
|
|
9595
|
+
)
|
|
9596
|
+
};
|
|
9597
|
+
if (alpha !== undefined) {
|
|
9598
|
+
res.alpha = alpha;
|
|
9599
|
+
}
|
|
9600
|
+
return res;
|
|
9601
|
+
};
|
|
9602
|
+
|
|
9603
|
+
const fn$3 = (c = 0) => {
|
|
9604
|
+
const abs = Math.abs(c);
|
|
9605
|
+
if (abs <= 0.04045) {
|
|
9606
|
+
return c / 12.92;
|
|
9607
|
+
}
|
|
9608
|
+
return (Math.sign(c) || 1) * Math.pow((abs + 0.055) / 1.055, 2.4);
|
|
9609
|
+
};
|
|
9610
|
+
|
|
9611
|
+
const convertRgbToLrgb = ({ r, g, b, alpha }) => {
|
|
9612
|
+
let res = {
|
|
9613
|
+
mode: 'lrgb',
|
|
9614
|
+
r: fn$3(r),
|
|
9615
|
+
g: fn$3(g),
|
|
9616
|
+
b: fn$3(b)
|
|
9617
|
+
};
|
|
9618
|
+
if (alpha !== undefined) res.alpha = alpha;
|
|
9619
|
+
return res;
|
|
9620
|
+
};
|
|
9621
|
+
|
|
9622
|
+
/*
|
|
9623
|
+
Convert sRGB values to CIE XYZ D65
|
|
9624
|
+
|
|
9625
|
+
References:
|
|
9626
|
+
* https://drafts.csswg.org/css-color/#color-conversion-code
|
|
9627
|
+
* http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
|
|
9628
|
+
* https://observablehq.com/@danburzo/color-matrix-calculator
|
|
9629
|
+
*/
|
|
9630
|
+
|
|
9631
|
+
|
|
9632
|
+
const convertRgbToXyz65 = rgb => {
|
|
9633
|
+
let { r, g, b, alpha } = convertRgbToLrgb(rgb);
|
|
9634
|
+
let res = {
|
|
9635
|
+
mode: 'xyz65',
|
|
9636
|
+
x:
|
|
9637
|
+
0.4123907992659593 * r +
|
|
9638
|
+
0.357584339383878 * g +
|
|
9639
|
+
0.1804807884018343 * b,
|
|
9640
|
+
y:
|
|
9641
|
+
0.2126390058715102 * r +
|
|
9642
|
+
0.715168678767756 * g +
|
|
9643
|
+
0.0721923153607337 * b,
|
|
9644
|
+
z:
|
|
9645
|
+
0.0193308187155918 * r +
|
|
9646
|
+
0.119194779794626 * g +
|
|
9647
|
+
0.9505321522496607 * b
|
|
9648
|
+
};
|
|
9649
|
+
if (alpha !== undefined) {
|
|
9650
|
+
res.alpha = alpha;
|
|
9651
|
+
}
|
|
9652
|
+
return res;
|
|
9653
|
+
};
|
|
9654
|
+
|
|
9655
|
+
const fn$2 = (c = 0) => {
|
|
9656
|
+
const abs = Math.abs(c);
|
|
9657
|
+
if (abs > 0.0031308) {
|
|
9658
|
+
return (Math.sign(c) || 1) * (1.055 * Math.pow(abs, 1 / 2.4) - 0.055);
|
|
9659
|
+
}
|
|
9660
|
+
return c * 12.92;
|
|
9661
|
+
};
|
|
9662
|
+
|
|
9663
|
+
const convertLrgbToRgb = ({ r, g, b, alpha }, mode = 'rgb') => {
|
|
9664
|
+
let res = {
|
|
9665
|
+
mode,
|
|
9666
|
+
r: fn$2(r),
|
|
9667
|
+
g: fn$2(g),
|
|
9668
|
+
b: fn$2(b)
|
|
9669
|
+
};
|
|
9670
|
+
if (alpha !== undefined) res.alpha = alpha;
|
|
9671
|
+
return res;
|
|
9672
|
+
};
|
|
9673
|
+
|
|
9674
|
+
/*
|
|
9675
|
+
CIE XYZ D65 values to sRGB.
|
|
9676
|
+
|
|
9677
|
+
References:
|
|
9678
|
+
* https://drafts.csswg.org/css-color/#color-conversion-code
|
|
9679
|
+
* http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
|
|
9680
|
+
* https://observablehq.com/@danburzo/color-matrix-calculator
|
|
9681
|
+
*/
|
|
9682
|
+
|
|
9683
|
+
|
|
9684
|
+
const convertXyz65ToRgb = ({ x, y, z, alpha }) => {
|
|
9685
|
+
if (x === undefined) x = 0;
|
|
9686
|
+
if (y === undefined) y = 0;
|
|
9687
|
+
if (z === undefined) z = 0;
|
|
9688
|
+
let res = convertLrgbToRgb({
|
|
9689
|
+
r:
|
|
9690
|
+
x * 3.2409699419045226 -
|
|
9691
|
+
y * 1.5373831775700939 -
|
|
9692
|
+
0.4986107602930034 * z,
|
|
9693
|
+
g:
|
|
9694
|
+
x * -0.9692436362808796 +
|
|
9695
|
+
y * 1.8759675015077204 +
|
|
9696
|
+
0.0415550574071756 * z,
|
|
9697
|
+
b:
|
|
9698
|
+
x * 0.0556300796969936 -
|
|
9699
|
+
y * 0.2039769588889765 +
|
|
9700
|
+
1.0569715142428784 * z
|
|
9701
|
+
});
|
|
9702
|
+
if (alpha !== undefined) {
|
|
9703
|
+
res.alpha = alpha;
|
|
9704
|
+
}
|
|
9705
|
+
return res;
|
|
9706
|
+
};
|
|
9707
|
+
|
|
9708
|
+
const definition$q = {
|
|
9709
|
+
...definition$r,
|
|
9710
|
+
mode: 'a98',
|
|
9711
|
+
parse: ['a98-rgb'],
|
|
9712
|
+
serialize: 'a98-rgb',
|
|
9713
|
+
|
|
9714
|
+
fromMode: {
|
|
9715
|
+
rgb: color => convertXyz65ToA98(convertRgbToXyz65(color)),
|
|
9716
|
+
xyz65: convertXyz65ToA98
|
|
9717
|
+
},
|
|
9718
|
+
|
|
9719
|
+
toMode: {
|
|
9720
|
+
rgb: color => convertXyz65ToRgb(convertA98ToXyz65(color)),
|
|
9721
|
+
xyz65: convertA98ToXyz65
|
|
9722
|
+
}
|
|
9723
|
+
};
|
|
9724
|
+
|
|
9725
|
+
const normalizeHue = hue => ((hue = hue % 360) < 0 ? hue + 360 : hue);
|
|
9726
|
+
|
|
9727
|
+
const hue = (hues, fn) => {
|
|
9728
|
+
return hues
|
|
9729
|
+
.map((hue, idx, arr) => {
|
|
9730
|
+
if (hue === undefined) {
|
|
9731
|
+
return hue;
|
|
9732
|
+
}
|
|
9733
|
+
let normalized = normalizeHue(hue);
|
|
9734
|
+
if (idx === 0 || hues[idx - 1] === undefined) {
|
|
9735
|
+
return normalized;
|
|
9736
|
+
}
|
|
9737
|
+
return fn(normalized - normalizeHue(arr[idx - 1]));
|
|
9738
|
+
})
|
|
9739
|
+
.reduce((acc, curr) => {
|
|
9740
|
+
if (
|
|
9741
|
+
!acc.length ||
|
|
9742
|
+
curr === undefined ||
|
|
9743
|
+
acc[acc.length - 1] === undefined
|
|
9744
|
+
) {
|
|
9745
|
+
acc.push(curr);
|
|
9746
|
+
return acc;
|
|
9747
|
+
}
|
|
9748
|
+
acc.push(curr + acc[acc.length - 1]);
|
|
9749
|
+
return acc;
|
|
9750
|
+
}, []);
|
|
9751
|
+
};
|
|
9752
|
+
|
|
9753
|
+
const fixupHueShorter = arr =>
|
|
9754
|
+
hue(arr, d => (Math.abs(d) <= 180 ? d : d - 360 * Math.sign(d)));
|
|
9755
|
+
|
|
9756
|
+
const M = [-0.14861, 1.78277, -0.29227, -0.90649, 1.97294, 0];
|
|
9757
|
+
|
|
9758
|
+
const degToRad = Math.PI / 180;
|
|
9759
|
+
const radToDeg = 180 / Math.PI;
|
|
9760
|
+
|
|
9761
|
+
/*
|
|
9762
|
+
Convert a RGB color to the Cubehelix HSL color space.
|
|
9763
|
+
|
|
9764
|
+
This computation is not present in Green's paper:
|
|
9765
|
+
https://arxiv.org/pdf/1108.5083.pdf
|
|
9766
|
+
|
|
9767
|
+
...but can be derived from the inverse, HSL to RGB conversion.
|
|
9768
|
+
|
|
9769
|
+
It matches the math in Mike Bostock's D3 implementation:
|
|
9770
|
+
|
|
9771
|
+
https://github.com/d3/d3-color/blob/master/src/cubehelix.js
|
|
9772
|
+
*/
|
|
9773
|
+
|
|
9774
|
+
|
|
9775
|
+
let DE = M[3] * M[4];
|
|
9776
|
+
let BE = M[1] * M[4];
|
|
9777
|
+
let BCAD = M[1] * M[2] - M[0] * M[3];
|
|
9778
|
+
|
|
9779
|
+
const convertRgbToCubehelix = ({ r, g, b, alpha }) => {
|
|
9780
|
+
if (r === undefined) r = 0;
|
|
9781
|
+
if (g === undefined) g = 0;
|
|
9782
|
+
if (b === undefined) b = 0;
|
|
9783
|
+
let l = (BCAD * b + r * DE - g * BE) / (BCAD + DE - BE);
|
|
9784
|
+
let x = b - l;
|
|
9785
|
+
let y = (M[4] * (g - l) - M[2] * x) / M[3];
|
|
9786
|
+
|
|
9787
|
+
let res = {
|
|
9788
|
+
mode: 'cubehelix',
|
|
9789
|
+
l: l,
|
|
9790
|
+
s:
|
|
9791
|
+
l === 0 || l === 1
|
|
9792
|
+
? undefined
|
|
9793
|
+
: Math.sqrt(x * x + y * y) / (M[4] * l * (1 - l))
|
|
9794
|
+
};
|
|
9795
|
+
|
|
9796
|
+
if (res.s) res.h = Math.atan2(y, x) * radToDeg - 120;
|
|
9797
|
+
if (alpha !== undefined) res.alpha = alpha;
|
|
9798
|
+
|
|
9799
|
+
return res;
|
|
9800
|
+
};
|
|
9801
|
+
|
|
9802
|
+
const convertCubehelixToRgb = ({ h, s, l, alpha }) => {
|
|
9803
|
+
let res = { mode: 'rgb' };
|
|
9804
|
+
|
|
9805
|
+
h = (h === undefined ? 0 : h + 120) * degToRad;
|
|
9806
|
+
if (l === undefined) l = 0;
|
|
9807
|
+
|
|
9808
|
+
let amp = s === undefined ? 0 : s * l * (1 - l);
|
|
9809
|
+
|
|
9810
|
+
let cosh = Math.cos(h);
|
|
9811
|
+
let sinh = Math.sin(h);
|
|
9812
|
+
|
|
9813
|
+
res.r = l + amp * (M[0] * cosh + M[1] * sinh);
|
|
9814
|
+
res.g = l + amp * (M[2] * cosh + M[3] * sinh);
|
|
9815
|
+
res.b = l + amp * (M[4] * cosh + M[5] * sinh);
|
|
9816
|
+
|
|
9817
|
+
if (alpha !== undefined) res.alpha = alpha;
|
|
9818
|
+
return res;
|
|
9819
|
+
};
|
|
9820
|
+
|
|
9821
|
+
const differenceHueSaturation = (std, smp) => {
|
|
9822
|
+
if (std.h === undefined || smp.h === undefined || !std.s || !smp.s) {
|
|
9823
|
+
return 0;
|
|
9824
|
+
}
|
|
9825
|
+
let std_h = normalizeHue(std.h);
|
|
9826
|
+
let smp_h = normalizeHue(smp.h);
|
|
9827
|
+
let dH = Math.sin((((smp_h - std_h + 360) / 2) * Math.PI) / 180);
|
|
9828
|
+
return 2 * Math.sqrt(std.s * smp.s) * dH;
|
|
9829
|
+
};
|
|
9830
|
+
|
|
9831
|
+
const differenceHueNaive = (std, smp) => {
|
|
9832
|
+
if (std.h === undefined || smp.h === undefined) {
|
|
9833
|
+
return 0;
|
|
9834
|
+
}
|
|
9835
|
+
let std_h = normalizeHue(std.h);
|
|
9836
|
+
let smp_h = normalizeHue(smp.h);
|
|
9837
|
+
if (Math.abs(smp_h - std_h) > 180) {
|
|
9838
|
+
// todo should this be normalized once again?
|
|
9839
|
+
return std_h - (smp_h - 360 * Math.sign(smp_h - std_h));
|
|
9840
|
+
}
|
|
9841
|
+
return smp_h - std_h;
|
|
9842
|
+
};
|
|
9843
|
+
|
|
9844
|
+
const differenceHueChroma = (std, smp) => {
|
|
9845
|
+
if (std.h === undefined || smp.h === undefined || !std.c || !smp.c) {
|
|
9846
|
+
return 0;
|
|
9847
|
+
}
|
|
9848
|
+
let std_h = normalizeHue(std.h);
|
|
9849
|
+
let smp_h = normalizeHue(smp.h);
|
|
9850
|
+
let dH = Math.sin((((smp_h - std_h + 360) / 2) * Math.PI) / 180);
|
|
9851
|
+
return 2 * Math.sqrt(std.c * smp.c) * dH;
|
|
9852
|
+
};
|
|
9853
|
+
|
|
9854
|
+
const averageAngle = val => {
|
|
9855
|
+
// See: https://en.wikipedia.org/wiki/Mean_of_circular_quantities
|
|
9856
|
+
let sum = val.reduce(
|
|
9857
|
+
(sum, val) => {
|
|
9858
|
+
if (val !== undefined) {
|
|
9859
|
+
let rad = (val * Math.PI) / 180;
|
|
9860
|
+
sum.sin += Math.sin(rad);
|
|
9861
|
+
sum.cos += Math.cos(rad);
|
|
9862
|
+
}
|
|
9863
|
+
return sum;
|
|
9864
|
+
},
|
|
9865
|
+
{ sin: 0, cos: 0 }
|
|
9866
|
+
);
|
|
9867
|
+
let angle = (Math.atan2(sum.sin, sum.cos) * 180) / Math.PI;
|
|
9868
|
+
return angle < 0 ? 360 + angle : angle;
|
|
9869
|
+
};
|
|
9870
|
+
|
|
9871
|
+
/*
|
|
9872
|
+
Dave Green's Cubehelix
|
|
9873
|
+
----------------------
|
|
9874
|
+
|
|
9875
|
+
Green, D. A., 2011, "A colour scheme for the display of astronomical intensity images",
|
|
9876
|
+
Bulletin of the Astronomical Society of India, 39, 289. (2011BASI...39..289G at ADS.)
|
|
9877
|
+
|
|
9878
|
+
https://www.mrao.cam.ac.uk/%7Edag/CUBEHELIX/
|
|
9879
|
+
https://arxiv.org/pdf/1108.5083.pdf
|
|
9880
|
+
|
|
9881
|
+
Although Cubehelix was defined to be a method to obtain a colour scheme,
|
|
9882
|
+
it actually contains a definition of a colour space, as identified by
|
|
9883
|
+
Mike Bostock and implemented in D3.js.
|
|
9884
|
+
|
|
9885
|
+
Green's paper introduces the following terminology:
|
|
9886
|
+
|
|
9887
|
+
* a `lightness` dimension in the interval [0, 1]
|
|
9888
|
+
on which we interpolate to obtain the colour scheme
|
|
9889
|
+
* a `start` colour that is analogous to a Hue in HSL space
|
|
9890
|
+
* a number of `rotations` around the Hue cylinder.
|
|
9891
|
+
* a `hue` parameter which should more appropriately be called `saturation`
|
|
9892
|
+
|
|
9893
|
+
As such, the original definition of the Cubehelix scheme is actually an
|
|
9894
|
+
interpolation between two colors in the Cubehelix space:
|
|
9895
|
+
|
|
9896
|
+
H: start H: start + 360 * rotations
|
|
9897
|
+
S: hue -> S: hue
|
|
9898
|
+
L: 0 L: 1
|
|
9899
|
+
|
|
9900
|
+
We can therefore extend the interpolation to any two colors in this space,
|
|
9901
|
+
with a variable Saturation and a Lightness interval other than the fixed 0 -> 1.
|
|
9902
|
+
*/
|
|
9903
|
+
|
|
9904
|
+
|
|
9905
|
+
const definition$p = {
|
|
9906
|
+
mode: 'cubehelix',
|
|
9907
|
+
channels: ['h', 's', 'l', 'alpha'],
|
|
9908
|
+
parse: ['--cubehelix'],
|
|
9909
|
+
serialize: '--cubehelix',
|
|
9910
|
+
|
|
9911
|
+
ranges: {
|
|
9912
|
+
h: [0, 360],
|
|
9913
|
+
s: [0, 4.614],
|
|
9914
|
+
l: [0, 1]
|
|
9915
|
+
},
|
|
9916
|
+
|
|
9917
|
+
fromMode: {
|
|
9918
|
+
rgb: convertRgbToCubehelix
|
|
9919
|
+
},
|
|
9920
|
+
|
|
9921
|
+
toMode: {
|
|
9922
|
+
rgb: convertCubehelixToRgb
|
|
9923
|
+
},
|
|
9924
|
+
|
|
9925
|
+
interpolate: {
|
|
9926
|
+
h: {
|
|
9927
|
+
use: interpolatorLinear,
|
|
9928
|
+
fixup: fixupHueShorter
|
|
9929
|
+
},
|
|
9930
|
+
s: interpolatorLinear,
|
|
9931
|
+
l: interpolatorLinear,
|
|
9932
|
+
alpha: {
|
|
9933
|
+
use: interpolatorLinear,
|
|
9934
|
+
fixup: fixupAlpha
|
|
9935
|
+
}
|
|
9936
|
+
},
|
|
9937
|
+
|
|
9938
|
+
difference: {
|
|
9939
|
+
h: differenceHueSaturation
|
|
9940
|
+
},
|
|
9941
|
+
|
|
9942
|
+
average: {
|
|
9943
|
+
h: averageAngle
|
|
9944
|
+
}
|
|
9945
|
+
};
|
|
9946
|
+
|
|
9947
|
+
/*
|
|
9948
|
+
References:
|
|
9949
|
+
* https://drafts.csswg.org/css-color/#lab-to-lch
|
|
9950
|
+
* https://drafts.csswg.org/css-color/#color-conversion-code
|
|
9951
|
+
*/
|
|
9952
|
+
const convertLabToLch = ({ l, a, b, alpha }, mode = 'lch') => {
|
|
9953
|
+
if (a === undefined) a = 0;
|
|
9954
|
+
if (b === undefined) b = 0;
|
|
9955
|
+
let c = Math.sqrt(a * a + b * b);
|
|
9956
|
+
let res = { mode, l, c };
|
|
9957
|
+
if (c) res.h = normalizeHue((Math.atan2(b, a) * 180) / Math.PI);
|
|
9958
|
+
if (alpha !== undefined) res.alpha = alpha;
|
|
9959
|
+
return res;
|
|
9960
|
+
};
|
|
9961
|
+
|
|
9962
|
+
/*
|
|
9963
|
+
References:
|
|
9964
|
+
* https://drafts.csswg.org/css-color/#lch-to-lab
|
|
9965
|
+
* https://drafts.csswg.org/css-color/#color-conversion-code
|
|
9966
|
+
*/
|
|
9967
|
+
const convertLchToLab = ({ l, c, h, alpha }, mode = 'lab') => {
|
|
9968
|
+
if (h === undefined) h = 0;
|
|
9969
|
+
let res = {
|
|
9970
|
+
mode,
|
|
9971
|
+
l,
|
|
9972
|
+
a: c ? c * Math.cos((h / 180) * Math.PI) : 0,
|
|
9973
|
+
b: c ? c * Math.sin((h / 180) * Math.PI) : 0
|
|
9974
|
+
};
|
|
9975
|
+
if (alpha !== undefined) res.alpha = alpha;
|
|
9976
|
+
return res;
|
|
9977
|
+
};
|
|
9978
|
+
|
|
9979
|
+
const k$3 = Math.pow(29, 3) / Math.pow(3, 3);
|
|
9980
|
+
const e$1 = Math.pow(6, 3) / Math.pow(29, 3);
|
|
9981
|
+
|
|
9982
|
+
/*
|
|
9983
|
+
The XYZ tristimulus values (white point)
|
|
9984
|
+
of standard illuminants for the CIE 1931 2°
|
|
9985
|
+
standard observer.
|
|
9986
|
+
|
|
9987
|
+
See: https://en.wikipedia.org/wiki/Standard_illuminant
|
|
9988
|
+
*/
|
|
9989
|
+
|
|
9990
|
+
const D50 = {
|
|
9991
|
+
X: 0.3457 / 0.3585,
|
|
9992
|
+
Y: 1,
|
|
9993
|
+
Z: (1 - 0.3457 - 0.3585) / 0.3585
|
|
9994
|
+
};
|
|
9995
|
+
|
|
9996
|
+
const D65 = {
|
|
9997
|
+
X: 0.3127 / 0.329,
|
|
9998
|
+
Y: 1,
|
|
9999
|
+
Z: (1 - 0.3127 - 0.329) / 0.329
|
|
10000
|
+
};
|
|
10001
|
+
|
|
10002
|
+
let fn$1 = v => (Math.pow(v, 3) > e$1 ? Math.pow(v, 3) : (116 * v - 16) / k$3);
|
|
10003
|
+
|
|
10004
|
+
const convertLab65ToXyz65 = ({ l, a, b, alpha }) => {
|
|
10005
|
+
if (l === undefined) l = 0;
|
|
10006
|
+
if (a === undefined) a = 0;
|
|
10007
|
+
if (b === undefined) b = 0;
|
|
10008
|
+
|
|
10009
|
+
let fy = (l + 16) / 116;
|
|
10010
|
+
let fx = a / 500 + fy;
|
|
10011
|
+
let fz = fy - b / 200;
|
|
10012
|
+
|
|
10013
|
+
let res = {
|
|
10014
|
+
mode: 'xyz65',
|
|
10015
|
+
x: fn$1(fx) * D65.X,
|
|
10016
|
+
y: fn$1(fy) * D65.Y,
|
|
10017
|
+
z: fn$1(fz) * D65.Z
|
|
10018
|
+
};
|
|
10019
|
+
|
|
10020
|
+
if (alpha !== undefined) {
|
|
10021
|
+
res.alpha = alpha;
|
|
10022
|
+
}
|
|
10023
|
+
|
|
10024
|
+
return res;
|
|
10025
|
+
};
|
|
10026
|
+
|
|
10027
|
+
const convertLab65ToRgb = lab => convertXyz65ToRgb(convertLab65ToXyz65(lab));
|
|
10028
|
+
|
|
10029
|
+
const f$1 = value => (value > e$1 ? Math.cbrt(value) : (k$3 * value + 16) / 116);
|
|
10030
|
+
|
|
10031
|
+
const convertXyz65ToLab65 = ({ x, y, z, alpha }) => {
|
|
10032
|
+
if (x === undefined) x = 0;
|
|
10033
|
+
if (y === undefined) y = 0;
|
|
10034
|
+
if (z === undefined) z = 0;
|
|
10035
|
+
let f0 = f$1(x / D65.X);
|
|
10036
|
+
let f1 = f$1(y / D65.Y);
|
|
10037
|
+
let f2 = f$1(z / D65.Z);
|
|
10038
|
+
|
|
10039
|
+
let res = {
|
|
10040
|
+
mode: 'lab65',
|
|
10041
|
+
l: 116 * f1 - 16,
|
|
10042
|
+
a: 500 * (f0 - f1),
|
|
10043
|
+
b: 200 * (f1 - f2)
|
|
10044
|
+
};
|
|
10045
|
+
|
|
10046
|
+
if (alpha !== undefined) {
|
|
10047
|
+
res.alpha = alpha;
|
|
10048
|
+
}
|
|
10049
|
+
|
|
10050
|
+
return res;
|
|
10051
|
+
};
|
|
10052
|
+
|
|
10053
|
+
const convertRgbToLab65 = rgb => {
|
|
10054
|
+
let res = convertXyz65ToLab65(convertRgbToXyz65(rgb));
|
|
10055
|
+
|
|
10056
|
+
// Fixes achromatic RGB colors having a _slight_ chroma due to floating-point errors
|
|
10057
|
+
// and approximated computations in sRGB <-> CIELab.
|
|
10058
|
+
// See: https://github.com/d3/d3-color/pull/46
|
|
10059
|
+
if (rgb.r === rgb.b && rgb.b === rgb.g) {
|
|
10060
|
+
res.a = res.b = 0;
|
|
10061
|
+
}
|
|
10062
|
+
return res;
|
|
10063
|
+
};
|
|
10064
|
+
|
|
10065
|
+
const kE = 1;
|
|
10066
|
+
const kCH = 1;
|
|
10067
|
+
const θ = (26 / 180) * Math.PI;
|
|
10068
|
+
const cosθ = Math.cos(θ);
|
|
10069
|
+
const sinθ = Math.sin(θ);
|
|
10070
|
+
const factor = 100 / Math.log(139 / 100); // ~ 303.67
|
|
10071
|
+
|
|
10072
|
+
/*
|
|
10073
|
+
Convert DIN99o LCh to CIELab D65
|
|
10074
|
+
--------------------------------
|
|
10075
|
+
*/
|
|
10076
|
+
|
|
10077
|
+
const convertDlchToLab65 = ({ l, c, h, alpha }) => {
|
|
10078
|
+
if (l === undefined) l = 0;
|
|
10079
|
+
if (c === undefined) c = 0;
|
|
10080
|
+
if (h === undefined) h = 0;
|
|
10081
|
+
let res = {
|
|
10082
|
+
mode: 'lab65',
|
|
10083
|
+
l: (Math.exp((l * kE) / factor) - 1) / 0.0039
|
|
10084
|
+
};
|
|
10085
|
+
|
|
10086
|
+
let G = (Math.exp(0.0435 * c * kCH * kE) - 1) / 0.075;
|
|
10087
|
+
let e = G * Math.cos((h / 180) * Math.PI - θ);
|
|
10088
|
+
let f = G * Math.sin((h / 180) * Math.PI - θ);
|
|
10089
|
+
res.a = e * cosθ - (f / 0.83) * sinθ;
|
|
10090
|
+
res.b = e * sinθ + (f / 0.83) * cosθ;
|
|
10091
|
+
|
|
10092
|
+
if (alpha !== undefined) res.alpha = alpha;
|
|
10093
|
+
return res;
|
|
10094
|
+
};
|
|
10095
|
+
|
|
10096
|
+
/*
|
|
10097
|
+
Convert CIELab D65 to DIN99o LCh
|
|
10098
|
+
================================
|
|
10099
|
+
*/
|
|
10100
|
+
|
|
10101
|
+
const convertLab65ToDlch = ({ l, a, b, alpha }) => {
|
|
10102
|
+
if (l === undefined) l = 0;
|
|
10103
|
+
if (a === undefined) a = 0;
|
|
10104
|
+
if (b === undefined) b = 0;
|
|
10105
|
+
let e = a * cosθ + b * sinθ;
|
|
10106
|
+
let f = 0.83 * (b * cosθ - a * sinθ);
|
|
10107
|
+
let G = Math.sqrt(e * e + f * f);
|
|
10108
|
+
let res = {
|
|
10109
|
+
mode: 'dlch',
|
|
10110
|
+
l: (factor / kE) * Math.log(1 + 0.0039 * l),
|
|
10111
|
+
c: Math.log(1 + 0.075 * G) / (0.0435 * kCH * kE)
|
|
10112
|
+
};
|
|
10113
|
+
|
|
10114
|
+
if (res.c) {
|
|
10115
|
+
res.h = normalizeHue(((Math.atan2(f, e) + θ) / Math.PI) * 180);
|
|
10116
|
+
}
|
|
10117
|
+
|
|
10118
|
+
if (alpha !== undefined) res.alpha = alpha;
|
|
10119
|
+
return res;
|
|
10120
|
+
};
|
|
10121
|
+
|
|
10122
|
+
const convertDlabToLab65 = c => convertDlchToLab65(convertLabToLch(c, 'dlch'));
|
|
10123
|
+
const convertLab65ToDlab = c => convertLchToLab(convertLab65ToDlch(c), 'dlab');
|
|
10124
|
+
|
|
10125
|
+
const definition$o = {
|
|
10126
|
+
mode: 'dlab',
|
|
10127
|
+
|
|
10128
|
+
parse: ['--din99o-lab'],
|
|
10129
|
+
serialize: '--din99o-lab',
|
|
10130
|
+
|
|
10131
|
+
toMode: {
|
|
10132
|
+
lab65: convertDlabToLab65,
|
|
10133
|
+
rgb: c => convertLab65ToRgb(convertDlabToLab65(c))
|
|
10134
|
+
},
|
|
10135
|
+
|
|
10136
|
+
fromMode: {
|
|
10137
|
+
lab65: convertLab65ToDlab,
|
|
10138
|
+
rgb: c => convertLab65ToDlab(convertRgbToLab65(c))
|
|
10139
|
+
},
|
|
10140
|
+
|
|
10141
|
+
channels: ['l', 'a', 'b', 'alpha'],
|
|
10142
|
+
|
|
10143
|
+
ranges: {
|
|
10144
|
+
l: [0, 100],
|
|
10145
|
+
a: [-40.09, 45.501],
|
|
10146
|
+
b: [-40.469, 44.344]
|
|
10147
|
+
},
|
|
10148
|
+
|
|
10149
|
+
interpolate: {
|
|
10150
|
+
l: interpolatorLinear,
|
|
10151
|
+
a: interpolatorLinear,
|
|
10152
|
+
b: interpolatorLinear,
|
|
10153
|
+
alpha: {
|
|
10154
|
+
use: interpolatorLinear,
|
|
10155
|
+
fixup: fixupAlpha
|
|
10156
|
+
}
|
|
10157
|
+
}
|
|
10158
|
+
};
|
|
10159
|
+
|
|
10160
|
+
const definition$n = {
|
|
10161
|
+
mode: 'dlch',
|
|
10162
|
+
|
|
10163
|
+
parse: ['--din99o-lch'],
|
|
10164
|
+
serialize: '--din99o-lch',
|
|
10165
|
+
|
|
10166
|
+
toMode: {
|
|
10167
|
+
lab65: convertDlchToLab65,
|
|
10168
|
+
dlab: c => convertLchToLab(c, 'dlab'),
|
|
10169
|
+
rgb: c => convertLab65ToRgb(convertDlchToLab65(c))
|
|
10170
|
+
},
|
|
10171
|
+
|
|
10172
|
+
fromMode: {
|
|
10173
|
+
lab65: convertLab65ToDlch,
|
|
10174
|
+
dlab: c => convertLabToLch(c, 'dlch'),
|
|
10175
|
+
rgb: c => convertLab65ToDlch(convertRgbToLab65(c))
|
|
10176
|
+
},
|
|
10177
|
+
|
|
10178
|
+
channels: ['l', 'c', 'h', 'alpha'],
|
|
10179
|
+
|
|
10180
|
+
ranges: {
|
|
10181
|
+
l: [0, 100],
|
|
10182
|
+
c: [0, 51.484],
|
|
10183
|
+
h: [0, 360]
|
|
10184
|
+
},
|
|
10185
|
+
|
|
10186
|
+
interpolate: {
|
|
10187
|
+
l: interpolatorLinear,
|
|
10188
|
+
c: interpolatorLinear,
|
|
10189
|
+
h: {
|
|
10190
|
+
use: interpolatorLinear,
|
|
10191
|
+
fixup: fixupHueShorter
|
|
10192
|
+
},
|
|
10193
|
+
alpha: {
|
|
10194
|
+
use: interpolatorLinear,
|
|
10195
|
+
fixup: fixupAlpha
|
|
10196
|
+
}
|
|
10197
|
+
},
|
|
10198
|
+
|
|
10199
|
+
difference: {
|
|
10200
|
+
h: differenceHueChroma
|
|
10201
|
+
},
|
|
10202
|
+
|
|
10203
|
+
average: {
|
|
10204
|
+
h: averageAngle
|
|
10205
|
+
}
|
|
10206
|
+
};
|
|
10207
|
+
|
|
10208
|
+
// Based on: https://en.wikipedia.org/wiki/HSL_and_HSV#Converting_to_RGB
|
|
10209
|
+
|
|
10210
|
+
function convertHsiToRgb({ h, s, i, alpha }) {
|
|
10211
|
+
h = normalizeHue(h !== undefined ? h : 0);
|
|
10212
|
+
if (s === undefined) s = 0;
|
|
10213
|
+
if (i === undefined) i = 0;
|
|
10214
|
+
let f = Math.abs(((h / 60) % 2) - 1);
|
|
10215
|
+
let res;
|
|
10216
|
+
switch (Math.floor(h / 60)) {
|
|
10217
|
+
case 0:
|
|
10218
|
+
res = {
|
|
10219
|
+
r: i * (1 + s * (3 / (2 - f) - 1)),
|
|
10220
|
+
g: i * (1 + s * ((3 * (1 - f)) / (2 - f) - 1)),
|
|
10221
|
+
b: i * (1 - s)
|
|
10222
|
+
};
|
|
10223
|
+
break;
|
|
10224
|
+
case 1:
|
|
10225
|
+
res = {
|
|
10226
|
+
r: i * (1 + s * ((3 * (1 - f)) / (2 - f) - 1)),
|
|
10227
|
+
g: i * (1 + s * (3 / (2 - f) - 1)),
|
|
10228
|
+
b: i * (1 - s)
|
|
10229
|
+
};
|
|
10230
|
+
break;
|
|
10231
|
+
case 2:
|
|
10232
|
+
res = {
|
|
10233
|
+
r: i * (1 - s),
|
|
10234
|
+
g: i * (1 + s * (3 / (2 - f) - 1)),
|
|
10235
|
+
b: i * (1 + s * ((3 * (1 - f)) / (2 - f) - 1))
|
|
10236
|
+
};
|
|
10237
|
+
break;
|
|
10238
|
+
case 3:
|
|
10239
|
+
res = {
|
|
10240
|
+
r: i * (1 - s),
|
|
10241
|
+
g: i * (1 + s * ((3 * (1 - f)) / (2 - f) - 1)),
|
|
10242
|
+
b: i * (1 + s * (3 / (2 - f) - 1))
|
|
10243
|
+
};
|
|
10244
|
+
break;
|
|
10245
|
+
case 4:
|
|
10246
|
+
res = {
|
|
10247
|
+
r: i * (1 + s * ((3 * (1 - f)) / (2 - f) - 1)),
|
|
10248
|
+
g: i * (1 - s),
|
|
10249
|
+
b: i * (1 + s * (3 / (2 - f) - 1))
|
|
10250
|
+
};
|
|
10251
|
+
break;
|
|
10252
|
+
case 5:
|
|
10253
|
+
res = {
|
|
10254
|
+
r: i * (1 + s * (3 / (2 - f) - 1)),
|
|
10255
|
+
g: i * (1 - s),
|
|
10256
|
+
b: i * (1 + s * ((3 * (1 - f)) / (2 - f) - 1))
|
|
10257
|
+
};
|
|
10258
|
+
break;
|
|
10259
|
+
default:
|
|
10260
|
+
res = { r: i * (1 - s), g: i * (1 - s), b: i * (1 - s) };
|
|
10261
|
+
}
|
|
10262
|
+
|
|
10263
|
+
res.mode = 'rgb';
|
|
10264
|
+
if (alpha !== undefined) res.alpha = alpha;
|
|
10265
|
+
return res;
|
|
10266
|
+
}
|
|
10267
|
+
|
|
10268
|
+
// Based on: https://en.wikipedia.org/wiki/HSL_and_HSV#Formal_derivation
|
|
10269
|
+
|
|
10270
|
+
function convertRgbToHsi({ r, g, b, alpha }) {
|
|
10271
|
+
if (r === undefined) r = 0;
|
|
10272
|
+
if (g === undefined) g = 0;
|
|
10273
|
+
if (b === undefined) b = 0;
|
|
10274
|
+
let M = Math.max(r, g, b),
|
|
10275
|
+
m = Math.min(r, g, b);
|
|
10276
|
+
let res = {
|
|
10277
|
+
mode: 'hsi',
|
|
10278
|
+
s: r + g + b === 0 ? 0 : 1 - (3 * m) / (r + g + b),
|
|
10279
|
+
i: (r + g + b) / 3
|
|
10280
|
+
};
|
|
10281
|
+
if (M - m !== 0)
|
|
10282
|
+
res.h =
|
|
10283
|
+
(M === r
|
|
10284
|
+
? (g - b) / (M - m) + (g < b) * 6
|
|
10285
|
+
: M === g
|
|
10286
|
+
? (b - r) / (M - m) + 2
|
|
10287
|
+
: (r - g) / (M - m) + 4) * 60;
|
|
10288
|
+
if (alpha !== undefined) res.alpha = alpha;
|
|
10289
|
+
return res;
|
|
10290
|
+
}
|
|
10291
|
+
|
|
10292
|
+
const definition$m = {
|
|
10293
|
+
mode: 'hsi',
|
|
10294
|
+
|
|
10295
|
+
toMode: {
|
|
10296
|
+
rgb: convertHsiToRgb
|
|
10297
|
+
},
|
|
10298
|
+
|
|
10299
|
+
parse: ['--hsi'],
|
|
10300
|
+
serialize: '--hsi',
|
|
10301
|
+
|
|
10302
|
+
fromMode: {
|
|
10303
|
+
rgb: convertRgbToHsi
|
|
10304
|
+
},
|
|
10305
|
+
|
|
10306
|
+
channels: ['h', 's', 'i', 'alpha'],
|
|
10307
|
+
|
|
10308
|
+
ranges: {
|
|
10309
|
+
h: [0, 360]
|
|
10310
|
+
},
|
|
10311
|
+
|
|
10312
|
+
gamut: 'rgb',
|
|
10313
|
+
|
|
10314
|
+
interpolate: {
|
|
10315
|
+
h: { use: interpolatorLinear, fixup: fixupHueShorter },
|
|
10316
|
+
s: interpolatorLinear,
|
|
10317
|
+
i: interpolatorLinear,
|
|
10318
|
+
alpha: { use: interpolatorLinear, fixup: fixupAlpha }
|
|
10319
|
+
},
|
|
10320
|
+
|
|
10321
|
+
difference: {
|
|
10322
|
+
h: differenceHueSaturation
|
|
10323
|
+
},
|
|
10324
|
+
|
|
10325
|
+
average: {
|
|
10326
|
+
h: averageAngle
|
|
10327
|
+
}
|
|
10328
|
+
};
|
|
10329
|
+
|
|
10330
|
+
// Based on: https://en.wikipedia.org/wiki/HSL_and_HSV#Converting_to_RGB
|
|
10331
|
+
|
|
10332
|
+
function convertHslToRgb({ h, s, l, alpha }) {
|
|
10333
|
+
h = normalizeHue(h !== undefined ? h : 0);
|
|
10334
|
+
if (s === undefined) s = 0;
|
|
10335
|
+
if (l === undefined) l = 0;
|
|
10336
|
+
let m1 = l + s * (l < 0.5 ? l : 1 - l);
|
|
10337
|
+
let m2 = m1 - (m1 - l) * 2 * Math.abs(((h / 60) % 2) - 1);
|
|
10338
|
+
let res;
|
|
10339
|
+
switch (Math.floor(h / 60)) {
|
|
10340
|
+
case 0:
|
|
10341
|
+
res = { r: m1, g: m2, b: 2 * l - m1 };
|
|
10342
|
+
break;
|
|
10343
|
+
case 1:
|
|
10344
|
+
res = { r: m2, g: m1, b: 2 * l - m1 };
|
|
10345
|
+
break;
|
|
10346
|
+
case 2:
|
|
10347
|
+
res = { r: 2 * l - m1, g: m1, b: m2 };
|
|
10348
|
+
break;
|
|
10349
|
+
case 3:
|
|
10350
|
+
res = { r: 2 * l - m1, g: m2, b: m1 };
|
|
10351
|
+
break;
|
|
10352
|
+
case 4:
|
|
10353
|
+
res = { r: m2, g: 2 * l - m1, b: m1 };
|
|
10354
|
+
break;
|
|
10355
|
+
case 5:
|
|
10356
|
+
res = { r: m1, g: 2 * l - m1, b: m2 };
|
|
10357
|
+
break;
|
|
10358
|
+
default:
|
|
10359
|
+
res = { r: 2 * l - m1, g: 2 * l - m1, b: 2 * l - m1 };
|
|
10360
|
+
}
|
|
10361
|
+
res.mode = 'rgb';
|
|
10362
|
+
if (alpha !== undefined) res.alpha = alpha;
|
|
10363
|
+
return res;
|
|
10364
|
+
}
|
|
10365
|
+
|
|
10366
|
+
// Based on: https://en.wikipedia.org/wiki/HSL_and_HSV#Formal_derivation
|
|
10367
|
+
|
|
10368
|
+
function convertRgbToHsl({ r, g, b, alpha }) {
|
|
10369
|
+
if (r === undefined) r = 0;
|
|
10370
|
+
if (g === undefined) g = 0;
|
|
10371
|
+
if (b === undefined) b = 0;
|
|
10372
|
+
let M = Math.max(r, g, b),
|
|
10373
|
+
m = Math.min(r, g, b);
|
|
10374
|
+
let res = {
|
|
10375
|
+
mode: 'hsl',
|
|
10376
|
+
s: M === m ? 0 : (M - m) / (1 - Math.abs(M + m - 1)),
|
|
10377
|
+
l: 0.5 * (M + m)
|
|
10378
|
+
};
|
|
10379
|
+
if (M - m !== 0)
|
|
10380
|
+
res.h =
|
|
10381
|
+
(M === r
|
|
10382
|
+
? (g - b) / (M - m) + (g < b) * 6
|
|
10383
|
+
: M === g
|
|
10384
|
+
? (b - r) / (M - m) + 2
|
|
10385
|
+
: (r - g) / (M - m) + 4) * 60;
|
|
10386
|
+
if (alpha !== undefined) res.alpha = alpha;
|
|
10387
|
+
return res;
|
|
10388
|
+
}
|
|
10389
|
+
|
|
10390
|
+
const hueToDeg = (val, unit) => {
|
|
10391
|
+
switch (unit) {
|
|
10392
|
+
case 'deg':
|
|
10393
|
+
return +val;
|
|
10394
|
+
case 'rad':
|
|
10395
|
+
return (val / Math.PI) * 180;
|
|
10396
|
+
case 'grad':
|
|
10397
|
+
return (val / 10) * 9;
|
|
10398
|
+
case 'turn':
|
|
10399
|
+
return val * 360;
|
|
10400
|
+
}
|
|
10401
|
+
};
|
|
10402
|
+
|
|
10403
|
+
/*
|
|
10404
|
+
hsl() regular expressions for legacy format
|
|
10405
|
+
Reference: https://drafts.csswg.org/css-color/#the-hsl-notation
|
|
10406
|
+
*/
|
|
10407
|
+
const hsl_old = new RegExp(
|
|
10408
|
+
`^hsla?\\(\\s*${hue$1}${c}${per}${c}${per}\\s*(?:,\\s*${num_per}\\s*)?\\)$`
|
|
10409
|
+
);
|
|
10410
|
+
|
|
10411
|
+
const parseHslLegacy = color => {
|
|
10412
|
+
let match = color.match(hsl_old);
|
|
10413
|
+
if (!match) return;
|
|
10414
|
+
let res = { mode: 'hsl' };
|
|
10415
|
+
|
|
10416
|
+
if (match[3] !== undefined) {
|
|
10417
|
+
res.h = +match[3];
|
|
10418
|
+
} else if (match[1] !== undefined && match[2] !== undefined) {
|
|
10419
|
+
res.h = hueToDeg(match[1], match[2]);
|
|
10420
|
+
}
|
|
10421
|
+
|
|
10422
|
+
if (match[4] !== undefined) {
|
|
10423
|
+
res.s = Math.min(Math.max(0, match[4] / 100), 1);
|
|
10424
|
+
}
|
|
10425
|
+
|
|
10426
|
+
if (match[5] !== undefined) {
|
|
10427
|
+
res.l = Math.min(Math.max(0, match[5] / 100), 1);
|
|
10428
|
+
}
|
|
10429
|
+
|
|
10430
|
+
if (match[6] !== undefined) {
|
|
10431
|
+
res.alpha = Math.max(0, Math.min(1, match[6] / 100));
|
|
10432
|
+
} else if (match[7] !== undefined) {
|
|
10433
|
+
res.alpha = Math.max(0, Math.min(1, +match[7]));
|
|
10434
|
+
}
|
|
10435
|
+
return res;
|
|
10436
|
+
};
|
|
10437
|
+
|
|
10438
|
+
function parseHsl(color, parsed) {
|
|
10439
|
+
if (!parsed || (parsed[0] !== 'hsl' && parsed[0] !== 'hsla')) {
|
|
10440
|
+
return undefined;
|
|
10441
|
+
}
|
|
10442
|
+
const res = { mode: 'hsl' };
|
|
10443
|
+
const [, h, s, l, alpha] = parsed;
|
|
10444
|
+
|
|
10445
|
+
if (h.type !== Tok.None) {
|
|
10446
|
+
if (h.type === Tok.Percentage) {
|
|
10447
|
+
return undefined;
|
|
10448
|
+
}
|
|
10449
|
+
res.h = h.value;
|
|
10450
|
+
}
|
|
10451
|
+
|
|
10452
|
+
if (s.type !== Tok.None) {
|
|
10453
|
+
if (s.type === Tok.Hue) {
|
|
10454
|
+
return undefined;
|
|
10455
|
+
}
|
|
10456
|
+
res.s = s.value / 100;
|
|
10457
|
+
}
|
|
10458
|
+
|
|
10459
|
+
if (l.type !== Tok.None) {
|
|
10460
|
+
if (l.type === Tok.Hue) {
|
|
10461
|
+
return undefined;
|
|
10462
|
+
}
|
|
10463
|
+
res.l = l.value / 100;
|
|
10464
|
+
}
|
|
10465
|
+
|
|
10466
|
+
if (alpha.type !== Tok.None) {
|
|
10467
|
+
res.alpha = Math.min(
|
|
10468
|
+
1,
|
|
10469
|
+
Math.max(
|
|
10470
|
+
0,
|
|
10471
|
+
alpha.type === Tok.Number ? alpha.value : alpha.value / 100
|
|
10472
|
+
)
|
|
10473
|
+
);
|
|
10474
|
+
}
|
|
10475
|
+
|
|
10476
|
+
return res;
|
|
10477
|
+
}
|
|
10478
|
+
|
|
10479
|
+
const definition$l = {
|
|
10480
|
+
mode: 'hsl',
|
|
10481
|
+
|
|
10482
|
+
toMode: {
|
|
10483
|
+
rgb: convertHslToRgb
|
|
10484
|
+
},
|
|
10485
|
+
|
|
10486
|
+
fromMode: {
|
|
10487
|
+
rgb: convertRgbToHsl
|
|
10488
|
+
},
|
|
10489
|
+
|
|
10490
|
+
channels: ['h', 's', 'l', 'alpha'],
|
|
10491
|
+
|
|
10492
|
+
ranges: {
|
|
10493
|
+
h: [0, 360]
|
|
10494
|
+
},
|
|
10495
|
+
|
|
10496
|
+
gamut: 'rgb',
|
|
10497
|
+
|
|
10498
|
+
parse: [parseHsl, parseHslLegacy],
|
|
10499
|
+
serialize: c =>
|
|
10500
|
+
`hsl(${c.h !== undefined ? c.h : 'none'} ${
|
|
10501
|
+
c.s !== undefined ? c.s * 100 + '%' : 'none'
|
|
10502
|
+
} ${c.l !== undefined ? c.l * 100 + '%' : 'none'}${
|
|
10503
|
+
c.alpha < 1 ? ` / ${c.alpha}` : ''
|
|
10504
|
+
})`,
|
|
10505
|
+
|
|
10506
|
+
interpolate: {
|
|
10507
|
+
h: { use: interpolatorLinear, fixup: fixupHueShorter },
|
|
10508
|
+
s: interpolatorLinear,
|
|
10509
|
+
l: interpolatorLinear,
|
|
10510
|
+
alpha: { use: interpolatorLinear, fixup: fixupAlpha }
|
|
10511
|
+
},
|
|
10512
|
+
|
|
10513
|
+
difference: {
|
|
10514
|
+
h: differenceHueSaturation
|
|
10515
|
+
},
|
|
10516
|
+
|
|
10517
|
+
average: {
|
|
10518
|
+
h: averageAngle
|
|
10519
|
+
}
|
|
10520
|
+
};
|
|
10521
|
+
|
|
10522
|
+
// Based on: https://en.wikipedia.org/wiki/HSL_and_HSV#Converting_to_RGB
|
|
10523
|
+
|
|
10524
|
+
function convertHsvToRgb({ h, s, v, alpha }) {
|
|
10525
|
+
h = normalizeHue(h !== undefined ? h : 0);
|
|
10526
|
+
if (s === undefined) s = 0;
|
|
10527
|
+
if (v === undefined) v = 0;
|
|
10528
|
+
let f = Math.abs(((h / 60) % 2) - 1);
|
|
10529
|
+
let res;
|
|
10530
|
+
switch (Math.floor(h / 60)) {
|
|
10531
|
+
case 0:
|
|
10532
|
+
res = { r: v, g: v * (1 - s * f), b: v * (1 - s) };
|
|
10533
|
+
break;
|
|
10534
|
+
case 1:
|
|
10535
|
+
res = { r: v * (1 - s * f), g: v, b: v * (1 - s) };
|
|
10536
|
+
break;
|
|
10537
|
+
case 2:
|
|
10538
|
+
res = { r: v * (1 - s), g: v, b: v * (1 - s * f) };
|
|
10539
|
+
break;
|
|
10540
|
+
case 3:
|
|
10541
|
+
res = { r: v * (1 - s), g: v * (1 - s * f), b: v };
|
|
10542
|
+
break;
|
|
10543
|
+
case 4:
|
|
10544
|
+
res = { r: v * (1 - s * f), g: v * (1 - s), b: v };
|
|
10545
|
+
break;
|
|
10546
|
+
case 5:
|
|
10547
|
+
res = { r: v, g: v * (1 - s), b: v * (1 - s * f) };
|
|
10548
|
+
break;
|
|
10549
|
+
default:
|
|
10550
|
+
res = { r: v * (1 - s), g: v * (1 - s), b: v * (1 - s) };
|
|
10551
|
+
}
|
|
10552
|
+
res.mode = 'rgb';
|
|
10553
|
+
if (alpha !== undefined) res.alpha = alpha;
|
|
10554
|
+
return res;
|
|
10555
|
+
}
|
|
10556
|
+
|
|
10557
|
+
// Based on: https://en.wikipedia.org/wiki/HSL_and_HSV#Formal_derivation
|
|
10558
|
+
|
|
10559
|
+
function convertRgbToHsv({ r, g, b, alpha }) {
|
|
10560
|
+
if (r === undefined) r = 0;
|
|
10561
|
+
if (g === undefined) g = 0;
|
|
10562
|
+
if (b === undefined) b = 0;
|
|
10563
|
+
let M = Math.max(r, g, b),
|
|
10564
|
+
m = Math.min(r, g, b);
|
|
10565
|
+
let res = {
|
|
10566
|
+
mode: 'hsv',
|
|
10567
|
+
s: M === 0 ? 0 : 1 - m / M,
|
|
10568
|
+
v: M
|
|
10569
|
+
};
|
|
10570
|
+
if (M - m !== 0)
|
|
10571
|
+
res.h =
|
|
10572
|
+
(M === r
|
|
10573
|
+
? (g - b) / (M - m) + (g < b) * 6
|
|
10574
|
+
: M === g
|
|
10575
|
+
? (b - r) / (M - m) + 2
|
|
10576
|
+
: (r - g) / (M - m) + 4) * 60;
|
|
10577
|
+
if (alpha !== undefined) res.alpha = alpha;
|
|
10578
|
+
return res;
|
|
10579
|
+
}
|
|
10580
|
+
|
|
10581
|
+
const definition$k = {
|
|
10582
|
+
mode: 'hsv',
|
|
10583
|
+
|
|
10584
|
+
toMode: {
|
|
10585
|
+
rgb: convertHsvToRgb
|
|
10586
|
+
},
|
|
10587
|
+
|
|
10588
|
+
parse: ['--hsv'],
|
|
10589
|
+
serialize: '--hsv',
|
|
10590
|
+
|
|
10591
|
+
fromMode: {
|
|
10592
|
+
rgb: convertRgbToHsv
|
|
10593
|
+
},
|
|
10594
|
+
|
|
10595
|
+
channels: ['h', 's', 'v', 'alpha'],
|
|
10596
|
+
|
|
10597
|
+
ranges: {
|
|
10598
|
+
h: [0, 360]
|
|
10599
|
+
},
|
|
10600
|
+
|
|
10601
|
+
gamut: 'rgb',
|
|
10602
|
+
|
|
10603
|
+
interpolate: {
|
|
10604
|
+
h: { use: interpolatorLinear, fixup: fixupHueShorter },
|
|
10605
|
+
s: interpolatorLinear,
|
|
10606
|
+
v: interpolatorLinear,
|
|
10607
|
+
alpha: { use: interpolatorLinear, fixup: fixupAlpha }
|
|
10608
|
+
},
|
|
10609
|
+
|
|
10610
|
+
difference: {
|
|
10611
|
+
h: differenceHueSaturation
|
|
10612
|
+
},
|
|
10613
|
+
|
|
10614
|
+
average: {
|
|
10615
|
+
h: averageAngle
|
|
10616
|
+
}
|
|
10617
|
+
};
|
|
10618
|
+
|
|
10619
|
+
/*
|
|
10620
|
+
HWB to RGB converter
|
|
10621
|
+
--------------------
|
|
10622
|
+
|
|
10623
|
+
References:
|
|
10624
|
+
* https://drafts.csswg.org/css-color/#hwb-to-rgb
|
|
10625
|
+
* https://en.wikipedia.org/wiki/HWB_color_model
|
|
10626
|
+
* http://alvyray.com/Papers/CG/HWB_JGTv208.pdf
|
|
10627
|
+
*/
|
|
10628
|
+
|
|
10629
|
+
|
|
10630
|
+
function convertHwbToRgb({ h, w, b, alpha }) {
|
|
10631
|
+
if (w === undefined) w = 0;
|
|
10632
|
+
if (b === undefined) b = 0;
|
|
10633
|
+
// normalize w + b to 1
|
|
10634
|
+
if (w + b > 1) {
|
|
10635
|
+
let s = w + b;
|
|
10636
|
+
w /= s;
|
|
10637
|
+
b /= s;
|
|
10638
|
+
}
|
|
10639
|
+
return convertHsvToRgb({
|
|
10640
|
+
h: h,
|
|
10641
|
+
s: b === 1 ? 1 : 1 - w / (1 - b),
|
|
10642
|
+
v: 1 - b,
|
|
10643
|
+
alpha: alpha
|
|
10644
|
+
});
|
|
10645
|
+
}
|
|
10646
|
+
|
|
10647
|
+
/*
|
|
10648
|
+
RGB to HWB converter
|
|
10649
|
+
--------------------
|
|
10650
|
+
|
|
10651
|
+
References:
|
|
10652
|
+
* https://drafts.csswg.org/css-color/#hwb-to-rgb
|
|
10653
|
+
* https://en.wikipedia.org/wiki/HWB_color_model
|
|
10654
|
+
* http://alvyray.com/Papers/CG/HWB_JGTv208.pdf
|
|
10655
|
+
*/
|
|
10656
|
+
|
|
10657
|
+
|
|
10658
|
+
function convertRgbToHwb(rgba) {
|
|
10659
|
+
let hsv = convertRgbToHsv(rgba);
|
|
10660
|
+
if (hsv === undefined) return undefined;
|
|
10661
|
+
let s = hsv.s !== undefined ? hsv.s : 0;
|
|
10662
|
+
let v = hsv.v !== undefined ? hsv.v : 0;
|
|
10663
|
+
let res = {
|
|
10664
|
+
mode: 'hwb',
|
|
10665
|
+
w: (1 - s) * v,
|
|
10666
|
+
b: 1 - v
|
|
10667
|
+
};
|
|
10668
|
+
if (hsv.h !== undefined) res.h = hsv.h;
|
|
10669
|
+
if (hsv.alpha !== undefined) res.alpha = hsv.alpha;
|
|
10670
|
+
return res;
|
|
10671
|
+
}
|
|
10672
|
+
|
|
10673
|
+
function ParseHwb(color, parsed) {
|
|
10674
|
+
if (!parsed || parsed[0] !== 'hwb') {
|
|
10675
|
+
return undefined;
|
|
10676
|
+
}
|
|
10677
|
+
const res = { mode: 'hwb' };
|
|
10678
|
+
const [, h, w, b, alpha] = parsed;
|
|
10679
|
+
|
|
10680
|
+
if (h.type !== Tok.None) {
|
|
10681
|
+
if (h.type === Tok.Percentage) {
|
|
10682
|
+
return undefined;
|
|
10683
|
+
}
|
|
10684
|
+
res.h = h.value;
|
|
10685
|
+
}
|
|
10686
|
+
|
|
10687
|
+
if (w.type !== Tok.None) {
|
|
10688
|
+
if (w.type === Tok.Hue) {
|
|
10689
|
+
return undefined;
|
|
10690
|
+
}
|
|
10691
|
+
res.w = w.value / 100;
|
|
10692
|
+
}
|
|
10693
|
+
|
|
10694
|
+
if (b.type !== Tok.None) {
|
|
10695
|
+
if (b.type === Tok.Hue) {
|
|
10696
|
+
return undefined;
|
|
10697
|
+
}
|
|
10698
|
+
res.b = b.value / 100;
|
|
10699
|
+
}
|
|
10700
|
+
|
|
10701
|
+
if (alpha.type !== Tok.None) {
|
|
10702
|
+
res.alpha = Math.min(
|
|
10703
|
+
1,
|
|
10704
|
+
Math.max(
|
|
10705
|
+
0,
|
|
10706
|
+
alpha.type === Tok.Number ? alpha.value : alpha.value / 100
|
|
10707
|
+
)
|
|
10708
|
+
);
|
|
10709
|
+
}
|
|
10710
|
+
|
|
10711
|
+
return res;
|
|
10712
|
+
}
|
|
10713
|
+
|
|
10714
|
+
const definition$j = {
|
|
10715
|
+
mode: 'hwb',
|
|
10716
|
+
|
|
10717
|
+
toMode: {
|
|
10718
|
+
rgb: convertHwbToRgb
|
|
10719
|
+
},
|
|
10720
|
+
|
|
10721
|
+
fromMode: {
|
|
10722
|
+
rgb: convertRgbToHwb
|
|
10723
|
+
},
|
|
10724
|
+
|
|
10725
|
+
channels: ['h', 'w', 'b', 'alpha'],
|
|
10726
|
+
|
|
10727
|
+
ranges: {
|
|
10728
|
+
h: [0, 360]
|
|
10729
|
+
},
|
|
10730
|
+
|
|
10731
|
+
gamut: 'rgb',
|
|
10732
|
+
|
|
10733
|
+
parse: [ParseHwb],
|
|
10734
|
+
serialize: c =>
|
|
10735
|
+
`hwb(${c.h !== undefined ? c.h : 'none'} ${
|
|
10736
|
+
c.w !== undefined ? c.w * 100 + '%' : 'none'
|
|
10737
|
+
} ${c.b !== undefined ? c.b * 100 + '%' : 'none'}${
|
|
10738
|
+
c.alpha < 1 ? ` / ${c.alpha}` : ''
|
|
10739
|
+
})`,
|
|
10740
|
+
|
|
10741
|
+
interpolate: {
|
|
10742
|
+
h: { use: interpolatorLinear, fixup: fixupHueShorter },
|
|
10743
|
+
w: interpolatorLinear,
|
|
10744
|
+
b: interpolatorLinear,
|
|
10745
|
+
alpha: { use: interpolatorLinear, fixup: fixupAlpha }
|
|
10746
|
+
},
|
|
10747
|
+
|
|
10748
|
+
difference: {
|
|
10749
|
+
h: differenceHueNaive
|
|
10750
|
+
},
|
|
10751
|
+
|
|
10752
|
+
average: {
|
|
10753
|
+
h: averageAngle
|
|
10754
|
+
}
|
|
10755
|
+
};
|
|
10756
|
+
|
|
10757
|
+
/*
|
|
10758
|
+
Relative XYZ has Y=1 for media white,
|
|
10759
|
+
BT.2048 says media white Y=203 (at PQ 58).
|
|
10760
|
+
See: https://www.itu.int/dms_pub/itu-r/opb/rep/R-REP-BT.2408-3-2019-PDF-E.pdf
|
|
10761
|
+
*/
|
|
10762
|
+
const YW = 203;
|
|
10763
|
+
|
|
10764
|
+
/*
|
|
10765
|
+
https://en.wikipedia.org/wiki/Transfer_functions_in_imaging
|
|
10766
|
+
*/
|
|
10767
|
+
|
|
10768
|
+
const M1 = 0.1593017578125;
|
|
10769
|
+
const M2 = 78.84375;
|
|
10770
|
+
const C1 = 0.8359375;
|
|
10771
|
+
const C2 = 18.8515625;
|
|
10772
|
+
const C3 = 18.6875;
|
|
10773
|
+
|
|
10774
|
+
/*
|
|
10775
|
+
Perceptual Quantizer, as defined in Rec. BT 2100-2 (2018)
|
|
10776
|
+
|
|
10777
|
+
* https://www.itu.int/rec/R-REC-BT.2100-2-201807-I/en
|
|
10778
|
+
* https://en.wikipedia.org/wiki/Perceptual_quantizer
|
|
10779
|
+
*/
|
|
10780
|
+
|
|
10781
|
+
/* PQ EOTF, defined for `v` in [0,1]. */
|
|
10782
|
+
function transferPqDecode(v) {
|
|
10783
|
+
if (v < 0) return 0;
|
|
10784
|
+
const c = Math.pow(v, 1 / M2);
|
|
10785
|
+
return 1e4 * Math.pow(Math.max(0, c - C1) / (C2 - C3 * c), 1 / M1);
|
|
10786
|
+
}
|
|
10787
|
+
|
|
10788
|
+
/* PQ EOTF^-1, defined for `v` in [0, 1e4]. */
|
|
10789
|
+
function transferPqEncode(v) {
|
|
10790
|
+
if (v < 0) return 0;
|
|
10791
|
+
const c = Math.pow(v / 1e4, M1);
|
|
10792
|
+
return Math.pow((C1 + C2 * c) / (1 + C3 * c), M2);
|
|
10793
|
+
}
|
|
10794
|
+
|
|
10795
|
+
const toRel = c => Math.max(c / YW, 0);
|
|
10796
|
+
|
|
10797
|
+
const convertItpToXyz65 = ({ i, t, p, alpha }) => {
|
|
10798
|
+
if (i === undefined) i = 0;
|
|
10799
|
+
if (t === undefined) t = 0;
|
|
10800
|
+
if (p === undefined) p = 0;
|
|
10801
|
+
|
|
10802
|
+
const l = transferPqDecode(
|
|
10803
|
+
i + 0.008609037037932761 * t + 0.11102962500302593 * p
|
|
10804
|
+
);
|
|
10805
|
+
const m = transferPqDecode(
|
|
10806
|
+
i - 0.00860903703793275 * t - 0.11102962500302599 * p
|
|
10807
|
+
);
|
|
10808
|
+
const s = transferPqDecode(
|
|
10809
|
+
i + 0.5600313357106791 * t - 0.32062717498731885 * p
|
|
10810
|
+
);
|
|
10811
|
+
|
|
10812
|
+
const res = {
|
|
10813
|
+
mode: 'xyz65',
|
|
10814
|
+
x: toRel(
|
|
10815
|
+
2.0701522183894219 * l -
|
|
10816
|
+
1.3263473389671556 * m +
|
|
10817
|
+
0.2066510476294051 * s
|
|
10818
|
+
),
|
|
10819
|
+
y: toRel(
|
|
10820
|
+
0.3647385209748074 * l +
|
|
10821
|
+
0.680566024947227 * m -
|
|
10822
|
+
0.0453045459220346 * s
|
|
10823
|
+
),
|
|
10824
|
+
z: toRel(
|
|
10825
|
+
-0.049747207535812 * l -
|
|
10826
|
+
0.0492609666966138 * m +
|
|
10827
|
+
1.1880659249923042 * s
|
|
10828
|
+
)
|
|
10829
|
+
};
|
|
10830
|
+
|
|
10831
|
+
if (alpha !== undefined) {
|
|
10832
|
+
res.alpha = alpha;
|
|
10833
|
+
}
|
|
10834
|
+
|
|
10835
|
+
return res;
|
|
10836
|
+
};
|
|
10837
|
+
|
|
10838
|
+
const toAbs = (c = 0) => Math.max(c * YW, 0);
|
|
10839
|
+
|
|
10840
|
+
const convertXyz65ToItp = ({ x, y, z, alpha }) => {
|
|
10841
|
+
const absX = toAbs(x);
|
|
10842
|
+
const absY = toAbs(y);
|
|
10843
|
+
const absZ = toAbs(z);
|
|
10844
|
+
const l = transferPqEncode(
|
|
10845
|
+
0.3592832590121217 * absX +
|
|
10846
|
+
0.6976051147779502 * absY -
|
|
10847
|
+
0.0358915932320289 * absZ
|
|
10848
|
+
);
|
|
10849
|
+
const m = transferPqEncode(
|
|
10850
|
+
-0.1920808463704995 * absX +
|
|
10851
|
+
1.1004767970374323 * absY +
|
|
10852
|
+
0.0753748658519118 * absZ
|
|
10853
|
+
);
|
|
10854
|
+
const s = transferPqEncode(
|
|
10855
|
+
0.0070797844607477 * absX +
|
|
10856
|
+
0.0748396662186366 * absY +
|
|
10857
|
+
0.8433265453898765 * absZ
|
|
10858
|
+
);
|
|
10859
|
+
|
|
10860
|
+
const i = 0.5 * l + 0.5 * m;
|
|
10861
|
+
const t = 1.61376953125 * l - 3.323486328125 * m + 1.709716796875 * s;
|
|
10862
|
+
const p = 4.378173828125 * l - 4.24560546875 * m - 0.132568359375 * s;
|
|
10863
|
+
|
|
10864
|
+
const res = { mode: 'itp', i, t, p };
|
|
10865
|
+
if (alpha !== undefined) {
|
|
10866
|
+
res.alpha = alpha;
|
|
10867
|
+
}
|
|
10868
|
+
|
|
10869
|
+
return res;
|
|
10870
|
+
};
|
|
10871
|
+
|
|
10872
|
+
/*
|
|
10873
|
+
ICtCp (or ITP) color space, as defined in ITU-R Recommendation BT.2100.
|
|
10874
|
+
|
|
10875
|
+
ICtCp is drafted to be supported in CSS within
|
|
10876
|
+
[CSS Color HDR Module Level 1](https://drafts.csswg.org/css-color-hdr/#ICtCp) spec.
|
|
10877
|
+
*/
|
|
10878
|
+
|
|
10879
|
+
const definition$i = {
|
|
10880
|
+
mode: 'itp',
|
|
10881
|
+
channels: ['i', 't', 'p', 'alpha'],
|
|
10882
|
+
parse: ['--ictcp'],
|
|
10883
|
+
serialize: '--ictcp',
|
|
10884
|
+
|
|
10885
|
+
toMode: {
|
|
10886
|
+
xyz65: convertItpToXyz65,
|
|
10887
|
+
rgb: color => convertXyz65ToRgb(convertItpToXyz65(color))
|
|
10888
|
+
},
|
|
10889
|
+
|
|
10890
|
+
fromMode: {
|
|
10891
|
+
xyz65: convertXyz65ToItp,
|
|
10892
|
+
rgb: color => convertXyz65ToItp(convertRgbToXyz65(color))
|
|
10893
|
+
},
|
|
10894
|
+
|
|
10895
|
+
ranges: {
|
|
10896
|
+
i: [0, 0.581],
|
|
10897
|
+
t: [-0.369, 0.272],
|
|
10898
|
+
p: [-0.164, 0.331]
|
|
10899
|
+
},
|
|
10900
|
+
|
|
10901
|
+
interpolate: {
|
|
10902
|
+
i: interpolatorLinear,
|
|
10903
|
+
t: interpolatorLinear,
|
|
10904
|
+
p: interpolatorLinear,
|
|
10905
|
+
alpha: { use: interpolatorLinear, fixup: fixupAlpha }
|
|
10906
|
+
}
|
|
10907
|
+
};
|
|
10908
|
+
|
|
10909
|
+
const p$2 = 134.03437499999998; // = 1.7 * 2523 / Math.pow(2, 5);
|
|
10910
|
+
const d0$1 = 1.6295499532821566e-11;
|
|
10911
|
+
|
|
10912
|
+
/*
|
|
10913
|
+
The encoding function is derived from Perceptual Quantizer.
|
|
10914
|
+
*/
|
|
10915
|
+
const jabPqEncode = v => {
|
|
10916
|
+
if (v < 0) return 0;
|
|
10917
|
+
let vn = Math.pow(v / 10000, M1);
|
|
10918
|
+
return Math.pow((C1 + C2 * vn) / (1 + C3 * vn), p$2);
|
|
10919
|
+
};
|
|
10920
|
+
|
|
10921
|
+
// Convert to Absolute XYZ
|
|
10922
|
+
const abs = (v = 0) => Math.max(v * 203, 0);
|
|
10923
|
+
|
|
10924
|
+
const convertXyz65ToJab = ({ x, y, z, alpha }) => {
|
|
10925
|
+
x = abs(x);
|
|
10926
|
+
y = abs(y);
|
|
10927
|
+
z = abs(z);
|
|
10928
|
+
|
|
10929
|
+
let xp = 1.15 * x - 0.15 * z;
|
|
10930
|
+
let yp = 0.66 * y + 0.34 * x;
|
|
10931
|
+
|
|
10932
|
+
let l = jabPqEncode(0.41478972 * xp + 0.579999 * yp + 0.014648 * z);
|
|
10933
|
+
let m = jabPqEncode(-0.20151 * xp + 1.120649 * yp + 0.0531008 * z);
|
|
10934
|
+
let s = jabPqEncode(-0.0166008 * xp + 0.2648 * yp + 0.6684799 * z);
|
|
10935
|
+
|
|
10936
|
+
let i = (l + m) / 2;
|
|
10937
|
+
|
|
10938
|
+
let res = {
|
|
10939
|
+
mode: 'jab',
|
|
10940
|
+
j: (0.44 * i) / (1 - 0.56 * i) - d0$1,
|
|
10941
|
+
a: 3.524 * l - 4.066708 * m + 0.542708 * s,
|
|
10942
|
+
b: 0.199076 * l + 1.096799 * m - 1.295875 * s
|
|
10943
|
+
};
|
|
10944
|
+
|
|
10945
|
+
if (alpha !== undefined) {
|
|
10946
|
+
res.alpha = alpha;
|
|
10947
|
+
}
|
|
10948
|
+
|
|
10949
|
+
return res;
|
|
10950
|
+
};
|
|
10951
|
+
|
|
10952
|
+
const p$1 = 134.03437499999998; // = 1.7 * 2523 / Math.pow(2, 5);
|
|
10953
|
+
const d0 = 1.6295499532821566e-11;
|
|
10954
|
+
|
|
10955
|
+
/*
|
|
10956
|
+
The encoding function is derived from Perceptual Quantizer.
|
|
10957
|
+
*/
|
|
10958
|
+
const jabPqDecode = v => {
|
|
10959
|
+
if (v < 0) return 0;
|
|
10960
|
+
let vp = Math.pow(v, 1 / p$1);
|
|
10961
|
+
return 10000 * Math.pow((C1 - vp) / (C3 * vp - C2), 1 / M1);
|
|
10962
|
+
};
|
|
10963
|
+
|
|
10964
|
+
const rel = v => v / 203;
|
|
10965
|
+
|
|
10966
|
+
const convertJabToXyz65 = ({ j, a, b, alpha }) => {
|
|
10967
|
+
if (j === undefined) j = 0;
|
|
10968
|
+
if (a === undefined) a = 0;
|
|
10969
|
+
if (b === undefined) b = 0;
|
|
10970
|
+
let i = (j + d0) / (0.44 + 0.56 * (j + d0));
|
|
10971
|
+
|
|
10972
|
+
let l = jabPqDecode(i + 0.13860504 * a + 0.058047316 * b);
|
|
10973
|
+
let m = jabPqDecode(i - 0.13860504 * a - 0.058047316 * b);
|
|
10974
|
+
let s = jabPqDecode(i - 0.096019242 * a - 0.8118919 * b);
|
|
10975
|
+
|
|
10976
|
+
let res = {
|
|
10977
|
+
mode: 'xyz65',
|
|
10978
|
+
x: rel(
|
|
10979
|
+
1.661373024652174 * l -
|
|
10980
|
+
0.914523081304348 * m +
|
|
10981
|
+
0.23136208173913045 * s
|
|
10982
|
+
),
|
|
10983
|
+
y: rel(
|
|
10984
|
+
-0.3250758611844533 * l +
|
|
10985
|
+
1.571847026732543 * m -
|
|
10986
|
+
0.21825383453227928 * s
|
|
10987
|
+
),
|
|
10988
|
+
z: rel(-0.090982811 * l - 0.31272829 * m + 1.5227666 * s)
|
|
10989
|
+
};
|
|
10990
|
+
|
|
10991
|
+
if (alpha !== undefined) {
|
|
10992
|
+
res.alpha = alpha;
|
|
10993
|
+
}
|
|
10994
|
+
|
|
10995
|
+
return res;
|
|
10996
|
+
};
|
|
10997
|
+
|
|
10998
|
+
/*
|
|
10999
|
+
Convert sRGB to JzAzBz.
|
|
11000
|
+
|
|
11001
|
+
For achromatic sRGB colors, adjust the equivalent JzAzBz color
|
|
11002
|
+
to be achromatic as well, insteading of having a very slight chroma.
|
|
11003
|
+
*/
|
|
11004
|
+
|
|
11005
|
+
|
|
11006
|
+
const convertRgbToJab = rgb => {
|
|
11007
|
+
let res = convertXyz65ToJab(convertRgbToXyz65(rgb));
|
|
11008
|
+
if (rgb.r === rgb.b && rgb.b === rgb.g) {
|
|
11009
|
+
res.a = res.b = 0;
|
|
11010
|
+
}
|
|
11011
|
+
return res;
|
|
11012
|
+
};
|
|
11013
|
+
|
|
11014
|
+
const convertJabToRgb = color => convertXyz65ToRgb(convertJabToXyz65(color));
|
|
11015
|
+
|
|
11016
|
+
/*
|
|
11017
|
+
The JzAzBz color space.
|
|
11018
|
+
|
|
11019
|
+
Based on:
|
|
11020
|
+
|
|
11021
|
+
Muhammad Safdar, Guihua Cui, Youn Jin Kim, and Ming Ronnier Luo,
|
|
11022
|
+
"Perceptually uniform color space for image signals
|
|
11023
|
+
including high dynamic range and wide gamut,"
|
|
11024
|
+
Opt. Express 25, 15131-15151 (2017)
|
|
11025
|
+
|
|
11026
|
+
https://doi.org/10.1364/OE.25.015131
|
|
11027
|
+
*/
|
|
11028
|
+
|
|
11029
|
+
|
|
11030
|
+
const definition$h = {
|
|
11031
|
+
mode: 'jab',
|
|
11032
|
+
channels: ['j', 'a', 'b', 'alpha'],
|
|
11033
|
+
|
|
11034
|
+
parse: ['--jzazbz'],
|
|
11035
|
+
serialize: '--jzazbz',
|
|
11036
|
+
|
|
11037
|
+
fromMode: {
|
|
11038
|
+
rgb: convertRgbToJab,
|
|
11039
|
+
xyz65: convertXyz65ToJab
|
|
11040
|
+
},
|
|
11041
|
+
|
|
11042
|
+
toMode: {
|
|
11043
|
+
rgb: convertJabToRgb,
|
|
11044
|
+
xyz65: convertJabToXyz65
|
|
11045
|
+
},
|
|
11046
|
+
|
|
11047
|
+
ranges: {
|
|
11048
|
+
j: [0, 0.222],
|
|
11049
|
+
a: [-0.109, 0.129],
|
|
11050
|
+
b: [-0.185, 0.134]
|
|
11051
|
+
},
|
|
11052
|
+
|
|
11053
|
+
interpolate: {
|
|
11054
|
+
j: interpolatorLinear,
|
|
11055
|
+
a: interpolatorLinear,
|
|
11056
|
+
b: interpolatorLinear,
|
|
11057
|
+
alpha: { use: interpolatorLinear, fixup: fixupAlpha }
|
|
11058
|
+
}
|
|
11059
|
+
};
|
|
11060
|
+
|
|
11061
|
+
const convertJabToJch = ({ j, a, b, alpha }) => {
|
|
11062
|
+
if (a === undefined) a = 0;
|
|
11063
|
+
if (b === undefined) b = 0;
|
|
11064
|
+
let c = Math.sqrt(a * a + b * b);
|
|
11065
|
+
let res = {
|
|
11066
|
+
mode: 'jch',
|
|
11067
|
+
j,
|
|
11068
|
+
c
|
|
11069
|
+
};
|
|
11070
|
+
if (c) {
|
|
11071
|
+
res.h = normalizeHue((Math.atan2(b, a) * 180) / Math.PI);
|
|
11072
|
+
}
|
|
11073
|
+
if (alpha !== undefined) {
|
|
11074
|
+
res.alpha = alpha;
|
|
11075
|
+
}
|
|
11076
|
+
return res;
|
|
11077
|
+
};
|
|
11078
|
+
|
|
11079
|
+
const convertJchToJab = ({ j, c, h, alpha }) => {
|
|
11080
|
+
if (h === undefined) h = 0;
|
|
11081
|
+
let res = {
|
|
11082
|
+
mode: 'jab',
|
|
11083
|
+
j,
|
|
11084
|
+
a: c ? c * Math.cos((h / 180) * Math.PI) : 0,
|
|
11085
|
+
b: c ? c * Math.sin((h / 180) * Math.PI) : 0
|
|
11086
|
+
};
|
|
11087
|
+
if (alpha !== undefined) res.alpha = alpha;
|
|
11088
|
+
return res;
|
|
11089
|
+
};
|
|
11090
|
+
|
|
11091
|
+
const definition$g = {
|
|
11092
|
+
mode: 'jch',
|
|
11093
|
+
|
|
11094
|
+
parse: ['--jzczhz'],
|
|
11095
|
+
serialize: '--jzczhz',
|
|
11096
|
+
|
|
11097
|
+
toMode: {
|
|
11098
|
+
jab: convertJchToJab,
|
|
11099
|
+
rgb: c => convertJabToRgb(convertJchToJab(c))
|
|
11100
|
+
},
|
|
11101
|
+
|
|
11102
|
+
fromMode: {
|
|
11103
|
+
rgb: c => convertJabToJch(convertRgbToJab(c)),
|
|
11104
|
+
jab: convertJabToJch
|
|
11105
|
+
},
|
|
11106
|
+
|
|
11107
|
+
channels: ['j', 'c', 'h', 'alpha'],
|
|
11108
|
+
|
|
11109
|
+
ranges: {
|
|
11110
|
+
j: [0, 0.221],
|
|
11111
|
+
c: [0, 0.19],
|
|
11112
|
+
h: [0, 360]
|
|
11113
|
+
},
|
|
11114
|
+
|
|
11115
|
+
interpolate: {
|
|
11116
|
+
h: { use: interpolatorLinear, fixup: fixupHueShorter },
|
|
11117
|
+
c: interpolatorLinear,
|
|
11118
|
+
j: interpolatorLinear,
|
|
11119
|
+
alpha: { use: interpolatorLinear, fixup: fixupAlpha }
|
|
11120
|
+
},
|
|
11121
|
+
|
|
11122
|
+
difference: {
|
|
11123
|
+
h: differenceHueChroma
|
|
11124
|
+
},
|
|
11125
|
+
|
|
11126
|
+
average: {
|
|
11127
|
+
h: averageAngle
|
|
11128
|
+
}
|
|
11129
|
+
};
|
|
11130
|
+
|
|
11131
|
+
const k$2 = Math.pow(29, 3) / Math.pow(3, 3);
|
|
11132
|
+
const e = Math.pow(6, 3) / Math.pow(29, 3);
|
|
11133
|
+
|
|
11134
|
+
let fn = v => (Math.pow(v, 3) > e ? Math.pow(v, 3) : (116 * v - 16) / k$2);
|
|
11135
|
+
|
|
11136
|
+
const convertLabToXyz50 = ({ l, a, b, alpha }) => {
|
|
11137
|
+
if (l === undefined) l = 0;
|
|
11138
|
+
if (a === undefined) a = 0;
|
|
11139
|
+
if (b === undefined) b = 0;
|
|
11140
|
+
let fy = (l + 16) / 116;
|
|
11141
|
+
let fx = a / 500 + fy;
|
|
11142
|
+
let fz = fy - b / 200;
|
|
11143
|
+
|
|
11144
|
+
let res = {
|
|
11145
|
+
mode: 'xyz50',
|
|
11146
|
+
x: fn(fx) * D50.X,
|
|
11147
|
+
y: fn(fy) * D50.Y,
|
|
11148
|
+
z: fn(fz) * D50.Z
|
|
11149
|
+
};
|
|
11150
|
+
|
|
11151
|
+
if (alpha !== undefined) {
|
|
11152
|
+
res.alpha = alpha;
|
|
11153
|
+
}
|
|
11154
|
+
|
|
11155
|
+
return res;
|
|
11156
|
+
};
|
|
11157
|
+
|
|
11158
|
+
/*
|
|
11159
|
+
CIE XYZ D50 values to sRGB.
|
|
11160
|
+
|
|
11161
|
+
References:
|
|
11162
|
+
* https://drafts.csswg.org/css-color/#color-conversion-code
|
|
11163
|
+
* http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
|
|
11164
|
+
*/
|
|
11165
|
+
|
|
11166
|
+
|
|
11167
|
+
const convertXyz50ToRgb = ({ x, y, z, alpha }) => {
|
|
11168
|
+
if (x === undefined) x = 0;
|
|
11169
|
+
if (y === undefined) y = 0;
|
|
11170
|
+
if (z === undefined) z = 0;
|
|
11171
|
+
let res = convertLrgbToRgb({
|
|
11172
|
+
r:
|
|
11173
|
+
x * 3.1341359569958707 -
|
|
11174
|
+
y * 1.6173863321612538 -
|
|
11175
|
+
0.4906619460083532 * z,
|
|
11176
|
+
g:
|
|
11177
|
+
x * -0.978795502912089 +
|
|
11178
|
+
y * 1.916254567259524 +
|
|
11179
|
+
0.03344273116131949 * z,
|
|
11180
|
+
b:
|
|
11181
|
+
x * 0.07195537988411677 -
|
|
11182
|
+
y * 0.2289768264158322 +
|
|
11183
|
+
1.405386058324125 * z
|
|
11184
|
+
});
|
|
11185
|
+
if (alpha !== undefined) {
|
|
11186
|
+
res.alpha = alpha;
|
|
11187
|
+
}
|
|
11188
|
+
return res;
|
|
11189
|
+
};
|
|
11190
|
+
|
|
11191
|
+
const convertLabToRgb = lab => convertXyz50ToRgb(convertLabToXyz50(lab));
|
|
11192
|
+
|
|
11193
|
+
/*
|
|
11194
|
+
Convert sRGB values to CIE XYZ D50
|
|
11195
|
+
|
|
11196
|
+
References:
|
|
11197
|
+
* https://drafts.csswg.org/css-color/#color-conversion-code
|
|
11198
|
+
* http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
|
|
11199
|
+
|
|
11200
|
+
*/
|
|
11201
|
+
|
|
11202
|
+
|
|
11203
|
+
const convertRgbToXyz50 = rgb => {
|
|
11204
|
+
let { r, g, b, alpha } = convertRgbToLrgb(rgb);
|
|
11205
|
+
let res = {
|
|
11206
|
+
mode: 'xyz50',
|
|
11207
|
+
x:
|
|
11208
|
+
0.436065742824811 * r +
|
|
11209
|
+
0.3851514688337912 * g +
|
|
11210
|
+
0.14307845442264197 * b,
|
|
11211
|
+
y:
|
|
11212
|
+
0.22249319175623702 * r +
|
|
11213
|
+
0.7168870538238823 * g +
|
|
11214
|
+
0.06061979053616537 * b,
|
|
11215
|
+
z:
|
|
11216
|
+
0.013923904500943465 * r +
|
|
11217
|
+
0.09708128566574634 * g +
|
|
11218
|
+
0.7140993584005155 * b
|
|
11219
|
+
};
|
|
11220
|
+
if (alpha !== undefined) {
|
|
11221
|
+
res.alpha = alpha;
|
|
11222
|
+
}
|
|
11223
|
+
return res;
|
|
11224
|
+
};
|
|
11225
|
+
|
|
11226
|
+
const f = value => (value > e ? Math.cbrt(value) : (k$2 * value + 16) / 116);
|
|
11227
|
+
|
|
11228
|
+
const convertXyz50ToLab = ({ x, y, z, alpha }) => {
|
|
11229
|
+
if (x === undefined) x = 0;
|
|
11230
|
+
if (y === undefined) y = 0;
|
|
11231
|
+
if (z === undefined) z = 0;
|
|
11232
|
+
let f0 = f(x / D50.X);
|
|
11233
|
+
let f1 = f(y / D50.Y);
|
|
11234
|
+
let f2 = f(z / D50.Z);
|
|
11235
|
+
|
|
11236
|
+
let res = {
|
|
11237
|
+
mode: 'lab',
|
|
11238
|
+
l: 116 * f1 - 16,
|
|
11239
|
+
a: 500 * (f0 - f1),
|
|
11240
|
+
b: 200 * (f1 - f2)
|
|
11241
|
+
};
|
|
11242
|
+
|
|
11243
|
+
if (alpha !== undefined) {
|
|
11244
|
+
res.alpha = alpha;
|
|
11245
|
+
}
|
|
11246
|
+
|
|
11247
|
+
return res;
|
|
11248
|
+
};
|
|
11249
|
+
|
|
11250
|
+
const convertRgbToLab = rgb => {
|
|
11251
|
+
let res = convertXyz50ToLab(convertRgbToXyz50(rgb));
|
|
11252
|
+
|
|
11253
|
+
// Fixes achromatic RGB colors having a _slight_ chroma due to floating-point errors
|
|
11254
|
+
// and approximated computations in sRGB <-> CIELab.
|
|
11255
|
+
// See: https://github.com/d3/d3-color/pull/46
|
|
11256
|
+
if (rgb.r === rgb.b && rgb.b === rgb.g) {
|
|
11257
|
+
res.a = res.b = 0;
|
|
11258
|
+
}
|
|
11259
|
+
return res;
|
|
11260
|
+
};
|
|
11261
|
+
|
|
11262
|
+
function parseLab(color, parsed) {
|
|
11263
|
+
if (!parsed || parsed[0] !== 'lab') {
|
|
11264
|
+
return undefined;
|
|
11265
|
+
}
|
|
11266
|
+
const res = { mode: 'lab' };
|
|
11267
|
+
const [, l, a, b, alpha] = parsed;
|
|
11268
|
+
if (l.type === Tok.Hue || a.type === Tok.Hue || b.type === Tok.Hue) {
|
|
11269
|
+
return undefined;
|
|
11270
|
+
}
|
|
11271
|
+
if (l.type !== Tok.None) {
|
|
11272
|
+
res.l = Math.min(Math.max(0, l.value), 100);
|
|
11273
|
+
}
|
|
11274
|
+
if (a.type !== Tok.None) {
|
|
11275
|
+
res.a = a.type === Tok.Number ? a.value : (a.value * 125) / 100;
|
|
11276
|
+
}
|
|
11277
|
+
if (b.type !== Tok.None) {
|
|
11278
|
+
res.b = b.type === Tok.Number ? b.value : (b.value * 125) / 100;
|
|
11279
|
+
}
|
|
11280
|
+
if (alpha.type !== Tok.None) {
|
|
11281
|
+
res.alpha = Math.min(
|
|
11282
|
+
1,
|
|
11283
|
+
Math.max(
|
|
11284
|
+
0,
|
|
11285
|
+
alpha.type === Tok.Number ? alpha.value : alpha.value / 100
|
|
11286
|
+
)
|
|
11287
|
+
);
|
|
11288
|
+
}
|
|
11289
|
+
|
|
11290
|
+
return res;
|
|
11291
|
+
}
|
|
11292
|
+
|
|
11293
|
+
const definition$f = {
|
|
11294
|
+
mode: 'lab',
|
|
11295
|
+
|
|
11296
|
+
toMode: {
|
|
11297
|
+
xyz50: convertLabToXyz50,
|
|
11298
|
+
rgb: convertLabToRgb
|
|
11299
|
+
},
|
|
11300
|
+
|
|
11301
|
+
fromMode: {
|
|
11302
|
+
xyz50: convertXyz50ToLab,
|
|
11303
|
+
rgb: convertRgbToLab
|
|
11304
|
+
},
|
|
11305
|
+
|
|
11306
|
+
channels: ['l', 'a', 'b', 'alpha'],
|
|
11307
|
+
|
|
11308
|
+
ranges: {
|
|
11309
|
+
l: [0, 100],
|
|
11310
|
+
a: [-125, 125],
|
|
11311
|
+
b: [-125, 125]
|
|
11312
|
+
},
|
|
11313
|
+
|
|
11314
|
+
parse: [parseLab],
|
|
11315
|
+
serialize: c =>
|
|
11316
|
+
`lab(${c.l !== undefined ? c.l : 'none'} ${
|
|
11317
|
+
c.a !== undefined ? c.a : 'none'
|
|
11318
|
+
} ${c.b !== undefined ? c.b : 'none'}${
|
|
11319
|
+
c.alpha < 1 ? ` / ${c.alpha}` : ''
|
|
11320
|
+
})`,
|
|
11321
|
+
|
|
11322
|
+
interpolate: {
|
|
11323
|
+
l: interpolatorLinear,
|
|
11324
|
+
a: interpolatorLinear,
|
|
11325
|
+
b: interpolatorLinear,
|
|
11326
|
+
alpha: { use: interpolatorLinear, fixup: fixupAlpha }
|
|
11327
|
+
}
|
|
11328
|
+
};
|
|
11329
|
+
|
|
11330
|
+
const definition$e = {
|
|
11331
|
+
...definition$f,
|
|
11332
|
+
mode: 'lab65',
|
|
11333
|
+
|
|
11334
|
+
parse: ['--lab-d65'],
|
|
11335
|
+
serialize: '--lab-d65',
|
|
11336
|
+
|
|
11337
|
+
toMode: {
|
|
11338
|
+
xyz65: convertLab65ToXyz65,
|
|
11339
|
+
rgb: convertLab65ToRgb
|
|
11340
|
+
},
|
|
11341
|
+
|
|
11342
|
+
fromMode: {
|
|
11343
|
+
xyz65: convertXyz65ToLab65,
|
|
11344
|
+
rgb: convertRgbToLab65
|
|
11345
|
+
},
|
|
11346
|
+
|
|
11347
|
+
ranges: {
|
|
11348
|
+
l: [0, 100],
|
|
11349
|
+
a: [-125, 125],
|
|
11350
|
+
b: [-125, 125]
|
|
11351
|
+
}
|
|
11352
|
+
};
|
|
11353
|
+
|
|
11354
|
+
function parseLch(color, parsed) {
|
|
11355
|
+
if (!parsed || parsed[0] !== 'lch') {
|
|
11356
|
+
return undefined;
|
|
11357
|
+
}
|
|
11358
|
+
const res = { mode: 'lch' };
|
|
11359
|
+
const [, l, c, h, alpha] = parsed;
|
|
11360
|
+
if (l.type !== Tok.None) {
|
|
11361
|
+
if (l.type === Tok.Hue) {
|
|
11362
|
+
return undefined;
|
|
11363
|
+
}
|
|
11364
|
+
res.l = Math.min(Math.max(0, l.value), 100);
|
|
11365
|
+
}
|
|
11366
|
+
if (c.type !== Tok.None) {
|
|
11367
|
+
res.c = Math.max(
|
|
11368
|
+
0,
|
|
11369
|
+
c.type === Tok.Number ? c.value : (c.value * 150) / 100
|
|
11370
|
+
);
|
|
11371
|
+
}
|
|
11372
|
+
if (h.type !== Tok.None) {
|
|
11373
|
+
if (h.type === Tok.Percentage) {
|
|
11374
|
+
return undefined;
|
|
11375
|
+
}
|
|
11376
|
+
res.h = h.value;
|
|
11377
|
+
}
|
|
11378
|
+
if (alpha.type !== Tok.None) {
|
|
11379
|
+
res.alpha = Math.min(
|
|
11380
|
+
1,
|
|
11381
|
+
Math.max(
|
|
11382
|
+
0,
|
|
11383
|
+
alpha.type === Tok.Number ? alpha.value : alpha.value / 100
|
|
11384
|
+
)
|
|
11385
|
+
);
|
|
11386
|
+
}
|
|
11387
|
+
|
|
11388
|
+
return res;
|
|
11389
|
+
}
|
|
11390
|
+
|
|
11391
|
+
const definition$d = {
|
|
11392
|
+
mode: 'lch',
|
|
11393
|
+
|
|
11394
|
+
toMode: {
|
|
11395
|
+
lab: convertLchToLab,
|
|
11396
|
+
rgb: c => convertLabToRgb(convertLchToLab(c))
|
|
11397
|
+
},
|
|
11398
|
+
|
|
11399
|
+
fromMode: {
|
|
11400
|
+
rgb: c => convertLabToLch(convertRgbToLab(c)),
|
|
11401
|
+
lab: convertLabToLch
|
|
11402
|
+
},
|
|
11403
|
+
|
|
11404
|
+
channels: ['l', 'c', 'h', 'alpha'],
|
|
11405
|
+
|
|
11406
|
+
ranges: {
|
|
11407
|
+
l: [0, 100],
|
|
11408
|
+
c: [0, 150],
|
|
11409
|
+
h: [0, 360]
|
|
11410
|
+
},
|
|
11411
|
+
|
|
11412
|
+
parse: [parseLch],
|
|
11413
|
+
serialize: c =>
|
|
11414
|
+
`lch(${c.l !== undefined ? c.l : 'none'} ${
|
|
11415
|
+
c.c !== undefined ? c.c : 'none'
|
|
11416
|
+
} ${c.h !== undefined ? c.h : 'none'}${
|
|
11417
|
+
c.alpha < 1 ? ` / ${c.alpha}` : ''
|
|
11418
|
+
})`,
|
|
11419
|
+
|
|
11420
|
+
interpolate: {
|
|
11421
|
+
h: { use: interpolatorLinear, fixup: fixupHueShorter },
|
|
11422
|
+
c: interpolatorLinear,
|
|
11423
|
+
l: interpolatorLinear,
|
|
11424
|
+
alpha: { use: interpolatorLinear, fixup: fixupAlpha }
|
|
11425
|
+
},
|
|
11426
|
+
|
|
11427
|
+
difference: {
|
|
11428
|
+
h: differenceHueChroma
|
|
11429
|
+
},
|
|
11430
|
+
|
|
11431
|
+
average: {
|
|
11432
|
+
h: averageAngle
|
|
11433
|
+
}
|
|
11434
|
+
};
|
|
11435
|
+
|
|
11436
|
+
const definition$c = {
|
|
11437
|
+
...definition$d,
|
|
11438
|
+
mode: 'lch65',
|
|
11439
|
+
|
|
11440
|
+
parse: ['--lch-d65'],
|
|
11441
|
+
serialize: '--lch-d65',
|
|
11442
|
+
|
|
11443
|
+
toMode: {
|
|
11444
|
+
lab65: c => convertLchToLab(c, 'lab65'),
|
|
11445
|
+
rgb: c => convertLab65ToRgb(convertLchToLab(c, 'lab65'))
|
|
11446
|
+
},
|
|
11447
|
+
|
|
11448
|
+
fromMode: {
|
|
11449
|
+
rgb: c => convertLabToLch(convertRgbToLab65(c), 'lch65'),
|
|
11450
|
+
lab65: c => convertLabToLch(c, 'lch65')
|
|
11451
|
+
},
|
|
11452
|
+
|
|
11453
|
+
ranges: {
|
|
11454
|
+
l: [0, 100],
|
|
11455
|
+
c: [0, 150],
|
|
11456
|
+
h: [0, 360]
|
|
11457
|
+
}
|
|
11458
|
+
};
|
|
11459
|
+
|
|
11460
|
+
const convertLuvToLchuv = ({ l, u, v, alpha }) => {
|
|
11461
|
+
if (u === undefined) u = 0;
|
|
11462
|
+
if (v === undefined) v = 0;
|
|
11463
|
+
let c = Math.sqrt(u * u + v * v);
|
|
11464
|
+
let res = {
|
|
11465
|
+
mode: 'lchuv',
|
|
11466
|
+
l: l,
|
|
11467
|
+
c: c
|
|
11468
|
+
};
|
|
11469
|
+
if (c) {
|
|
11470
|
+
res.h = normalizeHue((Math.atan2(v, u) * 180) / Math.PI);
|
|
11471
|
+
}
|
|
11472
|
+
if (alpha !== undefined) {
|
|
11473
|
+
res.alpha = alpha;
|
|
11474
|
+
}
|
|
11475
|
+
return res;
|
|
11476
|
+
};
|
|
11477
|
+
|
|
11478
|
+
const convertLchuvToLuv = ({ l, c, h, alpha }) => {
|
|
11479
|
+
if (h === undefined) h = 0;
|
|
11480
|
+
let res = {
|
|
11481
|
+
mode: 'luv',
|
|
11482
|
+
l: l,
|
|
11483
|
+
u: c ? c * Math.cos((h / 180) * Math.PI) : 0,
|
|
11484
|
+
v: c ? c * Math.sin((h / 180) * Math.PI) : 0
|
|
11485
|
+
};
|
|
11486
|
+
if (alpha !== undefined) {
|
|
11487
|
+
res.alpha = alpha;
|
|
11488
|
+
}
|
|
11489
|
+
return res;
|
|
11490
|
+
};
|
|
11491
|
+
|
|
11492
|
+
const u_fn$1 = (x, y, z) => (4 * x) / (x + 15 * y + 3 * z);
|
|
11493
|
+
const v_fn$1 = (x, y, z) => (9 * y) / (x + 15 * y + 3 * z);
|
|
11494
|
+
|
|
11495
|
+
const un$1 = u_fn$1(D50.X, D50.Y, D50.Z);
|
|
11496
|
+
const vn$1 = v_fn$1(D50.X, D50.Y, D50.Z);
|
|
11497
|
+
|
|
11498
|
+
const l_fn = value => (value <= e ? k$2 * value : 116 * Math.cbrt(value) - 16);
|
|
11499
|
+
|
|
11500
|
+
const convertXyz50ToLuv = ({ x, y, z, alpha }) => {
|
|
11501
|
+
if (x === undefined) x = 0;
|
|
11502
|
+
if (y === undefined) y = 0;
|
|
11503
|
+
if (z === undefined) z = 0;
|
|
11504
|
+
let l = l_fn(y / D50.Y);
|
|
11505
|
+
let u = u_fn$1(x, y, z);
|
|
11506
|
+
let v = v_fn$1(x, y, z);
|
|
11507
|
+
|
|
11508
|
+
// guard against NaNs produced by `xyz(0 0 0)` black
|
|
11509
|
+
if (!isFinite(u) || !isFinite(v)) {
|
|
11510
|
+
l = u = v = 0;
|
|
11511
|
+
} else {
|
|
11512
|
+
u = 13 * l * (u - un$1);
|
|
11513
|
+
v = 13 * l * (v - vn$1);
|
|
11514
|
+
}
|
|
11515
|
+
|
|
11516
|
+
let res = {
|
|
11517
|
+
mode: 'luv',
|
|
11518
|
+
l,
|
|
11519
|
+
u,
|
|
11520
|
+
v
|
|
11521
|
+
};
|
|
11522
|
+
|
|
11523
|
+
if (alpha !== undefined) {
|
|
11524
|
+
res.alpha = alpha;
|
|
11525
|
+
}
|
|
11526
|
+
|
|
11527
|
+
return res;
|
|
11528
|
+
};
|
|
11529
|
+
|
|
11530
|
+
const u_fn = (x, y, z) => (4 * x) / (x + 15 * y + 3 * z);
|
|
11531
|
+
const v_fn = (x, y, z) => (9 * y) / (x + 15 * y + 3 * z);
|
|
11532
|
+
|
|
11533
|
+
const un = u_fn(D50.X, D50.Y, D50.Z);
|
|
11534
|
+
const vn = v_fn(D50.X, D50.Y, D50.Z);
|
|
11535
|
+
|
|
11536
|
+
const convertLuvToXyz50 = ({ l, u, v, alpha }) => {
|
|
11537
|
+
if (l === undefined) l = 0;
|
|
11538
|
+
if (l === 0) {
|
|
11539
|
+
return { mode: 'xyz50', x: 0, y: 0, z: 0 };
|
|
11540
|
+
}
|
|
11541
|
+
|
|
11542
|
+
if (u === undefined) u = 0;
|
|
11543
|
+
if (v === undefined) v = 0;
|
|
11544
|
+
|
|
11545
|
+
let up = u / (13 * l) + un;
|
|
11546
|
+
let vp = v / (13 * l) + vn;
|
|
11547
|
+
let y = D50.Y * (l <= 8 ? l / k$2 : Math.pow((l + 16) / 116, 3));
|
|
11548
|
+
let x = (y * (9 * up)) / (4 * vp);
|
|
11549
|
+
let z = (y * (12 - 3 * up - 20 * vp)) / (4 * vp);
|
|
11550
|
+
|
|
11551
|
+
let res = { mode: 'xyz50', x, y, z };
|
|
11552
|
+
if (alpha !== undefined) {
|
|
11553
|
+
res.alpha = alpha;
|
|
11554
|
+
}
|
|
11555
|
+
|
|
11556
|
+
return res;
|
|
11557
|
+
};
|
|
11558
|
+
|
|
11559
|
+
/*
|
|
11560
|
+
CIELChuv color space
|
|
11561
|
+
--------------------
|
|
11562
|
+
|
|
11563
|
+
Reference:
|
|
11564
|
+
|
|
11565
|
+
https://en.wikipedia.org/wiki/CIELUV
|
|
11566
|
+
*/
|
|
11567
|
+
|
|
11568
|
+
|
|
11569
|
+
const convertRgbToLchuv = rgb =>
|
|
11570
|
+
convertLuvToLchuv(convertXyz50ToLuv(convertRgbToXyz50(rgb)));
|
|
11571
|
+
const convertLchuvToRgb = lchuv =>
|
|
11572
|
+
convertXyz50ToRgb(convertLuvToXyz50(convertLchuvToLuv(lchuv)));
|
|
11573
|
+
|
|
11574
|
+
const definition$b = {
|
|
11575
|
+
mode: 'lchuv',
|
|
11576
|
+
|
|
11577
|
+
toMode: {
|
|
11578
|
+
luv: convertLchuvToLuv,
|
|
11579
|
+
rgb: convertLchuvToRgb
|
|
11580
|
+
},
|
|
11581
|
+
|
|
11582
|
+
fromMode: {
|
|
11583
|
+
rgb: convertRgbToLchuv,
|
|
11584
|
+
luv: convertLuvToLchuv
|
|
11585
|
+
},
|
|
11586
|
+
|
|
11587
|
+
channels: ['l', 'c', 'h', 'alpha'],
|
|
11588
|
+
|
|
11589
|
+
parse: ['--lchuv'],
|
|
11590
|
+
serialize: '--lchuv',
|
|
11591
|
+
|
|
11592
|
+
ranges: {
|
|
11593
|
+
l: [0, 100],
|
|
11594
|
+
c: [0, 176.956],
|
|
11595
|
+
h: [0, 360]
|
|
11596
|
+
},
|
|
11597
|
+
|
|
11598
|
+
interpolate: {
|
|
11599
|
+
h: { use: interpolatorLinear, fixup: fixupHueShorter },
|
|
11600
|
+
c: interpolatorLinear,
|
|
11601
|
+
l: interpolatorLinear,
|
|
11602
|
+
alpha: { use: interpolatorLinear, fixup: fixupAlpha }
|
|
11603
|
+
},
|
|
11604
|
+
|
|
11605
|
+
difference: {
|
|
11606
|
+
h: differenceHueChroma
|
|
11607
|
+
},
|
|
11608
|
+
|
|
11609
|
+
average: {
|
|
11610
|
+
h: averageAngle
|
|
11611
|
+
}
|
|
11612
|
+
};
|
|
11613
|
+
|
|
11614
|
+
const definition$a = {
|
|
11615
|
+
...definition$r,
|
|
11616
|
+
mode: 'lrgb',
|
|
11617
|
+
|
|
11618
|
+
toMode: {
|
|
11619
|
+
rgb: convertLrgbToRgb
|
|
11620
|
+
},
|
|
11621
|
+
|
|
11622
|
+
fromMode: {
|
|
11623
|
+
rgb: convertRgbToLrgb
|
|
11624
|
+
},
|
|
11625
|
+
|
|
11626
|
+
parse: ['srgb-linear'],
|
|
11627
|
+
serialize: 'srgb-linear'
|
|
11628
|
+
};
|
|
11629
|
+
|
|
11630
|
+
/*
|
|
11631
|
+
CIELUV color space
|
|
11632
|
+
------------------
|
|
11633
|
+
|
|
11634
|
+
Reference:
|
|
11635
|
+
|
|
11636
|
+
https://en.wikipedia.org/wiki/CIELUV
|
|
11637
|
+
*/
|
|
11638
|
+
|
|
11639
|
+
|
|
11640
|
+
const definition$9 = {
|
|
11641
|
+
mode: 'luv',
|
|
11642
|
+
|
|
11643
|
+
toMode: {
|
|
11644
|
+
xyz50: convertLuvToXyz50,
|
|
11645
|
+
rgb: luv => convertXyz50ToRgb(convertLuvToXyz50(luv))
|
|
11646
|
+
},
|
|
11647
|
+
|
|
11648
|
+
fromMode: {
|
|
11649
|
+
xyz50: convertXyz50ToLuv,
|
|
11650
|
+
rgb: rgb => convertXyz50ToLuv(convertRgbToXyz50(rgb))
|
|
11651
|
+
},
|
|
11652
|
+
|
|
11653
|
+
channels: ['l', 'u', 'v', 'alpha'],
|
|
11654
|
+
|
|
11655
|
+
parse: ['--luv'],
|
|
11656
|
+
serialize: '--luv',
|
|
11657
|
+
|
|
11658
|
+
ranges: {
|
|
11659
|
+
l: [0, 100],
|
|
11660
|
+
u: [-84.936, 175.042],
|
|
11661
|
+
v: [-125.882, 87.243]
|
|
11662
|
+
},
|
|
11663
|
+
|
|
11664
|
+
interpolate: {
|
|
11665
|
+
l: interpolatorLinear,
|
|
11666
|
+
u: interpolatorLinear,
|
|
11667
|
+
v: interpolatorLinear,
|
|
11668
|
+
alpha: { use: interpolatorLinear, fixup: fixupAlpha }
|
|
11669
|
+
}
|
|
11670
|
+
};
|
|
11671
|
+
|
|
11672
|
+
const convertLrgbToOklab = ({ r, g, b, alpha }) => {
|
|
11673
|
+
if (r === undefined) r = 0;
|
|
11674
|
+
if (g === undefined) g = 0;
|
|
11675
|
+
if (b === undefined) b = 0;
|
|
11676
|
+
|
|
11677
|
+
let L = Math.cbrt(
|
|
11678
|
+
0.412221469470763 * r + 0.5363325372617348 * g + 0.0514459932675022 * b
|
|
11679
|
+
);
|
|
11680
|
+
let M = Math.cbrt(
|
|
11681
|
+
0.2119034958178252 * r + 0.6806995506452344 * g + 0.1073969535369406 * b
|
|
11682
|
+
);
|
|
11683
|
+
let S = Math.cbrt(
|
|
11684
|
+
0.0883024591900564 * r + 0.2817188391361215 * g + 0.6299787016738222 * b
|
|
11685
|
+
);
|
|
11686
|
+
|
|
11687
|
+
let res = {
|
|
11688
|
+
mode: 'oklab',
|
|
11689
|
+
l:
|
|
11690
|
+
0.210454268309314 * L +
|
|
11691
|
+
0.7936177747023054 * M -
|
|
11692
|
+
0.0040720430116193 * S,
|
|
11693
|
+
a:
|
|
11694
|
+
1.9779985324311684 * L -
|
|
11695
|
+
2.4285922420485799 * M +
|
|
11696
|
+
0.450593709617411 * S,
|
|
11697
|
+
b:
|
|
11698
|
+
0.0259040424655478 * L +
|
|
11699
|
+
0.7827717124575296 * M -
|
|
11700
|
+
0.8086757549230774 * S
|
|
11701
|
+
};
|
|
11702
|
+
|
|
11703
|
+
if (alpha !== undefined) {
|
|
11704
|
+
res.alpha = alpha;
|
|
11705
|
+
}
|
|
11706
|
+
|
|
11707
|
+
return res;
|
|
11708
|
+
};
|
|
11709
|
+
|
|
11710
|
+
const convertRgbToOklab = rgb => {
|
|
11711
|
+
let res = convertLrgbToOklab(convertRgbToLrgb(rgb));
|
|
11712
|
+
if (rgb.r === rgb.b && rgb.b === rgb.g) {
|
|
11713
|
+
res.a = res.b = 0;
|
|
11714
|
+
}
|
|
11715
|
+
return res;
|
|
11716
|
+
};
|
|
11717
|
+
|
|
11718
|
+
const convertOklabToLrgb = ({ l, a, b, alpha }) => {
|
|
11719
|
+
if (l === undefined) l = 0;
|
|
11720
|
+
if (a === undefined) a = 0;
|
|
11721
|
+
if (b === undefined) b = 0;
|
|
11722
|
+
|
|
11723
|
+
let L = Math.pow(l + 0.3963377773761749 * a + 0.2158037573099136 * b, 3);
|
|
11724
|
+
let M = Math.pow(l - 0.1055613458156586 * a - 0.0638541728258133 * b, 3);
|
|
11725
|
+
let S = Math.pow(l - 0.0894841775298119 * a - 1.2914855480194092 * b, 3);
|
|
11726
|
+
|
|
11727
|
+
let res = {
|
|
11728
|
+
mode: 'lrgb',
|
|
11729
|
+
r:
|
|
11730
|
+
4.0767416360759574 * L -
|
|
11731
|
+
3.3077115392580616 * M +
|
|
11732
|
+
0.2309699031821044 * S,
|
|
11733
|
+
g:
|
|
11734
|
+
-1.2684379732850317 * L +
|
|
11735
|
+
2.6097573492876887 * M -
|
|
11736
|
+
0.3413193760026573 * S,
|
|
11737
|
+
b:
|
|
11738
|
+
-0.0041960761386756 * L -
|
|
11739
|
+
0.7034186179359362 * M +
|
|
11740
|
+
1.7076146940746117 * S
|
|
11741
|
+
};
|
|
11742
|
+
|
|
11743
|
+
if (alpha !== undefined) {
|
|
11744
|
+
res.alpha = alpha;
|
|
11745
|
+
}
|
|
11746
|
+
|
|
11747
|
+
return res;
|
|
11748
|
+
};
|
|
11749
|
+
|
|
11750
|
+
const convertOklabToRgb = c => convertLrgbToRgb(convertOklabToLrgb(c));
|
|
11751
|
+
|
|
11752
|
+
/*
|
|
11753
|
+
Adapted from code by Björn Ottosson,
|
|
11754
|
+
released under the MIT license:
|
|
11755
|
+
|
|
11756
|
+
Copyright (c) 2021 Björn Ottosson
|
|
11757
|
+
|
|
11758
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
|
11759
|
+
this software and associated documentation files (the "Software"), to deal in
|
|
11760
|
+
the Software without restriction, including without limitation the rights to
|
|
11761
|
+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
|
|
11762
|
+
of the Software, and to permit persons to whom the Software is furnished to do
|
|
11763
|
+
so, subject to the following conditions:
|
|
11764
|
+
|
|
11765
|
+
The above copyright notice and this permission notice shall be included in all
|
|
11766
|
+
copies or substantial portions of the Software.
|
|
11767
|
+
|
|
11768
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
11769
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
11770
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
11771
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
11772
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
11773
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
11774
|
+
SOFTWARE.
|
|
11775
|
+
*/
|
|
11776
|
+
|
|
11777
|
+
|
|
11778
|
+
function toe(x) {
|
|
11779
|
+
const k_1 = 0.206;
|
|
11780
|
+
const k_2 = 0.03;
|
|
11781
|
+
const k_3 = (1 + k_1) / (1 + k_2);
|
|
11782
|
+
return (
|
|
11783
|
+
0.5 *
|
|
11784
|
+
(k_3 * x -
|
|
11785
|
+
k_1 +
|
|
11786
|
+
Math.sqrt((k_3 * x - k_1) * (k_3 * x - k_1) + 4 * k_2 * k_3 * x))
|
|
11787
|
+
);
|
|
11788
|
+
}
|
|
11789
|
+
|
|
11790
|
+
function toe_inv(x) {
|
|
11791
|
+
const k_1 = 0.206;
|
|
11792
|
+
const k_2 = 0.03;
|
|
11793
|
+
const k_3 = (1 + k_1) / (1 + k_2);
|
|
11794
|
+
return (x * x + k_1 * x) / (k_3 * (x + k_2));
|
|
11795
|
+
}
|
|
11796
|
+
|
|
11797
|
+
// Finds the maximum saturation possible for a given hue that fits in sRGB
|
|
11798
|
+
// Saturation here is defined as S = C/L
|
|
11799
|
+
// a and b must be normalized so a^2 + b^2 == 1
|
|
11800
|
+
function compute_max_saturation(a, b) {
|
|
11801
|
+
// Max saturation will be when one of r, g or b goes below zero.
|
|
11802
|
+
|
|
11803
|
+
// Select different coefficients depending on which component goes below zero first
|
|
11804
|
+
let k0, k1, k2, k3, k4, wl, wm, ws;
|
|
11805
|
+
|
|
11806
|
+
if (-1.88170328 * a - 0.80936493 * b > 1) {
|
|
11807
|
+
// Red component
|
|
11808
|
+
k0 = 1.19086277;
|
|
11809
|
+
k1 = 1.76576728;
|
|
11810
|
+
k2 = 0.59662641;
|
|
11811
|
+
k3 = 0.75515197;
|
|
11812
|
+
k4 = 0.56771245;
|
|
11813
|
+
wl = 4.0767416621;
|
|
11814
|
+
wm = -3.3077115913;
|
|
11815
|
+
ws = 0.2309699292;
|
|
11816
|
+
} else if (1.81444104 * a - 1.19445276 * b > 1) {
|
|
11817
|
+
// Green component
|
|
11818
|
+
k0 = 0.73956515;
|
|
11819
|
+
k1 = -0.45954404;
|
|
11820
|
+
k2 = 0.08285427;
|
|
11821
|
+
k3 = 0.1254107;
|
|
11822
|
+
k4 = 0.14503204;
|
|
11823
|
+
wl = -1.2684380046;
|
|
11824
|
+
wm = 2.6097574011;
|
|
11825
|
+
ws = -0.3413193965;
|
|
11826
|
+
} else {
|
|
11827
|
+
// Blue component
|
|
11828
|
+
k0 = 1.35733652;
|
|
11829
|
+
k1 = -915799e-8;
|
|
11830
|
+
k2 = -1.1513021;
|
|
11831
|
+
k3 = -0.50559606;
|
|
11832
|
+
k4 = 692167e-8;
|
|
11833
|
+
wl = -0.0041960863;
|
|
11834
|
+
wm = -0.7034186147;
|
|
11835
|
+
ws = 1.707614701;
|
|
11836
|
+
}
|
|
11837
|
+
|
|
11838
|
+
// Approximate max saturation using a polynomial:
|
|
11839
|
+
let S = k0 + k1 * a + k2 * b + k3 * a * a + k4 * a * b;
|
|
11840
|
+
|
|
11841
|
+
// Do one step Halley's method to get closer
|
|
11842
|
+
// this gives an error less than 10e6, except for some blue hues where the dS/dh is close to infinite
|
|
11843
|
+
// this should be sufficient for most applications, otherwise do two/three steps
|
|
11844
|
+
|
|
11845
|
+
let k_l = 0.3963377774 * a + 0.2158037573 * b;
|
|
11846
|
+
let k_m = -0.1055613458 * a - 0.0638541728 * b;
|
|
11847
|
+
let k_s = -0.0894841775 * a - 1.291485548 * b;
|
|
11848
|
+
|
|
11849
|
+
{
|
|
11850
|
+
let l_ = 1 + S * k_l;
|
|
11851
|
+
let m_ = 1 + S * k_m;
|
|
11852
|
+
let s_ = 1 + S * k_s;
|
|
11853
|
+
|
|
11854
|
+
let l = l_ * l_ * l_;
|
|
11855
|
+
let m = m_ * m_ * m_;
|
|
11856
|
+
let s = s_ * s_ * s_;
|
|
11857
|
+
|
|
11858
|
+
let l_dS = 3 * k_l * l_ * l_;
|
|
11859
|
+
let m_dS = 3 * k_m * m_ * m_;
|
|
11860
|
+
let s_dS = 3 * k_s * s_ * s_;
|
|
11861
|
+
|
|
11862
|
+
let l_dS2 = 6 * k_l * k_l * l_;
|
|
11863
|
+
let m_dS2 = 6 * k_m * k_m * m_;
|
|
11864
|
+
let s_dS2 = 6 * k_s * k_s * s_;
|
|
11865
|
+
|
|
11866
|
+
let f = wl * l + wm * m + ws * s;
|
|
11867
|
+
let f1 = wl * l_dS + wm * m_dS + ws * s_dS;
|
|
11868
|
+
let f2 = wl * l_dS2 + wm * m_dS2 + ws * s_dS2;
|
|
11869
|
+
|
|
11870
|
+
S = S - (f * f1) / (f1 * f1 - 0.5 * f * f2);
|
|
11871
|
+
}
|
|
11872
|
+
|
|
11873
|
+
return S;
|
|
11874
|
+
}
|
|
11875
|
+
|
|
11876
|
+
function find_cusp(a, b) {
|
|
11877
|
+
// First, find the maximum saturation (saturation S = C/L)
|
|
11878
|
+
let S_cusp = compute_max_saturation(a, b);
|
|
11879
|
+
|
|
11880
|
+
// Convert to linear sRGB to find the first point where at least one of r,g or b >= 1:
|
|
11881
|
+
let rgb = convertOklabToLrgb({ l: 1, a: S_cusp * a, b: S_cusp * b });
|
|
11882
|
+
let L_cusp = Math.cbrt(1 / Math.max(rgb.r, rgb.g, rgb.b));
|
|
11883
|
+
let C_cusp = L_cusp * S_cusp;
|
|
11884
|
+
|
|
11885
|
+
return [L_cusp, C_cusp];
|
|
11886
|
+
}
|
|
11887
|
+
|
|
11888
|
+
// Finds intersection of the line defined by
|
|
11889
|
+
// L = L0 * (1 - t) + t * L1;
|
|
11890
|
+
// C = t * C1;
|
|
11891
|
+
// a and b must be normalized so a^2 + b^2 == 1
|
|
11892
|
+
function find_gamut_intersection(a, b, L1, C1, L0, cusp = null) {
|
|
11893
|
+
if (!cusp) {
|
|
11894
|
+
// Find the cusp of the gamut triangle
|
|
11895
|
+
cusp = find_cusp(a, b);
|
|
11896
|
+
}
|
|
11897
|
+
|
|
11898
|
+
// Find the intersection for upper and lower half seprately
|
|
11899
|
+
let t;
|
|
11900
|
+
if ((L1 - L0) * cusp[1] - (cusp[0] - L0) * C1 <= 0) {
|
|
11901
|
+
// Lower half
|
|
11902
|
+
|
|
11903
|
+
t = (cusp[1] * L0) / (C1 * cusp[0] + cusp[1] * (L0 - L1));
|
|
11904
|
+
} else {
|
|
11905
|
+
// Upper half
|
|
11906
|
+
|
|
11907
|
+
// First intersect with triangle
|
|
11908
|
+
t = (cusp[1] * (L0 - 1)) / (C1 * (cusp[0] - 1) + cusp[1] * (L0 - L1));
|
|
11909
|
+
|
|
11910
|
+
// Then one step Halley's method
|
|
11911
|
+
{
|
|
11912
|
+
let dL = L1 - L0;
|
|
11913
|
+
let dC = C1;
|
|
11914
|
+
|
|
11915
|
+
let k_l = 0.3963377774 * a + 0.2158037573 * b;
|
|
11916
|
+
let k_m = -0.1055613458 * a - 0.0638541728 * b;
|
|
11917
|
+
let k_s = -0.0894841775 * a - 1.291485548 * b;
|
|
11918
|
+
|
|
11919
|
+
let l_dt = dL + dC * k_l;
|
|
11920
|
+
let m_dt = dL + dC * k_m;
|
|
11921
|
+
let s_dt = dL + dC * k_s;
|
|
11922
|
+
|
|
11923
|
+
// If higher accuracy is required, 2 or 3 iterations of the following block can be used:
|
|
11924
|
+
{
|
|
11925
|
+
let L = L0 * (1 - t) + t * L1;
|
|
11926
|
+
let C = t * C1;
|
|
11927
|
+
|
|
11928
|
+
let l_ = L + C * k_l;
|
|
11929
|
+
let m_ = L + C * k_m;
|
|
11930
|
+
let s_ = L + C * k_s;
|
|
11931
|
+
|
|
11932
|
+
let l = l_ * l_ * l_;
|
|
11933
|
+
let m = m_ * m_ * m_;
|
|
11934
|
+
let s = s_ * s_ * s_;
|
|
11935
|
+
|
|
11936
|
+
let ldt = 3 * l_dt * l_ * l_;
|
|
11937
|
+
let mdt = 3 * m_dt * m_ * m_;
|
|
11938
|
+
let sdt = 3 * s_dt * s_ * s_;
|
|
11939
|
+
|
|
11940
|
+
let ldt2 = 6 * l_dt * l_dt * l_;
|
|
11941
|
+
let mdt2 = 6 * m_dt * m_dt * m_;
|
|
11942
|
+
let sdt2 = 6 * s_dt * s_dt * s_;
|
|
11943
|
+
|
|
11944
|
+
let r =
|
|
11945
|
+
4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s - 1;
|
|
11946
|
+
let r1 =
|
|
11947
|
+
4.0767416621 * ldt -
|
|
11948
|
+
3.3077115913 * mdt +
|
|
11949
|
+
0.2309699292 * sdt;
|
|
11950
|
+
let r2 =
|
|
11951
|
+
4.0767416621 * ldt2 -
|
|
11952
|
+
3.3077115913 * mdt2 +
|
|
11953
|
+
0.2309699292 * sdt2;
|
|
11954
|
+
|
|
11955
|
+
let u_r = r1 / (r1 * r1 - 0.5 * r * r2);
|
|
11956
|
+
let t_r = -r * u_r;
|
|
11957
|
+
|
|
11958
|
+
let g =
|
|
11959
|
+
-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s - 1;
|
|
11960
|
+
let g1 =
|
|
11961
|
+
-1.2684380046 * ldt +
|
|
11962
|
+
2.6097574011 * mdt -
|
|
11963
|
+
0.3413193965 * sdt;
|
|
11964
|
+
let g2 =
|
|
11965
|
+
-1.2684380046 * ldt2 +
|
|
11966
|
+
2.6097574011 * mdt2 -
|
|
11967
|
+
0.3413193965 * sdt2;
|
|
11968
|
+
|
|
11969
|
+
let u_g = g1 / (g1 * g1 - 0.5 * g * g2);
|
|
11970
|
+
let t_g = -g * u_g;
|
|
11971
|
+
|
|
11972
|
+
let b =
|
|
11973
|
+
-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s - 1;
|
|
11974
|
+
let b1 =
|
|
11975
|
+
-0.0041960863 * ldt -
|
|
11976
|
+
0.7034186147 * mdt +
|
|
11977
|
+
1.707614701 * sdt;
|
|
11978
|
+
let b2 =
|
|
11979
|
+
-0.0041960863 * ldt2 -
|
|
11980
|
+
0.7034186147 * mdt2 +
|
|
11981
|
+
1.707614701 * sdt2;
|
|
11982
|
+
|
|
11983
|
+
let u_b = b1 / (b1 * b1 - 0.5 * b * b2);
|
|
11984
|
+
let t_b = -b * u_b;
|
|
11985
|
+
|
|
11986
|
+
t_r = u_r >= 0 ? t_r : 10e5;
|
|
11987
|
+
t_g = u_g >= 0 ? t_g : 10e5;
|
|
11988
|
+
t_b = u_b >= 0 ? t_b : 10e5;
|
|
11989
|
+
|
|
11990
|
+
t += Math.min(t_r, Math.min(t_g, t_b));
|
|
11991
|
+
}
|
|
11992
|
+
}
|
|
11993
|
+
}
|
|
11994
|
+
|
|
11995
|
+
return t;
|
|
11996
|
+
}
|
|
11997
|
+
|
|
11998
|
+
function get_ST_max(a_, b_, cusp = null) {
|
|
11999
|
+
if (!cusp) {
|
|
12000
|
+
cusp = find_cusp(a_, b_);
|
|
12001
|
+
}
|
|
12002
|
+
let L = cusp[0];
|
|
12003
|
+
let C = cusp[1];
|
|
12004
|
+
return [C / L, C / (1 - L)];
|
|
12005
|
+
}
|
|
12006
|
+
|
|
12007
|
+
function get_Cs(L, a_, b_) {
|
|
12008
|
+
let cusp = find_cusp(a_, b_);
|
|
12009
|
+
|
|
12010
|
+
let C_max = find_gamut_intersection(a_, b_, L, 1, L, cusp);
|
|
12011
|
+
let ST_max = get_ST_max(a_, b_, cusp);
|
|
12012
|
+
|
|
12013
|
+
let S_mid =
|
|
12014
|
+
0.11516993 +
|
|
12015
|
+
1 /
|
|
12016
|
+
(7.4477897 +
|
|
12017
|
+
4.1590124 * b_ +
|
|
12018
|
+
a_ *
|
|
12019
|
+
(-2.19557347 +
|
|
12020
|
+
1.75198401 * b_ +
|
|
12021
|
+
a_ *
|
|
12022
|
+
(-2.13704948 -
|
|
12023
|
+
10.02301043 * b_ +
|
|
12024
|
+
a_ *
|
|
12025
|
+
(-4.24894561 +
|
|
12026
|
+
5.38770819 * b_ +
|
|
12027
|
+
4.69891013 * a_))));
|
|
12028
|
+
|
|
12029
|
+
let T_mid =
|
|
12030
|
+
0.11239642 +
|
|
12031
|
+
1 /
|
|
12032
|
+
(1.6132032 -
|
|
12033
|
+
0.68124379 * b_ +
|
|
12034
|
+
a_ *
|
|
12035
|
+
(0.40370612 +
|
|
12036
|
+
0.90148123 * b_ +
|
|
12037
|
+
a_ *
|
|
12038
|
+
(-0.27087943 +
|
|
12039
|
+
0.6122399 * b_ +
|
|
12040
|
+
a_ *
|
|
12041
|
+
(299215e-8 -
|
|
12042
|
+
0.45399568 * b_ -
|
|
12043
|
+
0.14661872 * a_))));
|
|
12044
|
+
|
|
12045
|
+
let k = C_max / Math.min(L * ST_max[0], (1 - L) * ST_max[1]);
|
|
12046
|
+
|
|
12047
|
+
let C_a = L * S_mid;
|
|
12048
|
+
let C_b = (1 - L) * T_mid;
|
|
12049
|
+
let C_mid =
|
|
12050
|
+
0.9 *
|
|
12051
|
+
k *
|
|
12052
|
+
Math.sqrt(
|
|
12053
|
+
Math.sqrt(
|
|
12054
|
+
1 / (1 / (C_a * C_a * C_a * C_a) + 1 / (C_b * C_b * C_b * C_b))
|
|
12055
|
+
)
|
|
12056
|
+
);
|
|
12057
|
+
|
|
12058
|
+
C_a = L * 0.4;
|
|
12059
|
+
C_b = (1 - L) * 0.8;
|
|
12060
|
+
let C_0 = Math.sqrt(1 / (1 / (C_a * C_a) + 1 / (C_b * C_b)));
|
|
12061
|
+
return [C_0, C_mid, C_max];
|
|
12062
|
+
}
|
|
12063
|
+
|
|
12064
|
+
/*
|
|
12065
|
+
Adapted from code by Björn Ottosson,
|
|
12066
|
+
released under the MIT license:
|
|
12067
|
+
|
|
12068
|
+
Copyright (c) 2021 Björn Ottosson
|
|
12069
|
+
|
|
12070
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
|
12071
|
+
this software and associated documentation files (the "Software"), to deal in
|
|
12072
|
+
the Software without restriction, including without limitation the rights to
|
|
12073
|
+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
|
|
12074
|
+
of the Software, and to permit persons to whom the Software is furnished to do
|
|
12075
|
+
so, subject to the following conditions:
|
|
12076
|
+
|
|
12077
|
+
The above copyright notice and this permission notice shall be included in all
|
|
12078
|
+
copies or substantial portions of the Software.
|
|
12079
|
+
|
|
12080
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
12081
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
12082
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
12083
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
12084
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
12085
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
12086
|
+
SOFTWARE.
|
|
12087
|
+
*/
|
|
12088
|
+
|
|
12089
|
+
|
|
12090
|
+
function convertOklabToOkhsl(lab) {
|
|
12091
|
+
const l = lab.l !== undefined ? lab.l : 0;
|
|
12092
|
+
const a = lab.a !== undefined ? lab.a : 0;
|
|
12093
|
+
const b = lab.b !== undefined ? lab.b : 0;
|
|
12094
|
+
|
|
12095
|
+
const ret = { mode: 'okhsl', l: toe(l) };
|
|
12096
|
+
|
|
12097
|
+
if (lab.alpha !== undefined) {
|
|
12098
|
+
ret.alpha = lab.alpha;
|
|
12099
|
+
}
|
|
12100
|
+
let c = Math.sqrt(a * a + b * b);
|
|
12101
|
+
if (!c) {
|
|
12102
|
+
ret.s = 0;
|
|
12103
|
+
return ret;
|
|
12104
|
+
}
|
|
12105
|
+
let [C_0, C_mid, C_max] = get_Cs(l, a / c, b / c);
|
|
12106
|
+
let s;
|
|
12107
|
+
if (c < C_mid) {
|
|
12108
|
+
let k_0 = 0;
|
|
12109
|
+
let k_1 = 0.8 * C_0;
|
|
12110
|
+
let k_2 = 1 - k_1 / C_mid;
|
|
12111
|
+
let t = (c - k_0) / (k_1 + k_2 * (c - k_0));
|
|
12112
|
+
s = t * 0.8;
|
|
12113
|
+
} else {
|
|
12114
|
+
let k_0 = C_mid;
|
|
12115
|
+
let k_1 = (0.2 * C_mid * C_mid * 1.25 * 1.25) / C_0;
|
|
12116
|
+
let k_2 = 1 - k_1 / (C_max - C_mid);
|
|
12117
|
+
let t = (c - k_0) / (k_1 + k_2 * (c - k_0));
|
|
12118
|
+
s = 0.8 + 0.2 * t;
|
|
12119
|
+
}
|
|
12120
|
+
if (s) {
|
|
12121
|
+
ret.s = s;
|
|
12122
|
+
ret.h = normalizeHue((Math.atan2(b, a) * 180) / Math.PI);
|
|
12123
|
+
}
|
|
12124
|
+
return ret;
|
|
12125
|
+
}
|
|
12126
|
+
|
|
12127
|
+
/*
|
|
12128
|
+
Adapted from code by Björn Ottosson,
|
|
12129
|
+
released under the MIT license:
|
|
12130
|
+
|
|
12131
|
+
Copyright (c) 2021 Björn Ottosson
|
|
12132
|
+
|
|
12133
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
|
12134
|
+
this software and associated documentation files (the "Software"), to deal in
|
|
12135
|
+
the Software without restriction, including without limitation the rights to
|
|
12136
|
+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
|
|
12137
|
+
of the Software, and to permit persons to whom the Software is furnished to do
|
|
12138
|
+
so, subject to the following conditions:
|
|
12139
|
+
|
|
12140
|
+
The above copyright notice and this permission notice shall be included in all
|
|
12141
|
+
copies or substantial portions of the Software.
|
|
12142
|
+
|
|
12143
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
12144
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
12145
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
12146
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
12147
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
12148
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
12149
|
+
SOFTWARE.
|
|
12150
|
+
*/
|
|
12151
|
+
|
|
12152
|
+
|
|
12153
|
+
function convertOkhslToOklab(hsl) {
|
|
12154
|
+
let h = hsl.h !== undefined ? hsl.h : 0;
|
|
12155
|
+
let s = hsl.s !== undefined ? hsl.s : 0;
|
|
12156
|
+
let l = hsl.l !== undefined ? hsl.l : 0;
|
|
12157
|
+
|
|
12158
|
+
const ret = { mode: 'oklab', l: toe_inv(l) };
|
|
12159
|
+
|
|
12160
|
+
if (hsl.alpha !== undefined) {
|
|
12161
|
+
ret.alpha = hsl.alpha;
|
|
12162
|
+
}
|
|
12163
|
+
|
|
12164
|
+
if (!s || l === 1) {
|
|
12165
|
+
ret.a = ret.b = 0;
|
|
12166
|
+
return ret;
|
|
12167
|
+
}
|
|
12168
|
+
|
|
12169
|
+
let a_ = Math.cos((h / 180) * Math.PI);
|
|
12170
|
+
let b_ = Math.sin((h / 180) * Math.PI);
|
|
12171
|
+
let [C_0, C_mid, C_max] = get_Cs(ret.l, a_, b_);
|
|
12172
|
+
let t, k_0, k_1, k_2;
|
|
12173
|
+
if (s < 0.8) {
|
|
12174
|
+
t = 1.25 * s;
|
|
12175
|
+
k_0 = 0;
|
|
12176
|
+
k_1 = 0.8 * C_0;
|
|
12177
|
+
k_2 = 1 - k_1 / C_mid;
|
|
12178
|
+
} else {
|
|
12179
|
+
t = 5 * (s - 0.8);
|
|
12180
|
+
k_0 = C_mid;
|
|
12181
|
+
k_1 = (0.2 * C_mid * C_mid * 1.25 * 1.25) / C_0;
|
|
12182
|
+
k_2 = 1 - k_1 / (C_max - C_mid);
|
|
12183
|
+
}
|
|
12184
|
+
let C = k_0 + (t * k_1) / (1 - k_2 * t);
|
|
12185
|
+
ret.a = C * a_;
|
|
12186
|
+
ret.b = C * b_;
|
|
12187
|
+
|
|
12188
|
+
return ret;
|
|
12189
|
+
}
|
|
12190
|
+
|
|
12191
|
+
const modeOkhsl = {
|
|
12192
|
+
...definition$l,
|
|
12193
|
+
mode: 'okhsl',
|
|
12194
|
+
channels: ['h', 's', 'l', 'alpha'],
|
|
12195
|
+
parse: ['--okhsl'],
|
|
12196
|
+
serialize: '--okhsl',
|
|
12197
|
+
fromMode: {
|
|
12198
|
+
oklab: convertOklabToOkhsl,
|
|
12199
|
+
rgb: c => convertOklabToOkhsl(convertRgbToOklab(c))
|
|
12200
|
+
},
|
|
12201
|
+
toMode: {
|
|
12202
|
+
oklab: convertOkhslToOklab,
|
|
12203
|
+
rgb: c => convertOklabToRgb(convertOkhslToOklab(c))
|
|
12204
|
+
}
|
|
12205
|
+
};
|
|
12206
|
+
|
|
12207
|
+
/*
|
|
12208
|
+
Adapted from code by Björn Ottosson,
|
|
12209
|
+
released under the MIT license:
|
|
12210
|
+
|
|
12211
|
+
Copyright (c) 2021 Björn Ottosson
|
|
12212
|
+
|
|
12213
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
|
12214
|
+
this software and associated documentation files (the "Software"), to deal in
|
|
12215
|
+
the Software without restriction, including without limitation the rights to
|
|
12216
|
+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
|
|
12217
|
+
of the Software, and to permit persons to whom the Software is furnished to do
|
|
12218
|
+
so, subject to the following conditions:
|
|
12219
|
+
|
|
12220
|
+
The above copyright notice and this permission notice shall be included in all
|
|
12221
|
+
copies or substantial portions of the Software.
|
|
12222
|
+
|
|
12223
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
12224
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
12225
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
12226
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
12227
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
12228
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
12229
|
+
SOFTWARE.
|
|
12230
|
+
*/
|
|
12231
|
+
|
|
12232
|
+
|
|
12233
|
+
function convertOklabToOkhsv(lab) {
|
|
12234
|
+
let l = lab.l !== undefined ? lab.l : 0;
|
|
12235
|
+
let a = lab.a !== undefined ? lab.a : 0;
|
|
12236
|
+
let b = lab.b !== undefined ? lab.b : 0;
|
|
12237
|
+
|
|
12238
|
+
let c = Math.sqrt(a * a + b * b);
|
|
12239
|
+
|
|
12240
|
+
// TODO: c = 0
|
|
12241
|
+
let a_ = c ? a / c : 1;
|
|
12242
|
+
let b_ = c ? b / c : 1;
|
|
12243
|
+
|
|
12244
|
+
let [S_max, T] = get_ST_max(a_, b_);
|
|
12245
|
+
let S_0 = 0.5;
|
|
12246
|
+
let k = 1 - S_0 / S_max;
|
|
12247
|
+
|
|
12248
|
+
let t = T / (c + l * T);
|
|
12249
|
+
let L_v = t * l;
|
|
12250
|
+
let C_v = t * c;
|
|
12251
|
+
|
|
12252
|
+
let L_vt = toe_inv(L_v);
|
|
12253
|
+
let C_vt = (C_v * L_vt) / L_v;
|
|
12254
|
+
|
|
12255
|
+
let rgb_scale = convertOklabToLrgb({ l: L_vt, a: a_ * C_vt, b: b_ * C_vt });
|
|
12256
|
+
let scale_L = Math.cbrt(
|
|
12257
|
+
1 / Math.max(rgb_scale.r, rgb_scale.g, rgb_scale.b, 0)
|
|
12258
|
+
);
|
|
12259
|
+
|
|
12260
|
+
l = l / scale_L;
|
|
12261
|
+
c = ((c / scale_L) * toe(l)) / l;
|
|
12262
|
+
l = toe(l);
|
|
12263
|
+
|
|
12264
|
+
const ret = {
|
|
12265
|
+
mode: 'okhsv',
|
|
12266
|
+
s: c ? ((S_0 + T) * C_v) / (T * S_0 + T * k * C_v) : 0,
|
|
12267
|
+
v: l ? l / L_v : 0
|
|
12268
|
+
};
|
|
12269
|
+
if (ret.s) {
|
|
12270
|
+
ret.h = normalizeHue((Math.atan2(b, a) * 180) / Math.PI);
|
|
12271
|
+
}
|
|
12272
|
+
if (lab.alpha !== undefined) {
|
|
12273
|
+
ret.alpha = lab.alpha;
|
|
12274
|
+
}
|
|
12275
|
+
return ret;
|
|
12276
|
+
}
|
|
12277
|
+
|
|
12278
|
+
/*
|
|
12279
|
+
Copyright (c) 2021 Björn Ottosson
|
|
12280
|
+
|
|
12281
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
|
12282
|
+
this software and associated documentation files (the "Software"), to deal in
|
|
12283
|
+
the Software without restriction, including without limitation the rights to
|
|
12284
|
+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
|
|
12285
|
+
of the Software, and to permit persons to whom the Software is furnished to do
|
|
12286
|
+
so, subject to the following conditions:
|
|
12287
|
+
|
|
12288
|
+
The above copyright notice and this permission notice shall be included in all
|
|
12289
|
+
copies or substantial portions of the Software.
|
|
12290
|
+
|
|
12291
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
12292
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
12293
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
12294
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
12295
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
12296
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
12297
|
+
SOFTWARE.
|
|
12298
|
+
*/
|
|
12299
|
+
|
|
12300
|
+
|
|
12301
|
+
function convertOkhsvToOklab(hsv) {
|
|
12302
|
+
const ret = { mode: 'oklab' };
|
|
12303
|
+
if (hsv.alpha !== undefined) {
|
|
12304
|
+
ret.alpha = hsv.alpha;
|
|
12305
|
+
}
|
|
12306
|
+
|
|
12307
|
+
const h = hsv.h !== undefined ? hsv.h : 0;
|
|
12308
|
+
const s = hsv.s !== undefined ? hsv.s : 0;
|
|
12309
|
+
const v = hsv.v !== undefined ? hsv.v : 0;
|
|
12310
|
+
|
|
12311
|
+
const a_ = Math.cos((h / 180) * Math.PI);
|
|
12312
|
+
const b_ = Math.sin((h / 180) * Math.PI);
|
|
12313
|
+
|
|
12314
|
+
const [S_max, T] = get_ST_max(a_, b_);
|
|
12315
|
+
const S_0 = 0.5;
|
|
12316
|
+
const k = 1 - S_0 / S_max;
|
|
12317
|
+
const L_v = 1 - (s * S_0) / (S_0 + T - T * k * s);
|
|
12318
|
+
const C_v = (s * T * S_0) / (S_0 + T - T * k * s);
|
|
12319
|
+
|
|
12320
|
+
const L_vt = toe_inv(L_v);
|
|
12321
|
+
const C_vt = (C_v * L_vt) / L_v;
|
|
12322
|
+
const rgb_scale = convertOklabToLrgb({
|
|
12323
|
+
l: L_vt,
|
|
12324
|
+
a: a_ * C_vt,
|
|
12325
|
+
b: b_ * C_vt
|
|
12326
|
+
});
|
|
12327
|
+
const scale_L = Math.cbrt(
|
|
12328
|
+
1 / Math.max(rgb_scale.r, rgb_scale.g, rgb_scale.b, 0)
|
|
12329
|
+
);
|
|
12330
|
+
|
|
12331
|
+
const L_new = toe_inv(v * L_v);
|
|
12332
|
+
const C = (C_v * L_new) / L_v;
|
|
12333
|
+
|
|
12334
|
+
ret.l = L_new * scale_L;
|
|
12335
|
+
ret.a = C * a_ * scale_L;
|
|
12336
|
+
ret.b = C * b_ * scale_L;
|
|
12337
|
+
|
|
12338
|
+
return ret;
|
|
12339
|
+
}
|
|
12340
|
+
|
|
12341
|
+
const modeOkhsv = {
|
|
12342
|
+
...definition$k,
|
|
12343
|
+
mode: 'okhsv',
|
|
12344
|
+
channels: ['h', 's', 'v', 'alpha'],
|
|
12345
|
+
parse: ['--okhsv'],
|
|
12346
|
+
serialize: '--okhsv',
|
|
12347
|
+
fromMode: {
|
|
12348
|
+
oklab: convertOklabToOkhsv,
|
|
12349
|
+
rgb: c => convertOklabToOkhsv(convertRgbToOklab(c))
|
|
12350
|
+
},
|
|
12351
|
+
toMode: {
|
|
12352
|
+
oklab: convertOkhsvToOklab,
|
|
12353
|
+
rgb: c => convertOklabToRgb(convertOkhsvToOklab(c))
|
|
12354
|
+
}
|
|
12355
|
+
};
|
|
12356
|
+
|
|
12357
|
+
function parseOklab(color, parsed) {
|
|
12358
|
+
if (!parsed || parsed[0] !== 'oklab') {
|
|
12359
|
+
return undefined;
|
|
12360
|
+
}
|
|
12361
|
+
const res = { mode: 'oklab' };
|
|
12362
|
+
const [, l, a, b, alpha] = parsed;
|
|
12363
|
+
if (l.type === Tok.Hue || a.type === Tok.Hue || b.type === Tok.Hue) {
|
|
12364
|
+
return undefined;
|
|
12365
|
+
}
|
|
12366
|
+
if (l.type !== Tok.None) {
|
|
12367
|
+
res.l = Math.min(
|
|
12368
|
+
Math.max(0, l.type === Tok.Number ? l.value : l.value / 100),
|
|
12369
|
+
1
|
|
12370
|
+
);
|
|
12371
|
+
}
|
|
12372
|
+
if (a.type !== Tok.None) {
|
|
12373
|
+
res.a = a.type === Tok.Number ? a.value : (a.value * 0.4) / 100;
|
|
12374
|
+
}
|
|
12375
|
+
if (b.type !== Tok.None) {
|
|
12376
|
+
res.b = b.type === Tok.Number ? b.value : (b.value * 0.4) / 100;
|
|
12377
|
+
}
|
|
12378
|
+
if (alpha.type !== Tok.None) {
|
|
12379
|
+
res.alpha = Math.min(
|
|
12380
|
+
1,
|
|
12381
|
+
Math.max(
|
|
12382
|
+
0,
|
|
12383
|
+
alpha.type === Tok.Number ? alpha.value : alpha.value / 100
|
|
12384
|
+
)
|
|
12385
|
+
);
|
|
12386
|
+
}
|
|
12387
|
+
|
|
12388
|
+
return res;
|
|
12389
|
+
}
|
|
12390
|
+
|
|
12391
|
+
/*
|
|
12392
|
+
Oklab, a perceptual color space for image processing by Björn Ottosson
|
|
12393
|
+
Reference: https://bottosson.github.io/posts/oklab/
|
|
12394
|
+
*/
|
|
12395
|
+
|
|
12396
|
+
const definition$8 = {
|
|
12397
|
+
...definition$f,
|
|
12398
|
+
mode: 'oklab',
|
|
12399
|
+
|
|
12400
|
+
toMode: {
|
|
12401
|
+
lrgb: convertOklabToLrgb,
|
|
12402
|
+
rgb: convertOklabToRgb
|
|
12403
|
+
},
|
|
12404
|
+
|
|
12405
|
+
fromMode: {
|
|
12406
|
+
lrgb: convertLrgbToOklab,
|
|
12407
|
+
rgb: convertRgbToOklab
|
|
12408
|
+
},
|
|
12409
|
+
|
|
12410
|
+
ranges: {
|
|
12411
|
+
l: [0, 1],
|
|
12412
|
+
a: [-0.4, 0.4],
|
|
12413
|
+
b: [-0.4, 0.4]
|
|
12414
|
+
},
|
|
12415
|
+
|
|
12416
|
+
parse: [parseOklab],
|
|
12417
|
+
serialize: c =>
|
|
12418
|
+
`oklab(${c.l !== undefined ? c.l : 'none'} ${
|
|
12419
|
+
c.a !== undefined ? c.a : 'none'
|
|
12420
|
+
} ${c.b !== undefined ? c.b : 'none'}${
|
|
12421
|
+
c.alpha < 1 ? ` / ${c.alpha}` : ''
|
|
12422
|
+
})`
|
|
12423
|
+
};
|
|
12424
|
+
|
|
12425
|
+
function parseOklch(color, parsed) {
|
|
12426
|
+
if (!parsed || parsed[0] !== 'oklch') {
|
|
12427
|
+
return undefined;
|
|
12428
|
+
}
|
|
12429
|
+
const res = { mode: 'oklch' };
|
|
12430
|
+
const [, l, c, h, alpha] = parsed;
|
|
12431
|
+
if (l.type !== Tok.None) {
|
|
12432
|
+
if (l.type === Tok.Hue) {
|
|
12433
|
+
return undefined;
|
|
12434
|
+
}
|
|
12435
|
+
res.l = Math.min(
|
|
12436
|
+
Math.max(0, l.type === Tok.Number ? l.value : l.value / 100),
|
|
12437
|
+
1
|
|
12438
|
+
);
|
|
12439
|
+
}
|
|
12440
|
+
if (c.type !== Tok.None) {
|
|
12441
|
+
res.c = Math.max(
|
|
12442
|
+
0,
|
|
12443
|
+
c.type === Tok.Number ? c.value : (c.value * 0.4) / 100
|
|
12444
|
+
);
|
|
12445
|
+
}
|
|
12446
|
+
if (h.type !== Tok.None) {
|
|
12447
|
+
if (h.type === Tok.Percentage) {
|
|
12448
|
+
return undefined;
|
|
12449
|
+
}
|
|
12450
|
+
res.h = h.value;
|
|
12451
|
+
}
|
|
12452
|
+
if (alpha.type !== Tok.None) {
|
|
12453
|
+
res.alpha = Math.min(
|
|
12454
|
+
1,
|
|
12455
|
+
Math.max(
|
|
12456
|
+
0,
|
|
12457
|
+
alpha.type === Tok.Number ? alpha.value : alpha.value / 100
|
|
12458
|
+
)
|
|
12459
|
+
);
|
|
12460
|
+
}
|
|
12461
|
+
|
|
12462
|
+
return res;
|
|
12463
|
+
}
|
|
12464
|
+
|
|
12465
|
+
const definition$7 = {
|
|
12466
|
+
...definition$d,
|
|
12467
|
+
mode: 'oklch',
|
|
12468
|
+
|
|
12469
|
+
toMode: {
|
|
12470
|
+
oklab: c => convertLchToLab(c, 'oklab'),
|
|
12471
|
+
rgb: c => convertOklabToRgb(convertLchToLab(c, 'oklab'))
|
|
12472
|
+
},
|
|
12473
|
+
|
|
12474
|
+
fromMode: {
|
|
12475
|
+
rgb: c => convertLabToLch(convertRgbToOklab(c), 'oklch'),
|
|
12476
|
+
oklab: c => convertLabToLch(c, 'oklch')
|
|
12477
|
+
},
|
|
12478
|
+
|
|
12479
|
+
parse: [parseOklch],
|
|
12480
|
+
serialize: c =>
|
|
12481
|
+
`oklch(${c.l !== undefined ? c.l : 'none'} ${
|
|
12482
|
+
c.c !== undefined ? c.c : 'none'
|
|
12483
|
+
} ${c.h !== undefined ? c.h : 'none'}${
|
|
12484
|
+
c.alpha < 1 ? ` / ${c.alpha}` : ''
|
|
12485
|
+
})`,
|
|
12486
|
+
|
|
12487
|
+
ranges: {
|
|
12488
|
+
l: [0, 1],
|
|
12489
|
+
c: [0, 0.4],
|
|
12490
|
+
h: [0, 360]
|
|
12491
|
+
}
|
|
12492
|
+
};
|
|
12493
|
+
|
|
12494
|
+
/*
|
|
12495
|
+
Convert Display P3 values to CIE XYZ D65
|
|
12496
|
+
|
|
12497
|
+
References:
|
|
12498
|
+
* https://drafts.csswg.org/css-color/#color-conversion-code
|
|
12499
|
+
* http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
|
|
12500
|
+
*/
|
|
12501
|
+
|
|
12502
|
+
|
|
12503
|
+
const convertP3ToXyz65 = rgb => {
|
|
12504
|
+
let { r, g, b, alpha } = convertRgbToLrgb(rgb);
|
|
12505
|
+
let res = {
|
|
12506
|
+
mode: 'xyz65',
|
|
12507
|
+
x:
|
|
12508
|
+
0.486570948648216 * r +
|
|
12509
|
+
0.265667693169093 * g +
|
|
12510
|
+
0.1982172852343625 * b,
|
|
12511
|
+
y:
|
|
12512
|
+
0.2289745640697487 * r +
|
|
12513
|
+
0.6917385218365062 * g +
|
|
12514
|
+
0.079286914093745 * b,
|
|
12515
|
+
z: 0.0 * r + 0.0451133818589026 * g + 1.043944368900976 * b
|
|
12516
|
+
};
|
|
12517
|
+
if (alpha !== undefined) {
|
|
12518
|
+
res.alpha = alpha;
|
|
12519
|
+
}
|
|
12520
|
+
return res;
|
|
12521
|
+
};
|
|
12522
|
+
|
|
12523
|
+
/*
|
|
12524
|
+
CIE XYZ D65 values to Display P3.
|
|
12525
|
+
|
|
12526
|
+
References:
|
|
12527
|
+
* https://drafts.csswg.org/css-color/#color-conversion-code
|
|
12528
|
+
* http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
|
|
12529
|
+
*/
|
|
12530
|
+
|
|
12531
|
+
|
|
12532
|
+
const convertXyz65ToP3 = ({ x, y, z, alpha }) => {
|
|
12533
|
+
if (x === undefined) x = 0;
|
|
12534
|
+
if (y === undefined) y = 0;
|
|
12535
|
+
if (z === undefined) z = 0;
|
|
12536
|
+
let res = convertLrgbToRgb(
|
|
12537
|
+
{
|
|
12538
|
+
r:
|
|
12539
|
+
x * 2.4934969119414263 -
|
|
12540
|
+
y * 0.9313836179191242 -
|
|
12541
|
+
0.402710784450717 * z,
|
|
12542
|
+
g:
|
|
12543
|
+
x * -0.8294889695615749 +
|
|
12544
|
+
y * 1.7626640603183465 +
|
|
12545
|
+
0.0236246858419436 * z,
|
|
12546
|
+
b:
|
|
12547
|
+
x * 0.0358458302437845 -
|
|
12548
|
+
y * 0.0761723892680418 +
|
|
12549
|
+
0.9568845240076871 * z
|
|
12550
|
+
},
|
|
12551
|
+
'p3'
|
|
12552
|
+
);
|
|
12553
|
+
if (alpha !== undefined) {
|
|
12554
|
+
res.alpha = alpha;
|
|
12555
|
+
}
|
|
12556
|
+
return res;
|
|
12557
|
+
};
|
|
12558
|
+
|
|
12559
|
+
const definition$6 = {
|
|
12560
|
+
...definition$r,
|
|
12561
|
+
mode: 'p3',
|
|
12562
|
+
parse: ['display-p3'],
|
|
12563
|
+
serialize: 'display-p3',
|
|
12564
|
+
|
|
12565
|
+
fromMode: {
|
|
12566
|
+
rgb: color => convertXyz65ToP3(convertRgbToXyz65(color)),
|
|
12567
|
+
xyz65: convertXyz65ToP3
|
|
12568
|
+
},
|
|
12569
|
+
|
|
12570
|
+
toMode: {
|
|
12571
|
+
rgb: color => convertXyz65ToRgb(convertP3ToXyz65(color)),
|
|
12572
|
+
xyz65: convertP3ToXyz65
|
|
12573
|
+
}
|
|
12574
|
+
};
|
|
12575
|
+
|
|
12576
|
+
/*
|
|
12577
|
+
Convert CIE XYZ D50 values to ProPhoto RGB
|
|
12578
|
+
|
|
12579
|
+
References:
|
|
12580
|
+
* https://drafts.csswg.org/css-color/#color-conversion-code
|
|
12581
|
+
* http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
|
|
12582
|
+
*/
|
|
12583
|
+
|
|
12584
|
+
const gamma$1 = v => {
|
|
12585
|
+
let abs = Math.abs(v);
|
|
12586
|
+
if (abs >= 1 / 512) {
|
|
12587
|
+
return Math.sign(v) * Math.pow(abs, 1 / 1.8);
|
|
12588
|
+
}
|
|
12589
|
+
return 16 * v;
|
|
12590
|
+
};
|
|
12591
|
+
|
|
12592
|
+
const convertXyz50ToProphoto = ({ x, y, z, alpha }) => {
|
|
12593
|
+
if (x === undefined) x = 0;
|
|
12594
|
+
if (y === undefined) y = 0;
|
|
12595
|
+
if (z === undefined) z = 0;
|
|
12596
|
+
let res = {
|
|
12597
|
+
mode: 'prophoto',
|
|
12598
|
+
r: gamma$1(
|
|
12599
|
+
x * 1.3457868816471585 -
|
|
12600
|
+
y * 0.2555720873797946 -
|
|
12601
|
+
0.0511018649755453 * z
|
|
12602
|
+
),
|
|
12603
|
+
g: gamma$1(
|
|
12604
|
+
x * -0.5446307051249019 +
|
|
12605
|
+
y * 1.5082477428451466 +
|
|
12606
|
+
0.0205274474364214 * z
|
|
12607
|
+
),
|
|
12608
|
+
b: gamma$1(x * 0.0 + y * 0.0 + 1.2119675456389452 * z)
|
|
12609
|
+
};
|
|
12610
|
+
if (alpha !== undefined) {
|
|
12611
|
+
res.alpha = alpha;
|
|
12612
|
+
}
|
|
12613
|
+
return res;
|
|
12614
|
+
};
|
|
12615
|
+
|
|
12616
|
+
/*
|
|
12617
|
+
Convert ProPhoto RGB values to CIE XYZ D50
|
|
12618
|
+
|
|
12619
|
+
References:
|
|
12620
|
+
* https://drafts.csswg.org/css-color/#color-conversion-code
|
|
12621
|
+
* http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
|
|
12622
|
+
*/
|
|
12623
|
+
|
|
12624
|
+
const linearize$1 = (v = 0) => {
|
|
12625
|
+
let abs = Math.abs(v);
|
|
12626
|
+
if (abs >= 16 / 512) {
|
|
12627
|
+
return Math.sign(v) * Math.pow(abs, 1.8);
|
|
12628
|
+
}
|
|
12629
|
+
return v / 16;
|
|
12630
|
+
};
|
|
12631
|
+
|
|
12632
|
+
const convertProphotoToXyz50 = prophoto => {
|
|
12633
|
+
let r = linearize$1(prophoto.r);
|
|
12634
|
+
let g = linearize$1(prophoto.g);
|
|
12635
|
+
let b = linearize$1(prophoto.b);
|
|
12636
|
+
let res = {
|
|
12637
|
+
mode: 'xyz50',
|
|
12638
|
+
x:
|
|
12639
|
+
0.7977666449006423 * r +
|
|
12640
|
+
0.1351812974005331 * g +
|
|
12641
|
+
0.0313477341283922 * b,
|
|
12642
|
+
y:
|
|
12643
|
+
0.2880748288194013 * r +
|
|
12644
|
+
0.7118352342418731 * g +
|
|
12645
|
+
0.0000899369387256 * b,
|
|
12646
|
+
z: 0 * r + 0 * g + 0.8251046025104602 * b
|
|
12647
|
+
};
|
|
12648
|
+
if (prophoto.alpha !== undefined) {
|
|
12649
|
+
res.alpha = prophoto.alpha;
|
|
12650
|
+
}
|
|
12651
|
+
return res;
|
|
12652
|
+
};
|
|
12653
|
+
|
|
12654
|
+
/*
|
|
12655
|
+
ProPhoto RGB Color space
|
|
12656
|
+
|
|
12657
|
+
References:
|
|
12658
|
+
* https://en.wikipedia.org/wiki/ProPhoto_RGB_color_space
|
|
12659
|
+
*/
|
|
12660
|
+
|
|
12661
|
+
const definition$5 = {
|
|
12662
|
+
...definition$r,
|
|
12663
|
+
mode: 'prophoto',
|
|
12664
|
+
parse: ['prophoto-rgb'],
|
|
12665
|
+
serialize: 'prophoto-rgb',
|
|
12666
|
+
|
|
12667
|
+
fromMode: {
|
|
12668
|
+
xyz50: convertXyz50ToProphoto,
|
|
12669
|
+
rgb: color => convertXyz50ToProphoto(convertRgbToXyz50(color))
|
|
12670
|
+
},
|
|
12671
|
+
|
|
12672
|
+
toMode: {
|
|
12673
|
+
xyz50: convertProphotoToXyz50,
|
|
12674
|
+
rgb: color => convertXyz50ToRgb(convertProphotoToXyz50(color))
|
|
12675
|
+
}
|
|
12676
|
+
};
|
|
12677
|
+
|
|
12678
|
+
/*
|
|
12679
|
+
Convert CIE XYZ D65 values to Rec. 2020
|
|
12680
|
+
|
|
12681
|
+
References:
|
|
12682
|
+
* https://drafts.csswg.org/css-color/#color-conversion-code
|
|
12683
|
+
* http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
|
|
12684
|
+
* https://www.itu.int/rec/R-REC-BT.2020/en
|
|
12685
|
+
*/
|
|
12686
|
+
|
|
12687
|
+
const α$1 = 1.09929682680944;
|
|
12688
|
+
const β$1 = 0.018053968510807;
|
|
12689
|
+
const gamma = v => {
|
|
12690
|
+
const abs = Math.abs(v);
|
|
12691
|
+
if (abs > β$1) {
|
|
12692
|
+
return (Math.sign(v) || 1) * (α$1 * Math.pow(abs, 0.45) - (α$1 - 1));
|
|
12693
|
+
}
|
|
12694
|
+
return 4.5 * v;
|
|
12695
|
+
};
|
|
12696
|
+
|
|
12697
|
+
const convertXyz65ToRec2020 = ({ x, y, z, alpha }) => {
|
|
12698
|
+
if (x === undefined) x = 0;
|
|
12699
|
+
if (y === undefined) y = 0;
|
|
12700
|
+
if (z === undefined) z = 0;
|
|
12701
|
+
let res = {
|
|
12702
|
+
mode: 'rec2020',
|
|
12703
|
+
r: gamma(
|
|
12704
|
+
x * 1.7166511879712683 -
|
|
12705
|
+
y * 0.3556707837763925 -
|
|
12706
|
+
0.2533662813736599 * z
|
|
12707
|
+
),
|
|
12708
|
+
g: gamma(
|
|
12709
|
+
x * -0.6666843518324893 +
|
|
12710
|
+
y * 1.6164812366349395 +
|
|
12711
|
+
0.0157685458139111 * z
|
|
12712
|
+
),
|
|
12713
|
+
b: gamma(
|
|
12714
|
+
x * 0.0176398574453108 -
|
|
12715
|
+
y * 0.0427706132578085 +
|
|
12716
|
+
0.9421031212354739 * z
|
|
12717
|
+
)
|
|
12718
|
+
};
|
|
12719
|
+
if (alpha !== undefined) {
|
|
12720
|
+
res.alpha = alpha;
|
|
12721
|
+
}
|
|
12722
|
+
return res;
|
|
12723
|
+
};
|
|
12724
|
+
|
|
12725
|
+
/*
|
|
12726
|
+
Convert Rec. 2020 values to CIE XYZ D65
|
|
12727
|
+
|
|
12728
|
+
References:
|
|
12729
|
+
* https://drafts.csswg.org/css-color/#color-conversion-code
|
|
12730
|
+
* http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
|
|
12731
|
+
* https://www.itu.int/rec/R-REC-BT.2020/en
|
|
12732
|
+
*/
|
|
12733
|
+
|
|
12734
|
+
const α = 1.09929682680944;
|
|
12735
|
+
const β = 0.018053968510807;
|
|
12736
|
+
|
|
12737
|
+
const linearize = (v = 0) => {
|
|
12738
|
+
let abs = Math.abs(v);
|
|
12739
|
+
if (abs < β * 4.5) {
|
|
12740
|
+
return v / 4.5;
|
|
12741
|
+
}
|
|
12742
|
+
return (Math.sign(v) || 1) * Math.pow((abs + α - 1) / α, 1 / 0.45);
|
|
12743
|
+
};
|
|
12744
|
+
|
|
12745
|
+
const convertRec2020ToXyz65 = rec2020 => {
|
|
12746
|
+
let r = linearize(rec2020.r);
|
|
12747
|
+
let g = linearize(rec2020.g);
|
|
12748
|
+
let b = linearize(rec2020.b);
|
|
12749
|
+
let res = {
|
|
12750
|
+
mode: 'xyz65',
|
|
12751
|
+
x:
|
|
12752
|
+
0.6369580483012911 * r +
|
|
12753
|
+
0.1446169035862083 * g +
|
|
12754
|
+
0.1688809751641721 * b,
|
|
12755
|
+
y:
|
|
12756
|
+
0.262700212011267 * r +
|
|
12757
|
+
0.6779980715188708 * g +
|
|
12758
|
+
0.059301716469862 * b,
|
|
12759
|
+
z: 0 * r + 0.0280726930490874 * g + 1.0609850577107909 * b
|
|
12760
|
+
};
|
|
12761
|
+
if (rec2020.alpha !== undefined) {
|
|
12762
|
+
res.alpha = rec2020.alpha;
|
|
12763
|
+
}
|
|
12764
|
+
return res;
|
|
12765
|
+
};
|
|
12766
|
+
|
|
12767
|
+
const definition$4 = {
|
|
12768
|
+
...definition$r,
|
|
12769
|
+
mode: 'rec2020',
|
|
12770
|
+
|
|
12771
|
+
fromMode: {
|
|
12772
|
+
xyz65: convertXyz65ToRec2020,
|
|
12773
|
+
rgb: color => convertXyz65ToRec2020(convertRgbToXyz65(color))
|
|
12774
|
+
},
|
|
12775
|
+
|
|
12776
|
+
toMode: {
|
|
12777
|
+
xyz65: convertRec2020ToXyz65,
|
|
12778
|
+
rgb: color => convertXyz65ToRgb(convertRec2020ToXyz65(color))
|
|
12779
|
+
},
|
|
12780
|
+
|
|
12781
|
+
parse: ['rec2020'],
|
|
12782
|
+
serialize: 'rec2020'
|
|
12783
|
+
};
|
|
12784
|
+
|
|
12785
|
+
const bias = 0.00379307325527544933;
|
|
12786
|
+
const bias_cbrt = Math.cbrt(bias);
|
|
12787
|
+
|
|
12788
|
+
const transfer$1 = v => Math.cbrt(v) - bias_cbrt;
|
|
12789
|
+
|
|
12790
|
+
const convertRgbToXyb = color => {
|
|
12791
|
+
const { r, g, b, alpha } = convertRgbToLrgb(color);
|
|
12792
|
+
const l = transfer$1(0.3 * r + 0.622 * g + 0.078 * b + bias);
|
|
12793
|
+
const m = transfer$1(0.23 * r + 0.692 * g + 0.078 * b + bias);
|
|
12794
|
+
const s = transfer$1(
|
|
12795
|
+
0.24342268924547819 * r +
|
|
12796
|
+
0.20476744424496821 * g +
|
|
12797
|
+
0.5518098665095536 * b +
|
|
12798
|
+
bias
|
|
12799
|
+
);
|
|
12800
|
+
const res = {
|
|
12801
|
+
mode: 'xyb',
|
|
12802
|
+
x: (l - m) / 2,
|
|
12803
|
+
y: (l + m) / 2,
|
|
12804
|
+
/* Apply default chroma from luma (subtract Y from B) */
|
|
12805
|
+
b: s - (l + m) / 2
|
|
12806
|
+
};
|
|
12807
|
+
if (alpha !== undefined) res.alpha = alpha;
|
|
12808
|
+
return res;
|
|
12809
|
+
};
|
|
12810
|
+
|
|
12811
|
+
const transfer = v => Math.pow(v + bias_cbrt, 3);
|
|
12812
|
+
|
|
12813
|
+
const convertXybToRgb = ({ x, y, b, alpha }) => {
|
|
12814
|
+
if (x === undefined) x = 0;
|
|
12815
|
+
if (y === undefined) y = 0;
|
|
12816
|
+
if (b === undefined) b = 0;
|
|
12817
|
+
const l = transfer(x + y) - bias;
|
|
12818
|
+
const m = transfer(y - x) - bias;
|
|
12819
|
+
/* Account for chroma from luma: add Y back to B */
|
|
12820
|
+
const s = transfer(b + y) - bias;
|
|
12821
|
+
|
|
12822
|
+
const res = convertLrgbToRgb({
|
|
12823
|
+
r:
|
|
12824
|
+
11.031566904639861 * l -
|
|
12825
|
+
9.866943908131562 * m -
|
|
12826
|
+
0.16462299650829934 * s,
|
|
12827
|
+
g:
|
|
12828
|
+
-3.2541473810744237 * l +
|
|
12829
|
+
4.418770377582723 * m -
|
|
12830
|
+
0.16462299650829934 * s,
|
|
12831
|
+
b:
|
|
12832
|
+
-3.6588512867136815 * l +
|
|
12833
|
+
2.7129230459360922 * m +
|
|
12834
|
+
1.9459282407775895 * s
|
|
12835
|
+
});
|
|
12836
|
+
if (alpha !== undefined) res.alpha = alpha;
|
|
12837
|
+
return res;
|
|
12838
|
+
};
|
|
12839
|
+
|
|
12840
|
+
/*
|
|
12841
|
+
The XYB color space, used in JPEG XL.
|
|
12842
|
+
Reference: https://ds.jpeg.org/whitepapers/jpeg-xl-whitepaper.pdf
|
|
12843
|
+
*/
|
|
12844
|
+
|
|
12845
|
+
const definition$3 = {
|
|
12846
|
+
mode: 'xyb',
|
|
12847
|
+
channels: ['x', 'y', 'b', 'alpha'],
|
|
12848
|
+
parse: ['--xyb'],
|
|
12849
|
+
serialize: '--xyb',
|
|
12850
|
+
|
|
12851
|
+
toMode: {
|
|
12852
|
+
rgb: convertXybToRgb
|
|
12853
|
+
},
|
|
12854
|
+
|
|
12855
|
+
fromMode: {
|
|
12856
|
+
rgb: convertRgbToXyb
|
|
12857
|
+
},
|
|
12858
|
+
|
|
12859
|
+
ranges: {
|
|
12860
|
+
x: [-0.0154, 0.0281],
|
|
12861
|
+
y: [0, 0.8453],
|
|
12862
|
+
b: [-0.2778, 0.388]
|
|
12863
|
+
},
|
|
12864
|
+
|
|
12865
|
+
interpolate: {
|
|
12866
|
+
x: interpolatorLinear,
|
|
12867
|
+
y: interpolatorLinear,
|
|
12868
|
+
b: interpolatorLinear,
|
|
12869
|
+
alpha: { use: interpolatorLinear, fixup: fixupAlpha }
|
|
12870
|
+
}
|
|
12871
|
+
};
|
|
12872
|
+
|
|
12873
|
+
/*
|
|
12874
|
+
The XYZ D50 color space
|
|
12875
|
+
-----------------------
|
|
12876
|
+
*/
|
|
12877
|
+
|
|
12878
|
+
|
|
12879
|
+
const definition$2 = {
|
|
12880
|
+
mode: 'xyz50',
|
|
12881
|
+
parse: ['xyz-d50'],
|
|
12882
|
+
serialize: 'xyz-d50',
|
|
12883
|
+
|
|
12884
|
+
toMode: {
|
|
12885
|
+
rgb: convertXyz50ToRgb,
|
|
12886
|
+
lab: convertXyz50ToLab
|
|
12887
|
+
},
|
|
12888
|
+
|
|
12889
|
+
fromMode: {
|
|
12890
|
+
rgb: convertRgbToXyz50,
|
|
12891
|
+
lab: convertLabToXyz50
|
|
12892
|
+
},
|
|
12893
|
+
|
|
12894
|
+
channels: ['x', 'y', 'z', 'alpha'],
|
|
12895
|
+
|
|
12896
|
+
ranges: {
|
|
12897
|
+
x: [0, 0.964],
|
|
12898
|
+
y: [0, 0.999],
|
|
12899
|
+
z: [0, 0.825]
|
|
12900
|
+
},
|
|
12901
|
+
|
|
12902
|
+
interpolate: {
|
|
12903
|
+
x: interpolatorLinear,
|
|
12904
|
+
y: interpolatorLinear,
|
|
12905
|
+
z: interpolatorLinear,
|
|
12906
|
+
alpha: { use: interpolatorLinear, fixup: fixupAlpha }
|
|
12907
|
+
}
|
|
12908
|
+
};
|
|
12909
|
+
|
|
12910
|
+
/*
|
|
12911
|
+
Chromatic adaptation of CIE XYZ from D65 to D50 white point
|
|
12912
|
+
using the Bradford method.
|
|
12913
|
+
|
|
12914
|
+
References:
|
|
12915
|
+
* https://drafts.csswg.org/css-color/#color-conversion-code
|
|
12916
|
+
* http://www.brucelindbloom.com/index.html?Eqn_ChromAdapt.html
|
|
12917
|
+
*/
|
|
12918
|
+
|
|
12919
|
+
const convertXyz65ToXyz50 = xyz65 => {
|
|
12920
|
+
let { x, y, z, alpha } = xyz65;
|
|
12921
|
+
if (x === undefined) x = 0;
|
|
12922
|
+
if (y === undefined) y = 0;
|
|
12923
|
+
if (z === undefined) z = 0;
|
|
12924
|
+
let res = {
|
|
12925
|
+
mode: 'xyz50',
|
|
12926
|
+
x:
|
|
12927
|
+
1.0479298208405488 * x +
|
|
12928
|
+
0.0229467933410191 * y -
|
|
12929
|
+
0.0501922295431356 * z,
|
|
12930
|
+
y:
|
|
12931
|
+
0.0296278156881593 * x +
|
|
12932
|
+
0.990434484573249 * y -
|
|
12933
|
+
0.0170738250293851 * z,
|
|
12934
|
+
z:
|
|
12935
|
+
-0.0092430581525912 * x +
|
|
12936
|
+
0.0150551448965779 * y +
|
|
12937
|
+
0.7518742899580008 * z
|
|
12938
|
+
};
|
|
12939
|
+
if (alpha !== undefined) {
|
|
12940
|
+
res.alpha = alpha;
|
|
12941
|
+
}
|
|
12942
|
+
return res;
|
|
12943
|
+
};
|
|
12944
|
+
|
|
12945
|
+
/*
|
|
12946
|
+
Chromatic adaptation of CIE XYZ from D50 to D65 white point
|
|
12947
|
+
using the Bradford method.
|
|
12948
|
+
|
|
12949
|
+
References:
|
|
12950
|
+
* https://drafts.csswg.org/css-color/#color-conversion-code
|
|
12951
|
+
* http://www.brucelindbloom.com/index.html?Eqn_ChromAdapt.html
|
|
12952
|
+
*/
|
|
12953
|
+
|
|
12954
|
+
const convertXyz50ToXyz65 = xyz50 => {
|
|
12955
|
+
let { x, y, z, alpha } = xyz50;
|
|
12956
|
+
if (x === undefined) x = 0;
|
|
12957
|
+
if (y === undefined) y = 0;
|
|
12958
|
+
if (z === undefined) z = 0;
|
|
12959
|
+
let res = {
|
|
12960
|
+
mode: 'xyz65',
|
|
12961
|
+
x:
|
|
12962
|
+
0.9554734527042182 * x -
|
|
12963
|
+
0.0230985368742614 * y +
|
|
12964
|
+
0.0632593086610217 * z,
|
|
12965
|
+
y:
|
|
12966
|
+
-0.0283697069632081 * x +
|
|
12967
|
+
1.0099954580058226 * y +
|
|
12968
|
+
0.021041398966943 * z,
|
|
12969
|
+
z:
|
|
12970
|
+
0.0123140016883199 * x -
|
|
12971
|
+
0.0205076964334779 * y +
|
|
12972
|
+
1.3303659366080753 * z
|
|
12973
|
+
};
|
|
12974
|
+
if (alpha !== undefined) {
|
|
12975
|
+
res.alpha = alpha;
|
|
12976
|
+
}
|
|
12977
|
+
return res;
|
|
12978
|
+
};
|
|
12979
|
+
|
|
12980
|
+
/*
|
|
12981
|
+
The XYZ D65 color space
|
|
12982
|
+
-----------------------
|
|
12983
|
+
*/
|
|
12984
|
+
|
|
12985
|
+
|
|
12986
|
+
const definition$1 = {
|
|
12987
|
+
mode: 'xyz65',
|
|
12988
|
+
|
|
12989
|
+
toMode: {
|
|
12990
|
+
rgb: convertXyz65ToRgb,
|
|
12991
|
+
xyz50: convertXyz65ToXyz50
|
|
12992
|
+
},
|
|
12993
|
+
|
|
12994
|
+
fromMode: {
|
|
12995
|
+
rgb: convertRgbToXyz65,
|
|
12996
|
+
xyz50: convertXyz50ToXyz65
|
|
12997
|
+
},
|
|
12998
|
+
|
|
12999
|
+
ranges: {
|
|
13000
|
+
x: [0, 0.95],
|
|
13001
|
+
y: [0, 1],
|
|
13002
|
+
z: [0, 1.088]
|
|
13003
|
+
},
|
|
13004
|
+
|
|
13005
|
+
channels: ['x', 'y', 'z', 'alpha'],
|
|
13006
|
+
|
|
13007
|
+
parse: ['xyz', 'xyz-d65'],
|
|
13008
|
+
serialize: 'xyz-d65',
|
|
13009
|
+
|
|
13010
|
+
interpolate: {
|
|
13011
|
+
x: interpolatorLinear,
|
|
13012
|
+
y: interpolatorLinear,
|
|
13013
|
+
z: interpolatorLinear,
|
|
13014
|
+
alpha: { use: interpolatorLinear, fixup: fixupAlpha }
|
|
13015
|
+
}
|
|
13016
|
+
};
|
|
13017
|
+
|
|
13018
|
+
const convertRgbToYiq = ({ r, g, b, alpha }) => {
|
|
13019
|
+
if (r === undefined) r = 0;
|
|
13020
|
+
if (g === undefined) g = 0;
|
|
13021
|
+
if (b === undefined) b = 0;
|
|
13022
|
+
const res = {
|
|
13023
|
+
mode: 'yiq',
|
|
13024
|
+
y: 0.29889531 * r + 0.58662247 * g + 0.11448223 * b,
|
|
13025
|
+
i: 0.59597799 * r - 0.2741761 * g - 0.32180189 * b,
|
|
13026
|
+
q: 0.21147017 * r - 0.52261711 * g + 0.31114694 * b
|
|
13027
|
+
};
|
|
13028
|
+
if (alpha !== undefined) res.alpha = alpha;
|
|
13029
|
+
return res;
|
|
13030
|
+
};
|
|
13031
|
+
|
|
13032
|
+
const convertYiqToRgb = ({ y, i, q, alpha }) => {
|
|
13033
|
+
if (y === undefined) y = 0;
|
|
13034
|
+
if (i === undefined) i = 0;
|
|
13035
|
+
if (q === undefined) q = 0;
|
|
13036
|
+
const res = {
|
|
13037
|
+
mode: 'rgb',
|
|
13038
|
+
r: y + 0.95608445 * i + 0.6208885 * q,
|
|
13039
|
+
g: y - 0.27137664 * i - 0.6486059 * q,
|
|
13040
|
+
b: y - 1.10561724 * i + 1.70250126 * q
|
|
13041
|
+
};
|
|
13042
|
+
if (alpha !== undefined) res.alpha = alpha;
|
|
13043
|
+
return res;
|
|
13044
|
+
};
|
|
13045
|
+
|
|
13046
|
+
/*
|
|
13047
|
+
YIQ Color Space
|
|
13048
|
+
|
|
13049
|
+
References
|
|
13050
|
+
----------
|
|
13051
|
+
|
|
13052
|
+
Wikipedia:
|
|
13053
|
+
https://en.wikipedia.org/wiki/YIQ
|
|
13054
|
+
|
|
13055
|
+
"Measuring perceived color difference using YIQ NTSC
|
|
13056
|
+
transmission color space in mobile applications"
|
|
13057
|
+
|
|
13058
|
+
by Yuriy Kotsarenko, Fernando Ramos in:
|
|
13059
|
+
Programación Matemática y Software (2010)
|
|
13060
|
+
|
|
13061
|
+
Available at:
|
|
13062
|
+
|
|
13063
|
+
http://www.progmat.uaem.mx:8080/artVol2Num2/Articulo3Vol2Num2.pdf
|
|
13064
|
+
*/
|
|
13065
|
+
|
|
13066
|
+
const definition = {
|
|
13067
|
+
mode: 'yiq',
|
|
13068
|
+
|
|
13069
|
+
toMode: {
|
|
13070
|
+
rgb: convertYiqToRgb
|
|
13071
|
+
},
|
|
13072
|
+
|
|
13073
|
+
fromMode: {
|
|
13074
|
+
rgb: convertRgbToYiq
|
|
13075
|
+
},
|
|
13076
|
+
|
|
13077
|
+
channels: ['y', 'i', 'q', 'alpha'],
|
|
13078
|
+
|
|
13079
|
+
parse: ['--yiq'],
|
|
13080
|
+
serialize: '--yiq',
|
|
13081
|
+
|
|
13082
|
+
ranges: {
|
|
13083
|
+
i: [-0.595, 0.595],
|
|
13084
|
+
q: [-0.522, 0.522]
|
|
13085
|
+
},
|
|
13086
|
+
|
|
13087
|
+
interpolate: {
|
|
13088
|
+
y: interpolatorLinear,
|
|
13089
|
+
i: interpolatorLinear,
|
|
13090
|
+
q: interpolatorLinear,
|
|
13091
|
+
alpha: { use: interpolatorLinear, fixup: fixupAlpha }
|
|
13092
|
+
}
|
|
13093
|
+
};
|
|
13094
|
+
|
|
13095
|
+
// From: https://github.com/d3/d3-format/issues/32
|
|
13096
|
+
|
|
13097
|
+
const r$2 = (value, precision) =>
|
|
13098
|
+
Math.round(value * (precision = Math.pow(10, precision))) / precision;
|
|
13099
|
+
|
|
13100
|
+
const round$1 =
|
|
13101
|
+
(precision = 4) =>
|
|
13102
|
+
value =>
|
|
13103
|
+
typeof value === 'number' ? r$2(value, precision) : value;
|
|
13104
|
+
|
|
13105
|
+
let twoDecimals = round$1(2);
|
|
13106
|
+
|
|
13107
|
+
const clamp$1 = value => Math.max(0, Math.min(1, value || 0));
|
|
13108
|
+
const fixup = value => Math.round(clamp$1(value) * 255);
|
|
13109
|
+
|
|
13110
|
+
const rgb = converter('rgb');
|
|
13111
|
+
|
|
13112
|
+
const serializeRgb = color => {
|
|
13113
|
+
if (color === undefined) {
|
|
13114
|
+
return undefined;
|
|
13115
|
+
}
|
|
13116
|
+
|
|
13117
|
+
let r = fixup(color.r);
|
|
13118
|
+
let g = fixup(color.g);
|
|
13119
|
+
let b = fixup(color.b);
|
|
13120
|
+
|
|
13121
|
+
if (color.alpha === undefined || color.alpha === 1) {
|
|
13122
|
+
// opaque color
|
|
13123
|
+
return `rgb(${r}, ${g}, ${b})`;
|
|
13124
|
+
} else {
|
|
13125
|
+
// transparent color
|
|
13126
|
+
return `rgba(${r}, ${g}, ${b}, ${twoDecimals(clamp$1(color.alpha))})`;
|
|
13127
|
+
}
|
|
13128
|
+
};
|
|
13129
|
+
const formatRgb = c => serializeRgb(rgb(c));
|
|
13130
|
+
|
|
13131
|
+
// Color space definitions
|
|
13132
|
+
|
|
13133
|
+
useMode(definition$q);
|
|
13134
|
+
useMode(definition$p);
|
|
13135
|
+
useMode(definition$o);
|
|
13136
|
+
useMode(definition$n);
|
|
13137
|
+
useMode(definition$m);
|
|
13138
|
+
useMode(definition$l);
|
|
13139
|
+
useMode(definition$k);
|
|
13140
|
+
useMode(definition$j);
|
|
13141
|
+
useMode(definition$i);
|
|
13142
|
+
useMode(definition$h);
|
|
13143
|
+
useMode(definition$g);
|
|
13144
|
+
useMode(definition$f);
|
|
13145
|
+
useMode(definition$e);
|
|
13146
|
+
useMode(definition$d);
|
|
13147
|
+
useMode(definition$c);
|
|
13148
|
+
useMode(definition$b);
|
|
13149
|
+
useMode(definition$a);
|
|
13150
|
+
useMode(definition$9);
|
|
13151
|
+
useMode(modeOkhsl);
|
|
13152
|
+
useMode(modeOkhsv);
|
|
13153
|
+
useMode(definition$8);
|
|
13154
|
+
useMode(definition$7);
|
|
13155
|
+
useMode(definition$6);
|
|
13156
|
+
useMode(definition$5);
|
|
13157
|
+
useMode(definition$4);
|
|
13158
|
+
useMode(definition$r);
|
|
13159
|
+
useMode(definition$3);
|
|
13160
|
+
useMode(definition$2);
|
|
13161
|
+
useMode(definition$1);
|
|
13162
|
+
useMode(definition);
|
|
13163
|
+
|
|
8670
13164
|
const formatColor = (color) => {
|
|
8671
|
-
var _a
|
|
8672
|
-
// If color is undefined, return a default
|
|
8673
|
-
if (!color) {
|
|
8674
|
-
return "#000000";
|
|
8675
|
-
}
|
|
8676
|
-
// If it's already a hex, rgb, or hsl color, return as is
|
|
13165
|
+
var _a;
|
|
8677
13166
|
if (color.startsWith("#") ||
|
|
8678
13167
|
color.startsWith("rgb") ||
|
|
8679
13168
|
color.startsWith("hsl")) {
|
|
8680
13169
|
return color;
|
|
8681
13170
|
}
|
|
8682
|
-
|
|
8683
|
-
|
|
8684
|
-
|
|
8685
|
-
|
|
8686
|
-
const tempElement = document.createElement("div");
|
|
8687
|
-
tempElement.style.color = color;
|
|
8688
|
-
document.body.appendChild(tempElement);
|
|
8689
|
-
// Get computed style to convert to rgb
|
|
8690
|
-
const computedColor = window.getComputedStyle(tempElement).color;
|
|
8691
|
-
document.body.removeChild(tempElement);
|
|
8692
|
-
// Convert rgb to hex
|
|
8693
|
-
const rgbMatch = computedColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/);
|
|
8694
|
-
if (rgbMatch) {
|
|
8695
|
-
const r = parseInt((_a = rgbMatch[1]) !== null && _a !== void 0 ? _a : "0");
|
|
8696
|
-
const g = parseInt((_b = rgbMatch[2]) !== null && _b !== void 0 ? _b : "0");
|
|
8697
|
-
const b = parseInt((_c = rgbMatch[3]) !== null && _c !== void 0 ? _c : "0");
|
|
8698
|
-
return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
|
|
8699
|
-
}
|
|
8700
|
-
}
|
|
8701
|
-
catch (error) {
|
|
8702
|
-
console.warn("Failed to convert oklch color to hex:", color, error);
|
|
13171
|
+
try {
|
|
13172
|
+
const parsedColor = parse$1(color);
|
|
13173
|
+
if (!parsedColor) {
|
|
13174
|
+
return color;
|
|
8703
13175
|
}
|
|
13176
|
+
return (_a = formatRgb(parsedColor)) !== null && _a !== void 0 ? _a : color;
|
|
13177
|
+
}
|
|
13178
|
+
catch (error) {
|
|
13179
|
+
console.warn("Failed to format color:", color, error);
|
|
13180
|
+
return color;
|
|
8704
13181
|
}
|
|
8705
|
-
// Fallback to a default color if conversion fails
|
|
8706
|
-
return "#000000";
|
|
8707
13182
|
};
|
|
13183
|
+
|
|
8708
13184
|
function Appearance({ appearance, fonts, shadowRef, }) {
|
|
8709
13185
|
React.useEffect(() => {
|
|
8710
13186
|
var _a;
|
|
@@ -8828,6 +13304,12 @@ const getColorVariablesFromAppearanceConfig = (appearance) => {
|
|
|
8828
13304
|
};
|
|
8829
13305
|
return colors;
|
|
8830
13306
|
};
|
|
13307
|
+
const getFontSize = () => {
|
|
13308
|
+
if (typeof window !== "undefined" && window.innerWidth < 768) {
|
|
13309
|
+
return "16px"; // Mobile — prevent zoom
|
|
13310
|
+
}
|
|
13311
|
+
return "14px"; // Desktop
|
|
13312
|
+
};
|
|
8831
13313
|
const convertCheckoutAppearanceToStripeAppearance = (appearance, fonts) => {
|
|
8832
13314
|
const currentVariables = getVariablesFromAppearanceConfig(appearance);
|
|
8833
13315
|
const newAppearance = {
|
|
@@ -8835,17 +13317,17 @@ const convertCheckoutAppearanceToStripeAppearance = (appearance, fonts) => {
|
|
|
8835
13317
|
rules: {
|
|
8836
13318
|
".Input": {
|
|
8837
13319
|
padding: "12px",
|
|
8838
|
-
border: `1px solid ${currentVariables["--border"]}`,
|
|
8839
|
-
backgroundColor: currentVariables["--background"],
|
|
8840
|
-
fontSize:
|
|
13320
|
+
border: `1px solid ${formatColor(currentVariables["--border"])}`,
|
|
13321
|
+
backgroundColor: formatColor(currentVariables["--background"]),
|
|
13322
|
+
fontSize: getFontSize(),
|
|
8841
13323
|
outline: "none",
|
|
8842
13324
|
},
|
|
8843
13325
|
".Input:focus": {
|
|
8844
|
-
backgroundColor: currentVariables["--secondary"],
|
|
13326
|
+
backgroundColor: formatColor(currentVariables["--secondary"]),
|
|
8845
13327
|
},
|
|
8846
13328
|
".Input::placeholder": {
|
|
8847
|
-
fontSize:
|
|
8848
|
-
color: currentVariables["--muted-foreground"],
|
|
13329
|
+
fontSize: getFontSize(),
|
|
13330
|
+
color: formatColor(currentVariables["--muted-foreground"]),
|
|
8849
13331
|
},
|
|
8850
13332
|
".Label": {
|
|
8851
13333
|
marginBottom: "8px",
|
|
@@ -8863,16 +13345,16 @@ const convertCheckoutAppearanceToStripeAppearance = (appearance, fonts) => {
|
|
|
8863
13345
|
// },
|
|
8864
13346
|
".Tab": {
|
|
8865
13347
|
padding: "10px 12px 8px 12px",
|
|
8866
|
-
border: `1px solid ${currentVariables["--border"]}`,
|
|
8867
|
-
backgroundColor: currentVariables["--background"],
|
|
13348
|
+
border: `1px solid ${formatColor(currentVariables["--border"])}`,
|
|
13349
|
+
backgroundColor: formatColor(currentVariables["--background"]),
|
|
8868
13350
|
},
|
|
8869
13351
|
".Tab:hover": {
|
|
8870
|
-
backgroundColor: currentVariables["--secondary"],
|
|
13352
|
+
backgroundColor: formatColor(currentVariables["--secondary"]),
|
|
8871
13353
|
},
|
|
8872
13354
|
".Tab--selected, .Tab--selected:focus, .Tab--selected:hover": {
|
|
8873
|
-
border: `1px solid ${currentVariables["--border"]}`,
|
|
8874
|
-
backgroundColor: currentVariables["--secondary"],
|
|
8875
|
-
color: currentVariables["--foreground"],
|
|
13355
|
+
border: `1px solid ${formatColor(currentVariables["--border"])}`,
|
|
13356
|
+
backgroundColor: formatColor(currentVariables["--secondary"]),
|
|
13357
|
+
color: formatColor(currentVariables["--foreground"]),
|
|
8876
13358
|
},
|
|
8877
13359
|
},
|
|
8878
13360
|
variables: {
|
|
@@ -18264,7 +22746,7 @@ const FloatingLabel = React__namespace.forwardRef((_a, ref) => {
|
|
|
18264
22746
|
const LabelComponent = isFormLabel ? FormLabel : Label;
|
|
18265
22747
|
const isEmpty = !value || value.length === 0;
|
|
18266
22748
|
const isFloating = isFocused || !isEmpty;
|
|
18267
|
-
return (jsxRuntime.jsxs("div", { className: cn("pointer-events-none absolute translate-x-2", "z-10 block", "duration-200 ease-in-out", isFloating ? "top-0 -translate-y-1/2" : "top-1/2 -translate-y-1/2", className), children: [jsxRuntime.jsx("div", { className: "bg-background absolute left-0 right-0 top-1/2 z-0 h-
|
|
22749
|
+
return (jsxRuntime.jsxs("div", { className: cn("pointer-events-none absolute translate-x-2", "z-10 block", "duration-200 ease-in-out", isFloating ? "top-0 -translate-y-1/2" : "top-1/2 -translate-y-1/2", className), children: [jsxRuntime.jsx("div", { className: "bg-background absolute left-0 right-0 top-1/2 z-0 h-[2px] -translate-x-0 -translate-y-1/2" }), jsxRuntime.jsxs(LabelComponent, Object.assign({ ref: ref, className: cn("relative z-10 block",
|
|
18268
22750
|
// "after:bg-background after:absolute after:left-0 after:right-0 after:top-1/2 after:z-0 after:h-px after:-translate-y-1/2 after:content-['']",
|
|
18269
22751
|
"m-0 p-0 px-1 leading-none", "duration-200 ease-in-out", isFloating
|
|
18270
22752
|
? "text-xs font-medium"
|
|
@@ -35096,7 +39578,7 @@ function AddressInput({ className = "", proxy, clientSecret, latitude, longitude
|
|
|
35096
39578
|
}
|
|
35097
39579
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
35098
39580
|
}, [cityInput]);
|
|
35099
|
-
return (jsxRuntime.jsxs("div", { className: cn("space-y-5", className), children: [jsxRuntime.jsx(CountryInput, { form: form, prefix: "address", label: t("CheckoutEmbed.CustomerForm.address.country"), emptyText: t("CheckoutEmbed.CustomerForm.address.countryNoCountry"), searchText: t("CheckoutEmbed.CustomerForm.address.countrySearch"), locale: locale }), jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(InputGroup, { name: "address.line1", label: showAllInputs
|
|
39581
|
+
return (jsxRuntime.jsxs("div", { className: cn("space-y-5", className), children: [jsxRuntime.jsx(CountryInput, { form: form, prefix: "address", label: t("CheckoutEmbed.CustomerForm.address.country"), emptyText: t("CheckoutEmbed.CustomerForm.address.countryNoCountry"), searchText: t("CheckoutEmbed.CustomerForm.address.countrySearch"), locale: locale }), jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(InputGroup, { autoComplete: "address-line1", name: "address.line1", label: showAllInputs
|
|
35100
39582
|
? t("CheckoutEmbed.CustomerForm.address.line1")
|
|
35101
39583
|
: t("CheckoutEmbed.CustomerForm.address.line1-autocomplete"), required: showAllInputs, icon: jsxRuntime.jsx(Search, { className: "h-4 w-4" }), showIcon: !showAllInputs, onFocus: () => setShowSuggestions(true), onBlur: () => setTimeout(() => setShowSuggestions(false), 200) }), !showAllInputs &&
|
|
35102
39584
|
(showSuggestions || isLoading || isLoadingLookup) && (jsxRuntime.jsx("div", { className: "bg-background border-border absolute left-0 right-0 top-full z-50 mt-1 rounded-md border shadow-lg", "data-dropdown": "suggestions", children: isLoading || isLoadingLookup ? (jsxRuntime.jsxs("div", { className: "text-muted-foreground border-border flex gap-2 border-b p-3 text-sm", children: [isLoadingLookup
|
|
@@ -35105,7 +39587,7 @@ function AddressInput({ className = "", proxy, clientSecret, latitude, longitude
|
|
|
35105
39587
|
setShowApartmentField(true);
|
|
35106
39588
|
form.setValue("address.line2", "");
|
|
35107
39589
|
form.setFocus("address.line2");
|
|
35108
|
-
}, className: "text-muted-foreground hover:text-foreground flex cursor-pointer items-center gap-2 text-sm transition-colors", children: [jsxRuntime.jsx(Plus, { className: "h-4 w-4" }), t("CheckoutEmbed.CustomerForm.address.addLine2")] }) }), jsxRuntime.jsx("div", { className: cn(!showApartmentField && "-mt-4 h-0 max-h-0 w-0 max-w-0 opacity-0"), children: jsxRuntime.jsx(InputGroup, { name: "address.line2", label: t("CheckoutEmbed.CustomerForm.address.line2") }) }), jsxRuntime.jsxs("div", { className: cn("grid gap-4", renderProvinceInput ? "md:grid-cols-3" : "grid-cols-2"), children: [jsxRuntime.jsx(InputGroup, { name: "address.city", label: "City", required: true }), renderProvinceInput && (jsxRuntime.jsx(CompoboxGroup, { form: form, name: "address.provinceCode", label: t("CheckoutEmbed.CustomerForm.address.province"), options: availableProvinces.map((state) => ({
|
|
39590
|
+
}, className: "text-muted-foreground hover:text-foreground flex cursor-pointer items-center gap-2 text-sm transition-colors", children: [jsxRuntime.jsx(Plus, { className: "h-4 w-4" }), t("CheckoutEmbed.CustomerForm.address.addLine2")] }) }), jsxRuntime.jsx("div", { className: cn(!showApartmentField && "-mt-4 h-0 max-h-0 w-0 max-w-0 opacity-0"), children: jsxRuntime.jsx(InputGroup, { autoComplete: "address-line2", name: "address.line2", label: t("CheckoutEmbed.CustomerForm.address.line2") }) }), jsxRuntime.jsxs("div", { className: cn("grid gap-4", renderProvinceInput ? "md:grid-cols-3" : "grid-cols-2"), children: [jsxRuntime.jsx(InputGroup, { name: "address.city", label: "City", required: true }), renderProvinceInput && (jsxRuntime.jsx(CompoboxGroup, { form: form, name: "address.provinceCode", label: t("CheckoutEmbed.CustomerForm.address.province"), options: availableProvinces.map((state) => ({
|
|
35109
39591
|
value: state.code,
|
|
35110
39592
|
label: state.name,
|
|
35111
39593
|
})), onSelect: (value) => {
|
|
@@ -35114,7 +39596,7 @@ function AddressInput({ className = "", proxy, clientSecret, latitude, longitude
|
|
|
35114
39596
|
if (provinceName) {
|
|
35115
39597
|
form.setValue("address.province", provinceName);
|
|
35116
39598
|
}
|
|
35117
|
-
}, searchText: t("CheckoutEmbed.CustomerForm.address.provinceSearch"), emptyText: t("CheckoutEmbed.CustomerForm.address.provinceNoProvinces"), required: true })), jsxRuntime.jsx(InputGroup, { name: "address.zipCode", label: t("CheckoutEmbed.CustomerForm.address.zipCode"), required: true })] })] })] }));
|
|
39599
|
+
}, searchText: t("CheckoutEmbed.CustomerForm.address.provinceSearch"), emptyText: t("CheckoutEmbed.CustomerForm.address.provinceNoProvinces"), required: true })), jsxRuntime.jsx(InputGroup, { autoComplete: "postal-code", name: "address.zipCode", label: t("CheckoutEmbed.CustomerForm.address.zipCode"), required: true })] })] })] }));
|
|
35118
39600
|
}
|
|
35119
39601
|
|
|
35120
39602
|
function SubmitButton(_a) {
|
|
@@ -36630,6 +41112,71 @@ var loadStripe = function loadStripe() {
|
|
|
36630
41112
|
});
|
|
36631
41113
|
};
|
|
36632
41114
|
|
|
41115
|
+
class BetterStoreCheckoutEmbedPaymentElement extends HTMLElement {
|
|
41116
|
+
constructor() {
|
|
41117
|
+
super();
|
|
41118
|
+
this.updatePosition = () => {
|
|
41119
|
+
const rect = this.getBoundingClientRect();
|
|
41120
|
+
this.portalContainer.style.top = `${rect.top + window.scrollY}px`;
|
|
41121
|
+
this.portalContainer.style.left = `${rect.left + window.scrollX}px`;
|
|
41122
|
+
this.portalContainer.style.width = `${rect.width}px`;
|
|
41123
|
+
this.portalContainer.style.height = `${rect.height}px`;
|
|
41124
|
+
};
|
|
41125
|
+
this.updateStripeElementHeight = () => {
|
|
41126
|
+
const stripeElement = this.portalContainer.querySelector(".StripeElement");
|
|
41127
|
+
if (stripeElement) {
|
|
41128
|
+
const { height } = stripeElement.getBoundingClientRect();
|
|
41129
|
+
this.wrapper.style.height = `${height}px`;
|
|
41130
|
+
}
|
|
41131
|
+
};
|
|
41132
|
+
this.observeStripeElement = () => {
|
|
41133
|
+
// Wait a bit for the Stripe element to be rendered
|
|
41134
|
+
setTimeout(() => {
|
|
41135
|
+
const stripeElement = this.portalContainer.querySelector(".StripeElement");
|
|
41136
|
+
if (stripeElement) {
|
|
41137
|
+
this.resizeObserver.observe(stripeElement);
|
|
41138
|
+
this.updateStripeElementHeight(); // Initial height update
|
|
41139
|
+
}
|
|
41140
|
+
}, 100);
|
|
41141
|
+
};
|
|
41142
|
+
this.shadow = this.attachShadow({ mode: "open" });
|
|
41143
|
+
// Render a <slot> or placeholder into the Shadow DOM
|
|
41144
|
+
this.wrapper = document.createElement("div");
|
|
41145
|
+
this.wrapper.style.width = "100%";
|
|
41146
|
+
this.wrapper.style.minHeight = "220px";
|
|
41147
|
+
this.wrapper.innerHTML = `<slot></slot>`;
|
|
41148
|
+
this.shadow.appendChild(this.wrapper);
|
|
41149
|
+
// Create or find a container outside Shadow DOM
|
|
41150
|
+
this.portalContainer = document.createElement("div");
|
|
41151
|
+
this.portalContainer.style.position = "absolute"; // or fixed, up to you
|
|
41152
|
+
document.body.appendChild(this.portalContainer); // render into light DOM
|
|
41153
|
+
// Initialize ResizeObserver to watch for Stripe element height changes
|
|
41154
|
+
this.resizeObserver = new ResizeObserver(() => {
|
|
41155
|
+
this.updateStripeElementHeight();
|
|
41156
|
+
});
|
|
41157
|
+
}
|
|
41158
|
+
connectedCallback() {
|
|
41159
|
+
// Move children to portalContainer (light DOM)
|
|
41160
|
+
const children = Array.from(this.children);
|
|
41161
|
+
children.forEach((child) => {
|
|
41162
|
+
this.portalContainer.appendChild(child);
|
|
41163
|
+
});
|
|
41164
|
+
this.updatePosition();
|
|
41165
|
+
window.addEventListener("resize", this.updatePosition);
|
|
41166
|
+
window.addEventListener("scroll", this.updatePosition, true);
|
|
41167
|
+
// Start observing the Stripe element for height changes
|
|
41168
|
+
this.observeStripeElement();
|
|
41169
|
+
}
|
|
41170
|
+
disconnectedCallback() {
|
|
41171
|
+
// Clean up
|
|
41172
|
+
this.portalContainer.remove();
|
|
41173
|
+
window.removeEventListener("resize", this.updatePosition);
|
|
41174
|
+
window.removeEventListener("scroll", this.updatePosition, true);
|
|
41175
|
+
this.resizeObserver.disconnect();
|
|
41176
|
+
}
|
|
41177
|
+
}
|
|
41178
|
+
customElements.define("betterstore-checkout-embed-payment-element", BetterStoreCheckoutEmbedPaymentElement);
|
|
41179
|
+
|
|
36633
41180
|
const useCheckout = create((set) => ({
|
|
36634
41181
|
isSubmitting: false,
|
|
36635
41182
|
setIsSubmitting: (isSubmitting) => set({ isSubmitting }),
|
|
@@ -36664,7 +41211,7 @@ const CheckoutForm$1 = ({ onSuccess, onError, children, setSubmitting, }) => {
|
|
|
36664
41211
|
onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
|
|
36665
41212
|
}
|
|
36666
41213
|
});
|
|
36667
|
-
return (jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [jsxRuntime.
|
|
41214
|
+
return (jsxRuntime.jsxs("form", { className: "w-full pb-40 sm:pb-0", onSubmit: handleSubmit, children: [jsxRuntime.jsx("betterstore-checkout-embed-payment-element", { children: jsxRuntime.jsx(reactStripe_umdExports.PaymentElement, {}) }), errorMessage && (jsxRuntime.jsx("p", { className: "text-destructive -mb-2 mt-2 text-sm", children: errorMessage })), children] }));
|
|
36668
41215
|
};
|
|
36669
41216
|
var CheckoutForm$2 = React.memo(CheckoutForm$1);
|
|
36670
41217
|
|
|
@@ -36683,12 +41230,7 @@ var PaymentElement$1 = React.memo(PaymentElement);
|
|
|
36683
41230
|
function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, publicKey, paymentComponentKey, }) {
|
|
36684
41231
|
const [isSubmitting, setIsSubmitting] = React.useState(false);
|
|
36685
41232
|
const { t } = useTranslation();
|
|
36686
|
-
return (jsxRuntime.jsxs("div", { className: "space-y-6", children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("h2", { className: "mb-2", children: t("CheckoutEmbed.Payment.title") }), jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: t("CheckoutEmbed.Payment.description") })] }), jsxRuntime.jsxs("div", { className: "space-y-2", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxRuntime.jsxs("p", { children: [jsxRuntime.jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.contact") }), " ", jsxRuntime.jsx("span", { className: "text-muted-foreground", children: contactEmail })] }), jsxRuntime.jsx(Button, { variant: "link", size: "link", onClick: onDoubleBack, children: t("CheckoutEmbed.Shipping.change") })] }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxRuntime.jsxs("p", { children: [jsxRuntime.jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.address") }), " ", jsxRuntime.jsx("span", { className: "text-muted-foreground", children: shippingAddress })] }), jsxRuntime.jsx(Button, { variant: "link", size: "link", onClick: onDoubleBack, children: t("CheckoutEmbed.Shipping.change") })] }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxRuntime.jsxs("p", { children: [jsxRuntime.jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.shipping") }), " ", jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [shippingName, " \u00B7 ", shippingPrice] })] }), jsxRuntime.jsx(Button, { variant: "link", size: "link", onClick: onBack, children: t("CheckoutEmbed.Shipping.change") })] })] }), jsxRuntime.jsx("div", { className: "mt-8", children: paymentSecret && (jsxRuntime.jsx(PaymentElement$1, { fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance, fonts), locale: locale, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, setSubmitting: setIsSubmitting, publicKey: publicKey, children: jsxRuntime.jsxs("div", {
|
|
36687
|
-
display: "flex",
|
|
36688
|
-
justifyContent: "space-between",
|
|
36689
|
-
alignItems: "center",
|
|
36690
|
-
paddingTop: "2rem",
|
|
36691
|
-
}, children: [jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", onClick: onBack, children: [jsxRuntime.jsx(ChevronLeft, {}), t("CheckoutEmbed.Payment.back")] }), jsxRuntime.jsx(SubmitButton, { isValid: true, isSubmitting: isSubmitting, children: t("CheckoutEmbed.Payment.button") })] }) }, paymentComponentKey)) })] }));
|
|
41233
|
+
return (jsxRuntime.jsxs("div", { className: "space-y-6", children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("h2", { className: "mb-2", children: t("CheckoutEmbed.Payment.title") }), jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: t("CheckoutEmbed.Payment.description") })] }), jsxRuntime.jsxs("div", { className: "space-y-2", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxRuntime.jsxs("p", { children: [jsxRuntime.jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.contact") }), " ", jsxRuntime.jsx("span", { className: "text-muted-foreground", children: contactEmail })] }), jsxRuntime.jsx(Button, { variant: "link", size: "link", onClick: onDoubleBack, children: t("CheckoutEmbed.Shipping.change") })] }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxRuntime.jsxs("p", { children: [jsxRuntime.jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.address") }), " ", jsxRuntime.jsx("span", { className: "text-muted-foreground", children: shippingAddress })] }), jsxRuntime.jsx(Button, { variant: "link", size: "link", onClick: onDoubleBack, children: t("CheckoutEmbed.Shipping.change") })] }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxRuntime.jsxs("p", { children: [jsxRuntime.jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.shipping") }), " ", jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [shippingName, " \u00B7 ", shippingPrice] })] }), jsxRuntime.jsx(Button, { variant: "link", size: "link", onClick: onBack, children: t("CheckoutEmbed.Shipping.change") })] })] }), jsxRuntime.jsx("div", { className: "mt-8", children: paymentSecret && (jsxRuntime.jsx(PaymentElement$1, { fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance, fonts), locale: locale, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, setSubmitting: setIsSubmitting, publicKey: publicKey, children: jsxRuntime.jsx("div", { className: "fixed bottom-0 left-0 right-0 z-50 mt-8 px-4 sm:static sm:px-0", children: jsxRuntime.jsxs("div", { className: "bg-background flex flex-col-reverse items-center justify-between gap-2 pb-4 sm:flex-row sm:bg-transparent sm:pb-0", children: [jsxRuntime.jsxs(Button, { className: "w-full sm:w-fit", type: "button", variant: "ghost", onClick: onBack, children: [jsxRuntime.jsx(ChevronLeft, {}), t("CheckoutEmbed.Payment.back")] }), jsxRuntime.jsx(SubmitButton, { className: "w-full max-sm:h-[52px] sm:w-fit", isValid: true, isSubmitting: isSubmitting, children: t("CheckoutEmbed.Payment.button") })] }) }) }, paymentComponentKey)) })] }));
|
|
36692
41234
|
}
|
|
36693
41235
|
|
|
36694
41236
|
function Skeleton(_a) {
|