Radial gradient support

[aweell]

Goal

The goal is to support radial type gradients in mistica

Syntax proposal

"backgroundBrand": {
    "type": "radial-gradient",
    "value": {
        "shape": "circle" | "ellipse",
        "size": "closest-corner" | "closest-side" | "farthest-corner" | "farthest-side" | "<length>" | "<percentage>" | "[ <length> | <percentage> ]{2}",
        "position": 
            "left" | "center" | "right" | "top" | "bottom" | "<length-percentage>" | 
            "[ left | center | right ] && [ top | center | bottom ]" | 
            "[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]" | 
            "[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]",
        "colors": [
            {
                "stop": number
                "value": string
            }
        ]
    },
    "description": "Radial gradient example"
}

MDN documentation for reference:

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient

Example of usage

"backgroundBrand": {
    "type": "radial-gradient",
    "value": {
        "shape": "circle",
        "size": "closest-corner",
        "position": "center"
        "colors": [
            {"value": "{palette.mycolor1}", "stop": 0},
            {"value": "{palette.mycolor2}", "stop": 0.3},
            {"value": "rgba({palette.mycolor3}, 0.2)", "stop": 1},
        ],
    },
    "description": "brand gradient"
},

Context

Currently we support only linear-gradients

Impact

Allow brands that need to include radial-gradients in their skin definition to do so.

Discussion Questions

.

Additional considerations

No response

Do you have a visual proposal?

No response