[Resolved] Questions on global colours and dynamic typography

[Rachel]

Hi,
I am taking a look at the new Global Colours and Dynamic Typography and had some questions:

Font / Typography Manager
1. In the old version of GP, I selected system stack and all fonts were inherited from the body system stack selection. How do I do this in the font manager? Do I need to select a master font in the font manager? I can’t choose system stack there, so do I just leave it blank? If I set the base/body font to system stack do I select inherit for all others?

2. Will all typography options that are in use on the site be listed in the typography manager? If you don’t select one that is in use, what does it default to? For example, if you don’t currently use H6 anywhere, but then start using it, what typography options will it default to?

Global Colours
1. I currently have a php snippet to create a custom colour palette, and additional CSS to define those colours on the front end. Does the global colour palette replace this?

2. If so, can I remove my custom snippet, or will this cause issues for all the posts/pages/blocks etc that have used that custom colour palette? How can I repoint existing blocks and colours to the new global colour palette?

3. Should all the colours (for headings etc) ideally be defined using the global colour palette? I assume if you go through all the colours and select from the palette, that it will then automatically change all if required?

4. If I have custom css listed to specify colours, can I use the global colour variable instead of a hex number? For example instead of border-color: #f1f1f1 could I have border-color: global-color-8

Thanks!
Rachel

[David]

Hi there,

Fonts:

1. If you don’t set a font family for an Element then it will Inherit the Base (body) font.
If you don’t set a Base body font then that will simply default to the system stack.

So in the case of just using the default system stack, you don’t need to set any Fonts in the Font Manager or set any Font Families for the Elements.

2. In your example the H6 would inherit the base font family, and if you don’t change its sizes then the theme will set it to the base font size:

h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
}

Note the theme has some default font sizes in main.css for H1 – H5, so these will be applied if those sizes are unset:

h1 {
    font-size: 42px;
    margin-bottom: 20px;
    line-height: 1.2em;
    font-weight: 400;
    text-transform:none
}

h2 {
    font-size: 35px;
    margin-bottom: 20px;
    line-height: 1.2em;
    font-weight: 400;
    text-transform:none
}

h3 {
    font-size: 29px;
    margin-bottom: 20px;
    line-height: 1.2em;
    font-weight: 400;
    text-transform:none
}

h4 {
    font-size:24px
}

h5 {
    font-size:20px
}

Global Colors

1. The old snippet for adding default colors is no longer required, and will not work. So yes, you replace that with the Global Color pallete.

2. Yes … you will need to create your global color pallet and re-assign those global colors to each element.

3. Do you mean in the Block Editor ?

4. GP generates CSS variables for each color. For example:

CSS Variable Name: my-color
Color value: #123456

In your CSS you would reference that like so:

.element {
    color: var(--my-color);
}

For reference these are the default global color pallete variables:

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

[Rachel]

Hi David,

Thanks for your detailed reply – that is all very helpful.

Regarding the global colour palette, question 3 – what i mean is, in the customizer you can set the global palette, then you can also select the colours for each element. At the moment those colours are all the hex colours I originally chose before upgrading. But could you now change those colours to the relevant global colour palette variable, in order to standardise / simplify any future colour change?

Thanks,
Rachel

[Ying]

Hi Rachel,

But could you now change those colours to the relevant global colour palette variable, in order to standardise / simplify any future colour change?

Yes, it’s better to replace the HEX color you’ve set with the new variable colors from the color palette 🙂

[Rachel]

Great thanks Ying.

Just one more question. If I have previously used my old custom colour palette to select colours within content, will those colours still be applied on existing content, or will they change with the new colour palette? I know I will need to change reusable blocks, elements etc, but will old content be okay?

Thanks

[Ying]

my old custom colour palette

How did you do that? If it’s set by a plugin, then as long as the plugin is activated, the colors should still be there.

Let me know.

[Rachel]

I used a php snippet to create a custom color palette, and selected colors from the palette inside the block editor when creating posts/pages.

[David]

Any old colors that were added to the Themes colors or within the post editor will remain intact. They just won’t be dynamic. Ideally you want to update the Global Color pallet to match your previous pallet and then re-edit all colors swapping the old color for the new global color.

[Rachel]

Okay thanks for your help – this makes sense. Excited to make the changes!

[David]

Glad we could be of help 🙂

[Author]

Posts