Set Default CSS Transitions via Theme.json

[bhubbard]

What problem does this address?

CSS Transitions can be common on sites, for hover effects on buttons, links, etc. Having basic support for this in theme.json can lead to developers using them for blocks and patterns, while helping keeping them consistent for the site.

What is your proposed solution?

I would like to see some common default css transitions set via theme.json, with the ability to set custom, just like fonts and colors.

Example:

// Transition Durations
$transition-duration-fast: 0.2s;
$transition-duration-medium: 0.4s;
$transition-duration-slow: 0.6s;

// Transition Timings
$transition-timing-ease-in: ease-in;
$transition-timing-ease-out: ease-out;
$transition-timing-ease-in-out: ease-in-out;
$transition-timing-linear: linear;

// Transition Delays
$transition-delay-none: 0s;
$transition-delay-short: 0.1s;
$transition-delay-medium: 0.2s;
$transition-delay-long: 0.3s;

[t-hamano]

How about defining CSS custom properties via settings.custom?

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "settings": {
        "custom": {
            "transition": {
                "duration": {
                    "fast": "0.2s",
                    "medium": "0.4s",
                    "slow": "0.6s"
                },
                "timing": {
                    "ease-in": "ease-in",
                    "ease-out": "ease-out",
                    "ease-in-out": "ease-in-out",
                    "linear": "linear"
                },
                "delay": {
                    "none": "0s",
                    "short": "0.1s",
                    "medium": "0.2s",
                    "long": "0.3s"
                }
            }
        }
    }
}

These definitions will be output in both the editor and the front-end as follows.

:root{
    --wp--custom--transition--duration--fast: 0.2s;
    --wp--custom--transition--duration--medium: 0.4s;
    --wp--custom--transition--duration--slow: 0.6s;
    --wp--custom--transition--timing--ease-in: ease-in;
    --wp--custom--transition--timing--ease-out: ease-out;
    --wp--custom--transition--timing--ease-in-out: ease-in-out;
    --wp--custom--transition--timing--linear: linear;
    --wp--custom--transition--delay--none: 0s;
    --wp--custom--transition--delay--short: 0.1s;
    --wp--custom--transition--delay--medium: 0.2s;
    --wp--custom--transition--delay--long: 0.3s;
}

They can be used in patterns and blocks.