add gradient schema

Author: lukasoppermann

src/schemas/designToken.ts

@@ -12,6 +12,7 @@ import {fontFamilyToken} from './fontFamilyToken.js'
 import {shadowToken} from './shadowToken.js'
 import {durationToken} from './durationToken.js'
 import {cubicBezierToken} from './cubicBezierToken.js'
+import {gradientToken} from './gradientToken.js'
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore: TODO: fix this
@@ -27,6 +28,7 @@ export const designToken = z.record(
         borderToken,
         fontFamilyToken,
         fontWeightToken,
+        gradientToken,
         typographyToken,
         viewportRangeToken,
         numberToken,

src/schemas/gradientToken.test.ts

@@ -0,0 +1,73 @@
+import {gradientToken} from './gradientToken.js'
+
+describe('Schema: gradientToken', () => {
+  it('parses valid value', () => {
+    const validGradientTokens = [
+      {
+        $value: [
+          {
+            color: '#000000',
+            position: 0,
+          },
+          {
+            color: '#ffffff',
+            position: 1,
+          },
+        ],
+        $type: 'gradient',
+      },
+      {
+        $value: [
+          {
+            color: '#000000',
+            position: 0,
+          },
+          {
+            color: '#555',
+            position: 0.3,
+          },
+          {
+            color: '#ffffff',
+            position: 0.5,
+          },
+        ],
+        $type: 'gradient',
+      },
+    ]
+
+    for (const gradient of validGradientTokens) {
+      expect(gradientToken.safeParse(gradient).success).toStrictEqual(true)
+    }
+  })
+
+  it('fails on invalid values', () => {
+    const invalidGradientTokens = [
+      {
+        $value: [
+          {
+            color: '#000000',
+            position: 0,
+          },
+        ],
+        $type: 'gradient',
+      },
+      {
+        $value: [
+          {
+            color: '#000000',
+            position: 0,
+          },
+          {
+            color: '#ffffff',
+            position: 2,
+          },
+        ],
+        $type: 'gradient',
+      },
+    ]
+
+    for (const gradient of invalidGradientTokens) {
+      expect(gradientToken.safeParse(gradient).success).toStrictEqual(false)
+    }
+  })
+})

src/schemas/gradientToken.ts

@@ -0,0 +1,22 @@
+import {z} from 'zod'
+import {baseToken} from './baseToken.js'
+import {referenceValue} from './referenceValue.js'
+import {tokenType} from './tokenType.js'
+import {colorHexValue} from './colorHexValue.js'
+
+export const gradientToken = baseToken
+  .extend({
+    $value: z.union([
+      z
+        .array(
+          z.object({
+            color: z.union([colorHexValue, referenceValue]),
+            position: z.number().min(0).max(1),
+          }),
+        )
+        .min(2),
+      referenceValue,
+    ]),
+    $type: tokenType('gradient'),
+  })
+  .strict()

src/schemas/validTokenType.ts

@@ -11,6 +11,7 @@ const validTypes = [
   'shadow',
   'fontFamily',
   'fontWeight',
+  'gradient',
   'number',
   'string',
   'custom-viewportRange',