kendo-swatch.json

{
    "$schema": "http://json-schema.org/draft-07/schema",
    "$id": "kendo-cli://schemas/kendo-swatch.json",
    "title": "Kendo Swatch Definition",

    "properties": {
        "$schema": {
            "type": "string"
        },
        "name": {
            "description": "Name of the theme. Used for naming download artifacts.",
            "type": "string"
        },
        "base": {
            "description": "Base for the theme. Must be a valid kendo or webui theme name.",
            "type": "string",
            "enum": [
                "@progress/kendo-theme-default",
                "@progress/kendo-theme-bootstrap",
                "@progress/kendo-theme-material",
                "@progress/kendo-theme-classic",
                "@progress/kendo-theme-nouvelle",
                "@telerik/webui-theme-default",
                "@telerik/webui-theme-bootstrap",
                "@telerik/webui-theme-material",
                "@telerik/webui-theme-glow",
                "@telerik/webui-theme-silk"
            ]
        },
        "version": {
            "description": "Version of the theme to compile against. Note: this is recommended version.",
            "markdownDescription": "Version of the theme to compile against.\n\nNote: this is **recommended** version.",
            "type": "string"
        },
        "product": {
            "description": "Product for which the theme is for. Either kendo or webui.",
            "type": "string",
            "enum": [
                "kendo",
                "webui"
            ]
        },
        "hidden": {
            "description": "Hides the swatch from themebuilder customization interface. Default is false. Note: this has no effect when uploading a swatch.",
            "markdownDescription": "Hides the swatch from themebuilder customization interface. Default is `false`.\n\nNote: this has **no effect** when uploading a swatch.",
            "type": "boolean"
        },
        "previewColors": {
            "description": "A list of HEX colors that represents the theme.",
            "type": "array",
            "items": {
                "$ref": "#/$defs/css-color"
            },
            "minItems": 2,
            "maxItems": 8
        },
        "components": {
            "description": "Components to include in the compiled theme. Leave empty for all.",
            "$ref": "#/$defs/component-list"
        },
        "themeBuilder": {
            "description": "List of variables to be customized in ThemeBuilder, organized in groups",
            "type": "array",
            "items": {
                "$ref": "#/$defs/group"
            }
        },
        "groups": {
            "description": "List of variables to be customized in ThemeBuilder, organized in groups",
            "type": "array",
            "items": {
                "$ref": "#/$defs/group"
            }
        },
        "variables": {
            "$ref": "#/$defs/variable-list"
        }
    },
    "additionalProperties": false,
    "required": [ "$schema", "name", "base", "product" ],
    "oneOf": [
        {
            "oneOf": [
                { "required": [ "variables" ] },
                { "required": [ "groups" ] },
                { "required": [ "themeBuilder" ] }
            ]
        }
    ],

    "$defs": {

        "css-color": { "$ref": "./css-color.json#/$defs/css-color" },
        "css-length": { "$ref": "./css-number.json#/$defs/css-length" },
        "sass-variable-type": { "$ref": "./sass-variable.json#/$defs/sass-variable-type" },
        "component-list": { "$ref": "./kendo-component.json#/$defs/component-list" },

        "group": {
            "description": "A group of variables",
            "type": "object",
            "properties": {
                "name": {
                    "description": "Friendly group name. It will be shown as title in the themebuilder.",
                    "type": "string"
                },
                "variables": {
                    "$ref": "#/$defs/variable-list"
                },
                "hidden": {
                    "description": "Hides the group from themebuilder customization interface. Default is false. Note: even a group is hidden, the variables will be processed!",
                    "markdownDescription": "Hides the group from themebuilder customization interface. Default is `false`. \n\nNote: even a group is hidden, the variables will be processed!",
                    "type": "boolean"
                }
            },
            "additionalProperties": false,
            "required": [ "variables" ]
        },

        "variable-list": {
            "description": "A list of variables. Each key refers to a sass variable name without the dollar sign",
            "type": "object",
            "patternProperties": {
                "^[a-zA-Z]": {
                    "$ref": "#/$defs/variable"
                }
            },
            "additionalProperties": false
        },

        "variable": {
            "description": "An object representation of a variable.",
            "type": "object",
            "properties": {
                "name": {
                    "description": "Friendly name for variable. Will be shown in Themebuilder as label for editor",
                    "type": "string"
                },
                "type": {
                    "description": "Variable type. One of color, number, boolean or hidden.",
                    "markdownDescription": "Variable type. One of `color`, `number`, `boolean` or `hidden`.",
                    "$ref": "#/$defs/variable-type"
                },
                "value": {},
                "hidden": {
                    "description": "Hides the variable from themebuilder customization interface. Default is false. Note: even a variable is hidden, it will be processed!",
                    "markdownDescription": "Hides the variable from themebuilder customization interface. Default is `false`. \n\nNote: even a variable is hidden, it will be processed!",
                    "type": "boolean"
                },
                "enum": {}
            },
            "additionalProperties": false,
            "required": [ "name", "type", "value" ],
            "allOf": [
                {
                    "if": {
                        "properties": {
                            "type": { "const": "color" },
                            "required": [ "type" ]
                        }
                    },
                    "then": {
                        "properties": {
                            "value": {
                                "type": [
                                    "string",
                                    "null"
                                ],
                                "oneOf": [
                                    {
                                        "$ref": "#/$defs/css-color",
                                        "examples": [
                                            "black",
                                            "#000000",
                                            "#000",
                                            "#000000FF",
                                            "#000f",
                                            "rgb( 0, 0, 0 )",
                                            "rgba( 0, 0, 0, 0 )"
                                        ]
                                    },
                                    {
                                        "pattern": "^\\{\\{\\s*([a-zA-z\\d\\-\\_]+)(\\.[a-zA-z\\d\\-\\_]+)*\\s*\\}\\}$",
                                        "examples": [
                                            "{{ base.themeColors.primary }}"
                                        ]
                                    }
                                ],
                                "description": "CSS color or token reference"
                            }
                        }
                    }
                },
                {
                    "if": {
                        "properties": {
                            "type": { "const": "colorlist" },
                            "required": [ "type" ]
                        }
                    },
                    "then": {
                        "properties": {
                            "value": {
                                "description": "A specific color from discreet color list.",
                                "markdownDescription": "A specific color from discreet color list.",
                                "type": [
                                    "string",
                                    "null"
                                ]
                            },
                            "enum": {
                                "type": "array",
                                "items": {
                                    "oneOf": [
                                        {
                                            "$ref": "#/$defs/css-color"
                                        },
                                        {
                                            "$ref": "#/$defs/colorlist-tuple"
                                        }
                                    ]
                                }
                            }
                        }
                    }
                },
                {
                    "if": {
                        "properties": {
                            "type": { "const": "color-mode" },
                            "required": [ "type" ]
                        }
                    },
                    "then": {
                        "properties": {
                            "value": {
                                "description": "How to apply colors based on intended theme luminocity. One of dark or light.",
                                "markdownDescription": "How to apply colors based on intended theme luminocity. One of `dark` or `light`.",
                                "type": [
                                    "string",
                                    "null"
                                ],
                                "oneOf": [
                                    {
                                        "$ref": "#/$defs/color-modes"
                                    },
                                    {
                                        "type": "null"
                                    }
                                ]
                            },
                            "enum": {
                                "type": "array",
                                "items": {
                                    "oneOf": [
                                        {
                                            "$ref": "#/$defs/color-modes"
                                        },
                                        {
                                            "$ref": "#/$defs/colormode-tuple"
                                        }
                                    ]
                                }
                            }
                        }
                    }
                },
                {
                    "if": {
                        "properties": {
                            "type": { "const": "material-colorlist" },
                            "required": [ "type" ]
                        }
                    },
                    "then": {
                        "properties": {
                            "value": {
                                "description": "A specific color from discreet color list.",
                                "markdownDescription": "A specific color from discreet color list.",
                                "type": [
                                    "string",
                                    "null"
                                ]
                            },
                            "enum": {
                                "type": "array",
                                "items": {
                                    "oneOf": [
                                        {
                                            "$ref": "#/$defs/material-colors"
                                        },
                                        {
                                            "$ref": "#/$defs/material-colorlist-tuple"
                                        }
                                    ]
                                }
                            }
                        }
                    }
                },
                {
                    "if": {
                        "properties": {
                            "type": { "const": "number" },
                            "required": [ "type" ]
                        }
                    },
                    "then": {
                        "properties": {
                            "value": {
                                "description": "Valid CSS length or null",
                                "markdownDescription": "Valid CSS length or `null`. See [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/length).",
                                "oneOf": [
                                    {
                                        "$ref": "#/$defs/css-length"
                                    },
                                    {
                                        "type": "null"
                                    }
                                ]
                            }
                        }
                    }
                },
                {
                    "if": {
                        "properties": {
                            "type": { "const": "boolean" },
                            "required": [ "type" ]
                        }
                    },
                    "then": {
                        "properties": {
                            "value": {
                                "description": "true or false",
                                "markdownDescription": "`true` or `false`",
                                "enum": [
                                    true,
                                    false,
                                    null
                                ]
                            }
                        }
                    }
                }
            ]
        },


        "variable-type": {
            "oneOf": [
                {
                    "$ref": "#/$defs/sass-variable-type"
                },
                {
                    "type": "string",
                    "const": "colorlist"
                },
                {
                    "type": "string",
                    "const": "color-mode"
                },
                {
                    "type": "string",
                    "const": "material-colorlist"
                }
            ]
        },
        "colorlist-tuple": {
            "type": "object",
            "properties": {
                "text": {
                    "type": "string"
                },
                "value": {
                    "$ref": "#/$defs/css-color"
                },
                "preview": {
                    "$ref": "#/$defs/css-color"
                }
            },
            "additionalProperties": false,
            "required": [ "value" ]
        },
        "color-modes": {
            "type": "string",
            "enum": [
                "light",
                "dark"
            ]
        },
        "colormode-tuple": {
            "type": "object",
            "properties": {
                "text": {
                    "type": "string"
                },
                "value": {
                    "$ref": "#/$defs/color-modes"
                },
                "preview": {
                    "$ref": "#/$defs/css-color"
                }
            },
            "additionalProperties": false,
            "required": [ "value" ]
        },
        "material-colors": {
            "type": "string",
            "enum": [
                "red",
                "pink",
                "purple",
                "deepPurple",
                "indigo",
                "blue",
                "lightBlue",
                "cyan",
                "teal",
                "green",
                "lightGreen",
                "lime",
                "yellow",
                "amber",
                "orange",
                "deepOrange",
                "brown",
                "gray",
                "blueGray"
            ]
        },
        "material-colorlist-tuple": {
            "type": "object",
            "properties": {
                "text": {
                    "type": "string"
                },
                "value": {
                    "$ref": "#/$defs/material-colors"
                },
                "preview": {
                    "$ref": "#/$defs/css-color"
                }
            },
            "additionalProperties": false,
            "required": [ "value" ]
        }

    }
}