Unified configs for the project styles + theme.json + t2.json

[Sisanu]

When trying to sync the theme.json, the theme CSS, and t2.json files there are a few gaps we could solve by defining some global variables that would correlate all in a unified way. We could use something like this in the base theme.

:root {
	--theme-spacing-horizontal: 2rem;
	--theme-content-width: min(30rem, calc(100vw - 2 * var(--theme-spacing-horizontal)));
	--theme-wide-width: min(75rem, calc(100vw - 2 * var(--theme-spacing-horizontal)));
	--theme-max-full-width: 1440px; /* When zooming out, the content should not overflow this maximum size. */
}

.site-container,
.alignwide {
	margin: 0 auto;
	max-width: var(--theme-wide-width);
	width: 100%;
}

.entry-content > .alignfull {
	max-width: var(--theme-max-full-width);
}

In the theme.json the WordPress native sizes can be set like this:

{
	...
	"settings": {
		"layout": {
			"contentSize": "var(--theme-content-width)",
			"wideSize": "var(--theme-wide-width)"
		}
	}
	...
}

For the t2.json file, we could use some default settings that would inherit the theme config too. Not sure what to use from T2 at this point, if there is anything clearly documented. There is one mention about something that seems related to this https://github.com/DekodeInteraktiv/T2/issues/991

Basically, we could have a single place where we are defining the theme specifics, and the theme.json + t2.json could inherit these without the need to recompute/identify additional variables to override, etc.

In my opinion, the theme variables should be the driver, and the theme.json and t2 to inherit available values if defined (like t2 should only fall back when the theme variable is not set, but the theme should not rely on t2 variables). Any thought on this?

[stian-overasen]

It this issue still relevant @Sisanu ?

[Sisanu]

@stian-overasen, I don't think so. It's been more than 2 years since the issue was posted, and in the meanwhile, we switched to theme.json as the driver, which is even better. Please close.