More global Colors in Website Theme - fields.json

[Torsten_Utz]

Hello,

i want to add more global colors to the fields.json. If I add this the watch command runs into an error. Is it possible to add more than two global colors in the global color group?

[Torsten_Utz]

Folgende Fehlermeldung tritt auf: 

[ERROR] One or more validation failed. Please fix the errors and try again.
- Valid alternate_names entries are [primary_color, secondary_color, heading_font, body_font] [field: common_colors]
- alternate_names feature is limited to color and font field types [field: common_colors]

Das ist der Code-Ausschnitt:

{
        "label": "Global colors",
        "name": "global_colors",
        "type": "group",
        "children": [
            {
                "label": "Primary",
                "name": "primary",
                "type": "color",
                "alternate_names": ["primary_color"],
                "visibility": {
                    "hidden_subfields": {
                        "opacity": true
                    }
                },
                "inherited_value": {
                    "property_value_paths": {
                        "color": "brand_settings.primaryColor"
                    }
                },
                "default": {
                    "color": "#2A262B"
                }
            },
            {
                "label": "Secondary",
                "name": "secondary",
                "type": "color",
                "alternate_names": ["secondary_color"],
                "visibility": {
                    "hidden_subfields": {
                        "opacity": true
                    }
                },
                "inherited_value": {
                    "property_value_paths": {
                        "color": "brand_settings.colors[1]"
                    }
                },
                "default": {
                    "color": "#0F29F2"
                }
            },
            {
                "label": "Common colors",
                "name": "common_colors",
                "type": "group",
                "alternate_names": ["third_color"],
                "default": {},
                "required": false,
                "locked": false,
                "children": [
                    {
                        "name": "light_color",
                        "label": "Light color",
                        "required": false,
                        "locked": false,
                        "inline_help_text": "",
                        "help_text": "",
                        "type": "color",
                        "default": {
                            "color": "#ffffff",
                            "opacity": 100
                        }
                    }
                ]
            }
        ]
    }

[Anton · Accepted solution]

Hi @Torsten_Utz, 

DE:

Gruppen können keine alternate_names haben, da dies für Farben und andere Elemente vorgesehen ist.

Dein Code sollte so aussehen:

EN:

Groups cannot have alternate_names as this is intended for colours and other elements.

Your code should look like this:

{
        "label": "Global colors",
        "name": "global_colors",
        "type": "group",
        "children": [
            {
                "label": "Primary",
                "name": "primary",
                "type": "color",
                "alternate_names": ["primary_color"],
                "visibility": {
                    "hidden_subfields": {
                        "opacity": true
                    }
                },
                "inherited_value": {
                    "property_value_paths": {
                        "color": "brand_settings.primaryColor"
                    }
                },
                "default": {
                    "color": "#2A262B"
                }
            },
            {
                "label": "Secondary",
                "name": "secondary",
                "type": "color",
                "alternate_names": ["secondary_color"],
                "visibility": {
                    "hidden_subfields": {
                        "opacity": true
                    }
                },
                "inherited_value": {
                    "property_value_paths": {
                        "color": "brand_settings.colors[1]"
                    }
                },
                "default": {
                    "color": "#0F29F2"
                }
            },
            {
                "label": "Common colors",
                "name": "common_colors",
                "type": "group",
                "default": {},
                "required": false,
                "locked": false,
                "children": [
                    {
                        "name": "light_color",
                        "label": "Light color",
                        "required": false,
                        "locked": false,
                        "inline_help_text": "",
                        "help_text": "",
                        "type": "color",
                        "default": {
                            "color": "#ffffff",
                            "opacity": 100
                        }
                    }
                ]
            }
        ]
    }

best, 

Anton

[Anton]

Hi @Torsten_Utz, yes - it's possible to add more colors to the fields.json. You have basically no limits there. If you'd like to add 99 colors for some reason it would be technically possible but not practical for the user 😁

What error do you get exactly?
Most common error is that there's another property using the same name

Other common issues might be:

- missing comma somewhere

- wrongly placed (color)

Here's a very basic JSON for this:

[
	{
		"name": "colors",
		"label": "Colors",
		"required": false,
		"locked": false,
		"children": [
			{
				"name": "primary",
				"label": "Primary color",
				"required": false,
				"locked": false,
				"inline_help_text": "",
				"help_text": "",
				"type": "color",
				"default": {
					"color": "#ffffff",
					"opacity": 100
				}
			},
			{
				"name": "secondary",
				"label": "Primary color",
				"required": false,
				"locked": false,
				"inline_help_text": "",
				"help_text": "",
				"type": "color",
				"default": {
					"color": "#ffffff",
					"opacity": 100
				}
			},
			{
				"name": "common_colors",
				"label": "Common colors",
				"required": false,
				"locked": false,
				"children": [
					{
						"name": "light_color",
						"label": "Light color",
						"required": false,
						"locked": false,
						"inline_help_text": "",
						"help_text": "",
						"type": "color",
						"default": {
							"color": "#ffffff",
							"opacity": 100
						}
					},
                    // add more colors here
				],
				"type": "group",
				"inline_help_text": "",
				"help_text": "",
				"default": {}
			}
		],
		"type": "group",
		"inline_help_text": "",
		"help_text": "",
		"default": {}
	}
]

To use use those colors in the theme-override(or any kind of file) do it like this:
{{ theme.colors.primary.css }}

{{ theme.colors.secondary.css }}

{{ theme.colors.common_colors.light_color.css }}

best, 

Anton