Add color differentiation to types in object paths

[brady-sewall]

(Sorry for the poor title - I'm not sure what to call this)

Syntax: Liquid

When objects are called in Shopify it starts with the type of object - product, variant, etc. In the screenshots below, variant in variant.metafields.acf_variant.disclaimer_message, specifically.

Other themes I've used (including the stock VS Code themes) highlight that object, which makes it much easier to see what type of object is being referenced.

Other themes:

Catppuccin:

[sgoudham]

Hey 👋,
Apologies for the wait!

There seems to be some cross cutting concerns here where the textmate grammar highlights user defined variables and shopify builtin objects the same colour. As a result, I wasn't comfortable using red which is our builtin colour.

While it might not make the most sense, I've went with pink to follow the idea of Custom Components in React. See the screenshot shown below: