Can not add custom colors / text sizes to Theme.json

[keeslina]

Hi,

There seems to be something wrong with the variables in theme.json

As you can see, the --wp--preset--font-size--2xl - 9xl are not found.

The same happens when I want to add colors to the palette. I have added a custom color to the Wordpress palette:

 "palette": [
        {
          "name": "Primary",
          "slug": "primary",
          "color": "#0EA5E9"
        },
        {
          "name": "Secondary",
          "slug": "secondary",
          "color": "#14B8A6"
        },
        {
          "name": "Rood",
          "slug": "rood",
          "color": "#FF0000"
        },

However, I can not use this in theme.css like this:

 --color-primary: var(--wp--preset--color--primary);
    --color-secondary: var(--wp--preset--color--secondary);
    --color-rood: var(--wp--preset--color--rood); 

It seems that only the standard Wordpress presets are working ( text sizes xs - xl and colors primary + secondary ) .

What am I missing here?

[jeffreyvr]

Can you try setting your environment type to development in wp-config.php?

define( 'WP_ENVIRONMENT_TYPE', 'development' );

[keeslina]

Done, but no difference.. I'm running my Wordpress installation using Local

[keeslina]

To be clear, are you seeing the same issue in your installation?
I'm running a clean Wordpress setup + Tailpress now and still the wp-preset variables are not available.

[jeffreyvr]

Did some testing yesterday but could not replicate the issue. Will set up a fresh install later and do a an additional check to be sure.

[jeffreyvr]

Did some more testing on a fresh install; seems that on the first load the variables you mentioned are indeed not present, but after a refresh - they are.

Most likely thing I can think of is that this is a caching issue. Try a hard refresh for browser cache, maybe flush your site cache (transients) as well. Interested to know if this helps in your case too.

For the custom color, when I add it, it turns up immediately.

[keeslina]

tried to empty cache, flush transients, etc. No difference.

However, I just found out the issue i think.
In Theme.json, you can not use numbers for color and typograhpy names / slugs.
When I use 'kleura' instead of 'kleur1', it works immediately.
Same goes for the text sizes. Changing '2XL' to 'XXL' and it works!