Skip to content

Commit 2b158cb

Browse files
author
Dario Soller
committed
tests: add a view more tests for alpha, lighten and darken color modifier value calculations
1 parent 4cdd9b8 commit 2b158cb

File tree

3 files changed

+158
-2
lines changed

3 files changed

+158
-2
lines changed

‎test/integration/color-modifier-references.test.ts

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,29 @@ describe('color modifier references', () => {
8888

8989
it('supports color with referenced base color, referenced mix color, and expression-based mix value', async () => {
9090
const file = await promises.readFile(outputFilePath, 'utf-8');
91-
const content = excerpt(file, { start: new RegExp('--sdColor6: .*;'), end: '}' });
91+
const content = excerpt(file, { start: new RegExp('--sdColor6: .*;'), end: '--sdColor8' });
9292
const expectedOutput = `--sdColor7: #3b64b3;`;
9393
expect(content).toBe(expectedOutput);
9494
});
95+
96+
it('supports color with referenced base color, expression-based alpha value', async () => {
97+
const file = await promises.readFile(outputFilePath, 'utf-8');
98+
const content = excerpt(file, { start: new RegExp('--sdColor7: .*;'), end: '--sdColor9' });
99+
const expectedOutput = `--sdColor8: #202d3bbd;`;
100+
expect(content).toBe(expectedOutput);
101+
});
102+
103+
it('supports color with referenced base color, expression-based lighten value', async () => {
104+
const file = await promises.readFile(outputFilePath, 'utf-8');
105+
const content = excerpt(file, { start: new RegExp('--sdColor8: .*;'), end: '--sdColor10' });
106+
const expectedOutput = `--sdColor9: #c5c8cc;`;
107+
expect(content).toBe(expectedOutput);
108+
});
109+
110+
it('supports color modifier with expression-based darken value', async () => {
111+
const file = await promises.readFile(outputFilePath, 'utf-8');
112+
const content = excerpt(file, { start: new RegExp('--sdColor9: .*;'), end: '}' });
113+
const expectedOutput = `--sdColor10: #424242;`;
114+
expect(content).toBe(expectedOutput);
115+
});
95116
});

‎test/integration/tokens/color-modifier-references.tokens.json

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,5 +124,47 @@
124124
}
125125
}
126126
}
127+
},
128+
"color8": {
129+
"value": "{baseColor}",
130+
"type": "color",
131+
"$extensions": {
132+
"studio.tokens": {
133+
"modify": {
134+
"type": "alpha",
135+
"value": "({treshhold} + 6 * {increment})",
136+
"space": "srgb",
137+
"format": "hex"
138+
}
139+
}
140+
}
141+
},
142+
"color9": {
143+
"value": "{baseColor}",
144+
"type": "color",
145+
"$extensions": {
146+
"studio.tokens": {
147+
"modify": {
148+
"type": "lighten",
149+
"value": "({treshhold} + 6 * {increment})",
150+
"space": "srgb",
151+
"format": "hex"
152+
}
153+
}
154+
}
155+
},
156+
"color10": {
157+
"value": "#FFFFFF",
158+
"type": "color",
159+
"$extensions": {
160+
"studio.tokens": {
161+
"modify": {
162+
"type": "darken",
163+
"value": "({treshhold} + 6 * {increment})",
164+
"space": "srgb",
165+
"format": "hex"
166+
}
167+
}
168+
}
127169
}
128170
}

‎test/spec/color-modifiers/transformColorModifiers.spec.ts

Lines changed: 94 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,38 @@ describe('transform color modifiers', () => {
5050
// without space, return original
5151
expect(transformColorModifiers(token(''))).to.equal('#C14242');
5252
});
53+
54+
it('supports lighten color modifiers in all 4 spaces with value calculation', () => {
55+
const token = (space: ColorSpaceTypes | '') => ({
56+
value: '#C14242',
57+
type: 'color',
58+
$extensions: {
59+
'studio.tokens': {
60+
modify: {
61+
type: 'lighten',
62+
value: '0.5 - 0.3',
63+
space,
64+
},
65+
},
66+
},
67+
});
68+
69+
// lighten faint red to more light red
70+
expect(transformColorModifiers(token(ColorSpaceTypes.HSL))).to.equal(
71+
'hsl(0 50.598% 60.627%)',
72+
);
73+
expect(transformColorModifiers(token(ColorSpaceTypes.LCH))).to.equal(
74+
'lch(57.685 47.48 29.704)',
75+
);
76+
expect(transformColorModifiers(token(ColorSpaceTypes.P3))).to.equal(
77+
'color(display-p3 0.76016 0.43532 0.42213)',
78+
);
79+
expect(transformColorModifiers(token(ColorSpaceTypes.SRGB))).to.equal(
80+
'rgb(80.549% 40.706% 40.706%)',
81+
);
82+
// without space, return original
83+
expect(transformColorModifiers(token(''))).to.equal('#C14242');
84+
});
5385
});
5486

5587
describe('darken', () => {
@@ -84,6 +116,38 @@ describe('transform color modifiers', () => {
84116
// without space, return original
85117
expect(transformColorModifiers(token(''))).to.equal('#C14242');
86118
});
119+
120+
it('supports darken color modifiers in all 4 spaces with value calculation', () => {
121+
const token = (space: ColorSpaceTypes | '') => ({
122+
value: '#C14242',
123+
type: 'color',
124+
$extensions: {
125+
'studio.tokens': {
126+
modify: {
127+
type: 'darken',
128+
value: '0.5 - 0.3',
129+
space,
130+
},
131+
},
132+
},
133+
});
134+
135+
// darken faint red to more darkened red
136+
expect(transformColorModifiers(token(ColorSpaceTypes.HSL))).to.equal(
137+
'hsl(0 50.598% 40.627%)',
138+
);
139+
expect(transformColorModifiers(token(ColorSpaceTypes.LCH))).to.equal(
140+
'lch(37.685 47.48 29.704)',
141+
);
142+
expect(transformColorModifiers(token(ColorSpaceTypes.P3))).to.equal(
143+
'color(display-p3 0.56016 0.23532 0.22213)',
144+
);
145+
expect(transformColorModifiers(token(ColorSpaceTypes.SRGB))).to.equal(
146+
'rgb(60.549% 20.706% 20.706%)',
147+
);
148+
// without space, return original
149+
expect(transformColorModifiers(token(''))).to.equal('#C14242');
150+
});
87151
});
88152

89153
describe('mix', () => {
@@ -114,7 +178,7 @@ describe('transform color modifiers', () => {
114178
expect(transformColorModifiers(token(''))).to.equal('#000000');
115179
});
116180

117-
it('supports mix modifier value calculations', () => {
181+
it('supports mix color modifiers in all 4 spaces with value calculation', () => {
118182
const token = (space: ColorSpaceTypes | '', format?) => ({
119183
value: '#FFFFFF',
120184
type: 'color',
@@ -177,6 +241,35 @@ describe('transform color modifiers', () => {
177241
'rgb(75.686% 25.882% 25.882% / 0.2)',
178242
);
179243
});
244+
245+
it('supports transparentize color modifiers in all 4 spaces with value calculation', () => {
246+
const token = (space: ColorSpaceTypes | '') => ({
247+
value: '#C14242',
248+
type: 'color',
249+
$extensions: {
250+
'studio.tokens': {
251+
modify: {
252+
type: 'alpha',
253+
value: '0.5 - 0.3',
254+
space,
255+
},
256+
},
257+
},
258+
});
259+
260+
expect(transformColorModifiers(token(ColorSpaceTypes.HSL))).to.equal(
261+
'hsl(0 50.598% 50.784% / 0.2)',
262+
);
263+
expect(transformColorModifiers(token(ColorSpaceTypes.LCH))).to.equal(
264+
'lch(47.107 59.35 29.704 / 0.2)',
265+
);
266+
expect(transformColorModifiers(token(ColorSpaceTypes.P3))).to.equal(
267+
'color(display-p3 0.7002 0.29415 0.27766 / 0.2)',
268+
);
269+
expect(transformColorModifiers(token(ColorSpaceTypes.SRGB))).to.equal(
270+
'rgb(75.686% 25.882% 25.882% / 0.2)',
271+
);
272+
});
180273
});
181274

182275
it('returns the original color if the modifier type is invalid', () => {

0 commit comments

Comments
 (0)