fix: added validations for gradient from and to colors

Author: hrhv

packages/imagekit-editor-dev/src/schema/background.ts

@@ -1,6 +1,6 @@
 import { z } from "zod/v3"
 import type { TransformationField } from "."
-import { colorValidator } from "./transformation"
+import { colorValidator, gradientPickerColorValidator } from "./transformation"
 
 export const SUPPORTED_BACKGROUND_TYPES: Record<
   string,
@@ -305,8 +305,8 @@ export const background = {
     backgroundGradientPaletteSize: z.string().optional(),
     backgroundGradient: z
       .object({
-        from: z.string().optional(),
-        to: z.string().optional(),
+        from: gradientPickerColorValidator.optional(),
+        to: gradientPickerColorValidator.optional(),
         direction: z
           .union([
             z.coerce

packages/imagekit-editor-dev/src/schema/index.ts

@@ -25,6 +25,7 @@ import {
 import {
   colorValidator,
   commonNumberAndExpressionValidator,
+  gradientPickerColorValidator,
   heightValidator,
   layerXValidator,
   layerYValidator,
@@ -418,8 +419,8 @@ const baseTransformationSchema: TransformationSchema[] = [
           .object({
             gradient: z
               .object({
-                from: z.string().optional(),
-                to: z.string().optional(),
+                from: gradientPickerColorValidator.optional(),
+                to: gradientPickerColorValidator.optional(),
                 direction: z
                   .union([
                     z.coerce
@@ -2176,8 +2177,8 @@ const baseTransformationSchema: TransformationSchema[] = [
               .optional(),
             gradient: z
               .object({
-                from: z.string().optional(),
-                to: z.string().optional(),
+                from: gradientPickerColorValidator.optional(),
+                to: gradientPickerColorValidator.optional(),
                 direction: z
                   .union([
                     z.coerce

packages/imagekit-editor-dev/src/schema/transformation.ts

@@ -55,6 +55,35 @@ export const colorValidator = z
     message: "Enter a valid hex colour code.",
   })
 
+/** Gradient picker colours: in-progress # + hex, complete values, or legacy hex without #. */
+export const gradientPickerColorValidator = z
+  .string()
+  .superRefine((val, ctx) => {
+    if (val === "") {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "Enter a valid hex colour code.",
+      })
+      return
+    }
+    if (/^#[0-9A-Fa-f]{0,8}$/.test(val)) {
+      const hex = val.slice(1)
+      if (hex.length === 0) return
+      if ([1, 2, 4, 5, 7].includes(hex.length)) return
+      if (colorValidator.safeParse(val).success) return
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "Enter a valid hex colour code.",
+      })
+      return
+    }
+    if (colorValidator.safeParse(val).success) return
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Enter a valid hex colour code.",
+    })
+  })
+
 const aspectRatioValueValidator = z
   .string()
   .regex(/^\d+(\.\d{1,2})?-\d+(\.\d{1,2})?$/)