@codecademy/gamut-styles 17.11.1-alpha.f03f14.0 → 17.11.1-alpha.fb9da9.0

package/dist/ColorMode.d.ts

@@ -338,12 +338,20 @@ export declare const providerProps: import("@codecademy/variance/dist/types/conf
         readonly scale: "spacing";
     };
     readonly mr: {
-        readonly property: "marginRight";
+        readonly property: {
+            readonly physical: "marginRight";
+            readonly logical: "marginInlineEnd";
+        };
         readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     readonly ml: {
-        readonly property: "marginLeft";
+        readonly property: {
+            readonly physical: "marginLeft";
+            readonly logical: "marginInlineStart";
+        };
         readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
 }>>, import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
     readonly border: {
@@ -801,12 +809,20 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
         readonly scale: "spacing";
     }>;
     mr?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "marginRight";
+        readonly property: {
+            readonly physical: "marginRight";
+            readonly logical: "marginInlineEnd";
+        };
         readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     }>;
     ml?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "marginLeft";
+        readonly property: {
+            readonly physical: "marginLeft";
+            readonly logical: "marginInlineStart";
+        };
         readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     }>;
     borderX?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "border";
@@ -1211,12 +1227,20 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
         readonly scale: "spacing";
     }>;
     mr?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "marginRight";
+        readonly property: {
+            readonly physical: "marginRight";
+            readonly logical: "marginInlineEnd";
+        };
         readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     }>;
     ml?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "marginLeft";
+        readonly property: {
+            readonly physical: "marginLeft";
+            readonly logical: "marginInlineStart";
+        };
         readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     }>;
     borderX?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "border";

package/dist/GamutProvider.d.ts

@@ -15,6 +15,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 declare const GamutContext: React.Context<{
     hasGlobals?: boolean | undefined;

package/dist/GamutProvider.js

@@ -18,7 +18,8 @@ export const GamutProvider = ({
   variables,
   useGlobals = true,
   useCache = true,
-  nonce
+  nonce,
+  useLogicalProperties = true
 }) => {
   const {
     hasGlobals,
@@ -33,7 +34,8 @@ export const GamutProvider = ({
   } : {})));
   const contextValue = {
     hasGlobals: shouldInsertGlobals,
-    hasCache: shouldCreateCache
+    hasCache: shouldCreateCache,
+    useLogicalProperties
   };
   const globals = shouldInsertGlobals && /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Typography, {
@@ -46,13 +48,19 @@ export const GamutProvider = ({
       variables: variables
     })]
   });
+
+  // Merge useLogicalProperties into theme so variance can access it via props.theme
+  const themeWithLogicalProperties = {
+    ...theme,
+    useLogicalProperties
+  };
   if (activeCache.current) {
     return /*#__PURE__*/_jsx(GamutContext.Provider, {
       value: contextValue,
       children: /*#__PURE__*/_jsxs(CacheProvider, {
         value: activeCache.current,
         children: [globals, /*#__PURE__*/_jsx(ThemeProvider, {
-          theme: theme,
+          theme: themeWithLogicalProperties,
           children: children
         })]
       })
@@ -61,7 +69,7 @@ export const GamutProvider = ({
   return /*#__PURE__*/_jsxs(GamutContext.Provider, {
     value: contextValue,
     children: [globals, /*#__PURE__*/_jsx(ThemeProvider, {
-      theme: theme,
+      theme: themeWithLogicalProperties,
       children: children
     })]
   });

package/dist/variance/config.d.ts

@@ -494,12 +494,20 @@ export declare const margin: {
         readonly scale: "spacing";
     };
     readonly mr: {
-        readonly property: "marginRight";
+        readonly property: {
+            readonly physical: "marginRight";
+            readonly logical: "marginInlineEnd";
+        };
         readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     readonly ml: {
-        readonly property: "marginLeft";
+        readonly property: {
+            readonly physical: "marginLeft";
+            readonly logical: "marginInlineStart";
+        };
         readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
 };
 export declare const padding: {
@@ -588,12 +596,20 @@ export declare const space: {
         readonly scale: "spacing";
     };
     readonly mr: {
-        readonly property: "marginRight";
+        readonly property: {
+            readonly physical: "marginRight";
+            readonly logical: "marginInlineEnd";
+        };
         readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     readonly ml: {
-        readonly property: "marginLeft";
+        readonly property: {
+            readonly physical: "marginLeft";
+            readonly logical: "marginInlineStart";
+        };
         readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
 };
 export declare const all: {
@@ -1008,12 +1024,20 @@ export declare const all: {
         readonly scale: "spacing";
     };
     mr: {
-        readonly property: "marginRight";
+        readonly property: {
+            readonly physical: "marginRight";
+            readonly logical: "marginInlineEnd";
+        };
         readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     ml: {
-        readonly property: "marginLeft";
+        readonly property: {
+            readonly physical: "marginLeft";
+            readonly logical: "marginInlineStart";
+        };
         readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     fontFamily: {
         readonly property: "fontFamily";

package/dist/variance/config.js

@@ -1,4 +1,4 @@
-import { transformSize } from '@codecademy/variance';
+import { getPropertyMode, transformSize } from '@codecademy/variance';
 export const color = {
   color: {
     property: 'color',
@@ -455,12 +455,20 @@ export const margin = {
     scale: 'spacing'
   },
   mr: {
-    property: 'marginRight',
-    scale: 'spacing'
+    property: {
+      physical: 'marginRight',
+      logical: 'marginInlineEnd'
+    },
+    scale: 'spacing',
+    resolveProperty: getPropertyMode
   },
   ml: {
-    property: 'marginLeft',
-    scale: 'spacing'
+    property: {
+      physical: 'marginLeft',
+      logical: 'marginInlineStart'
+    },
+    scale: 'spacing',
+    resolveProperty: getPropertyMode
   }
 };
 export const padding = {

package/dist/variance/props.d.ts

@@ -393,12 +393,20 @@ export declare const space: import("@codecademy/variance/dist/types/config").Par
         readonly scale: "spacing";
     };
     readonly mr: {
-        readonly property: "marginRight";
+        readonly property: {
+            readonly physical: "marginRight";
+            readonly logical: "marginInlineEnd";
+        };
         readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     readonly ml: {
-        readonly property: "marginLeft";
+        readonly property: {
+            readonly physical: "marginLeft";
+            readonly logical: "marginInlineStart";
+        };
         readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
 }>>;
 export declare const border: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
@@ -590,12 +598,20 @@ export declare const margin: import("@codecademy/variance/dist/types/config").Pa
         readonly scale: "spacing";
     };
     readonly mr: {
-        readonly property: "marginRight";
+        readonly property: {
+            readonly physical: "marginRight";
+            readonly logical: "marginInlineEnd";
+        };
         readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     readonly ml: {
-        readonly property: "marginLeft";
+        readonly property: {
+            readonly physical: "marginLeft";
+            readonly logical: "marginInlineStart";
+        };
         readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
 }>>;
 /** CSS */
@@ -1011,12 +1027,20 @@ export declare const css: import("@codecademy/variance/dist/types/config").CSS<i
         readonly scale: "spacing";
     };
     mr: {
-        readonly property: "marginRight";
+        readonly property: {
+            readonly physical: "marginRight";
+            readonly logical: "marginInlineEnd";
+        };
         readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     ml: {
-        readonly property: "marginLeft";
+        readonly property: {
+            readonly physical: "marginLeft";
+            readonly logical: "marginInlineStart";
+        };
         readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     fontFamily: {
         readonly property: "fontFamily";
@@ -1465,12 +1489,20 @@ export declare const variant: import("@codecademy/variance/dist/types/config").V
         readonly scale: "spacing";
     };
     mr: {
-        readonly property: "marginRight";
+        readonly property: {
+            readonly physical: "marginRight";
+            readonly logical: "marginInlineEnd";
+        };
         readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     ml: {
-        readonly property: "marginLeft";
+        readonly property: {
+            readonly physical: "marginLeft";
+            readonly logical: "marginInlineStart";
+        };
         readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     fontFamily: {
         readonly property: "fontFamily";
@@ -1919,12 +1951,20 @@ export declare const states: import("@codecademy/variance/dist/types/config").St
         readonly scale: "spacing";
     };
     mr: {
-        readonly property: "marginRight";
+        readonly property: {
+            readonly physical: "marginRight";
+            readonly logical: "marginInlineEnd";
+        };
         readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     ml: {
-        readonly property: "marginLeft";
+        readonly property: {
+            readonly physical: "marginLeft";
+            readonly logical: "marginInlineStart";
+        };
         readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     fontFamily: {
         readonly property: "fontFamily";

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@codecademy/gamut-styles",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "17.11.1-alpha.f03f14.0",
+  "version": "17.11.1-alpha.fb9da9.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "dependencies": {
-    "@codecademy/variance": "0.25.1-alpha.f03f14.0",
+    "@codecademy/variance": "0.25.1-alpha.fb9da9.0",
     "@emotion/is-prop-valid": "^1.1.0",
     "polished": "^4.1.2"
   },
@@ -34,5 +34,5 @@
   "scripts": {
     "build": "nx build @codecademy/gamut-styles"
   },
-  "gitHead": "feb192c5ea19fd0c702a59d2f00c3a78533f1ca5"
+  "gitHead": "4d8170b39849e26fa1cb3d1ab5bbe9135e8a87b0"
 }