An idea that Brian had about moving the main accent color to a variable so it could be changed in one location and it would roll out for the site.
I did not want to get too "fancy" and in turn make it harder and confusing for another dev. So instead of creating a new config file, I kept everything within the TW config.
The two main locations this helps with is the buttons.js and the theme.json files. With this change, we no longer have to update the color in those files as they are now dynamic.
The steps to update the color would be to change accentColor to whatever color name you want it to be. Then update all the colors under [accentColor]. You have now restyled the theme.
The one blocker with this is that the vars don't pull over into the CSS without a lot of work. The effort to make that happen may make it more confusing to style than it would help. So for that case I changed all the sky colors in the CSS to gray. When we build out a theme we will need to update a lot of the style anyways, so felt like a good compromise.
Issues
NA
Testing Instructions
Update the accentColor so something. Does not really matter as the JS and theme.json are pulling in that var but allows you to use that var name in your CSS.
Summary
An idea that Brian had about moving the main accent color to a variable so it could be changed in one location and it would roll out for the site.
I did not want to get too "fancy" and in turn make it harder and confusing for another dev. So instead of creating a new config file, I kept everything within the TW config. The two main locations this helps with is the
buttons.jsand thetheme.jsonfiles. With this change, we no longer have to update the color in those files as they are now dynamic. The steps to update the color would be to changeaccentColorto whatever color name you want it to be. Then update all the colors under[accentColor]. You have now restyled the theme.The one blocker with this is that the vars don't pull over into the CSS without a lot of work. The effort to make that happen may make it more confusing to style than it would help. So for that case I changed all the
skycolors in the CSS togray. When we build out a theme we will need to update a lot of the style anyways, so felt like a good compromise.Issues
Testing Instructions
accentColorso something. Does not really matter as the JS and theme.json are pulling in that var but allows you to use that var name in your CSS.[accentColor].Screenshots