@codecademy/gamut-styles 17.12.0-alpha.2d3aae.0 → 17.12.0-alpha.2f9b47.0

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,10 +518,18 @@ 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";
@@ -509,59 +537,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: {
@@ -1142,23 +1143,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: {
@@ -1216,10 +1237,18 @@ 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";
@@ -1227,59 +1256,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";
     };

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,10 +476,18 @@ 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',
@@ -467,59 +495,32 @@ export const layout = {
     transform: transformSize
   },
   width: {
-    property: {
-      physical: 'width',
-      logical: 'inlineSize'
-    },
-    resolveProperty: getPropertyMode,
+    property: 'width',
     transform: transformSize
   },
   minWidth: {
-    property: {
-      physical: 'minWidth',
-      logical: 'minInlineSize'
-    },
-    resolveProperty: getPropertyMode,
+    property: 'minWidth',
     transform: transformSize
   },
   maxWidth: {
-    property: {
-      physical: 'maxWidth',
-      logical: 'maxInlineSize'
-    },
-    resolveProperty: getPropertyMode,
+    property: 'maxWidth',
     transform: transformSize
   },
   height: {
-    property: {
-      physical: 'height',
-      logical: 'blockSize'
-    },
-    resolveProperty: getPropertyMode,
+    property: 'height',
     transform: transformSize
   },
   minHeight: {
-    property: {
-      physical: 'minHeight',
-      logical: 'minBlockSize'
-    },
-    resolveProperty: getPropertyMode,
+    property: 'minHeight',
     transform: transformSize
   },
   maxHeight: {
-    property: {
-      physical: 'maxHeight',
-      logical: 'maxBlockSize'
-    },
-    resolveProperty: getPropertyMode,
+    property: 'maxHeight',
     transform: transformSize
   },
   verticalAlign: {
     property: 'verticalAlign'
   },
-  direction: {
-    property: 'direction'
-  },
   ...selfAlignments,
   ...gridItems,
   ...flexItems