@digdir/designsystemet 0.1.0-alpha.12 → 0.1.0-alpha.13
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 +7 -0
- package/dist/bin/designsystemet.js +178 -121
- package/dist/bin/designsystemet.js.map +1 -1
- package/dist/src/colors/colorUtils.js +156 -2
- package/dist/src/colors/colorUtils.js.map +1 -1
- package/dist/src/colors/index.js +166 -10
- package/dist/src/colors/index.js.map +1 -1
- package/dist/src/colors/themeUtils.js +62 -8
- package/dist/src/colors/themeUtils.js.map +1 -1
- package/dist/src/tokens/actions.js +7 -1
- package/dist/src/tokens/actions.js.map +1 -1
- package/dist/src/tokens/build.js +178 -121
- package/dist/src/tokens/build.js.map +1 -1
- package/dist/src/tokens/configs.js +163 -102
- package/dist/src/tokens/configs.js.map +1 -1
- package/dist/src/tokens/formats/{css-classes.js → css.js} +123 -89
- package/dist/src/tokens/formats/css.js.map +1 -0
- package/dist/src/tokens/formats/js-tokens.js +6 -0
- package/dist/src/tokens/formats/js-tokens.js.map +1 -1
- package/dist/src/tokens/transformers.js +2 -2
- package/dist/src/tokens/transformers.js.map +1 -1
- package/dist/src/tokens/utils/permutateThemes.js +41 -29
- package/dist/src/tokens/utils/permutateThemes.js.map +1 -1
- package/dist/src/tokens/utils/utils.js +2 -2
- package/dist/src/tokens/utils/utils.js.map +1 -1
- package/package.json +3 -2
- package/dist/src/tokens/formats/css-classes.js.map +0 -1
- package/dist/src/tokens/formats/css-variables.js +0 -50
- package/dist/src/tokens/formats/css-variables.js.map +0 -1
|
@@ -1,6 +1,87 @@
|
|
|
1
1
|
// src/colors/colorUtils.ts
|
|
2
2
|
import { Hsluv } from "hsluv";
|
|
3
3
|
import chroma from "chroma-js";
|
|
4
|
+
|
|
5
|
+
// ../../node_modules/apca-w3/src/apca-w3.js
|
|
6
|
+
var SA98G = {
|
|
7
|
+
mainTRC: 2.4,
|
|
8
|
+
// 2.4 exponent for emulating actual monitor perception
|
|
9
|
+
// For reverseAPCA
|
|
10
|
+
get mainTRCencode() {
|
|
11
|
+
return 1 / this.mainTRC;
|
|
12
|
+
},
|
|
13
|
+
// sRGB coefficients
|
|
14
|
+
sRco: 0.2126729,
|
|
15
|
+
sGco: 0.7151522,
|
|
16
|
+
sBco: 0.072175,
|
|
17
|
+
// G-4g constants for use with 2.4 exponent
|
|
18
|
+
normBG: 0.56,
|
|
19
|
+
normTXT: 0.57,
|
|
20
|
+
revTXT: 0.62,
|
|
21
|
+
revBG: 0.65,
|
|
22
|
+
// G-4g Clamps and Scalers
|
|
23
|
+
blkThrs: 0.022,
|
|
24
|
+
blkClmp: 1.414,
|
|
25
|
+
scaleBoW: 1.14,
|
|
26
|
+
scaleWoB: 1.14,
|
|
27
|
+
loBoWoffset: 0.027,
|
|
28
|
+
loWoBoffset: 0.027,
|
|
29
|
+
deltaYmin: 5e-4,
|
|
30
|
+
loClip: 0.1,
|
|
31
|
+
///// MAGIC NUMBERS for UNCLAMP, for use with 0.022 & 1.414 /////
|
|
32
|
+
// Magic Numbers for reverseAPCA
|
|
33
|
+
mFactor: 1.9468554433171,
|
|
34
|
+
get mFactInv() {
|
|
35
|
+
return 1 / this.mFactor;
|
|
36
|
+
},
|
|
37
|
+
mOffsetIn: 0.0387393816571401,
|
|
38
|
+
mExpAdj: 0.283343396420869,
|
|
39
|
+
get mExp() {
|
|
40
|
+
return this.mExpAdj / this.blkClmp;
|
|
41
|
+
},
|
|
42
|
+
mOffsetOut: 0.312865795870758
|
|
43
|
+
};
|
|
44
|
+
function APCAcontrast(txtY, bgY, places = -1) {
|
|
45
|
+
const icp = [0, 1.1];
|
|
46
|
+
if (isNaN(txtY) || isNaN(bgY) || Math.min(txtY, bgY) < icp[0] || Math.max(txtY, bgY) > icp[1]) {
|
|
47
|
+
return 0;
|
|
48
|
+
}
|
|
49
|
+
;
|
|
50
|
+
let SAPC = 0;
|
|
51
|
+
let outputContrast = 0;
|
|
52
|
+
let polCat = "BoW";
|
|
53
|
+
txtY = txtY > SA98G.blkThrs ? txtY : txtY + Math.pow(SA98G.blkThrs - txtY, SA98G.blkClmp);
|
|
54
|
+
bgY = bgY > SA98G.blkThrs ? bgY : bgY + Math.pow(SA98G.blkThrs - bgY, SA98G.blkClmp);
|
|
55
|
+
if (Math.abs(bgY - txtY) < SA98G.deltaYmin) {
|
|
56
|
+
return 0;
|
|
57
|
+
}
|
|
58
|
+
if (bgY > txtY) {
|
|
59
|
+
SAPC = (Math.pow(bgY, SA98G.normBG) - Math.pow(txtY, SA98G.normTXT)) * SA98G.scaleBoW;
|
|
60
|
+
outputContrast = SAPC < SA98G.loClip ? 0 : SAPC - SA98G.loBoWoffset;
|
|
61
|
+
} else {
|
|
62
|
+
polCat = "WoB";
|
|
63
|
+
SAPC = (Math.pow(bgY, SA98G.revBG) - Math.pow(txtY, SA98G.revTXT)) * SA98G.scaleWoB;
|
|
64
|
+
outputContrast = SAPC > -SA98G.loClip ? 0 : SAPC + SA98G.loWoBoffset;
|
|
65
|
+
}
|
|
66
|
+
if (places < 0) {
|
|
67
|
+
return outputContrast * 100;
|
|
68
|
+
} else if (places == 0) {
|
|
69
|
+
return Math.round(Math.abs(outputContrast) * 100) + "<sub>" + polCat + "</sub>";
|
|
70
|
+
} else if (Number.isInteger(places)) {
|
|
71
|
+
return (outputContrast * 100).toFixed(places);
|
|
72
|
+
} else {
|
|
73
|
+
return 0;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
function sRGBtoY(rgb = [0, 0, 0]) {
|
|
77
|
+
function simpleExp(chan) {
|
|
78
|
+
return Math.pow(chan / 255, SA98G.mainTRC);
|
|
79
|
+
}
|
|
80
|
+
;
|
|
81
|
+
return SA98G.sRco * simpleExp(rgb[0]) + SA98G.sGco * simpleExp(rgb[1]) + SA98G.sBco * simpleExp(rgb[2]);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
// src/colors/colorUtils.ts
|
|
4
85
|
var hexToCssHsl = (hex, valuesOnly = false) => {
|
|
5
86
|
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
6
87
|
let r = 0;
|
|
@@ -67,6 +148,12 @@ var hexToHSL = (H) => {
|
|
|
67
148
|
l = +(l * 100).toFixed(1);
|
|
68
149
|
return [h, s, l];
|
|
69
150
|
};
|
|
151
|
+
var hexToHsluv = (hex) => {
|
|
152
|
+
const conv = new Hsluv();
|
|
153
|
+
conv.hex = hex;
|
|
154
|
+
conv.hexToHsluv();
|
|
155
|
+
return [conv.hsluv_h, conv.hsluv_s, conv.hsluv_l];
|
|
156
|
+
};
|
|
70
157
|
var hslArrToCss = (HSL) => {
|
|
71
158
|
return "hsl(" + HSL[0] + "," + HSL[1] + "%," + HSL[2] + "%)";
|
|
72
159
|
};
|
|
@@ -176,10 +263,12 @@ var getContrastFromLightness = (lightness, mainColor, backgroundColor) => {
|
|
|
176
263
|
const ratio = getRatioFromLum(lum1 ?? 0, lum2 ?? 0);
|
|
177
264
|
return ratio;
|
|
178
265
|
};
|
|
179
|
-
var areColorsContrasting = (color1, color2, type = "
|
|
266
|
+
var areColorsContrasting = (color1, color2, type = "aa") => {
|
|
180
267
|
const contrast = getContrastFromHex(color1, color2);
|
|
181
268
|
if (contrast !== null) {
|
|
182
|
-
if (type === "
|
|
269
|
+
if (type === "aaa") {
|
|
270
|
+
return contrast >= 7;
|
|
271
|
+
} else if (type === "aa") {
|
|
183
272
|
return contrast >= 4.5;
|
|
184
273
|
} else {
|
|
185
274
|
return contrast >= 3;
|
|
@@ -187,12 +276,24 @@ var areColorsContrasting = (color1, color2, type = "text") => {
|
|
|
187
276
|
}
|
|
188
277
|
return false;
|
|
189
278
|
};
|
|
279
|
+
var getApcaContrastLc = (textColor, backgroundColor) => {
|
|
280
|
+
const textColorRgb = hexToRgb(textColor);
|
|
281
|
+
const backgroundColorRgb = hexToRgb(backgroundColor);
|
|
282
|
+
if (textColorRgb && backgroundColorRgb) {
|
|
283
|
+
return APCAcontrast(
|
|
284
|
+
sRGBtoY([textColorRgb.r, textColorRgb.g, textColorRgb.b]),
|
|
285
|
+
sRGBtoY([backgroundColorRgb.r, backgroundColorRgb.g, backgroundColorRgb.b])
|
|
286
|
+
);
|
|
287
|
+
}
|
|
288
|
+
return 0;
|
|
289
|
+
};
|
|
190
290
|
var isHexColor = (hex) => {
|
|
191
291
|
return typeof hex === "string" && hex.length === 6 && !isNaN(Number("0x" + hex));
|
|
192
292
|
};
|
|
193
293
|
export {
|
|
194
294
|
HSLToHex,
|
|
195
295
|
areColorsContrasting,
|
|
296
|
+
getApcaContrastLc,
|
|
196
297
|
getContrastFromHex,
|
|
197
298
|
getContrastFromLightness,
|
|
198
299
|
getHslLightessFromHex,
|
|
@@ -201,10 +302,63 @@ export {
|
|
|
201
302
|
getRatioFromLum,
|
|
202
303
|
hexToCssHsl,
|
|
203
304
|
hexToHSL,
|
|
305
|
+
hexToHsluv,
|
|
204
306
|
hexToRgb,
|
|
205
307
|
hslArrToCss,
|
|
206
308
|
isHexColor,
|
|
207
309
|
luminanceFromHex,
|
|
208
310
|
luminanceFromRgb
|
|
209
311
|
};
|
|
312
|
+
/*! Bundled license information:
|
|
313
|
+
|
|
314
|
+
colorparsley/src/colorparsley.js:
|
|
315
|
+
(** @preserve
|
|
316
|
+
///// CoLoR PaRsLeY a simple set of color parsing thingies!
|
|
317
|
+
///// Beta 0.1.8 Revision date: June 04, 2022
|
|
318
|
+
/////
|
|
319
|
+
///// Functions to parse color values and return array
|
|
320
|
+
///// Copyright (c) 2019-2022 by Andrew Somers. All Rights Reserved.
|
|
321
|
+
///// LICENSE: AGPL 3
|
|
322
|
+
///// CONTACT: Please use the ISSUES or DISCUSSIONS tab at:
|
|
323
|
+
///// https://github.com/Myndex/colorparsley/
|
|
324
|
+
/////
|
|
325
|
+
///////////////////////////////////////////////////////////////////////////////
|
|
326
|
+
/////
|
|
327
|
+
///// IMPORT:
|
|
328
|
+
///// import { colorParsley } from 'colorparsley';
|
|
329
|
+
/////
|
|
330
|
+
///// let rgbaArray = colorParsley('#abcdef');
|
|
331
|
+
/////
|
|
332
|
+
///// Output as array: [r,g,b,a,isValid,colorspace]
|
|
333
|
+
///// Example: [123,123,123,1.0,true,'sRGB']
|
|
334
|
+
// *)
|
|
335
|
+
|
|
336
|
+
apca-w3/src/apca-w3.js:
|
|
337
|
+
(** @preserve
|
|
338
|
+
///// SAPC APCA - Advanced Perceptual Contrast Algorithm
|
|
339
|
+
///// Beta 0.1.9 W3 • contrast function only
|
|
340
|
+
///// DIST: W3 • Revision date: July 3, 2022
|
|
341
|
+
///// Function to parse color values and determine Lc contrast
|
|
342
|
+
///// Copyright © 2019-2022 by Andrew Somers. All Rights Reserved.
|
|
343
|
+
///// LICENSE: W3 LICENSE
|
|
344
|
+
///// CONTACT: Please use the ISSUES or DISCUSSIONS tab at:
|
|
345
|
+
///// https://github.com/Myndex/SAPC-APCA/
|
|
346
|
+
/////
|
|
347
|
+
///////////////////////////////////////////////////////////////////////////////
|
|
348
|
+
/////
|
|
349
|
+
///// MINIMAL IMPORTS:
|
|
350
|
+
///// import { APCAcontrast, sRGBtoY, displayP3toY,
|
|
351
|
+
///// calcAPCA, fontLookupAPCA } from 'apca-w3';
|
|
352
|
+
///// import { colorParsley } from 'colorparsley';
|
|
353
|
+
/////
|
|
354
|
+
///// FORWARD CONTRAST USAGE:
|
|
355
|
+
///// Lc = APCAcontrast( sRGBtoY( TEXTcolor ) , sRGBtoY( BACKGNDcolor ) );
|
|
356
|
+
///// Where the colors are sent as an rgba array [255,255,255,1]
|
|
357
|
+
/////
|
|
358
|
+
///// Retrieving an array of font sizes for the contrast:
|
|
359
|
+
///// fontArray = fontLookupAPCA(Lc);
|
|
360
|
+
/////
|
|
361
|
+
///// Live Demonstrator at https://www.myndex.com/APCA/
|
|
362
|
+
// *)
|
|
363
|
+
*/
|
|
210
364
|
//# sourceMappingURL=colorUtils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/colors/colorUtils.ts"],"sourcesContent":["import type { CssColor } from '@adobe/leonardo-contrast-colors';\nimport { Hsluv } from 'hsluv';\nimport chroma from 'chroma-js';\n\n/**\n * Converts a HEX color '#xxxxxx' into a CSS HSL string 'hsl(x,x,x)'\n *\n * @param hex A hex color string\n * @param valuesOnly If true, only the values are returned\n * @returns A CSS HSL string\n */\nexport const hexToCssHsl = (hex: string, valuesOnly = false) => {\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n let r = 0;\n let g = 0;\n let b = 0;\n let cssString = '';\n if (result) {\n r = parseInt(result[1], 16);\n g = parseInt(result[2], 16);\n b = parseInt(result[3], 16);\n }\n (r /= 255), (g /= 255), (b /= 255);\n const max = Math.max(r, g, b),\n min = Math.min(r, g, b);\n let h,\n s,\n l = (max + min) / 2;\n if (max == min) {\n h = s = 0; // achromatic\n } else {\n const d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n switch (max) {\n case r:\n h = (g - b) / d + (g < b ? 6 : 0);\n break;\n case g:\n h = (b - r) / d + 2;\n break;\n case b:\n h = (r - g) / d + 4;\n break;\n }\n }\n\n h = Math.round(h ? h * 360 : 0);\n s = Math.round(s * 100);\n l = Math.round(l * 100);\n\n cssString = h + ',' + s + '%,' + l + '%';\n cssString = !valuesOnly ? 'hsl(' + cssString + ')' : cssString;\n\n return cssString;\n};\n\n/**\n * Converts a HEX string '#xxxxxx' into an array of HSL values '[h,s,l]'\n *\n * @param H A Hex color string\n * @returns HSL values in an array\n */\nexport const hexToHSL = (H: string) => {\n // Convert hex to RGB first\n let r = 0,\n g = 0,\n b = 0;\n if (H.length == 4) {\n r = parseInt('0x' + H[1] + H[1]);\n g = parseInt('0x' + H[2] + H[2]);\n b = parseInt('0x' + H[3] + H[3]);\n } else if (H.length == 7) {\n r = parseInt('0x' + H[1] + H[2]);\n g = parseInt('0x' + H[3] + H[4]);\n b = parseInt('0x' + H[5] + H[6]);\n }\n // Then to HSL\n r /= 255;\n g /= 255;\n b /= 255;\n let h = 0,\n s = 0,\n l = 0;\n const cmin = Math.min(r, g, b),\n cmax = Math.max(r, g, b),\n delta = cmax - cmin;\n\n if (delta == 0) h = 0;\n else if (cmax == r) h = ((g - b) / delta) % 6;\n else if (cmax == g) h = (b - r) / delta + 2;\n else h = (r - g) / delta + 4;\n\n h = Math.round(h * 60);\n\n if (h < 0) h += 360;\n\n l = (cmax + cmin) / 2;\n s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));\n s = +(s * 100).toFixed(1);\n l = +(l * 100).toFixed(1);\n\n return [h, s, l];\n};\n\n/**\n * Converts a HSL number array '[h,s,l]' into HSL CSS string 'hsl(x,x,x)'\n *\n * @param HSL A HSL number array '[h,s,l]'\n * @returns A hex color string\n */\nexport const hslArrToCss = (HSL: number[]) => {\n return 'hsl(' + HSL[0] + ',' + HSL[1] + '%,' + HSL[2] + '%)';\n};\n\n/**\n * Converts a HSL CSS string 'hsl(x,x,x)' into an array of HSL values '[h,s,l]'\n *\n * @param h The HSL hue\n * @param s The HSL saturation\n * @param l The HSL lightness\n * @returns HEX color string\n */\nexport const HSLToHex = (h: number, s: number, l: number) => {\n s /= 100;\n l /= 100;\n\n let r = 0,\n g = 0,\n b = 0;\n const c = (1 - Math.abs(2 * l - 1)) * s,\n x = c * (1 - Math.abs(((h / 60) % 2) - 1)),\n m = l - c / 2;\n\n if (0 <= h && h < 60) {\n r = c;\n g = x;\n b = 0;\n } else if (60 <= h && h < 120) {\n r = x;\n g = c;\n b = 0;\n } else if (120 <= h && h < 180) {\n r = 0;\n g = c;\n b = x;\n } else if (180 <= h && h < 240) {\n r = 0;\n g = x;\n b = c;\n } else if (240 <= h && h < 300) {\n r = x;\n g = 0;\n b = c;\n } else if (300 <= h && h < 360) {\n r = c;\n g = 0;\n b = x;\n }\n // Having obtained RGB, convert channels to hex\n r = parseInt(Math.round((r + m) * 255).toString(16), 16);\n g = parseInt(Math.round((g + m) * 255).toString(16), 16);\n b = parseInt(Math.round((b + m) * 255).toString(16), 16);\n\n // Prepend 0s, if necessary\n if (r.toString().length == 1) r = parseInt('0' + r.toString(), 10);\n if (g.toString().length == 1) g = parseInt('0' + g.toString(), 10);\n if (b.toString().length == 1) b = parseInt('0' + b.toString(), 10);\n\n return '#' + r + g + b;\n};\n\n/**\n * Converts a HEX color '#xxxxxx' into an array of RGB values '[R, G, B]'\n *\n * @param hex A hex color string\n * @returns RGB values in an array\n */\nexport const hexToRgb = (hex: string) => {\n const shorthandRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\n hex = hex.replace(shorthandRegex, function (m, r: string, g: string, b: string) {\n return r + r + g + g + b + b;\n });\n\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result\n ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16),\n }\n : null;\n};\n\n/**\n * Get the luminance of an RGB color\n *\n * @param r RGB red value\n * @param G RGB green value\n * @param b RGB blue value\n * @returns\n */\nexport const luminanceFromRgb = (r: string, g: string, b: string) => {\n const a = [Number(r), Number(g), Number(b)].map(function (v) {\n v /= 255;\n return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);\n });\n return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;\n};\n\n/**\n * Get the luminance of a HEX color\n *\n * @param hex A hex color string\n * @returns\n */\nexport const luminanceFromHex = (hex: CssColor) => {\n const rgb = hexToRgb(hex);\n if (rgb) {\n const r = rgb.r.toString();\n const g = rgb.g.toString();\n const b = rgb.b.toString();\n return luminanceFromRgb(r, g, b);\n }\n return 2;\n};\n\n/**\n * Get the contrast ratio between two luminance values\n *\n * @param lum1 The first luminance value\n * @param lum2 The second luminance value\n * @returns\n */\nexport const getRatioFromLum = (lum1: number, lum2: number) => {\n if (lum1 !== null && lum2 !== null) {\n return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);\n } else {\n return -1;\n }\n};\n\n/**\n * Get the HSL lightness from a HEX color\n *\n * @param hex A hex color string\n * @returns\n */\nexport const getHslLightessFromHex = (hex: CssColor) => {\n return chroma(hex).hsl()[2];\n};\n\nexport const getHslSaturationFromHex = (hex: CssColor) => {\n return chroma(hex).hsl()[1];\n};\n\n/**\n * Get the HSLuv lightness from a HEX color\n *\n * @param hex A hex color string\n * @returns\n */\nexport const getLightnessFromHex = (hex: string) => {\n const conv = new Hsluv();\n conv.hex = hex;\n conv.hexToHsluv();\n return Number(conv.hsluv_l.toFixed(0));\n};\n\n/**\n * Get the contrast ratio between two HEX colors\n *\n * @param {CssColor} color1 The first color\n * @param {CssColor} color2 The second color\n * @returns\n */\nexport const getContrastFromHex = (color1: CssColor, color2: CssColor) => {\n const lum1 = luminanceFromHex(color1);\n const lum2 = luminanceFromHex(color2);\n if (lum1 !== null && lum2 !== null) {\n return getRatioFromLum(lum1, lum2);\n }\n return -1;\n};\n\n/**\n * Get the contrast ratio between two colors at a specific lightness\n *\n * @param lightness The lightness value\n * @param mainColor The main color\n * @param backgroundColor The background color\n * @returns The contrast ratio\n */\nexport const getContrastFromLightness = (lightness: number, mainColor: CssColor, backgroundColor: CssColor) => {\n const conv = new Hsluv();\n conv.hex = mainColor;\n conv.hexToHsluv();\n conv.hsluv_l = lightness;\n conv.hsluvToHex();\n const lightMainColor = conv.hex;\n const lum1 = luminanceFromHex(lightMainColor as CssColor);\n const lum2 = luminanceFromHex(backgroundColor);\n const ratio = getRatioFromLum(lum1 ?? 0, lum2 ?? 0);\n\n return ratio;\n};\n\n/**\n * Maps the numbers from [start1 - end1] to the range [start2 - end2], maintaining the proportionality between the numbers in the ranges using lineaer interpolation.\n */\n// const mapRange = (value: number, start1: number, end1: number, start2: number, end2: number) => {\n// return start2 + ((value - start1) * (end2 - start2)) / (end1 - start1);\n// };\n\n/**\n * Check if two colors have enough contrast to be used together\n *\n * @param {CssColor} color1 The first color\n * @param {CssColor} color2 The second color\n * @returns {boolean} If the colors have enough contrast\n */\nexport const areColorsContrasting = (color1: CssColor, color2: CssColor, type: 'text' | 'decorative' = 'text') => {\n const contrast = getContrastFromHex(color1, color2);\n if (contrast !== null) {\n if (type === 'text') {\n return contrast >= 4.5;\n } else {\n return contrast >= 3;\n }\n }\n return false;\n};\n\n/**\n * Check if aa string value is a HEX color\n *\n * @param {string} hex The string to check\n * @returns {boolean} If the string is a HEX color\n */\nexport const isHexColor = (hex: string) => {\n return typeof hex === 'string' && hex.length === 6 && !isNaN(Number('0x' + hex));\n};\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/colors/colorUtils.ts","../../../../../node_modules/apca-w3/src/apca-w3.js"],"sourcesContent":["import type { CssColor } from '@adobe/leonardo-contrast-colors';\nimport { Hsluv } from 'hsluv';\nimport chroma from 'chroma-js';\nimport { APCAcontrast, sRGBtoY } from 'apca-w3';\n\n/**\n * Converts a HEX color '#xxxxxx' into a CSS HSL string 'hsl(x,x,x)'\n *\n * @param hex A hex color string\n * @param valuesOnly If true, only the values are returned\n * @returns A CSS HSL string\n */\nexport const hexToCssHsl = (hex: string, valuesOnly = false) => {\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n let r = 0;\n let g = 0;\n let b = 0;\n let cssString = '';\n if (result) {\n r = parseInt(result[1], 16);\n g = parseInt(result[2], 16);\n b = parseInt(result[3], 16);\n }\n (r /= 255), (g /= 255), (b /= 255);\n const max = Math.max(r, g, b),\n min = Math.min(r, g, b);\n let h,\n s,\n l = (max + min) / 2;\n if (max == min) {\n h = s = 0; // achromatic\n } else {\n const d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n switch (max) {\n case r:\n h = (g - b) / d + (g < b ? 6 : 0);\n break;\n case g:\n h = (b - r) / d + 2;\n break;\n case b:\n h = (r - g) / d + 4;\n break;\n }\n }\n\n h = Math.round(h ? h * 360 : 0);\n s = Math.round(s * 100);\n l = Math.round(l * 100);\n\n cssString = h + ',' + s + '%,' + l + '%';\n cssString = !valuesOnly ? 'hsl(' + cssString + ')' : cssString;\n\n return cssString;\n};\n\n/**\n * Converts a HEX string '#xxxxxx' into an array of HSL values '[h,s,l]'\n *\n * @param H A Hex color string\n * @returns HSL values in an array\n */\nexport const hexToHSL = (H: string) => {\n // Convert hex to RGB first\n let r = 0,\n g = 0,\n b = 0;\n if (H.length == 4) {\n r = parseInt('0x' + H[1] + H[1]);\n g = parseInt('0x' + H[2] + H[2]);\n b = parseInt('0x' + H[3] + H[3]);\n } else if (H.length == 7) {\n r = parseInt('0x' + H[1] + H[2]);\n g = parseInt('0x' + H[3] + H[4]);\n b = parseInt('0x' + H[5] + H[6]);\n }\n // Then to HSL\n r /= 255;\n g /= 255;\n b /= 255;\n let h = 0,\n s = 0,\n l = 0;\n const cmin = Math.min(r, g, b),\n cmax = Math.max(r, g, b),\n delta = cmax - cmin;\n\n if (delta == 0) h = 0;\n else if (cmax == r) h = ((g - b) / delta) % 6;\n else if (cmax == g) h = (b - r) / delta + 2;\n else h = (r - g) / delta + 4;\n\n h = Math.round(h * 60);\n\n if (h < 0) h += 360;\n\n l = (cmax + cmin) / 2;\n s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));\n s = +(s * 100).toFixed(1);\n l = +(l * 100).toFixed(1);\n\n return [h, s, l];\n};\n\n/**\n * Converts a HEX color '#xxxxxx' into an array of HSLuv values '[h,s,l]'\n *\n * @param hex A hex color string\n * @returns\n */\nexport const hexToHsluv = (hex: string) => {\n const conv = new Hsluv();\n conv.hex = hex;\n conv.hexToHsluv();\n return [conv.hsluv_h, conv.hsluv_s, conv.hsluv_l];\n};\n\n/**\n * Converts a HSL number array '[h,s,l]' into HSL CSS string 'hsl(x,x,x)'\n *\n * @param HSL A HSL number array '[h,s,l]'\n * @returns A hex color string\n */\nexport const hslArrToCss = (HSL: number[]) => {\n return 'hsl(' + HSL[0] + ',' + HSL[1] + '%,' + HSL[2] + '%)';\n};\n\n/**\n * Converts a HSL CSS string 'hsl(x,x,x)' into an array of HSL values '[h,s,l]'\n *\n * @param h The HSL hue\n * @param s The HSL saturation\n * @param l The HSL lightness\n * @returns HEX color string\n */\nexport const HSLToHex = (h: number, s: number, l: number) => {\n s /= 100;\n l /= 100;\n\n let r = 0,\n g = 0,\n b = 0;\n const c = (1 - Math.abs(2 * l - 1)) * s,\n x = c * (1 - Math.abs(((h / 60) % 2) - 1)),\n m = l - c / 2;\n\n if (0 <= h && h < 60) {\n r = c;\n g = x;\n b = 0;\n } else if (60 <= h && h < 120) {\n r = x;\n g = c;\n b = 0;\n } else if (120 <= h && h < 180) {\n r = 0;\n g = c;\n b = x;\n } else if (180 <= h && h < 240) {\n r = 0;\n g = x;\n b = c;\n } else if (240 <= h && h < 300) {\n r = x;\n g = 0;\n b = c;\n } else if (300 <= h && h < 360) {\n r = c;\n g = 0;\n b = x;\n }\n // Having obtained RGB, convert channels to hex\n r = parseInt(Math.round((r + m) * 255).toString(16), 16);\n g = parseInt(Math.round((g + m) * 255).toString(16), 16);\n b = parseInt(Math.round((b + m) * 255).toString(16), 16);\n\n // Prepend 0s, if necessary\n if (r.toString().length == 1) r = parseInt('0' + r.toString(), 10);\n if (g.toString().length == 1) g = parseInt('0' + g.toString(), 10);\n if (b.toString().length == 1) b = parseInt('0' + b.toString(), 10);\n\n return '#' + r + g + b;\n};\n\n/**\n * Converts a HEX color '#xxxxxx' into an array of RGB values '[R, G, B]'\n *\n * @param hex A hex color string\n * @returns RGB values in an array\n */\nexport const hexToRgb = (hex: string) => {\n const shorthandRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\n hex = hex.replace(shorthandRegex, function (m, r: string, g: string, b: string) {\n return r + r + g + g + b + b;\n });\n\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result\n ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16),\n }\n : null;\n};\n\n/**\n * Get the luminance of an RGB color\n *\n * @param r RGB red value\n * @param G RGB green value\n * @param b RGB blue value\n * @returns\n */\nexport const luminanceFromRgb = (r: string, g: string, b: string) => {\n const a = [Number(r), Number(g), Number(b)].map(function (v) {\n v /= 255;\n return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);\n });\n return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;\n};\n\n/**\n * Get the luminance of a HEX color\n *\n * @param hex A hex color string\n * @returns\n */\nexport const luminanceFromHex = (hex: CssColor) => {\n const rgb = hexToRgb(hex);\n if (rgb) {\n const r = rgb.r.toString();\n const g = rgb.g.toString();\n const b = rgb.b.toString();\n return luminanceFromRgb(r, g, b);\n }\n return 2;\n};\n\n/**\n * Get the contrast ratio between two luminance values\n *\n * @param lum1 The first luminance value\n * @param lum2 The second luminance value\n * @returns\n */\nexport const getRatioFromLum = (lum1: number, lum2: number) => {\n if (lum1 !== null && lum2 !== null) {\n return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);\n } else {\n return -1;\n }\n};\n\n/**\n * Get the HSL lightness from a HEX color\n *\n * @param hex A hex color string\n * @returns\n */\nexport const getHslLightessFromHex = (hex: CssColor) => {\n return chroma(hex).hsl()[2];\n};\n\nexport const getHslSaturationFromHex = (hex: CssColor) => {\n return chroma(hex).hsl()[1];\n};\n\n/**\n * Get the HSLuv lightness from a HEX color\n *\n * @param hex A hex color string\n * @returns\n */\nexport const getLightnessFromHex = (hex: string) => {\n const conv = new Hsluv();\n conv.hex = hex;\n conv.hexToHsluv();\n return Number(conv.hsluv_l.toFixed(0));\n};\n\n/**\n * Get the contrast ratio between two HEX colors\n *\n * @param {CssColor} color1 The first color\n * @param {CssColor} color2 The second color\n * @returns\n */\nexport const getContrastFromHex = (color1: CssColor, color2: CssColor) => {\n const lum1 = luminanceFromHex(color1);\n const lum2 = luminanceFromHex(color2);\n if (lum1 !== null && lum2 !== null) {\n return getRatioFromLum(lum1, lum2);\n }\n return -1;\n};\n\n/**\n * Get the contrast ratio between two colors at a specific lightness\n *\n * @param lightness The lightness value\n * @param mainColor The main color\n * @param backgroundColor The background color\n * @returns The contrast ratio\n */\nexport const getContrastFromLightness = (lightness: number, mainColor: CssColor, backgroundColor: CssColor) => {\n const conv = new Hsluv();\n conv.hex = mainColor;\n conv.hexToHsluv();\n conv.hsluv_l = lightness;\n conv.hsluvToHex();\n const lightMainColor = conv.hex;\n const lum1 = luminanceFromHex(lightMainColor as CssColor);\n const lum2 = luminanceFromHex(backgroundColor);\n const ratio = getRatioFromLum(lum1 ?? 0, lum2 ?? 0);\n\n return ratio;\n};\n\n/**\n * Maps the numbers from [start1 - end1] to the range [start2 - end2], maintaining the proportionality between the numbers in the ranges using lineaer interpolation.\n */\n// const mapRange = (value: number, start1: number, end1: number, start2: number, end2: number) => {\n// return start2 + ((value - start1) * (end2 - start2)) / (end1 - start1);\n// };\n\n/**\n * Check if two colors have enough contrast to be used together\n *\n * @param {CssColor} color1 The first color\n * @param {CssColor} color2 The second color\n * @returns {boolean} If the colors have enough contrast\n */\nexport const areColorsContrasting = (color1: CssColor, color2: CssColor, type: 'decorative' | 'aa' | 'aaa' = 'aa') => {\n const contrast = getContrastFromHex(color1, color2);\n if (contrast !== null) {\n if (type === 'aaa') {\n return contrast >= 7;\n } else if (type === 'aa') {\n return contrast >= 4.5;\n } else {\n return contrast >= 3;\n }\n }\n return false;\n};\n\nexport const getApcaContrastLc = (textColor: CssColor, backgroundColor: CssColor) => {\n const textColorRgb = hexToRgb(textColor);\n const backgroundColorRgb = hexToRgb(backgroundColor);\n\n if (textColorRgb && backgroundColorRgb) {\n return APCAcontrast(\n sRGBtoY([textColorRgb.r, textColorRgb.g, textColorRgb.b]),\n sRGBtoY([backgroundColorRgb.r, backgroundColorRgb.g, backgroundColorRgb.b]),\n );\n }\n return 0;\n};\n\n/**\n * Check if aa string value is a HEX color\n *\n * @param {string} hex The string to check\n * @returns {boolean} If the string is a HEX color\n */\nexport const isHexColor = (hex: string) => {\n return typeof hex === 'string' && hex.length === 6 && !isNaN(Number('0x' + hex));\n};\n","///////////////////////////////////////////////////////////////////////////////\n/** @preserve\n///// SAPC APCA - Advanced Perceptual Contrast Algorithm\n///// Beta 0.1.9 W3 • contrast function only\n///// DIST: W3 • Revision date: July 3, 2022\n///// Function to parse color values and determine Lc contrast\n///// Copyright © 2019-2022 by Andrew Somers. All Rights Reserved.\n///// LICENSE: W3 LICENSE\n///// CONTACT: Please use the ISSUES or DISCUSSIONS tab at:\n///// https://github.com/Myndex/SAPC-APCA/\n/////\n///////////////////////////////////////////////////////////////////////////////\n/////\n///// MINIMAL IMPORTS:\n///// import { APCAcontrast, sRGBtoY, displayP3toY,\n///// calcAPCA, fontLookupAPCA } from 'apca-w3';\n///// import { colorParsley } from 'colorparsley';\n/////\n///// FORWARD CONTRAST USAGE:\n///// Lc = APCAcontrast( sRGBtoY( TEXTcolor ) , sRGBtoY( BACKGNDcolor ) );\n///// Where the colors are sent as an rgba array [255,255,255,1]\n/////\n///// Retrieving an array of font sizes for the contrast:\n///// fontArray = fontLookupAPCA(Lc);\n/////\n///// Live Demonstrator at https://www.myndex.com/APCA/\n// */\n///////////////////////////////////////////////////////////////////////////////\n\n////////////////////////////////////////////////////////////////////////////////\n/////\n///// SAPC Method and APCA Algorithm\n///// W3 Licensed Version: https://github.com/Myndex/apca-w3\n///// GITHUB MAIN REPO: https://github.com/Myndex/SAPC-APCA\n///// DEVELOPER SITE: https://git.myndex.com/\n/////\n///// Acknowledgments and Thanks To:\n///// • This project references the research & work of M.Fairchild, R.W.Hunt,\n///// Drs. Bailey/Lovie-Kitchin, G.Legge, A.Arditi, M.Stone, C.Poynton, \n///// L.Arend, M.Luo, E.Burns, R.Blackwell, P.Barton, M.Brettel, and many \n///// others — see refs at https://www.myndex.com/WEB/WCAG_CE17polarity\n///// • Bruce Bailey of USAccessBoard for his encouragement, ideas, & feedback\n///// • Chris Lilly of W3C for continued review, examination, & oversight\n///// • Chris Loiselle of Oracle for getting us back on track in a pandemic\n///// • The many volunteer test subjects for participating in the studies.\n///// • The many early adopters, beta testers, and code/issue contributors\n///// • Principal research conducted at Myndex by A.Somers.\n/////\n////////////////////////////////////////////////////////////////////////////////\n\n////////////////////////////////////////////////////////////////////////////////\n/////\n///// ***** SAPC BLOCK *****\n/////\n///// For Evaluations, refer to this as: SAPC-8, 0.0.98G-series constant 4g\n///// SAPC • S-LUV Advanced Predictive Color\n/////\n///// SIMPLE VERSION — Only the basic APCA contrast predictor.\n/////\n///// Included Extensions & Model Features in this file:\n///// • SAPC-8 Core Contrast (Base APCA, non-clinical use only) \n///// • G series constants, group \"G-4g\" using a 2.4 monitor exponent\n///// • sRGB to Y, parses numeric sRGB color to luminance\n///// • SoftToe black level soft clamp and flare compensation.\n/////\n/////\n////////////////////////////////////////////////////////////////////////////////\n/////\n///// DISCLAIMER AND LIMITATIONS OF USE\n///// APCA is an embodiment of certain suprathreshold contrast\n///// prediction technologies and it is licensed to the W3 on a\n///// limited basis for use in certain specific accessibility\n///// guidelines for web content only. APCA may be used for \n///// predicting colors for web content use without royalty.\n/////\n///// However, Any such license excludes other use cases\n///// not related to web content. Prohibited uses include\n///// medical, clinical evaluation, human safety related,\n///// aerospace, transportation, military applications, \n///// and uses which are not specific to web based content\n///// presented on self-illuminated displays or devices.\n/////\n////////////////////////////////////////////////////////////////////////////////\n\n////////// APCA 0.1.9 G 4g USAGE ///////////////////////////////////////////\n///\n/// The API for \"APCA 0.1.9\" is trivially simple.\n/// Send text and background sRGB numeric values to the sRGBtoY() function,\n/// and send the resulting text-Y and background-Y to the APCAcontrast function\n/// it returns a signed float with the numeric Lc contrast result.\n/// \n/// The two inputs are TEXT color and BACKGROUND color in that order.\n/// Each must be a numeric NOT a string, as this simple version has\n/// no string parsing utilities. EXAMPLE:\n/// ________________________________________________________________________\n///\n/// txtColor = colorParsley(0x123456); // color of the text\n/// bgColor = colorParsley(0xabcdef); // color for the background\n///\n/// contrastLc = APCAcontrast( sRGBtoY(txtColor) , sRGBtoY(bgColor) );\n/// ________________________________________________________________________\n///\n/// ********** QUICK START **********\n///\n/// Each color must be a 24bit color (8 bit per channel) as a single integer\n/// (or 0x) sRGB encoded color, i.e. White is either the integer 16777216 or\n/// the hex 0xffffff. A float is returned with a positive or negative value.\n/// Negative values mean light text and a dark background, positive values\n/// mean dark text and a light background. 60.0, or -60.0 is a contrast\n/// \"sort of like\" the old WCAG 2's 4.5:1. NOTE: the total range is now less\n/// than ± 110, so output can be rounded to a signed INT but DO NOT output\n/// an absolute value - light text on dark BG should return a negative number.\n///\n/// ***** IMPORTANT: Do Not Mix Up Text and Background inputs. *****\n/// **************** APCA is polarity sensitive! *****************\n/// \n////////////////////////////////////////////////////////////////////////////////\n\n\n////////////////////////////////////////////////////////////////////////////////\n///////////////////////////////////////////////////////////////////////////////\n///// BEGIN APCA 0.1.9 BLOCK \\/////////////////////////////////////\n//// \\///////////////////////////////////\n/// \\/////////////////////////////////\n// \\///////////////////////////////\n\n\n///// DEPENDENCIES /////\n\n// The following imports are not needed for the main APCA function,\n// but are needed for the shortcut/alias calcAPCA(), and for the\n// future invertAPCA function, which examines hue.\n\n //// (add slash to line start for local test mode, remove before push)\n/* //// LOCAL TESTING SWITCH for using test.html\n import{colorParsley}from'../node_modules/colorparsley/src/colorparsley.js';\n/*/ //// TOGGLE\n import { colorParsley } from 'colorparsley';\n// */ //// END LOCAL TESTING SWITCH\n\n\n///// Module Scope Object Containing Constants /////\n///// APCA 0.0.98G - 4g - W3 Compatible Constants\n\n///// 𝒦 SA98G ///////////////////////////////////\n const SA98G = {\n\n mainTRC: 2.4, // 2.4 exponent for emulating actual monitor perception\n\n // For reverseAPCA\n get mainTRCencode() { return 1 / this.mainTRC },\n\n // sRGB coefficients\n sRco: 0.2126729, \n sGco: 0.7151522, \n sBco: 0.0721750, \n\n // G-4g constants for use with 2.4 exponent\n normBG: 0.56, \n normTXT: 0.57,\n revTXT: 0.62,\n revBG: 0.65,\n\n // G-4g Clamps and Scalers\n blkThrs: 0.022,\n blkClmp: 1.414, \n scaleBoW: 1.14,\n scaleWoB: 1.14,\n loBoWoffset: 0.027,\n loWoBoffset: 0.027,\n deltaYmin: 0.0005,\n loClip: 0.1,\n\n ///// MAGIC NUMBERS for UNCLAMP, for use with 0.022 & 1.414 /////\n // Magic Numbers for reverseAPCA\n mFactor: 1.94685544331710,\n get mFactInv() { return 1 / this.mFactor},\n mOffsetIn: 0.03873938165714010,\n mExpAdj: 0.2833433964208690,\n get mExp() { return this.mExpAdj / this.blkClmp},\n mOffsetOut: 0.3128657958707580,\n }\n\n\n\n\n//////////////////////////////////////////////////////////////////////////////\n////////// APCA CALCULATION FUNCTIONS \\/////////////////////////////////////\n\n////////// ƒ APCAcontrast() ////////////////////////////////////////////\nexport function APCAcontrast (txtY,bgY,places = -1) {\n // send linear Y (luminance) for text and background.\n // txtY and bgY must be between 0.0-1.0\n // IMPORTANT: Do not swap, polarity is important.\n\n const icp = [0.0,1.1]; // input range clamp / input error check\n\n if(isNaN(txtY)||isNaN(bgY)||Math.min(txtY,bgY)<icp[0]||\n Math.max(txtY,bgY)>icp[1]){\n return 0.0; // return zero on error\n // return 'error'; // optional string return for error\n };\n\n////////// SAPC LOCAL VARS /////////////////////////////////////////\n\n let SAPC = 0.0; // For raw SAPC values\n let outputContrast = 0.0; // For weighted final values\n let polCat = 'BoW'; // Alternate Polarity Indicator. N normal R reverse\n\n // TUTORIAL\n\n // Use Y for text and BG, and soft clamp black,\n // return 0 for very close luminances, determine\n // polarity, and calculate SAPC raw contrast\n // Then scale for easy to remember levels.\n\n // Note that reverse contrast (white text on black)\n // intentionally returns a negative number\n // Proper polarity is important!\n\n////////// BLACK SOFT CLAMP ////////////////////////////////////////\n\n // Soft clamps Y for either color if it is near black.\n txtY = (txtY > SA98G.blkThrs) ? txtY :\n txtY + Math.pow(SA98G.blkThrs - txtY, SA98G.blkClmp);\n bgY = (bgY > SA98G.blkThrs) ? bgY :\n bgY + Math.pow(SA98G.blkThrs - bgY, SA98G.blkClmp);\n\n ///// Return 0 Early for extremely low ∆Y\n if ( Math.abs(bgY - txtY) < SA98G.deltaYmin ) { return 0.0; }\n\n\n////////// APCA/SAPC CONTRAST - LOW CLIP (W3 LICENSE) ///////////////\n\n if ( bgY > txtY ) { // For normal polarity, black text on white (BoW)\n\n // Calculate the SAPC contrast value and scale\n SAPC = ( Math.pow(bgY, SA98G.normBG) - \n Math.pow(txtY, SA98G.normTXT) ) * SA98G.scaleBoW;\n\n // Low Contrast smooth rollout to prevent polarity reversal\n // and also a low-clip for very low contrasts\n outputContrast = (SAPC < SA98G.loClip) ? 0.0 : SAPC - SA98G.loBoWoffset;\n\n } else { // For reverse polarity, light text on dark (WoB)\n // WoB should always return negative value.\n polCat = 'WoB';\n\n SAPC = ( Math.pow(bgY, SA98G.revBG) - \n Math.pow(txtY, SA98G.revTXT) ) * SA98G.scaleWoB;\n\n outputContrast = (SAPC > -SA98G.loClip) ? 0.0 : SAPC + SA98G.loWoBoffset;\n }\n\n // return Lc (lightness contrast) as a signed numeric value \n // Round to the nearest whole number as string is optional.\n // Rounded can be a signed INT as output will be within ± 127 \n // places = -1 returns signed float, 1 or more set that many places\n // 0 returns rounded string, uses BoW or WoB instead of minus sign\n\n if(places < 0 ){ // Default (-1) number out, all others are strings\n return outputContrast * 100.0;\n } else if(places == 0 ){\n return Math.round(Math.abs(outputContrast)*100.0)+'<sub>'+polCat+'</sub>';\n } else if(Number.isInteger(places)){\n return (outputContrast * 100.0).toFixed(places);\n } else { return 0.0 }\n\n} // End APCAcontrast()\n\n\n\n\n/* SWITCH -- WORK IN PROGRESS DO NOT USE\n////////// ƒ invertAPCA() //////////////////////////////////////////////////\nexport function invertAPCA (\n {knownColor: [128,128,128], knownType: 'bg', targetCnst: 75,\n returnAs: 'object', unknownType: 'txt', hueInvert: false,\n hueRange: 5, preserveSat: false }) {\n\n //if (Math.abs(targetCnst) < 15) { return false }; // abs contrast must be > 15\n\n let knownY = sRGBtoY (knownColor);\n let unknownY = knownY, knownExp, unknownExp;\n let min,max,knownLs,isBG = true;\n\n\n if (knownType == 'bg' || knownType == 'background') {\n knownLs = Math.pow(knownY, );\n black = APCAcontrast(0,knownY);\n white = APCAcontrast(1,knownY);\n } else if (knownType == 'txt' || knownType == 'text') {\n isBG = false;\n black = APCAcontrast(knownY,0);\n white = APCAcontrast(knownY,1);\n } else { return false } // return false on error\n\n\n///// APCA 0.0.98G - 4g - W3 Compatible Constants ////////////////////\n\n const scale = contrast > 0 ? SA98G.scaleBoW : SA98G.scaleWoB;\n const offset = contrast > 0 ? SA98G.loBoWoffset : -SA98G.loWoBoffset;\n\n\n targetCnst = ( parseFloat(targetCnst) * 0.01 + offset ) / scale;\n\n // Soft clamps Y if it is near black.\n knownY = (knownY > SA98G.blkThrs) ? knownY :\n knownY + Math.pow(SA98G.blkThrs - knownY, SA98G.blkClmp);\n \n // set the known and unknown exponents\n if (isBG) {\n knownExp = targetCnst > 0 ? SA98G.normBG : SA98G.revBG;\n unknownExp = targetCnst > 0 ? SA98G.normTXT : SA98G.revTXT;\n unknownY = Math.pow( Math.pow(knownY,knownExp) - targetCnst, 1/unknownExp );\n if (isNaN(unknownY)) return false;\n } else if (!isBG) {\n knownExp = targetCnst > 0 ? SA98G.normTXT : SA98G.revTXT;\n unknownExp = targetCnst > 0 ? SA98G.normBG : SA98G.revBG;\n unknownY = Math.pow(targetCnst + Math.pow(knownY,knownExp), 1/unknownExp );\n if (isNaN(unknownY)) return false;\n }\n\n //return contrast +'----'+unknownY;\n\n if (unknownY > 1.06 || unknownY < 0) { return false } // return false on overflow\n // if (unknownY < 0) { return false } // return false on underflow\n //unknownY = Math.max(unknownY,0.0);\n \n // unclamp\n unknownY = (unknownY > SA98G.blkThrs) ? unknownY : \n (Math.pow(((unknownY + SA98G.mOffsetIn)m* SA98G.mFactor),\n SA98G.mExp) * SA98G.mFactInv) - SA98G.mOffsetOut;\n \n// unknownY - 0.22 * Math.pow(unknownY*0.5, 1/blkClmp);\n\n unknownY = Math.max(Math.min(unknownY,1.0),0.0);\n\n let testedCnst = (isBG) ? APCAcontrast(unknownY,knownY) : \n APCAcontrast(knownY,unknownY);\n\n if (returnAs === 'object') {\n let hexB = ( Math.round(Math.pow(unknownY,SA98G.mainTRCencode) * 255)\n ).toString(16).padStart(2,'0');\n hexB = '#' + hexB + hexB + hexB;\n return {color: hexB, Lc: testedCnst, whiteLc: white, blackLc: black};\n } else if (returnAs === 'hex') {\n let hexB = ( Math.round(Math.pow(unknownY,SA98G.mainTRCencode) * 255)\n ).toString(16).padStart(2,'0');\n return '#' + hexB + hexB + hexB;\n } else if (returnAs === 'array') {\n let colorB = Math.round(Math.pow(unknownY,SA98G.mainTRCencode) * 255);\n let retUse = (knownType == 'bg') ? 'txtColor' : 'bgColor'\n return [colorB,colorB,colorB,1,retUse];\n } else if (returnAs === 'Y' || returnAs === 'y') {\n return Math.max(0.0,unknownY);\n } else { return false } // return knownY on error\n}\n// */ // END SWITCH\n\n\n\n\n////////// ƒ reverseAPCA() DEPRECATED SOON ///////////////////////////////\nexport function reverseAPCA (contrast = 0,knownY = 1.0,\n knownType = 'bg',returnAs = 'hex') {\n \n if (Math.abs(contrast) < 9) { return false }; // abs contrast must be > 9\n \n let unknownY = knownY, knownExp, unknownExp;\n \n///// APCA 0.0.98G - 4g - W3 Compatible Constants ////////////////////\n\n const scale = contrast > 0 ? SA98G.scaleBoW : SA98G.scaleWoB;\n const offset = contrast > 0 ? SA98G.loBoWoffset : -SA98G.loWoBoffset;\n\n\n contrast = ( parseFloat(contrast) * 0.01 + offset ) / scale;\n\n // Soft clamps Y if it is near black.\n knownY = (knownY > SA98G.blkThrs) ? knownY :\n knownY + Math.pow(SA98G.blkThrs - knownY, SA98G.blkClmp);\n \n // set the known and unknown exponents\n if (knownType == 'bg' || knownType == 'background') {\n knownExp = contrast > 0 ? SA98G.normBG : SA98G.revBG;\n unknownExp = contrast > 0 ? SA98G.normTXT : SA98G.revTXT;\n unknownY = Math.pow( Math.pow(knownY,knownExp) - contrast, 1/unknownExp );\n if (isNaN(unknownY)) return false;\n } else if (knownType == 'txt' || knownType == 'text') {\n knownExp = contrast > 0 ? SA98G.normTXT : SA98G.revTXT;\n unknownExp = contrast > 0 ? SA98G.normBG : SA98G.revBG;\n unknownY = Math.pow(contrast + Math.pow(knownY,knownExp), 1/unknownExp );\n if (isNaN(unknownY)) return false;\n } else { return false } // return false on error\n\n //return contrast +'----'+unknownY;\n\n if (unknownY > 1.06 || unknownY < 0) { return false } // return false on overflow\n // if (unknownY < 0) { return false } // return false on underflow\n //unknownY = Math.max(unknownY,0.0);\n \n // unclamp\n unknownY = (unknownY > SA98G.blkThrs) ? unknownY : \n (Math.pow(((unknownY + SA98G.mOffsetIn) * SA98G.mFactor),\n SA98G.mExp) * SA98G.mFactInv) - SA98G.mOffsetOut;\n \n// unknownY - 0.22 * Math.pow(unknownY*0.5, 1/blkClmp);\n\n unknownY = Math.max(Math.min(unknownY,1.0),0.0);\n\n if (returnAs === 'hex') {\n let hexB = ( Math.round(Math.pow(unknownY,SA98G.mainTRCencode) * 255)\n ).toString(16).padStart(2,'0');\n\n return '#' + hexB + hexB + hexB;\n } else if (returnAs === 'color') {\n let colorB = Math.round(Math.pow(unknownY,SA98G.mainTRCencode) * 255);\n let retUse = (knownType == 'bg') ? 'txtColor' : 'bgColor'\n return [colorB,colorB,colorB,1,retUse];\n } else if (returnAs === 'Y' || returnAs === 'y') {\n return Math.max(0.0,unknownY);\n } else { return false } // return knownY on error\n}\n\n\n\n\n////////// ƒ calcAPCA() /////////////////////////////////////////////\nexport function calcAPCA (textColor, bgColor, places = -1, round = true) {\n\n // Note that this function requires colorParsley !!\n\tlet bgClr = colorParsley(bgColor);\n\tlet txClr = colorParsley(textColor);\n\tlet hasAlpha = (txClr[3] == '' || txClr[3] == 1) ? false : true ;\n\n\tif (hasAlpha) { txClr = alphaBlend( txClr, bgClr, round); };\n\n\treturn APCAcontrast( sRGBtoY(txClr), sRGBtoY(bgClr), places)\n} // End calcAPCA()\n\n\n\n\n//////////////////////////////////////////////////////////////////////////////\n////////// ƒ fontLookupAPCA() 0.1.7 (G) \\////////////////////////////////\n///////// \\//////////////////////////////\n\nexport function fontLookupAPCA (contrast,places=2) {\n\n////////////////////////////////////////////////////////////////////////////\n///// CONTRAST * FONT WEIGHT & SIZE /////////////////////////////////////\n\n// Font size interpolations. Here the chart was re-ordered to put\n// the main contrast levels each on one line, instead of font size per line.\n// First column is LC value, then each following column is font size by weight\n\n// G G G G G G Public Beta 0.1.7 (G) • MAY 28 2022\n\n// Lc values under 70 should have Lc 15 ADDED if used for body text\n// All font sizes are in px and reference font is Barlow\n\n// 999: prohibited - too low contrast\n// 777: NON TEXT at this minimum weight stroke\n// 666 - this is for spot text, not fluent-Things like copyright or placeholder.\n// 5xx - minimum font at this weight for content, 5xx % 500 for font-size\n// 4xx - minimum font at this weight for any purpose], 4xx % 400 for font-size\n\n// MAIN FONT SIZE LOOKUP\n\n//// ASCENDING SORTED Public Beta 0.1.7 (G) • MAY 28 2022 ////\n\n//// Lc 45 * 0.2 = 9 which is the index for the row for Lc 45\n\n// MAIN FONT LOOKUP May 28 2022 EXPANDED\n// Sorted by Lc Value\n// First row is standard weights 100-900\n// First column is font size in px\n// All other values are the Lc contrast \n// 999 = too low. 777 = non-text and spot text only\n\n\nconst fontMatrixAscend = [\n ['Lc',100,200,300,400,500,600,700,800,900],\n [0,999,999,999,999,999,999,999,999,999],\n [10,999,999,999,999,999,999,999,999,999],\n [15,777,777,777,777,777,777,777,777,777],\n [20,777,777,777,777,777,777,777,777,777],\n [25,777,777,777,120,120,108,96,96,96],\n [30,777,777,120,108,108,96,72,72,72],\n [35,777,120,108,96,72,60,48,48,48],\n [40,120,108,96,60,48,42,32,32,32],\n [45,108,96,72,42,32,28,24,24,24],\n [50,96,72,60,32,28,24,21,21,21],\n [55,80,60,48,28,24,21,18,18,18],\n [60,72,48,42,24,21,18,16,16,18],\n [65,68,46,32,21.75,19,17,15,16,18],\n [70,64,44,28,19.5,18,16,14.5,16,18],\n [75,60,42,24,18,16,15,14,16,18],\n [80,56,38.25,23,17.25,15.81,14.81,14,16,18],\n [85,52,34.5,22,16.5,15.625,14.625,14,16,18],\n [90,48,32,21,16,15.5,14.5,14,16,18],\n [95,45,28,19.5,15.5,15,14,13.5,16,18],\n [100,42,26.5,18.5,15,14.5,13.5,13,16,18],\n [105,39,25,18,14.5,14,13,12,16,18],\n [110,36,24,18,14,13,12,11,16,18],\n [115,34.5,22.5,17.25,12.5,11.875,11.25,10.625,14.5,16.5],\n [120,33,21,16.5,11,10.75,10.5,10.25,13,15],\n [125,32,20,16,10,10,10,10,12,14],\n ];\n\n\n// ASCENDING SORTED Public Beta 0.1.7 (G) • MAY 28 2022 ////\n\n// DELTA - MAIN FONT LOOKUP May 28 2022 EXPANDED\n// EXPANDED Sorted by Lc Value •• DELTA\n// The pre-calculated deltas of the above array\n\nconst fontDeltaAscend = [\n ['∆Lc',100,200,300,400,500,600,700,800,900],\n [0,0,0,0,0,0,0,0,0,0],\n [10,0,0,0,0,0,0,0,0,0],\n [15,0,0,0,0,0,0,0,0,0],\n [20,0,0,0,0,0,0,0,0,0],\n [25,0,0,0,12,12,12,24,24,24],\n [30,0,0,12,12,36,36,24,24,24],\n [35,0,12,12,36,24,18,16,16,16],\n [40,12,12,24,18,16,14,8,8,8],\n [45,12,24,12,10,4,4,3,3,3],\n [50,16,12,12,4,4,3,3,3,3],\n [55,8,12,6,4,3,3,2,2,0],\n [60,4,2,10,2.25,2,1,1,0,0],\n [65,4,2,4,2.25,1,1,0.5,0,0],\n [70,4,2,4,1.5,2,1,0.5,0,0],\n [75,4,3.75,1,0.75,0.188,0.188,0,0,0],\n [80,4,3.75,1,0.75,0.188,0.188,0,0,0],\n [85,4,2.5,1,0.5,0.125,0.125,0,0,0],\n [90,3,4,1.5,0.5,0.5,0.5,0.5,0,0],\n [95,3,1.5,1,0.5,0.5,0.5,0.5,0,0],\n [100,3,1.5,0.5,0.5,0.5,0.5,1,0,0],\n [105,3,1,0,0.5,1,1,1,0,0],\n [110,1.5,1.5,0.75,1.5,1.125,0.75,0.375,1.5,1.5],\n [115,1.5,1.5,0.75,1.5,1.125,0.75,0.375,1.5,1.5],\n [120,1,1,0.5,1,0.75,0.5,0.25,1,1],\n [125,0,0,0,0,0,0,0,0,0],\n ];\n\n // APCA CONTRAST FONT LOOKUP TABLES\n // Copyright © 2022 by Myndex Research and Andrew Somers. All Rights Reserved\n // Public Beta 0.1.7 (G) • MAY 28 2022\n // For the following arrays, the Y axis is contrastArrayLen\n // The two x axis are weightArrayLen and scoreArrayLen\n\n // MAY 28 2022\n\n const weightArray = [0,100,200,300,400,500,600,700,800,900];\n const weightArrayLen = weightArray.length; // X axis\n\n let returnArray = [contrast.toFixed(places),0,0,0,0,0,0,0,0,0,];\n const returnArrayLen = returnArray.length; // X axis\n\n\n const contrastArrayAscend = ['lc',0,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100,105,110,115,120,125,];\n const contrastArrayLenAsc = contrastArrayAscend.length; // Y azis\n\n//// Lc 45 * 0.2 = 9, and 9 is the index for the row for Lc 45\n\n let tempFont = 777;\n contrast = Math.abs(contrast); // Polarity unneeded for LUT\n const factor = 0.2; // 1/5 as LUT is in increments of 5\n const index = (contrast == 0) ?\n 1 : (contrast * factor) | 0 ; // LUT row... n|0 is bw floor\n let w = 0; \n // scoreAdj interpolates the needed font side per the Lc\n let scoreAdj = (contrast - fontMatrixAscend[index][w]) * factor;\n\n w++; // determines column in font matrix LUT\n\n\n///////// Font and Score Interpolation \\/////////////////////////////////\n\n// populate returnArray with interpolated values\n\n for (; w < weightArrayLen; w++) {\n\n tempFont = fontMatrixAscend[index][w]; \n\n if (tempFont > 400) { // declares a specific minimum for the weight.\n returnArray[w] = tempFont;\n } else if (contrast < 14.5 ) {\n returnArray[w] = 999; // 999 = do not use for anything\n } else if (contrast < 29.5 ) {\n returnArray[w] = 777; // 777 = non-text only\n } else {\n // INTERPOLATION OF FONT SIZE\n // sets level for 0.5px size increments of smaller fonts\n // Note bitwise (n|0) instead of floor\n (tempFont > 24) ?\n returnArray[w] =\n Math.round(tempFont - (fontDeltaAscend[index][w] * scoreAdj)) :\n returnArray[w] =\n tempFont - ((2.0 * fontDeltaAscend[index][w] * scoreAdj) | 0) * 0.5;\n // (n|0) is bitwise floor\n }\n }\n///////// End Interpolation ////////////////////////////////////////////\n\n return returnArray\n} // end fontLookupAPCA\n\n/////////\\ ///////////////////////////\\\n//////////\\ END fontLookupAPCA() 0.1.7 (G) /////////////////////////////\\\n/////////////////////////////////////////////////////////////////////////////\\\n\n\n\n\n//////////////////////////////////////////////////////////////////////////////\n////////// LUMINANCE CONVERTERS |//////////////////////////////////////////\n\n\n////////// ƒ sRGBtoY() //////////////////////////////////////////////////\nexport function sRGBtoY (rgb = [0,0,0]) { // send sRGB 8bpc (0xFFFFFF) or string\n\n// NOTE: Currently expects 0-255\n\n///// APCA 0.0.98G - 4g - W3 Compatible Constants ////////////////////\n/*\nconst mainTRC = 2.4; // 2.4 exponent emulates actual monitor perception\n \nconst sRco = 0.2126729, \n sGco = 0.7151522, \n sBco = 0.0721750; // sRGB coefficients\n */\n// Future:\n// 0.2126478133913640\t0.7151791475336150\t0.0721730390750208\n// Derived from:\n// xW\tyW\tK\txR\tyR\txG\tyG\txB\tyB\n// 0.312720\t0.329030\t6504\t0.640\t0.330\t0.300\t0.600\t0.150\t0.060\n\n // linearize r, g, or b then apply coefficients\n // and sum then return the resulting luminance\n\n function simpleExp (chan) { return Math.pow(chan/255.0, SA98G.mainTRC); };\n\n return SA98G.sRco * simpleExp(rgb[0]) +\n SA98G.sGco * simpleExp(rgb[1]) +\n SA98G.sBco * simpleExp(rgb[2]);\n \n} // End sRGBtoY()\n\n\n\n\n////////// ƒ displayP3toY() /////////////////////////////////////////////\nexport function displayP3toY (rgb = [0,0,0]) { // send rgba array\n\n// NOTE: Currently Apple has the tuple as 0.0 to 1.0, NOT 255\n\n///// APCA 0.0.98G - 4g - W3 Compatible Constants ////////////////////\n\nconst mainTRC = 2.4; // 2.4 exponent emulates actual monitor perception\n // Pending evaluation, because, Apple...\n \nconst sRco = 0.2289829594805780, \n sGco = 0.6917492625852380, \n sBco = 0.0792677779341829; // displayP3 coefficients\n\n// Derived from:\n// xW\tyW\tK\txR\tyR\txG\tyG\txB\tyB\n// 0.312720\t0.329030\t6504\t0.680\t0.320\t0.265\t0.690\t0.150\t0.060\n\n // linearize r, g, or b then apply coefficients\n // and sum then return the resulting luminance\n\n function simpleExp (chan) { return Math.pow(chan, mainTRC); };\n\n return sRco * simpleExp(rgb[0]) +\n sGco * simpleExp(rgb[1]) +\n sBco * simpleExp(rgb[2]);\n\n} // End displayP3toY()\n\n\n\n\n////////// ƒ adobeRGBtoY() /////////////////////////////////////////////\nexport function adobeRGBtoY (rgb = [0,0,0]) { // send rgba array\n\n// NOTE: Currently expects 0-255\n\n///// APCA 0.0.98G - 4g - W3 Compatible Constants ////////////////////\n\nconst mainTRC = 2.35; // 2.35 exponent emulates actual monitor perception\n // Pending evaluation...\n \nconst sRco = 0.2973550227113810, \n sGco = 0.6273727497145280, \n sBco = 0.0752722275740913; // adobeRGB coefficients\n\n// Derived from:\n// xW\tyW\tK\txR\tyR\txG\tyG\txB\tyB\n// 0.312720\t0.329030\t6504\t0.640\t0.330\t0.210\t0.710\t0.150\t0.060\n\n // linearize r, g, or b then apply coefficients\n // and sum then return the resulting luminance\n\n function simpleExp (chan) { return Math.pow(chan/255.0, mainTRC); };\n\n return sRco * simpleExp(rgb[0]) +\n sGco * simpleExp(rgb[1]) +\n sBco * simpleExp(rgb[2]);\n\n} // End displayP3toY()\n\n\n\n\n////////////////////////////////////////////////////////////////////////////\n////////// UTILITIES \\///////////////////////////////////////////////////\n\n\n////////// ƒ alphaBlend() /////////////////////////////////////////////\n\n // send rgba array for text/icon, rgb for background.\n // Only foreground allows alpha of 0.0 to 1.0 \n // This blends using gamma encoded space (standard)\n // rounded 0-255 or set round=false for number 0.0-255.0\nexport function alphaBlend (rgbaFG=[0,0,0,1.0], rgbBG=[0,0,0], round = true ) {\n\t\n\trgbaFG[3] = Math.max(Math.min(rgbaFG[3], 1.0), 0.0); // clamp alpha 0-1\n\tlet compBlend = 1.0 - rgbaFG[3];\n\tlet rgbOut = [0,0,0,1,true]; // or just use rgbBG to retain other elements?\n\t\n\tfor (let i=0;i<3;i++) {\n\t\trgbOut[i] = rgbBG[i] * compBlend + rgbaFG[i] * rgbaFG[3];\n\t\tif (round) rgbOut[i] = Math.min(Math.round(rgbOut[i]),255);\n\t};\n return rgbOut;\n} // End alphaBlend()\n\n\n\n\n//\\ ////////////////////////////////////////\n///\\ ////////////////////////////////////////\n////\\ ////////////////////////////////////////\n/////\\ END APCA 0.1.9 G-4g BLOCK ////////////////////////////////////////\n////////////////////////////////////////////////////////////////////////////\n///////////////////////////////////////////////////////////////////////////\n"],"mappings":"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","names":[]}
|
package/dist/src/colors/index.js
CHANGED
|
@@ -1,6 +1,87 @@
|
|
|
1
1
|
// src/colors/colorUtils.ts
|
|
2
2
|
import { Hsluv } from "hsluv";
|
|
3
3
|
import chroma from "chroma-js";
|
|
4
|
+
|
|
5
|
+
// ../../node_modules/apca-w3/src/apca-w3.js
|
|
6
|
+
var SA98G = {
|
|
7
|
+
mainTRC: 2.4,
|
|
8
|
+
// 2.4 exponent for emulating actual monitor perception
|
|
9
|
+
// For reverseAPCA
|
|
10
|
+
get mainTRCencode() {
|
|
11
|
+
return 1 / this.mainTRC;
|
|
12
|
+
},
|
|
13
|
+
// sRGB coefficients
|
|
14
|
+
sRco: 0.2126729,
|
|
15
|
+
sGco: 0.7151522,
|
|
16
|
+
sBco: 0.072175,
|
|
17
|
+
// G-4g constants for use with 2.4 exponent
|
|
18
|
+
normBG: 0.56,
|
|
19
|
+
normTXT: 0.57,
|
|
20
|
+
revTXT: 0.62,
|
|
21
|
+
revBG: 0.65,
|
|
22
|
+
// G-4g Clamps and Scalers
|
|
23
|
+
blkThrs: 0.022,
|
|
24
|
+
blkClmp: 1.414,
|
|
25
|
+
scaleBoW: 1.14,
|
|
26
|
+
scaleWoB: 1.14,
|
|
27
|
+
loBoWoffset: 0.027,
|
|
28
|
+
loWoBoffset: 0.027,
|
|
29
|
+
deltaYmin: 5e-4,
|
|
30
|
+
loClip: 0.1,
|
|
31
|
+
///// MAGIC NUMBERS for UNCLAMP, for use with 0.022 & 1.414 /////
|
|
32
|
+
// Magic Numbers for reverseAPCA
|
|
33
|
+
mFactor: 1.9468554433171,
|
|
34
|
+
get mFactInv() {
|
|
35
|
+
return 1 / this.mFactor;
|
|
36
|
+
},
|
|
37
|
+
mOffsetIn: 0.0387393816571401,
|
|
38
|
+
mExpAdj: 0.283343396420869,
|
|
39
|
+
get mExp() {
|
|
40
|
+
return this.mExpAdj / this.blkClmp;
|
|
41
|
+
},
|
|
42
|
+
mOffsetOut: 0.312865795870758
|
|
43
|
+
};
|
|
44
|
+
function APCAcontrast(txtY, bgY, places = -1) {
|
|
45
|
+
const icp = [0, 1.1];
|
|
46
|
+
if (isNaN(txtY) || isNaN(bgY) || Math.min(txtY, bgY) < icp[0] || Math.max(txtY, bgY) > icp[1]) {
|
|
47
|
+
return 0;
|
|
48
|
+
}
|
|
49
|
+
;
|
|
50
|
+
let SAPC = 0;
|
|
51
|
+
let outputContrast = 0;
|
|
52
|
+
let polCat = "BoW";
|
|
53
|
+
txtY = txtY > SA98G.blkThrs ? txtY : txtY + Math.pow(SA98G.blkThrs - txtY, SA98G.blkClmp);
|
|
54
|
+
bgY = bgY > SA98G.blkThrs ? bgY : bgY + Math.pow(SA98G.blkThrs - bgY, SA98G.blkClmp);
|
|
55
|
+
if (Math.abs(bgY - txtY) < SA98G.deltaYmin) {
|
|
56
|
+
return 0;
|
|
57
|
+
}
|
|
58
|
+
if (bgY > txtY) {
|
|
59
|
+
SAPC = (Math.pow(bgY, SA98G.normBG) - Math.pow(txtY, SA98G.normTXT)) * SA98G.scaleBoW;
|
|
60
|
+
outputContrast = SAPC < SA98G.loClip ? 0 : SAPC - SA98G.loBoWoffset;
|
|
61
|
+
} else {
|
|
62
|
+
polCat = "WoB";
|
|
63
|
+
SAPC = (Math.pow(bgY, SA98G.revBG) - Math.pow(txtY, SA98G.revTXT)) * SA98G.scaleWoB;
|
|
64
|
+
outputContrast = SAPC > -SA98G.loClip ? 0 : SAPC + SA98G.loWoBoffset;
|
|
65
|
+
}
|
|
66
|
+
if (places < 0) {
|
|
67
|
+
return outputContrast * 100;
|
|
68
|
+
} else if (places == 0) {
|
|
69
|
+
return Math.round(Math.abs(outputContrast) * 100) + "<sub>" + polCat + "</sub>";
|
|
70
|
+
} else if (Number.isInteger(places)) {
|
|
71
|
+
return (outputContrast * 100).toFixed(places);
|
|
72
|
+
} else {
|
|
73
|
+
return 0;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
function sRGBtoY(rgb = [0, 0, 0]) {
|
|
77
|
+
function simpleExp(chan) {
|
|
78
|
+
return Math.pow(chan / 255, SA98G.mainTRC);
|
|
79
|
+
}
|
|
80
|
+
;
|
|
81
|
+
return SA98G.sRco * simpleExp(rgb[0]) + SA98G.sGco * simpleExp(rgb[1]) + SA98G.sBco * simpleExp(rgb[2]);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
// src/colors/colorUtils.ts
|
|
4
85
|
var hexToCssHsl = (hex, valuesOnly = false) => {
|
|
5
86
|
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
6
87
|
let r = 0;
|
|
@@ -67,6 +148,12 @@ var hexToHSL = (H) => {
|
|
|
67
148
|
l = +(l * 100).toFixed(1);
|
|
68
149
|
return [h, s, l];
|
|
69
150
|
};
|
|
151
|
+
var hexToHsluv = (hex) => {
|
|
152
|
+
const conv = new Hsluv();
|
|
153
|
+
conv.hex = hex;
|
|
154
|
+
conv.hexToHsluv();
|
|
155
|
+
return [conv.hsluv_h, conv.hsluv_s, conv.hsluv_l];
|
|
156
|
+
};
|
|
70
157
|
var hslArrToCss = (HSL) => {
|
|
71
158
|
return "hsl(" + HSL[0] + "," + HSL[1] + "%," + HSL[2] + "%)";
|
|
72
159
|
};
|
|
@@ -176,10 +263,12 @@ var getContrastFromLightness = (lightness, mainColor, backgroundColor) => {
|
|
|
176
263
|
const ratio = getRatioFromLum(lum1 ?? 0, lum2 ?? 0);
|
|
177
264
|
return ratio;
|
|
178
265
|
};
|
|
179
|
-
var areColorsContrasting = (color1, color2, type = "
|
|
266
|
+
var areColorsContrasting = (color1, color2, type = "aa") => {
|
|
180
267
|
const contrast = getContrastFromHex(color1, color2);
|
|
181
268
|
if (contrast !== null) {
|
|
182
|
-
if (type === "
|
|
269
|
+
if (type === "aaa") {
|
|
270
|
+
return contrast >= 7;
|
|
271
|
+
} else if (type === "aa") {
|
|
183
272
|
return contrast >= 4.5;
|
|
184
273
|
} else {
|
|
185
274
|
return contrast >= 3;
|
|
@@ -187,6 +276,17 @@ var areColorsContrasting = (color1, color2, type = "text") => {
|
|
|
187
276
|
}
|
|
188
277
|
return false;
|
|
189
278
|
};
|
|
279
|
+
var getApcaContrastLc = (textColor, backgroundColor) => {
|
|
280
|
+
const textColorRgb = hexToRgb(textColor);
|
|
281
|
+
const backgroundColorRgb = hexToRgb(backgroundColor);
|
|
282
|
+
if (textColorRgb && backgroundColorRgb) {
|
|
283
|
+
return APCAcontrast(
|
|
284
|
+
sRGBtoY([textColorRgb.r, textColorRgb.g, textColorRgb.b]),
|
|
285
|
+
sRGBtoY([backgroundColorRgb.r, backgroundColorRgb.g, backgroundColorRgb.b])
|
|
286
|
+
);
|
|
287
|
+
}
|
|
288
|
+
return 0;
|
|
289
|
+
};
|
|
190
290
|
var isHexColor = (hex) => {
|
|
191
291
|
return typeof hex === "string" && hex.length === 6 && !isNaN(Number("0x" + hex));
|
|
192
292
|
};
|
|
@@ -224,9 +324,9 @@ var generateThemeColor = (color, mode, contrastMode = "aa") => {
|
|
|
224
324
|
leoBackgroundColor.colorKeys[0]
|
|
225
325
|
);
|
|
226
326
|
const textSubLightLightness = contrastMode === "aa" ? 42 : 30;
|
|
227
|
-
const textDefLightLightness = contrastMode === "aa" ?
|
|
228
|
-
const textSubDarkLightness = contrastMode === "aa" ?
|
|
229
|
-
const textDefDarkLightness = contrastMode === "aa" ?
|
|
327
|
+
const textDefLightLightness = contrastMode === "aa" ? 18 : 12;
|
|
328
|
+
const textSubDarkLightness = contrastMode === "aa" ? 67 : 80;
|
|
329
|
+
const textDefDarkLightness = contrastMode === "aa" ? 90 : 94;
|
|
230
330
|
let lightnessScale = [];
|
|
231
331
|
if (mode === "light") {
|
|
232
332
|
lightnessScale = [100, 96, 90, 84, 78, 76, 54, 33, textSubLightLightness, textDefLightLightness];
|
|
@@ -373,8 +473,8 @@ var createColorWithLightness = (color, lightness) => {
|
|
|
373
473
|
};
|
|
374
474
|
var getColorNumberFromName = (name) => {
|
|
375
475
|
const colorMap = {
|
|
376
|
-
"Background
|
|
377
|
-
"Background
|
|
476
|
+
"Background Default": 1,
|
|
477
|
+
"Background Subtle": 2,
|
|
378
478
|
"Surface Default": 3,
|
|
379
479
|
"Surface Hover": 4,
|
|
380
480
|
"Surface Active": 5,
|
|
@@ -385,14 +485,16 @@ var getColorNumberFromName = (name) => {
|
|
|
385
485
|
"Base Hover": 10,
|
|
386
486
|
"Base Active": 11,
|
|
387
487
|
"Text Subtle": 12,
|
|
388
|
-
"Text Default": 13
|
|
488
|
+
"Text Default": 13,
|
|
489
|
+
"Contrast Default": 14,
|
|
490
|
+
"Contrast Subtle": 15
|
|
389
491
|
};
|
|
390
492
|
return colorMap[name];
|
|
391
493
|
};
|
|
392
494
|
var getColorNameFromNumber = (number) => {
|
|
393
495
|
const colorMap = {
|
|
394
|
-
1: "Background
|
|
395
|
-
2: "Background
|
|
496
|
+
1: "Background Default",
|
|
497
|
+
2: "Background Subtle",
|
|
396
498
|
3: "Surface Default",
|
|
397
499
|
4: "Surface Hover",
|
|
398
500
|
5: "Surface Active",
|
|
@@ -430,6 +532,7 @@ export {
|
|
|
430
532
|
generateGlobalColors,
|
|
431
533
|
generateScaleForColor,
|
|
432
534
|
generateThemeForColor,
|
|
535
|
+
getApcaContrastLc,
|
|
433
536
|
getBaseColor,
|
|
434
537
|
getColorNameFromNumber,
|
|
435
538
|
getColorNumberFromName,
|
|
@@ -442,10 +545,63 @@ export {
|
|
|
442
545
|
getRatioFromLum,
|
|
443
546
|
hexToCssHsl,
|
|
444
547
|
hexToHSL,
|
|
548
|
+
hexToHsluv,
|
|
445
549
|
hexToRgb,
|
|
446
550
|
hslArrToCss,
|
|
447
551
|
isHexColor,
|
|
448
552
|
luminanceFromHex,
|
|
449
553
|
luminanceFromRgb
|
|
450
554
|
};
|
|
555
|
+
/*! Bundled license information:
|
|
556
|
+
|
|
557
|
+
colorparsley/src/colorparsley.js:
|
|
558
|
+
(** @preserve
|
|
559
|
+
///// CoLoR PaRsLeY a simple set of color parsing thingies!
|
|
560
|
+
///// Beta 0.1.8 Revision date: June 04, 2022
|
|
561
|
+
/////
|
|
562
|
+
///// Functions to parse color values and return array
|
|
563
|
+
///// Copyright (c) 2019-2022 by Andrew Somers. All Rights Reserved.
|
|
564
|
+
///// LICENSE: AGPL 3
|
|
565
|
+
///// CONTACT: Please use the ISSUES or DISCUSSIONS tab at:
|
|
566
|
+
///// https://github.com/Myndex/colorparsley/
|
|
567
|
+
/////
|
|
568
|
+
///////////////////////////////////////////////////////////////////////////////
|
|
569
|
+
/////
|
|
570
|
+
///// IMPORT:
|
|
571
|
+
///// import { colorParsley } from 'colorparsley';
|
|
572
|
+
/////
|
|
573
|
+
///// let rgbaArray = colorParsley('#abcdef');
|
|
574
|
+
/////
|
|
575
|
+
///// Output as array: [r,g,b,a,isValid,colorspace]
|
|
576
|
+
///// Example: [123,123,123,1.0,true,'sRGB']
|
|
577
|
+
// *)
|
|
578
|
+
|
|
579
|
+
apca-w3/src/apca-w3.js:
|
|
580
|
+
(** @preserve
|
|
581
|
+
///// SAPC APCA - Advanced Perceptual Contrast Algorithm
|
|
582
|
+
///// Beta 0.1.9 W3 • contrast function only
|
|
583
|
+
///// DIST: W3 • Revision date: July 3, 2022
|
|
584
|
+
///// Function to parse color values and determine Lc contrast
|
|
585
|
+
///// Copyright © 2019-2022 by Andrew Somers. All Rights Reserved.
|
|
586
|
+
///// LICENSE: W3 LICENSE
|
|
587
|
+
///// CONTACT: Please use the ISSUES or DISCUSSIONS tab at:
|
|
588
|
+
///// https://github.com/Myndex/SAPC-APCA/
|
|
589
|
+
/////
|
|
590
|
+
///////////////////////////////////////////////////////////////////////////////
|
|
591
|
+
/////
|
|
592
|
+
///// MINIMAL IMPORTS:
|
|
593
|
+
///// import { APCAcontrast, sRGBtoY, displayP3toY,
|
|
594
|
+
///// calcAPCA, fontLookupAPCA } from 'apca-w3';
|
|
595
|
+
///// import { colorParsley } from 'colorparsley';
|
|
596
|
+
/////
|
|
597
|
+
///// FORWARD CONTRAST USAGE:
|
|
598
|
+
///// Lc = APCAcontrast( sRGBtoY( TEXTcolor ) , sRGBtoY( BACKGNDcolor ) );
|
|
599
|
+
///// Where the colors are sent as an rgba array [255,255,255,1]
|
|
600
|
+
/////
|
|
601
|
+
///// Retrieving an array of font sizes for the contrast:
|
|
602
|
+
///// fontArray = fontLookupAPCA(Lc);
|
|
603
|
+
/////
|
|
604
|
+
///// Live Demonstrator at https://www.myndex.com/APCA/
|
|
605
|
+
// *)
|
|
606
|
+
*/
|
|
451
607
|
//# sourceMappingURL=index.js.map
|