@tbela99/css-parser 0.3.0 → 0.4.0
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/{LICENSE → LICENSE.md} +1 -1
- package/README.md +191 -80
- package/dist/config.json.js +20 -1
- package/dist/index-umd-web.js +3210 -1352
- package/dist/index.cjs +3211 -1353
- package/dist/index.d.ts +910 -0
- package/dist/lib/ast/expand.js +1 -1
- package/dist/lib/ast/features/calc.js +1 -2
- package/dist/lib/ast/features/inlinecssvariables.js +1 -1
- package/dist/lib/ast/features/shorthand.js +1 -1
- package/dist/lib/ast/math/expression.js +38 -3
- package/dist/lib/ast/math/math.js +2 -2
- package/dist/lib/ast/minify.js +0 -1
- package/dist/lib/ast/types.js +1 -0
- package/dist/lib/ast/utils/minifyfeature.js +4 -3
- package/dist/lib/parser/declaration/list.js +1 -1
- package/dist/lib/parser/declaration/map.js +129 -26
- package/dist/lib/parser/declaration/set.js +1 -1
- package/dist/lib/parser/parse.js +325 -303
- package/dist/lib/parser/tokenize.js +220 -223
- package/dist/lib/parser/utils/declaration.js +1 -1
- package/dist/lib/parser/utils/syntax.js +159 -23
- package/dist/lib/parser/utils/type.js +2 -2
- package/dist/lib/renderer/color/a98rgb.js +64 -0
- package/dist/lib/renderer/color/color.js +521 -0
- package/dist/lib/renderer/color/colormix.js +337 -0
- package/dist/lib/renderer/color/hex.js +92 -0
- package/dist/lib/renderer/color/hsl.js +118 -0
- package/dist/lib/renderer/color/hsv.js +20 -0
- package/dist/lib/renderer/color/hwb.js +101 -0
- package/dist/lib/renderer/color/lab.js +136 -0
- package/dist/lib/renderer/color/lch.js +79 -0
- package/dist/lib/renderer/color/oklab.js +121 -0
- package/dist/lib/renderer/color/oklch.js +65 -0
- package/dist/lib/renderer/color/p3.js +57 -0
- package/dist/lib/renderer/color/prophotorgb.js +56 -0
- package/dist/lib/renderer/color/rec2020.js +70 -0
- package/dist/lib/renderer/color/relativecolor.js +152 -0
- package/dist/lib/renderer/color/rgb.js +44 -0
- package/dist/lib/renderer/color/srgb.js +261 -0
- package/dist/lib/renderer/color/utils/components.js +20 -0
- package/dist/lib/renderer/color/utils/constants.js +191 -0
- package/dist/lib/renderer/color/utils/matrix.js +35 -0
- package/dist/lib/renderer/color/xyz.js +64 -0
- package/dist/lib/renderer/color/xyzd50.js +33 -0
- package/dist/lib/renderer/render.js +61 -32
- package/dist/node/index.js +1 -1
- package/dist/node/load.js +1 -1
- package/dist/web/index.js +1 -1
- package/package.json +15 -14
- package/quickjs.sh +1 -0
- package/dist/lib/ast/features/utils/math.js +0 -95
- package/dist/lib/iterable/set.js +0 -48
- package/dist/lib/iterable/weakmap.js +0 -53
- package/dist/lib/renderer/utils/calccolor.js +0 -238
- package/dist/lib/renderer/utils/color.js +0 -371
- package/dist/lib/renderer/utils/hex.js +0 -124
- package/dist/lib/renderer/utils/hsl.js +0 -49
- package/dist/lib/renderer/utils/hsv.js +0 -15
- package/dist/lib/renderer/utils/hwb.js +0 -50
- package/dist/lib/renderer/utils/rgb.js +0 -66
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
import { e, k, D50 } from './utils/constants.js';
|
|
2
|
+
import { getComponents } from './utils/components.js';
|
|
3
|
+
import { srgb2xyz, xyzd502srgb } from './xyz.js';
|
|
4
|
+
import { hex2srgb, rgb2srgb, hsl2srgb, hwb2srgb, oklch2srgb } from './srgb.js';
|
|
5
|
+
import { getLCHComponents } from './lch.js';
|
|
6
|
+
import { OKLab_to_XYZ, getOKLABComponents } from './oklab.js';
|
|
7
|
+
import { getNumber } from './color.js';
|
|
8
|
+
import { EnumToken } from '../../ast/types.js';
|
|
9
|
+
import '../../ast/minify.js';
|
|
10
|
+
import '../../parser/parse.js';
|
|
11
|
+
import '../sourcemap/lib/encode.js';
|
|
12
|
+
|
|
13
|
+
// L: 0% = 0.0, 100% = 100.0
|
|
14
|
+
// for a and b: -100% = -125, 100% = 125
|
|
15
|
+
function hex2lab(token) {
|
|
16
|
+
// @ts-ignore
|
|
17
|
+
return srgb2lab(...hex2srgb(token));
|
|
18
|
+
}
|
|
19
|
+
function rgb2lab(token) {
|
|
20
|
+
// @ts-ignore
|
|
21
|
+
return srgb2lab(...rgb2srgb(token));
|
|
22
|
+
}
|
|
23
|
+
function hsl2lab(token) {
|
|
24
|
+
// @ts-ignore
|
|
25
|
+
return srgb2lab(...hsl2srgb(token));
|
|
26
|
+
}
|
|
27
|
+
function hwb2lab(token) {
|
|
28
|
+
// @ts-ignore
|
|
29
|
+
return srgb2lab(...hwb2srgb(token));
|
|
30
|
+
}
|
|
31
|
+
function lch2lab(token) {
|
|
32
|
+
// @ts-ignore
|
|
33
|
+
return lch2labvalues(...getLCHComponents(token));
|
|
34
|
+
}
|
|
35
|
+
function oklab2lab(token) {
|
|
36
|
+
// @ts-ignore
|
|
37
|
+
return xyz2lab(...OKLab_to_XYZ(...getOKLABComponents(token)));
|
|
38
|
+
}
|
|
39
|
+
function oklch2lab(token) {
|
|
40
|
+
// @ts-ignore
|
|
41
|
+
return srgb2lab(...oklch2srgb(token));
|
|
42
|
+
}
|
|
43
|
+
function srgb2lab(r, g, b, a) {
|
|
44
|
+
// @ts-ignore */
|
|
45
|
+
const result = xyz2lab(...srgb2xyz(r, g, b));
|
|
46
|
+
// Fixes achromatic RGB colors having a _slight_ chroma due to floating-point errors
|
|
47
|
+
// and approximated computations in sRGB <-> CIELab.
|
|
48
|
+
// See: https://github.com/d3/d3-color/pull/46
|
|
49
|
+
if (r === b && b === g) {
|
|
50
|
+
result[1] = result[2] = 0;
|
|
51
|
+
}
|
|
52
|
+
if (a != null) {
|
|
53
|
+
result.push(a);
|
|
54
|
+
}
|
|
55
|
+
return result;
|
|
56
|
+
}
|
|
57
|
+
function xyz2lab(x, y, z, a = null) {
|
|
58
|
+
// Assuming XYZ is relative to D50, convert to CIE Lab
|
|
59
|
+
// from CIE standard, which now defines these as a rational fraction
|
|
60
|
+
// var e = 216/24389; // 6^3/29^3
|
|
61
|
+
// var k = 24389/27; // 29^3/3^3
|
|
62
|
+
// compute xyz, which is XYZ scaled relative to reference white
|
|
63
|
+
const xyz = [x, y, z].map((value, i) => value / D50[i]);
|
|
64
|
+
// now compute f
|
|
65
|
+
const f = xyz.map((value) => value > e ? Math.cbrt(value) : (k * value + 16) / 116);
|
|
66
|
+
const result = [
|
|
67
|
+
(116 * f[1]) - 16, // L
|
|
68
|
+
500 * (f[0] - f[1]), // a
|
|
69
|
+
200 * (f[1] - f[2]) // b
|
|
70
|
+
];
|
|
71
|
+
// L in range [0,100]. For use in CSS, add a percent
|
|
72
|
+
if (a != null && a != 1) {
|
|
73
|
+
result.push(a);
|
|
74
|
+
}
|
|
75
|
+
return result;
|
|
76
|
+
}
|
|
77
|
+
function lch2labvalues(l, c, h, a = null) {
|
|
78
|
+
// l, c * Math.cos(360 * h * Math.PI / 180), c * Math.sin(360 * h * Math.PI / 180
|
|
79
|
+
const result = [l, c * Math.cos(h * Math.PI / 180), c * Math.sin(h * Math.PI / 180)];
|
|
80
|
+
if (a != null) {
|
|
81
|
+
result.push(a);
|
|
82
|
+
}
|
|
83
|
+
return result;
|
|
84
|
+
}
|
|
85
|
+
function getLABComponents(token) {
|
|
86
|
+
const components = getComponents(token);
|
|
87
|
+
// @ts-ignore
|
|
88
|
+
let t = components[0];
|
|
89
|
+
// @ts-ignore
|
|
90
|
+
const l = getNumber(t) * (t.typ == EnumToken.PercentageTokenType ? 100 : 1);
|
|
91
|
+
// @ts-ignore
|
|
92
|
+
t = components[1];
|
|
93
|
+
// @ts-ignore
|
|
94
|
+
const a = getNumber(t) * (t.typ == EnumToken.PercentageTokenType ? 125 : 1);
|
|
95
|
+
// @ts-ignore
|
|
96
|
+
t = components[2];
|
|
97
|
+
// @ts-ignore
|
|
98
|
+
const b = getNumber(t) * (t.typ == EnumToken.PercentageTokenType ? 125 : 1);
|
|
99
|
+
// @ts-ignore
|
|
100
|
+
t = components[3];
|
|
101
|
+
// @ts-ignore
|
|
102
|
+
const alpha = t == null ? 1 : getNumber(t);
|
|
103
|
+
const result = [l, a, b];
|
|
104
|
+
if (alpha != null && alpha != 1) {
|
|
105
|
+
result.push(alpha);
|
|
106
|
+
}
|
|
107
|
+
return result;
|
|
108
|
+
}
|
|
109
|
+
// from https://www.w3.org/TR/css-color-4/#color-conversion-code
|
|
110
|
+
// D50 LAB
|
|
111
|
+
function Lab_to_sRGB(l, a, b) {
|
|
112
|
+
// @ts-ignore
|
|
113
|
+
return xyzd502srgb(...Lab_to_XYZ(l, a, b));
|
|
114
|
+
}
|
|
115
|
+
// from https://www.w3.org/TR/css-color-4/#color-conversion-code
|
|
116
|
+
function Lab_to_XYZ(l, a, b) {
|
|
117
|
+
// Convert Lab to D50-adapted XYZ
|
|
118
|
+
// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
|
|
119
|
+
const k = 24389 / 27; // 29^3/3^3
|
|
120
|
+
const e = 216 / 24389; // 6^3/29^3
|
|
121
|
+
const f = [];
|
|
122
|
+
// compute f, starting with the luminance-related term
|
|
123
|
+
f[1] = (l + 16) / 116;
|
|
124
|
+
f[0] = a / 500 + f[1];
|
|
125
|
+
f[2] = f[1] - b / 200;
|
|
126
|
+
// compute xyz
|
|
127
|
+
const xyz = [
|
|
128
|
+
Math.pow(f[0], 3) > e ? Math.pow(f[0], 3) : (116 * f[0] - 16) / k,
|
|
129
|
+
l > k * e ? Math.pow((l + 16) / 116, 3) : l / k,
|
|
130
|
+
Math.pow(f[2], 3) > e ? Math.pow(f[2], 3) : (116 * f[2] - 16) / k
|
|
131
|
+
];
|
|
132
|
+
// Compute XYZ by scaling xyz by reference white
|
|
133
|
+
return xyz.map((value, i) => value * D50[i]);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
export { Lab_to_XYZ, Lab_to_sRGB, getLABComponents, hex2lab, hsl2lab, hwb2lab, lch2lab, lch2labvalues, oklab2lab, oklch2lab, rgb2lab, srgb2lab, xyz2lab };
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import './utils/constants.js';
|
|
2
|
+
import { getComponents } from './utils/components.js';
|
|
3
|
+
import { getNumber, getAngle } from './color.js';
|
|
4
|
+
import { EnumToken } from '../../ast/types.js';
|
|
5
|
+
import '../../ast/minify.js';
|
|
6
|
+
import '../../parser/parse.js';
|
|
7
|
+
import { srgb2lab, xyz2lab, hex2lab, rgb2lab, hsl2lab, hwb2lab, getLABComponents, oklab2lab, oklch2lab } from './lab.js';
|
|
8
|
+
import '../sourcemap/lib/encode.js';
|
|
9
|
+
|
|
10
|
+
function hex2lch(token) {
|
|
11
|
+
// @ts-ignore
|
|
12
|
+
return lab2lchvalues(...hex2lab(token));
|
|
13
|
+
}
|
|
14
|
+
function rgb2lch(token) {
|
|
15
|
+
// @ts-ignore
|
|
16
|
+
return lab2lchvalues(...rgb2lab(token));
|
|
17
|
+
}
|
|
18
|
+
function hsl2lch(token) {
|
|
19
|
+
// @ts-ignore
|
|
20
|
+
return lab2lchvalues(...hsl2lab(token));
|
|
21
|
+
}
|
|
22
|
+
function hwb2lch(token) {
|
|
23
|
+
// @ts-ignore
|
|
24
|
+
return lab2lchvalues(...hwb2lab(token));
|
|
25
|
+
}
|
|
26
|
+
function lab2lch(token) {
|
|
27
|
+
// @ts-ignore
|
|
28
|
+
return lab2lchvalues(...getLABComponents(token));
|
|
29
|
+
}
|
|
30
|
+
function srgb2lch(r, g, blue, alpha) {
|
|
31
|
+
// @ts-ignore
|
|
32
|
+
return lab2lchvalues(...srgb2lab(r, g, blue, alpha));
|
|
33
|
+
}
|
|
34
|
+
function oklab2lch(token) {
|
|
35
|
+
// @ts-ignore
|
|
36
|
+
return lab2lchvalues(...oklab2lab(token));
|
|
37
|
+
}
|
|
38
|
+
function oklch2lch(token) {
|
|
39
|
+
// @ts-ignore
|
|
40
|
+
return lab2lchvalues(...oklch2lab(token));
|
|
41
|
+
}
|
|
42
|
+
function lab2lchvalues(l, a, b, alpha = null) {
|
|
43
|
+
let c = Math.sqrt(a * a + b * b);
|
|
44
|
+
let h = Math.atan2(b, a) * 180 / Math.PI;
|
|
45
|
+
if (h < 0) {
|
|
46
|
+
h += 360;
|
|
47
|
+
}
|
|
48
|
+
if (c < .0001) {
|
|
49
|
+
c = h = 0;
|
|
50
|
+
}
|
|
51
|
+
return alpha == null ? [l, c, h] : [l, c, h, alpha];
|
|
52
|
+
}
|
|
53
|
+
function xyz2lchvalues(x, y, z, alpha) {
|
|
54
|
+
// @ts-ignore(
|
|
55
|
+
const lch = lab2lchvalues(...xyz2lab(x, y, z));
|
|
56
|
+
return alpha == null || alpha == 1 ? lch : lch.concat(alpha);
|
|
57
|
+
}
|
|
58
|
+
function getLCHComponents(token) {
|
|
59
|
+
const components = getComponents(token);
|
|
60
|
+
// @ts-ignore
|
|
61
|
+
let t = components[0];
|
|
62
|
+
// @ts-ignore
|
|
63
|
+
const l = getNumber(t) * (t.typ == EnumToken.PercentageTokenType ? 100 : 1);
|
|
64
|
+
// @ts-ignore
|
|
65
|
+
t = components[1];
|
|
66
|
+
// @ts-ignore
|
|
67
|
+
const c = getNumber(t) * (t.typ == EnumToken.PercentageTokenType ? 150 : 1);
|
|
68
|
+
// @ts-ignore
|
|
69
|
+
t = components[2];
|
|
70
|
+
// @ts-ignore
|
|
71
|
+
const h = getAngle(t) * 360;
|
|
72
|
+
// @ts-ignore
|
|
73
|
+
t = components[3];
|
|
74
|
+
// @ts-ignore
|
|
75
|
+
const alpha = t == null ? 1 : getNumber(t);
|
|
76
|
+
return alpha == null ? [l, c, h] : [l, c, h, alpha];
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
export { getLCHComponents, hex2lch, hsl2lch, hwb2lch, lab2lch, lab2lchvalues, oklab2lch, oklch2lch, rgb2lch, srgb2lch, xyz2lchvalues };
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import { multiplyMatrices } from './utils/matrix.js';
|
|
2
|
+
import { powerlessColorComponent } from './utils/constants.js';
|
|
3
|
+
import { getComponents } from './utils/components.js';
|
|
4
|
+
import { srgb2lsrgbvalues, hex2srgb, rgb2srgb, hsl2srgb, hwb2srgb, lab2srgb, lch2srgb, lsrgb2srgbvalues } from './srgb.js';
|
|
5
|
+
import { getNumber } from './color.js';
|
|
6
|
+
import { EnumToken } from '../../ast/types.js';
|
|
7
|
+
import '../../ast/minify.js';
|
|
8
|
+
import '../../parser/parse.js';
|
|
9
|
+
import { eq } from '../../parser/utils/eq.js';
|
|
10
|
+
import { lch2labvalues } from './lab.js';
|
|
11
|
+
import { getOKLCHComponents } from './oklch.js';
|
|
12
|
+
import '../sourcemap/lib/encode.js';
|
|
13
|
+
|
|
14
|
+
function hex2oklab(token) {
|
|
15
|
+
// @ts-ignore
|
|
16
|
+
return srgb2oklab(...hex2srgb(token));
|
|
17
|
+
}
|
|
18
|
+
function rgb2oklab(token) {
|
|
19
|
+
// @ts-ignore
|
|
20
|
+
return srgb2oklab(...rgb2srgb(token));
|
|
21
|
+
}
|
|
22
|
+
function hsl2oklab(token) {
|
|
23
|
+
// @ts-ignore
|
|
24
|
+
return srgb2oklab(...hsl2srgb(token));
|
|
25
|
+
}
|
|
26
|
+
function hwb2oklab(token) {
|
|
27
|
+
// @ts-ignore
|
|
28
|
+
return srgb2oklab(...hwb2srgb(token));
|
|
29
|
+
}
|
|
30
|
+
function lab2oklab(token) {
|
|
31
|
+
// @ts-ignore
|
|
32
|
+
return srgb2oklab(...lab2srgb(token));
|
|
33
|
+
}
|
|
34
|
+
function lch2oklab(token) {
|
|
35
|
+
// @ts-ignore
|
|
36
|
+
return srgb2oklab(...lch2srgb(token));
|
|
37
|
+
}
|
|
38
|
+
function oklch2oklab(token) {
|
|
39
|
+
// @ts-ignore
|
|
40
|
+
return lch2labvalues(...getOKLCHComponents(token));
|
|
41
|
+
}
|
|
42
|
+
function srgb2oklab(r, g, blue, alpha) {
|
|
43
|
+
[r, g, blue] = srgb2lsrgbvalues(r, g, blue);
|
|
44
|
+
let L = Math.cbrt(0.41222147079999993 * r + 0.5363325363 * g + 0.0514459929 * blue);
|
|
45
|
+
let M = Math.cbrt(0.2119034981999999 * r + 0.6806995450999999 * g + 0.1073969566 * blue);
|
|
46
|
+
let S = Math.cbrt(0.08830246189999998 * r + 0.2817188376 * g + 0.6299787005000002 * blue);
|
|
47
|
+
const l = 0.2104542553 * L + 0.793617785 * M - 0.0040720468 * S;
|
|
48
|
+
const a = r == g && g == blue ? 0 : 1.9779984951 * L - 2.428592205 * M + 0.4505937099 * S;
|
|
49
|
+
const b = r == g && g == blue ? 0 : 0.0259040371 * L + 0.7827717662 * M - 0.808675766 * S;
|
|
50
|
+
return alpha == null ? [l, a, b] : [l, a, b, alpha];
|
|
51
|
+
}
|
|
52
|
+
function getOKLABComponents(token) {
|
|
53
|
+
const components = getComponents(token);
|
|
54
|
+
// @ts-ignore
|
|
55
|
+
let t = components[0];
|
|
56
|
+
// @ts-ignore
|
|
57
|
+
const l = getNumber(t);
|
|
58
|
+
// @ts-ignore
|
|
59
|
+
t = components[1];
|
|
60
|
+
// @ts-ignore
|
|
61
|
+
const a = getNumber(t) * (t.typ == EnumToken.PercentageTokenType ? .4 : 1);
|
|
62
|
+
// @ts-ignore
|
|
63
|
+
t = components[2];
|
|
64
|
+
// @ts-ignore
|
|
65
|
+
const b = getNumber(t) * (t.typ == EnumToken.PercentageTokenType ? .4 : 1);
|
|
66
|
+
// @ts-ignore
|
|
67
|
+
t = components[3];
|
|
68
|
+
// @ts-ignore
|
|
69
|
+
const alpha = t == null || eq(t, powerlessColorComponent) ? 1 : getNumber(t);
|
|
70
|
+
const rgb = [l, a, b];
|
|
71
|
+
if (alpha != 1 && alpha != null) {
|
|
72
|
+
rgb.push(alpha);
|
|
73
|
+
}
|
|
74
|
+
return rgb;
|
|
75
|
+
}
|
|
76
|
+
function OKLab_to_XYZ(l, a, b, alpha = null) {
|
|
77
|
+
// Given OKLab, convert to XYZ relative to D65
|
|
78
|
+
const LMStoXYZ = [
|
|
79
|
+
[1.2268798758459243, -0.5578149944602171, 0.2813910456659647],
|
|
80
|
+
[-0.0405757452148008, 1.1122868032803170, -0.0717110580655164],
|
|
81
|
+
[-0.0763729366746601, -0.4214933324022432, 1.5869240198367816]
|
|
82
|
+
];
|
|
83
|
+
const OKLabtoLMS = [
|
|
84
|
+
[1.0000000000000000, 0.3963377773761749, 0.2158037573099136],
|
|
85
|
+
[1.0000000000000000, -0.1055613458156586, -0.0638541728258133],
|
|
86
|
+
[1.0000000000000000, -0.0894841775298119, -1.2914855480194092]
|
|
87
|
+
];
|
|
88
|
+
const LMSnl = multiplyMatrices(OKLabtoLMS, [l, a, b]);
|
|
89
|
+
const xyz = multiplyMatrices(LMStoXYZ, LMSnl.map((c) => c ** 3));
|
|
90
|
+
if (alpha != null) {
|
|
91
|
+
xyz.push(alpha);
|
|
92
|
+
}
|
|
93
|
+
return xyz;
|
|
94
|
+
}
|
|
95
|
+
// from https://www.w3.org/TR/css-color-4/#color-conversion-code
|
|
96
|
+
function OKLab_to_sRGB(l, a, b) {
|
|
97
|
+
let L = Math.pow(l * 0.99999999845051981432 +
|
|
98
|
+
0.39633779217376785678 * a +
|
|
99
|
+
0.21580375806075880339 * b, 3);
|
|
100
|
+
let M = Math.pow(l * 1.0000000088817607767 -
|
|
101
|
+
0.1055613423236563494 * a -
|
|
102
|
+
0.063854174771705903402 * b, 3);
|
|
103
|
+
let S = Math.pow(l * 1.0000000546724109177 -
|
|
104
|
+
0.089484182094965759684 * a -
|
|
105
|
+
1.2914855378640917399 * b, 3);
|
|
106
|
+
return lsrgb2srgbvalues(
|
|
107
|
+
/* r: */
|
|
108
|
+
+4.076741661347994 * L -
|
|
109
|
+
3.307711590408193 * M +
|
|
110
|
+
0.230969928729428 * S,
|
|
111
|
+
/* g: */
|
|
112
|
+
-1.2684380040921763 * L +
|
|
113
|
+
2.6097574006633715 * M -
|
|
114
|
+
0.3413193963102197 * S,
|
|
115
|
+
/* b: */
|
|
116
|
+
-0.004196086541837188 * L -
|
|
117
|
+
0.7034186144594493 * M +
|
|
118
|
+
1.7076147009309444 * S);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
export { OKLab_to_XYZ, OKLab_to_sRGB, getOKLABComponents, hex2oklab, hsl2oklab, hwb2oklab, lab2oklab, lch2oklab, oklch2oklab, rgb2oklab, srgb2oklab };
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { powerlessColorComponent } from './utils/constants.js';
|
|
2
|
+
import { getComponents } from './utils/components.js';
|
|
3
|
+
import { getNumber, getAngle } from './color.js';
|
|
4
|
+
import { EnumToken } from '../../ast/types.js';
|
|
5
|
+
import '../../ast/minify.js';
|
|
6
|
+
import '../../parser/parse.js';
|
|
7
|
+
import { lab2lchvalues } from './lch.js';
|
|
8
|
+
import { srgb2oklab, hex2oklab, rgb2oklab, hsl2oklab, hwb2oklab, lab2oklab, lch2oklab, getOKLABComponents } from './oklab.js';
|
|
9
|
+
import { eq } from '../../parser/utils/eq.js';
|
|
10
|
+
import '../sourcemap/lib/encode.js';
|
|
11
|
+
|
|
12
|
+
function hex2oklch(token) {
|
|
13
|
+
// @ts-ignore
|
|
14
|
+
return lab2lchvalues(...hex2oklab(token));
|
|
15
|
+
}
|
|
16
|
+
function rgb2oklch(token) {
|
|
17
|
+
// @ts-ignore
|
|
18
|
+
return lab2lchvalues(...rgb2oklab(token));
|
|
19
|
+
}
|
|
20
|
+
function hsl2oklch(token) {
|
|
21
|
+
// @ts-ignore
|
|
22
|
+
return lab2lchvalues(...hsl2oklab(token));
|
|
23
|
+
}
|
|
24
|
+
function hwb2oklch(token) {
|
|
25
|
+
// @ts-ignore
|
|
26
|
+
return lab2lchvalues(...hwb2oklab(token));
|
|
27
|
+
}
|
|
28
|
+
function lab2oklch(token) {
|
|
29
|
+
// @ts-ignore
|
|
30
|
+
return lab2lchvalues(...lab2oklab(token));
|
|
31
|
+
}
|
|
32
|
+
function lch2oklch(token) {
|
|
33
|
+
// @ts-ignore
|
|
34
|
+
return lab2lchvalues(...lch2oklab(token));
|
|
35
|
+
}
|
|
36
|
+
function oklab2oklch(token) {
|
|
37
|
+
// @ts-ignore
|
|
38
|
+
return lab2lchvalues(...getOKLABComponents(token));
|
|
39
|
+
}
|
|
40
|
+
function srgb2oklch(r, g, blue, alpha) {
|
|
41
|
+
// @ts-ignore
|
|
42
|
+
return lab2lchvalues(...srgb2oklab(r, g, blue, alpha));
|
|
43
|
+
}
|
|
44
|
+
function getOKLCHComponents(token) {
|
|
45
|
+
const components = getComponents(token);
|
|
46
|
+
// @ts-ignore
|
|
47
|
+
let t = components[0];
|
|
48
|
+
// @ts-ignore
|
|
49
|
+
const l = getNumber(t);
|
|
50
|
+
// @ts-ignore
|
|
51
|
+
t = components[1];
|
|
52
|
+
// @ts-ignore
|
|
53
|
+
const c = getNumber(t) * (t.typ == EnumToken.PercentageTokenType ? .4 : 1);
|
|
54
|
+
// @ts-ignore
|
|
55
|
+
t = components[2];
|
|
56
|
+
// @ts-ignore
|
|
57
|
+
const h = getAngle(t) * 360;
|
|
58
|
+
// @ts-ignore
|
|
59
|
+
t = components[3];
|
|
60
|
+
// @ts-ignore
|
|
61
|
+
const alpha = t == null || eq(t, powerlessColorComponent) ? 1 : getNumber(t);
|
|
62
|
+
return [l, c, h, alpha];
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
export { getOKLCHComponents, hex2oklch, hsl2oklch, hwb2oklch, lab2oklch, lch2oklch, oklab2oklch, rgb2oklch, srgb2oklch };
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { xyz2srgb, srgb2lsrgbvalues, lsrgb2srgbvalues } from './srgb.js';
|
|
2
|
+
import { multiplyMatrices } from './utils/matrix.js';
|
|
3
|
+
import './utils/constants.js';
|
|
4
|
+
import '../../ast/types.js';
|
|
5
|
+
import '../../ast/minify.js';
|
|
6
|
+
import '../../parser/parse.js';
|
|
7
|
+
import { srgb2xyz } from './xyz.js';
|
|
8
|
+
import '../sourcemap/lib/encode.js';
|
|
9
|
+
|
|
10
|
+
function p32srgbvalues(r, g, b, alpha) {
|
|
11
|
+
// @ts-ignore
|
|
12
|
+
return xyz2srgb(...lp32xyz(...p32lp3(r, g, b, alpha)));
|
|
13
|
+
}
|
|
14
|
+
function srgb2p3values(r, g, b, alpha) {
|
|
15
|
+
// @ts-ignore
|
|
16
|
+
return srgb2xyz(...xyz2lp3(...lp32p3(r, g, b, alpha)));
|
|
17
|
+
}
|
|
18
|
+
function p32lp3(r, g, b, alpha) {
|
|
19
|
+
// convert an array of display-p3 RGB values in the range 0.0 - 1.0
|
|
20
|
+
// to linear light (un-companded) form.
|
|
21
|
+
return srgb2lsrgbvalues(r, g, b, alpha); // same as sRGB
|
|
22
|
+
}
|
|
23
|
+
function lp32p3(r, g, b, alpha) {
|
|
24
|
+
// convert an array of linear-light display-p3 RGB in the range 0.0-1.0
|
|
25
|
+
// to gamma corrected form
|
|
26
|
+
return lsrgb2srgbvalues(r, g, b, alpha); // same as sRGB
|
|
27
|
+
}
|
|
28
|
+
function lp32xyz(r, g, b, alpha) {
|
|
29
|
+
// convert an array of linear-light display-p3 values to CIE XYZ
|
|
30
|
+
// using D65 (no chromatic adaptation)
|
|
31
|
+
// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
|
|
32
|
+
const M = [
|
|
33
|
+
[608311 / 1250200, 189793 / 714400, 198249 / 1000160],
|
|
34
|
+
[35783 / 156275, 247089 / 357200, 198249 / 2500400],
|
|
35
|
+
[0, 32229 / 714400, 5220557 / 5000800],
|
|
36
|
+
];
|
|
37
|
+
const result = multiplyMatrices(M, [r, g, b]);
|
|
38
|
+
if (alpha != null && alpha != 1) {
|
|
39
|
+
result.push(alpha);
|
|
40
|
+
}
|
|
41
|
+
return result;
|
|
42
|
+
}
|
|
43
|
+
function xyz2lp3(x, y, z, alpha) {
|
|
44
|
+
// convert XYZ to linear-light P3
|
|
45
|
+
const M = [
|
|
46
|
+
[446124 / 178915, -333277 / 357830, -72051 / 178915],
|
|
47
|
+
[-14852 / 17905, 63121 / 35810, 423 / 17905],
|
|
48
|
+
[11844 / 330415, -50337 / 660830, 316169 / 330415],
|
|
49
|
+
];
|
|
50
|
+
const result = multiplyMatrices(M, [x, y, z]);
|
|
51
|
+
if (alpha != null && alpha != 1) {
|
|
52
|
+
result.push(alpha);
|
|
53
|
+
}
|
|
54
|
+
return result;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
export { lp32p3, lp32xyz, p32lp3, p32srgbvalues, srgb2p3values, xyz2lp3 };
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { xyzd502srgb, srgb2xyz } from './xyz.js';
|
|
2
|
+
import { XYZ_D65_to_D50 } from './xyzd50.js';
|
|
3
|
+
|
|
4
|
+
function prophotorgb2srgbvalues(r, g, b, a = null) {
|
|
5
|
+
// @ts-ignore
|
|
6
|
+
return xyzd502srgb(...prophotorgb2xyz50(r, g, b, a));
|
|
7
|
+
}
|
|
8
|
+
function srgb2prophotorgbvalues(r, g, b, a) {
|
|
9
|
+
// @ts-ignore
|
|
10
|
+
return xyz50_to_prophotorgb(...XYZ_D65_to_D50(...srgb2xyz(r, g, b, a)));
|
|
11
|
+
}
|
|
12
|
+
function prophotorgb2lin_ProPhoto(r, g, b, a = null) {
|
|
13
|
+
return [r, g, b].map(v => {
|
|
14
|
+
let abs = Math.abs(v);
|
|
15
|
+
if (abs >= 16 / 512) {
|
|
16
|
+
return Math.sign(v) * Math.pow(abs, 1.8);
|
|
17
|
+
}
|
|
18
|
+
return v / 16;
|
|
19
|
+
}).concat(a == null || a == 1 ? [] : [a]);
|
|
20
|
+
}
|
|
21
|
+
function prophotorgb2xyz50(r, g, b, a = null) {
|
|
22
|
+
[r, g, b, a] = prophotorgb2lin_ProPhoto(r, g, b, a);
|
|
23
|
+
const xyz = [
|
|
24
|
+
0.7977666449006423 * r +
|
|
25
|
+
0.1351812974005331 * g +
|
|
26
|
+
0.0313477341283922 * b,
|
|
27
|
+
0.2880748288194013 * r +
|
|
28
|
+
0.7118352342418731 * g +
|
|
29
|
+
0.0000899369387256 * b,
|
|
30
|
+
0.8251046025104602 * b
|
|
31
|
+
];
|
|
32
|
+
return xyz.concat(a == null || a == 1 ? [] : [a]);
|
|
33
|
+
}
|
|
34
|
+
function xyz50_to_prophotorgb(x, y, z, a) {
|
|
35
|
+
// @ts-ignore
|
|
36
|
+
return gam_prophotorgb(...[
|
|
37
|
+
x * 1.3457868816471585 -
|
|
38
|
+
y * 0.2555720873797946 -
|
|
39
|
+
0.0511018649755453 * z,
|
|
40
|
+
x * -0.5446307051249019 +
|
|
41
|
+
y * 1.5082477428451466 +
|
|
42
|
+
0.0205274474364214 * z,
|
|
43
|
+
1.2119675456389452 * z
|
|
44
|
+
].concat(a == null || a == 1 ? [] : [a]));
|
|
45
|
+
}
|
|
46
|
+
function gam_prophotorgb(r, g, b, a) {
|
|
47
|
+
return [r, g, b].map(v => {
|
|
48
|
+
let abs = Math.abs(v);
|
|
49
|
+
if (abs >= 1 / 512) {
|
|
50
|
+
return Math.sign(v) * Math.pow(abs, 1 / 1.8);
|
|
51
|
+
}
|
|
52
|
+
return 16 * v;
|
|
53
|
+
}).concat(a == null || a == 1 ? [] : [a]);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
export { prophotorgb2srgbvalues, srgb2prophotorgbvalues };
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { xyz2srgb } from './srgb.js';
|
|
2
|
+
import { multiplyMatrices } from './utils/matrix.js';
|
|
3
|
+
import './utils/constants.js';
|
|
4
|
+
import '../../ast/types.js';
|
|
5
|
+
import '../../ast/minify.js';
|
|
6
|
+
import '../../parser/parse.js';
|
|
7
|
+
import { srgb2xyz } from './xyz.js';
|
|
8
|
+
import '../sourcemap/lib/encode.js';
|
|
9
|
+
|
|
10
|
+
function rec20202srgb(r, g, b, a) {
|
|
11
|
+
// @ts-ignore
|
|
12
|
+
return xyz2srgb(...lrec20202xyz(...rec20202lrec2020(r, g, b)), a);
|
|
13
|
+
}
|
|
14
|
+
function srgb2rec2020values(r, g, b, a) {
|
|
15
|
+
// @ts-ignore
|
|
16
|
+
return lrec20202rec2020(...xyz2lrec2020(...srgb2xyz(r, g, b)), a);
|
|
17
|
+
}
|
|
18
|
+
function rec20202lrec2020(r, g, b, a) {
|
|
19
|
+
// convert an array of rec2020 RGB values in the range 0.0 - 1.0
|
|
20
|
+
// to linear light (un-companded) form.
|
|
21
|
+
// ITU-R BT.2020-2 p.4
|
|
22
|
+
const α = 1.09929682680944;
|
|
23
|
+
const β = 0.018053968510807;
|
|
24
|
+
return [r, g, b].map(function (val) {
|
|
25
|
+
let sign = val < 0 ? -1 : 1;
|
|
26
|
+
let abs = Math.abs(val);
|
|
27
|
+
if (abs < β * 4.5) {
|
|
28
|
+
return val / 4.5;
|
|
29
|
+
}
|
|
30
|
+
return sign * (Math.pow((abs + α - 1) / α, 1 / 0.45));
|
|
31
|
+
}).concat(a == null || a == 1 ? [] : [a]);
|
|
32
|
+
}
|
|
33
|
+
function lrec20202rec2020(r, g, b, a) {
|
|
34
|
+
// convert an array of linear-light rec2020 RGB in the range 0.0-1.0
|
|
35
|
+
// to gamma corrected form
|
|
36
|
+
// ITU-R BT.2020-2 p.4
|
|
37
|
+
const α = 1.09929682680944;
|
|
38
|
+
const β = 0.018053968510807;
|
|
39
|
+
return [r, g, b].map(function (val) {
|
|
40
|
+
let sign = val < 0 ? -1 : 1;
|
|
41
|
+
let abs = Math.abs(val);
|
|
42
|
+
if (abs > β) {
|
|
43
|
+
return sign * (α * Math.pow(abs, 0.45) - (α - 1));
|
|
44
|
+
}
|
|
45
|
+
return 4.5 * val;
|
|
46
|
+
}).concat(a == null || a == 1 ? [] : [a]);
|
|
47
|
+
}
|
|
48
|
+
function lrec20202xyz(r, g, b, a) {
|
|
49
|
+
// convert an array of linear-light rec2020 values to CIE XYZ
|
|
50
|
+
// using D65 (no chromatic adaptation)
|
|
51
|
+
// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
|
|
52
|
+
var M = [
|
|
53
|
+
[63426534 / 99577255, 20160776 / 139408157, 47086771 / 278816314],
|
|
54
|
+
[26158966 / 99577255, 472592308 / 697040785, 8267143 / 139408157],
|
|
55
|
+
[0, 19567812 / 697040785, 295819943 / 278816314],
|
|
56
|
+
];
|
|
57
|
+
// 0 is actually calculated as 4.994106574466076e-17
|
|
58
|
+
return multiplyMatrices(M, [r, g, b]).concat(a == null || a == 1 ? [] : [a]);
|
|
59
|
+
}
|
|
60
|
+
function xyz2lrec2020(x, y, z, a) {
|
|
61
|
+
// convert XYZ to linear-light rec2020
|
|
62
|
+
var M = [
|
|
63
|
+
[30757411 / 17917100, -6372589 / 17917100, -4539589 / 17917100],
|
|
64
|
+
[-19765991 / 29648200, 47925759 / 29648200, 467509 / 29648200],
|
|
65
|
+
[792561 / 44930125, -1921689 / 44930125, 42328811 / 44930125],
|
|
66
|
+
];
|
|
67
|
+
return multiplyMatrices(M, [x, y, z]).concat(a == null || a == 1 ? [] : [a]);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
export { rec20202srgb, srgb2rec2020values };
|