search

WordPress / twentytwentyfive

145 stars 103 forks source link

Add additional font sizes as a custom CSS property in theme.json #170

Closed carolinan closed 1 month ago

carolinan commented 2 months ago

The 70px font size is used in some patterns, but not used in the typography preset. Adding more font sizes to the preset would change the font size option to a dropdown, which should be avoided.

Instead of hardcoding the 70px font size in the patterns where it is needed, the theme should use a CSS variable. That way, if the size value needs to be changed, it can be changed from one place, theme.json.

In theme.json, within the settings section, add a new custom object and add the font size value. I suggest using the slug "font-size--huge" and the value 70px. If we want to make this fluid, though, this would be a good time.

Then, replace any instance of the 70px font size in the patterns with the new CSS custom property.

Resources: https://developer.wordpress.org/themes/global-settings-and-styles/settings/custom/

carolinan commented 2 months ago

Should we add the heading font sizes too? In the 404 template, the suggested markup used an H2 heading, and to improve the accessibility I needed to change it to an H1. And then the only way I could make it be the same size as requested in the design was to include the pixel size in the template.

juanfra commented 2 months ago

I believe it'll be necessary as we keep moving forward with fixing accessibility issues like this one.

Personally, I think it'll help to have a more organized codebase, and we'll avoid having hardcoded values all over the place.

carolinan commented 1 month ago

I am finding it difficult to come up with good names / slugs. They shouldn't be called font-size--H2 etc since they will be used for different blocks. font-size--1, font-size--2 maybe?