# Validators ## Type Aliases ### RuleValidators ```ts type RuleValidators = (flatten) => object[]; ``` #### Parameters | Parameter | Type | | ------ | ------ | | `flatten` | [`FlattenTokens`](utils.md#flattentokens) | #### Returns `object` | Name | Type | | ------ | ------ | | `errors` | [`ValidatorError`](#validatorerror)[] | *** ### TypeValidators ```ts type TypeValidators = object; ``` #### Index Signature ```ts [key: string]: object ``` *** ### ValidatorConfig ```ts type ValidatorConfig = object; ``` #### Properties ##### rules? ```ts optional rules: RuleValidators; ``` ##### types? ```ts optional types: TypeValidators; ``` *** ### ValidatorError ```ts type ValidatorError = object; ``` #### Properties ##### message ```ts message: string; ``` ##### name ```ts name: string; ``` ##### path ```ts path: string; ``` ##### value? ```ts optional value: unknown; ``` *** ### ValidatorReturn ```ts type ValidatorReturn = object; ``` #### Properties ##### errors ```ts errors: ValidatorError[]; ``` ##### warnings ```ts warnings: string[]; ``` ## Variables ### borderTokenPropertyTypes ```ts const borderTokenPropertyTypes: Record; ``` *** ### BorderTokenSchema ```ts const BorderTokenSchema: ZodMiniObject<{ $description: ZodMiniOptional>; $extensions: ZodMiniOptional, ZodMiniUnknown>>; $type: ZodMiniOptional>; $value: ZodMiniUnion, ZodMiniObject<{ color: ZodMiniUnion, ZodMiniString]>; style: ZodMiniUnion, ZodMiniUnion, ZodMiniObject<..., ...>]>]>; width: ZodMiniUnion, ZodMiniObject<{ unit: ZodMiniUnion<...>; value: ZodMiniNumber<...>; }, $strict>]>; }, $strict>]>; }, $strict>; ``` *** ### ColorTokenSchema ```ts const ColorTokenSchema: ZodMiniObject<{ $description: ZodMiniOptional>; $extensions: ZodMiniOptional, ZodMiniUnknown>>; $type: ZodMiniOptional>; $value: ZodMiniUnion, ZodMiniString]>; }, $strict>; ``` A schema for a color token. Reference: https://tr.designtokens.org/format/#color #### Example ```ts { * $type: "color", * $value: "#000000", * $description: "The primary color of the application." * } ``` #### Returns The color token schema. *** ### CubicBezierTokenSchema ```ts const CubicBezierTokenSchema: ZodMiniObject<{ $description: ZodMiniOptional>; $extensions: ZodMiniOptional, ZodMiniUnknown>>; $type: ZodMiniOptional>; $value: ZodMiniUnion, ZodMiniArray, ZodMiniString]>>]>; }, $strict>; ``` A schema for a cubic bezier token. The cubic bezier token is an array of 4 numbers. The first and third numbers must be between 0 and 1. Reference: https://tr.designtokens.org/format/#cubic-bezier #### Example ```ts { * $type: "cubicBezier", * $value: [0.42, 0, 0.58, 1] * } ``` #### Returns The cubic bezier token schema. *** ### DimensionTokenSchema ```ts const DimensionTokenSchema: ZodMiniObject<{ $description: ZodMiniOptional>; $extensions: ZodMiniOptional, ZodMiniUnknown>>; $type: ZodMiniOptional>; $value: ZodMiniUnion, ZodMiniObject<{ unit: ZodMiniUnion, ZodMiniLiteral<"rem">]>; value: ZodMiniNumber; }, $strict>]>; }, $strict>; ``` A schema for a dimension token. The dimension token is an object with a value and a unit. The unit can be "px" or "rem". Reference: https://tr.designtokens.org/format/#dimension #### Example ```ts { * $type: "dimension", * $value: { * value: 16, * unit: "px" * }, * $description: "The size of the button." * } ``` #### Returns The dimension token schema. *** ### dtcgJsonSchemas ```ts const dtcgJsonSchemas: TypeValidators; ``` *** ### DurationTokenSchema ```ts const DurationTokenSchema: ZodMiniObject<{ $description: ZodMiniOptional>; $extensions: ZodMiniOptional, ZodMiniUnknown>>; $type: ZodMiniOptional>; $value: ZodMiniUnion, ZodMiniObject<{ unit: ZodMiniUnion, ZodMiniLiteral<"s">]>; value: ZodMiniNumber; }, $strict>]>; }, $strict>; ``` A schema for a duration token. The duration token is an object with a value and a unit. The unit can be "ms" or "s". Reference: https://tr.designtokens.org/format/#duration #### Example ```ts { * $type: "duration", * $value: { * value: 300, * unit: "ms" * }, * $description: "The duration of the animation." * } ``` #### Returns The duration token schema. *** ### FontFamilyTokenSchema ```ts const FontFamilyTokenSchema: ZodMiniObject<{ $description: ZodMiniOptional>; $extensions: ZodMiniOptional, ZodMiniUnknown>>; $type: ZodMiniOptional>; $value: ZodMiniUnion, ZodMiniUnion, ZodMiniArray>]>]>; }, $strict>; ``` A schema for a font family token. Reference: https://tr.designtokens.org/format/#fontfamily #### Example ```ts { * $type: "fontFamily", * $value: "Arial", * $description: "The primary font family of the application." * } ``` #### Returns The font family token schema. *** ### FontWeightTokenSchema ```ts const FontWeightTokenSchema: ZodMiniObject<{ $description: ZodMiniOptional>; $extensions: ZodMiniOptional, ZodMiniUnknown>>; $type: ZodMiniOptional>; $value: ZodMiniUnion, ZodMiniUnion, ZodMiniString]>]>; }, $strict>; ``` A schema for a font weight token. Reference: https://tr.designtokens.org/format/#fontweight #### Example ```ts { * $type: "fontWeight", * $value: 400, * $description: "The font weight of the text." * } ``` #### Returns The font weight token schema. *** ### fontWeightValues ```ts const fontWeightValues: object; ``` Helper constant for font weight values. The keys are the font weight values and the values are the possible names. Reference: https://tr.designtokens.org/format/#font-weight #### Type declaration | Name | Type | | ------ | ------ | | `100` | `string`[] | | `200` | `string`[] | | `300` | `string`[] | | `400` | `string`[] | | `500` | `string`[] | | `600` | `string`[] | | `700` | `string`[] | | `800` | `string`[] | | `900` | `string`[] | | `950` | `string`[] | *** ### gradientTokenPropertyTypes ```ts const gradientTokenPropertyTypes: Record; ``` *** ### GradientTokenSchema ```ts const GradientTokenSchema: ZodMiniObject<{ $description: ZodMiniOptional>; $extensions: ZodMiniOptional, ZodMiniUnknown>>; $type: ZodMiniOptional>; $value: ZodMiniUnion, ZodMiniArray; position: ZodMiniUnion; }, $strict>, ZodMiniString]>>]>; }, $strict>; ``` A schema for a gradient token. Interpretation of `position`: Specification is not clear about whether the position needs to be between 0 and 1. Because it says "If a number value outside of that range is given, it MUST be considered as if it were clamped to the range [0, 1]". So, it is assumed that the position can be any number. However, it is recommended to use a number between 0 and 1. Reference: https://tr.designtokens.org/format/#gradient #### Example ```ts { * $type: "gradient", * $value: [ * { * color: "#000000", * position: 0 * }, * { * color: "#FFFFFF", * position: 1 * } * ] * } ``` #### Returns The gradient token schema. *** ### lineCapPredefinedValues ```ts const lineCapPredefinedValues: readonly ["butt", "round", "square"]; ``` *** ### NumberTokenSchema ```ts const NumberTokenSchema: ZodMiniObject<{ $description: ZodMiniOptional>; $extensions: ZodMiniOptional, ZodMiniUnknown>>; $type: ZodMiniOptional>; $value: ZodMiniUnion, ZodMiniNumber]>; }, $strict>; ``` A schema for a number token. Reference: https://tr.designtokens.org/format/#number #### Example ```ts { * $type: "number", * $value: 16, * $description: "The size of the button." * } ``` #### Returns The number token schema. *** ### ReferenceValueSchema ```ts const ReferenceValueSchema: ZodMiniString; ``` *** ### shadowTokenPropertyTypes ```ts const shadowTokenPropertyTypes: Record; ``` *** ### ShadowTokenSchema ```ts const ShadowTokenSchema: ZodMiniObject<{ $description: ZodMiniOptional>; $extensions: ZodMiniOptional, ZodMiniUnknown>>; $type: ZodMiniOptional>; $value: ZodMiniUnion, ZodMiniUnion, ZodMiniObject<..., ...>]>; color: ZodMiniUnion, ZodMiniString<...>]>; inset: ZodMiniOptional>; offsetX: ZodMiniUnion, ZodMiniObject<..., ...>]>; offsetY: ZodMiniUnion, ZodMiniObject<..., ...>]>; spread: ZodMiniUnion, ZodMiniObject<..., ...>]>; }, $strict>, ZodMiniArray, ZodMiniString]>>]>]>; }, $strict>; ``` A schema for a shadow token. Reference: https://tr.designtokens.org/format/#shadow #### Example ```ts { * $type: "shadow", * $value: { * color: "#000000", * offsetX: "0px", * offsetY: "4px", * blur: "8px", * spread: "0px", * inset: false * } * } ``` #### Returns The shadow token schema. *** ### StrictStringSchema ```ts const StrictStringSchema: ZodMiniString; ``` *** ### strokePredefinedValues ```ts const strokePredefinedValues: readonly ["solid", "dashed", "dotted", "double", "groove", "ridge", "outset", "inset"]; ``` *** ### strokeStyleTokenPropertyTypes ```ts const strokeStyleTokenPropertyTypes: Record; ``` *** ### StrokeStyleTokenSchema ```ts const StrokeStyleTokenSchema: ZodMiniObject<{ $description: ZodMiniOptional>; $extensions: ZodMiniOptional, ZodMiniUnknown>>; $type: ZodMiniOptional>; $value: ZodMiniUnion, ZodMiniUnion, ZodMiniObject<{ dashArray: ZodMiniArray>; lineCap: ZodMiniString; }, $strict>]>]>; }, $strict>; ``` *** ### transitionTokenPropertyTypes ```ts const transitionTokenPropertyTypes: Record; ``` *** ### TransitionTokenSchema ```ts const TransitionTokenSchema: ZodMiniObject<{ $description: ZodMiniOptional>; $extensions: ZodMiniOptional, ZodMiniUnknown>>; $type: ZodMiniOptional>; $value: ZodMiniUnion, ZodMiniObject<{ delay: ZodMiniUnion, ZodMiniObject<{ unit: ZodMiniUnion<...>; value: ZodMiniNumber<...>; }, $strict>]>; duration: ZodMiniUnion, ZodMiniObject<{ unit: ZodMiniUnion<...>; value: ZodMiniNumber<...>; }, $strict>]>; timingFunction: ZodMiniUnion, ZodMiniArray>]>; }, $strict>]>; }, $strict>; ``` *** ### typographyTokenPropertyTypes ```ts const typographyTokenPropertyTypes: Record; ``` *** ### TypographyTokenSchema ```ts const TypographyTokenSchema: ZodMiniObject<{ $description: ZodMiniOptional>; $extensions: ZodMiniOptional, ZodMiniUnknown>>; $type: ZodMiniOptional>; $value: ZodMiniUnion, ZodMiniObject<{ fontFamily: ZodMiniUnion, ZodMiniUnion, ZodMiniArray<...>]>]>; fontSize: ZodMiniUnion, ZodMiniObject<{ unit: ZodMiniUnion<...>; value: ZodMiniNumber<...>; }, $strict>]>; fontWeight: ZodMiniUnion, ZodMiniUnion, ZodMiniString<...>]>]>; letterSpacing: ZodMiniUnion, ZodMiniObject<{ unit: ZodMiniUnion<...>; value: ZodMiniNumber<...>; }, $strict>]>; lineHeight: ZodMiniUnion, ZodMiniNumber]>; }, $strict>]>; }, $strict>; ``` A schema for a typography token. Reference: https://tr.designtokens.org/format/#typography #### Example ```ts { * $type: "typography", * $value: { * fontFamily: "Arial", * fontSize: "16px", * fontWeight: 400, * letterSpacing: "1px", * lineHeight: 1.5 * }, * $description: "The typography of the application." * } ``` #### Returns The typography token schema. ## Functions ### createSchema() ```ts function createSchema(type, value): ZodMiniObject<{ $description: ZodMiniOptional>; $extensions: ZodMiniOptional, ZodMiniUnknown>>; $type: ZodMiniOptional>; $value: ZodMiniUnion, V]>; }, $strict>; ``` Creates a schema for a token. #### Type Parameters | Type Parameter | | ------ | | `T` *extends* `string` | | `V` *extends* `ZodMiniType`\<`any`, `any`, `$ZodTypeInternals`\<`any`, `any`\>\> | #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `type` | `T` | The type of the token. | | `value` | `V` | The value of the token. | #### Returns `ZodMiniObject`\<\{ `$description`: `ZodMiniOptional`\<`ZodMiniString`\<`string`\>\>; `$extensions`: `ZodMiniOptional`\<`ZodMiniRecord`\<`ZodMiniString`\<`string`\>, `ZodMiniUnknown`\>\>; `$type`: `ZodMiniOptional`\<`ZodMiniLiteral`\<`T`\>\>; `$value`: `ZodMiniUnion`\, `V`\]\>; \}, `$strict`\> The token schema. *** ### dtcgValidator() ```ts function dtcgValidator(value, config): ValidatorReturn; ``` Validate the token group. The function checks if the token group is valid and if the references are correct. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `value` | `unknown` | Unknown value to validate | | `config` | [`ValidatorConfig`](#validatorconfig) | Validator to use | #### Returns [`ValidatorReturn`](#validatorreturn) True if the value is a valid token group *** ### GroupSchema() ```ts function GroupSchema(customTypes?): ZodMiniObject<{ $description: ZodMiniOptional>; $extensions: ZodMiniOptional, ZodMiniUnknown>>; $type: ZodMiniOptional>; }, $loose>; ``` #### Parameters | Parameter | Type | | ------ | ------ | | `customTypes?` | `string`[] | #### Returns `ZodMiniObject`\<\{ `$description`: `ZodMiniOptional`\<`ZodMiniString`\<`string`\>\>; `$extensions`: `ZodMiniOptional`\<`ZodMiniRecord`\<`ZodMiniString`\<`string`\>, `ZodMiniUnknown`\>\>; `$type`: `ZodMiniOptional`\<`ZodMiniString`\<`string`\>\>; \}, `$loose`\>

Design Tokens

On this page