@codecademy/gamut-styles 17.11.3-alpha.bd18ee.0 → 17.11.3-alpha.c33732.0

package/dist/GamutProvider.d.ts

@@ -15,10 +15,6 @@ 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,8 +18,7 @@ export const GamutProvider = ({
   variables,
   useGlobals = true,
   useCache = true,
-  nonce,
-  useLogicalProperties = true
+  nonce
 }) => {
   const {
     hasGlobals,
@@ -34,8 +33,7 @@ export const GamutProvider = ({
   } : {})));
   const contextValue = {
     hasGlobals: shouldInsertGlobals,
-    hasCache: shouldCreateCache,
-    useLogicalProperties
+    hasCache: shouldCreateCache
   };
   const globals = shouldInsertGlobals && /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Typography, {
@@ -48,19 +46,13 @@ 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: themeWithLogicalProperties,
+          theme: theme,
           children: children
         })]
       })
@@ -69,7 +61,7 @@ export const GamutProvider = ({
   return /*#__PURE__*/_jsxs(GamutContext.Provider, {
     value: contextValue,
     children: [globals, /*#__PURE__*/_jsx(ThemeProvider, {
-      theme: themeWithLogicalProperties,
+      theme: theme,
       children: children
     })]
   });

package/dist/variance/config.d.ts

@@ -393,59 +393,32 @@ export declare const layout: {
         readonly transform: (value: string | number) => string | 0;
     };
     readonly width: {
-        readonly property: {
-            readonly physical: "width";
-            readonly logical: "inlineSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "width";
         readonly transform: (value: string | number) => string | 0;
     };
     readonly minWidth: {
-        readonly property: {
-            readonly physical: "minWidth";
-            readonly logical: "minInlineSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "minWidth";
         readonly transform: (value: string | number) => string | 0;
     };
     readonly maxWidth: {
-        readonly property: {
-            readonly physical: "maxWidth";
-            readonly logical: "maxInlineSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "maxWidth";
         readonly transform: (value: string | number) => string | 0;
     };
     readonly height: {
-        readonly property: {
-            readonly physical: "height";
-            readonly logical: "blockSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "height";
         readonly transform: (value: string | number) => string | 0;
     };
     readonly minHeight: {
-        readonly property: {
-            readonly physical: "minHeight";
-            readonly logical: "minBlockSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "minHeight";
         readonly transform: (value: string | number) => string | 0;
     };
     readonly maxHeight: {
-        readonly property: {
-            readonly physical: "maxHeight";
-            readonly logical: "maxBlockSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "maxHeight";
         readonly transform: (value: string | number) => string | 0;
     };
     readonly verticalAlign: {
         readonly property: "verticalAlign";
     };
-    readonly direction: {
-        readonly property: "direction";
-    };
 };
 export declare const list: {
     readonly listStyle: {
@@ -504,53 +477,29 @@ export declare const margin: {
     };
     readonly mx: {
         readonly property: "margin";
-        readonly properties: {
-            readonly physical: readonly ["marginLeft", "marginRight"];
-            readonly logical: readonly ["marginInlineStart", "marginInlineEnd"];
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly properties: readonly ["marginLeft", "marginRight"];
         readonly scale: "spacing";
     };
     readonly my: {
         readonly property: "margin";
-        readonly properties: {
-            readonly physical: readonly ["marginTop", "marginBottom"];
-            readonly logical: readonly ["marginBlockStart", "marginBlockEnd"];
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly properties: readonly ["marginTop", "marginBottom"];
         readonly scale: "spacing";
     };
     readonly mt: {
-        readonly property: {
-            readonly physical: "marginTop";
-            readonly logical: "marginBlockStart";
-        };
+        readonly property: "marginTop";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     readonly mb: {
-        readonly property: {
-            readonly physical: "marginBottom";
-            readonly logical: "marginBlockEnd";
-        };
+        readonly property: "marginBottom";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     readonly mr: {
-        readonly property: {
-            readonly physical: "marginRight";
-            readonly logical: "marginInlineEnd";
-        };
+        readonly property: "marginRight";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     readonly ml: {
-        readonly property: {
-            readonly physical: "marginLeft";
-            readonly logical: "marginInlineStart";
-        };
+        readonly property: "marginLeft";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
 };
 export declare const padding: {
@@ -560,53 +509,29 @@ export declare const padding: {
     };
     readonly px: {
         readonly property: "padding";
-        readonly properties: {
-            readonly physical: readonly ["paddingLeft", "paddingRight"];
-            readonly logical: readonly ["paddingInlineStart", "paddingInlineEnd"];
-        };
+        readonly properties: readonly ["paddingLeft", "paddingRight"];
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     readonly py: {
         readonly property: "padding";
-        readonly properties: {
-            readonly physical: readonly ["paddingTop", "paddingBottom"];
-            readonly logical: readonly ["paddingBlockStart", "paddingBlockEnd"];
-        };
+        readonly properties: readonly ["paddingTop", "paddingBottom"];
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     readonly pt: {
-        readonly property: {
-            readonly physical: "paddingTop";
-            readonly logical: "paddingBlockStart";
-        };
+        readonly property: "paddingTop";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     readonly pb: {
-        readonly property: {
-            readonly physical: "paddingBottom";
-            readonly logical: "paddingBlockEnd";
-        };
+        readonly property: "paddingBottom";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     readonly pr: {
-        readonly property: {
-            readonly physical: "paddingRight";
-            readonly logical: "paddingInlineEnd";
-        };
+        readonly property: "paddingRight";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     readonly pl: {
-        readonly property: {
-            readonly physical: "paddingLeft";
-            readonly logical: "paddingInlineStart";
-        };
+        readonly property: "paddingLeft";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
 };
 export declare const space: {
@@ -616,53 +541,29 @@ export declare const space: {
     };
     readonly px: {
         readonly property: "padding";
-        readonly properties: {
-            readonly physical: readonly ["paddingLeft", "paddingRight"];
-            readonly logical: readonly ["paddingInlineStart", "paddingInlineEnd"];
-        };
+        readonly properties: readonly ["paddingLeft", "paddingRight"];
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     readonly py: {
         readonly property: "padding";
-        readonly properties: {
-            readonly physical: readonly ["paddingTop", "paddingBottom"];
-            readonly logical: readonly ["paddingBlockStart", "paddingBlockEnd"];
-        };
+        readonly properties: readonly ["paddingTop", "paddingBottom"];
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     readonly pt: {
-        readonly property: {
-            readonly physical: "paddingTop";
-            readonly logical: "paddingBlockStart";
-        };
+        readonly property: "paddingTop";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     readonly pb: {
-        readonly property: {
-            readonly physical: "paddingBottom";
-            readonly logical: "paddingBlockEnd";
-        };
+        readonly property: "paddingBottom";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     readonly pr: {
-        readonly property: {
-            readonly physical: "paddingRight";
-            readonly logical: "paddingInlineEnd";
-        };
+        readonly property: "paddingRight";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     readonly pl: {
-        readonly property: {
-            readonly physical: "paddingLeft";
-            readonly logical: "paddingInlineStart";
-        };
+        readonly property: "paddingLeft";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     readonly m: {
         readonly property: "margin";
@@ -670,53 +571,29 @@ export declare const space: {
     };
     readonly mx: {
         readonly property: "margin";
-        readonly properties: {
-            readonly physical: readonly ["marginLeft", "marginRight"];
-            readonly logical: readonly ["marginInlineStart", "marginInlineEnd"];
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly properties: readonly ["marginLeft", "marginRight"];
         readonly scale: "spacing";
     };
     readonly my: {
         readonly property: "margin";
-        readonly properties: {
-            readonly physical: readonly ["marginTop", "marginBottom"];
-            readonly logical: readonly ["marginBlockStart", "marginBlockEnd"];
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly properties: readonly ["marginTop", "marginBottom"];
         readonly scale: "spacing";
     };
     readonly mt: {
-        readonly property: {
-            readonly physical: "marginTop";
-            readonly logical: "marginBlockStart";
-        };
+        readonly property: "marginTop";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     readonly mb: {
-        readonly property: {
-            readonly physical: "marginBottom";
-            readonly logical: "marginBlockEnd";
-        };
+        readonly property: "marginBottom";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     readonly mr: {
-        readonly property: {
-            readonly physical: "marginRight";
-            readonly logical: "marginInlineEnd";
-        };
+        readonly property: "marginRight";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     readonly ml: {
-        readonly property: {
-            readonly physical: "marginLeft";
-            readonly logical: "marginInlineStart";
-        };
+        readonly property: "marginLeft";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
 };
 export declare const all: {
@@ -995,59 +872,32 @@ export declare const all: {
         readonly transform: (value: string | number) => string | 0;
     };
     width: {
-        readonly property: {
-            readonly physical: "width";
-            readonly logical: "inlineSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "width";
         readonly transform: (value: string | number) => string | 0;
     };
     minWidth: {
-        readonly property: {
-            readonly physical: "minWidth";
-            readonly logical: "minInlineSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "minWidth";
         readonly transform: (value: string | number) => string | 0;
     };
     maxWidth: {
-        readonly property: {
-            readonly physical: "maxWidth";
-            readonly logical: "maxInlineSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "maxWidth";
         readonly transform: (value: string | number) => string | 0;
     };
     height: {
-        readonly property: {
-            readonly physical: "height";
-            readonly logical: "blockSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "height";
         readonly transform: (value: string | number) => string | 0;
     };
     minHeight: {
-        readonly property: {
-            readonly physical: "minHeight";
-            readonly logical: "minBlockSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "minHeight";
         readonly transform: (value: string | number) => string | 0;
     };
     maxHeight: {
-        readonly property: {
-            readonly physical: "maxHeight";
-            readonly logical: "maxBlockSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "maxHeight";
         readonly transform: (value: string | number) => string | 0;
     };
     verticalAlign: {
         readonly property: "verticalAlign";
     };
-    direction: {
-        readonly property: "direction";
-    };
     justifyContent: {
         readonly property: "justifyContent";
     };
@@ -1111,53 +961,29 @@ export declare const all: {
     };
     px: {
         readonly property: "padding";
-        readonly properties: {
-            readonly physical: readonly ["paddingLeft", "paddingRight"];
-            readonly logical: readonly ["paddingInlineStart", "paddingInlineEnd"];
-        };
+        readonly properties: readonly ["paddingLeft", "paddingRight"];
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     py: {
         readonly property: "padding";
-        readonly properties: {
-            readonly physical: readonly ["paddingTop", "paddingBottom"];
-            readonly logical: readonly ["paddingBlockStart", "paddingBlockEnd"];
-        };
+        readonly properties: readonly ["paddingTop", "paddingBottom"];
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     pt: {
-        readonly property: {
-            readonly physical: "paddingTop";
-            readonly logical: "paddingBlockStart";
-        };
+        readonly property: "paddingTop";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     pb: {
-        readonly property: {
-            readonly physical: "paddingBottom";
-            readonly logical: "paddingBlockEnd";
-        };
+        readonly property: "paddingBottom";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     pr: {
-        readonly property: {
-            readonly physical: "paddingRight";
-            readonly logical: "paddingInlineEnd";
-        };
+        readonly property: "paddingRight";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     pl: {
-        readonly property: {
-            readonly physical: "paddingLeft";
-            readonly logical: "paddingInlineStart";
-        };
+        readonly property: "paddingLeft";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     m: {
         readonly property: "margin";
@@ -1165,53 +991,29 @@ export declare const all: {
     };
     mx: {
         readonly property: "margin";
-        readonly properties: {
-            readonly physical: readonly ["marginLeft", "marginRight"];
-            readonly logical: readonly ["marginInlineStart", "marginInlineEnd"];
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly properties: readonly ["marginLeft", "marginRight"];
         readonly scale: "spacing";
     };
     my: {
         readonly property: "margin";
-        readonly properties: {
-            readonly physical: readonly ["marginTop", "marginBottom"];
-            readonly logical: readonly ["marginBlockStart", "marginBlockEnd"];
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly properties: readonly ["marginTop", "marginBottom"];
         readonly scale: "spacing";
     };
     mt: {
-        readonly property: {
-            readonly physical: "marginTop";
-            readonly logical: "marginBlockStart";
-        };
+        readonly property: "marginTop";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     mb: {
-        readonly property: {
-            readonly physical: "marginBottom";
-            readonly logical: "marginBlockEnd";
-        };
+        readonly property: "marginBottom";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     mr: {
-        readonly property: {
-            readonly physical: "marginRight";
-            readonly logical: "marginInlineEnd";
-        };
+        readonly property: "marginRight";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     ml: {
-        readonly property: {
-            readonly physical: "marginLeft";
-            readonly logical: "marginInlineStart";
-        };
+        readonly property: "marginLeft";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     fontFamily: {
         readonly property: "fontFamily";