@codecademy/gamut-styles
21.2.021.2.1-alpha.e787e5.0
+
Added (2 files)
~
Modified (15 files)
Index: package/dist/variance/config.js
===================================================================
--- package/dist/variance/config.js
+++ package/dist/variance/config.js
@@ -449,11 +449,22 @@
},
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'
+ property: 'zIndex',
+ scale: 'zIndexes',
+ allowRawValue: true
},
+ // Companion to `zIndex`, deliberately unscaled: `isolation: 'isolate'` establishes a local
+ // stacking context so descendant `zIndex` values are scoped to this element, without the
+ // `position` change or z-index lift that `position: relative` + a `zIndexes` token would add.
+ isolation: {
+ property: 'isolation'
+ },
opacity: {
property: 'opacity'
}
};Index: package/dist/themes/core.js
===================================================================
--- package/dist/themes/core.js
+++ package/dist/themes/core.js
@@ -1,6 +1,6 @@
import { createTheme } from '@codecademy/variance';
-import { borderRadii, containerQueries, coreElevation, corePalette, elements, fontFamily, fontSize, fontWeight, lineHeight, mediaQueries, spacing } from '../variables';
+import { borderRadii, containerQueries, coreElevation, corePalette, elements, fontFamily, fontSize, fontWeight, lineHeight, mediaQueries, spacing, zIndexes } from '../variables';
/**
* @description This is the core theme that all other Codecademy themes are extended from
* and is the only theme that gamut components are typed to. This ensures that gamut components
@@ -17,9 +17,10 @@
fontFamily,
lineHeight,
fontWeight,
spacing,
- elements
+ elements,
+ zIndexes
}).addColors(corePalette).addColorModes('light', {
light: {
text: {
_: 'navy-800',
@@ -128,5 +129,5 @@
colors
}) => ({
1: `1px solid ${colors['border-primary']}`,
2: `2px solid ${colors['border-primary']}`
-})).addScale('elevation', coreElevation).createScaleVariables('elements').addName('core').build();
\ No newline at end of file
+})).addScale('elevation', coreElevation).createScaleVariables('elements').createScaleVariables('zIndexes').addName('core').build();
\ No newline at end of fileIndex: package/dist/variables/elements.js
===================================================================
--- package/dist/variables/elements.js
+++ package/dist/variables/elements.js
@@ -1,11 +1,13 @@
+import { zIndexes } from './zIndexes';
export const elements = {
headerHeight: {
base: '4rem',
md: '5rem'
},
/**
- * Semi-arbitrary z-index for global page headers.
- * @remarks PLEASE talk to web platform before adding new z-index constants!
+ * 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.
*/
- headerZ: 15
+ headerZ: zIndexes.appBar
};
\ No newline at end of fileIndex: package/dist/variables/index.js
===================================================================
--- package/dist/variables/index.js
+++ package/dist/variables/index.js
@@ -4,5 +4,6 @@
export * from './elevation';
export * from './responsive';
export * from './spacing';
export * from './timing';
-export * from './typography';
\ No newline at end of file
+export * from './typography';
+export * from './zIndexes';
\ No newline at end of fileIndex: package/package.json
===================================================================
--- package/package.json
+++ package/package.json
@@ -1,11 +1,11 @@
{
"name": "@codecademy/gamut-styles",
"description": "Styleguide & Component library for codecademy.com",
- "version": "21.2.0",
+ "version": "21.2.1-alpha.e787e5.0",
"author": "Jake Hiller <[email protected]>",
"dependencies": {
- "@codecademy/variance": "1.1.0",
+ "@codecademy/variance": "1.1.1-alpha.e787e5.0",
"@emotion/is-prop-valid": "^1.1.0",
"framer-motion": "^12.0.0",
"get-nonce": "^1.0.0",
"polished": "^4.1.2"Index: package/dist/themes/admin.d.ts
===================================================================
--- package/dist/themes/admin.d.ts
+++ package/dist/themes/admin.d.ts
@@ -33,15 +33,19 @@
sm: string;
md: string;
lg: string;
xl: string;
-}> & 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", {
+}> & 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<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
c_base: string;
c_xs: string;
c_sm: string;
c_md: string;
@@ -119,10 +123,21 @@
readonly headerHeight: {
readonly base: "4rem";
readonly md: "5rem";
};
- readonly headerZ: 15;
+ 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;
+ };
} & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
readonly beige: "#FFF0E5";
readonly blue: "#1557FF";
readonly green: "#008A27";
@@ -543,9 +558,15 @@
}, "-">) => string;
}>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
1: string;
2: string;
-}, "-">>>, 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, {
+}, "-">>>, Record<"elevation", import("@codecademy/variance").LiteralPaths<import("..").ElevationScale, "-">>>, 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, {
colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
primary: {
_: "blue-500";
hover: "blue-400";Index: package/dist/ColorMode.d.ts
===================================================================
--- package/dist/ColorMode.d.ts
+++ package/dist/ColorMode.d.ts
@@ -349,9 +349,14 @@
readonly transform: (value: string | number) => string | 0;
};
readonly zIndex: {
readonly property: "zIndex";
+ readonly scale: "zIndexes";
+ readonly allowRawValue: true;
};
+ readonly isolation: {
+ readonly property: "isolation";
+ };
readonly opacity: {
readonly property: "opacity";
};
}>>, import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
@@ -822,8 +827,11 @@
};
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
readonly transform: (value: string | number) => string | 0;
}>;
+ isolation?: import("@codecademy/variance/dist/types/config").Scale<{
+ readonly property: "isolation";
+ }>;
justifyContent?: import("@codecademy/variance/dist/types/config").Scale<{
readonly property: "justifyContent";
}>;
justifyItems?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -927,8 +935,10 @@
readonly transform: (value: string | number) => string | 0;
}>;
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";
}>;
@@ -1455,8 +1465,11 @@
};
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
readonly transform: (value: string | number) => string | 0;
}>;
+ isolation?: import("@codecademy/variance/dist/types/config").Scale<{
+ readonly property: "isolation";
+ }>;
justifyContent?: import("@codecademy/variance/dist/types/config").Scale<{
readonly property: "justifyContent";
}>;
justifyItems?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -1560,8 +1573,10 @@
readonly transform: (value: string | number) => string | 0;
}>;
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";
}>;Index: package/dist/variance/config.d.ts
===================================================================
--- package/dist/variance/config.d.ts
+++ package/dist/variance/config.d.ts
@@ -454,9 +454,14 @@
readonly transform: (value: string | number) => string | 0;
};
readonly zIndex: {
readonly property: "zIndex";
+ readonly scale: "zIndexes";
+ readonly allowRawValue: true;
};
+ readonly isolation: {
+ readonly property: "isolation";
+ };
readonly opacity: {
readonly property: "opacity";
};
};
@@ -1214,9 +1219,14 @@
readonly transform: (value: string | number) => string | 0;
};
zIndex: {
readonly property: "zIndex";
+ readonly scale: "zIndexes";
+ readonly allowRawValue: true;
};
+ isolation: {
+ readonly property: "isolation";
+ };
opacity: {
readonly property: "opacity";
};
flexBasis: {Index: package/dist/themes/core.d.ts
===================================================================
--- package/dist/themes/core.d.ts
+++ package/dist/themes/core.d.ts
@@ -14,15 +14,19 @@
sm: string;
md: string;
lg: string;
xl: string;
-}> & 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", {
+}> & 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<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
c_base: string;
c_xs: string;
c_sm: string;
c_md: string;
@@ -100,10 +104,21 @@
readonly headerHeight: {
readonly base: "4rem";
readonly md: "5rem";
};
- readonly headerZ: 15;
+ 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;
+ };
} & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
readonly beige: "#FFF0E5";
readonly blue: "#1557FF";
readonly green: "#008A27";
@@ -524,8 +539,14 @@
}, "-">) => string;
}>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
1: string;
2: string;
-}, "-">>>, 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<"elevation", import("@codecademy/variance").LiteralPaths<import("../variables").ElevationScale, "-">>>, 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;
export type CoreThemeShape = typeof coreTheme;
export interface CoreTheme extends CoreThemeShape {
}Index: package/dist/variables/elements.d.ts
===================================================================
--- package/dist/variables/elements.d.ts
+++ package/dist/variables/elements.d.ts
@@ -3,9 +3,10 @@
readonly base: "4rem";
readonly md: "5rem";
};
/**
- * Semi-arbitrary z-index for global page headers.
- * @remarks PLEASE talk to web platform before adding new z-index constants!
+ * 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.
*/
- readonly headerZ: 15;
+ readonly headerZ: 300;
};Index: package/dist/variables/index.d.ts
===================================================================
--- package/dist/variables/index.d.ts
+++ package/dist/variables/index.d.ts
@@ -5,4 +5,5 @@
export * from './responsive';
export * from './spacing';
export * from './timing';
export * from './typography';
+export * from './zIndexes';Index: package/dist/themes/lxStudio.d.ts
===================================================================
--- package/dist/themes/lxStudio.d.ts
+++ package/dist/themes/lxStudio.d.ts
@@ -77,20 +77,41 @@
md: string;
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: 15;
+ readonly headerZ: 300;
}, "elements">> & {
readonly headerHeight: {
readonly base: "4rem";
readonly md: "5rem";
};
- readonly headerZ: 15;
+ readonly headerZ: 300;
};
fontSize: {
readonly 64: string;
readonly 44: string;
@@ -119,10 +140,10 @@
readonly 48: string;
readonly 64: string;
readonly 96: string;
};
- _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>;
+ _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>;
colors: import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
readonly beige: "#FFF0E5";
readonly blue: "#1557FF";
readonly green: "#008A27";Index: package/dist/themes/percipio.d.ts
===================================================================
--- package/dist/themes/percipio.d.ts
+++ package/dist/themes/percipio.d.ts
@@ -61,20 +61,41 @@
md: string;
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: 15;
+ readonly headerZ: 300;
}, "elements">> & {
readonly headerHeight: {
readonly base: "4rem";
readonly md: "5rem";
};
- readonly headerZ: 15;
+ readonly headerZ: 300;
};
borderRadii: {
none: string;
sm: string;
@@ -111,10 +132,10 @@
readonly 48: string;
readonly 64: string;
readonly 96: string;
};
- _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>;
+ _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>;
colors: import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
readonly beige: "#FFF0E5";
readonly blue: "#1557FF";
readonly green: "#008A27";Index: package/dist/themes/platform.d.ts
===================================================================
--- package/dist/themes/platform.d.ts
+++ package/dist/themes/platform.d.ts
@@ -49,15 +49,19 @@
sm: string;
md: string;
lg: string;
xl: string;
-}> & 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", {
+}> & 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<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
c_base: string;
c_xs: string;
c_sm: string;
c_md: string;
@@ -135,10 +139,21 @@
readonly headerHeight: {
readonly base: "4rem";
readonly md: "5rem";
};
- readonly headerZ: 15;
+ 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;
+ };
} & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
readonly beige: "#FFF0E5";
readonly blue: "#1557FF";
readonly green: "#008A27";
@@ -559,9 +574,15 @@
}, "-">) => string;
}>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
1: string;
2: string;
-}, "-">>>, 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<{
+}, "-">>>, Record<"elevation", import("@codecademy/variance").LiteralPaths<import("../variables").ElevationScale, "-">>>, 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<{
readonly lightBeige: "#FFFBF8";
readonly gold: "#8A7300";
readonly teal: "#006D82";
readonly purple: "#B3CCFF";Index: package/dist/variance/props.d.ts
===================================================================
--- package/dist/variance/props.d.ts
+++ package/dist/variance/props.d.ts
@@ -323,9 +323,14 @@
readonly transform: (value: string | number) => string | 0;
};
readonly zIndex: {
readonly property: "zIndex";
+ readonly scale: "zIndexes";
+ readonly allowRawValue: true;
};
+ readonly isolation: {
+ readonly property: "isolation";
+ };
readonly opacity: {
readonly property: "opacity";
};
}>>;
@@ -1217,9 +1222,14 @@
readonly transform: (value: string | number) => string | 0;
};
zIndex: {
readonly property: "zIndex";
+ readonly scale: "zIndexes";
+ readonly allowRawValue: true;
};
+ isolation: {
+ readonly property: "isolation";
+ };
opacity: {
readonly property: "opacity";
};
flexBasis: {
@@ -1894,9 +1904,14 @@
readonly transform: (value: string | number) => string | 0;
};
zIndex: {
readonly property: "zIndex";
+ readonly scale: "zIndexes";
+ readonly allowRawValue: true;
};
+ isolation: {
+ readonly property: "isolation";
+ };
opacity: {
readonly property: "opacity";
};
flexBasis: {
@@ -2571,9 +2586,14 @@
readonly transform: (value: string | number) => string | 0;
};
zIndex: {
readonly property: "zIndex";
+ readonly scale: "zIndexes";
+ readonly allowRawValue: true;
};
+ isolation: {
+ readonly property: "isolation";
+ };
opacity: {
readonly property: "opacity";
};
flexBasis: {