@codecademy/gamut-styles 17.14.1-alpha.3e2104.0 → 17.14.1-alpha.444e35.0

package/dist/remoteAssets/fonts.d.ts

@@ -2,10 +2,6 @@ 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,72 +75,25 @@ 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}/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`,
+  filePath: `${FONT_ASSET_PATH}/hanken-grotesk-regular`,
   extensions,
-  name: 'Skillsoft Text',
-  weight: 500,
-  style: 'italic'
+  name: 'Hanken Grotesk'
 }, {
-  filePath: `${FONT_ASSET_PATH}/SkillsoftText-Bold`,
+  filePath: `${FONT_ASSET_PATH}/hanken-grotesk-italic`,
   extensions,
-  name: 'Skillsoft Text',
-  weight: 700
-}, {
-  filePath: `${FONT_ASSET_PATH}/SkillsoftText-BoldItalic`,
-  extensions,
-  name: 'Skillsoft Text',
-  weight: 700,
+  name: 'Hanken Grotesk',
   style: 'italic'
 }, {
-  filePath: `${FONT_ASSET_PATH}/SkillsoftSans-Regular`,
+  filePath: `${FONT_ASSET_PATH}/hanken-grotesk-bold`,
   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
+  name: 'Hanken Grotesk',
+  weight: 'bold'
 }, {
-  filePath: `${FONT_ASSET_PATH}/SkillsoftSans-BoldItalic`,
+  filePath: `${FONT_ASSET_PATH}/hanken-grotesk-bold-italic`,
   extensions,
-  name: 'Skillsoft Sans',
-  weight: 700,
+  name: 'Hanken Grotesk',
+  weight: 'bold',
   style: 'italic'
 }];
 export const webFonts = {

package/dist/themes/lxStudio.d.ts

@@ -52,19 +52,11 @@ export declare const lxStudioTheme: Record<"breakpoints", {
         full: string;
     };
     fontFamily: {
-        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 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 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;
@@ -107,6 +99,12 @@ 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;
@@ -548,7 +546,8 @@ 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";
-    sapphire: "#1C50BB";
+    lxStudioPurple: "#5628FE";
+    lxStudioPurpleHover: "#7955FC";
     beige: "#FFF0E5";
     blue: "#1557FF";
     green: "#008A27";
@@ -629,8 +628,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
             primary: "navy-200";
         };
         primary: {
-            _: "sapphire";
-            hover: "navy-800";
+            _: "lxStudioPurple";
+            hover: "lxStudioPurpleHover";
         };
         interface: {
             _: "hyper-500";
@@ -884,7 +883,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
     }, "-">, "color">>, import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
         lxStudioSuccess: "#06844F";
         lxStudioBgPrimary: "#FAFBFC";
-        sapphire: "#1C50BB";
+        lxStudioPurple: "#5628FE";
+        lxStudioPurpleHover: "#7955FC";
         beige: "#FFF0E5";
         blue: "#1557FF";
         green: "#008A27";
@@ -1071,8 +1071,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
                 primary: "navy-200";
             };
             primary: {
-                _: "sapphire";
-                hover: "navy-800";
+                _: "lxStudioPurple";
+                hover: "lxStudioPurpleHover";
             };
             interface: {
                 _: "hyper-500";
@@ -1086,7 +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-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" | "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 type LxStudioTheme = LxStudioThemeShape;
+export interface LxStudioTheme extends LxStudioThemeShape {
+}

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

package/dist/variables/colors.d.ts

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

package/dist/variables/colors.js

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

package/dist/variables/typography.d.ts

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