[Global Styles] Please add an option for adding custom color tokens, the defaults are not enough for non flat designs!

[Ren2049]

What problem does this address?

Currently there are Background, Text, Captions, Link, Button and Heading tokens by default. Changing the status quo would require a functions.php file and custom code which isnt very designer or nocode friendly.

Let's say I want to create more dimensional design with a backdrop color as the farthest back, common with most "boxed" posts layouts where the actual white background of the text is a box/group floating on top of this backdrop. This isn't possible in an elegant way with the currently available color tokens given how they're named.

The naming isn't the problem if you use functional tokens on this level, but it's a problem if there aren't enough functional tokens.

Actually in a more sophisticated theme design designers need way more functional tokens for borders, branded backgrounds etc. that are applicable with a click. Modifying or creating a functions.php file, research the code, installa code editor etc. are way over the head for people who use the create block theme plugin to start new themes.

What is your proposed solution?

Add a UI option for adding custom tokens. @ndiego posted a potential solution on wp.org, but it would be great if it's included by default because it's something that is blocking designers from designing freely.

[Ren2049]

Nobody..?

@jordesign @ndiego @richtabor how can you update the global styles of a site globally without having enough design-tokens/variables?

Isn't the whole point of global styles for users to be able to update the design from a central location without diving into theme.json variables or updating individual blocks?

Other nocode web design tools like Framer have no limits in the amount of tokens/variables users can add.

Being limited there may work for very basic or minimal designs but for anything else it comes across as extremely opinionated and shortsighted design choice forcing flat design minimalism on users, it's something I know will frustrate other web designers who come in contact with the block editor who like me discover it within a project that this feature is missing.

I was expecting an option to add additional slots for design tokens under the three dotted menu and was surprised that it wasn't there.

I'm wondering how anybody can build something more complex inside the editor without it because not having this feature means designers can't prototype properly within WP without going in and updating each block manually!

Quite a few classic non block customizer based themes and page builders also provide options to add custom tokens!

[richtabor]

This isn't possible in an elegant way with the currently available color tokens given how they're named.

You can create colors within the Color Palette and assign those to the pattern; even name it "Inner Box Color" etc. Would that not work for you?

[Ren2049]

@richtabor

Edit: Just got aware of the show details option for palette colors, this works!

the palette would work better if the theme colors would have an option to be displayed in a more explicit way like the custom colors below. Otherwise its a pain for users of a theme where the audience are users who mainly want to rebrand and update a bunch of pre-built unstyled patterns.

6 circles/swatches in a row gets messy if you don't use scales with 6 or 12 steps, and hovering over them to find out what it is and hunting the swatches you want to change is wasting a lot of time. So having an option like displaying the theme colors as a vertical stack would be very helpful and make the other view I was complaining about in my initial post obsolete.