@codecademy/gamut-styles
20.0.220.0.3-alpha.212edd.0
+
Added (2 files)
~
Modified (12 files)
Index: package/dist/variance/config.js
===================================================================
--- package/dist/variance/config.js
+++ package/dist/variance/config.js
@@ -449,8 +449,11 @@
},
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
+ // `zIndices` token object instead (e.g. zIndex={zIndices.modal}).
zIndex: {
property: 'zIndex'
},
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, corePalette, elements, fontFamily, fontSize, fontWeight, lineHeight, mediaQueries, spacing } from '../variables';
+import { borderRadii, containerQueries, corePalette, elements, fontFamily, fontSize, fontWeight, lineHeight, mediaQueries, spacing, zIndices } 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,
+ zIndices
}).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']}`
-})).createScaleVariables('elements').addName('core').build();
\ No newline at end of file
+})).createScaleVariables('elements').createScaleVariables('zIndices').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 { zIndices } from './zIndices';
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 `zIndices`
+ * scale so consumers still reading `elements.headerZ` stay in sync with the scale.
+ * Prefer `zIndex="appBar"` in new code.
*/
- headerZ: 15
+ headerZ: zIndices.appBar
};
\ No newline at end of fileIndex: package/dist/variables/index.js
===================================================================
--- package/dist/variables/index.js
+++ package/dist/variables/index.js
@@ -3,5 +3,6 @@
export * from './elements';
export * from './responsive';
export * from './spacing';
export * from './timing';
-export * from './typography';
\ No newline at end of file
+export * from './typography';
+export * from './zIndices';
\ 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": "20.0.2",
+ "version": "20.0.3-alpha.212edd.0",
"author": "Jake Hiller <[email protected]>",
"dependencies": {
- "@codecademy/variance": "0.26.1",
+ "@codecademy/variance": "0.26.2-alpha.212edd.0",
"@emotion/is-prop-valid": "^1.1.0",
"framer-motion": "^11.18.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,21 @@
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<Record<"breakpoints", {
+}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"zIndices", Record<"zIndices", import("@codecademy/variance").KeyAsVariable<{
+ readonly underlay: -100;
+ readonly base: 0;
+ readonly foreground: 100;
+ readonly portal: 200;
+ readonly widget: 300;
+ readonly appBar: 400;
+ readonly flyout: 500;
+ readonly modal: 600;
+ readonly popover: 700;
+ readonly toaster: 800;
+ readonly tooltip: 900;
+}, "zIndices">>> & 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;
c_md: string;
@@ -119,10 +125,23 @@
readonly headerHeight: {
readonly base: "4rem";
readonly md: "5rem";
};
- readonly headerZ: 15;
+ readonly headerZ: 400;
};
+ zIndices: {
+ readonly underlay: -100;
+ readonly base: 0;
+ readonly foreground: 100;
+ readonly portal: 200;
+ readonly widget: 300;
+ readonly appBar: 400;
+ readonly flyout: 500;
+ readonly modal: 600;
+ readonly popover: 700;
+ readonly toaster: 800;
+ readonly tooltip: 900;
+ };
} & 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 +562,15 @@
}, "-">) => string;
}>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
1: string;
2: string;
-}, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
+}, "-">>>, 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: 400;
+}, "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/themes/core.d.ts
===================================================================
--- package/dist/themes/core.d.ts
+++ package/dist/themes/core.d.ts
@@ -14,15 +14,21 @@
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<Record<"breakpoints", {
+}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"zIndices", Record<"zIndices", import("@codecademy/variance").KeyAsVariable<{
+ readonly underlay: -100;
+ readonly base: 0;
+ readonly foreground: 100;
+ readonly portal: 200;
+ readonly widget: 300;
+ readonly appBar: 400;
+ readonly flyout: 500;
+ readonly modal: 600;
+ readonly popover: 700;
+ readonly toaster: 800;
+ readonly tooltip: 900;
+}, "zIndices">>> & 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;
c_md: string;
@@ -100,10 +106,23 @@
readonly headerHeight: {
readonly base: "4rem";
readonly md: "5rem";
};
- readonly headerZ: 15;
+ readonly headerZ: 400;
};
+ zIndices: {
+ readonly underlay: -100;
+ readonly base: 0;
+ readonly foreground: 100;
+ readonly portal: 200;
+ readonly widget: 300;
+ readonly appBar: 400;
+ readonly flyout: 500;
+ readonly modal: 600;
+ readonly popover: 700;
+ readonly toaster: 800;
+ readonly tooltip: 900;
+ };
} & 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 +543,14 @@
}, "-">) => string;
}>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
1: string;
2: string;
-}, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
+}, "-">>>, 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: 400;
+}, "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 `zIndices`
+ * scale so consumers still reading `elements.headerZ` stay in sync with the scale.
+ * Prefer `zIndex="appBar"` in new code.
*/
- readonly headerZ: 15;
+ readonly headerZ: 400;
};Index: package/dist/variables/index.d.ts
===================================================================
--- package/dist/variables/index.d.ts
+++ package/dist/variables/index.d.ts
@@ -4,4 +4,5 @@
export * from './responsive';
export * from './spacing';
export * from './timing';
export * from './typography';
+export * from './zIndices';Index: package/dist/themes/lxStudio.d.ts
===================================================================
--- package/dist/themes/lxStudio.d.ts
+++ package/dist/themes/lxStudio.d.ts
@@ -77,20 +77,45 @@
md: string;
lg: string;
xl: string;
};
+ zIndices: Record<"zIndices", import("@codecademy/variance").KeyAsVariable<{
+ readonly underlay: -100;
+ readonly base: 0;
+ readonly foreground: 100;
+ readonly portal: 200;
+ readonly widget: 300;
+ readonly appBar: 400;
+ readonly flyout: 500;
+ readonly modal: 600;
+ readonly popover: 700;
+ readonly toaster: 800;
+ readonly tooltip: 900;
+ }, "zIndices">> & {
+ readonly underlay: -100;
+ readonly base: 0;
+ readonly foreground: 100;
+ readonly portal: 200;
+ readonly widget: 300;
+ readonly appBar: 400;
+ readonly flyout: 500;
+ readonly modal: 600;
+ readonly popover: 700;
+ readonly toaster: 800;
+ readonly tooltip: 900;
+ };
elements: Record<"elements", import("@codecademy/variance").KeyAsVariable<{
readonly headerHeight: {
readonly base: "4rem";
readonly md: "5rem";
};
- readonly headerZ: 15;
+ readonly headerZ: 400;
}, "elements">> & {
readonly headerHeight: {
readonly base: "4rem";
readonly md: "5rem";
};
- readonly headerZ: 15;
+ readonly headerZ: 400;
};
fontSize: {
readonly 64: string;
readonly 44: string;
@@ -119,10 +144,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,45 @@
md: string;
lg: string;
xl: string;
};
+ zIndices: Record<"zIndices", import("@codecademy/variance").KeyAsVariable<{
+ readonly underlay: -100;
+ readonly base: 0;
+ readonly foreground: 100;
+ readonly portal: 200;
+ readonly widget: 300;
+ readonly appBar: 400;
+ readonly flyout: 500;
+ readonly modal: 600;
+ readonly popover: 700;
+ readonly toaster: 800;
+ readonly tooltip: 900;
+ }, "zIndices">> & {
+ readonly underlay: -100;
+ readonly base: 0;
+ readonly foreground: 100;
+ readonly portal: 200;
+ readonly widget: 300;
+ readonly appBar: 400;
+ readonly flyout: 500;
+ readonly modal: 600;
+ readonly popover: 700;
+ readonly toaster: 800;
+ readonly tooltip: 900;
+ };
elements: Record<"elements", import("@codecademy/variance").KeyAsVariable<{
readonly headerHeight: {
readonly base: "4rem";
readonly md: "5rem";
};
- readonly headerZ: 15;
+ readonly headerZ: 400;
}, "elements">> & {
readonly headerHeight: {
readonly base: "4rem";
readonly md: "5rem";
};
- readonly headerZ: 15;
+ readonly headerZ: 400;
};
borderRadii: {
none: string;
sm: string;
@@ -111,10 +136,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,21 @@
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<Record<"breakpoints", {
+}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"zIndices", Record<"zIndices", import("@codecademy/variance").KeyAsVariable<{
+ readonly underlay: -100;
+ readonly base: 0;
+ readonly foreground: 100;
+ readonly portal: 200;
+ readonly widget: 300;
+ readonly appBar: 400;
+ readonly flyout: 500;
+ readonly modal: 600;
+ readonly popover: 700;
+ readonly toaster: 800;
+ readonly tooltip: 900;
+}, "zIndices">>> & 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;
c_md: string;
@@ -135,10 +141,23 @@
readonly headerHeight: {
readonly base: "4rem";
readonly md: "5rem";
};
- readonly headerZ: 15;
+ readonly headerZ: 400;
};
+ zIndices: {
+ readonly underlay: -100;
+ readonly base: 0;
+ readonly foreground: 100;
+ readonly portal: 200;
+ readonly widget: 300;
+ readonly appBar: 400;
+ readonly flyout: 500;
+ readonly modal: 600;
+ readonly popover: 700;
+ readonly toaster: 800;
+ readonly tooltip: 900;
+ };
} & 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 +578,15 @@
}, "-">) => string;
}>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
1: string;
2: string;
-}, "-">>>, 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<{
+}, "-">>>, 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: 400;
+}, "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";