[v4] feat(theme): Content width css variable for easier customization (#3767)

* feat(theme): Content width css variable for easier customization

This moves the content width that was used throughout nextra
`max-w-[90rem]` to a css variable. This way the changing the value in
the future should be easier, but it also makes it possible to customize
the max width of the content for people using nextra without needing to
overload a tailwind class in a hacky way.

* chore: Adding changeset

* chore: Tweak docs css to use variable

* Update packages/nextra-theme-docs/src/components/footer/index.tsx

Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>

* Update packages/nextra-theme-docs/src/components/footer/index.tsx

Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>

* Update packages/nextra-theme-docs/src/components/navbar/index.tsx

Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>

* Update packages/nextra-theme-docs/src/mdx-components/index.tsx

Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>

* Update .changeset/afraid-foxes-deny.md

Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>

---------

Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>

Author: elliotcourant

.changeset/afraid-foxes-deny.md

@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': minor
+---
+
+content width could be configured via CSS `--nextra-content-width` variable

docs/app/page.css

@@ -1,5 +1,5 @@
 .content-container {
-  max-width: 90rem;
+  max-width: var(--nextra-content-width);
   padding-left: max(env(safe-area-inset-left), 1.5rem);
   padding-right: max(env(safe-area-inset-right), 1.5rem);
   margin: 0 auto;

packages/nextra-theme-docs/src/components/footer/index.tsx

@@ -12,15 +12,15 @@ export const Footer: FC<ComponentProps<'footer'>> = ({
   return (
     <div className="x:bg-gray-100 x:pb-[env(safe-area-inset-bottom)] x:dark:bg-neutral-900 x:print:bg-transparent">
       <Switchers>
-        <div className="x:mx-auto x:flex x:max-w-[90rem] x:gap-2 x:py-2 x:px-4">
+        <div className="x:mx-auto x:flex x:max-w-(--nextra-content-width) x:gap-2 x:py-2 x:px-4">
           <LocaleSwitch />
           <ThemeSwitch />
         </div>
       </Switchers>
       <hr className="nextra-border" />
       <footer
         className={cn(
-          'x:mx-auto x:flex x:max-w-[90rem] x:justify-center x:py-12 x:text-gray-600 x:dark:text-gray-400 x:md:justify-start',
+          'x:mx-auto x:flex x:max-w-(--nextra-content-width) x:justify-center x:py-12 x:text-gray-600 x:dark:text-gray-400 x:md:justify-start',
           'x:pl-[max(env(safe-area-inset-left),1.5rem)] x:pr-[max(env(safe-area-inset-right),1.5rem)]',
           className
         )}

packages/nextra-theme-docs/src/components/navbar/index.tsx

@@ -52,7 +52,7 @@ export const Navbar: FC<NavbarProps> = props => {
       />
       <nav
         style={{ height: 'var(--nextra-navbar-height)' }}
-        className="x:mx-auto x:flex x:max-w-[90rem] x:items-center x:justify-end x:gap-4 x:pl-[max(env(safe-area-inset-left),1.5rem)] x:pr-[max(env(safe-area-inset-right),1.5rem)]"
+        className="x:mx-auto x:flex x:max-w-(--nextra-content-width) x:items-center x:justify-end x:gap-4 x:pl-[max(env(safe-area-inset-left),1.5rem)] x:pr-[max(env(safe-area-inset-right),1.5rem)]"
       >
         {logoLink ? (
           <NextLink

packages/nextra-theme-docs/src/mdx-components/index.tsx

@@ -89,7 +89,7 @@ const DEFAULT_COMPONENTS = getNextraMDXComponents({
       value: removeLinks(item.value)
     }))
     return (
-      <div className="x:mx-auto x:flex x:max-w-[90rem]">
+      <div className="x:mx-auto x:flex x:max-w-(--nextra-content-width)">
         <Sidebar toc={toc} />
 
         <ClientWrapper toc={toc} {...props}>

packages/nextra/src/client/components/head.tsx

@@ -72,6 +72,7 @@ const Head_: FC<HeadProps> = ({ children, ...props }) => {
   --nextra-primary-saturation: ${color.saturation.light}%;
   --nextra-primary-lightness: ${color.lightness.light}%;
   --nextra-bg: ${backgroundColor.light};
+  --nextra-content-width: 90rem;
 }
 .dark {
   --nextra-primary-hue: ${color.hue.dark}deg;