@codecademy/gamut-styles 17.10.0-alpha.4e9d26.0 → 17.10.0-alpha.4fbb62.0

package/dist/remoteAssets/fonts.d.ts

@@ -1,26 +1,8 @@
+import { FontConfig } from '../utils/fontUtils';
 export declare const FONT_ASSET_PATH = "https://www.codecademy.com/gamut";
-export declare const webFonts: ({
-    filePath: string;
-    extensions: string[];
-    name: string;
-    style?: undefined;
-    weight?: undefined;
-} | {
-    filePath: string;
-    extensions: string[];
-    name: string;
-    style: string;
-    weight?: undefined;
-} | {
-    filePath: string;
-    extensions: string[];
-    name: string;
-    weight: string;
-    style?: undefined;
-} | {
-    filePath: string;
-    extensions: string[];
-    name: string;
-    weight: string;
-    style: string;
-})[];
+export declare const core: readonly FontConfig[];
+export declare const percipio: readonly FontConfig[];
+export declare const webFonts: {
+    readonly core: readonly FontConfig[];
+    readonly percipio: readonly FontConfig[];
+};

package/dist/remoteAssets/fonts.js

@@ -1,8 +1,7 @@
 export const FONT_ASSET_PATH = `https://www.codecademy.com/gamut`;
 
 // woff2 should precede woff so that browsers try woff2 first.
-
-export const webFonts = [{
+export const core = [{
   filePath: `${FONT_ASSET_PATH}/apercu-regular-pro`,
   extensions: ['woff2', 'woff'],
   name: 'Apercu'
@@ -31,4 +30,38 @@ export const webFonts = [{
   filePath: `${FONT_ASSET_PATH}/SuisseIntlMono-Regular-WebS`,
   extensions: ['woff2', 'woff'],
   name: 'Suisse'
-}];
+}];
+export const percipio = [{
+  filePath: `${FONT_ASSET_PATH}/roboto-regular`,
+  extensions: ['woff2', 'woff'],
+  name: 'Roboto'
+}, {
+  filePath: `${FONT_ASSET_PATH}/roboto-italic`,
+  extensions: ['woff2', 'woff'],
+  name: 'Roboto',
+  style: 'italic'
+}, {
+  filePath: `${FONT_ASSET_PATH}/roboto-bold`,
+  extensions: ['woff2', 'woff'],
+  name: 'Roboto',
+  weight: 'bold'
+}, {
+  filePath: `${FONT_ASSET_PATH}/roboto-bold-italic`,
+  extensions: ['woff2', 'woff'],
+  name: 'Roboto',
+  weight: 'bold',
+  style: 'italic'
+}, {
+  filePath: `${FONT_ASSET_PATH}/roboto-mono-regular`,
+  extensions: ['woff2', 'woff'],
+  name: 'Roboto Mono'
+}, {
+  filePath: `${FONT_ASSET_PATH}/roboto-mono-bold`,
+  extensions: ['woff2', 'woff'],
+  name: 'Roboto Mono',
+  weight: 'bold'
+}];
+export const webFonts = {
+  core,
+  percipio
+};

package/dist/styles/boxShadow.js

@@ -29,7 +29,6 @@ export const createShadow = depth => {
   return ` 0 ${o1}px ${o2}px rgba(0, 0, 0, ${s1}),
   0 ${o3}px ${o4}px rgba(0, 0, 0, ${s2})`;
 };
-export const boxShadow = function () {
-  let depth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+export const boxShadow = (depth = 1) => {
   return /*#__PURE__*/css("box-shadow:", createShadow(depth), ";;label:boxShadow;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9zdHlsZXMvYm94U2hhZG93LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFDWSIsImZpbGUiOiIuLi8uLi9zcmMvc3R5bGVzL2JveFNoYWRvdy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuZXhwb3J0IHR5cGUgU2hhZG93RGVwdGggPSBrZXlvZiB0eXBlb2Ygc2hhZG93c0ZvckRlcHRoO1xuXG5jb25zdCBzaGFkb3dzRm9yRGVwdGggPSB7XG4gIDE6IHtcbiAgICBvZmZzZXRzOiBbMSwgMywgMSwgM10sXG4gICAgc2hhZGVzOiBbMC4xMiwgMC4yNF0sXG4gIH0sXG4gIDI6IHtcbiAgICBvZmZzZXRzOiBbMywgNiwgMywgNl0sXG4gICAgc2hhZGVzOiBbMC4xOSwgMC4yM10sXG4gIH0sXG4gIDM6IHtcbiAgICBvZmZzZXRzOiBbMTAsIDIwLCA2LCA2XSxcbiAgICBzaGFkZXM6IFswLjI1LCAwLjIyXSxcbiAgfSxcbiAgNDoge1xuICAgIG9mZnNldHM6IFsxNCwgMjgsIDEwLCAxMF0sXG4gICAgc2hhZGVzOiBbMC4yNSwgMC4yMl0sXG4gIH0sXG4gIDU6IHtcbiAgICBvZmZzZXRzOiBbMTksIDM4LCAxNSwgMTJdLFxuICAgIHNoYWRlczogWzAuMywgMC4yMl0sXG4gIH0sXG59O1xuXG5leHBvcnQgY29uc3QgY3JlYXRlU2hhZG93ID0gKGRlcHRoOiBTaGFkb3dEZXB0aCkgPT4ge1xuICBjb25zdCB7XG4gICAgb2Zmc2V0czogW28xLCBvMiwgbzMsIG80XSxcbiAgICBzaGFkZXM6IFtzMSwgczJdLFxuICB9ID0gc2hhZG93c0ZvckRlcHRoW2RlcHRoXTtcbiAgcmV0dXJuIGAgMCAke28xfXB4ICR7bzJ9cHggcmdiYSgwLCAwLCAwLCAke3MxfSksXG4gIDAgJHtvM31weCAke280fXB4IHJnYmEoMCwgMCwgMCwgJHtzMn0pYDtcbn07XG5cbmV4cG9ydCBjb25zdCBib3hTaGFkb3cgPSAoZGVwdGg6IFNoYWRvd0RlcHRoID0gMSkgPT4ge1xuICByZXR1cm4gY3NzYFxuICAgIGJveC1zaGFkb3c6ICR7Y3JlYXRlU2hhZG93KGRlcHRoKX07XG4gIGA7XG59O1xuIl19 */"));
 };

package/dist/styles/transitionConcat.js

@@ -1,6 +1,5 @@
 import { timing } from '../variables';
-export const transitionConcat = function (arrayOfProperties, transition) {
-  let timingFn = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'linear';
+export const transitionConcat = (arrayOfProperties, transition, timingFn = 'linear') => {
   const transitionString = `${timing[transition]} ${timingFn}`;
   const cssString = `${arrayOfProperties.join(` ${transitionString},`)} ${transitionString}`;
   return cssString;

package/dist/themes/admin.d.ts

@@ -10,6 +10,30 @@ export declare const adminTheme: Record<"breakpoints", {
     md: string;
     lg: string;
     xl: string;
+}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"breakpoints", {
+    c_base: string;
+    c_xs: string;
+    c_sm: string;
+    c_md: string;
+    c_lg: string;
+    c_xl: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"breakpoints", {
+    c_base: string;
+    c_xs: string;
+    c_sm: string;
+    c_md: string;
+    c_lg: string;
+    c_xl: string;
+    xs: string;
+    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";
@@ -520,7 +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> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
+}, "-">>>, 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";
@@ -959,8 +983,8 @@ 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-disabled" | "text-accent" | "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;
-}> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
+    }, "-"> | "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;
+}> & 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/admin.js

@@ -12,4 +12,4 @@ export const adminTheme = createTheme(coreTheme).addColorModes('light', {
       success: 'green-400'
     }
   }
-}).build();
+}).addName('admin').build();

package/dist/themes/core.d.ts

@@ -3,7 +3,19 @@
  * and is the only theme that gamut components are typed to. This ensures that gamut components
  * are guaranteed to be interoperable between all contexts, but with differing behaviors.
  */
-export declare const coreTheme: Record<"elements", Record<"elements", import("@codecademy/variance").KeyAsVariable<{
+export declare const coreTheme: Record<"breakpoints", {
+    c_base: string;
+    c_xs: string;
+    c_sm: string;
+    c_md: string;
+    c_lg: string;
+    c_xl: string;
+    xs: string;
+    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";
@@ -513,7 +525,7 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
 }>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
     1: string;
     2: string;
-}, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
+}, "-">>>, 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

@@ -124,12 +124,9 @@ export const coreTheme = createTheme({
       disabled: 'white-500'
     }
   }
-}).addScale('borders', _ref => {
-  let {
-    colors
-  } = _ref;
-  return {
-    1: `1px solid ${colors['border-primary']}`,
-    2: `2px solid ${colors['border-primary']}`
-  };
-}).createScaleVariables('elements').build();
+}).addScale('borders', ({
+  colors
+}) => ({
+  1: `1px solid ${colors['border-primary']}`,
+  2: `2px solid ${colors['border-primary']}`
+})).createScaleVariables('elements').addName('core').build();

package/dist/themes/lxStudio.d.ts

@@ -30,6 +30,18 @@ export declare const lxStudioTheme: Record<"breakpoints", {
     md: string;
     lg: string;
     xl: string;
+}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"breakpoints", {
+    c_base: string;
+    c_xs: string;
+    c_sm: string;
+    c_md: string;
+    c_lg: string;
+    c_xl: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
 }> & import("@codecademy/variance/dist/createTheme/types").Merge<{
     borderRadii: {
         none: string;
@@ -45,19 +57,6 @@ export declare const lxStudioTheme: Record<"breakpoints", {
         readonly monospace: "Monaco, Menlo, \"Ubuntu Mono\", \"Droid Sans Mono\", Consolas,\nmonospace";
         readonly system: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\",\n\"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif";
     };
-    elements: Record<"elements", import("@codecademy/variance").KeyAsVariable<{
-        readonly headerHeight: {
-            readonly base: "4rem";
-            readonly md: "5rem";
-        };
-        readonly headerZ: 15;
-    }, "elements">> & {
-        readonly headerHeight: {
-            readonly base: "4rem";
-            readonly md: "5rem";
-        };
-        readonly headerZ: 15;
-    };
     breakpoints: {
         c_base: string;
         c_xs: string;
@@ -71,6 +70,19 @@ export declare const lxStudioTheme: Record<"breakpoints", {
         lg: string;
         xl: string;
     };
+    elements: Record<"elements", import("@codecademy/variance").KeyAsVariable<{
+        readonly headerHeight: {
+            readonly base: "4rem";
+            readonly md: "5rem";
+        };
+        readonly headerZ: 15;
+    }, "elements">> & {
+        readonly headerHeight: {
+            readonly base: "4rem";
+            readonly md: "5rem";
+        };
+        readonly headerZ: 15;
+    };
     fontSize: {
         readonly 64: string;
         readonly 44: string;
@@ -530,6 +542,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
         1: string;
         2: string;
     }, "-">;
+    name: string;
 } & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
     lxStudioSuccess: "#06844F";
     lxStudioBgPrimary: "#FAFBFC";
@@ -1073,8 +1086,8 @@ 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" | "black" | "lightBlue" | "lightGreen" | "paleBlue" | "paleGreen" | "palePink" | "paleYellow" | "paleRed" | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-disabled" | "text-accent" | "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" | "lxStudioPurple" | "lxStudioPurpleHover") => 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" | "black" | "lightBlue" | "lightGreen" | "paleBlue" | "paleGreen" | "palePink" | "paleYellow" | "paleRed" | "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" | "lxStudioPurple" | "lxStudioPurpleHover") => string;
+}> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
 export type LxStudioThemeShape = typeof lxStudioTheme;
 export interface LxStudioTheme extends LxStudioThemeShape {
 }

package/dist/themes/lxStudio.js

@@ -51,4 +51,4 @@ export const lxStudioTheme = createTheme({
       disabled: 'navy-300'
     }
   }
-}).build();
+}).addName('lxStudio').build();

package/dist/themes/percipio.d.ts

@@ -1,7 +1,3 @@
-/**
- * @description This is an extended theme for Percipio with custom color tokens
- * based on the Percipio design system specifications.
- */
 export declare const percipioTheme: Record<"breakpoints", {
     c_base: string;
     c_xs: string;
@@ -26,6 +22,18 @@ export declare const percipioTheme: Record<"breakpoints", {
     md: string;
     lg: string;
     xl: string;
+}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"breakpoints", {
+    c_base: string;
+    c_xs: string;
+    c_sm: string;
+    c_md: string;
+    c_lg: string;
+    c_xl: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
 }> & import("@codecademy/variance/dist/createTheme/types").Merge<{
     fontFamily: {
         readonly accent: "\"Roboto\", sans-serif";
@@ -33,19 +41,6 @@ export declare const percipioTheme: Record<"breakpoints", {
         readonly monospace: "\"Roboto Mono\", monospace";
         readonly system: "\"Roboto\", sans-serif";
     };
-    elements: Record<"elements", import("@codecademy/variance").KeyAsVariable<{
-        readonly headerHeight: {
-            readonly base: "4rem";
-            readonly md: "5rem";
-        };
-        readonly headerZ: 15;
-    }, "elements">> & {
-        readonly headerHeight: {
-            readonly base: "4rem";
-            readonly md: "5rem";
-        };
-        readonly headerZ: 15;
-    };
     breakpoints: {
         c_base: string;
         c_xs: string;
@@ -59,6 +54,19 @@ export declare const percipioTheme: Record<"breakpoints", {
         lg: string;
         xl: string;
     };
+    elements: Record<"elements", import("@codecademy/variance").KeyAsVariable<{
+        readonly headerHeight: {
+            readonly base: "4rem";
+            readonly md: "5rem";
+        };
+        readonly headerZ: 15;
+    }, "elements">> & {
+        readonly headerHeight: {
+            readonly base: "4rem";
+            readonly md: "5rem";
+        };
+        readonly headerZ: 15;
+    };
     borderRadii: {
         none: string;
         sm: string;
@@ -526,29 +534,18 @@ export declare const percipioTheme: Record<"breakpoints", {
         1: string;
         2: string;
     }, "-">;
+    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)";
     percipioTextDisabled: "#AFB6C2";
     percipioTextAccent: "#222325";
-    percipioBgDefault: "#FFFFFF";
     percipioBgPrimary: "#FAFBFC";
-    percipioBgContrast: "#FFFFFF";
-    percipioBgHover: "rgba(16, 22, 47, 0.12)";
-    percipioBgSelected: "rgba(16, 22, 47, 0.04)";
-    percipioBgDisabled: "rgba(16, 22, 47, 0.12)";
     percipioBgSuccess: "#EEF7F3";
     percipioBgWarning: "#FFF7E0";
     percipioBgError: "#FFF1F5";
-    percipioBorderPrimary: "rgba(16, 22, 47, 0.47)";
-    percipioBorderSecondary: "rgba(16, 22, 47, 0.12)";
-    percipioBorderTertiary: "#10162F";
-    percipioBorderDisabled: "rgba(16, 22, 47, 0.28)";
-    percipioShadowPrimary: "rgba(16, 22, 47, 0.12)";
-    percipioShadowSecondary: "rgba(16, 22, 47, 0.47)";
     percipioActionPrimary: "#0073C4";
     percipioActionPrimaryHover: "#141C36";
-    percipioActionPrimaryInverse: "#FFFFFF";
     percipioActionSecondary: "#6A6E75";
     percipioActionSecondaryHover: "rgba(106, 110, 117, 0.86)";
     percipioActionDanger: "#B83C3C";
@@ -638,25 +635,19 @@ export declare const percipioTheme: Record<"breakpoints", {
             warning: "percipioFeedbackWarning";
         };
         background: {
-            _: "percipioBgDefault";
-            contrast: "percipioBgContrast";
-            current: "percipioBgDefault";
             primary: "percipioBgPrimary";
-            selected: "percipioBgSelected";
-            disabled: "percipioBgDisabled";
-            hover: "percipioBgHover";
             success: "percipioBgSuccess";
             warning: "percipioBgWarning";
             error: "percipioBgError";
         };
         shadow: {
-            primary: "percipioShadowPrimary";
-            secondary: "percipioShadowSecondary";
+            primary: "navy-200";
+            secondary: "navy-400";
         };
         primary: {
             _: "percipioActionPrimary";
             hover: "percipioActionPrimaryHover";
-            inverse: "percipioActionPrimaryInverse";
+            inverse: "white";
         };
         secondary: {
             _: "percipioActionSecondary";
@@ -671,10 +662,10 @@ export declare const percipioTheme: Record<"breakpoints", {
             hover: "percipioActionPrimaryHover";
         };
         border: {
-            primary: "percipioBorderPrimary";
-            secondary: "percipioBorderSecondary";
-            tertiary: "percipioBorderTertiary";
-            disabled: "percipioBorderDisabled";
+            primary: "navy-400";
+            secondary: "navy-200";
+            tertiary: "navy-800";
+            disabled: "navy-300";
         };
     }, "-", "_">, "colors"> & import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
         readonly beige: "#FFF0E5";
@@ -921,24 +912,12 @@ export declare const percipioTheme: Record<"breakpoints", {
         percipioTextSecondary: "rgba(34, 35, 37, 0.75)";
         percipioTextDisabled: "#AFB6C2";
         percipioTextAccent: "#222325";
-        percipioBgDefault: "#FFFFFF";
         percipioBgPrimary: "#FAFBFC";
-        percipioBgContrast: "#FFFFFF";
-        percipioBgHover: "rgba(16, 22, 47, 0.12)";
-        percipioBgSelected: "rgba(16, 22, 47, 0.04)";
-        percipioBgDisabled: "rgba(16, 22, 47, 0.12)";
         percipioBgSuccess: "#EEF7F3";
         percipioBgWarning: "#FFF7E0";
         percipioBgError: "#FFF1F5";
-        percipioBorderPrimary: "rgba(16, 22, 47, 0.47)";
-        percipioBorderSecondary: "rgba(16, 22, 47, 0.12)";
-        percipioBorderTertiary: "#10162F";
-        percipioBorderDisabled: "rgba(16, 22, 47, 0.28)";
-        percipioShadowPrimary: "rgba(16, 22, 47, 0.12)";
-        percipioShadowSecondary: "rgba(16, 22, 47, 0.47)";
         percipioActionPrimary: "#0073C4";
         percipioActionPrimaryHover: "#141C36";
-        percipioActionPrimaryInverse: "#FFFFFF";
         percipioActionSecondary: "#6A6E75";
         percipioActionSecondaryHover: "rgba(106, 110, 117, 0.86)";
         percipioActionDanger: "#B83C3C";
@@ -1134,25 +1113,19 @@ export declare const percipioTheme: Record<"breakpoints", {
                 warning: "percipioFeedbackWarning";
             };
             background: {
-                _: "percipioBgDefault";
-                contrast: "percipioBgContrast";
-                current: "percipioBgDefault";
                 primary: "percipioBgPrimary";
-                selected: "percipioBgSelected";
-                disabled: "percipioBgDisabled";
-                hover: "percipioBgHover";
                 success: "percipioBgSuccess";
                 warning: "percipioBgWarning";
                 error: "percipioBgError";
             };
             shadow: {
-                primary: "percipioShadowPrimary";
-                secondary: "percipioShadowSecondary";
+                primary: "navy-200";
+                secondary: "navy-400";
             };
             primary: {
                 _: "percipioActionPrimary";
                 hover: "percipioActionPrimaryHover";
-                inverse: "percipioActionPrimaryInverse";
+                inverse: "white";
             };
             secondary: {
                 _: "percipioActionSecondary";
@@ -1167,16 +1140,16 @@ export declare const percipioTheme: Record<"breakpoints", {
                 hover: "percipioActionPrimaryHover";
             };
             border: {
-                primary: "percipioBorderPrimary";
-                secondary: "percipioBorderSecondary";
-                tertiary: "percipioBorderTertiary";
-                disabled: "percipioBorderDisabled";
+                primary: "navy-400";
+                secondary: "navy-200";
+                tertiary: "navy-800";
+                disabled: "navy-300";
             };
         }, "-", "_">;
     }>;
     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" | "black" | "lightBlue" | "lightGreen" | "paleBlue" | "paleGreen" | "palePink" | "paleYellow" | "paleRed" | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-disabled" | "text-accent" | "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" | "percipioTextPrimary" | "percipioTextSecondary" | "percipioTextDisabled" | "percipioTextAccent" | "percipioBgDefault" | "percipioBgPrimary" | "percipioBgContrast" | "percipioBgHover" | "percipioBgSelected" | "percipioBgDisabled" | "percipioBgSuccess" | "percipioBgWarning" | "percipioBgError" | "percipioBorderPrimary" | "percipioBorderSecondary" | "percipioBorderTertiary" | "percipioBorderDisabled" | "percipioShadowPrimary" | "percipioShadowSecondary" | "percipioActionPrimary" | "percipioActionPrimaryHover" | "percipioActionPrimaryInverse" | "percipioActionSecondary" | "percipioActionSecondaryHover" | "percipioActionDanger" | "percipioActionDangerHover" | "percipioFeedbackSuccess" | "percipioFeedbackWarning" | "percipioFeedbackError") => 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" | "black" | "lightBlue" | "lightGreen" | "paleBlue" | "paleGreen" | "palePink" | "paleYellow" | "paleRed" | "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" | "percipioTextPrimary" | "percipioTextSecondary" | "percipioTextDisabled" | "percipioTextAccent" | "percipioBgPrimary" | "percipioBgSuccess" | "percipioBgWarning" | "percipioBgError" | "percipioActionPrimary" | "percipioActionPrimaryHover" | "percipioActionSecondary" | "percipioActionSecondaryHover" | "percipioActionDanger" | "percipioActionDangerHover" | "percipioFeedbackSuccess" | "percipioFeedbackWarning" | "percipioFeedbackError") => string;
+}> & 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,12 +1,6 @@
 import { createTheme } from '@codecademy/variance';
 import { percipioFontFamily, percipioPalette } from '../variables';
 import { coreTheme } from './core';
-
-/**
- * @description This is an extended theme for Percipio with custom color tokens
- * based on the Percipio design system specifications.
- */
-
 export const percipioTheme = createTheme({
   ...coreTheme,
   fontFamily: percipioFontFamily
@@ -25,25 +19,19 @@ export const percipioTheme = createTheme({
       warning: 'percipioFeedbackWarning'
     },
     background: {
-      _: 'percipioBgDefault',
-      contrast: 'percipioBgContrast',
-      current: 'percipioBgDefault',
       primary: 'percipioBgPrimary',
-      selected: 'percipioBgSelected',
-      disabled: 'percipioBgDisabled',
-      hover: 'percipioBgHover',
       success: 'percipioBgSuccess',
       warning: 'percipioBgWarning',
       error: 'percipioBgError'
     },
     shadow: {
-      primary: 'percipioShadowPrimary',
-      secondary: 'percipioShadowSecondary'
+      primary: 'navy-200',
+      secondary: 'navy-400'
     },
     primary: {
       _: 'percipioActionPrimary',
       hover: 'percipioActionPrimaryHover',
-      inverse: 'percipioActionPrimaryInverse'
+      inverse: 'white'
     },
     secondary: {
       _: 'percipioActionSecondary',
@@ -58,10 +46,10 @@ export const percipioTheme = createTheme({
       hover: 'percipioActionPrimaryHover'
     },
     border: {
-      primary: 'percipioBorderPrimary',
-      secondary: 'percipioBorderSecondary',
-      tertiary: 'percipioBorderTertiary',
-      disabled: 'percipioBorderDisabled'
+      primary: 'navy-400',
+      secondary: 'navy-200',
+      tertiary: 'navy-800',
+      disabled: 'navy-300'
     }
   }
-}).build();
+}).addName('percipio').build();