feat: Updates to ThemeProvider, tokens, and transform to allow Logical vs Physical prop resolution

packages/gamut-styles/src/GamutProvider.tsx

@@ -27,6 +27,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<{
@@ -47,6 +51,7 @@ export const GamutProvider: React.FC<GamutProviderProps> = ({
   useGlobals = true,
   useCache = true,
   nonce,
+  useLogicalProperties = true,
 }) => {
   const { hasGlobals, hasCache } = useContext(GamutContext);
   const shouldCreateCache = useCache && !hasCache;
@@ -60,6 +65,7 @@ export const GamutProvider: React.FC<GamutProviderProps> = ({
   const contextValue = {
     hasGlobals: shouldInsertGlobals,
     hasCache: shouldCreateCache,
+    useLogicalProperties,
   };
 
   const globals = shouldInsertGlobals && (
@@ -71,12 +77,20 @@ export const GamutProvider: React.FC<GamutProviderProps> = ({
     </>
   );
 
+  // Merge useLogicalProperties into theme so variance can access it via props.theme
+  const themeWithLogicalProperties = {
+    ...theme,
+    useLogicalProperties,
+  };
+
   if (activeCache.current) {
     return (
       <GamutContext.Provider value={contextValue}>
         <CacheProvider value={activeCache.current}>
           {globals}
-          <ThemeProvider theme={theme}>{children}</ThemeProvider>
+          <ThemeProvider theme={themeWithLogicalProperties}>
+            {children}
+          </ThemeProvider>
         </CacheProvider>
       </GamutContext.Provider>
     );
@@ -85,7 +99,9 @@ export const GamutProvider: React.FC<GamutProviderProps> = ({
   return (
     <GamutContext.Provider value={contextValue}>
       {globals}
-      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+      <ThemeProvider theme={themeWithLogicalProperties}>
+        {children}
+      </ThemeProvider>
     </GamutContext.Provider>
   );
 };

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

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

packages/gamut-styles/src/variance/config.ts

@@ -1,4 +1,4 @@
-import { transformSize } from '@codecademy/variance';
+import { getPropertyMode, transformSize } from '@codecademy/variance';
 
 export const color = {
   color: { property: 'color', scale: 'colors' },
@@ -233,36 +233,108 @@ export const margin = {
   m: { property: 'margin', scale: 'spacing' },
   mx: {
     property: 'margin',
-    properties: ['marginLeft', 'marginRight'],
+    properties: {
+      physical: ['marginLeft', 'marginRight'],
+      logical: ['marginInlineStart', 'marginInlineEnd'],
+    },
+    resolveProperty: getPropertyMode,
     scale: 'spacing',
   },
   my: {
     property: 'margin',
-    properties: ['marginTop', 'marginBottom'],
+    properties: {
+      physical: ['marginTop', 'marginBottom'],
+      logical: ['marginBlockStart', 'marginBlockEnd'],
+    },
+    resolveProperty: getPropertyMode,
     scale: 'spacing',
   },
-  mt: { property: 'marginTop', scale: 'spacing' },
-  mb: { property: 'marginBottom', scale: 'spacing' },
-  mr: { property: 'marginRight', scale: 'spacing' },
-  ml: { property: 'marginLeft', scale: 'spacing' },
+  mt: {
+    property: {
+      physical: 'marginTop',
+      logical: 'marginBlockStart',
+    },
+    scale: 'spacing',
+    resolveProperty: getPropertyMode,
+  },
+  mb: {
+    property: {
+      physical: 'marginBottom',
+      logical: 'marginBlockEnd',
+    },
+    scale: 'spacing',
+    resolveProperty: getPropertyMode,
+  },
+  mr: {
+    property: {
+      physical: 'marginRight',
+      logical: 'marginInlineEnd',
+    },
+    scale: 'spacing',
+    resolveProperty: getPropertyMode,
+  },
+  ml: {
+    property: {
+      physical: 'marginLeft',
+      logical: 'marginInlineStart',
+    },
+    scale: 'spacing',
+    resolveProperty: getPropertyMode,
+  },
 } as const;
 
 export const padding = {
   p: { property: 'padding', scale: 'spacing' },
   px: {
     property: 'padding',
-    properties: ['paddingLeft', 'paddingRight'],
+    properties: {
+      physical: ['paddingLeft', 'paddingRight'],
+      logical: ['paddingInlineStart', 'paddingInlineEnd'],
+    },
     scale: 'spacing',
+    resolveProperty: getPropertyMode,
   },
   py: {
     property: 'padding',
-    properties: ['paddingTop', 'paddingBottom'],
+    properties: {
+      physical: ['paddingTop', 'paddingBottom'],
+      logical: ['paddingBlockStart', 'paddingBlockEnd'],
+    },
+    scale: 'spacing',
+    resolveProperty: getPropertyMode,
+  },
+  pt: {
+    property: {
+      physical: 'paddingTop',
+      logical: 'paddingBlockStart',
+    },
+    scale: 'spacing',
+    resolveProperty: getPropertyMode,
+  },
+  pb: {
+    property: {
+      physical: 'paddingBottom',
+      logical: 'paddingBlockEnd',
+    },
+    scale: 'spacing',
+    resolveProperty: getPropertyMode,
+  },
+  pr: {
+    property: {
+      physical: 'paddingRight',
+      logical: 'paddingInlineEnd',
+    },
+    scale: 'spacing',
+    resolveProperty: getPropertyMode,
+  },
+  pl: {
+    property: {
+      physical: 'paddingLeft',
+      logical: 'paddingInlineStart',
+    },
     scale: 'spacing',
+    resolveProperty: getPropertyMode,
   },
-  pt: { property: 'paddingTop', scale: 'spacing' },
-  pb: { property: 'paddingBottom', scale: 'spacing' },
-  pr: { property: 'paddingRight', scale: 'spacing' },
-  pl: { property: 'paddingLeft', scale: 'spacing' },
 } as const;
 
 export const space = {

packages/gamut-tests/src/index.tsx

@@ -6,13 +6,19 @@ import {
 import overArgs from 'lodash/overArgs';
 import * as React from 'react';
 
-// See https://www.notion.so/codecademy/Frontend-Unit-Tests-1cbf4e078a6647559b4583dfb6d3cb18 for more info
+// See https://skillsoftdev.atlassian.net/wiki/spaces/779a16d9c7ea452eab11b39cbbe771ce/pages/4441315387/Frontend+Unit+Tests for more info
 
-export const MockGamutProvider: React.FC<{ children?: React.ReactNode }> = ({
-  children,
-}) => {
+export const MockGamutProvider: React.FC<{
+  children?: React.ReactNode;
+  useLogicalProperties?: boolean;
+}> = ({ children, useLogicalProperties }) => {
   return (
-    <GamutProvider theme={theme} useCache={false} useGlobals={false}>
+    <GamutProvider
+      theme={theme}
+      useCache={false}
+      useGlobals={false}
+      useLogicalProperties={useLogicalProperties}
+    >
       {children}
     </GamutProvider>
   );

packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedNestedCheckboxes/__tests__/ConnectedNestedCheckboxes.test.tsx

@@ -1,6 +1,6 @@
-import { setupRtl } from '@codecademy/gamut-tests';
+import { MockGamutProvider, setupRtl } from '@codecademy/gamut-tests';
 import { fireEvent } from '@testing-library/dom';
-import { act } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { ConnectedForm, ConnectedFormGroup, SubmitButton } from '../../..';
@@ -90,21 +90,33 @@ describe('ConnectedNestedCheckboxes', () => {
       view.getByLabelText('Fastify');
     });
 
-    it('should render checkboxes with proper indentation levels', () => {
-      const { view } = renderView();
-
-      const frontendCheckbox = view
-        .getByLabelText('Frontend Technologies')
-        .closest('li');
-      const reactCheckbox = view.getByLabelText('React').closest('li');
-      const nodeCheckbox = view.getByLabelText('Node.js').closest('li');
-      const expressCheckbox = view.getByLabelText('Express.js').closest('li');
-
-      expect(frontendCheckbox).toHaveStyle({ marginLeft: '0' });
-      expect(reactCheckbox).toHaveStyle({ marginLeft: '1.5rem' });
-      expect(nodeCheckbox).toHaveStyle({ marginLeft: '1.5rem' });
-      expect(expressCheckbox).toHaveStyle({ marginLeft: '3rem' });
-    });
+    it.each([
+      { useLogicalProperties: true, marginLeft: 'marginInlineStart' },
+      { useLogicalProperties: false, marginLeft: 'marginLeft' },
+    ])(
+      'should render checkboxes with proper indentation levels (useLogicalProperties: $useLogicalProperties)',
+      ({ useLogicalProperties, marginLeft }) => {
+        render(
+          <MockGamutProvider useLogicalProperties={useLogicalProperties}>
+            <TestForm />
+          </MockGamutProvider>
+        );
+
+        const frontendCheckbox = screen
+          .getByLabelText('Frontend Technologies')
+          .closest('li');
+        const reactCheckbox = screen.getByLabelText('React').closest('li');
+        const nodeCheckbox = screen.getByLabelText('Node.js').closest('li');
+        const expressCheckbox = screen
+          .getByLabelText('Express.js')
+          .closest('li');
+
+        expect(frontendCheckbox).toHaveStyle({ [marginLeft]: '0' });
+        expect(reactCheckbox).toHaveStyle({ [marginLeft]: '1.5rem' });
+        expect(nodeCheckbox).toHaveStyle({ [marginLeft]: '1.5rem' });
+        expect(expressCheckbox).toHaveStyle({ [marginLeft]: '3rem' });
+      }
+    );
 
     it('should render with unique IDs for each checkbox', () => {
       const { view } = renderView();