@codecademy/gamut-styles 17.14.1-alpha.c5935d.0 → 17.14.1-alpha.c95ffe.0

package/dist/remoteAssets/fonts.d.ts

@@ -1,8 +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[];
-export declare const lxStudio: readonly FontConfig[];
 export declare const webFonts: {
     readonly core: readonly FontConfig[];
     readonly percipio: readonly FontConfig[];

package/dist/remoteAssets/fonts.js

@@ -32,7 +32,80 @@ export const core = [{
   extensions,
   name: 'Suisse'
 }];
-export const percipio = [{
+
+/**
+ * Skillsoft Sans (accent) + Skillsoft Text (base).
+ * Weights 400 / 500 / 700 + italics; 500 uses Medium files for title/bold tokens.
+ */
+const skillsoftFamilyFonts = [{
+  filePath: `${FONT_ASSET_PATH}/SkillsoftText-Regular`,
+  extensions,
+  name: 'Skillsoft Text'
+}, {
+  filePath: `${FONT_ASSET_PATH}/SkillsoftText-RegularItalic`,
+  extensions,
+  name: 'Skillsoft Text',
+  style: 'italic'
+}, {
+  filePath: `${FONT_ASSET_PATH}/SkillsoftText-Medium`,
+  extensions,
+  name: 'Skillsoft Text',
+  weight: 500
+}, {
+  filePath: `${FONT_ASSET_PATH}/SkillsoftText-MediumItalic`,
+  extensions,
+  name: 'Skillsoft Text',
+  weight: 500,
+  style: 'italic'
+}, {
+  filePath: `${FONT_ASSET_PATH}/SkillsoftText-Bold`,
+  extensions,
+  name: 'Skillsoft Text',
+  weight: 700
+}, {
+  filePath: `${FONT_ASSET_PATH}/SkillsoftText-BoldItalic`,
+  extensions,
+  name: 'Skillsoft Text',
+  weight: 700,
+  style: 'italic'
+}, {
+  filePath: `${FONT_ASSET_PATH}/SkillsoftSans-Regular`,
+  extensions,
+  name: 'Skillsoft Sans'
+}, {
+  filePath: `${FONT_ASSET_PATH}/SkillsoftSans-RegularItalic`,
+  extensions,
+  name: 'Skillsoft Sans',
+  style: 'italic'
+}, {
+  filePath: `${FONT_ASSET_PATH}/SkillsoftSans-Medium`,
+  extensions,
+  name: 'Skillsoft Sans',
+  weight: 500
+}, {
+  filePath: `${FONT_ASSET_PATH}/SkillsoftSans-MediumItalic`,
+  extensions,
+  name: 'Skillsoft Sans',
+  weight: 500,
+  style: 'italic'
+}, {
+  filePath: `${FONT_ASSET_PATH}/SkillsoftSans-Bold`,
+  extensions,
+  name: 'Skillsoft Sans',
+  weight: 700
+}, {
+  filePath: `${FONT_ASSET_PATH}/SkillsoftSans-BoldItalic`,
+  extensions,
+  name: 'Skillsoft Sans',
+  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'
@@ -41,9 +114,7 @@ export const percipio = [{
   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',
@@ -75,29 +146,11 @@ export const percipio = [{
   name: 'Roboto Mono',
   weight: 'bold'
 }];
-export const lxStudio = [{
-  filePath: `${FONT_ASSET_PATH}/hanken-grotesk-regular`,
-  extensions,
-  name: 'Hanken Grotesk'
-}, {
-  filePath: `${FONT_ASSET_PATH}/hanken-grotesk-italic`,
-  extensions,
-  name: 'Hanken Grotesk',
-  style: 'italic'
-}, {
-  filePath: `${FONT_ASSET_PATH}/hanken-grotesk-bold`,
-  extensions,
-  name: 'Hanken Grotesk',
-  weight: 'bold'
-}, {
-  filePath: `${FONT_ASSET_PATH}/hanken-grotesk-bold-italic`,
-  extensions,
-  name: 'Hanken Grotesk',
-  weight: 'bold',
-  style: 'italic'
-}];
+
+/** 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.d.ts

@@ -52,11 +52,19 @@ export declare const lxStudioTheme: Record<"breakpoints", {
         full: string;
     };
     fontFamily: {
-        readonly accent: "\"Hanken Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
-        readonly base: "\"Hanken Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-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: "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";
     };
+    fontWeight: {
+        readonly title: 500;
+        readonly bold: 500;
+        readonly 500: 500;
+        readonly base: 400;
+        readonly 700: 700;
+        readonly 400: 400;
+    };
     breakpoints: {
         c_base: string;
         c_xs: string;
@@ -99,12 +107,6 @@ export declare const lxStudioTheme: Record<"breakpoints", {
         readonly spacedTitle: 1.3;
         readonly title: 1.2;
     };
-    fontWeight: {
-        readonly base: 400;
-        readonly title: 700;
-        readonly 700: 700;
-        readonly 400: 400;
-    };
     spacing: {
         readonly 0: 0;
         readonly 4: string;
@@ -546,8 +548,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
 } & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
     lxStudioSuccess: "#06844F";
     lxStudioBgPrimary: "#FAFBFC";
-    lxStudioPurple: "#5628FE";
-    lxStudioPurpleHover: "#7955FC";
+    sapphire: "#1C50BB";
     beige: "#FFF0E5";
     blue: "#1557FF";
     green: "#008A27";
@@ -628,8 +629,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
             primary: "navy-200";
         };
         primary: {
-            _: "lxStudioPurple";
-            hover: "lxStudioPurpleHover";
+            _: "sapphire";
+            hover: "navy-800";
         };
         interface: {
             _: "hyper-500";
@@ -883,8 +884,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
     }, "-">, "color">>, import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
         lxStudioSuccess: "#06844F";
         lxStudioBgPrimary: "#FAFBFC";
-        lxStudioPurple: "#5628FE";
-        lxStudioPurpleHover: "#7955FC";
+        sapphire: "#1C50BB";
         beige: "#FFF0E5";
         blue: "#1557FF";
         green: "#008A27";
@@ -1071,8 +1071,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
                 primary: "navy-200";
             };
             primary: {
-                _: "lxStudioPurple";
-                hover: "lxStudioPurpleHover";
+                _: "sapphire";
+                hover: "navy-800";
             };
             interface: {
                 _: "hyper-500";
@@ -1086,8 +1086,7 @@ 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-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;
+    _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" | "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 interface LxStudioTheme extends LxStudioThemeShape {
-}
+export type LxStudioTheme = LxStudioThemeShape;

package/dist/themes/lxStudio.js

@@ -1,5 +1,5 @@
 import { createTheme } from '@codecademy/variance';
-import { fontLxStudio, fontMonospace, fontSystem, lxStudioPalette } from '../variables';
+import { fontMonospace, fontSystem, fontWeightMediumTitle, lxStudioPalette, percipioFontFamily } from '../variables';
 import { coreTheme } from './core';
 
 /**
@@ -8,8 +8,8 @@ import { coreTheme } from './core';
  */
 
 const lxStudioFontFamily = {
-  accent: fontLxStudio,
-  base: fontLxStudio,
+  accent: percipioFontFamily.accent,
+  base: percipioFontFamily.base,
   monospace: fontMonospace,
   system: fontSystem
 };
@@ -24,7 +24,8 @@ export const lxStudioBorderRadii = {
 export const lxStudioTheme = createTheme({
   ...coreTheme,
   borderRadii: lxStudioBorderRadii,
-  fontFamily: lxStudioFontFamily
+  fontFamily: lxStudioFontFamily,
+  fontWeight: fontWeightMediumTitle
 }).addColors(lxStudioPalette).addColorModes('light', {
   // these are just the overrides, the rest of the tokens are inherited from coreTheme
   light: {
@@ -38,8 +39,8 @@ export const lxStudioTheme = createTheme({
       primary: 'navy-200'
     },
     primary: {
-      _: 'lxStudioPurple',
-      hover: 'lxStudioPurpleHover'
+      _: 'sapphire',
+      hover: 'navy-800'
     },
     interface: {
       _: 'hyper-500',

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;

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: {

package/dist/variables/colors.d.ts

@@ -231,14 +231,12 @@ export declare const platformPalette: {
 export declare const lxStudioColors: {
     readonly lxStudioSuccess: "#06844F";
     readonly lxStudioBgPrimary: "#FAFBFC";
-    readonly lxStudioPurple: "#5628FE";
-    readonly lxStudioPurpleHover: "#7955FC";
+    readonly sapphire: "#1C50BB";
 };
 export declare const lxStudioPalette: {
     lxStudioSuccess: "#06844F";
     lxStudioBgPrimary: "#FAFBFC";
-    lxStudioPurple: "#5628FE";
-    lxStudioPurpleHover: "#7955FC";
+    sapphire: "#1C50BB";
     beige: "#FFF0E5";
     blue: "#1557FF";
     green: "#008A27";

package/dist/variables/colors.js

@@ -161,8 +161,7 @@ export const platformPalette = {
 export const lxStudioColors = {
   lxStudioSuccess: '#06844F',
   lxStudioBgPrimary: '#FAFBFC',
-  lxStudioPurple: '#5628FE',
-  lxStudioPurpleHover: '#7955FC'
+  sapphire: '#1C50BB'
 };
 export const lxStudioPalette = {
   ...corePalette,

package/dist/variables/typography.d.ts

@@ -2,7 +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 fontLxStudio = "\"Hanken Grotesk\", -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";
@@ -31,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,7 +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 fontLxStudio = `"Hanken Grotesk", -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 fontPercipioBase = `"Skillsoft Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
 "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
 sans-serif`;
 export const fontFamily = {
@@ -40,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.c5935d.0",
+  "version": "17.14.1-alpha.c95ffe.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "dependencies": {
-    "@codecademy/variance": "0.26.2-alpha.c5935d.0",
+    "@codecademy/variance": "0.26.2-alpha.c95ffe.0",
     "@emotion/is-prop-valid": "^1.1.0",
     "framer-motion": "^11.18.0",
     "get-nonce": "^1.0.0",