Improve documentation on customizing the CSS variables (e.g. the Container max widths)

[ckeeney]

We should consider having a dedicated page showing all the CSS variables with an example of how to override them. Otherwise, maybe there should be an example of how to override the variables on each component that has CSS variables.

Right now, someone looking at the Container docs has to go looking for the docs for overriding the CSS variables in another component.

The most intuitive docs pages one might look for documentation on adjusting the container widths unfortunately do not document how to override these variables:

• Overview - Styling
• Overview - Layout
• Theme - Overview
• Theme - Spacing

The original issue was really more of a support question. I've left it below for historical reasons but the issue above is more actionable.

Original issue:

The Container docs say

Container sizes use the following max-width values, which may be customized if needed.

It doesn't say how to do that though.

Container does expose a maxWidth prop, but that is only useful as a one-off need to use a different max-width. I expected the Theme component provider to expose a prop to customize the CSS variables or something but I did not see that either.

What is the best practice for customizing the Container max widths, or any other CSS variables for that matter.

[vladmoroz]

Fair, an example wouldn't hurt.

We document CSS variable customisation in the larger styling guides, e.g. here for fonts. You can use a similar approach, overriding those container variables on the .radix-themes element