@codecademy/gamut-styles
17.14.017.14.1-alpha.a6e8fa.0
~
Modified (11 files)
Index: package/dist/variables/colors.js
===================================================================
--- package/dist/variables/colors.js
+++ package/dist/variables/colors.js
@@ -157,13 +157,14 @@
/**
* 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',
- lxStudioPurple: '#5628FE',
- lxStudioPurpleHover: '#7955FC'
+ sapphire
};
export const lxStudioPalette = {
...corePalette,
...lxStudioColors
@@ -184,9 +185,9 @@
percipioBgSuccess: '#EEF7F3',
percipioBgWarning: '#FFF7E0',
percipioBgError: '#FFF1F5',
// Action colors
- percipioActionPrimary: '#0073C4',
+ sapphire,
percipioActionPrimaryHover: '#141C36',
percipioActionSecondary: '#6A6E75',
percipioActionSecondaryHover: 'rgba(106, 110, 117, 0.86)',
percipioActionDangerHover: '#A52020',
@@ -194,8 +195,10 @@
percipioFeedbackSuccess: '#1B8057',
percipioFeedbackWarning: '#EF5B0D',
// Multiuse colors
percipioDanger: '#B83C3C'
+
+ /** Shared with LX Studio; `primary` color mode resolves here */
};
export const percipioPalette = {
...corePalette,
...percipioColorsIndex: package/dist/remoteAssets/fonts.js
===================================================================
--- package/dist/remoteAssets/fonts.js
+++ package/dist/remoteAssets/fonts.js
@@ -31,20 +31,91 @@
filePath: `${FONT_ASSET_PATH}/SuisseIntlMono-Regular-WebS`,
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'
}, {
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'
@@ -74,30 +145,12 @@
extensions,
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
};
\ No newline at end of fileIndex: package/dist/themes/lxStudio.js
===================================================================
--- package/dist/themes/lxStudio.js
+++ package/dist/themes/lxStudio.js
@@ -1,16 +1,16 @@
import { createTheme } from '@codecademy/variance';
-import { fontLxStudio, fontMonospace, fontSystem, lxStudioPalette } from '../variables';
+import { fontMonospace, fontSystem, fontWeightMediumTitle, lxStudioPalette, percipioFontFamily } 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: percipioFontFamily.accent,
+ base: percipioFontFamily.base,
monospace: fontMonospace,
system: fontSystem
};
export const lxStudioBorderRadii = {
@@ -23,9 +23,10 @@
};
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: {
feedback: {
@@ -37,10 +38,10 @@
shadow: {
primary: 'navy-200'
},
primary: {
- _: 'lxStudioPurple',
- hover: 'lxStudioPurpleHover'
+ _: 'sapphire',
+ hover: 'navy-800'
},
interface: {
_: 'hyper-500',
hover: 'hyper-400'Index: package/dist/themes/percipio.js
===================================================================
--- package/dist/themes/percipio.js
+++ package/dist/themes/percipio.js
@@ -1,17 +1,11 @@
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: {
text: {
@@ -35,9 +29,9 @@
primary: 'navy-200',
secondary: 'navy-400'
},
primary: {
- _: 'percipioActionPrimary',
+ _: 'sapphire',
hover: 'percipioActionPrimaryHover',
inverse: 'white'
},
secondary: {
@@ -48,9 +42,9 @@
_: 'percipioDanger',
hover: 'percipioActionDangerHover'
},
interface: {
- _: 'percipioActionPrimary',
+ _: 'sapphire',
hover: 'percipioActionPrimaryHover'
},
border: {
primary: 'navy-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 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 = {
accent: fontAccent,
base: fontBase,
monospace: fontMonospace,
@@ -39,10 +42,18 @@
title: 700,
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'
};
\ No newline at end of fileIndex: 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.a6e8fa.0",
"author": "Jake Hiller <[email protected]>",
"dependencies": {
- "@codecademy/variance": "0.26.1",
+ "@codecademy/variance": "0.26.2-alpha.a6e8fa.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
@@ -227,19 +227,19 @@
};
/**
* 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";
- 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";
@@ -319,9 +319,9 @@
readonly percipioBgPrimary: "#FAFBFC";
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)";
readonly percipioActionDangerHover: "#A52020";
@@ -337,9 +337,9 @@
percipioBgPrimary: "#FAFBFC";
percipioBgSuccess: "#EEF7F3";
percipioBgWarning: "#FFF7E0";
percipioBgError: "#FFF1F5";
- percipioActionPrimary: "#0073C4";
+ sapphire: "#1C50BB";
percipioActionPrimaryHover: "#141C36";
percipioActionSecondary: "#6A6E75";
percipioActionSecondaryHover: "rgba(106, 110, 117, 0.86)";
percipioActionDangerHover: "#A52020";Index: package/dist/remoteAssets/fonts.d.ts
===================================================================
--- package/dist/remoteAssets/fonts.d.ts
+++ package/dist/remoteAssets/fonts.d.ts
@@ -1,9 +1,9 @@
-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[];
readonly lxStudio: readonly FontConfig[];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/themes/percipio.d.ts
===================================================================
--- package/dist/themes/percipio.d.ts
+++ package/dist/themes/percipio.d.ts
@@ -35,19 +35,20 @@
lg: string;
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;
c_xs: string;
@@ -544,9 +545,9 @@
percipioBgPrimary: "#FAFBFC";
percipioBgSuccess: "#EEF7F3";
percipioBgWarning: "#FFF7E0";
percipioBgError: "#FFF1F5";
- percipioActionPrimary: "#0073C4";
+ sapphire: "#1C50BB";
percipioActionPrimaryHover: "#141C36";
percipioActionSecondary: "#6A6E75";
percipioActionSecondaryHover: "rgba(106, 110, 117, 0.86)";
percipioActionDangerHover: "#A52020";
@@ -644,9 +645,9 @@
primary: "navy-200";
secondary: "navy-400";
};
primary: {
- _: "percipioActionPrimary";
+ _: "sapphire";
hover: "percipioActionPrimaryHover";
inverse: "white";
};
secondary: {
@@ -657,9 +658,9 @@
_: "percipioDanger";
hover: "percipioActionDangerHover";
};
interface: {
- _: "percipioActionPrimary";
+ _: "sapphire";
hover: "percipioActionPrimaryHover";
};
border: {
primary: "navy-400";
@@ -915,9 +916,9 @@
percipioBgPrimary: "#FAFBFC";
percipioBgSuccess: "#EEF7F3";
percipioBgWarning: "#FFF7E0";
percipioBgError: "#FFF1F5";
- percipioActionPrimary: "#0073C4";
+ sapphire: "#1C50BB";
percipioActionPrimaryHover: "#141C36";
percipioActionSecondary: "#6A6E75";
percipioActionSecondaryHover: "rgba(106, 110, 117, 0.86)";
percipioActionDangerHover: "#A52020";
@@ -1121,9 +1122,9 @@
primary: "navy-200";
secondary: "navy-400";
};
primary: {
- _: "percipioActionPrimary";
+ _: "sapphire";
hover: "percipioActionPrimaryHover";
inverse: "white";
};
secondary: {
@@ -1134,9 +1135,9 @@
_: "percipioDanger";
hover: "percipioActionDangerHover";
};
interface: {
- _: "percipioActionPrimary";
+ _: "sapphire";
hover: "percipioActionPrimaryHover";
};
border: {
primary: "navy-400";
@@ -1146,9 +1147,9 @@
};
}, "-", "_">;
}>;
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 {
}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 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";
readonly monospace: "Monaco, Menlo, \"Ubuntu Mono\", \"Droid Sans Mono\", Consolas,\nmonospace";
@@ -30,10 +31,19 @@
readonly title: 700;
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";
};