Feature Request: Hex Color for Style Guide

I would like to request a feature for the Style Guide stack to include the Hex Colors. I notice that I constantly need to go back and check the colors that I set up because I am setting the background of a container stack (another request here too :wink: ) and need to match up the color(s) that I set up in Foundry. Sometimes I’m even working out of RW and need to match up the colors. I have tried setting up a note, but if the colors change, I forget to change the notes.

Part two: The container stack that one could adjust the background similar to how you can adjust the paragraph stack with the color. This is my favorite feature of Foundry btw, it has been so useful and made my work much easier. Keep up the awesome work @elixirgraphics Not sure if this is possible, but man it would be so useful.

1 Like

Displaying the Hex colour in the Style Guide would certainly be very useful feature and avoid using the buggy OSX colour picker that sometimes corrupts colours. Avoid using the colour picker when using RW.

I assume you mean to use the Style Guide colours to set a background colour? Is so, then yes that would be a powerful feature. Actually all Foundry stacks with colour options would really benefit from this. Being able to change an entire web site using the Foundry settings colours would be huge.

1 Like

Morning @dropgates! I’ll take a look at a good way to add the HEX values for a future update.

This is already possible, if I’m understanding correctly – Use the presets (primary, info, success, etc) for assigning colors to your page’s elements like buttons and whatnot… then when you change say the primary color in the main Foundry Control Center stack it will change in all of the elements that use that preset.

Not sure I’m following on this feature request.

After pulling up the code, I remember why I didn’t have the HEX code feature to begin with. The color is being set in the Control Center stack, not the Style Guide stack. This means the Style Guide stack does not have access to the variable that is the color setting directly. It is passed to the Style Guide as a CSS class name and not the actual value. Since javascript is not available in Edit Mode (and shouldn’t be) I can’t pick out the color value and display it, nor can I pass the value via a javascript variable.

I could use a Global Stacks variable but this is not something to be taken lightly as the variable has to be uniquely named as to not interact with other 3rd-party stacks. This would mean creating new variable names to ensure uniqueness, which would definitely lead to problems for users. Had Global Stacks variables existed when I originally created the Style Guide and Foundry Control Center stack I could have done it without much difficulty. So I’ll need to weigh causing users problems against the usefulness of the feature.


Addendum: As an additional note, even using a global variable it would not display the HEX value for the default presets as those are not “chosen” colors but instead values that are set in the SCSS files.

The issue is that many Foundry stacks don’t use the presets as an option for colour selection. The Banner and Backdrop stack for example.

Maybe this helps. I am changing the colors of backgrounds on the container stacks a lot lately and I have to figure out the color. Usually by the color picker. Most often I can get it fairly close, except I notice it if a block of color runs past the Navigation Bar, then I have to work a bit to get it exactly the same.

Most of my clients haven’t had any branding work done, so we’re picking colors from their logos and have no reference sheet. Although I have considered putting together a reference sheet of text and colors for every client. I’m still working out the best method for this.

1 Like

This is because of the way the presets in Bootstrap work. The Primary setting in the Control Center uses the Bootstrap primary color, which is applied to some elements in Bootstrap like buttons, but not others. Adding that primary setting to a banner for instance uses a different preset class. It could be done, but will take a little work. I’ll add it to the list of things to look at.

As for the HEX values being shown like you guys suggested, that probably won’t be possible since the variables aren’t shared.

1 Like

So you’re wanting the Container stack to have a background color picker? It isn’t really needed since RW has a color picker for that already. If you’re looking to have the presets for the Container background, like what @webdeersign suggested above, then that would be better placed in a stack like Backdrop. Using a modular approach is better for that stuff.

1 Like