@codecademy/gamut-styles
17.14.017.14.1-alpha.469476.0
~
Modified (11 files)
Index: package/dist/variables/colors.js
===================================================================
--- package/dist/variables/colors.js
+++ package/dist/variables/colors.js
@@ -160,10 +160,9 @@
export const lxStudioColors = {
lxStudioSuccess: '#06844F',
lxStudioBgPrimary: '#FAFBFC',
- lxStudioPurple: '#5628FE',
- lxStudioPurpleHover: '#7955FC'
+ sapphire: '#1C50BB'
};
export const lxStudioPalette = {
...corePalette,
...lxStudioColorsIndex: package/dist/remoteAssets/fonts.js
===================================================================
--- package/dist/remoteAssets/fonts.js
+++ package/dist/remoteAssets/fonts.js
@@ -74,28 +74,75 @@
extensions,
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 = {
core,
percipio,Index: package/dist/index.js
===================================================================
--- package/dist/index.js
+++ package/dist/index.js
@@ -9,5 +9,6 @@
export * from './styles';
export * from './globals';
export * from './utilities';
export * from './themes';
-export { coreTheme as theme } from './themes';
\ No newline at end of file
+export { coreTheme as theme } from './themes';
+export { FONT_ASSET_PATH, lxStudio } from './remoteAssets/fonts';
\ No newline at end of fileIndex: package/dist/themes/lxStudio.js
===================================================================
--- package/dist/themes/lxStudio.js
+++ package/dist/themes/lxStudio.js
@@ -1,19 +1,25 @@
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';
/**
* @description This is an extended theme for the lx studio with an expanded set of tokens
* That are not needed for the rest of the application.
*/
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',
md: '8px',
@@ -23,9 +29,10 @@
};
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: {
feedback: {
@@ -37,10 +44,10 @@
shadow: {
primary: 'navy-200'
},
primary: {
- _: 'lxStudioPurple',
- hover: 'lxStudioPurpleHover'
+ _: 'sapphire',
+ hover: 'navy-800'
},
interface: {
_: 'hyper-500',
hover: 'hyper-400'Index: package/dist/variables/typography.js
===================================================================
--- package/dist/variables/typography.js
+++ package/dist/variables/typography.js
@@ -8,11 +8,14 @@
export const fontMonospace = `Monaco, Menlo, "Ubuntu Mono", "Droid Sans Mono", Consolas,
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 = {
accent: fontAccent,
base: fontBase,
monospace: fontMonospace,Index: package/package.json
===================================================================
--- package/package.json
+++ package/package.json
@@ -1,11 +1,11 @@
{
"name": "@codecademy/gamut-styles",
"description": "Styleguide & Component library for codecademy.com",
- "version": "17.14.0",
+ "version": "17.14.1-alpha.469476.0",
"author": "Jake Hiller <[email protected]>",
"dependencies": {
- "@codecademy/variance": "0.26.1",
+ "@codecademy/variance": "0.26.2-alpha.469476.0",
"@emotion/is-prop-valid": "^1.1.0",
"framer-motion": "^11.18.0",
"get-nonce": "^1.0.0",
"polished": "^4.1.2"Index: package/dist/variables/colors.d.ts
===================================================================
--- package/dist/variables/colors.d.ts
+++ package/dist/variables/colors.d.ts
@@ -230,16 +230,14 @@
*/
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";
hyper: "#3A10E5";Index: package/dist/remoteAssets/fonts.d.ts
===================================================================
--- package/dist/remoteAssets/fonts.d.ts
+++ package/dist/remoteAssets/fonts.d.ts
@@ -1,8 +1,12 @@
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[];
readonly percipio: readonly FontConfig[];Index: package/dist/index.d.ts
===================================================================
--- package/dist/index.d.ts
+++ package/dist/index.d.ts
@@ -10,4 +10,5 @@
export * from './globals';
export * from './utilities';
export * from './themes';
export { coreTheme as theme } from './themes';
+export { FONT_ASSET_PATH, lxStudio } from './remoteAssets/fonts';Index: package/dist/themes/lxStudio.d.ts
===================================================================
--- package/dist/themes/lxStudio.d.ts
+++ package/dist/themes/lxStudio.d.ts
@@ -51,13 +51,21 @@
xl: string;
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;
c_sm: string;
@@ -98,14 +106,8 @@
readonly base: 1.5;
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;
readonly 8: string;
@@ -545,10 +547,9 @@
name: string;
} & 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";
hyper: "#3A10E5";
@@ -627,10 +628,10 @@
shadow: {
primary: "navy-200";
};
primary: {
- _: "lxStudioPurple";
- hover: "lxStudioPurpleHover";
+ _: "sapphire";
+ hover: "navy-800";
};
interface: {
_: "hyper-500";
hover: "hyper-400";
@@ -882,10 +883,9 @@
readonly "white-700": string;
}, "-">, "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";
hyper: "#3A10E5";
@@ -1070,10 +1070,10 @@
shadow: {
primary: "navy-200";
};
primary: {
- _: "lxStudioPurple";
- hover: "lxStudioPurpleHover";
+ _: "sapphire";
+ hover: "navy-800";
};
interface: {
_: "hyper-500";
hover: "hyper-400";
@@ -1085,9 +1085,8 @@
};
}, "-", "_">;
}>;
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;Index: package/dist/variables/typography.d.ts
===================================================================
--- package/dist/variables/typography.d.ts
+++ package/dist/variables/typography.d.ts
@@ -1,9 +1,10 @@
export declare const fontAccent = "\"Suisse\", \"Apercu\", -apple-system, BlinkMacSystemFont,\n\"Segoe UI\", \"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\",\n\"Helvetica Neue\", sans-serif";
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";
readonly monospace: "Monaco, Menlo, \"Ubuntu Mono\", \"Droid Sans Mono\", Consolas,\nmonospace";