Presets (colors and font sizes) work this way:

• generates a classname and some styles (potentially CSS vars)
• Apply the classname to the element where they are applied.

The default layout works a bit differently

• Styles are injected inline with a unique identifier attached to each container, this maps the behavior of custom values instead of presets.

Can we update the default layout to use a "preset-like" approach, this is:

• generate a classname for the default preset and add the styles to the theme.json stylesheet.
• apply that classname to the places where it's used.

The goal here is to clarify that it's actually a preset but making it work like all presets and also to have purer CSS. (less inline ones)

cc @ntsekouras @oandregal @jorgefilipecosta