Skip to content

Commit 462e488

Browse files
add gradient schema
1 parent 5beb4d5 commit 462e488

File tree

4 files changed

+98
-0
lines changed

4 files changed

+98
-0
lines changed

src/schemas/designToken.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {fontFamilyToken} from './fontFamilyToken.js'
1212
import {shadowToken} from './shadowToken.js'
1313
import {durationToken} from './durationToken.js'
1414
import {cubicBezierToken} from './cubicBezierToken.js'
15+
import {gradientToken} from './gradientToken.js'
1516

1617
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
1718
// @ts-ignore: TODO: fix this
@@ -27,6 +28,7 @@ export const designToken = z.record(
2728
borderToken,
2829
fontFamilyToken,
2930
fontWeightToken,
31+
gradientToken,
3032
typographyToken,
3133
viewportRangeToken,
3234
numberToken,

src/schemas/gradientToken.test.ts

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import {gradientToken} from './gradientToken.js'
2+
3+
describe('Schema: gradientToken', () => {
4+
it('parses valid value', () => {
5+
const validGradientTokens = [
6+
{
7+
$value: [
8+
{
9+
color: '#000000',
10+
position: 0,
11+
},
12+
{
13+
color: '#ffffff',
14+
position: 1,
15+
},
16+
],
17+
$type: 'gradient',
18+
},
19+
{
20+
$value: [
21+
{
22+
color: '#000000',
23+
position: 0,
24+
},
25+
{
26+
color: '#555',
27+
position: 0.3,
28+
},
29+
{
30+
color: '#ffffff',
31+
position: 0.5,
32+
},
33+
],
34+
$type: 'gradient',
35+
},
36+
]
37+
38+
for (const gradient of validGradientTokens) {
39+
expect(gradientToken.safeParse(gradient).success).toStrictEqual(true)
40+
}
41+
})
42+
43+
it('fails on invalid values', () => {
44+
const invalidGradientTokens = [
45+
{
46+
$value: [
47+
{
48+
color: '#000000',
49+
position: 0,
50+
},
51+
],
52+
$type: 'gradient',
53+
},
54+
{
55+
$value: [
56+
{
57+
color: '#000000',
58+
position: 0,
59+
},
60+
{
61+
color: '#ffffff',
62+
position: 2,
63+
},
64+
],
65+
$type: 'gradient',
66+
},
67+
]
68+
69+
for (const gradient of invalidGradientTokens) {
70+
expect(gradientToken.safeParse(gradient).success).toStrictEqual(false)
71+
}
72+
})
73+
})

src/schemas/gradientToken.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import {z} from 'zod'
2+
import {baseToken} from './baseToken.js'
3+
import {referenceValue} from './referenceValue.js'
4+
import {tokenType} from './tokenType.js'
5+
import {colorHexValue} from './colorHexValue.js'
6+
7+
export const gradientToken = baseToken
8+
.extend({
9+
$value: z.union([
10+
z
11+
.array(
12+
z.object({
13+
color: z.union([colorHexValue, referenceValue]),
14+
position: z.number().min(0).max(1),
15+
}),
16+
)
17+
.min(2),
18+
referenceValue,
19+
]),
20+
$type: tokenType('gradient'),
21+
})
22+
.strict()

src/schemas/validTokenType.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const validTypes = [
1111
'shadow',
1212
'fontFamily',
1313
'fontWeight',
14+
'gradient',
1415
'number',
1516
'string',
1617
'custom-viewportRange',

0 commit comments

Comments
 (0)