topic Betreff: More global Colors in Website Theme - fields.json in CMS Development

More global Colors in Website Theme - fields.json

Torsten_Utz — Tue, 20 Aug 2024 13:04:11 GMT

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?

Re: More global Colors in Website Theme - fields.json

Anton — Tue, 20 Aug 2024 16:46:24 GMT

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 }}

best,

Anton

Betreff: More global Colors in Website Theme - fields.json

Torsten_Utz — Wed, 21 Aug 2024 08:34:41 GMT

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 } } ] } ] }

Betreff: More global Colors in Website Theme - fields.json

Anton — Wed, 21 Aug 2024 09:19:45 GMT

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