Skip to content

Commit c698d73

Browse files
jean343jean343
authored
fix(hex8): Remove to hex8 string (#38)
* Use rgba for IE11 * Use toRgbString for saturate, desaturate, lighten and darken * Add alpha tests * Api and mix alpha
1 parent 0b8285f commit c698d73

File tree

5 files changed

+132
-78
lines changed

5 files changed

+132
-78
lines changed

‎src/functions/color.js‎

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,19 @@ import VariableNode from "../tree/VariableNode";
22
import {convertNode as c} from "../tree/convert";
33

44
const parse = color => {
5-
return new VariableNode(`require("tinycolor2")(${c(color)}).toHex8String()`);
5+
return new VariableNode(`require("tinycolor2")(${c(color)}).toRgbString()`);
66
};
77

88
export const rgb = (r, g, b) => {
99
return rgba(r, g, b, 1);
1010
};
1111
export const rgba = (r, g, b, a) => {
1212
if (g) {
13-
return new VariableNode(`require("tinycolor2")({ r: ${c(r)}, g: ${c(g)}, b: ${c(b)}, a: ${c(a)} }).toHex8String()`);
13+
if (a == 1) {
14+
return new VariableNode(`require("tinycolor2")({ r: ${c(r)}, g: ${c(g)}, b: ${c(b)} }).toHexString()`);
15+
} else {
16+
return new VariableNode(`require("tinycolor2")({ r: ${c(r)}, g: ${c(g)}, b: ${c(b)}, a: ${c(a)} }).toRgbString()`);
17+
}
1418
} else {
1519
return parse(r);
1620
}
@@ -20,7 +24,11 @@ export const hsl = (h, s, l) => {
2024
};
2125
export const hsla = (h, s, l, a) => {
2226
if (s) {
23-
return new VariableNode(`require("tinycolor2")({ h: ${c(h)}, s: ${c(s)}, l: ${c(l)}, a: ${c(a)} }).toHex8String()`);
27+
if (a == 1) {
28+
return new VariableNode(`require("tinycolor2")({ h: ${c(h)}, s: ${c(s)}, l: ${c(l)} }).toHexString()`);
29+
} else {
30+
return new VariableNode(`require("tinycolor2")({ h: ${c(h)}, s: ${c(s)}, l: ${c(l)}, a: ${c(a)} }).toRgbString()`);
31+
}
2432
} else {
2533
return parse(h);
2634
}
@@ -30,7 +38,11 @@ export const hsv = (h, s, v) => {
3038
};
3139
export const hsva = (h, s, v, a) => {
3240
if (s) {
33-
return new VariableNode(`require("tinycolor2")({ h: ${c(h)}, s: ${c(s)}, v: ${c(v)}, a: ${c(a)} }).toHex8String()`);
41+
if (a == 1) {
42+
return new VariableNode(`require("tinycolor2")({ h: ${c(h)}, s: ${c(s)}, v: ${c(v)} }).toHexString()`);
43+
} else {
44+
return new VariableNode(`require("tinycolor2")({ h: ${c(h)}, s: ${c(s)}, v: ${c(v)}, a: ${c(a)} }).toRgbString()`);
45+
}
3446
} else {
3547
return parse(h);
3648
}
@@ -78,17 +90,17 @@ export const luminance = color => {
7890
};
7991

8092
export const saturate = (color, amount, method) => {
81-
return new VariableNode(`require('tinycolor2')(${c(color)}).saturate(parseFloat(${c(amount)})).toHex8String()`);
93+
return new VariableNode(`require('tinycolor2')(${c(color)}).saturate(parseFloat(${c(amount)})).toRgbString()`);
8294
};
8395
export const desaturate = (color, amount, method) => {
84-
return new VariableNode(`require('tinycolor2')(${c(color)}).desaturate(parseFloat(${c(amount)})).toHex8String()`);
96+
return new VariableNode(`require('tinycolor2')(${c(color)}).desaturate(parseFloat(${c(amount)})).toRgbString()`);
8597
};
8698

8799
export const lighten = (color, amount, method) => {
88-
return new VariableNode(`require('tinycolor2')(${c(color)}).lighten(parseFloat(${c(amount)})).toHex8String()`);
100+
return new VariableNode(`require('tinycolor2')(${c(color)}).lighten(parseFloat(${c(amount)})).toRgbString()`);
89101
};
90102
export const darken = (color, amount, method) => {
91-
return new VariableNode(`require('tinycolor2')(${c(color)}).darken(parseFloat(${c(amount)})).toHex8String()`);
103+
return new VariableNode(`require('tinycolor2')(${c(color)}).darken(parseFloat(${c(amount)})).toRgbString()`);
92104
};
93105

94106
export const fadein = (color, amount, method) => {
@@ -121,10 +133,10 @@ export const fade = (color, amount) => {
121133
return new VariableNode(`require("tinycolor2")(${c(color)}).setAlpha(parseFloat(${c(amount)}) / 100).toRgbString()`);
122134
};
123135
export const spin = (color, amount) => {
124-
return new VariableNode(`require("tinycolor2")(${c(color)}).spin(parseFloat(${c(amount)})).toHex8String()`);
136+
return new VariableNode(`require("tinycolor2")(${c(color)}).spin(parseFloat(${c(amount)})).toRgbString()`);
125137
};
126138
export const mix = (color1, color2, weight) => {
127-
return new VariableNode(`require("tinycolor2").mix(${c(color1)}, ${c(color2)}, parseFloat(${c(weight)})).toHex8String()`);
139+
return new VariableNode(`require("tinycolor2").mix(${c(color1)}, ${c(color2)}, parseFloat(${c(weight)})).toRgbString()`);
128140
};
129141
export const greyscale = color => {
130142
return desaturate(color, 100);
@@ -159,7 +171,7 @@ export const contrast = (color, dark, light, threshold) => {
159171
};
160172

161173
export const argb = color => {
162-
return new VariableNode(`${c(rgba(color))}.replace(/#(\\w{6})(\\w{2})/, "#$2$1")`);
174+
return new VariableNode(`require("tinycolor2")(${c(color)}).toHex8String().replace(/#(\\w{6})(\\w{2})/, "#$2$1")`);
163175
};
164176
// color
165177
export const tint = (color, weight) => {

‎test/Component/Color.test.js‎

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -205,16 +205,24 @@ test('Increase the saturation of a color in the HSL color space by an absolute a
205205
saturate: saturate(hsl(90, 80%, 50%), 20%);
206206
saturate: saturate(@color, 20%);
207207
saturate: saturate(@color, @p);
208+
209+
saturatea: saturate(hsla(90, 80%, 50%, 0.5), 20%);
210+
saturatea: saturate(@colora, 20%);
211+
saturatea: saturate(@colora, @p);
208212
`;
209-
expect(renderer.create(<Div color="hsl(90, 80%, 50%)" p="20%"/>).toJSON()).toMatchSnapshot();
213+
expect(renderer.create(<Div color="hsl(90, 80%, 50%)" colora="hsla(90, 80%, 50%, 0.5)" p="20%"/>).toJSON()).toMatchSnapshot();
210214
});
211215
test('Decrease the saturation of a color in the HSL color space by an absolute amount.', () => {
212216
const Div = styled.div`
213217
desaturate: desaturate(hsl(90, 80%, 50%), 20%);
214218
desaturate: desaturate(@color, 20%);
215219
desaturate: desaturate(@color, @p);
220+
221+
desaturatea: desaturate(hsla(90, 80%, 50%, 0.5), 20%);
222+
desaturatea: desaturate(@colora, 20%);
223+
desaturatea: desaturate(@colora, @p);
216224
`;
217-
expect(renderer.create(<Div color="hsl(90, 80%, 50%)" p="20%"/>).toJSON()).toMatchSnapshot();
225+
expect(renderer.create(<Div color="hsl(90, 80%, 50%)" colora="hsla(90, 80%, 50%, 0.5)" p="20%"/>).toJSON()).toMatchSnapshot();
218226
});
219227

220228

@@ -223,16 +231,24 @@ test('Increase the lightness of a color in the HSL color space by an absolute am
223231
lighten: lighten(hsl(90, 80%, 50%), 20%);
224232
lighten: lighten(@color, 20%);
225233
lighten: lighten(@color, @p);
234+
235+
lightena: lighten(hsla(90, 80%, 50%, 0.5), 20%);
236+
lightena: lighten(@colora, 20%);
237+
lightena: lighten(@colora, @p);
226238
`;
227-
expect(renderer.create(<Div color="hsl(90, 80%, 50%)" p="20%"/>).toJSON()).toMatchSnapshot();
239+
expect(renderer.create(<Div color="hsl(90, 80%, 50%)" colora="hsla(90, 80%, 50%, 0.5)" p="20%"/>).toJSON()).toMatchSnapshot();
228240
});
229241
test('Decrease the lightness of a color in the HSL color space by an absolute amount.', () => {
230242
const Div = styled.div`
231243
darken: darken(hsl(90, 80%, 50%), 20%);
232244
darken: darken(@color, 20%);
233245
darken: darken(@color, @p);
246+
247+
darkena: darken(hsla(90, 80%, 50%, 0.5), 20%);
248+
darkena: darken(@colora, 20%);
249+
darkena: darken(@colora, @p);
234250
`;
235-
expect(renderer.create(<Div color="hsl(90, 80%, 50%)" p="20%"/>).toJSON()).toMatchSnapshot();
251+
expect(renderer.create(<Div color="hsl(90, 80%, 50%)" colora="hsla(90, 80%, 50%, 0.5)" p="20%"/>).toJSON()).toMatchSnapshot();
236252
});
237253

238254

@@ -293,8 +309,12 @@ test('Rotate the hue angle of a color in either direction.', () => {
293309
spin: spin(@color, @v);
294310
295311
spin: spin(@color, @zero);
312+
313+
spina: spin(hsla(10, 90%, 50%, 0.5), @v2);
314+
spina: spin(hsla(10, 90%, 50%, 0.5), -@v2);
315+
spina: spin(@colora, @v);
296316
`;
297-
expect(renderer.create(<Div color="hsl(10, 90%, 50%)" v="30" v2="30%" zero={0}/>).toJSON()).toMatchSnapshot();
317+
expect(renderer.create(<Div color="hsl(10, 90%, 50%)" colora="hsla(10, 90%, 50%, 0.5)" v="30" v2="30%" zero={0}/>).toJSON()).toMatchSnapshot();
298318
});
299319

300320

@@ -303,8 +323,12 @@ test('Mix two colors together in variable proportion. Opacity is included in the
303323
mix: mix(#ff0000, #0000ff, 50%);
304324
mix: mix(@a, @b, @p);
305325
mix: mix(rgba(100, 0, 0, 1.0), rgba(0, 100, 0, 1.0));
326+
327+
mixa: mix(#ff000080, #0000ff80, 50%);
328+
mixa: mix(@aa, @ba, @p);
329+
mixa: mix(rgba(100, 0, 0, 0.5), rgba(0, 100, 0, 0.5));
306330
`;
307-
expect(renderer.create(<Div a="#ff0000" b="#0000ff" p="50%"/>).toJSON()).toMatchSnapshot();
331+
expect(renderer.create(<Div a="#ff0000" b="#0000ff" aa="#ff000080" ba="#0000ff80" p="50%"/>).toJSON()).toMatchSnapshot();
308332
});
309333
test('Mix color with white in variable proportion.', () => {
310334
const Div = styled.div`

0 commit comments

Comments
 (0)