@codecademy/gamut-styles 17.14.1-alpha.63a45b.0 → 17.14.1-alpha.63ac27.0

package/dist/index.d.ts

@@ -11,3 +11,4 @@ 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,4 +10,5 @@ export * from './styles';
 export * from './globals';
 export * from './utilities';
 export * from './themes';
-export { coreTheme as theme } from './themes';
+export { coreTheme as theme } from './themes';
+export { FONT_ASSET_PATH, lxStudio } from './remoteAssets/fonts';

package/dist/remoteAssets/fonts.d.ts

@@ -2,6 +2,10 @@ import { FontConfig } from '../utilities/fontUtils';
 export declare const FONT_ASSET_PATH = "https://www.codecademy.com/gamut";
 export declare const core: readonly FontConfig[];
 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[];

package/dist/remoteAssets/fonts.js

@@ -75,25 +75,72 @@ export const percipio = [{
   name: 'Roboto Mono',
   weight: 'bold'
 }];
+
+/**
+ * LX Studio: Skillsoft Sans (accent) + Skillsoft Text (base).
+ * Weights 400 / 500 / 700 + italics; 500 uses Medium files for title/bold tokens.
+ */
 export const lxStudio = [{
-  filePath: `${FONT_ASSET_PATH}/hanken-grotesk-regular`,
+  filePath: `${FONT_ASSET_PATH}/SkillsoftText-Regular`,
   extensions,
-  name: 'Hanken Grotesk'
+  name: 'Skillsoft Text'
 }, {
-  filePath: `${FONT_ASSET_PATH}/hanken-grotesk-italic`,
+  filePath: `${FONT_ASSET_PATH}/SkillsoftText-RegularItalic`,
   extensions,
-  name: 'Hanken Grotesk',
+  name: 'Skillsoft Text',
   style: 'italic'
 }, {
-  filePath: `${FONT_ASSET_PATH}/hanken-grotesk-bold`,
+  filePath: `${FONT_ASSET_PATH}/SkillsoftText-Medium`,
   extensions,
-  name: 'Hanken Grotesk',
-  weight: 'bold'
+  name: 'Skillsoft Text',
+  weight: 500
 }, {
-  filePath: `${FONT_ASSET_PATH}/hanken-grotesk-bold-italic`,
+  filePath: `${FONT_ASSET_PATH}/SkillsoftText-MediumItalic`,
   extensions,
-  name: 'Hanken Grotesk',
-  weight: 'bold',
+  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'
 }];
 export const webFonts = {

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 { fontLxStudioAccent, fontLxStudioBase, fontMonospace, fontSystem, fontWeight as coreFontWeight, lxStudioPalette } from '../variables';
 import { coreTheme } from './core';
 
 /**
@@ -8,11 +8,17 @@ import { coreTheme } from './core';
  */
 
 const lxStudioFontFamily = {
-  accent: fontLxStudio,
-  base: fontLxStudio,
+  accent: fontLxStudioAccent,
+  base: fontLxStudioBase,
   monospace: fontMonospace,
   system: fontSystem
 };
+const lxStudioFontWeight = {
+  ...coreFontWeight,
+  title: 500,
+  bold: 500,
+  500: 500
+};
 export const lxStudioBorderRadii = {
   none: '0px',
   sm: '4px',
@@ -24,7 +30,8 @@ export const lxStudioBorderRadii = {
 export const lxStudioTheme = createTheme({
   ...coreTheme,
   borderRadii: lxStudioBorderRadii,
-  fontFamily: lxStudioFontFamily
+  fontFamily: lxStudioFontFamily,
+  fontWeight: lxStudioFontWeight
 }).addColors(lxStudioPalette).addColorModes('light', {
   // these are just the overrides, the rest of the tokens are inherited from coreTheme
   light: {
@@ -38,8 +45,8 @@ export const lxStudioTheme = createTheme({
       primary: 'navy-200'
     },
     primary: {
-      _: 'lxStudioPurple',
-      hover: 'lxStudioPurpleHover'
+      _: 'sapphire',
+      hover: 'navy-800'
     },
     interface: {
       _: 'hyper-500',

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 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 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";

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 fontLxStudioAccent = `"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",
 "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
 sans-serif`;
 export const fontFamily = {

package/package.json

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