Define variables through arbitrary properties

toptal · Oct 3, 2024 · 50fc199 · 50fc199
1 parent a678317
commit 50fc199
Show file tree

Hide file tree

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

diff --git a/packages/base/Page/src/Page/__snapshots__/test.tsx.snap b/packages/base/Page/src/Page/__snapshots__/test.tsx.snap
@@ -6,8 +6,7 @@ exports[`Page renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="Page-root"
-      style="--header-height: 3.5rem; --content-width-wide: 90em; --content-width: 75em; --content-padding-horizontal: 2em; --content-mobile-padding-horizontal: 1em;"
+      class="Page-root [--content-padding md:[--content-padding [--header [--content-width [--content"
     >
       <div>
         Test

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-[--content-mobile-padding-horizontal] md:px-[--content-padding-horizontal]'
+    'mx-auto pt-2 pb-6 px-[--content-padding-horizontal]'
   )
 
   return (