Theme settings can get messy, especially if you are a developer and fresh working on your Hubspot theme templates, CSS, and JS files.

What were the properties of the fonts? Let me double-check older files or the documentation...

Well, I was kinda tired of that workflow so I built a tiny python script to help me auto-generate the index of available properties for each theme setting.

Now I can run the script, let it read the available settings, and generate a text file where each line is a field property ready to copy&paste!

Python script

import json
fields_file = "./src/fields.json"
output_file = "field_references.txt"
file = open(fields_file, "r")
data = file.read()
file.close()
data = json.loads(data)
#print(data)

def is_group(f):
if f["type"] == "group":
return True
return False

def get_val(f):
return f["name"]
def get_properties(f):
props = []
if f["type"] == "boolean" or f["type"] == "choice":
pass
elif f["type"] == "color":
props = ["color","opacity"]
elif f["type"] == "font":
#if f.has_attr("hidden_subfields"):
props = ["size", "size_unit","color","styles.variant","styles.font_weight"]
return props
def loop(d,parent):
global fields
for f in d:
if is_group(f):
if parent:
p = parent + "." + f["name"]
else:
p = f["name"]
loop(f["children"], p)
else:
fields.append(parent + "." + get_val(f))
for prop in get_properties(f):
full_fields.append(parent + "." + get_val(f) + "." + prop)

full_fields = []
fields = []
loop(data,"theme")
#print(f"\n".join(fields))
print(f"\n".join(full_fields))
file = open(output_file,"w")
n = file.write("{{ " + (" }}" + f"\n" + "{{ ").join(full_fields) + "}}")
file.close()

It assumes your python file is in the root project folder and your theme is in the src subfolder.

Then the output file field_references.txtwill be created next to your python file

Output example

{{ theme.colors.primary.color }}
{{ theme.colors.primary.opacity }}
{{ theme.colors.secondary.color }}
{{ theme.colors.secondary.opacity }}
{{ theme.typography.title_fonts.size }}
{{ theme.typography.title_fonts.size_unit }}
{{ theme.typography.title_fonts.color }}
{{ theme.typography.title_fonts.styles.variant }}
{{ theme.typography.title_fonts.styles.font_weight }}

I am open to expanding this in the future so let me know what you think and what you would love to see here. For example, a JS port, or an online tool.

Happy coding!