Community forum for knowledge and support

Updated last month

Updating the Starter Project's Color Variable Structure

At a glance

The community members are discussing the changes in the color variable structure in the new update of the starter project. They express concerns that the new structure does not align with the client-first approach, as there are no alternate variables for text color, background color, border color, etc. The community members suggest having an option to switch between the old and new versions of the starter project, as the new style guide import is not perfect and restrictive for some brands.

The community members propose different solutions, such as separating variables and creating new ones, or cloning the previous version of the starter project. However, the project maintainers indicate that the new variable structure is the result of significant testing and research, and is unlikely to be reverted. They suggest that a new video explaining the changes and the reasoning behind them will be released soon.

There is no explicitly marked answer in the comments, but the community members are actively discussing the issue and providing feedback to the project maintainers.

hey guys, with the new update, it has completely changed the structure of the colour variables in the starter project, not aligning with the client first structure, no alternate variables for text color, background color, border color etc. The autistic part of my brain wont let me accept that this has actually all changed and me and my team need to relearn all the variables and ways the colours are applied, which seems to conflict with the client first framework.

e.g Theres only a a single variable for background colour, text color etc, so no secondary / tertiary etc.
Then the 'color schemes'.

is this correct? i've tried this with and without importing the style guide.

should there be an option to switch between the 2 versions of the starter project (similarly to how you can choose version in components dashboard) ?

I understand the new variables structure for the purpose of the style guide import, however the import isnt perfect as it sits, eg cant add enough colours for some brands, limited font choice etc.. so for users that dont want to import the style guide, should there be a version of the starter project available with the previous structure of colour variables?

1
M
J
M
8 comments

@Jake Oxley, I believe the best approach is to separate the variable, assign your own color, and create a new variable, much like what we did in v2. In v3, it appears the only method to adjust colors and fonts is via the style guide followed by a re-import. The problem with this is that if you attempt another import, it won't accurately bring in the style guide, necessitating a complete re-cloning of the project.

i happen to have a recent but previous version of the starter project cloned in my workspace, for now on this quick project i copied over a page from sitebuilder into that and it worked fine, with all the old variables setup.

i think we really need to have the option to clone the previous version of the style guide, bit of a big manual mess of variables in the new one if we have to unlink and recreate a bunch of the core variables that get used constantly.

hell of a lot simpler in the previous variables structure IMO, especially to explain to clients or new members to my team, feels like a big hit to efficiency to support the beta style guide import that is restrictive in current form.

I think the choice between cloning each starter project would solve the issue, obviously restricting style guide import to the new starter project as that seems to be locked into the colour themes structure

Attachments
Screenshot 2025-03-05 at 3.38.54β€―pm.png
Screenshot 2025-03-05 at 3.38.50β€―pm.png
Screenshot 2025-03-05 at 3.38.21β€―pm.png

maybe im just hvaing a whinge with too much to do in my pipeline to learn a new structure πŸ˜‚ i can see how color schemes applied on section basis could be handy.. kind of like a shopify or wix builder, however i feel like I'll run into something where that will be restrictive.

Im not ready for change here πŸ˜‚πŸ‘€

I think you'd be the first one I've heard that liked the previous variables setup....we've simplified it tremendously and in our testing so far its been a real joy to use. I'd say give it a shot and let me know - always open to feedback. However, I would say months worth of work went into where we are right now and its unlikely to get reverted back to the old way. As you can probably imagine, a large part of the success of the export relies on a predictable/consistent variable system.

We have a new video coming soon for it as well, so hopefully that'll help

I decided to just jump in and use it, do love some things about it. Have already been finding myself creating my own classes for text color etc, for example an icon embed in a section that needs to be an accent colour in a relatively muted black colour scheme. But maybe i missed how I should assign those colors for accent in the style guide before import. To be honest I haven't watched the the most recent video on the style guide so may have missed some new classes that handle this. I probably went on a rant a little too early, my bad πŸ˜… i have the very good problem of having heaps of projects stacked up in my pipeline with little time to learn / retrain new team members that I just trained so freaked a little πŸ‘€ the import does save a chunk of time.

Only small tweak I'd request is some brands have waaaaaay more base colours than the style guide allows for, and the import brings in all of the shades of each base colour, most of which I feel like I'll never use for most brands, it creates a big confusing list for the client. In a future update maybe consider allowing more base colors in the brand, but toggling shades on or off in the style guide or the import to reduce the variables list?

Hi @Jake Oxley! Thanks for brining this one. I think is super important issue, as for 100% it will cause a lot of mess in such scenarios:

  1. Project with previous style guide is not aligned with new variables
  2. New project with new new style guide is not aligned with Client-First colors approach by default

cc @Matt

@Brian Woloszczak yeah I hear you. I'm getting more information and we're making some updates but updating the variables to match CF is likely not going to happen. We've done significant testing, research, and work in order to get where we are with variables today and its the foundations for the style guide builder export and future product features and is very complex. I think more information around our mindset on these changes would be helpful and I know we also have a color schemes video in the works that will help with some of that info as well so stay tuned. I appreciate you speaking up about this though.

Add a reply
Sign up and join the conversation on Slack