feat: Logical properties

packages/gamut-styles/src/GamutProvider.tsx

@@ -7,7 +7,7 @@ import {
 } from '@emotion/react';
 import { MotionConfig } from 'framer-motion';
 import { setNonce } from 'get-nonce';
-import { useContext, useEffect, useRef } from 'react';
+import { useContext, useEffect, useMemo, useRef } from 'react';
 import * as React from 'react';
 
 import { createEmotionCache } from './cache';
@@ -29,6 +29,10 @@ export interface GamutProviderProps {
    * Pass a nonce to the cache to prevent CSP errors
    */
   nonce?: string;
+  /**
+   * Whether to use logical properties for the theme
+   */
+  useLogicalProperties?: boolean;
 }
 
 export const GamutContext = React.createContext<{
@@ -56,6 +60,7 @@ export const GamutProvider: React.FC<GamutProviderProps> = ({
   useGlobals = true,
   useCache = true,
   nonce,
+  useLogicalProperties = false,
 }) => {
   const { hasGlobals, hasCache } = useContext(GamutContext);
   const shouldCreateCache = useCache && !hasCache;
@@ -76,6 +81,7 @@ export const GamutProvider: React.FC<GamutProviderProps> = ({
   const contextValue = {
     hasGlobals: shouldInsertGlobals,
     hasCache: shouldCreateCache,
+    useLogicalProperties,
     nonce,
   };
 
@@ -88,10 +94,23 @@ export const GamutProvider: React.FC<GamutProviderProps> = ({
     </>
   );
 
-  const content = (
-    <ThemeProvider theme={theme}>
-      {nonce ? <MotionConfig nonce={nonce}>{children}</MotionConfig> : children}
-    </ThemeProvider>
+  // Merge useLogicalProperties into theme so variance can access it via props.theme.
+  const themeWithLogicalProperties = useMemo(
+    () => ({ ...theme, useLogicalProperties }),
+    [theme, useLogicalProperties]
+  );
+
+  const content = useMemo(
+    () => (
+      <ThemeProvider theme={themeWithLogicalProperties}>
+        {nonce ? (
+          <MotionConfig nonce={nonce}>{children}</MotionConfig>
+        ) : (
+          children
+        )}
+      </ThemeProvider>
+    ),
+    [themeWithLogicalProperties, nonce, children]
   );
 
   if (activeCache.current) {

packages/gamut-styles/src/__tests__/GamutProvider.test.tsx

@@ -62,7 +62,7 @@ describe(GamutProvider, () => {
       ),
     });
 
-    screen.getByText(JSON.stringify(theme));
+    screen.getByText(JSON.stringify({ ...theme, useLogicalProperties: false }));
   });
   it('it can have another GamutProvider as a child with creating multiple caches or globals', () => {
     renderView({