@codecademy/gamut-styles 20.0.3-alpha.ce68a5.0 → 20.0.3-alpha.d20b57.0

package/dist/ColorMode.d.ts

@@ -350,6 +350,8 @@ export declare const providerProps: import("@codecademy/variance/dist/types/conf
     };
     readonly zIndex: {
         readonly property: "zIndex";
+        readonly scale: "zIndexes";
+        readonly allowRawValue: true;
     };
     readonly opacity: {
         readonly property: "opacity";
@@ -928,6 +930,8 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
     }>;
     zIndex?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "zIndex";
+        readonly scale: "zIndexes";
+        readonly allowRawValue: true;
     }>;
     backgroundPosition?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "backgroundPosition";
@@ -1561,6 +1565,8 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
     }>;
     zIndex?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "zIndex";
+        readonly scale: "zIndexes";
+        readonly allowRawValue: true;
     }>;
     backgroundPosition?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "backgroundPosition";

package/dist/variables/zIndexes.d.ts

@@ -1,10 +1,11 @@
+import { Globals } from 'csstype';
 /**
  * Semantic z-index scale. Every z-index in Gamut should reference a token here rather than a
  * magic number.
  *
- * The `zIndex` prop is intentionally left numeric/unscaled, and this object is numeric, so
- * tokens are used as `zIndex={zIndexes.modal}`. That preserves the escape hatch (a raw
- * in-between number, e.g. `zIndex={550}`) and arithmetic on tokens (e.g. `zIndexes.foreground - 2`).
+ * The `zIndex` system prop accepts a token name directly (e.g. `zIndex="modal"`), this object's
+ * numeric values (e.g. `zIndex={zIndexes.modal}`), a raw in-between number as an escape hatch
+ * (e.g. `zIndex={550}`), or arithmetic on a token (e.g. `zIndexes.foreground - 2`).
  *
  * Values are spaced by 100 so in-between escape-hatch numbers are available. `floating` (200) is
  * the floor of the portal band and the default for `BodyPortal`.
@@ -42,3 +43,11 @@ export declare const zIndexes: {
      */
     readonly topmost: 700;
 };
+/**
+ * A `zIndexes` token name (e.g. `'foreground'`), a raw number as an escape hatch
+ * (e.g. `550`, or `zIndexes.foreground + 1`), or a CSS global (`'initial'`, `'inherit'`, …).
+ * Use this for component `zIndex` props that forward to a `Box`-like `zIndex` system prop or
+ * `BodyPortal`. The scale still resolves token names to `var(--zIndexes-*)` at runtime; this
+ * type just also permits the numeric/global escape hatches the scale type alone would reject.
+ */
+export type ZIndexType = keyof typeof zIndexes | number | Globals;

package/dist/variables/zIndexes.js

@@ -2,9 +2,9 @@
  * Semantic z-index scale. Every z-index in Gamut should reference a token here rather than a
  * magic number.
  *
- * The `zIndex` prop is intentionally left numeric/unscaled, and this object is numeric, so
- * tokens are used as `zIndex={zIndexes.modal}`. That preserves the escape hatch (a raw
- * in-between number, e.g. `zIndex={550}`) and arithmetic on tokens (e.g. `zIndexes.foreground - 2`).
+ * The `zIndex` system prop accepts a token name directly (e.g. `zIndex="modal"`), this object's
+ * numeric values (e.g. `zIndex={zIndexes.modal}`), a raw in-between number as an escape hatch
+ * (e.g. `zIndex={550}`), or arithmetic on a token (e.g. `zIndexes.foreground - 2`).
  *
  * Values are spaced by 100 so in-between escape-hatch numbers are available. `floating` (200) is
  * the floor of the portal band and the default for `BodyPortal`.
@@ -41,4 +41,12 @@ export const zIndexes = {
    * and toasts / notifications (`Toaster`). Highest layer — nothing in Gamut sits above it.
    */
   topmost: 700
-};
+};
+
+/**
+ * A `zIndexes` token name (e.g. `'foreground'`), a raw number as an escape hatch
+ * (e.g. `550`, or `zIndexes.foreground + 1`), or a CSS global (`'initial'`, `'inherit'`, …).
+ * Use this for component `zIndex` props that forward to a `Box`-like `zIndex` system prop or
+ * `BodyPortal`. The scale still resolves token names to `var(--zIndexes-*)` at runtime; this
+ * type just also permits the numeric/global escape hatches the scale type alone would reject.
+ */

package/dist/variance/config.d.ts

@@ -455,6 +455,8 @@ export declare const positioning: {
     };
     readonly zIndex: {
         readonly property: "zIndex";
+        readonly scale: "zIndexes";
+        readonly allowRawValue: true;
     };
     readonly opacity: {
         readonly property: "opacity";
@@ -1215,6 +1217,8 @@ export declare const all: {
     };
     zIndex: {
         readonly property: "zIndex";
+        readonly scale: "zIndexes";
+        readonly allowRawValue: true;
     };
     opacity: {
         readonly property: "opacity";

package/dist/variance/config.js

@@ -450,11 +450,13 @@ export const positioning = {
     resolveProperty: getPropertyMode,
     transform: transformSize
   },
-  // Intentionally unscaled: scaled variance props are token-only and reject raw numbers,
-  // which would break the numeric escape hatch and Tip's z-index arithmetic. Use the numeric
-  // `zIndexes` token object instead (e.g. zIndex={zIndexes.modal}).
+  // `scale: 'zIndexes'` resolves token names (e.g. `zIndex="modal"`) to `var(--zIndexes-*)`.
+  // `allowRawValue` keeps the numeric/global escape hatch (e.g. `zIndex={550}`,
+  // `zIndex={zIndexes.foreground + 1}`) that scaled props otherwise reject.
   zIndex: {
-    property: 'zIndex'
+    property: 'zIndex',
+    scale: 'zIndexes',
+    allowRawValue: true
   },
   opacity: {
     property: 'opacity'

package/dist/variance/props.d.ts

@@ -324,6 +324,8 @@ export declare const positioning: import("@codecademy/variance/dist/types/config
     };
     readonly zIndex: {
         readonly property: "zIndex";
+        readonly scale: "zIndexes";
+        readonly allowRawValue: true;
     };
     readonly opacity: {
         readonly property: "opacity";
@@ -1218,6 +1220,8 @@ export declare const css: import("@codecademy/variance/dist/types/config").CSS<i
     };
     zIndex: {
         readonly property: "zIndex";
+        readonly scale: "zIndexes";
+        readonly allowRawValue: true;
     };
     opacity: {
         readonly property: "opacity";
@@ -1895,6 +1899,8 @@ export declare const variant: import("@codecademy/variance/dist/types/config").V
     };
     zIndex: {
         readonly property: "zIndex";
+        readonly scale: "zIndexes";
+        readonly allowRawValue: true;
     };
     opacity: {
         readonly property: "opacity";
@@ -2572,6 +2578,8 @@ export declare const states: import("@codecademy/variance/dist/types/config").St
     };
     zIndex: {
         readonly property: "zIndex";
+        readonly scale: "zIndexes";
+        readonly allowRawValue: true;
     };
     opacity: {
         readonly property: "opacity";

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@codecademy/gamut-styles",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "20.0.3-alpha.ce68a5.0",
+  "version": "20.0.3-alpha.d20b57.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "dependencies": {
-    "@codecademy/variance": "0.26.2-alpha.ce68a5.0",
+    "@codecademy/variance": "0.26.2-alpha.d20b57.0",
     "@emotion/is-prop-valid": "^1.1.0",
     "framer-motion": "^11.18.0",
     "get-nonce": "^1.0.0",