Skip to content

chore(LXStudio + Percipio): update theme#3341

Open
dreamwasp wants to merge 8 commits into
mainfrom
cass-gmt-1560
Open

chore(LXStudio + Percipio): update theme#3341
dreamwasp wants to merge 8 commits into
mainfrom
cass-gmt-1560

Conversation

@dreamwasp
Copy link
Copy Markdown
Contributor

@dreamwasp dreamwasp commented May 5, 2026 •
edited
Loading

Overview

For LXStudio:

Color updates ([figma link](https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=78900-79438&t=hNl3ImjAAGa9pw4G-4)):

lxStudioPurple: #1C50BB

rename lxStudioPurple to sapphire

lxStudioPurpleHover: Remove 

primary-hover: navy-800

For Percipio theme:

change primary => sapphire

For both:
Font updates (figma link):

accent: “Skillsoft Sans”

base: “Skillsoft Text”

fontWeight: bold + title are 500, 700 is still available.

PR Checklist

  • Related to designs:
  • Related to JIRA ticket: [ABC-123]
  • Version plan added/updated (or not needed)
  • I have run this code to verify it works
  • This PR includes unit tests for the code change
  • This PR includes testing instructions tests for the code change
  • The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

  1. Check out the Text page and see the correct 500 font-weight on titles + bold for both Percipio + LXStudio theme
  2. See buttons now using sapphire (and navy-800 on hover for LXStudio theme)

PR Links and Envs

Repository PR Link
LXStudio LXStudio PR

@nx-cloud
Copy link
Copy Markdown

nx-cloud Bot commented May 5, 2026 •
edited
Loading

View your CI Pipeline Execution ↗ for commit 8ddd04a

☁️ Nx Cloud last updated this comment at 2026-05-12 18:36:49 UTC

@codecov
Copy link
Copy Markdown

codecov Bot commented May 5, 2026 •
edited
Loading

⚠️ JUnit XML file not found

The CLI was unable to find any JUnit XML files to upload.
For more help, visit our troubleshooting guide.

@dreamwasp dreamwasp marked this pull request as ready for review May 6, 2026 15:57
@dreamwasp dreamwasp requested a review from a team as a code owner May 6, 2026 15:57
@dreamwasp
Copy link
Copy Markdown
Contributor Author

dreamwasp commented May 6, 2026

something was up w/ netlify, PR preview here

Preview URL: https://69fb6509ee4c55607c5b94f5--gamut-preview.netlify.app
Deploy Logs: https://app.netlify.com/projects/gamut-preview/deploys/69fb6509ee4c55607c5b94f5

@dreamwasp dreamwasp marked this pull request as draft May 6, 2026 19:55
dreamwasp
dreamwasp commented May 7, 2026
View reviewed changes
Comment thread packages/styleguide/.storybook/theming/GamutTheme.ts
Comment on lines +12 to +26
/**
* Storybook docs chrome (`parameters.docs.theme`) uses `fontBase` for MDX canvas
* typography. It must match the toolbar-selected Gamut theme’s `fontFamily.base`
* (see DocsContainer); otherwise e.g. LX Studio shows Skillsoft Text on `body`
* from Reboot but Apercu inside addon-docs div rules.
*/
export function createGamutDocsTheme(
fontBase: string = gamutTheme.fontFamily.base
) {
return create({
base: 'light',
brandTitle: isLocalhost ? 'Gamut Local' : 'Gamut',
brandImage: logo,
brandUrl: '/',
fontBase,
Copy link
Copy Markdown
Contributor Author

@dreamwasp dreamwasp May 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there was a bug with themes with different fonts inheriting Apercu, this fixes that

@dreamwasp dreamwasp changed the title chore(LXStudio): update theme chore(LXStudio + Percipio): update theme May 7, 2026
@dreamwasp dreamwasp marked this pull request as ready for review May 7, 2026 19:51
@codecademydev
Copy link
Copy Markdown
Collaborator

codecademydev commented May 12, 2026

📬 Published Alpha Packages:

Package Version npm Diff
@codecademy/gamut 68.5.2-alpha.7a1f24.0 npm diff
@codecademy/gamut-icons 9.57.5-alpha.7a1f24.0 npm diff
@codecademy/gamut-illustrations 0.58.11-alpha.7a1f24.0 npm diff
@codecademy/gamut-kit 0.6.598-alpha.7a1f24.0 npm diff
@codecademy/gamut-patterns 0.10.30-alpha.7a1f24.0 npm diff
@codecademy/gamut-styles 17.14.1-alpha.7a1f24.0 npm diff
@codecademy/gamut-tests 6.0.1-alpha.7a1f24.0 npm diff
@codecademy/variance 0.26.2-alpha.7a1f24.0 npm diff
eslint-plugin-gamut 2.4.4-alpha.7a1f24.0 npm diff

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 12, 2026

🚀 Styleguide deploy preview ready!

Preview URL: https://6a0373e8efabc748bb5fdf70--gamut-preview.netlify.app
Deploy Logs: https://app.netlify.com/projects/gamut-preview/deploys/6a0373e8efabc748bb5fdf70

LinKCoding
LinKCoding approved these changes May 12, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@LinKCoding LinKCoding left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Leaving some non-blocking comments --
the text's font weights look correct
and the button's new primary color and hover on lxstudio look good!

Comment thread packages/styleguide/.storybook/theming/GamutTheme.ts
brandUrl: '/',
fontBase,

//
Copy link
Copy Markdown
Contributor

@LinKCoding LinKCoding May 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: I see that this comment is leftover from older code, but doesn't actually say anything, maybe just remove?

Comment thread packages/gamut-styles/src/themes/__tests__/theme.test.ts
['core', coreTheme],
['platform', platformTheme],
['admin', adminTheme],
['lxStudio', lxStudioTheme],
Copy link
Copy Markdown
Contributor

@LinKCoding LinKCoding May 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should the percipio theme also be tested?

Comment thread packages/styleguide/src/lib/Foundations/shared/elements.tsx
};

export const FontFamilyTable = () => {
const currentTheme = useTheme() as typeof theme;
Copy link
Copy Markdown
Contributor

@LinKCoding LinKCoding May 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔥

Comment thread packages/styleguide/src/lib/Foundations/Theme/PercipioTheme.mdx
Comment on lines 38 to 50
.percipioActionPrimary}; // theme here refers to the current theme, which is the Percipio theme
`;
```

If you have to import the theme object from `@codecademy/gamut-styles`, you will need to import the `percipioTheme` object, as `theme` references the Core Theme.

```tsx
import { css } from '@emotion/react';
import { percipioTheme, theme } from '@codecademy/gamut-styles';

const myStyles = css`
color: ${percipioTheme.colors.percipioActionPrimary};
`;
Copy link
Copy Markdown
Contributor

@LinKCoding LinKCoding May 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

percipioActionPrimary in both these code snippets should be replaced with sapphire

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@aresnik11 aresnik11 Awaiting requested review from aresnik11

@LinKCoding LinKCoding Awaiting requested review from LinKCoding

@speterson-cc speterson-cc Awaiting requested review from speterson-cc

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@dreamwasp @codecademydev @LinKCoding