agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2024-09-19 16:59:02 +00:00
Code Issues Releases Activity

Support function colors in color parser in utils

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2022-02-05 12:59:44 +02:00
parent d928002976
commit 94580099d5
5 changed files with 96 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/utils/package.json
View File

@ -2,7 +2,7 @@
"name": "@iconify/utils",
"description": "Common functions for working with Iconify icon sets used by various packages.",
"author": "Vjacheslav Trushkin",
"version": "1.0.21",
"version": "1.0.22",
"license": "MIT",
"bugs": "https://github.com/iconify/iconify/issues",
"homepage": "https://iconify.design/",

36
packages/utils/spec/colors/colorsSpec.mjs
View File

@ -98,6 +98,15 @@ describe('Colors', () => {
alpha: 0,
})
).toBe('transparent');
// Function
expect(
colorToString({
type: 'function',
func: 'var',
value: '--foo',
})
).toBe('var(--foo)');
});
it('Hexadecimal', () => {
@ -444,7 +453,7 @@ describe('Colors', () => {
expect(stringToColor('lch(10%, 20%, 30)')).toBeNull();
expect(stringToColor('lch(10, 20, 30)')).toBeNull();
// Simple llchb
// Simple lch
expect(stringToColor('lch(10%, 20, 30)')).toEqual({
type: 'lch',
l: 10,
@ -488,7 +497,32 @@ describe('Colors', () => {
).toBe('lch(10.4% 20.7 30.1 / 0.845)');
});
it('Functions', () => {
// Missing ')'
expect(stringToColor('var(--foo')).toBeNull();
// Valid functions
expect(stringToColor('var(--foo)')).toEqual({
type: 'function',
func: 'var',
value: '--foo',
});
expect(stringToColor('url(#a)')).toEqual({
type: 'function',
func: 'url',
value: '#a',
});
});
it('Compare colors', () => {
// Identical items
expect(
compareColors(
stringToColor('var(--foo)'),
stringToColor('var(--foo)')
)
).toBe(true);
// Black colors
expect(
compareColors(

19
packages/utils/src/colors/index.ts
View File

@ -86,11 +86,24 @@ function fromFunction(value: string): Color | null {
break;
}
default: {
case 'rgb':
case 'rgba':
case 'hsl':
case 'hsla': {
values = content.trim().split(/[\s,]+/);
if (values.length === 4) {
alphaStr = (values.pop() as string).trim();
}
break;
}
default: {
// Unsupported function
return {
type: 'function',
func,
value: content,
};
}
}
@ -446,5 +459,9 @@ export function colorToString(color: Color): string {
}
return 'lch(' + list.join(' ') + ')';
}
case 'function': {
return color.func + '(' + color.value + ')';
}
}
}

7
packages/utils/src/colors/types.ts
View File

@ -30,6 +30,12 @@ export interface LCHColor {
alpha: number;
}
export interface FunctionColor {
type: 'function';
func: string;
value: string;
}
export interface TransparentColor {
type: 'transparent';
}
@ -47,6 +53,7 @@ export type Color =
| HSLColor
| LABColor
| LCHColor
| FunctionColor
| TransparentColor
| NoColor
| CurrentColor;

36
packages/utils/tests/colors-test.ts
View File

@ -95,6 +95,15 @@ describe('Colors', () => {
alpha: 0,
})
).toBe('transparent');
// Function
expect(
colorToString({
type: 'function',
func: 'var',
value: '--foo',
})
).toBe('var(--foo)');
});
test('Hexadecimal', () => {
@ -450,7 +459,7 @@ describe('Colors', () => {
expect(stringToColor('lch(10%, 20%, 30)')).toBeNull();
expect(stringToColor('lch(10, 20, 30)')).toBeNull();
// Simple llchb
// Simple lch
expect(stringToColor('lch(10%, 20, 30)')).toEqual({
type: 'lch',
l: 10,
@ -494,7 +503,32 @@ describe('Colors', () => {
).toBe('lch(10.4% 20.7 30.1 / 0.845)');
});
test('Functions', () => {
// Missing ')'
expect(stringToColor('var(--foo')).toBeNull();
// Valid functions
expect(stringToColor('var(--foo)')).toEqual({
type: 'function',
func: 'var',
value: '--foo',
});
expect(stringToColor('url(#a)')).toEqual({
type: 'function',
func: 'url',
value: '#a',
});
});
test('Compare colors', () => {
// Identical items
expect(
compareColors(
stringToColor('var(--foo)')!,
stringToColor('var(--foo)')!
)
).toBe(true);
// Black colors
expect(
compareColors(