@codecademy/gamut-styles 17.12.0-alpha.f66feb.0 → 17.12.0

package/dist/GamutProvider.js

@@ -1,5 +1,7 @@
 import { CacheProvider, ThemeProvider } from '@emotion/react';
-import { useContext, useRef } from 'react';
+import { MotionConfig } from 'framer-motion';
+import { setNonce } from 'get-nonce';
+import { useContext, useEffect, useMemo, useRef } from 'react';
 import * as React from 'react';
 import { createEmotionCache } from './cache';
 import { Reboot, Typography } from './globals';
@@ -11,6 +13,11 @@ export const GamutContext = /*#__PURE__*/React.createContext({
   hasCache: false
 });
 GamutContext.displayName = 'GamutContext';
+
+/**
+ * Returns the CSP nonce passed to GamutProvider, if any.
+ */
+export const useNonce = () => useContext(GamutContext).nonce;
 export const GamutProvider = ({
   children,
   cache,
@@ -19,7 +26,7 @@ export const GamutProvider = ({
   useGlobals = true,
   useCache = true,
   nonce,
-  useLogicalProperties = true
+  useLogicalProperties = false
 }) => {
   const {
     hasGlobals,
@@ -28,6 +35,13 @@ export const GamutProvider = ({
   const shouldCreateCache = useCache && !hasCache;
   const shouldInsertGlobals = useGlobals && !hasGlobals;
 
+  // Feed nonce to get-nonce singleton so react-style-singleton (e.g. via react-aria-components) can set it on injected style tags for CSP
+  useEffect(() => {
+    if (nonce) {
+      setNonce(nonce);
+    }
+  }, [nonce]);
+
   // Do not initialize a new cache if one has been provided as props
   const activeCache = useRef(shouldCreateCache && (cache ?? createEmotionCache(nonce ? {
     nonce
@@ -35,7 +49,8 @@ export const GamutProvider = ({
   const contextValue = {
     hasGlobals: shouldInsertGlobals,
     hasCache: shouldCreateCache,
-    useLogicalProperties
+    useLogicalProperties,
+    nonce
   };
   const globals = shouldInsertGlobals && /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Typography, {
@@ -49,28 +64,29 @@ export const GamutProvider = ({
     })]
   });
 
-  // Merge useLogicalProperties into theme so variance can access it via props.theme
-  const themeWithLogicalProperties = {
+  // Merge useLogicalProperties into theme so variance can access it via props.theme.
+  const themeWithLogicalProperties = useMemo(() => ({
     ...theme,
     useLogicalProperties
-  };
+  }), [theme, useLogicalProperties]);
+  const content = useMemo(() => /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: themeWithLogicalProperties,
+    children: nonce ? /*#__PURE__*/_jsx(MotionConfig, {
+      nonce: nonce,
+      children: children
+    }) : children
+  }), [themeWithLogicalProperties, nonce, children]);
   if (activeCache.current) {
     return /*#__PURE__*/_jsx(GamutContext.Provider, {
       value: contextValue,
       children: /*#__PURE__*/_jsxs(CacheProvider, {
         value: activeCache.current,
-        children: [globals, /*#__PURE__*/_jsx(ThemeProvider, {
-          theme: themeWithLogicalProperties,
-          children: children
-        })]
+        children: [globals, content]
       })
     });
   }
   return /*#__PURE__*/_jsxs(GamutContext.Provider, {
     value: contextValue,
-    children: [globals, /*#__PURE__*/_jsx(ThemeProvider, {
-      theme: themeWithLogicalProperties,
-      children: children
-    })]
+    children: [globals, content]
   });
 };

package/dist/variance/config.d.ts

@@ -414,23 +414,43 @@ export declare const positioning: {
     };
     readonly inset: {
         readonly property: "inset";
-        readonly properties: readonly ["top", "right", "bottom", "left"];
+        readonly properties: {
+            readonly physical: readonly ["top", "right", "bottom", "left"];
+            readonly logical: readonly ["insetBlockStart", "insetInlineEnd", "insetBlockEnd", "insetInlineStart"];
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     readonly top: {
-        readonly property: "top";
+        readonly property: {
+            readonly physical: "top";
+            readonly logical: "insetBlockStart";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     readonly right: {
-        readonly property: "right";
+        readonly property: {
+            readonly physical: "right";
+            readonly logical: "insetInlineEnd";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     readonly bottom: {
-        readonly property: "bottom";
+        readonly property: {
+            readonly physical: "bottom";
+            readonly logical: "insetBlockEnd";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     readonly left: {
-        readonly property: "left";
+        readonly property: {
+            readonly physical: "left";
+            readonly logical: "insetInlineStart";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     readonly zIndex: {
@@ -498,43 +518,82 @@ export declare const layout: {
         readonly property: "overflow";
     };
     readonly overflowX: {
-        readonly property: "overflowX";
+        readonly property: {
+            readonly physical: "overflowX";
+            readonly logical: "overflowInline";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     readonly overflowY: {
-        readonly property: "overflowY";
+        readonly property: {
+            readonly physical: "overflowY";
+            readonly logical: "overflowBlock";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     readonly dimensions: {
         readonly property: "width";
-        readonly properties: readonly ["width", "height"];
+        readonly properties: {
+            readonly physical: readonly ["width", "height"];
+            readonly logical: readonly ["inlineSize", "blockSize"];
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     readonly width: {
-        readonly property: "width";
+        readonly property: {
+            readonly physical: "width";
+            readonly logical: "inlineSize";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     readonly minWidth: {
-        readonly property: "minWidth";
+        readonly property: {
+            readonly physical: "minWidth";
+            readonly logical: "minInlineSize";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     readonly maxWidth: {
-        readonly property: "maxWidth";
+        readonly property: {
+            readonly physical: "maxWidth";
+            readonly logical: "maxInlineSize";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     readonly height: {
-        readonly property: "height";
+        readonly property: {
+            readonly physical: "height";
+            readonly logical: "blockSize";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     readonly minHeight: {
-        readonly property: "minHeight";
+        readonly property: {
+            readonly physical: "minHeight";
+            readonly logical: "minBlockSize";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     readonly maxHeight: {
-        readonly property: "maxHeight";
+        readonly property: {
+            readonly physical: "maxHeight";
+            readonly logical: "maxBlockSize";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     readonly verticalAlign: {
         readonly property: "verticalAlign";
     };
+    readonly direction: {
+        readonly property: "direction";
+    };
 };
 export declare const list: {
     readonly listStyle: {
@@ -1115,23 +1174,43 @@ export declare const all: {
     };
     inset: {
         readonly property: "inset";
-        readonly properties: readonly ["top", "right", "bottom", "left"];
+        readonly properties: {
+            readonly physical: readonly ["top", "right", "bottom", "left"];
+            readonly logical: readonly ["insetBlockStart", "insetInlineEnd", "insetBlockEnd", "insetInlineStart"];
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     top: {
-        readonly property: "top";
+        readonly property: {
+            readonly physical: "top";
+            readonly logical: "insetBlockStart";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     right: {
-        readonly property: "right";
+        readonly property: {
+            readonly physical: "right";
+            readonly logical: "insetInlineEnd";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     bottom: {
-        readonly property: "bottom";
+        readonly property: {
+            readonly physical: "bottom";
+            readonly logical: "insetBlockEnd";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     left: {
-        readonly property: "left";
+        readonly property: {
+            readonly physical: "left";
+            readonly logical: "insetInlineStart";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     zIndex: {
@@ -1189,43 +1268,82 @@ export declare const all: {
         readonly property: "overflow";
     };
     overflowX: {
-        readonly property: "overflowX";
+        readonly property: {
+            readonly physical: "overflowX";
+            readonly logical: "overflowInline";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     overflowY: {
-        readonly property: "overflowY";
+        readonly property: {
+            readonly physical: "overflowY";
+            readonly logical: "overflowBlock";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     dimensions: {
         readonly property: "width";
-        readonly properties: readonly ["width", "height"];
+        readonly properties: {
+            readonly physical: readonly ["width", "height"];
+            readonly logical: readonly ["inlineSize", "blockSize"];
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     width: {
-        readonly property: "width";
+        readonly property: {
+            readonly physical: "width";
+            readonly logical: "inlineSize";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     minWidth: {
-        readonly property: "minWidth";
+        readonly property: {
+            readonly physical: "minWidth";
+            readonly logical: "minInlineSize";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     maxWidth: {
-        readonly property: "maxWidth";
+        readonly property: {
+            readonly physical: "maxWidth";
+            readonly logical: "maxInlineSize";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     height: {
-        readonly property: "height";
+        readonly property: {
+            readonly physical: "height";
+            readonly logical: "blockSize";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     minHeight: {
-        readonly property: "minHeight";
+        readonly property: {
+            readonly physical: "minHeight";
+            readonly logical: "minBlockSize";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     maxHeight: {
-        readonly property: "maxHeight";
+        readonly property: {
+            readonly physical: "maxHeight";
+            readonly logical: "maxBlockSize";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     verticalAlign: {
         readonly property: "verticalAlign";
     };
+    direction: {
+        readonly property: "direction";
+    };
     justifyContent: {
         readonly property: "justifyContent";
     };

package/dist/variance/config.js

@@ -411,23 +411,43 @@ export const positioning = {
   },
   inset: {
     property: 'inset',
-    properties: ['top', 'right', 'bottom', 'left'],
+    properties: {
+      physical: ['top', 'right', 'bottom', 'left'],
+      logical: ['insetBlockStart', 'insetInlineEnd', 'insetBlockEnd', 'insetInlineStart']
+    },
+    resolveProperty: getPropertyMode,
     transform: transformSize
   },
   top: {
-    property: 'top',
+    property: {
+      physical: 'top',
+      logical: 'insetBlockStart'
+    },
+    resolveProperty: getPropertyMode,
     transform: transformSize
   },
   right: {
-    property: 'right',
+    property: {
+      physical: 'right',
+      logical: 'insetInlineEnd'
+    },
+    resolveProperty: getPropertyMode,
     transform: transformSize
   },
   bottom: {
-    property: 'bottom',
+    property: {
+      physical: 'bottom',
+      logical: 'insetBlockEnd'
+    },
+    resolveProperty: getPropertyMode,
     transform: transformSize
   },
   left: {
-    property: 'left',
+    property: {
+      physical: 'left',
+      logical: 'insetInlineStart'
+    },
+    resolveProperty: getPropertyMode,
     transform: transformSize
   },
   zIndex: {
@@ -456,43 +476,82 @@ export const layout = {
     property: 'overflow'
   },
   overflowX: {
-    property: 'overflowX'
+    property: {
+      physical: 'overflowX',
+      logical: 'overflowInline'
+    },
+    resolveProperty: getPropertyMode
   },
   overflowY: {
-    property: 'overflowY'
+    property: {
+      physical: 'overflowY',
+      logical: 'overflowBlock'
+    },
+    resolveProperty: getPropertyMode
   },
   dimensions: {
     property: 'width',
-    properties: ['width', 'height'],
+    properties: {
+      physical: ['width', 'height'],
+      logical: ['inlineSize', 'blockSize']
+    },
+    resolveProperty: getPropertyMode,
     transform: transformSize
   },
   width: {
-    property: 'width',
+    property: {
+      physical: 'width',
+      logical: 'inlineSize'
+    },
+    resolveProperty: getPropertyMode,
     transform: transformSize
   },
   minWidth: {
-    property: 'minWidth',
+    property: {
+      physical: 'minWidth',
+      logical: 'minInlineSize'
+    },
+    resolveProperty: getPropertyMode,
     transform: transformSize
   },
   maxWidth: {
-    property: 'maxWidth',
+    property: {
+      physical: 'maxWidth',
+      logical: 'maxInlineSize'
+    },
+    resolveProperty: getPropertyMode,
     transform: transformSize
   },
   height: {
-    property: 'height',
+    property: {
+      physical: 'height',
+      logical: 'blockSize'
+    },
+    resolveProperty: getPropertyMode,
     transform: transformSize
   },
   minHeight: {
-    property: 'minHeight',
+    property: {
+      physical: 'minHeight',
+      logical: 'minBlockSize'
+    },
+    resolveProperty: getPropertyMode,
     transform: transformSize
   },
   maxHeight: {
-    property: 'maxHeight',
+    property: {
+      physical: 'maxHeight',
+      logical: 'maxBlockSize'
+    },
+    resolveProperty: getPropertyMode,
     transform: transformSize
   },
   verticalAlign: {
     property: 'verticalAlign'
   },
+  direction: {
+    property: 'direction'
+  },
   ...selfAlignments,
   ...gridItems,
   ...flexItems