@codecademy/gamut-styles
20.1.020.1.1-alpha.319fdb.0
+
Added (2 files)
~
Modified (10 files)
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, 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
* and is the only theme that gamut components are typed to. This ensures that gamut components
@@ -128,5 +128,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
+})).addScale('elevation', coreElevation).createScaleVariables('elements').addName('core').build();
\ No newline at end of fileIndex: package/dist/variables/index.js
===================================================================
--- package/dist/variables/index.js
+++ package/dist/variables/index.js
@@ -1,7 +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';
\ No newline at end of fileIndex: package/dist/themes/percipio.js
===================================================================
--- package/dist/themes/percipio.js
+++ package/dist/themes/percipio.js
@@ -1,6 +1,6 @@
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,
fontFamily: percipioFontFamily,
@@ -52,5 +52,5 @@
tertiary: 'navy-800',
disabled: 'navy-300'
}
}
-}).addName('percipio').build();
\ No newline at end of file
+}).addScale('elevation', percipioElevation).addName('percipio').build();
\ 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.1.0",
+ "version": "20.1.1-alpha.319fdb.0",
"author": "Jake Hiller <[email protected]>",
"dependencies": {
- "@codecademy/variance": "0.26.1",
+ "@codecademy/variance": "0.26.2-alpha.319fdb.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
@@ -39,9 +39,9 @@
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", {
+}, "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;
c_md: string;
@@ -543,9 +543,9 @@
}, "-">) => 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<"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";
hover: "blue-400";
@@ -913,9 +913,9 @@
};
}, "-", "_">;
}>;
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";
readonly hyper: "#3A10E5";
@@ -982,9 +982,9 @@
readonly "white-500": string;
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 {
}Index: package/dist/themes/core.d.ts
===================================================================
--- package/dist/themes/core.d.ts
+++ package/dist/themes/core.d.ts
@@ -20,9 +20,9 @@
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", {
+}, "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;
c_md: string;
@@ -524,8 +524,8 @@
}, "-">) => 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<"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 {
}Index: package/dist/variables/index.d.ts
===================================================================
--- package/dist/variables/index.d.ts
+++ package/dist/variables/index.d.ts
@@ -1,7 +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';Index: package/dist/themes/lxStudio.d.ts
===================================================================
--- package/dist/themes/lxStudio.d.ts
+++ package/dist/themes/lxStudio.d.ts
@@ -543,8 +543,9 @@
borders: import("@codecademy/variance").LiteralPaths<{
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";
lxStudioBgPrimary: "#FAFBFC";
@@ -1085,8 +1086,8 @@
};
}, "-", "_">;
}>;
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;Index: package/dist/themes/percipio.d.ts
===================================================================
--- package/dist/themes/percipio.d.ts
+++ package/dist/themes/percipio.d.ts
@@ -21,9 +21,9 @@
sm: string;
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;
c_md: string;
@@ -535,8 +535,9 @@
borders: import("@codecademy/variance").LiteralPaths<{
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";
percipioTextSecondary: "rgba(34, 35, 37, 0.75)";
@@ -1147,9 +1148,9 @@
};
}, "-", "_">;
}>;
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 {
}Index: package/dist/themes/platform.d.ts
===================================================================
--- package/dist/themes/platform.d.ts
+++ package/dist/themes/platform.d.ts
@@ -55,9 +55,9 @@
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", {
+}, "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;
c_md: string;
@@ -559,9 +559,9 @@
}, "-">) => 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<{
+}, "-">>>, 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";
readonly purple: "#B3CCFF";
@@ -1083,9 +1083,9 @@
};
}, "-", "_">;
}>;
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";
readonly hyper: "#3A10E5";
@@ -1152,9 +1152,9 @@
readonly "white-500": string;
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";
readonly purple: "#B3CCFF";