@codecademy/gamut-styles 17.14.1-alpha.673154.0 → 17.14.1-alpha.7a1f24.0

package/dist/index.d.ts

@@ -11,4 +11,3 @@ export * from './globals';
 export * from './utilities';
 export * from './themes';
 export { coreTheme as theme } from './themes';
-export { FONT_ASSET_PATH, lxStudio } from './remoteAssets/fonts';

package/dist/index.js

@@ -10,5 +10,4 @@ export * from './styles';
 export * from './globals';
 export * from './utilities';
 export * from './themes';
-export { coreTheme as theme } from './themes';
-export { FONT_ASSET_PATH, lxStudio } from './remoteAssets/fonts';
+export { coreTheme as theme } from './themes';

package/dist/remoteAssets/fonts.d.ts

@@ -1,12 +1,8 @@
-import { FontConfig } from '../utilities/fontUtils';
+import type { FontConfig } from '../utilities/fontUtils';
 export declare const FONT_ASSET_PATH = "https://www.codecademy.com/gamut";
 export declare const core: readonly FontConfig[];
+/** Percipio: Skillsoft (accent/base) plus Roboto system + Roboto Mono monospace. */
 export declare const percipio: readonly FontConfig[];
-/**
- * LX Studio: Skillsoft Sans (accent) + Skillsoft Text (base).
- * Weights 400 / 500 / 700 + italics; 500 uses Medium files for title/bold tokens.
- */
-export declare const lxStudio: readonly FontConfig[];
 export declare const webFonts: {
     readonly core: readonly FontConfig[];
     readonly percipio: readonly FontConfig[];

package/dist/remoteAssets/fonts.js

@@ -32,55 +32,12 @@ export const core = [{
   extensions,
   name: 'Suisse'
 }];
-export const percipio = [{
-  filePath: `${FONT_ASSET_PATH}/roboto-regular`,
-  extensions,
-  name: 'Roboto'
-}, {
-  filePath: `${FONT_ASSET_PATH}/roboto-italic`,
-  extensions,
-  name: 'Roboto',
-  style: 'italic'
-},
-// The default weight for bold fonts is 700, Percipio uses 500 for the base bold
-{
-  filePath: `${FONT_ASSET_PATH}/roboto-bold`,
-  extensions,
-  name: 'Roboto',
-  weight: 'bold'
-}, {
-  filePath: `${FONT_ASSET_PATH}/roboto-bold`,
-  extensions,
-  name: 'Roboto',
-  weight: 500
-}, {
-  filePath: `${FONT_ASSET_PATH}/roboto-bold-italic`,
-  extensions,
-  name: 'Roboto',
-  weight: 'bold',
-  style: 'italic'
-}, {
-  filePath: `${FONT_ASSET_PATH}/roboto-bold-italic`,
-  extensions,
-  name: 'Roboto',
-  weight: 500,
-  style: 'italic'
-}, {
-  filePath: `${FONT_ASSET_PATH}/roboto-mono-regular`,
-  extensions,
-  name: 'Roboto Mono'
-}, {
-  filePath: `${FONT_ASSET_PATH}/roboto-mono-bold`,
-  extensions,
-  name: 'Roboto Mono',
-  weight: 'bold'
-}];
 
 /**
- * LX Studio: Skillsoft Sans (accent) + Skillsoft Text (base).
+ * Skillsoft Sans (accent) + Skillsoft Text (base).
  * Weights 400 / 500 / 700 + italics; 500 uses Medium files for title/bold tokens.
  */
-export const lxStudio = [{
+const skillsoftFamilyFonts = [{
   filePath: `${FONT_ASSET_PATH}/SkillsoftText-Regular`,
   extensions,
   name: 'Skillsoft Text'
@@ -143,8 +100,57 @@ export const lxStudio = [{
   weight: 700,
   style: 'italic'
 }];
+
+/**
+ * Roboto + Roboto Mono for Percipio `system` and `monospace` theme slots.
+ * The default weight for bold fonts is 700; Percipio uses 500 for the base bold.
+ */
+const percipioRobotoFonts = [{
+  filePath: `${FONT_ASSET_PATH}/roboto-regular`,
+  extensions,
+  name: 'Roboto'
+}, {
+  filePath: `${FONT_ASSET_PATH}/roboto-italic`,
+  extensions,
+  name: 'Roboto',
+  style: 'italic'
+}, {
+  filePath: `${FONT_ASSET_PATH}/roboto-bold`,
+  extensions,
+  name: 'Roboto',
+  weight: 'bold'
+}, {
+  filePath: `${FONT_ASSET_PATH}/roboto-bold`,
+  extensions,
+  name: 'Roboto',
+  weight: 500
+}, {
+  filePath: `${FONT_ASSET_PATH}/roboto-bold-italic`,
+  extensions,
+  name: 'Roboto',
+  weight: 'bold',
+  style: 'italic'
+}, {
+  filePath: `${FONT_ASSET_PATH}/roboto-bold-italic`,
+  extensions,
+  name: 'Roboto',
+  weight: 500,
+  style: 'italic'
+}, {
+  filePath: `${FONT_ASSET_PATH}/roboto-mono-regular`,
+  extensions,
+  name: 'Roboto Mono'
+}, {
+  filePath: `${FONT_ASSET_PATH}/roboto-mono-bold`,
+  extensions,
+  name: 'Roboto Mono',
+  weight: 'bold'
+}];
+
+/** Percipio: Skillsoft (accent/base) plus Roboto system + Roboto Mono monospace. */
+export const percipio = [...skillsoftFamilyFonts, ...percipioRobotoFonts];
 export const webFonts = {
   core,
   percipio,
-  lxStudio
+  lxStudio: percipio
 };

package/dist/themes/lxStudio.js

@@ -1,5 +1,5 @@
 import { createTheme } from '@codecademy/variance';
-import { fontLxStudioAccent, fontLxStudioBase, fontMonospace, fontSystem, fontWeight as coreFontWeight, lxStudioPalette } from '../variables';
+import { fontMonospace, fontSystem, fontWeightMediumTitle, lxStudioPalette, percipioFontFamily } from '../variables';
 import { coreTheme } from './core';
 
 /**
@@ -8,17 +8,11 @@ import { coreTheme } from './core';
  */
 
 const lxStudioFontFamily = {
-  accent: fontLxStudioAccent,
-  base: fontLxStudioBase,
+  accent: percipioFontFamily.accent,
+  base: percipioFontFamily.base,
   monospace: fontMonospace,
   system: fontSystem
 };
-const lxStudioFontWeight = {
-  ...coreFontWeight,
-  title: 500,
-  bold: 500,
-  500: 500
-};
 export const lxStudioBorderRadii = {
   none: '0px',
   sm: '4px',
@@ -31,7 +25,7 @@ export const lxStudioTheme = createTheme({
   ...coreTheme,
   borderRadii: lxStudioBorderRadii,
   fontFamily: lxStudioFontFamily,
-  fontWeight: lxStudioFontWeight
+  fontWeight: fontWeightMediumTitle
 }).addColors(lxStudioPalette).addColorModes('light', {
   // these are just the overrides, the rest of the tokens are inherited from coreTheme
   light: {

package/dist/themes/percipio.d.ts

@@ -36,17 +36,18 @@ export declare const percipioTheme: Record<"breakpoints", {
     xl: string;
 }> & import("@codecademy/variance/dist/createTheme/types").Merge<{
     fontFamily: {
-        readonly accent: "\"Roboto\", sans-serif";
-        readonly base: "\"Roboto\", sans-serif";
+        readonly accent: "\"Skillsoft Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
+        readonly base: "\"Skillsoft Text\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
         readonly monospace: "\"Roboto Mono\", monospace";
         readonly system: "\"Roboto\", sans-serif";
     };
     fontWeight: {
-        base: number;
-        title: number;
-        bold: number;
-        700: number;
-        400: number;
+        readonly title: 500;
+        readonly bold: 500;
+        readonly 500: 500;
+        readonly base: 400;
+        readonly 700: 700;
+        readonly 400: 400;
     };
     breakpoints: {
         c_base: string;
@@ -545,7 +546,7 @@ export declare const percipioTheme: Record<"breakpoints", {
     percipioBgSuccess: "#EEF7F3";
     percipioBgWarning: "#FFF7E0";
     percipioBgError: "#FFF1F5";
-    percipioActionPrimary: "#0073C4";
+    sapphire: "#1C50BB";
     percipioActionPrimaryHover: "#141C36";
     percipioActionSecondary: "#6A6E75";
     percipioActionSecondaryHover: "rgba(106, 110, 117, 0.86)";
@@ -645,7 +646,7 @@ export declare const percipioTheme: Record<"breakpoints", {
             secondary: "navy-400";
         };
         primary: {
-            _: "percipioActionPrimary";
+            _: "sapphire";
             hover: "percipioActionPrimaryHover";
             inverse: "white";
         };
@@ -658,7 +659,7 @@ export declare const percipioTheme: Record<"breakpoints", {
             hover: "percipioActionDangerHover";
         };
         interface: {
-            _: "percipioActionPrimary";
+            _: "sapphire";
             hover: "percipioActionPrimaryHover";
         };
         border: {
@@ -916,7 +917,7 @@ export declare const percipioTheme: Record<"breakpoints", {
         percipioBgSuccess: "#EEF7F3";
         percipioBgWarning: "#FFF7E0";
         percipioBgError: "#FFF1F5";
-        percipioActionPrimary: "#0073C4";
+        sapphire: "#1C50BB";
         percipioActionPrimaryHover: "#141C36";
         percipioActionSecondary: "#6A6E75";
         percipioActionSecondaryHover: "rgba(106, 110, 117, 0.86)";
@@ -1122,7 +1123,7 @@ export declare const percipioTheme: Record<"breakpoints", {
                 secondary: "navy-400";
             };
             primary: {
-                _: "percipioActionPrimary";
+                _: "sapphire";
                 hover: "percipioActionPrimaryHover";
                 inverse: "white";
             };
@@ -1135,7 +1136,7 @@ export declare const percipioTheme: Record<"breakpoints", {
                 hover: "percipioActionDangerHover";
             };
             interface: {
-                _: "percipioActionPrimary";
+                _: "sapphire";
                 hover: "percipioActionPrimaryHover";
             };
             border: {
@@ -1147,7 +1148,7 @@ export declare const percipioTheme: Record<"breakpoints", {
         }, "-", "_">;
     }>;
     mode: "light";
-    _getColorValue: (color: "beige" | "blue" | "navy" | "green" | "yellow" | "pink" | "red" | "orange" | "hyper" | "white" | "beige-100" | "blue-0" | "blue-100" | "blue-300" | "blue-400" | "blue-500" | "blue-800" | "navy-100" | "navy-300" | "navy-400" | "navy-500" | "navy-800" | "navy-200" | "navy-600" | "navy-700" | "navy-900" | "green-0" | "green-100" | "green-400" | "green-700" | "green-900" | "yellow-0" | "yellow-400" | "yellow-500" | "yellow-900" | "pink-0" | "pink-400" | "red-0" | "red-300" | "red-400" | "red-500" | "red-600" | "red-900" | "orange-100" | "orange-500" | "hyper-400" | "hyper-500" | "gray-100" | "gray-300" | "gray-800" | "gray-200" | "gray-600" | "gray-900" | "white-100" | "white-300" | "white-400" | "white-500" | "white-200" | "white-600" | "white-700" | "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" | "percipioActionDangerHover" | "percipioFeedbackSuccess" | "percipioFeedbackWarning" | "percipioDanger") => 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" | "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" | "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;
 export type PercipioThemeShape = typeof percipioTheme;
 export interface PercipioTheme extends PercipioThemeShape {

package/dist/themes/percipio.js

@@ -1,16 +1,10 @@
 import { createTheme } from '@codecademy/variance';
-import { percipioFontFamily, percipioPalette } from '../variables';
+import { fontWeightMediumTitle, percipioFontFamily, percipioPalette } from '../variables';
 import { coreTheme } from './core';
 export const percipioTheme = createTheme({
   ...coreTheme,
   fontFamily: percipioFontFamily,
-  fontWeight: {
-    base: 400,
-    title: 500,
-    bold: 500,
-    700: 700,
-    400: 400
-  }
+  fontWeight: fontWeightMediumTitle
 }).addColors(percipioPalette).addColorModes('light', {
   // these are just the overrides, the rest of the tokens are inherited from coreTheme
   light: {
@@ -36,7 +30,7 @@ export const percipioTheme = createTheme({
       secondary: 'navy-400'
     },
     primary: {
-      _: 'percipioActionPrimary',
+      _: 'sapphire',
       hover: 'percipioActionPrimaryHover',
       inverse: 'white'
     },
@@ -49,7 +43,7 @@ export const percipioTheme = createTheme({
       hover: 'percipioActionDangerHover'
     },
     interface: {
-      _: 'percipioActionPrimary',
+      _: 'sapphire',
       hover: 'percipioActionPrimaryHover'
     },
     border: {

package/dist/variables/colors.d.ts

@@ -228,6 +228,8 @@ export declare const platformPalette: {
 /**
  * LX Studio Colors
  */
+/** Primary brand blue; used by LX Studio and Percipio theme `primary` tokens */
+export declare const sapphire = "#1C50BB";
 export declare const lxStudioColors: {
     readonly lxStudioSuccess: "#06844F";
     readonly lxStudioBgPrimary: "#FAFBFC";
@@ -318,7 +320,7 @@ export declare const percipioColors: {
     readonly percipioBgSuccess: "#EEF7F3";
     readonly percipioBgWarning: "#FFF7E0";
     readonly percipioBgError: "#FFF1F5";
-    readonly percipioActionPrimary: "#0073C4";
+    readonly sapphire: "#1C50BB";
     readonly percipioActionPrimaryHover: "#141C36";
     readonly percipioActionSecondary: "#6A6E75";
     readonly percipioActionSecondaryHover: "rgba(106, 110, 117, 0.86)";
@@ -336,7 +338,7 @@ export declare const percipioPalette: {
     percipioBgSuccess: "#EEF7F3";
     percipioBgWarning: "#FFF7E0";
     percipioBgError: "#FFF1F5";
-    percipioActionPrimary: "#0073C4";
+    sapphire: "#1C50BB";
     percipioActionPrimaryHover: "#141C36";
     percipioActionSecondary: "#6A6E75";
     percipioActionSecondaryHover: "rgba(106, 110, 117, 0.86)";

package/dist/variables/colors.js

@@ -158,10 +158,12 @@ export const platformPalette = {
  * LX Studio Colors
  */
 
+/** Primary brand blue; used by LX Studio and Percipio theme `primary` tokens */
+export const sapphire = '#1C50BB';
 export const lxStudioColors = {
   lxStudioSuccess: '#06844F',
   lxStudioBgPrimary: '#FAFBFC',
-  sapphire: '#1C50BB'
+  sapphire
 };
 export const lxStudioPalette = {
   ...corePalette,
@@ -184,7 +186,7 @@ export const percipioColors = {
   percipioBgWarning: '#FFF7E0',
   percipioBgError: '#FFF1F5',
   // Action colors
-  percipioActionPrimary: '#0073C4',
+  sapphire,
   percipioActionPrimaryHover: '#141C36',
   percipioActionSecondary: '#6A6E75',
   percipioActionSecondaryHover: 'rgba(106, 110, 117, 0.86)',
@@ -194,6 +196,8 @@ export const percipioColors = {
   percipioFeedbackWarning: '#EF5B0D',
   // Multiuse colors
   percipioDanger: '#B83C3C'
+
+  /** Shared with LX Studio; `primary` color mode resolves here */
 };
 export const percipioPalette = {
   ...corePalette,

package/dist/variables/typography.d.ts

@@ -2,8 +2,8 @@ export declare const fontAccent = "\"Suisse\", \"Apercu\", -apple-system, BlinkM
 export declare const fontBase = "\"Apercu\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
 export declare const fontMonospace = "Monaco, Menlo, \"Ubuntu Mono\", \"Droid Sans Mono\", Consolas,\nmonospace";
 export declare const fontSystem = "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\",\n\"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif";
-export declare const fontLxStudioAccent = "\"Skillsoft Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
-export declare const fontLxStudioBase = "\"Skillsoft Text\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
+export declare const fontPercipioAccent = "\"Skillsoft Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
+export declare const fontPercipioBase = "\"Skillsoft Text\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
 export declare const fontFamily: {
     readonly accent: "\"Suisse\", \"Apercu\", -apple-system, BlinkMacSystemFont,\n\"Segoe UI\", \"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\",\n\"Helvetica Neue\", sans-serif";
     readonly base: "\"Apercu\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
@@ -32,9 +32,18 @@ export declare const fontWeight: {
     readonly 700: 700;
     readonly 400: 400;
 };
+/** Title/bold semantic tokens use 500 (Medium), matching Skillsoft + Percipio Roboto webfonts. */
+export declare const fontWeightMediumTitle: {
+    readonly title: 500;
+    readonly bold: 500;
+    readonly 500: 500;
+    readonly base: 400;
+    readonly 700: 700;
+    readonly 400: 400;
+};
 export declare const percipioFontFamily: {
-    readonly accent: "\"Roboto\", sans-serif";
-    readonly base: "\"Roboto\", sans-serif";
+    readonly accent: "\"Skillsoft Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
+    readonly base: "\"Skillsoft Text\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
     readonly monospace: "\"Roboto Mono\", monospace";
     readonly system: "\"Roboto\", sans-serif";
 };

package/dist/variables/typography.js

@@ -9,10 +9,10 @@ export const fontMonospace = `Monaco, Menlo, "Ubuntu Mono", "Droid Sans Mono", C
 monospace`;
 export const fontSystem = `-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu",
 "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif`;
-export const fontLxStudioAccent = `"Skillsoft Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
+export const fontPercipioAccent = `"Skillsoft Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
 "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
 sans-serif`;
-export const fontLxStudioBase = `"Skillsoft Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
+export const fontPercipioBase = `"Skillsoft Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
 "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
 sans-serif`;
 export const fontFamily = {
@@ -43,9 +43,17 @@ export const fontWeight = {
   700: 700,
   400: 400
 };
+
+/** Title/bold semantic tokens use 500 (Medium), matching Skillsoft + Percipio Roboto webfonts. */
+export const fontWeightMediumTitle = {
+  ...fontWeight,
+  title: 500,
+  bold: 500,
+  500: 500
+};
 export const percipioFontFamily = {
-  accent: '"Roboto", sans-serif',
-  base: '"Roboto", sans-serif',
+  accent: fontPercipioAccent,
+  base: fontPercipioBase,
   monospace: '"Roboto Mono", monospace',
   system: '"Roboto", sans-serif'
 };

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@codecademy/gamut-styles",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "17.14.1-alpha.673154.0",
+  "version": "17.14.1-alpha.7a1f24.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "dependencies": {
-    "@codecademy/variance": "0.26.2-alpha.673154.0",
+    "@codecademy/variance": "0.26.2-alpha.7a1f24.0",
     "@emotion/is-prop-valid": "^1.1.0",
     "framer-motion": "^11.18.0",
     "get-nonce": "^1.0.0",