@oscarpalmer/atoms 0.113.0 → 0.114.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/dist/atoms.full.js +95 -60
- package/dist/color/constants.js +13 -11
- package/dist/color/index.js +5 -5
- package/dist/color/instance.js +13 -0
- package/dist/color/misc/alpha.js +1 -1
- package/dist/color/misc/{foreground.js → get.js} +28 -1
- package/dist/color/misc/index.js +12 -0
- package/dist/color/misc/is.js +2 -2
- package/dist/color/space/hex.js +1 -5
- package/dist/color/space/hsl.js +1 -12
- package/dist/color/space/rgb.js +1 -12
- package/dist/index.js +5 -5
- package/package.json +1 -1
- package/src/color/constants.ts +17 -9
- package/src/color/index.ts +11 -7
- package/src/color/instance.ts +24 -0
- package/src/color/misc/alpha.ts +1 -1
- package/src/color/misc/get.ts +115 -0
- package/src/color/misc/index.ts +25 -0
- package/src/color/misc/is.ts +3 -3
- package/src/color/models.ts +2 -0
- package/src/color/space/hex.ts +0 -10
- package/src/color/space/hsl.ts +0 -24
- package/src/color/space/rgb.ts +0 -24
- package/types/color/constants.d.ts +7 -5
- package/types/color/index.d.ts +5 -5
- package/types/color/instance.d.ts +10 -0
- package/types/color/misc/alpha.d.ts +1 -0
- package/types/color/misc/get.d.ts +44 -0
- package/types/color/misc/index.d.ts +3 -0
- package/types/color/models.d.ts +1 -0
- package/types/color/space/hex.d.ts +0 -6
- package/types/color/space/hsl.d.ts +0 -12
- package/types/color/space/rgb.d.ts +0 -12
- package/src/color/misc/foreground.ts +0 -48
- package/types/color/misc/foreground.d.ts +0 -7
package/dist/atoms.full.js
CHANGED
|
@@ -810,17 +810,14 @@ const HEX_BLACK = '000000';
|
|
|
810
810
|
const HEX_WHITE = 'ffffff';
|
|
811
811
|
const LENGTH_LONG = 6;
|
|
812
812
|
const LENGTH_SHORT = 3;
|
|
813
|
-
const KEYS_HSL =
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
]);
|
|
818
|
-
const KEYS_HSLA = new Set([...KEYS_HSL, 'alpha']);
|
|
819
|
-
const KEYS_RGB = new Set(['blue', 'green', 'red']);
|
|
820
|
-
const KEYS_RGBA = new Set([...KEYS_RGB, 'alpha']);
|
|
813
|
+
const KEYS_HSL = ['hue', 'saturation', 'lightness'];
|
|
814
|
+
const KEYS_HSLA = [...KEYS_HSL, 'alpha'];
|
|
815
|
+
const KEYS_RGB = ['red', 'green', 'blue'];
|
|
816
|
+
const KEYS_RGBA = [...KEYS_RGB, 'alpha'];
|
|
821
817
|
const MAX_DEGREE = 360;
|
|
822
818
|
const MAX_HEX = 255;
|
|
823
819
|
const MAX_PERCENT = 100;
|
|
820
|
+
//
|
|
824
821
|
// https://www.w3.org/TR/WCAG20/#relativeluminancedef
|
|
825
822
|
const SRGB_LUMINANCE_BLUE = 0.0722;
|
|
826
823
|
const SRGB_LUMINANCE_EXPONENT = 2.4;
|
|
@@ -832,6 +829,17 @@ const SRGB_LUMINANCE_OFFSET = 0.055;
|
|
|
832
829
|
const SRGB_LUMINANCE_RED = 0.2126;
|
|
833
830
|
const SRGB_LUMINANCE_THRESHOLD = 0.625;
|
|
834
831
|
|
|
832
|
+
function formatColor(space, color, alpha) {
|
|
833
|
+
const suffix = alpha ? ` / ${color.alpha}` : '';
|
|
834
|
+
const value = color[space];
|
|
835
|
+
return `${space}(${join(formattingKeys[space].map(key => value[key]), ' ')}${suffix})`;
|
|
836
|
+
}
|
|
837
|
+
//
|
|
838
|
+
const formattingKeys = {
|
|
839
|
+
hsl: KEYS_HSL,
|
|
840
|
+
rgb: KEYS_RGB,
|
|
841
|
+
};
|
|
842
|
+
|
|
835
843
|
function getAlpha(value) {
|
|
836
844
|
if (typeof value === 'number') {
|
|
837
845
|
return getAlphaFromValue(value);
|
|
@@ -1029,12 +1037,12 @@ function isObject(obj, properties) {
|
|
|
1029
1037
|
}
|
|
1030
1038
|
const keys = Object.keys(obj);
|
|
1031
1039
|
const { length } = keys;
|
|
1032
|
-
if (length !== properties.
|
|
1040
|
+
if (length !== properties.length) {
|
|
1033
1041
|
return false;
|
|
1034
1042
|
}
|
|
1035
1043
|
for (let index = 0; index < length; index += 1) {
|
|
1036
1044
|
const key = keys[index];
|
|
1037
|
-
if (!(properties.
|
|
1045
|
+
if (!(properties.includes(key) &&
|
|
1038
1046
|
validators[key](obj[key]))) {
|
|
1039
1047
|
return false;
|
|
1040
1048
|
}
|
|
@@ -1109,26 +1117,6 @@ function convertRgbToHsla(rgb) {
|
|
|
1109
1117
|
saturation: +(saturation * MAX_PERCENT).toFixed(2),
|
|
1110
1118
|
};
|
|
1111
1119
|
}
|
|
1112
|
-
/**
|
|
1113
|
-
* Get the RGBA color from any kind of value
|
|
1114
|
-
* @param value Original value
|
|
1115
|
-
* @returns RGBA color
|
|
1116
|
-
*/
|
|
1117
|
-
function getRgbaColor(value) {
|
|
1118
|
-
const { alpha, rgb } = getState(value);
|
|
1119
|
-
return {
|
|
1120
|
-
...rgb,
|
|
1121
|
-
alpha: alpha.value,
|
|
1122
|
-
};
|
|
1123
|
-
}
|
|
1124
|
-
/**
|
|
1125
|
-
* Get the RGB color from any kind of value
|
|
1126
|
-
* @param value Original value
|
|
1127
|
-
* @returns RGB color
|
|
1128
|
-
*/
|
|
1129
|
-
function getRgbColor(value) {
|
|
1130
|
-
return getState(value).rgb;
|
|
1131
|
-
}
|
|
1132
1120
|
/**
|
|
1133
1121
|
* Convert an RGB(A) color to a hex color _(with optional alpha channel)_
|
|
1134
1122
|
* @param rgb RGB(A) color
|
|
@@ -1179,14 +1167,6 @@ function convertHexToRgba(value) {
|
|
|
1179
1167
|
red: values[0],
|
|
1180
1168
|
};
|
|
1181
1169
|
}
|
|
1182
|
-
/**
|
|
1183
|
-
* Get the hex color from any kind of value
|
|
1184
|
-
* @param value Original value
|
|
1185
|
-
* @returns Hex color
|
|
1186
|
-
*/
|
|
1187
|
-
function getHexColor(value) {
|
|
1188
|
-
return getState(value).hex;
|
|
1189
|
-
}
|
|
1190
1170
|
/**
|
|
1191
1171
|
* Get the normalized hex color from a value
|
|
1192
1172
|
* @param value Value to normalize
|
|
@@ -1261,26 +1241,6 @@ function getHexyValue(hue, lightness, saturation, value) {
|
|
|
1261
1241
|
const mod = saturation * Math.min(lightness, 1 - lightness);
|
|
1262
1242
|
return ((lightness - mod * Math.max(-1, Math.min(part - 3, 9 - part, 1))) * MAX_HEX);
|
|
1263
1243
|
}
|
|
1264
|
-
/**
|
|
1265
|
-
* Get the HSLA color from any kind of value
|
|
1266
|
-
* @param value Original value
|
|
1267
|
-
* @returns HSLA color
|
|
1268
|
-
*/
|
|
1269
|
-
function getHslaColor(value) {
|
|
1270
|
-
const { alpha, hsl } = getState(value);
|
|
1271
|
-
return {
|
|
1272
|
-
...hsl,
|
|
1273
|
-
alpha: alpha.value,
|
|
1274
|
-
};
|
|
1275
|
-
}
|
|
1276
|
-
/**
|
|
1277
|
-
* Get the HSL color from any kind of value
|
|
1278
|
-
* @param value Original value
|
|
1279
|
-
* @returns HSL color
|
|
1280
|
-
*/
|
|
1281
|
-
function getHslColor(value) {
|
|
1282
|
-
return getState(value).hsl;
|
|
1283
|
-
}
|
|
1284
1244
|
function hslToHex(hsl, alpha) {
|
|
1285
1245
|
return convertRgbToHex(convertHslToRgba(hsl), alpha ?? false);
|
|
1286
1246
|
}
|
|
@@ -1400,9 +1360,15 @@ function setRGBColor(state, value, alpha) {
|
|
|
1400
1360
|
|
|
1401
1361
|
class Color {
|
|
1402
1362
|
#state;
|
|
1363
|
+
/**
|
|
1364
|
+
* Get the alpha channel
|
|
1365
|
+
*/
|
|
1403
1366
|
get alpha() {
|
|
1404
1367
|
return this.#state.alpha.value;
|
|
1405
1368
|
}
|
|
1369
|
+
/**
|
|
1370
|
+
* Set the alpha channel
|
|
1371
|
+
*/
|
|
1406
1372
|
set alpha(value) {
|
|
1407
1373
|
if (typeof value === 'number' && !Number.isNaN(value)) {
|
|
1408
1374
|
this.#state.alpha = getAlpha(value);
|
|
@@ -1492,6 +1458,18 @@ class Color {
|
|
|
1492
1458
|
value: true,
|
|
1493
1459
|
});
|
|
1494
1460
|
}
|
|
1461
|
+
toHexString(alpha) {
|
|
1462
|
+
return `#${alpha === true ? this.hexa : this.hex}`;
|
|
1463
|
+
}
|
|
1464
|
+
toHslString(alpha) {
|
|
1465
|
+
return formatColor('hsl', this, alpha === true);
|
|
1466
|
+
}
|
|
1467
|
+
toRgbString(alpha) {
|
|
1468
|
+
return formatColor('rgb', this, alpha === true);
|
|
1469
|
+
}
|
|
1470
|
+
toString() {
|
|
1471
|
+
return this.toHexString();
|
|
1472
|
+
}
|
|
1495
1473
|
}
|
|
1496
1474
|
|
|
1497
1475
|
/**
|
|
@@ -1519,9 +1497,66 @@ function getForegroundColor(value) {
|
|
|
1519
1497
|
// Rudimentary and ureliable?; implement APCA for more reliable results?
|
|
1520
1498
|
return new Color(luminance > SRGB_LUMINANCE_THRESHOLD ? HEX_BLACK : HEX_WHITE);
|
|
1521
1499
|
}
|
|
1500
|
+
/**
|
|
1501
|
+
* Get the hex color _(with alpha channel)_ from any kind of value
|
|
1502
|
+
* @param value Original value
|
|
1503
|
+
* @returns Hex color
|
|
1504
|
+
*/
|
|
1505
|
+
function getHexaColor(value) {
|
|
1506
|
+
const { alpha, hex } = getState(value);
|
|
1507
|
+
return `${hex}${alpha.hex}`;
|
|
1508
|
+
}
|
|
1509
|
+
/**
|
|
1510
|
+
* Get the hex color from any kind of value
|
|
1511
|
+
* @param value Original value
|
|
1512
|
+
* @returns Hex color
|
|
1513
|
+
*/
|
|
1514
|
+
function getHexColor(value) {
|
|
1515
|
+
return getState(value).hex;
|
|
1516
|
+
}
|
|
1517
|
+
/**
|
|
1518
|
+
* Get the HSLA color from any kind of value
|
|
1519
|
+
* @param value Original value
|
|
1520
|
+
* @returns HSLA color
|
|
1521
|
+
*/
|
|
1522
|
+
function getHslaColor(value) {
|
|
1523
|
+
const { alpha, hsl } = getState(value);
|
|
1524
|
+
return {
|
|
1525
|
+
...hsl,
|
|
1526
|
+
alpha: alpha.value,
|
|
1527
|
+
};
|
|
1528
|
+
}
|
|
1529
|
+
/**
|
|
1530
|
+
* Get the HSL color from any kind of value
|
|
1531
|
+
* @param value Original value
|
|
1532
|
+
* @returns HSL color
|
|
1533
|
+
*/
|
|
1534
|
+
function getHslColor(value) {
|
|
1535
|
+
return getState(value).hsl;
|
|
1536
|
+
}
|
|
1537
|
+
/**
|
|
1538
|
+
* Get the RGBA color from any kind of value
|
|
1539
|
+
* @param value Original value
|
|
1540
|
+
* @returns RGBA color
|
|
1541
|
+
*/
|
|
1542
|
+
function getRgbaColor(value) {
|
|
1543
|
+
const { alpha, rgb } = getState(value);
|
|
1544
|
+
return {
|
|
1545
|
+
...rgb,
|
|
1546
|
+
alpha: alpha.value,
|
|
1547
|
+
};
|
|
1548
|
+
}
|
|
1549
|
+
/**
|
|
1550
|
+
* Get the RGB color from any kind of value
|
|
1551
|
+
* @param value Original value
|
|
1552
|
+
* @returns RGB color
|
|
1553
|
+
*/
|
|
1554
|
+
function getRgbColor(value) {
|
|
1555
|
+
return getState(value).rgb;
|
|
1556
|
+
}
|
|
1522
1557
|
|
|
1523
1558
|
/**
|
|
1524
|
-
* Get a
|
|
1559
|
+
* Get a Color from any kind of value
|
|
1525
1560
|
* @param value Original value
|
|
1526
1561
|
* @returns Color instance
|
|
1527
1562
|
*/
|
|
@@ -3259,4 +3294,4 @@ function unsmush(value) {
|
|
|
3259
3294
|
return unsmushed;
|
|
3260
3295
|
}
|
|
3261
3296
|
|
|
3262
|
-
export { SizedMap, SizedSet, average, between, camelCase, capitalize, chunk, clamp, clone, compact, compare, count, createUuid, debounce, diff, emitter, equal, exists, filter, find, flatten$1 as flatten, fromQuery, getArray, getColor, getForegroundColor, getHexColor, getHslColor, getHslaColor, getNormalizedHex, getNumber, getRandomBoolean, getRandomCharacters, getRandomColor, getRandomFloat, getRandomHex, getRandomInteger, getRandomItem, getRandomItems, getRgbColor, getRgbaColor, getString, getValue, groupBy, hexToHsl, hexToHsla, hexToRgb, hexToRgba, hslToHex, hslToRgb, hslToRgba, indexOf, insert, isArrayOrPlainObject, isColor, isEmpty, isHexColor, isHslColor, isHslaColor, isKey, isNullable, isNullableOrEmpty, isNullableOrWhitespace, isNumber, isNumerical, isObject$1 as isObject, isPlainObject, isPrimitive, isRgbColor, isRgbaColor, isTypedArray, join, kebabCase, logger, max, memoize, merge, min, noop, parse, partial, pascalCase, push, rgbToHex, rgbToHsl, rgbToHsla, round, setValue, shuffle, smush, snakeCase, sort, splice, sum, template, throttle, titleCase, toMap, toQuery, toRecord, toSet, truncate, unique, unsmush, words };
|
|
3297
|
+
export { SizedMap, SizedSet, average, between, camelCase, capitalize, chunk, clamp, clone, compact, compare, count, createUuid, debounce, diff, emitter, equal, exists, filter, find, flatten$1 as flatten, fromQuery, getArray, getColor, getForegroundColor, getHexColor, getHexaColor, getHslColor, getHslaColor, getNormalizedHex, getNumber, getRandomBoolean, getRandomCharacters, getRandomColor, getRandomFloat, getRandomHex, getRandomInteger, getRandomItem, getRandomItems, getRgbColor, getRgbaColor, getString, getValue, groupBy, hexToHsl, hexToHsla, hexToRgb, hexToRgba, hslToHex, hslToRgb, hslToRgba, indexOf, insert, isArrayOrPlainObject, isColor, isEmpty, isHexColor, isHslColor, isHslaColor, isKey, isNullable, isNullableOrEmpty, isNullableOrWhitespace, isNumber, isNumerical, isObject$1 as isObject, isPlainObject, isPrimitive, isRgbColor, isRgbaColor, isTypedArray, join, kebabCase, logger, max, memoize, merge, min, noop, parse, partial, pascalCase, push, rgbToHex, rgbToHsl, rgbToHsla, round, setValue, shuffle, smush, snakeCase, sort, splice, sum, template, throttle, titleCase, toMap, toQuery, toRecord, toSet, truncate, unique, unsmush, words };
|
package/dist/color/constants.js
CHANGED
|
@@ -24,21 +24,23 @@ const HEX_BLACK = "000000";
|
|
|
24
24
|
const HEX_WHITE = "ffffff";
|
|
25
25
|
const LENGTH_LONG = 6;
|
|
26
26
|
const LENGTH_SHORT = 3;
|
|
27
|
-
const KEYS_HSL =
|
|
27
|
+
const KEYS_HSL = [
|
|
28
28
|
"hue",
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
]
|
|
32
|
-
const KEYS_HSLA =
|
|
33
|
-
const KEYS_RGB =
|
|
34
|
-
"
|
|
29
|
+
"saturation",
|
|
30
|
+
"lightness"
|
|
31
|
+
];
|
|
32
|
+
const KEYS_HSLA = [...KEYS_HSL, "alpha"];
|
|
33
|
+
const KEYS_RGB = [
|
|
34
|
+
"red",
|
|
35
35
|
"green",
|
|
36
|
-
"
|
|
37
|
-
]
|
|
38
|
-
const KEYS_RGBA =
|
|
36
|
+
"blue"
|
|
37
|
+
];
|
|
38
|
+
const KEYS_RGBA = [...KEYS_RGB, "alpha"];
|
|
39
39
|
const MAX_DEGREE = 360;
|
|
40
40
|
const MAX_HEX = 255;
|
|
41
41
|
const MAX_PERCENT = 100;
|
|
42
|
+
const SPACE_HSL = "hsl";
|
|
43
|
+
const SPACE_RGB = "rgb";
|
|
42
44
|
const SRGB_LUMINANCE_BLUE = .0722;
|
|
43
45
|
const SRGB_LUMINANCE_EXPONENT = 2.4;
|
|
44
46
|
const SRGB_LUMINANCE_GREEN = .7152;
|
|
@@ -48,4 +50,4 @@ const SRGB_LUMINANCE_MULTIPLIER = 12.92;
|
|
|
48
50
|
const SRGB_LUMINANCE_OFFSET = .055;
|
|
49
51
|
const SRGB_LUMINANCE_RED = .2126;
|
|
50
52
|
const SRGB_LUMINANCE_THRESHOLD = .625;
|
|
51
|
-
export { ALPHA_FULL_HEX_LONG, ALPHA_FULL_HEX_SHORT, ALPHA_FULL_VALUE, ALPHA_NONE_HEX, ALPHA_NONE_VALUE, DEFAULT_ALPHA, DEFAULT_HSL, DEFAULT_RGB, EXPRESSION_HEX_LONG, EXPRESSION_HEX_SHORT, EXPRESSION_PREFIX, HEX_BLACK, HEX_WHITE, KEYS_HSL, KEYS_HSLA, KEYS_RGB, KEYS_RGBA, LENGTH_LONG, LENGTH_SHORT, MAX_DEGREE, MAX_HEX, MAX_PERCENT, SRGB_LUMINANCE_BLUE, SRGB_LUMINANCE_EXPONENT, SRGB_LUMINANCE_GREEN, SRGB_LUMINANCE_MINIMUM, SRGB_LUMINANCE_MODIFIER, SRGB_LUMINANCE_MULTIPLIER, SRGB_LUMINANCE_OFFSET, SRGB_LUMINANCE_RED, SRGB_LUMINANCE_THRESHOLD };
|
|
53
|
+
export { ALPHA_FULL_HEX_LONG, ALPHA_FULL_HEX_SHORT, ALPHA_FULL_VALUE, ALPHA_NONE_HEX, ALPHA_NONE_VALUE, DEFAULT_ALPHA, DEFAULT_HSL, DEFAULT_RGB, EXPRESSION_HEX_LONG, EXPRESSION_HEX_SHORT, EXPRESSION_PREFIX, HEX_BLACK, HEX_WHITE, KEYS_HSL, KEYS_HSLA, KEYS_RGB, KEYS_RGBA, LENGTH_LONG, LENGTH_SHORT, MAX_DEGREE, MAX_HEX, MAX_PERCENT, SPACE_HSL, SPACE_RGB, SRGB_LUMINANCE_BLUE, SRGB_LUMINANCE_EXPONENT, SRGB_LUMINANCE_GREEN, SRGB_LUMINANCE_MINIMUM, SRGB_LUMINANCE_MODIFIER, SRGB_LUMINANCE_MULTIPLIER, SRGB_LUMINANCE_OFFSET, SRGB_LUMINANCE_RED, SRGB_LUMINANCE_THRESHOLD };
|
package/dist/color/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { isColor, isHexColor, isHslColor, isHslaColor, isRgbColor, isRgbaColor } from "./misc/is.js";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
2
|
+
import { rgbToHex, rgbToHsl, rgbToHsla } from "./space/rgb.js";
|
|
3
|
+
import { getNormalizedHex, hexToHsl, hexToHsla, hexToRgb, hexToRgba } from "./space/hex.js";
|
|
4
|
+
import { hslToHex, hslToRgb, hslToRgba } from "./space/hsl.js";
|
|
5
5
|
import { Color } from "./instance.js";
|
|
6
|
-
import { getForegroundColor } from "./misc/
|
|
6
|
+
import { getForegroundColor, getHexColor, getHexaColor, getHslColor, getHslaColor, getRgbColor, getRgbaColor } from "./misc/get.js";
|
|
7
7
|
function getColor(value) {
|
|
8
8
|
return isColor(value) ? value : new Color(value);
|
|
9
9
|
}
|
|
10
|
-
export { getColor, getForegroundColor, getHexColor, getHslColor, getHslaColor, getNormalizedHex, getRgbColor, getRgbaColor, hexToHsl, hexToHsla, hexToRgb, hexToRgba, hslToHex, hslToRgb, hslToRgba, isColor, isHexColor, isHslColor, isHslaColor, isRgbColor, isRgbaColor, rgbToHex, rgbToHsl, rgbToHsla };
|
|
10
|
+
export { getColor, getForegroundColor, getHexColor, getHexaColor, getHslColor, getHslaColor, getNormalizedHex, getRgbColor, getRgbaColor, hexToHsl, hexToHsla, hexToRgb, hexToRgba, hslToHex, hslToRgb, hslToRgba, isColor, isHexColor, isHslColor, isHslaColor, isRgbColor, isRgbaColor, rgbToHex, rgbToHsl, rgbToHsla };
|
package/dist/color/instance.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { formatColor } from "./misc/index.js";
|
|
1
2
|
import { getAlpha } from "./misc/alpha.js";
|
|
2
3
|
import { getState, setHSLColor, setHexColor, setRGBColor } from "./misc/state.js";
|
|
3
4
|
var Color = class {
|
|
@@ -54,5 +55,17 @@ var Color = class {
|
|
|
54
55
|
this.#state = getState(value);
|
|
55
56
|
Object.defineProperty(this, "$color", { value: true });
|
|
56
57
|
}
|
|
58
|
+
toHexString(alpha) {
|
|
59
|
+
return `#${alpha === true ? this.hexa : this.hex}`;
|
|
60
|
+
}
|
|
61
|
+
toHslString(alpha) {
|
|
62
|
+
return formatColor("hsl", this, alpha === true);
|
|
63
|
+
}
|
|
64
|
+
toRgbString(alpha) {
|
|
65
|
+
return formatColor("rgb", this, alpha === true);
|
|
66
|
+
}
|
|
67
|
+
toString() {
|
|
68
|
+
return this.toHexString();
|
|
69
|
+
}
|
|
57
70
|
};
|
|
58
71
|
export { Color };
|
package/dist/color/misc/alpha.js
CHANGED
|
@@ -12,4 +12,31 @@ function getForegroundColor(value) {
|
|
|
12
12
|
else color = ((color + SRGB_LUMINANCE_OFFSET) / SRGB_LUMINANCE_MODIFIER) ** SRGB_LUMINANCE_EXPONENT;
|
|
13
13
|
return new Color(.2126 * values[2] + .7152 * values[1] + .0722 * values[0] > .625 ? HEX_BLACK : HEX_WHITE);
|
|
14
14
|
}
|
|
15
|
-
|
|
15
|
+
function getHexaColor(value) {
|
|
16
|
+
const { alpha, hex } = getState(value);
|
|
17
|
+
return `${hex}${alpha.hex}`;
|
|
18
|
+
}
|
|
19
|
+
function getHexColor(value) {
|
|
20
|
+
return getState(value).hex;
|
|
21
|
+
}
|
|
22
|
+
function getHslaColor(value) {
|
|
23
|
+
const { alpha, hsl } = getState(value);
|
|
24
|
+
return {
|
|
25
|
+
...hsl,
|
|
26
|
+
alpha: alpha.value
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
function getHslColor(value) {
|
|
30
|
+
return getState(value).hsl;
|
|
31
|
+
}
|
|
32
|
+
function getRgbaColor(value) {
|
|
33
|
+
const { alpha, rgb } = getState(value);
|
|
34
|
+
return {
|
|
35
|
+
...rgb,
|
|
36
|
+
alpha: alpha.value
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
function getRgbColor(value) {
|
|
40
|
+
return getState(value).rgb;
|
|
41
|
+
}
|
|
42
|
+
export { getForegroundColor, getHexColor, getHexaColor, getHslColor, getHslaColor, getRgbColor, getRgbaColor };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { join } from "../../internal/string.js";
|
|
2
|
+
import { KEYS_HSL, KEYS_RGB } from "../constants.js";
|
|
3
|
+
function formatColor(space, color, alpha) {
|
|
4
|
+
const suffix = alpha ? ` / ${color.alpha}` : "";
|
|
5
|
+
const value = color[space];
|
|
6
|
+
return `${space}(${join(formattingKeys[space].map((key) => value[key]), " ")}${suffix})`;
|
|
7
|
+
}
|
|
8
|
+
var formattingKeys = {
|
|
9
|
+
hsl: KEYS_HSL,
|
|
10
|
+
rgb: KEYS_RGB
|
|
11
|
+
};
|
|
12
|
+
export { formatColor };
|
package/dist/color/misc/is.js
CHANGED
|
@@ -34,10 +34,10 @@ function isObject(obj, properties) {
|
|
|
34
34
|
if (typeof obj !== "object" || obj === null) return false;
|
|
35
35
|
const keys = Object.keys(obj);
|
|
36
36
|
const { length } = keys;
|
|
37
|
-
if (length !== properties.
|
|
37
|
+
if (length !== properties.length) return false;
|
|
38
38
|
for (let index = 0; index < length; index += 1) {
|
|
39
39
|
const key = keys[index];
|
|
40
|
-
if (!(properties.
|
|
40
|
+
if (!(properties.includes(key) && validators[key](obj[key]))) return false;
|
|
41
41
|
}
|
|
42
42
|
return true;
|
|
43
43
|
}
|
package/dist/color/space/hex.js
CHANGED
|
@@ -2,7 +2,6 @@ import { join } from "../../internal/string.js";
|
|
|
2
2
|
import { ALPHA_FULL_HEX_LONG, ALPHA_FULL_HEX_SHORT, EXPRESSION_HEX_LONG, EXPRESSION_PREFIX, HEX_BLACK, LENGTH_LONG, LENGTH_SHORT, MAX_HEX } from "../constants.js";
|
|
3
3
|
import { isHexColor } from "../misc/is.js";
|
|
4
4
|
import { convertRgbToHsla } from "./rgb.js";
|
|
5
|
-
import { getState } from "../misc/state.js";
|
|
6
5
|
function convertHexToRgba(value) {
|
|
7
6
|
const normalized = getNormalizedHex(value, true);
|
|
8
7
|
const pairs = EXPRESSION_HEX_LONG.exec(normalized);
|
|
@@ -16,9 +15,6 @@ function convertHexToRgba(value) {
|
|
|
16
15
|
red: values[0]
|
|
17
16
|
};
|
|
18
17
|
}
|
|
19
|
-
function getHexColor(value) {
|
|
20
|
-
return getState(value).hex;
|
|
21
|
-
}
|
|
22
18
|
function getNormalizedHex(value, alpha) {
|
|
23
19
|
const includeAlpha = alpha ?? false;
|
|
24
20
|
if (!isHexColor(value)) return `${HEX_BLACK}${includeAlpha ? ALPHA_FULL_HEX_LONG : ""}`;
|
|
@@ -48,4 +44,4 @@ function hexToRgb(value) {
|
|
|
48
44
|
function hexToRgba(value) {
|
|
49
45
|
return convertHexToRgba(value);
|
|
50
46
|
}
|
|
51
|
-
export {
|
|
47
|
+
export { getNormalizedHex, hexToHsl, hexToHsla, hexToRgb, hexToRgba };
|
package/dist/color/space/hsl.js
CHANGED
|
@@ -4,7 +4,6 @@ import { ALPHA_FULL_VALUE, DEFAULT_HSL, MAX_DEGREE, MAX_HEX, MAX_PERCENT } from
|
|
|
4
4
|
import { getAlphaValue } from "../misc/alpha.js";
|
|
5
5
|
import { isHslColor } from "../misc/is.js";
|
|
6
6
|
import { convertRgbToHex } from "./rgb.js";
|
|
7
|
-
import { getState } from "../misc/state.js";
|
|
8
7
|
function convertHslToRgba(hsl) {
|
|
9
8
|
const actual = isHslColor(hsl) ? hsl : { ...DEFAULT_HSL };
|
|
10
9
|
let hue = actual.hue % 360;
|
|
@@ -22,16 +21,6 @@ function getHexyValue(hue, lightness, saturation, value) {
|
|
|
22
21
|
const part = (value + hue / 30) % 12;
|
|
23
22
|
return (lightness - saturation * Math.min(lightness, 1 - lightness) * Math.max(-1, Math.min(part - 3, 9 - part, 1))) * 255;
|
|
24
23
|
}
|
|
25
|
-
function getHslaColor(value) {
|
|
26
|
-
const { alpha, hsl } = getState(value);
|
|
27
|
-
return {
|
|
28
|
-
...hsl,
|
|
29
|
-
alpha: alpha.value
|
|
30
|
-
};
|
|
31
|
-
}
|
|
32
|
-
function getHslColor(value) {
|
|
33
|
-
return getState(value).hsl;
|
|
34
|
-
}
|
|
35
24
|
function hslToHex(hsl, alpha) {
|
|
36
25
|
return convertRgbToHex(convertHslToRgba(hsl), alpha ?? false);
|
|
37
26
|
}
|
|
@@ -46,4 +35,4 @@ function hslToRgb(hsl) {
|
|
|
46
35
|
function hslToRgba(hsl) {
|
|
47
36
|
return convertHslToRgba(hsl);
|
|
48
37
|
}
|
|
49
|
-
export {
|
|
38
|
+
export { hslToHex, hslToRgb, hslToRgba };
|
package/dist/color/space/rgb.js
CHANGED
|
@@ -2,7 +2,6 @@ import { join } from "../../internal/string.js";
|
|
|
2
2
|
import { ALPHA_FULL_VALUE, DEFAULT_RGB, MAX_DEGREE, MAX_HEX, MAX_PERCENT } from "../constants.js";
|
|
3
3
|
import { getAlpha, getAlphaValue } from "../misc/alpha.js";
|
|
4
4
|
import { isRgbColor } from "../misc/is.js";
|
|
5
|
-
import { getState } from "../misc/state.js";
|
|
6
5
|
function convertRgbToHex(rgb, alpha) {
|
|
7
6
|
const hex = `${join([
|
|
8
7
|
rgb.red,
|
|
@@ -57,16 +56,6 @@ function convertRgbToHsla(rgb) {
|
|
|
57
56
|
saturation: +(saturation * 100).toFixed(2)
|
|
58
57
|
};
|
|
59
58
|
}
|
|
60
|
-
function getRgbaColor(value) {
|
|
61
|
-
const { alpha, rgb } = getState(value);
|
|
62
|
-
return {
|
|
63
|
-
...rgb,
|
|
64
|
-
alpha: alpha.value
|
|
65
|
-
};
|
|
66
|
-
}
|
|
67
|
-
function getRgbColor(value) {
|
|
68
|
-
return getState(value).rgb;
|
|
69
|
-
}
|
|
70
59
|
function rgbToHex(rgb, alpha) {
|
|
71
60
|
return convertRgbToHex(isRgbColor(rgb) ? rgb : { ...DEFAULT_RGB }, alpha ?? false);
|
|
72
61
|
}
|
|
@@ -81,4 +70,4 @@ function rgbToHsl(rgb) {
|
|
|
81
70
|
function rgbToHsla(rgb) {
|
|
82
71
|
return convertRgbToHsla(rgb);
|
|
83
72
|
}
|
|
84
|
-
export { convertRgbToHex, convertRgbToHsla,
|
|
73
|
+
export { convertRgbToHex, convertRgbToHsla, rgbToHex, rgbToHsl, rgbToHsla };
|
package/dist/index.js
CHANGED
|
@@ -33,10 +33,10 @@ import { toSet } from "./array/to-set.js";
|
|
|
33
33
|
import { unique } from "./array/unique.js";
|
|
34
34
|
import "./array/index.js";
|
|
35
35
|
import { isColor, isHexColor, isHslColor, isHslaColor, isRgbColor, isRgbaColor } from "./color/misc/is.js";
|
|
36
|
-
import {
|
|
37
|
-
import {
|
|
38
|
-
import {
|
|
39
|
-
import { getForegroundColor } from "./color/misc/
|
|
36
|
+
import { rgbToHex, rgbToHsl, rgbToHsla } from "./color/space/rgb.js";
|
|
37
|
+
import { getNormalizedHex, hexToHsl, hexToHsla, hexToRgb, hexToRgba } from "./color/space/hex.js";
|
|
38
|
+
import { hslToHex, hslToRgb, hslToRgba } from "./color/space/hsl.js";
|
|
39
|
+
import { getForegroundColor, getHexColor, getHexaColor, getHslColor, getHslaColor, getRgbColor, getRgbaColor } from "./color/misc/get.js";
|
|
40
40
|
import { getColor } from "./color/index.js";
|
|
41
41
|
import { emitter } from "./emitter.js";
|
|
42
42
|
import { debounce, memoize, throttle } from "./function.js";
|
|
@@ -52,4 +52,4 @@ import { partial } from "./value/partial.js";
|
|
|
52
52
|
import { smush } from "./value/smush.js";
|
|
53
53
|
import { unsmush } from "./value/unsmush.js";
|
|
54
54
|
import "./value/index.js";
|
|
55
|
-
export { SizedMap, SizedSet, average, between, camelCase, capitalize, chunk, clamp, clone, compact, compare, count, createUuid, debounce, diff, emitter, equal, exists, filter, find, flatten, fromQuery, getArray, getColor, getForegroundColor, getHexColor, getHslColor, getHslaColor, getNormalizedHex, getNumber, getRandomBoolean, getRandomCharacters, getRandomColor, getRandomFloat, getRandomHex, getRandomInteger, getRandomItem, getRandomItems, getRgbColor, getRgbaColor, getString, getValue, groupBy, hexToHsl, hexToHsla, hexToRgb, hexToRgba, hslToHex, hslToRgb, hslToRgba, indexOf, insert, isArrayOrPlainObject, isColor, isEmpty, isHexColor, isHslColor, isHslaColor, isKey, isNullable, isNullableOrEmpty, isNullableOrWhitespace, isNumber, isNumerical, isObject, isPlainObject, isPrimitive, isRgbColor, isRgbaColor, isTypedArray, join, kebabCase, logger, max, memoize, merge, min, noop, parse, partial, pascalCase, push, rgbToHex, rgbToHsl, rgbToHsla, round, setValue, shuffle, smush, snakeCase, sort, splice, sum, template, throttle, titleCase, toMap, toQuery, toRecord, toSet, truncate, unique, unsmush, words };
|
|
55
|
+
export { SizedMap, SizedSet, average, between, camelCase, capitalize, chunk, clamp, clone, compact, compare, count, createUuid, debounce, diff, emitter, equal, exists, filter, find, flatten, fromQuery, getArray, getColor, getForegroundColor, getHexColor, getHexaColor, getHslColor, getHslaColor, getNormalizedHex, getNumber, getRandomBoolean, getRandomCharacters, getRandomColor, getRandomFloat, getRandomHex, getRandomInteger, getRandomItem, getRandomItems, getRgbColor, getRgbaColor, getString, getValue, groupBy, hexToHsl, hexToHsla, hexToRgb, hexToRgba, hslToHex, hslToRgb, hslToRgba, indexOf, insert, isArrayOrPlainObject, isColor, isEmpty, isHexColor, isHslColor, isHslaColor, isKey, isNullable, isNullableOrEmpty, isNullableOrWhitespace, isNumber, isNumerical, isObject, isPlainObject, isPrimitive, isRgbColor, isRgbaColor, isTypedArray, join, kebabCase, logger, max, memoize, merge, min, noop, parse, partial, pascalCase, push, rgbToHex, rgbToHsl, rgbToHsla, round, setValue, shuffle, smush, snakeCase, sort, splice, sum, template, throttle, titleCase, toMap, toQuery, toRecord, toSet, truncate, unique, unsmush, words };
|
package/package.json
CHANGED
package/src/color/constants.ts
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type {
|
|
2
|
+
Alpha,
|
|
3
|
+
ColorProperty,
|
|
4
|
+
ColorSpace,
|
|
5
|
+
HSLColor,
|
|
6
|
+
RGBColor,
|
|
7
|
+
} from './models';
|
|
2
8
|
|
|
3
9
|
export const ALPHA_FULL_HEX_SHORT = 'f';
|
|
4
10
|
|
|
@@ -42,17 +48,13 @@ export const LENGTH_LONG = 6;
|
|
|
42
48
|
|
|
43
49
|
export const LENGTH_SHORT = 3;
|
|
44
50
|
|
|
45
|
-
export const KEYS_HSL:
|
|
46
|
-
'hue',
|
|
47
|
-
'lightness',
|
|
48
|
-
'saturation',
|
|
49
|
-
]);
|
|
51
|
+
export const KEYS_HSL: ColorProperty[] = ['hue', 'saturation', 'lightness'];
|
|
50
52
|
|
|
51
|
-
export const KEYS_HSLA:
|
|
53
|
+
export const KEYS_HSLA: ColorProperty[] = [...KEYS_HSL, 'alpha'];
|
|
52
54
|
|
|
53
|
-
export const KEYS_RGB:
|
|
55
|
+
export const KEYS_RGB: ColorProperty[] = ['red', 'green', 'blue'];
|
|
54
56
|
|
|
55
|
-
export const KEYS_RGBA:
|
|
57
|
+
export const KEYS_RGBA: ColorProperty[] = [...KEYS_RGB, 'alpha'];
|
|
56
58
|
|
|
57
59
|
export const MAX_DEGREE = 360;
|
|
58
60
|
|
|
@@ -60,6 +62,12 @@ export const MAX_HEX = 255;
|
|
|
60
62
|
|
|
61
63
|
export const MAX_PERCENT = 100;
|
|
62
64
|
|
|
65
|
+
export const SPACE_HSL: ColorSpace = 'hsl';
|
|
66
|
+
|
|
67
|
+
export const SPACE_RGB: ColorSpace = 'rgb';
|
|
68
|
+
|
|
69
|
+
//
|
|
70
|
+
|
|
63
71
|
// https://www.w3.org/TR/WCAG20/#relativeluminancedef
|
|
64
72
|
|
|
65
73
|
export const SRGB_LUMINANCE_BLUE = 0.0722;
|
package/src/color/index.ts
CHANGED
|
@@ -2,11 +2,19 @@ import {Color} from './instance';
|
|
|
2
2
|
import {isColor} from './misc/is';
|
|
3
3
|
import type {HSLAColor, HSLColor, RGBAColor, RGBColor} from './models';
|
|
4
4
|
|
|
5
|
-
export
|
|
5
|
+
export {
|
|
6
|
+
getForegroundColor,
|
|
7
|
+
getHexaColor,
|
|
8
|
+
getHexColor,
|
|
9
|
+
getHslaColor,
|
|
10
|
+
getHslColor,
|
|
11
|
+
getRgbaColor,
|
|
12
|
+
getRgbColor,
|
|
13
|
+
} from './misc/get';
|
|
14
|
+
|
|
6
15
|
export * from './misc/is';
|
|
7
16
|
|
|
8
17
|
export {
|
|
9
|
-
getHexColor,
|
|
10
18
|
getNormalizedHex,
|
|
11
19
|
hexToHsl,
|
|
12
20
|
hexToHsla,
|
|
@@ -15,16 +23,12 @@ export {
|
|
|
15
23
|
} from './space/hex';
|
|
16
24
|
|
|
17
25
|
export {
|
|
18
|
-
getHslaColor,
|
|
19
|
-
getHslColor,
|
|
20
26
|
hslToHex,
|
|
21
27
|
hslToRgb,
|
|
22
28
|
hslToRgba,
|
|
23
29
|
} from './space/hsl';
|
|
24
30
|
|
|
25
31
|
export {
|
|
26
|
-
getRgbaColor,
|
|
27
|
-
getRgbColor,
|
|
28
32
|
rgbToHex,
|
|
29
33
|
rgbToHsl,
|
|
30
34
|
rgbToHsla,
|
|
@@ -33,7 +37,7 @@ export {
|
|
|
33
37
|
export type {Color, HSLAColor, HSLColor, RGBAColor, RGBColor};
|
|
34
38
|
|
|
35
39
|
/**
|
|
36
|
-
* Get a
|
|
40
|
+
* Get a Color from any kind of value
|
|
37
41
|
* @param value Original value
|
|
38
42
|
* @returns Color instance
|
|
39
43
|
*/
|
package/src/color/instance.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import {SPACE_HSL, SPACE_RGB} from './constants';
|
|
2
|
+
import {formatColor} from './misc';
|
|
1
3
|
import {getAlpha} from './misc/alpha';
|
|
2
4
|
import {getState, setHexColor, setHSLColor, setRGBColor} from './misc/state';
|
|
3
5
|
import type {
|
|
@@ -13,10 +15,16 @@ export class Color {
|
|
|
13
15
|
|
|
14
16
|
readonly #state: ColorState;
|
|
15
17
|
|
|
18
|
+
/**
|
|
19
|
+
* Get the alpha channel
|
|
20
|
+
*/
|
|
16
21
|
get alpha(): number {
|
|
17
22
|
return this.#state.alpha.value;
|
|
18
23
|
}
|
|
19
24
|
|
|
25
|
+
/**
|
|
26
|
+
* Set the alpha channel
|
|
27
|
+
*/
|
|
20
28
|
set alpha(value: number) {
|
|
21
29
|
if (typeof value === 'number' && !Number.isNaN(value)) {
|
|
22
30
|
this.#state.alpha = getAlpha(value);
|
|
@@ -120,4 +128,20 @@ export class Color {
|
|
|
120
128
|
value: true,
|
|
121
129
|
});
|
|
122
130
|
}
|
|
131
|
+
|
|
132
|
+
toHexString(alpha?: boolean): string {
|
|
133
|
+
return `#${alpha === true ? this.hexa : this.hex}`;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
toHslString(alpha?: boolean): string {
|
|
137
|
+
return formatColor('hsl', this, alpha === true);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
toRgbString(alpha?: boolean): string {
|
|
141
|
+
return formatColor('rgb', this, alpha === true);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
toString(): string {
|
|
145
|
+
return this.toHexString();
|
|
146
|
+
}
|
|
123
147
|
}
|
package/src/color/misc/alpha.ts
CHANGED
|
@@ -24,7 +24,7 @@ export function getAlpha(value: unknown): Alpha {
|
|
|
24
24
|
return {...DEFAULT_ALPHA};
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
function getAlphaHexadecimal(value: number): string {
|
|
27
|
+
export function getAlphaHexadecimal(value: number): string {
|
|
28
28
|
if (value === ALPHA_NONE_VALUE) {
|
|
29
29
|
return ALPHA_NONE_HEX;
|
|
30
30
|
}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
import {
|
|
2
|
+
HEX_BLACK,
|
|
3
|
+
HEX_WHITE,
|
|
4
|
+
MAX_HEX,
|
|
5
|
+
SRGB_LUMINANCE_BLUE,
|
|
6
|
+
SRGB_LUMINANCE_EXPONENT,
|
|
7
|
+
SRGB_LUMINANCE_GREEN,
|
|
8
|
+
SRGB_LUMINANCE_MINIMUM,
|
|
9
|
+
SRGB_LUMINANCE_MODIFIER,
|
|
10
|
+
SRGB_LUMINANCE_MULTIPLIER,
|
|
11
|
+
SRGB_LUMINANCE_OFFSET,
|
|
12
|
+
SRGB_LUMINANCE_RED,
|
|
13
|
+
SRGB_LUMINANCE_THRESHOLD,
|
|
14
|
+
} from '../constants';
|
|
15
|
+
import {Color} from '../instance';
|
|
16
|
+
import type {HSLAColor, HSLColor, RGBAColor, RGBColor} from '../models';
|
|
17
|
+
import {getState} from './state';
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* Get a foreground color _(usually text)_ based on a background color's luminance
|
|
21
|
+
* @param value Original value
|
|
22
|
+
* @returns Foreground color
|
|
23
|
+
*/
|
|
24
|
+
export function getForegroundColor(value: unknown): Color {
|
|
25
|
+
const state = getState(value);
|
|
26
|
+
const {blue, green, red} = state.rgb;
|
|
27
|
+
|
|
28
|
+
const values = [blue / MAX_HEX, green / MAX_HEX, red / MAX_HEX];
|
|
29
|
+
|
|
30
|
+
for (let color of values) {
|
|
31
|
+
if (color <= SRGB_LUMINANCE_MINIMUM) {
|
|
32
|
+
color /= SRGB_LUMINANCE_MULTIPLIER;
|
|
33
|
+
} else {
|
|
34
|
+
color =
|
|
35
|
+
((color + SRGB_LUMINANCE_OFFSET) / SRGB_LUMINANCE_MODIFIER) **
|
|
36
|
+
SRGB_LUMINANCE_EXPONENT;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
const luminance =
|
|
41
|
+
SRGB_LUMINANCE_RED * values[2] +
|
|
42
|
+
SRGB_LUMINANCE_GREEN * values[1] +
|
|
43
|
+
SRGB_LUMINANCE_BLUE * values[0];
|
|
44
|
+
|
|
45
|
+
// Rudimentary and ureliable?; implement APCA for more reliable results?
|
|
46
|
+
return new Color(
|
|
47
|
+
luminance > SRGB_LUMINANCE_THRESHOLD ? HEX_BLACK : HEX_WHITE,
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* Get the hex color _(with alpha channel)_ from any kind of value
|
|
53
|
+
* @param value Original value
|
|
54
|
+
* @returns Hex color
|
|
55
|
+
*/
|
|
56
|
+
export function getHexaColor(value: unknown): string {
|
|
57
|
+
const {alpha, hex} = getState(value);
|
|
58
|
+
|
|
59
|
+
return `${hex}${alpha.hex}`;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/**
|
|
63
|
+
* Get the hex color from any kind of value
|
|
64
|
+
* @param value Original value
|
|
65
|
+
* @returns Hex color
|
|
66
|
+
*/
|
|
67
|
+
export function getHexColor(value: unknown): string {
|
|
68
|
+
return getState(value).hex;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/**
|
|
72
|
+
* Get the HSLA color from any kind of value
|
|
73
|
+
* @param value Original value
|
|
74
|
+
* @returns HSLA color
|
|
75
|
+
*/
|
|
76
|
+
export function getHslaColor(value: unknown): HSLAColor {
|
|
77
|
+
const {alpha, hsl} = getState(value);
|
|
78
|
+
|
|
79
|
+
return {
|
|
80
|
+
...hsl,
|
|
81
|
+
alpha: alpha.value,
|
|
82
|
+
};
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* Get the HSL color from any kind of value
|
|
87
|
+
* @param value Original value
|
|
88
|
+
* @returns HSL color
|
|
89
|
+
*/
|
|
90
|
+
export function getHslColor(value: unknown): HSLColor {
|
|
91
|
+
return getState(value).hsl;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/**
|
|
95
|
+
* Get the RGBA color from any kind of value
|
|
96
|
+
* @param value Original value
|
|
97
|
+
* @returns RGBA color
|
|
98
|
+
*/
|
|
99
|
+
export function getRgbaColor(value: unknown): RGBAColor {
|
|
100
|
+
const {alpha, rgb} = getState(value);
|
|
101
|
+
|
|
102
|
+
return {
|
|
103
|
+
...rgb,
|
|
104
|
+
alpha: alpha.value,
|
|
105
|
+
};
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/**
|
|
109
|
+
* Get the RGB color from any kind of value
|
|
110
|
+
* @param value Original value
|
|
111
|
+
* @returns RGB color
|
|
112
|
+
*/
|
|
113
|
+
export function getRgbColor(value: unknown): RGBColor {
|
|
114
|
+
return getState(value).rgb;
|
|
115
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import {join} from '../../internal/string';
|
|
2
|
+
import {KEYS_HSL, KEYS_RGB} from '../constants';
|
|
3
|
+
import type {Color} from '../instance';
|
|
4
|
+
import type {ColorProperty, ColorSpace} from '../models';
|
|
5
|
+
|
|
6
|
+
export function formatColor(
|
|
7
|
+
space: ColorSpace,
|
|
8
|
+
color: Color,
|
|
9
|
+
alpha: boolean,
|
|
10
|
+
): string {
|
|
11
|
+
const suffix = alpha ? ` / ${color.alpha}` : '';
|
|
12
|
+
const value = color[space];
|
|
13
|
+
|
|
14
|
+
return `${space}(${join(
|
|
15
|
+
formattingKeys[space].map(key => value[key as never]),
|
|
16
|
+
' ',
|
|
17
|
+
)}${suffix})`;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
//
|
|
21
|
+
|
|
22
|
+
const formattingKeys: Record<ColorSpace, ColorProperty[]> = {
|
|
23
|
+
hsl: KEYS_HSL,
|
|
24
|
+
rgb: KEYS_RGB,
|
|
25
|
+
};
|
package/src/color/misc/is.ts
CHANGED
|
@@ -111,7 +111,7 @@ export function isRgbColor(value: unknown): value is RGBColor {
|
|
|
111
111
|
return isObject(value, KEYS_RGBA) || isObject(value, KEYS_RGB);
|
|
112
112
|
}
|
|
113
113
|
|
|
114
|
-
function isObject(obj: unknown, properties:
|
|
114
|
+
function isObject(obj: unknown, properties: ColorProperty[]): boolean {
|
|
115
115
|
if (typeof obj !== 'object' || obj === null) {
|
|
116
116
|
return false;
|
|
117
117
|
}
|
|
@@ -119,7 +119,7 @@ function isObject(obj: unknown, properties: Set<ColorProperty>): boolean {
|
|
|
119
119
|
const keys = Object.keys(obj);
|
|
120
120
|
const {length} = keys;
|
|
121
121
|
|
|
122
|
-
if (length !== properties.
|
|
122
|
+
if (length !== properties.length) {
|
|
123
123
|
return false;
|
|
124
124
|
}
|
|
125
125
|
|
|
@@ -128,7 +128,7 @@ function isObject(obj: unknown, properties: Set<ColorProperty>): boolean {
|
|
|
128
128
|
|
|
129
129
|
if (
|
|
130
130
|
!(
|
|
131
|
-
properties.
|
|
131
|
+
properties.includes(key as never) &&
|
|
132
132
|
validators[key as ColorProperty]((obj as PlainObject)[key])
|
|
133
133
|
)
|
|
134
134
|
) {
|
package/src/color/models.ts
CHANGED
package/src/color/space/hex.ts
CHANGED
|
@@ -10,7 +10,6 @@ import {
|
|
|
10
10
|
MAX_HEX,
|
|
11
11
|
} from '../constants';
|
|
12
12
|
import {isHexColor} from '../misc/is';
|
|
13
|
-
import {getState} from '../misc/state';
|
|
14
13
|
import type {HSLAColor, HSLColor, RGBAColor, RGBColor} from '../models';
|
|
15
14
|
import {convertRgbToHsla} from './rgb';
|
|
16
15
|
|
|
@@ -33,15 +32,6 @@ function convertHexToRgba(value: string): RGBAColor {
|
|
|
33
32
|
};
|
|
34
33
|
}
|
|
35
34
|
|
|
36
|
-
/**
|
|
37
|
-
* Get the hex color from any kind of value
|
|
38
|
-
* @param value Original value
|
|
39
|
-
* @returns Hex color
|
|
40
|
-
*/
|
|
41
|
-
export function getHexColor(value: unknown): string {
|
|
42
|
-
return getState(value).hex;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
35
|
/**
|
|
46
36
|
* Get the normalized hex color from a value
|
|
47
37
|
* @param value Value to normalize
|
package/src/color/space/hsl.ts
CHANGED
|
@@ -8,7 +8,6 @@ import {
|
|
|
8
8
|
} from '../constants';
|
|
9
9
|
import {getAlphaValue} from '../misc/alpha';
|
|
10
10
|
import {isHslColor} from '../misc/is';
|
|
11
|
-
import {getState} from '../misc/state';
|
|
12
11
|
import type {HSLAColor, HSLColor, RGBAColor, RGBColor} from '../models';
|
|
13
12
|
import {convertRgbToHex} from './rgb';
|
|
14
13
|
|
|
@@ -58,29 +57,6 @@ function getHexyValue(
|
|
|
58
57
|
);
|
|
59
58
|
}
|
|
60
59
|
|
|
61
|
-
/**
|
|
62
|
-
* Get the HSLA color from any kind of value
|
|
63
|
-
* @param value Original value
|
|
64
|
-
* @returns HSLA color
|
|
65
|
-
*/
|
|
66
|
-
export function getHslaColor(value: unknown): HSLAColor {
|
|
67
|
-
const {alpha, hsl} = getState(value);
|
|
68
|
-
|
|
69
|
-
return {
|
|
70
|
-
...hsl,
|
|
71
|
-
alpha: alpha.value,
|
|
72
|
-
};
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
/**
|
|
76
|
-
* Get the HSL color from any kind of value
|
|
77
|
-
* @param value Original value
|
|
78
|
-
* @returns HSL color
|
|
79
|
-
*/
|
|
80
|
-
export function getHslColor(value: unknown): HSLColor {
|
|
81
|
-
return getState(value).hsl;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
60
|
export function hslToHex(hsl: HSLAColor | HSLColor, alpha?: boolean): string {
|
|
85
61
|
return convertRgbToHex(convertHslToRgba(hsl), alpha ?? false);
|
|
86
62
|
}
|
package/src/color/space/rgb.ts
CHANGED
|
@@ -8,7 +8,6 @@ import {
|
|
|
8
8
|
} from '../constants';
|
|
9
9
|
import {getAlpha, getAlphaValue} from '../misc/alpha';
|
|
10
10
|
import {isRgbColor} from '../misc/is';
|
|
11
|
-
import {getState} from '../misc/state';
|
|
12
11
|
import type {HSLAColor, HSLColor, RGBAColor, RGBColor} from '../models';
|
|
13
12
|
|
|
14
13
|
export function convertRgbToHex(
|
|
@@ -92,29 +91,6 @@ export function convertRgbToHsla(rgb: RGBAColor | RGBColor): HSLAColor {
|
|
|
92
91
|
};
|
|
93
92
|
}
|
|
94
93
|
|
|
95
|
-
/**
|
|
96
|
-
* Get the RGBA color from any kind of value
|
|
97
|
-
* @param value Original value
|
|
98
|
-
* @returns RGBA color
|
|
99
|
-
*/
|
|
100
|
-
export function getRgbaColor(value: unknown): RGBAColor {
|
|
101
|
-
const {alpha, rgb} = getState(value);
|
|
102
|
-
|
|
103
|
-
return {
|
|
104
|
-
...rgb,
|
|
105
|
-
alpha: alpha.value,
|
|
106
|
-
};
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
/**
|
|
110
|
-
* Get the RGB color from any kind of value
|
|
111
|
-
* @param value Original value
|
|
112
|
-
* @returns RGB color
|
|
113
|
-
*/
|
|
114
|
-
export function getRgbColor(value: unknown): RGBColor {
|
|
115
|
-
return getState(value).rgb;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
94
|
/**
|
|
119
95
|
* Convert an RGB(A) color to a hex color _(with optional alpha channel)_
|
|
120
96
|
* @param rgb RGB(A) color
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { Alpha, ColorProperty, HSLColor, RGBColor } from './models';
|
|
1
|
+
import type { Alpha, ColorProperty, ColorSpace, HSLColor, RGBColor } from './models';
|
|
2
2
|
export declare const ALPHA_FULL_HEX_SHORT = "f";
|
|
3
3
|
export declare const ALPHA_FULL_HEX_LONG = "ff";
|
|
4
4
|
export declare const ALPHA_FULL_VALUE = 1;
|
|
@@ -14,13 +14,15 @@ export declare const HEX_BLACK = "000000";
|
|
|
14
14
|
export declare const HEX_WHITE = "ffffff";
|
|
15
15
|
export declare const LENGTH_LONG = 6;
|
|
16
16
|
export declare const LENGTH_SHORT = 3;
|
|
17
|
-
export declare const KEYS_HSL:
|
|
18
|
-
export declare const KEYS_HSLA:
|
|
19
|
-
export declare const KEYS_RGB:
|
|
20
|
-
export declare const KEYS_RGBA:
|
|
17
|
+
export declare const KEYS_HSL: ColorProperty[];
|
|
18
|
+
export declare const KEYS_HSLA: ColorProperty[];
|
|
19
|
+
export declare const KEYS_RGB: ColorProperty[];
|
|
20
|
+
export declare const KEYS_RGBA: ColorProperty[];
|
|
21
21
|
export declare const MAX_DEGREE = 360;
|
|
22
22
|
export declare const MAX_HEX = 255;
|
|
23
23
|
export declare const MAX_PERCENT = 100;
|
|
24
|
+
export declare const SPACE_HSL: ColorSpace;
|
|
25
|
+
export declare const SPACE_RGB: ColorSpace;
|
|
24
26
|
export declare const SRGB_LUMINANCE_BLUE = 0.0722;
|
|
25
27
|
export declare const SRGB_LUMINANCE_EXPONENT = 2.4;
|
|
26
28
|
export declare const SRGB_LUMINANCE_GREEN = 0.7152;
|
package/types/color/index.d.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { Color } from './instance';
|
|
2
2
|
import type { HSLAColor, HSLColor, RGBAColor, RGBColor } from './models';
|
|
3
|
-
export
|
|
3
|
+
export { getForegroundColor, getHexaColor, getHexColor, getHslaColor, getHslColor, getRgbaColor, getRgbColor, } from './misc/get';
|
|
4
4
|
export * from './misc/is';
|
|
5
|
-
export {
|
|
6
|
-
export {
|
|
7
|
-
export {
|
|
5
|
+
export { getNormalizedHex, hexToHsl, hexToHsla, hexToRgb, hexToRgba, } from './space/hex';
|
|
6
|
+
export { hslToHex, hslToRgb, hslToRgba, } from './space/hsl';
|
|
7
|
+
export { rgbToHex, rgbToHsl, rgbToHsla, } from './space/rgb';
|
|
8
8
|
export type { Color, HSLAColor, HSLColor, RGBAColor, RGBColor };
|
|
9
9
|
/**
|
|
10
|
-
* Get a
|
|
10
|
+
* Get a Color from any kind of value
|
|
11
11
|
* @param value Original value
|
|
12
12
|
* @returns Color instance
|
|
13
13
|
*/
|
|
@@ -2,7 +2,13 @@ import type { HSLAColor, HSLColor, RGBAColor, RGBColor } from './models';
|
|
|
2
2
|
export declare class Color {
|
|
3
3
|
#private;
|
|
4
4
|
private readonly $color;
|
|
5
|
+
/**
|
|
6
|
+
* Get the alpha channel
|
|
7
|
+
*/
|
|
5
8
|
get alpha(): number;
|
|
9
|
+
/**
|
|
10
|
+
* Set the alpha channel
|
|
11
|
+
*/
|
|
6
12
|
set alpha(value: number);
|
|
7
13
|
/**
|
|
8
14
|
* Get the color as a hex color
|
|
@@ -53,4 +59,8 @@ export declare class Color {
|
|
|
53
59
|
*/
|
|
54
60
|
set rgba(value: RGBAColor);
|
|
55
61
|
constructor(value: unknown);
|
|
62
|
+
toHexString(alpha?: boolean): string;
|
|
63
|
+
toHslString(alpha?: boolean): string;
|
|
64
|
+
toRgbString(alpha?: boolean): string;
|
|
65
|
+
toString(): string;
|
|
56
66
|
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { Color } from '../instance';
|
|
2
|
+
import type { HSLAColor, HSLColor, RGBAColor, RGBColor } from '../models';
|
|
3
|
+
/**
|
|
4
|
+
* Get a foreground color _(usually text)_ based on a background color's luminance
|
|
5
|
+
* @param value Original value
|
|
6
|
+
* @returns Foreground color
|
|
7
|
+
*/
|
|
8
|
+
export declare function getForegroundColor(value: unknown): Color;
|
|
9
|
+
/**
|
|
10
|
+
* Get the hex color _(with alpha channel)_ from any kind of value
|
|
11
|
+
* @param value Original value
|
|
12
|
+
* @returns Hex color
|
|
13
|
+
*/
|
|
14
|
+
export declare function getHexaColor(value: unknown): string;
|
|
15
|
+
/**
|
|
16
|
+
* Get the hex color from any kind of value
|
|
17
|
+
* @param value Original value
|
|
18
|
+
* @returns Hex color
|
|
19
|
+
*/
|
|
20
|
+
export declare function getHexColor(value: unknown): string;
|
|
21
|
+
/**
|
|
22
|
+
* Get the HSLA color from any kind of value
|
|
23
|
+
* @param value Original value
|
|
24
|
+
* @returns HSLA color
|
|
25
|
+
*/
|
|
26
|
+
export declare function getHslaColor(value: unknown): HSLAColor;
|
|
27
|
+
/**
|
|
28
|
+
* Get the HSL color from any kind of value
|
|
29
|
+
* @param value Original value
|
|
30
|
+
* @returns HSL color
|
|
31
|
+
*/
|
|
32
|
+
export declare function getHslColor(value: unknown): HSLColor;
|
|
33
|
+
/**
|
|
34
|
+
* Get the RGBA color from any kind of value
|
|
35
|
+
* @param value Original value
|
|
36
|
+
* @returns RGBA color
|
|
37
|
+
*/
|
|
38
|
+
export declare function getRgbaColor(value: unknown): RGBAColor;
|
|
39
|
+
/**
|
|
40
|
+
* Get the RGB color from any kind of value
|
|
41
|
+
* @param value Original value
|
|
42
|
+
* @returns RGB color
|
|
43
|
+
*/
|
|
44
|
+
export declare function getRgbColor(value: unknown): RGBColor;
|
package/types/color/models.d.ts
CHANGED
|
@@ -1,10 +1,4 @@
|
|
|
1
1
|
import type { HSLAColor, HSLColor, RGBAColor, RGBColor } from '../models';
|
|
2
|
-
/**
|
|
3
|
-
* Get the hex color from any kind of value
|
|
4
|
-
* @param value Original value
|
|
5
|
-
* @returns Hex color
|
|
6
|
-
*/
|
|
7
|
-
export declare function getHexColor(value: unknown): string;
|
|
8
2
|
/**
|
|
9
3
|
* Get the normalized hex color from a value
|
|
10
4
|
* @param value Value to normalize
|
|
@@ -1,16 +1,4 @@
|
|
|
1
1
|
import type { HSLAColor, HSLColor, RGBAColor, RGBColor } from '../models';
|
|
2
|
-
/**
|
|
3
|
-
* Get the HSLA color from any kind of value
|
|
4
|
-
* @param value Original value
|
|
5
|
-
* @returns HSLA color
|
|
6
|
-
*/
|
|
7
|
-
export declare function getHslaColor(value: unknown): HSLAColor;
|
|
8
|
-
/**
|
|
9
|
-
* Get the HSL color from any kind of value
|
|
10
|
-
* @param value Original value
|
|
11
|
-
* @returns HSL color
|
|
12
|
-
*/
|
|
13
|
-
export declare function getHslColor(value: unknown): HSLColor;
|
|
14
2
|
export declare function hslToHex(hsl: HSLAColor | HSLColor, alpha?: boolean): string;
|
|
15
3
|
/**
|
|
16
4
|
* Convert an HSL(A) color to an RGB color
|
|
@@ -1,18 +1,6 @@
|
|
|
1
1
|
import type { HSLAColor, HSLColor, RGBAColor, RGBColor } from '../models';
|
|
2
2
|
export declare function convertRgbToHex(rgb: RGBAColor | RGBColor, alpha: boolean): string;
|
|
3
3
|
export declare function convertRgbToHsla(rgb: RGBAColor | RGBColor): HSLAColor;
|
|
4
|
-
/**
|
|
5
|
-
* Get the RGBA color from any kind of value
|
|
6
|
-
* @param value Original value
|
|
7
|
-
* @returns RGBA color
|
|
8
|
-
*/
|
|
9
|
-
export declare function getRgbaColor(value: unknown): RGBAColor;
|
|
10
|
-
/**
|
|
11
|
-
* Get the RGB color from any kind of value
|
|
12
|
-
* @param value Original value
|
|
13
|
-
* @returns RGB color
|
|
14
|
-
*/
|
|
15
|
-
export declare function getRgbColor(value: unknown): RGBColor;
|
|
16
4
|
/**
|
|
17
5
|
* Convert an RGB(A) color to a hex color _(with optional alpha channel)_
|
|
18
6
|
* @param rgb RGB(A) color
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
HEX_BLACK,
|
|
3
|
-
HEX_WHITE,
|
|
4
|
-
MAX_HEX,
|
|
5
|
-
SRGB_LUMINANCE_BLUE,
|
|
6
|
-
SRGB_LUMINANCE_EXPONENT,
|
|
7
|
-
SRGB_LUMINANCE_GREEN,
|
|
8
|
-
SRGB_LUMINANCE_MINIMUM,
|
|
9
|
-
SRGB_LUMINANCE_MODIFIER,
|
|
10
|
-
SRGB_LUMINANCE_MULTIPLIER,
|
|
11
|
-
SRGB_LUMINANCE_OFFSET,
|
|
12
|
-
SRGB_LUMINANCE_RED,
|
|
13
|
-
SRGB_LUMINANCE_THRESHOLD,
|
|
14
|
-
} from '../constants';
|
|
15
|
-
import {Color} from '../instance';
|
|
16
|
-
import {getState} from './state';
|
|
17
|
-
|
|
18
|
-
/**
|
|
19
|
-
* Get a foreground color _(usually text)_ based on a background color's luminance
|
|
20
|
-
* @param value Original value
|
|
21
|
-
* @returns Foreground color
|
|
22
|
-
*/
|
|
23
|
-
export function getForegroundColor(value: unknown): Color {
|
|
24
|
-
const state = getState(value);
|
|
25
|
-
const {blue, green, red} = state.rgb;
|
|
26
|
-
|
|
27
|
-
const values = [blue / MAX_HEX, green / MAX_HEX, red / MAX_HEX];
|
|
28
|
-
|
|
29
|
-
for (let color of values) {
|
|
30
|
-
if (color <= SRGB_LUMINANCE_MINIMUM) {
|
|
31
|
-
color /= SRGB_LUMINANCE_MULTIPLIER;
|
|
32
|
-
} else {
|
|
33
|
-
color =
|
|
34
|
-
((color + SRGB_LUMINANCE_OFFSET) / SRGB_LUMINANCE_MODIFIER) **
|
|
35
|
-
SRGB_LUMINANCE_EXPONENT;
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
const luminance =
|
|
40
|
-
SRGB_LUMINANCE_RED * values[2] +
|
|
41
|
-
SRGB_LUMINANCE_GREEN * values[1] +
|
|
42
|
-
SRGB_LUMINANCE_BLUE * values[0];
|
|
43
|
-
|
|
44
|
-
// Rudimentary and ureliable?; implement APCA for more reliable results?
|
|
45
|
-
return new Color(
|
|
46
|
-
luminance > SRGB_LUMINANCE_THRESHOLD ? HEX_BLACK : HEX_WHITE,
|
|
47
|
-
);
|
|
48
|
-
}
|