Add CSS variables to replace values

toptal · Oct 2, 2024 · 08902c5 · 08902c5
1 parent 289e1f4
commit 08902c5
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/packages/base/Page/src/Page/Page.tsx b/packages/base/Page/src/Page/Page.tsx
@@ -48,7 +48,16 @@ export const Page = forwardRef<HTMLDivElement, Props>(function Page(
       {...rest}
       ref={ref}
       className={cx(classes.root, className)}
-      style={{ ...style, '--header-height': '3.5rem' } as React.CSSProperties}
+      style={
+        {
+          ...style,
+          '--header-height': '3.5rem',
+          '--content-width-wide': '90em',
+          '--content-width': '75em',
+          '--content-padding-horizontal': '2em',
+          '--content-mobile-padding-horizontal': '1em',
+        } as React.CSSProperties
+      }
     >
       <PageContext.Provider value={{ width, fullWidth }}>
         <PageHamburgerContextProvider hamburgerId={hamburgerId}>

diff --git a/packages/base/Page/src/PageFooter/PageFooter.tsx b/packages/base/Page/src/PageFooter/PageFooter.tsx
@@ -26,7 +26,7 @@ export const PageFooter = forwardRef<HTMLElement, Props>(function PageFooter(
     'box-border',
     'flex justify-between xs:max-lg:flex-col',
     'text-white text-md leading-[1em]',
-    'mx-auto pt-2 pb-6 px-[1em] md:px-[2em]'
+    'mx-auto pt-2 pb-6 px-[--content-mobile-padding-horizontal] md:px-[--content-padding-horizontal]'
   )
 
   return (

diff --git a/packages/base/Page/src/PageFooter/styles.ts b/packages/base/Page/src/PageFooter/styles.ts
@@ -6,8 +6,8 @@ export const getMaxWidthClass = ({ fullWidth, width }: PageContextProps) => {
   }
 
   if (width === 'wide') {
-    return 'max-w-[90em]'
+    return 'max-w-[--content-width-wide]'
   }
 
-  return 'max-w-[75em]'
+  return 'max-w-[--content-width]'
 }