@codecademy/gamut-styles 20.1.1-alpha.ba3184.0 → 20.1.1-alpha.c9d85c.0

package/dist/ColorMode.d.ts

@@ -350,8 +350,6 @@ 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";
@@ -930,8 +928,6 @@ 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";
@@ -1565,8 +1561,6 @@ 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/themes/admin.d.ts

@@ -34,17 +34,13 @@ export declare const adminTheme: Record<"breakpoints", {
     md: string;
     lg: string;
     xl: string;
-}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"zIndexes", Record<"zIndexes", import("@codecademy/variance").KeyAsVariable<{
-    readonly underlay: -100;
-    readonly base: 0;
-    readonly foreground: 100;
-    readonly floating: 200;
-    readonly appBar: 300;
-    readonly flyout: 400;
-    readonly modal: 500;
-    readonly popover: 600;
-    readonly topmost: 700;
-}, "zIndexes">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
+}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"elements", Record<"elements", import("@codecademy/variance").KeyAsVariable<{
+    readonly headerHeight: {
+        readonly base: "4rem";
+        readonly md: "5rem";
+    };
+    readonly headerZ: 15;
+}, "elements">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
     c_base: string;
     c_xs: string;
     c_sm: string;
@@ -124,18 +120,7 @@ export declare const adminTheme: Record<"breakpoints", {
             readonly base: "4rem";
             readonly md: "5rem";
         };
-        readonly headerZ: 300;
-    };
-    zIndexes: {
-        readonly underlay: -100;
-        readonly base: 0;
-        readonly foreground: 100;
-        readonly floating: 200;
-        readonly appBar: 300;
-        readonly flyout: 400;
-        readonly modal: 500;
-        readonly popover: 600;
-        readonly topmost: 700;
+        readonly headerZ: 15;
     };
 } & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
     readonly beige: "#FFF0E5";
@@ -559,13 +544,7 @@ export declare const adminTheme: Record<"breakpoints", {
 }>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
     1: string;
     2: string;
-}, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"elements", Record<"elements", import("@codecademy/variance").KeyAsVariable<{
-    readonly headerHeight: {
-        readonly base: "4rem";
-        readonly md: "5rem";
-    };
-    readonly headerZ: 300;
-}, "elements">>>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
+}, "-">>>, Record<"elevation", import("@codecademy/variance").LiteralPaths<import("..").ElevationScale, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
     colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
         primary: {
             _: "blue-500";
@@ -935,7 +914,7 @@ export declare const adminTheme: Record<"breakpoints", {
         }, "-", "_">;
     }>;
     mode: "light" | "dark";
-    _getColorValue: (color: import("@codecademy/variance").Path<{
+    _getColorValue: (color: "shadow-primary" | "shadow-secondary" | import("@codecademy/variance").Path<{
         readonly beige: "#FFF0E5";
         readonly blue: "#1557FF";
         readonly green: "#008A27";
@@ -1004,7 +983,7 @@ export declare const adminTheme: Record<"breakpoints", {
         readonly "white-200": string;
         readonly "white-600": string;
         readonly "white-700": string;
-    }, "-"> | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-accent" | "text-disabled" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "shadow-secondary" | "shadow-primary" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary") => string;
+    }, "-"> | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-accent" | "text-disabled" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary") => string;
 }> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
 export type AdminThemeShape = typeof adminTheme;
 export interface AdminTheme extends AdminThemeShape {

package/dist/themes/core.d.ts

@@ -15,17 +15,13 @@ export declare const coreTheme: Record<"breakpoints", {
     md: string;
     lg: string;
     xl: string;
-}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"zIndexes", Record<"zIndexes", import("@codecademy/variance").KeyAsVariable<{
-    readonly underlay: -100;
-    readonly base: 0;
-    readonly foreground: 100;
-    readonly floating: 200;
-    readonly appBar: 300;
-    readonly flyout: 400;
-    readonly modal: 500;
-    readonly popover: 600;
-    readonly topmost: 700;
-}, "zIndexes">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
+}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"elements", Record<"elements", import("@codecademy/variance").KeyAsVariable<{
+    readonly headerHeight: {
+        readonly base: "4rem";
+        readonly md: "5rem";
+    };
+    readonly headerZ: 15;
+}, "elements">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
     c_base: string;
     c_xs: string;
     c_sm: string;
@@ -105,18 +101,7 @@ export declare const coreTheme: Record<"breakpoints", {
             readonly base: "4rem";
             readonly md: "5rem";
         };
-        readonly headerZ: 300;
-    };
-    zIndexes: {
-        readonly underlay: -100;
-        readonly base: 0;
-        readonly foreground: 100;
-        readonly floating: 200;
-        readonly appBar: 300;
-        readonly flyout: 400;
-        readonly modal: 500;
-        readonly popover: 600;
-        readonly topmost: 700;
+        readonly headerZ: 15;
     };
 } & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
     readonly beige: "#FFF0E5";
@@ -540,13 +525,7 @@ export declare const coreTheme: Record<"breakpoints", {
 }>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
     1: string;
     2: string;
-}, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"elements", Record<"elements", import("@codecademy/variance").KeyAsVariable<{
-    readonly headerHeight: {
-        readonly base: "4rem";
-        readonly md: "5rem";
-    };
-    readonly headerZ: 300;
-}, "elements">>>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
+}, "-">>>, Record<"elevation", import("@codecademy/variance").LiteralPaths<import("../variables").ElevationScale, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
 export type CoreThemeShape = typeof coreTheme;
 export interface CoreTheme extends CoreThemeShape {
 }

package/dist/themes/core.js

@@ -1,5 +1,5 @@
 import { createTheme } from '@codecademy/variance';
-import { borderRadii, containerQueries, corePalette, elements, fontFamily, fontSize, fontWeight, lineHeight, mediaQueries, spacing, zIndexes } from '../variables';
+import { borderRadii, containerQueries, coreElevation, corePalette, elements, fontFamily, fontSize, fontWeight, lineHeight, mediaQueries, spacing } from '../variables';
 
 /**
  *  @description  This is the core theme that all other Codecademy themes are extended from
@@ -18,8 +18,7 @@ export const coreTheme = createTheme({
   lineHeight,
   fontWeight,
   spacing,
-  elements,
-  zIndexes
+  elements
 }).addColors(corePalette).addColorModes('light', {
   light: {
     text: {
@@ -130,4 +129,4 @@ export const coreTheme = createTheme({
 }) => ({
   1: `1px solid ${colors['border-primary']}`,
   2: `2px solid ${colors['border-primary']}`
-})).createScaleVariables('elements').createScaleVariables('zIndexes').addName('core').build();
+})).addScale('elevation', coreElevation).createScaleVariables('elements').addName('core').build();

package/dist/themes/lxStudio.d.ts

@@ -78,39 +78,18 @@ export declare const lxStudioTheme: Record<"breakpoints", {
         lg: string;
         xl: string;
     };
-    zIndexes: Record<"zIndexes", import("@codecademy/variance").KeyAsVariable<{
-        readonly underlay: -100;
-        readonly base: 0;
-        readonly foreground: 100;
-        readonly floating: 200;
-        readonly appBar: 300;
-        readonly flyout: 400;
-        readonly modal: 500;
-        readonly popover: 600;
-        readonly topmost: 700;
-    }, "zIndexes">> & {
-        readonly underlay: -100;
-        readonly base: 0;
-        readonly foreground: 100;
-        readonly floating: 200;
-        readonly appBar: 300;
-        readonly flyout: 400;
-        readonly modal: 500;
-        readonly popover: 600;
-        readonly topmost: 700;
-    };
     elements: Record<"elements", import("@codecademy/variance").KeyAsVariable<{
         readonly headerHeight: {
             readonly base: "4rem";
             readonly md: "5rem";
         };
-        readonly headerZ: 300;
+        readonly headerZ: 15;
     }, "elements">> & {
         readonly headerHeight: {
             readonly base: "4rem";
             readonly md: "5rem";
         };
-        readonly headerZ: 300;
+        readonly headerZ: 15;
     };
     fontSize: {
         readonly 64: string;
@@ -141,8 +120,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
         readonly 64: string;
         readonly 96: string;
     };
-    _variables: import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance/dist/createTheme/types").Assign<Record<string, import("@codecademy/variance").CSSObject>, Record<string, import("@codecademy/variance").CSSObject>>, Record<string, import("@codecademy/variance").CSSObject>> & Record<string, import("@codecademy/variance").CSSObject>;
-    _tokens: import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance/dist/createTheme/types").Assign<Record<string | number, any>, Record<string | number, any>>, Record<string | number, any>> & Record<string | number, any>;
+    _variables: import("@codecademy/variance/dist/createTheme/types").Assign<Record<string, import("@codecademy/variance").CSSObject>, Record<string, import("@codecademy/variance").CSSObject>> & Record<string, import("@codecademy/variance").CSSObject>;
+    _tokens: import("@codecademy/variance/dist/createTheme/types").Assign<Record<string | number, any>, Record<string | number, any>> & Record<string | number, any>;
     colors: import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
         readonly beige: "#FFF0E5";
         readonly blue: "#1557FF";
@@ -565,6 +544,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
         1: string;
         2: string;
     }, "-">;
+    elevation: import("@codecademy/variance").LiteralPaths<import("../variables").ElevationScale, "-">;
     name: string;
 } & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
     lxStudioSuccess: "#06844F";
@@ -1107,7 +1087,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
         }, "-", "_">;
     }>;
     mode: "light";
-    _getColorValue: (color: "beige" | "blue" | "navy" | "green" | "yellow" | "pink" | "red" | "orange" | "hyper" | "white" | "beige-100" | "blue-0" | "blue-100" | "blue-300" | "blue-400" | "blue-500" | "blue-800" | "navy-100" | "navy-300" | "navy-400" | "navy-500" | "navy-800" | "navy-200" | "navy-600" | "navy-700" | "navy-900" | "green-0" | "green-100" | "green-400" | "green-700" | "green-900" | "yellow-0" | "yellow-400" | "yellow-500" | "yellow-900" | "pink-0" | "pink-400" | "red-0" | "red-300" | "red-400" | "red-500" | "red-600" | "red-900" | "orange-100" | "orange-500" | "hyper-400" | "hyper-500" | "gray-100" | "gray-300" | "gray-800" | "gray-200" | "gray-600" | "gray-900" | "white-100" | "white-300" | "white-400" | "white-500" | "white-200" | "white-600" | "white-700" | "lightBlue" | "lightGreen" | "paleBlue" | "paleGreen" | "palePink" | "paleYellow" | "paleRed" | "black" | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-accent" | "text-disabled" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "shadow-secondary" | "shadow-primary" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary" | "lxStudioSuccess" | "lxStudioBgPrimary" | "sapphire") => string;
+    _getColorValue: (color: "beige" | "blue" | "navy" | "green" | "yellow" | "pink" | "red" | "orange" | "hyper" | "white" | "beige-100" | "blue-0" | "blue-100" | "blue-300" | "blue-400" | "blue-500" | "blue-800" | "navy-100" | "navy-300" | "navy-400" | "navy-500" | "navy-800" | "navy-200" | "navy-600" | "navy-700" | "navy-900" | "green-0" | "green-100" | "green-400" | "green-700" | "green-900" | "yellow-0" | "yellow-400" | "yellow-500" | "yellow-900" | "pink-0" | "pink-400" | "red-0" | "red-300" | "red-400" | "red-500" | "red-600" | "red-900" | "orange-100" | "orange-500" | "hyper-400" | "hyper-500" | "gray-100" | "gray-300" | "gray-800" | "gray-200" | "gray-600" | "gray-900" | "white-100" | "white-300" | "white-400" | "white-500" | "white-200" | "white-600" | "white-700" | "shadow-primary" | "shadow-secondary" | "lightBlue" | "lightGreen" | "paleBlue" | "paleGreen" | "palePink" | "paleYellow" | "paleRed" | "black" | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-accent" | "text-disabled" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary" | "lxStudioSuccess" | "lxStudioBgPrimary" | "sapphire") => string;
 }> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
 export type LxStudioThemeShape = typeof lxStudioTheme;
 export type LxStudioTheme = LxStudioThemeShape;

package/dist/themes/percipio.d.ts

@@ -22,7 +22,7 @@ export declare const percipioTheme: Record<"breakpoints", {
     md: string;
     lg: string;
     xl: string;
-}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"breakpoints", {
+}> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
     c_base: string;
     c_xs: string;
     c_sm: string;
@@ -62,39 +62,18 @@ export declare const percipioTheme: Record<"breakpoints", {
         lg: string;
         xl: string;
     };
-    zIndexes: Record<"zIndexes", import("@codecademy/variance").KeyAsVariable<{
-        readonly underlay: -100;
-        readonly base: 0;
-        readonly foreground: 100;
-        readonly floating: 200;
-        readonly appBar: 300;
-        readonly flyout: 400;
-        readonly modal: 500;
-        readonly popover: 600;
-        readonly topmost: 700;
-    }, "zIndexes">> & {
-        readonly underlay: -100;
-        readonly base: 0;
-        readonly foreground: 100;
-        readonly floating: 200;
-        readonly appBar: 300;
-        readonly flyout: 400;
-        readonly modal: 500;
-        readonly popover: 600;
-        readonly topmost: 700;
-    };
     elements: Record<"elements", import("@codecademy/variance").KeyAsVariable<{
         readonly headerHeight: {
             readonly base: "4rem";
             readonly md: "5rem";
         };
-        readonly headerZ: 300;
+        readonly headerZ: 15;
     }, "elements">> & {
         readonly headerHeight: {
             readonly base: "4rem";
             readonly md: "5rem";
         };
-        readonly headerZ: 300;
+        readonly headerZ: 15;
     };
     borderRadii: {
         none: string;
@@ -133,8 +112,8 @@ export declare const percipioTheme: Record<"breakpoints", {
         readonly 64: string;
         readonly 96: string;
     };
-    _variables: import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance/dist/createTheme/types").Assign<Record<string, import("@codecademy/variance").CSSObject>, Record<string, import("@codecademy/variance").CSSObject>>, Record<string, import("@codecademy/variance").CSSObject>> & Record<string, import("@codecademy/variance").CSSObject>;
-    _tokens: import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance/dist/createTheme/types").Assign<Record<string | number, any>, Record<string | number, any>>, Record<string | number, any>> & Record<string | number, any>;
+    _variables: import("@codecademy/variance/dist/createTheme/types").Assign<Record<string, import("@codecademy/variance").CSSObject>, Record<string, import("@codecademy/variance").CSSObject>> & Record<string, import("@codecademy/variance").CSSObject>;
+    _tokens: import("@codecademy/variance/dist/createTheme/types").Assign<Record<string | number, any>, Record<string | number, any>> & Record<string | number, any>;
     colors: import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
         readonly beige: "#FFF0E5";
         readonly blue: "#1557FF";
@@ -557,6 +536,7 @@ export declare const percipioTheme: Record<"breakpoints", {
         1: string;
         2: string;
     }, "-">;
+    elevation: import("@codecademy/variance").LiteralPaths<import("../variables").ElevationScale, "-">;
     name: string;
 } & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
     percipioTextPrimary: "#222325";
@@ -1169,8 +1149,8 @@ export declare const percipioTheme: Record<"breakpoints", {
         }, "-", "_">;
     }>;
     mode: "light";
-    _getColorValue: (color: "beige" | "blue" | "navy" | "green" | "yellow" | "pink" | "red" | "orange" | "hyper" | "white" | "beige-100" | "blue-0" | "blue-100" | "blue-300" | "blue-400" | "blue-500" | "blue-800" | "navy-100" | "navy-300" | "navy-400" | "navy-500" | "navy-800" | "navy-200" | "navy-600" | "navy-700" | "navy-900" | "green-0" | "green-100" | "green-400" | "green-700" | "green-900" | "yellow-0" | "yellow-400" | "yellow-500" | "yellow-900" | "pink-0" | "pink-400" | "red-0" | "red-300" | "red-400" | "red-500" | "red-600" | "red-900" | "orange-100" | "orange-500" | "hyper-400" | "hyper-500" | "gray-100" | "gray-300" | "gray-800" | "gray-200" | "gray-600" | "gray-900" | "white-100" | "white-300" | "white-400" | "white-500" | "white-200" | "white-600" | "white-700" | "lightBlue" | "lightGreen" | "paleBlue" | "paleGreen" | "palePink" | "paleYellow" | "paleRed" | "black" | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-accent" | "text-disabled" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "shadow-secondary" | "shadow-primary" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary" | "sapphire" | "percipioTextPrimary" | "percipioTextSecondary" | "percipioTextDisabled" | "percipioTextAccent" | "percipioBgPrimary" | "percipioBgSuccess" | "percipioBgWarning" | "percipioBgError" | "percipioActionPrimaryHover" | "percipioActionSecondary" | "percipioActionSecondaryHover" | "percipioActionDangerHover" | "percipioFeedbackSuccess" | "percipioFeedbackWarning" | "percipioDanger") => string;
-}> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
+    _getColorValue: (color: "beige" | "blue" | "navy" | "green" | "yellow" | "pink" | "red" | "orange" | "hyper" | "white" | "beige-100" | "blue-0" | "blue-100" | "blue-300" | "blue-400" | "blue-500" | "blue-800" | "navy-100" | "navy-300" | "navy-400" | "navy-500" | "navy-800" | "navy-200" | "navy-600" | "navy-700" | "navy-900" | "green-0" | "green-100" | "green-400" | "green-700" | "green-900" | "yellow-0" | "yellow-400" | "yellow-500" | "yellow-900" | "pink-0" | "pink-400" | "red-0" | "red-300" | "red-400" | "red-500" | "red-600" | "red-900" | "orange-100" | "orange-500" | "hyper-400" | "hyper-500" | "gray-100" | "gray-300" | "gray-800" | "gray-200" | "gray-600" | "gray-900" | "white-100" | "white-300" | "white-400" | "white-500" | "white-200" | "white-600" | "white-700" | "shadow-primary" | "shadow-secondary" | "lightBlue" | "lightGreen" | "paleBlue" | "paleGreen" | "palePink" | "paleYellow" | "paleRed" | "black" | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-accent" | "text-disabled" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary" | "sapphire" | "percipioTextPrimary" | "percipioTextSecondary" | "percipioTextDisabled" | "percipioTextAccent" | "percipioBgPrimary" | "percipioBgSuccess" | "percipioBgWarning" | "percipioBgError" | "percipioActionPrimaryHover" | "percipioActionSecondary" | "percipioActionSecondaryHover" | "percipioActionDangerHover" | "percipioFeedbackSuccess" | "percipioFeedbackWarning" | "percipioDanger") => string;
+}>, Record<"elevation", import("@codecademy/variance").LiteralPaths<import("../variables").ElevationScale, "-">>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
 export type PercipioThemeShape = typeof percipioTheme;
 export interface PercipioTheme extends PercipioThemeShape {
 }

package/dist/themes/percipio.js

@@ -1,5 +1,5 @@
 import { createTheme } from '@codecademy/variance';
-import { fontWeightMediumTitle, percipioFontFamily, percipioPalette } from '../variables';
+import { fontWeightMediumTitle, percipioElevation, percipioFontFamily, percipioPalette } from '../variables';
 import { coreTheme } from './core';
 export const percipioTheme = createTheme({
   ...coreTheme,
@@ -53,4 +53,4 @@ export const percipioTheme = createTheme({
       disabled: 'navy-300'
     }
   }
-}).addName('percipio').build();
+}).addScale('elevation', percipioElevation).addName('percipio').build();

package/dist/themes/platform.d.ts

@@ -50,17 +50,13 @@ export declare const platformTheme: Record<"breakpoints", {
     md: string;
     lg: string;
     xl: string;
-}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"zIndexes", Record<"zIndexes", import("@codecademy/variance").KeyAsVariable<{
-    readonly underlay: -100;
-    readonly base: 0;
-    readonly foreground: 100;
-    readonly floating: 200;
-    readonly appBar: 300;
-    readonly flyout: 400;
-    readonly modal: 500;
-    readonly popover: 600;
-    readonly topmost: 700;
-}, "zIndexes">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
+}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"elements", Record<"elements", import("@codecademy/variance").KeyAsVariable<{
+    readonly headerHeight: {
+        readonly base: "4rem";
+        readonly md: "5rem";
+    };
+    readonly headerZ: 15;
+}, "elements">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
     c_base: string;
     c_xs: string;
     c_sm: string;
@@ -140,18 +136,7 @@ export declare const platformTheme: Record<"breakpoints", {
             readonly base: "4rem";
             readonly md: "5rem";
         };
-        readonly headerZ: 300;
-    };
-    zIndexes: {
-        readonly underlay: -100;
-        readonly base: 0;
-        readonly foreground: 100;
-        readonly floating: 200;
-        readonly appBar: 300;
-        readonly flyout: 400;
-        readonly modal: 500;
-        readonly popover: 600;
-        readonly topmost: 700;
+        readonly headerZ: 15;
     };
 } & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
     readonly beige: "#FFF0E5";
@@ -575,13 +560,7 @@ export declare const platformTheme: Record<"breakpoints", {
 }>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
     1: string;
     2: string;
-}, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"elements", Record<"elements", import("@codecademy/variance").KeyAsVariable<{
-    readonly headerHeight: {
-        readonly base: "4rem";
-        readonly md: "5rem";
-    };
-    readonly headerZ: 300;
-}, "elements">>>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
+}, "-">>>, Record<"elevation", import("@codecademy/variance").LiteralPaths<import("../variables").ElevationScale, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
     readonly lightBeige: "#FFFBF8";
     readonly gold: "#8A7300";
     readonly teal: "#006D82";
@@ -1105,7 +1084,7 @@ export declare const platformTheme: Record<"breakpoints", {
         }, "-", "_">;
     }>;
     mode: "light" | "dark";
-    _getColorValue: (color: import("@codecademy/variance").Path<{
+    _getColorValue: (color: "shadow-primary" | "shadow-secondary" | import("@codecademy/variance").Path<{
         readonly beige: "#FFF0E5";
         readonly blue: "#1557FF";
         readonly green: "#008A27";
@@ -1174,7 +1153,7 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "white-200": string;
         readonly "white-600": string;
         readonly "white-700": string;
-    }, "-"> | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-accent" | "text-disabled" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "shadow-secondary" | "shadow-primary" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary" | import("@codecademy/variance").Path<{
+    }, "-"> | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-accent" | "text-disabled" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary" | import("@codecademy/variance").Path<{
         readonly lightBeige: "#FFFBF8";
         readonly gold: "#8A7300";
         readonly teal: "#006D82";

package/dist/variables/elements.d.ts

@@ -4,9 +4,8 @@ export declare const elements: {
         readonly md: "5rem";
     };
     /**
-     * z-index for global page headers. Aliases the `appBar` token from the `zIndexes`
-     * scale so consumers still reading `elements.headerZ` stay in sync with the scale.
-     * Prefer `zIndex="appBar"` in new code.
+     * Semi-arbitrary z-index for global page headers.
+     * @remarks PLEASE talk to web platform before adding new z-index constants!
      */
-    readonly headerZ: 300;
+    readonly headerZ: 15;
 };

package/dist/variables/elements.js

@@ -1,13 +1,11 @@
-import { zIndexes } from './zIndexes';
 export const elements = {
   headerHeight: {
     base: '4rem',
     md: '5rem'
   },
   /**
-   * z-index for global page headers. Aliases the `appBar` token from the `zIndexes`
-   * scale so consumers still reading `elements.headerZ` stay in sync with the scale.
-   * Prefer `zIndex="appBar"` in new code.
+   * Semi-arbitrary z-index for global page headers.
+   * @remarks PLEASE talk to web platform before adding new z-index constants!
    */
-  headerZ: zIndexes.appBar
+  headerZ: 15
 };

package/dist/variables/elevation.d.ts

@@ -0,0 +1,17 @@
+type ThemeColors = Record<string, string>;
+export type ElevationStateStyles = {
+    shadow: string;
+    transform: string;
+};
+export type ElevationScale = {
+    rest: ElevationStateStyles;
+    hover: ElevationStateStyles;
+    hoverMirrored: ElevationStateStyles;
+};
+export type ElevationState = keyof ElevationScale;
+export type ElevationScaleFactory = (theme: {
+    colors: ThemeColors;
+}) => ElevationScale;
+export declare const coreElevation: ElevationScaleFactory;
+export declare const percipioElevation: ElevationScaleFactory;
+export {};

package/dist/variables/elevation.js

@@ -0,0 +1,43 @@
+export const coreElevation = ({
+  colors
+}) => {
+  const shadowPrimary = colors['shadow-primary'];
+  const offset = 8;
+  const lift = 4;
+  const shadow = x => `${x}px ${offset}px 0 0 ${shadowPrimary}`;
+  return {
+    rest: {
+      shadow: `0 0 0 0 ${shadowPrimary}`,
+      transform: 'none'
+    },
+    hover: {
+      shadow: shadow(-offset),
+      transform: `translate(${lift}px, -${lift}px)`
+    },
+    hoverMirrored: {
+      shadow: shadow(offset),
+      transform: `translate(-${lift}px, -${lift}px)`
+    }
+  };
+};
+export const percipioElevation = ({
+  colors
+}) => {
+  const shadowPrimary = colors['shadow-primary'];
+  const shadowSecondary = colors['shadow-secondary'];
+  const hover = `0 1px 4px 0 ${shadowPrimary}, 0 2px 11px 0 ${shadowSecondary}`;
+  return {
+    rest: {
+      shadow: `0 1px 4px 0 ${shadowPrimary}, 0 2px 7px 0 ${shadowPrimary}`,
+      transform: 'none'
+    },
+    hover: {
+      shadow: hover,
+      transform: 'none'
+    },
+    hoverMirrored: {
+      shadow: hover,
+      transform: 'none'
+    }
+  };
+};

package/dist/variables/index.d.ts

@@ -1,8 +1,8 @@
 export * from './borderRadii';
 export * from './colors';
 export * from './elements';
+export * from './elevation';
 export * from './responsive';
 export * from './spacing';
 export * from './timing';
 export * from './typography';
-export * from './zIndexes';

package/dist/variables/index.js

@@ -1,8 +1,8 @@
 export * from './borderRadii';
 export * from './colors';
 export * from './elements';
+export * from './elevation';
 export * from './responsive';
 export * from './spacing';
 export * from './timing';
-export * from './typography';
-export * from './zIndexes';
+export * from './typography';

package/dist/variance/config.d.ts

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

package/dist/variance/config.js

@@ -450,13 +450,8 @@ export const positioning = {
     resolveProperty: getPropertyMode,
     transform: transformSize
   },
-  // `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',
-    scale: 'zIndexes',
-    allowRawValue: true
+    property: 'zIndex'
   },
   opacity: {
     property: 'opacity'

package/dist/variance/props.d.ts

@@ -324,8 +324,6 @@ 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";
@@ -1220,8 +1218,6 @@ 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";
@@ -1899,8 +1895,6 @@ 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";
@@ -2578,8 +2572,6 @@ 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.1.1-alpha.ba3184.0",
+  "version": "20.1.1-alpha.c9d85c.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "dependencies": {
-    "@codecademy/variance": "0.26.2-alpha.ba3184.0",
+    "@codecademy/variance": "0.26.2-alpha.c9d85c.0",
     "@emotion/is-prop-valid": "^1.1.0",
     "framer-motion": "^11.18.0",
     "get-nonce": "^1.0.0",

package/dist/variables/zIndexes.d.ts

@@ -1,53 +0,0 @@
-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` 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`.
- *
- * @remarks PLEASE talk to web platform before adding new z-index tokens.
- */
-export declare const zIndexes: {
-    /** Decorative layer behind content (underlines, backdrops, shadows). */
-    readonly underlay: -100;
-    /** Ground layer — establishes a local stacking context without lifting above siblings. */
-    readonly base: 0;
-    /**
-     * The raised in-flow layer: an element in front of what sits/scrolls behind it, but below
-     * all portal overlays. Covers content lifted above an `underlay` (e.g. text over its
-     * underline) and sticky content headers (e.g. a sticky table `thead`).
-     */
-    readonly foreground: 100;
-    /**
-     * Portal floor: the default for `BodyPortal`, and the layer for persistent floating page
-     * furniture at rest (e.g. an AI chat launcher, help bubble). Above page content, below the
-     * app nav and all overlays.
-     */
-    readonly floating: 200;
-    /** Global app header / nav bar. Aliased by the legacy `elements.headerZ` constant. */
-    readonly appBar: 300;
-    /** Portaled side panel (the `Flyout` component = `Drawer` inside `Overlay`). */
-    readonly flyout: 400;
-    /** `Overlay`, `Modal`, and `Dialog` (they share one portal primitive). */
-    readonly modal: 500;
-    /** Portal-mode `Popover` and the portaled `SelectDropdown` menu — above modal. */
-    readonly popover: 600;
-    /**
-     * Top-most transient overlays that must never be clipped: floating tooltips (`FloatingTip`)
-     * and toasts / notifications (`Toaster`). Highest layer — nothing in Gamut sits above it.
-     */
-    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

@@ -1,52 +0,0 @@
-/**
- * Semantic z-index scale. Every z-index in Gamut should reference a token here rather than a
- * magic number.
- *
- * 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`.
- *
- * @remarks PLEASE talk to web platform before adding new z-index tokens.
- */
-export const zIndexes = {
-  /** Decorative layer behind content (underlines, backdrops, shadows). */
-  underlay: -100,
-  /** Ground layer — establishes a local stacking context without lifting above siblings. */
-  base: 0,
-  /**
-   * The raised in-flow layer: an element in front of what sits/scrolls behind it, but below
-   * all portal overlays. Covers content lifted above an `underlay` (e.g. text over its
-   * underline) and sticky content headers (e.g. a sticky table `thead`).
-   */
-  foreground: 100,
-  /**
-   * Portal floor: the default for `BodyPortal`, and the layer for persistent floating page
-   * furniture at rest (e.g. an AI chat launcher, help bubble). Above page content, below the
-   * app nav and all overlays.
-   */
-  floating: 200,
-  /** Global app header / nav bar. Aliased by the legacy `elements.headerZ` constant. */
-  appBar: 300,
-  /** Portaled side panel (the `Flyout` component = `Drawer` inside `Overlay`). */
-  flyout: 400,
-  /** `Overlay`, `Modal`, and `Dialog` (they share one portal primitive). */
-  modal: 500,
-  /** Portal-mode `Popover` and the portaled `SelectDropdown` menu — above modal. */
-  popover: 600,
-  /**
-   * Top-most transient overlays that must never be clipped: floating tooltips (`FloatingTip`)
-   * 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.
- */