Better color and spacing selection support

We want to make it easy for our CMS users to follow their own design system - which exists in both outside and inside the scope of Builder - but without completely constraining them to it.

Our clients have complex design systems with needs that are not currently supported in Builder. They need better color and spacing support in the editor solved in a built-in manner.

Colors

Regarding colors, our clients have normally 30-60 colors that need to be made available inside the CMS (many of these are slightly different shades of the same color palette). It is currently possible to register swatches inside the editor, where then users will see thumbnails of them with a title attribute showing the HEX code while hovering over it.

With the complexity our clients have, maintaining colors this way would be a very difficult, bug-prone and manual task. Registering color via a plugin is not an option for them.

We have therefore written the following description of our wishes for managing colors with the built-in editor:

• It should be possible to define colors via an API or via the builder-settings file, so they can be transferred from the design system in an automated manner and don't need to be manually added and maintained in the editor.

• It should be possible to pick colors via the built-in color swatch picker in the editor (and not via a plugin).

• It should be possible to register multiple fields for a single color. Our preference is name and value, e.g. `color-primary: #bada55`.

• It should be possible to configure which fields can be seen in the editor (of thumbnail, name and value).

• It should be possible to rearrange already registered colors - either via the editor or via the builder-settings file.

• Updating colors (via calling the API again, updating color definitions in the builder-settings file or directly in the editor) should keep the link between colors and blocks. So if a color's unique id is unchanged (the unique id could be the color name or a hidden field Builder maintains), the link should not be broken. This is important, as we expect there will be updates to the design system regarding colors, which also means those updates need to be implemented in Builder.

Example of how the color definition in builder-settings could look like:

Builder.register('insertColors', {
	items: [
		{
			name: 'Color Background/Neutral',
			color: '#ffffff',
		},
		{
			name: 'Color Background/Primary',
			color: '#62e577',
		},
		{
			name: 'Color Border/Neutral',
			color: '#ffffff',
		},
		{
			name: 'Color Text/Default',
			color: '#000000',
		},
	],
});

Spacing

Spacing is the other area, where our clients have a need for constraining CMS users to the design system. It is currently possible to type any value in the Margin & Padding picker of the Style tab.

We would like to be able to make a list of values available to the built-in editor from the design system (instead of the the default option of 20px). Wishes for managing spacing:

• It should be possible to define spacing via an API or via the builder-settings file, so they can be transferred from the design system in an automated manner and don't need to be manually added and maintained in the editor.

• It should be possible to pick spacing via the built-in Margin & Padding picker in the editor (and not via a plugin).

• It should be possible to register multiple fields for a single spacing variable. Our preference is name and value, e.g. spacing-md: 16px.

• It should be possible to configure which fields can be seen in the Margin & Padding selector (of name and value).

Example of how the spacing definition in builder-settings could look like:

Builder.register('insertSpacing', { 
	items: [ 
		{ 
			name: 'Spacing/md', 
			value: '16px', 
		}, 
		{ 
			name: 'Spacing/sm', 
			value: '12px', 
		}, 
		{ 
			name: 'Spacing/xs', 
			value: '8px', 
		}, 
	], 
});