@asamuzakjp/css-color
Advanced tools
Comparing version 2.2.1 to 2.3.0
@@ -28,2 +28,3 @@ { | ||
"@csstools/css-calc": "^2.1.0", | ||
"@csstools/css-tokenizer": "^3.0.3", | ||
"lru-cache": "^11.0.2" | ||
@@ -54,3 +55,3 @@ }, | ||
}, | ||
"version": "2.2.1" | ||
"version": "2.3.0" | ||
} |
@@ -43,2 +43,3 @@ # CSS color | ||
* `opt.currentColor` **[string][133]?** color to use for `currentcolor` keyword | ||
* `opt.customProperty` **[object][135]?** custom properties, pair of `--` prefixed property name and value, e.g. `customProperty: { '--some-color': '#0000ff' }` | ||
* `opt.format` **[string][133]?** output format, one of `computedValue` (default), `specifiedValue`, `rgb`, `hex`, `hexAlpha` | ||
@@ -81,6 +82,7 @@ * `computedValue` is a [computed value][139] of the color | ||
* `opt.alpha` **[boolean][136]?** return in #rrggbbaa notation | ||
* `opt.customProperty` **[object][135]?** custom properties, pair of `--` prefixed property name and value, e.g. `customProperty: { '--some-color': '#0000ff' }` | ||
Returns **[string][133]** #rrggbb|#rrggbbaa | ||
### convert.colorToHsl(value) | ||
### convert.colorToHsl(value, opt) | ||
@@ -92,6 +94,8 @@ convert color to hsl | ||
* `value` **[string][133]** color value | ||
* `opt` **[object][135]?** options (optional, default `{}`) | ||
* `opt.customProperty` **[object][135]?** custom properties, pair of `--` prefixed property name and value, e.g. `customProperty: { '--some-color': '#0000ff' }` | ||
Returns **[Array][137]<[number][134]>** \[h, s, l, a] | ||
### convert.colorToHwb(value) | ||
### convert.colorToHwb(value, opt) | ||
@@ -103,6 +107,8 @@ convert color to hwb | ||
* `value` **[string][133]** color value | ||
* `opt` **[object][135]?** options (optional, default `{}`) | ||
* `opt.customProperty` **[object][135]?** custom properties, pair of `--` prefixed property name and value, e.g. `customProperty: { '--some-color': '#0000ff' }` | ||
Returns **[Array][137]<[number][134]>** \[h, w, b, a] | ||
### convert.colorToLab(value) | ||
### convert.colorToLab(value, opt) | ||
@@ -114,6 +120,8 @@ convert color to lab | ||
* `value` **[string][133]** color value | ||
* `opt` **[object][135]?** options (optional, default `{}`) | ||
* `opt.customProperty` **[object][135]?** custom properties, pair of `--` prefixed property name and value, e.g. `customProperty: { '--some-color': '#0000ff' }` | ||
Returns **[Array][137]<[number][134]>** \[l, a, b, aa] | ||
### convert.colorToLch(value) | ||
### convert.colorToLch(value, opt) | ||
@@ -125,6 +133,8 @@ convert color to lch | ||
* `value` **[string][133]** color value | ||
* `opt` **[object][135]?** options (optional, default `{}`) | ||
* `opt.customProperty` **[object][135]?** custom properties, pair of `--` prefixed property name and value, e.g. `customProperty: { '--some-color': '#0000ff' }` | ||
Returns **[Array][137]<[number][134]>** \[l, c, h, aa] | ||
### convert.colorToOklab(value) | ||
### convert.colorToOklab(value, opt) | ||
@@ -136,6 +146,8 @@ convert color to oklab | ||
* `value` **[string][133]** color value | ||
* `opt` **[object][135]?** options (optional, default `{}`) | ||
* `opt.customProperty` **[object][135]?** custom properties, pair of `--` prefixed property name and value, e.g. `customProperty: { '--some-color': '#0000ff' }` | ||
Returns **[Array][137]<[number][134]>** \[l, a, b, aa] | ||
### convert.colorToOklch(value) | ||
### convert.colorToOklch(value, opt) | ||
@@ -147,6 +159,8 @@ convert color to oklch | ||
* `value` **[string][133]** color value | ||
* `opt` **[object][135]?** options (optional, default `{}`) | ||
* `opt.customProperty` **[object][135]?** custom properties, pair of `--` prefixed property name and value, e.g. `customProperty: { '--some-color': '#0000ff' }` | ||
Returns **[Array][137]<[number][134]>** \[l, c, h, aa] | ||
### convert.colorToRgb(value) | ||
### convert.colorToRgb(value, opt) | ||
@@ -158,2 +172,4 @@ convert color to rgb | ||
* `value` **[string][133]** color value | ||
* `opt` **[object][135]?** options (optional, default `{}`) | ||
* `opt.customProperty` **[object][135]?** custom properties, pair of `--` prefixed property name and value, e.g. `customProperty: { '--some-color': '#0000ff' }` | ||
@@ -170,2 +186,3 @@ Returns **[Array][137]<[number][134]>** \[r, g, b, a] | ||
* `opt` **[object][135]?** options (optional, default `{}`) | ||
* `opt.customProperty` **[object][135]?** custom properties, pair of `--` prefixed property name and value, e.g. `customProperty: { '--some-color': '#0000ff' }` | ||
* `opt.d50` **[boolean][136]?** xyz in d50 white point | ||
@@ -175,3 +192,3 @@ | ||
### convert.colorToXyzD50(value) | ||
### convert.colorToXyzD50(value, opt) | ||
@@ -183,2 +200,4 @@ convert color to xyz-d50 | ||
* `value` **[string][133]** color value | ||
* `opt` **[object][135]?** options (optional, default `{}`) | ||
* `opt.customProperty` **[object][135]?** custom properties, pair of `--` prefixed property name and value, e.g. `customProperty: { '--some-color': '#0000ff' }` | ||
@@ -185,0 +204,0 @@ Returns **[Array][137]<[number][134]>** \[x, y, z, a] |
@@ -13,4 +13,8 @@ /** | ||
import { getType, isString } from './common.js'; | ||
import { cssVar } from './css-var.js'; | ||
import { resolve } from './resolve.js'; | ||
/* constants */ | ||
import { FUNC_CALC, FUNC_VAR } from './constant.js'; | ||
/* cached results */ | ||
@@ -24,15 +28,35 @@ export const cachedResults = new LRUCache({ | ||
* @param {string} value - color value | ||
* @returns {string} - value | ||
* @param {object} [opt] - options | ||
* @returns {?string} - value | ||
*/ | ||
export const preProcess = value => { | ||
if (value && isString(value)) { | ||
if (/calc/.test(value)) { | ||
value = calc(value); | ||
export const preProcess = (value, opt = {}) => { | ||
if (isString(value)) { | ||
value = value.trim(); | ||
if (!value) { | ||
return null; | ||
} | ||
if (value.startsWith('color-mix')) { | ||
value = resolve(value, { | ||
format: 'computedValue' | ||
}); | ||
} else { | ||
return null; | ||
} | ||
const cacheKey = `{preProcess:${value}}`; | ||
if (cachedResults.has(cacheKey)) { | ||
return cachedResults.get(cacheKey); | ||
} | ||
if (value.includes(FUNC_VAR)) { | ||
value = cssVar(value, opt); | ||
if (!value) { | ||
return null; | ||
} | ||
} | ||
if (value.includes(FUNC_CALC)) { | ||
value = calc(value, opt); | ||
} | ||
if (value.startsWith('color-mix')) { | ||
value = resolve(value, { | ||
format: 'computedValue' | ||
}); | ||
} | ||
if (cacheKey) { | ||
cachedResults.set(cacheKey, value); | ||
} | ||
return value; | ||
@@ -63,7 +87,12 @@ }; | ||
* @param {boolean} [opt.alpha] - return in #rrggbbaa notation | ||
* @returns {string} - #rrggbb|#rrggbbaa | ||
* @returns {?string} - #rrggbb | #rrggbbaa | null | ||
*/ | ||
export const colorToHex = (value, opt = {}) => { | ||
if (isString(value)) { | ||
value = value.toLowerCase().trim(); | ||
value = preProcess(value, opt); | ||
if (value) { | ||
value = value.toLowerCase(); | ||
} else { | ||
return null; | ||
} | ||
} else { | ||
@@ -76,3 +105,2 @@ throw new TypeError(`Expected String but got ${getType(value)}.`); | ||
} | ||
value = preProcess(value); | ||
const { alpha } = opt; | ||
@@ -98,7 +126,13 @@ let hex; | ||
* @param {string} value - color value | ||
* @param {object} [opt] - options | ||
* @returns {Array.<number>} - [h, s, l, a] | ||
*/ | ||
export const colorToHsl = value => { | ||
export const colorToHsl = (value, opt = {}) => { | ||
if (isString(value)) { | ||
value = value.toLowerCase().trim(); | ||
value = preProcess(value, opt); | ||
if (value) { | ||
value = value.toLowerCase(); | ||
} else { | ||
return [0, 0, 0, 0]; | ||
} | ||
} else { | ||
@@ -111,3 +145,2 @@ throw new TypeError(`Expected String but got ${getType(value)}.`); | ||
} | ||
value = preProcess(value); | ||
const hsl = convertColorToHsl(value, { | ||
@@ -123,7 +156,13 @@ format: 'hsl' | ||
* @param {string} value - color value | ||
* @param {object} [opt] - options | ||
* @returns {Array.<number>} - [h, w, b, a] | ||
*/ | ||
export const colorToHwb = value => { | ||
export const colorToHwb = (value, opt = {}) => { | ||
if (isString(value)) { | ||
value = value.toLowerCase().trim(); | ||
value = preProcess(value, opt); | ||
if (value) { | ||
value = value.toLowerCase(); | ||
} else { | ||
return [0, 0, 0, 0]; | ||
} | ||
} else { | ||
@@ -136,3 +175,2 @@ throw new TypeError(`Expected String but got ${getType(value)}.`); | ||
} | ||
value = preProcess(value); | ||
const hwb = convertColorToHwb(value, { | ||
@@ -148,7 +186,13 @@ format: 'hwb' | ||
* @param {string} value - color value | ||
* @param {object} [opt] - options | ||
* @returns {Array.<number>} - [l, a, b, aa] | ||
*/ | ||
export const colorToLab = value => { | ||
export const colorToLab = (value, opt = {}) => { | ||
if (isString(value)) { | ||
value = value.toLowerCase().trim(); | ||
value = preProcess(value, opt); | ||
if (value) { | ||
value = value.toLowerCase(); | ||
} else { | ||
return [0, 0, 0, 0]; | ||
} | ||
} else { | ||
@@ -161,3 +205,2 @@ throw new TypeError(`Expected String but got ${getType(value)}.`); | ||
} | ||
value = preProcess(value); | ||
const lab = convertColorToLab(value); | ||
@@ -171,7 +214,13 @@ cachedResults.set(cacheKey, lab); | ||
* @param {string} value - color value | ||
* @param {object} [opt] - options | ||
* @returns {Array.<number>} - [l, c, h, aa] | ||
*/ | ||
export const colorToLch = value => { | ||
export const colorToLch = (value, opt = {}) => { | ||
if (isString(value)) { | ||
value = value.toLowerCase().trim(); | ||
value = preProcess(value, opt); | ||
if (value) { | ||
value = value.toLowerCase(); | ||
} else { | ||
return [0, 0, 0, 0]; | ||
} | ||
} else { | ||
@@ -184,3 +233,2 @@ throw new TypeError(`Expected String but got ${getType(value)}.`); | ||
} | ||
value = preProcess(value); | ||
const lch = convertColorToLch(value); | ||
@@ -194,7 +242,13 @@ cachedResults.set(cacheKey, lch); | ||
* @param {string} value - color value | ||
* @param {object} [opt] - options | ||
* @returns {Array.<number>} - [l, a, b, aa] | ||
*/ | ||
export const colorToOklab = value => { | ||
export const colorToOklab = (value, opt = {}) => { | ||
if (isString(value)) { | ||
value = value.toLowerCase().trim(); | ||
value = preProcess(value, opt); | ||
if (value) { | ||
value = value.toLowerCase(); | ||
} else { | ||
return [0, 0, 0, 0]; | ||
} | ||
} else { | ||
@@ -207,3 +261,2 @@ throw new TypeError(`Expected String but got ${getType(value)}.`); | ||
} | ||
value = preProcess(value); | ||
const lab = convertColorToOklab(value); | ||
@@ -217,7 +270,13 @@ cachedResults.set(cacheKey, lab); | ||
* @param {string} value - color value | ||
* @param {object} [opt] - options | ||
* @returns {Array.<number>} - [l, c, h, aa] | ||
*/ | ||
export const colorToOklch = value => { | ||
export const colorToOklch = (value, opt = {}) => { | ||
if (isString(value)) { | ||
value = value.toLowerCase().trim(); | ||
value = preProcess(value, opt); | ||
if (value) { | ||
value = value.toLowerCase(); | ||
} else { | ||
return [0, 0, 0, 0]; | ||
} | ||
} else { | ||
@@ -230,3 +289,2 @@ throw new TypeError(`Expected String but got ${getType(value)}.`); | ||
} | ||
value = preProcess(value); | ||
const lch = convertColorToOklch(value); | ||
@@ -240,7 +298,13 @@ cachedResults.set(cacheKey, lch); | ||
* @param {string} value - color value | ||
* @param {object} [opt] - options | ||
* @returns {Array.<number>} - [r, g, b, a] | ||
*/ | ||
export const colorToRgb = value => { | ||
export const colorToRgb = (value, opt = {}) => { | ||
if (isString(value)) { | ||
value = value.toLowerCase().trim(); | ||
value = preProcess(value, opt); | ||
if (value) { | ||
value = value.toLowerCase(); | ||
} else { | ||
return [0, 0, 0, 0]; | ||
} | ||
} else { | ||
@@ -253,3 +317,2 @@ throw new TypeError(`Expected String but got ${getType(value)}.`); | ||
} | ||
value = preProcess(value); | ||
const rgb = convertColorToRgb(value); | ||
@@ -269,3 +332,8 @@ cachedResults.set(cacheKey, rgb); | ||
if (isString(value)) { | ||
value = value.toLowerCase().trim(); | ||
value = preProcess(value, opt); | ||
if (value) { | ||
value = value.toLowerCase(); | ||
} else { | ||
return [0, 0, 0, 0]; | ||
} | ||
} else { | ||
@@ -278,3 +346,2 @@ throw new TypeError(`Expected String but got ${getType(value)}.`); | ||
} | ||
value = preProcess(value); | ||
let xyz; | ||
@@ -293,5 +360,9 @@ if (value.startsWith('color(')) { | ||
* @param {string} value - color value | ||
* @param {object} [opt] - options | ||
* @returns {Array.<number>} - [x, y, z, a] | ||
*/ | ||
export const colorToXyzD50 = value => colorToXyz(value, { d50: true }); | ||
export const colorToXyzD50 = (value, opt = {}) => { | ||
opt.d50 = true; | ||
return colorToXyz(value, opt); | ||
}; | ||
@@ -298,0 +369,0 @@ /* convert */ |
@@ -11,3 +11,7 @@ /** | ||
import { getType, isString } from './common.js'; | ||
import { cssVar } from './css-var.js'; | ||
/* constants */ | ||
import { FUNC_CALC, FUNC_VAR } from './constant.js'; | ||
/* cached results */ | ||
@@ -43,3 +47,3 @@ export const cachedResults = new LRUCache({ | ||
if (isString(color)) { | ||
color = color.toLowerCase().trim(); | ||
color = color.trim(); | ||
} else { | ||
@@ -54,5 +58,23 @@ throw new TypeError(`Expected String but got ${getType(color)}.`); | ||
let cs, r, g, b, a; | ||
if (/calc/.test(color)) { | ||
color = calc(color); | ||
if (color.includes(FUNC_VAR)) { | ||
if (format === 'specifiedValue') { | ||
return color; | ||
} | ||
color = cssVar(color, opt); | ||
if (!color) { | ||
switch (format) { | ||
case 'hex': | ||
case 'hexAlpha': { | ||
return null; | ||
} | ||
default: { | ||
return 'rgba(0, 0, 0, 0)'; | ||
} | ||
} | ||
} | ||
} | ||
color = color.toLowerCase(); | ||
if (color.includes(FUNC_CALC)) { | ||
color = calc(color, opt); | ||
} | ||
if (color === 'transparent') { | ||
@@ -159,3 +181,3 @@ switch (format) { | ||
}); | ||
} else { | ||
} else if (color) { | ||
[cs, r, g, b, a] = resolveColorValue(color, { | ||
@@ -162,0 +184,0 @@ format |
@@ -0,1 +1,151 @@ | ||
export namespace NAMED_COLORS { | ||
let aliceblue: number[]; | ||
let antiquewhite: number[]; | ||
let aqua: number[]; | ||
let aquamarine: number[]; | ||
let azure: number[]; | ||
let beige: number[]; | ||
let bisque: number[]; | ||
let black: number[]; | ||
let blanchedalmond: number[]; | ||
let blue: number[]; | ||
let blueviolet: number[]; | ||
let brown: number[]; | ||
let burlywood: number[]; | ||
let cadetblue: number[]; | ||
let chartreuse: number[]; | ||
let chocolate: number[]; | ||
let coral: number[]; | ||
let cornflowerblue: number[]; | ||
let cornsilk: number[]; | ||
let crimson: number[]; | ||
let cyan: number[]; | ||
let darkblue: number[]; | ||
let darkcyan: number[]; | ||
let darkgoldenrod: number[]; | ||
let darkgray: number[]; | ||
let darkgreen: number[]; | ||
let darkgrey: number[]; | ||
let darkkhaki: number[]; | ||
let darkmagenta: number[]; | ||
let darkolivegreen: number[]; | ||
let darkorange: number[]; | ||
let darkorchid: number[]; | ||
let darkred: number[]; | ||
let darksalmon: number[]; | ||
let darkseagreen: number[]; | ||
let darkslateblue: number[]; | ||
let darkslategray: number[]; | ||
let darkslategrey: number[]; | ||
let darkturquoise: number[]; | ||
let darkviolet: number[]; | ||
let deeppink: number[]; | ||
let deepskyblue: number[]; | ||
let dimgray: number[]; | ||
let dimgrey: number[]; | ||
let dodgerblue: number[]; | ||
let firebrick: number[]; | ||
let floralwhite: number[]; | ||
let forestgreen: number[]; | ||
let fuchsia: number[]; | ||
let gainsboro: number[]; | ||
let ghostwhite: number[]; | ||
let gold: number[]; | ||
let goldenrod: number[]; | ||
let gray: number[]; | ||
let green: number[]; | ||
let greenyellow: number[]; | ||
let grey: number[]; | ||
let honeydew: number[]; | ||
let hotpink: number[]; | ||
let indianred: number[]; | ||
let indigo: number[]; | ||
let ivory: number[]; | ||
let khaki: number[]; | ||
let lavender: number[]; | ||
let lavenderblush: number[]; | ||
let lawngreen: number[]; | ||
let lemonchiffon: number[]; | ||
let lightblue: number[]; | ||
let lightcoral: number[]; | ||
let lightcyan: number[]; | ||
let lightgoldenrodyellow: number[]; | ||
let lightgray: number[]; | ||
let lightgreen: number[]; | ||
let lightgrey: number[]; | ||
let lightpink: number[]; | ||
let lightsalmon: number[]; | ||
let lightseagreen: number[]; | ||
let lightskyblue: number[]; | ||
let lightslategray: number[]; | ||
let lightslategrey: number[]; | ||
let lightsteelblue: number[]; | ||
let lightyellow: number[]; | ||
let lime: number[]; | ||
let limegreen: number[]; | ||
let linen: number[]; | ||
let magenta: number[]; | ||
let maroon: number[]; | ||
let mediumaquamarine: number[]; | ||
let mediumblue: number[]; | ||
let mediumorchid: number[]; | ||
let mediumpurple: number[]; | ||
let mediumseagreen: number[]; | ||
let mediumslateblue: number[]; | ||
let mediumspringgreen: number[]; | ||
let mediumturquoise: number[]; | ||
let mediumvioletred: number[]; | ||
let midnightblue: number[]; | ||
let mintcream: number[]; | ||
let mistyrose: number[]; | ||
let moccasin: number[]; | ||
let navajowhite: number[]; | ||
let navy: number[]; | ||
let oldlace: number[]; | ||
let olive: number[]; | ||
let olivedrab: number[]; | ||
let orange: number[]; | ||
let orangered: number[]; | ||
let orchid: number[]; | ||
let palegoldenrod: number[]; | ||
let palegreen: number[]; | ||
let paleturquoise: number[]; | ||
let palevioletred: number[]; | ||
let papayawhip: number[]; | ||
let peachpuff: number[]; | ||
let peru: number[]; | ||
let pink: number[]; | ||
let plum: number[]; | ||
let powderblue: number[]; | ||
let purple: number[]; | ||
let rebeccapurple: number[]; | ||
let red: number[]; | ||
let rosybrown: number[]; | ||
let royalblue: number[]; | ||
let saddlebrown: number[]; | ||
let salmon: number[]; | ||
let sandybrown: number[]; | ||
let seagreen: number[]; | ||
let seashell: number[]; | ||
let sienna: number[]; | ||
let silver: number[]; | ||
let skyblue: number[]; | ||
let slateblue: number[]; | ||
let slategray: number[]; | ||
let slategrey: number[]; | ||
let snow: number[]; | ||
let springgreen: number[]; | ||
let steelblue: number[]; | ||
let tan: number[]; | ||
let teal: number[]; | ||
let thistle: number[]; | ||
let tomato: number[]; | ||
let turquoise: number[]; | ||
let violet: number[]; | ||
let wheat: number[]; | ||
let white: number[]; | ||
let whitesmoke: number[]; | ||
let yellow: number[]; | ||
let yellowgreen: number[]; | ||
} | ||
export function validateColorComponents(arr: any[], opt?: { | ||
@@ -2,0 +152,0 @@ alpha?: boolean; |
export const cachedResults: LRUCache<{}, {}, unknown>; | ||
export function preProcess(value: string): string; | ||
export function preProcess(value: string, opt?: object): string | null; | ||
export function numberToHex(value: number): string; | ||
export function colorToHex(value: string, opt?: { | ||
alpha?: boolean; | ||
}): string; | ||
export function colorToHsl(value: string): Array<number>; | ||
export function colorToHwb(value: string): Array<number>; | ||
export function colorToLab(value: string): Array<number>; | ||
export function colorToLch(value: string): Array<number>; | ||
export function colorToOklab(value: string): Array<number>; | ||
export function colorToOklch(value: string): Array<number>; | ||
export function colorToRgb(value: string): Array<number>; | ||
}): string | null; | ||
export function colorToHsl(value: string, opt?: object): Array<number>; | ||
export function colorToHwb(value: string, opt?: object): Array<number>; | ||
export function colorToLab(value: string, opt?: object): Array<number>; | ||
export function colorToLch(value: string, opt?: object): Array<number>; | ||
export function colorToOklab(value: string, opt?: object): Array<number>; | ||
export function colorToOklch(value: string, opt?: object): Array<number>; | ||
export function colorToRgb(value: string, opt?: object): Array<number>; | ||
export function colorToXyz(value: string, opt?: { | ||
d50?: boolean; | ||
}): Array<number>; | ||
export function colorToXyzD50(value: string): Array<number>; | ||
export function colorToXyzD50(value: string, opt?: object): Array<number>; | ||
export namespace convert { | ||
@@ -19,0 +19,0 @@ export { colorToHex }; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
1325841
21
5583
213
3