What is the name of the field on the color selector?

Hi there,

Not 100% sure if I understand.

Can you show a screenshot of what you are referring to here?
https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

The question is about the GLOBAL COLORS part of the CUSTOMIZE page in the THEME.

?????????????????????????????????????
( CSS VARIABLE NAME )
?????????????????????????????????????
It has a lock icon in the field on the right side of the field.
???????????????????????????????????????

An example of an item ( a varialble name ) inside the ( CSS VARIABLE NAME ) field is [ accent-1 OR base-2 OR contrast ]

What percentage of this do you know what I am referring to? 0% to 100% ?

I really want to get some help with this. So if you can let me know what part of the question is not clear?

Maybe this is something that is not important or the way I am trying to describe is not making any sense. I just wanted to know about the variable names used in generate press generate blocks.
I mean the field has a lock on it?
I can add a variable but the question is really about the CSS GLOBAL VARIABLE names used in the templates.

Is there a list of standard variables names used in the CSS GLOBAL VARIABLE field ?

Just reply with your best guess. Thanks

Hi there,

the Theme comes with 7 pre-defined color variables.
They are named as follows with their default values.

--contrast: #222222;
--contrast-2: #575760;
--contrast-3: #b2b2be;
--base: #f0f0f0;
--base-2: #f7f8f9;
--base-3: #ffffff;
--accent: #1e73be;

You can add any new global colors and give them any variable names that you want, just avoid duplicating the ones listed above. GP does the hyphenation for you. For example, if you type primary color, GP will automatically output --primary-color which is the required syntax for a CSS Variable.

Variable names have a lock beside them, to stop them being accidentally edited. Editing a variable name will not update any elements that have the variable color assigned to them, they will still have the old name leading to possible breakage.

Color Variables are simply placeholders, they store whatever HEX or RGBA value yo set.
If you want:
a. a Light to dark scale of colors eg. primary-10 primary-30 primary-50 etc. then you create a global color for each step.
b. if you want a solid color and an RGBA semi opacque color then again you would need to create a global color for each.

In the GP Site Library we use Global Colors, and we generally stick to the list provided above, but with the occasional additions.

But ultimately you can create your own Global Color pallet and name them how you see fit.

Thanks for list. The terminology for varialbes, css color, color and pallets is hard to research. The global names in the list are used by some themes while others use a different list. I was trying to equate the list from one standard to another.

Some of the blocks and themes? in the library dont adhere to that list at all. So the color palette i import is useless. The colors are all off.
I just ended up just copying the layout only. The themes are nice but they need to be standardized to GP otherwise they look good but are
Another weird thing about the color names, there are hooks for names not used in the color customize area. Names beyond the base set listed above.
Like accent-3 or base-3...

When I added a new color variable names accent-2, I noticed that it changed the gradient color used by a block that I had created and customized earlier. eg A new container with gradient background colors I customized in the color selector dialog while editing.
The color variable name accent-2 was not available when I selected the color value? It seems like the color variable name were hooked automatically to the gradient color?

I hope this make sense.

The sites in the library should all have the same base set of variable names, with additions if the designer requires them, for example here is the Mason site list:

:root {
    --contrast: #2b2b2b;
    --contrast-2: #2e3d4d;
    --contrast-3: #888888;
    --base-2: #fafbfc;
    --base-3: #ffffff;
    --accent: #5c7a99;
    --accent-2: #cfdae6;
    --accent-3: #cc5252;
    --accent-2-1: rgba(207,218,230,0.4);
    --accent-2-2: rgba(207,218,230,0.2);
    --accent-3-1: rgba(204,82,82,0.3);
}

In this instance the designer needed additional accent colors and rgba versions of.

Now the Constructions site, where more darker colors were required:

:root {
    --contrast: #0b0b0b;
    --contrast-2: #161616;
    --contrast-3: #272727;
    --contrast-4: #7b7b7b;
    --contrast-5: #b2b2b2;
    --base: #f8f8f8;
    --base-2: #ffffff;
    --accent: #ff6606;
}

So the general method we apply is the same, or should be, across all sites. We would be loathe to limit our designers color pallet size to just the base set in the GP Theme.

If you import a site from the library then you should check the Color pallet in the Customizer, or for a quick view of the CSS variables, open the dev tools and check the HTML element as we apply the colors to the root.

If you copied blocks from another Site in our library then those may well have been given a color variable. A variable that only exists in the CSS styling of that block.

Couple of pointers:

1. If you're using an imported site:
a. Make edits to the color values only in the Customizer > Colors. If you leave the variables intact then you won't have any color breakages
b. Add additional colors if you need.
c. If you remove a color or change a variable name, you will need to manually replace those colors in your site. Which can be tedious with a prebuilt site.

2. If you're building from scratch:
a. Create a color pallet with a variable name convention that suits you.

Great info,
The extra variables and the naming convention are solid

You're welcome