@codecademy/gamut 68.7.1-alpha.89ca82.0 → 68.7.1-alpha.f618c1.0

package/agent-tools/DESIGN.Percipio.md

@@ -5,12 +5,12 @@ description: Design tokens for the Skillsoft Percipio platform.
 colors:
   # palette — raw swatches; set once on :root and then always reference by token name, never use hex values directly in code
   percipioTextPrimary: '#222325'
-  percipioTextSecondary: 'rgba(34, 35, 37, 0.75)'
+  percipioTextSecondary: '#595A5C'
   percipioTextDisabled: '#AFB6C2'
-  sapphire: '#1C50BB'
+  percipioActionPrimary: '#0073C4'
   percipioActionPrimaryHover: '#141C36'
   percipioActionSecondary: '#6A6E75'
-  percipioActionSecondaryHover: 'rgba(106, 110, 117, 0.86)'
+  percipioActionSecondaryHover: '#7F8288'
   percipioActionDangerHover: '#A52020'
   percipioDanger: '#B83C3C'
   percipioFeedbackSuccess: '#1B8057'
@@ -20,10 +20,10 @@ colors:
   percipioBgWarning: '#FFF7E0'
   percipioBgError: '#FFF1F5'
   navy-800: '#10162F'
-  navy-400: 'rgba(16, 22, 47, 0.47)'
-  navy-300: 'rgba(16, 22, 47, 0.28)'
-  navy-200: 'rgba(16, 22, 47, 0.12)'
-  navy-100: 'rgba(16, 22, 47, 0.04)'
+  navy-400: '#8F919D'
+  navy-300: '#BCBEC5'
+  navy-200: '#E2E3E6'
+  navy-100: '#F5F6F7'
   white: '#ffffff'
   # semantic aliases — use these in code, not palette swatches or hex values
   text: '{colors.percipioTextPrimary}'
@@ -38,7 +38,7 @@ colors:
   background-success: '{colors.percipioBgSuccess}'
   background-warning: '{colors.percipioBgWarning}'
   background-error: '{colors.percipioBgError}'
-  primary: '{colors.sapphire}'
+  primary: '{colors.percipioActionPrimary}'
   primary-hover: '{colors.percipioActionPrimaryHover}'
   primary-inverse: '{colors.white}'
   secondary: '{colors.percipioActionSecondary}'
@@ -56,17 +56,17 @@ colors:
   shadow-secondary: '{colors.navy-400}'
 typography:
   base:
-    fontFamily: '"Skillsoft Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif'
+    fontFamily: '"Roboto", sans-serif'
     fontSize: '1rem'
     fontWeight: '400'
     lineHeight: '1.5'
   accent:
-    fontFamily: '"Skillsoft Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif'
+    fontFamily: '"Roboto", sans-serif'
     fontSize: '0.875rem'
     fontWeight: '400'
     lineHeight: '1.5'
   title:
-    fontFamily: '"Skillsoft Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif'
+    fontFamily: '"Roboto", sans-serif'
     fontSize: '2.125rem'
     fontWeight: '500'
     lineHeight: '1.2'
@@ -129,7 +129,7 @@ Percipio communicates **professional clarity** — clean, trustworthy, and enter
 **Design philosophy**:
 
 - Light mode only — no dark mode support
-- Brand blue (`sapphire` / `primary`) replaces Codecademy's `hyper-500` for buttons, links, and focus rings
+- Primary blue (`percipioActionPrimary`) replaces Codecademy's `hyper-500` for all interactive elements
 - Text is near-black dark gray rather than navy
 - Shadows are soft and minimal (navy at low opacity) rather than hard borders
 - Title font weight is 500 (medium) rather than 700 (bold) — Percipio headlines are less heavy
@@ -140,9 +140,9 @@ Percipio communicates **professional clarity** — clean, trustworthy, and enter
 
 Percipio uses a single Gamut theme — light mode only.
 
-| Theme        | Use case                    | Base font             | Dark mode  |
-| ------------ | --------------------------- | --------------------- | ---------- |
-| **Percipio** | Skillsoft Percipio platform | Skillsoft Text / Sans | light only |
+| Theme        | Use case                    | Base font | Dark mode  |
+| ------------ | --------------------------- | --------- | ---------- |
+| **Percipio** | Skillsoft Percipio platform | Roboto    | light only |
 
 The active theme is set at the app root via `<GamutProvider theme={percipioTheme}>`.
 
@@ -154,63 +154,63 @@ Use these token names when specifying colors. Percipio is light mode only — th
 
 ### Text
 
-| Token            | Resolves to             | Use for                                          |
-| ---------------- | ----------------------- | ------------------------------------------------ |
-| `text`           | `percipioTextPrimary`   | Default body and UI text                         |
-| `text-accent`    | `percipioTextPrimary`   | Emphasis text (same value as `text` in Percipio) |
-| `text-secondary` | `percipioTextSecondary` | Supporting / secondary copy                      |
-| `text-disabled`  | `percipioTextDisabled`  | Disabled state labels                            |
+| Token            | Value     | Use for                                          |
+| ---------------- | --------- | ------------------------------------------------ |
+| `text`           | `#222325` | Default body and UI text                         |
+| `text-accent`    | `#222325` | Emphasis text (same value as `text` in Percipio) |
+| `text-secondary` | `#595A5C` | Supporting / secondary copy                      |
+| `text-disabled`  | `#AFB6C2` | Disabled state labels                            |
 
 ### Background
 
-| Token                 | Resolves to         | Use for                           |
-| --------------------- | ------------------- | --------------------------------- |
-| `background`          | `white`             | Default page/component background |
-| `background-primary`  | `percipioBgPrimary` | Slightly elevated surfaces        |
-| `background-selected` | `navy-100`          | Selected row / item               |
-| `background-hover`    | `navy-200`          | Hover state overlay               |
-| `background-disabled` | `navy-200`          | Disabled surface                  |
-| `background-success`  | `percipioBgSuccess` | Success state container           |
-| `background-warning`  | `percipioBgWarning` | Warning state container           |
-| `background-error`    | `percipioBgError`   | Error state container             |
+| Token                 | Value                | Use for                           |
+| --------------------- | -------------------- | --------------------------------- |
+| `background`          | `#ffffff`            | Default page/component background |
+| `background-primary`  | `#FAFBFC`            | Slightly elevated surfaces        |
+| `background-selected` | `#F5F6F7` (navy-100) | Selected row / item               |
+| `background-hover`    | `#E2E3E6` (navy-200) | Hover state overlay               |
+| `background-disabled` | `#E2E3E6` (navy-200) | Disabled surface                  |
+| `background-success`  | `#EEF7F3`            | Success state container           |
+| `background-warning`  | `#FFF7E0`            | Warning state container           |
+| `background-error`    | `#FFF1F5`            | Error state container             |
 
 ### Interactive
 
-| Token             | Resolves to                    | Use for                              |
-| ----------------- | ------------------------------ | ------------------------------------ |
-| `primary`         | `sapphire`                     | Primary CTA, links, focus rings      |
-| `primary-hover`   | `percipioActionPrimaryHover`   | Hover state of primary interactive   |
-| `primary-inverse` | `white`                        | Primary on a colored background      |
-| `secondary`       | `percipioActionSecondary`      | Secondary CTA, ghost buttons         |
-| `secondary-hover` | `percipioActionSecondaryHover` | Hover state of secondary interactive |
-| `danger`          | `percipioDanger`               | Destructive actions, error states    |
-| `danger-hover`    | `percipioActionDangerHover`    | Hover on danger interactive          |
+| Token             | Value     | Use for                              |
+| ----------------- | --------- | ------------------------------------ |
+| `primary`         | `#0073C4` | Primary CTA, links, focus rings      |
+| `primary-hover`   | `#141C36` | Hover state of primary interactive   |
+| `primary-inverse` | `#ffffff` | Primary on a colored background      |
+| `secondary`       | `#6A6E75` | Secondary CTA, ghost buttons         |
+| `secondary-hover` | `#7F8288` | Hover state of secondary interactive |
+| `danger`          | `#B83C3C` | Destructive actions, error states    |
+| `danger-hover`    | `#A52020` | Hover on danger interactive          |
 
 ### Border
 
 Percipio's border weights use a non-standard order: `primary` is mid-weight, `secondary` is very light, `tertiary` is the strongest (solid navy). Use them for their semantic intent, not their numeric rank.
 
-| Token              | Resolves to | Use for                             |
-| ------------------ | ----------- | ----------------------------------- |
-| `border-primary`   | `navy-400`  | Standard input and card borders     |
-| `border-secondary` | `navy-200`  | Subtle dividers, section separators |
-| `border-tertiary`  | `navy-800`  | Strong structural borders           |
-| `border-disabled`  | `navy-300`  | Disabled input borders              |
+| Token              | Value                | Use for                             |
+| ------------------ | -------------------- | ----------------------------------- |
+| `border-primary`   | `#8F919D` (navy-400) | Standard input and card borders     |
+| `border-secondary` | `#E2E3E6` (navy-200) | Subtle dividers, section separators |
+| `border-tertiary`  | `#10162F` (navy-800) | Strong structural borders           |
+| `border-disabled`  | `#BCBEC5` (navy-300) | Disabled input borders              |
 
 ### Feedback
 
-| Token              | Resolves to               | Use for                          |
-| ------------------ | ------------------------- | -------------------------------- |
-| `feedback-error`   | `percipioDanger`          | Error messages, validation       |
-| `feedback-success` | `percipioFeedbackSuccess` | Success messages, confirmations  |
-| `feedback-warning` | `percipioFeedbackWarning` | Warning messages, caution states |
+| Token              | Value     | Use for                          |
+| ------------------ | --------- | -------------------------------- |
+| `feedback-error`   | `#B83C3C` | Error messages, validation       |
+| `feedback-success` | `#1B8057` | Success messages, confirmations  |
+| `feedback-warning` | `#EF5B0D` | Warning messages, caution states |
 
 ### Shadow
 
-| Token              | Resolves to |
-| ------------------ | ----------- |
-| `shadow-primary`   | `navy-200`  |
-| `shadow-secondary` | `navy-400`  |
+| Token              | Value                |
+| ------------------ | -------------------- |
+| `shadow-primary`   | `#E2E3E6` (navy-200) |
+| `shadow-secondary` | `#8F919D` (navy-400) |
 
 Percipio shadows are softer than Codecademy's — use `shadow-primary` for standard elevated surfaces.
 
@@ -220,23 +220,23 @@ Percipio shadows are softer than Codecademy's — use `shadow-primary` for stand
 
 Percipio introduces its own named semantic colors. These are the source values behind the aliases above. Use the semantic aliases in designs, not the raw named colors.
 
-| Palette token                  | Semantic alias(es)         |
-| ------------------------------ | -------------------------- |
-| `percipioTextPrimary`          | `text`, `text-accent`      |
-| `percipioTextSecondary`        | `text-secondary`           |
-| `percipioTextDisabled`         | `text-disabled`            |
-| `sapphire`                     | `primary`                  |
-| `percipioActionPrimaryHover`   | `primary-hover`            |
-| `percipioActionSecondary`      | `secondary`                |
-| `percipioActionSecondaryHover` | `secondary-hover`          |
-| `percipioActionDangerHover`    | `danger-hover`             |
-| `percipioDanger`               | `danger`, `feedback-error` |
-| `percipioFeedbackSuccess`      | `feedback-success`         |
-| `percipioFeedbackWarning`      | `feedback-warning`         |
-| `percipioBgPrimary`            | `background-primary`       |
-| `percipioBgSuccess`            | `background-success`       |
-| `percipioBgWarning`            | `background-warning`       |
-| `percipioBgError`              | `background-error`         |
+| Named color                    | Value     | Mapped to                  |
+| ------------------------------ | --------- | -------------------------- |
+| `percipioTextPrimary`          | `#222325` | `text`, `text-accent`      |
+| `percipioTextSecondary`        | `#595A5C` | `text-secondary`           |
+| `percipioTextDisabled`         | `#AFB6C2` | `text-disabled`            |
+| `percipioActionPrimary`        | `#0073C4` | `primary`                  |
+| `percipioActionPrimaryHover`   | `#141C36` | `primary-hover`            |
+| `percipioActionSecondary`      | `#6A6E75` | `secondary`                |
+| `percipioActionSecondaryHover` | `#7F8288` | `secondary-hover`          |
+| `percipioActionDangerHover`    | `#A52020` | `danger-hover`             |
+| `percipioDanger`               | `#B83C3C` | `danger`, `feedback-error` |
+| `percipioFeedbackSuccess`      | `#1B8057` | `feedback-success`         |
+| `percipioFeedbackWarning`      | `#EF5B0D` | `feedback-warning`         |
+| `percipioBgPrimary`            | `#FAFBFC` | `background-primary`       |
+| `percipioBgSuccess`            | `#EEF7F3` | `background-success`       |
+| `percipioBgWarning`            | `#FFF7E0` | `background-warning`       |
+| `percipioBgError`              | `#FFF1F5` | `background-error`         |
 
 The full core swatch palette (navy, blue, green, yellow, red, etc.) is also available, but the semantic aliases above are how Percipio maps them. Raw swatches should only be used for fixed colors that must not adapt (illustrations, data viz, etc.).
 
@@ -246,19 +246,19 @@ The full core swatch palette (navy, blue, green, yellow, red, etc.) is also avai
 
 ### Typefaces
 
-Percipio uses **Skillsoft Text** for body and headlines and **Skillsoft Sans** for accent UI. Roboto Mono is used for code; the `system` slot still uses Roboto.
+All font families in Percipio use **Roboto**. There is no separate accent or display typeface.
 
-| Token       | Font                           | Use for                                   |
-| ----------- | ------------------------------ | ----------------------------------------- |
-| `base`      | `"Skillsoft Text", sans-serif` | All default UI text, headlines, body copy |
-| `accent`    | `"Skillsoft Sans", sans-serif` | Labels, captions, accent UI               |
-| `monospace` | `"Roboto Mono", monospace`     | Code editor contexts                      |
-| `system`    | `"Roboto", sans-serif`         | Performance-critical surfaces             |
+| Token       | Font                       | Use for                                     |
+| ----------- | -------------------------- | ------------------------------------------- |
+| `base`      | `"Roboto", sans-serif`     | All default UI text, headlines, body copy   |
+| `accent`    | `"Roboto", sans-serif`     | Labels, captions (same as base in Percipio) |
+| `monospace` | `"Roboto Mono", monospace` | Code editor contexts                        |
+| `system`    | `"Roboto", sans-serif`     | Performance-critical surfaces               |
 
 ### Rules
 
-- **Skillsoft Text Medium (500)** for headlines, sub-headlines, CTAs, and buttons — use `fontWeight="title"`, not literal `700`.
-- **Skillsoft Text Regular (400)** for body text, UI labels, and menu items.
+- **Roboto Medium (500)** for headlines, sub-headlines, CTAs, and buttons — not Bold (700).
+- **Roboto Regular (400)** for body text, UI labels, and menu items.
 - Text is **left-aligned** by default. Center-align only for short marketing headlines. Never right-align.
 - Do not adjust letter-spacing.
 
@@ -369,10 +369,10 @@ Same component library as Codecademy — all atoms, molecules, and organisms app
 
 Key Percipio-specific visual differences:
 
-- `FillButton` uses `primary` (`sapphire`) instead of Core `hyper-500`
-- `FillButton` hover uses `primary-hover` (`percipioActionPrimaryHover`) rather than a lighter blue
-- `Checkbox` / `Toggle` use `primary` (`sapphire`)
-- `Card` has softer `shadow-primary` (`navy-200` vs `navy-800` in Codecademy light mode)
+- `FillButton` uses `#0073C4` (blue) instead of hyper-purple
+- `FillButton` hover shifts to near-black `#141C36` rather than a lighter purple
+- `Checkbox` / `Toggle` use the same blue `#0073C4`
+- `Card` has softer shadows (navy-200 vs navy-800 in Codecademy light mode)
 - Card shadow patterns (`patternLeft`, `patternRight`) are available but rarely used in Percipio UIs
 
 ---
@@ -382,7 +382,7 @@ Key Percipio-specific visual differences:
 ### Colors
 
 - **Do** use semantic color aliases (`primary`, `text`, `background`, etc.) — never hardcode hex values.
-- **Do** use `primary` (resolves to palette `sapphire`) as the brand interactive color.
+- **Do** use `#0073C4` blue as the only primary interactive color.
 - **Don't** use Codecademy's hyper-purple or yellow in Percipio contexts.
 - **Don't** attempt dark mode — Percipio is light only.
 
@@ -390,7 +390,7 @@ Key Percipio-specific visual differences:
 
 - **Do** use title weight (500) for headlines, CTAs, and buttons — not 700.
 - **Do** keep body text at 150–175% line height for readability.
-- **Don't** use Apercu or Suisse — Percipio uses Skillsoft Text and Skillsoft Sans.
+- **Don't** use a separate accent typeface — Roboto is used uniformly for base and accent.
 - **Don't** right-align or center-align body paragraphs.
 - **Don't** adjust letter-spacing.
 
@@ -406,27 +406,27 @@ Key Percipio-specific visual differences:
 
 Quick color/token reference for generating or specifying Percipio UI:
 
-| Scenario         | Tokens                                                                                             |
-| ---------------- | -------------------------------------------------------------------------------------------------- |
-| Primary button   | `bg: primary`, `color: primary-inverse`, `hover: primary-hover`                                    |
-| Body text        | `color: text`, `font: base`, `size: 16`, `weight: 400`, `lineHeight: base`                         |
-| Headline         | `color: text`, `font: base`, `size: 34–64`, `weight: title`, `lineHeight: title`                   |
-| Secondary text   | `color: text-secondary`                                                                            |
-| Disabled text    | `color: text-disabled`                                                                             |
-| Elevated surface | `bg: background-primary`                                                                           |
-| Card default     | `bg: background`, `borderRadius: none` — add `isInteractive` for hover shadow + `borderRadius: md` |
-| Error state      | `color: feedback-error`, `bg: background-error`, `borderColor: danger`                             |
-| Success state    | `color: feedback-success`, `bg: background-success`                                                |
-| Warning state    | `color: feedback-warning`, `bg: background-warning`                                                |
-| Disabled state   | `color: text-disabled`, `bg: background-disabled`, `borderColor: border-disabled`                  |
+| Scenario         | Tokens                                                                                                       |
+| ---------------- | ------------------------------------------------------------------------------------------------------------ |
+| Primary button   | `bg: primary (#0073C4)`, `color: white`, `hover: primary-hover (#141C36)`                                    |
+| Body text        | `color: text (#222325)`, `font: Roboto`, `size: 16px`, `weight: 400`, `lineHeight: base (1.5)`               |
+| Headline         | `color: text (#222325)`, `font: Roboto`, `size: 34–64px`, `weight: title (500)`, `lineHeight: title (1.2)`   |
+| Secondary text   | `color: text-secondary (#595A5C)`                                                                            |
+| Disabled text    | `color: text-disabled (#AFB6C2)`                                                                             |
+| Elevated surface | `bg: background-primary (#FAFBFC)`                                                                           |
+| Card default     | `bg: background (#ffffff)`, `borderRadius: none` — add `isInteractive` for hover shadow + `borderRadius: md` |
+| Error state      | `color: feedback-error (#B83C3C)`, `bg: background-error (#FFF1F5)`, `border: danger`                        |
+| Success state    | `color: feedback-success (#1B8057)`, `bg: background-success (#EEF7F3)`                                      |
+| Warning state    | `color: feedback-warning (#EF5B0D)`, `bg: background-warning (#FFF7E0)`                                      |
+| Disabled state   | `color: text-disabled (#AFB6C2)`, `bg: background-disabled (#E2E3E6, navy-200)`, `border: border-disabled`   |
 
 ### Component token cheatsheet
 
 ```
-FillButton      → bg: primary,      color: primary-inverse, hover: primary-hover
-StrokeButton    → bg: transparent, borderColor: secondary, hover: secondary-hover
-Checkbox/Toggle → bg: primary,      hover: primary-hover
-Card            → bg: background,  shadow: shadow-primary (navy-200, soft)
+FillButton      → bg: primary (#0073C4),  color: white,    hover: primary-hover (#141C36)
+StrokeButton    → bg: transparent,         border: secondary (#6A6E75)
+Checkbox/Toggle → primary (#0073C4),       hover: primary-hover (#141C36)
+Card            → bg: background,  shadow: shadow-primary (#E2E3E6, navy-200, soft)
 Alert (error)   → uses feedback-error + background-error
 Alert (success) → uses feedback-success + background-success
 Alert (warning) → uses feedback-warning + background-warning

package/agent-tools/DESIGN.md

@@ -1,7 +1 @@
-Product-specific design context lives in this directory:
-
-- `DESIGN.Codecademy.md` — Core, Admin, and Platform themes
-- `DESIGN.Percipio.md` — Percipio theme
-- `DESIGN.LXStudio.md` — LX Studio theme
-
-Install into your app repo with `gamut plugin install cursor --theme <core|percipio|lxstudio|admin|platform>` (or `claude`) to copy the matching file to the repo root as `DESIGN.md`.
+DEPRECATED. Use the appropriate DESIGN.\*.md from https://github.com/Codecademy/gamut/pull/3329 instead.

package/bin/lib/claude.mjs

@@ -15,7 +15,7 @@ export async function claudePluginSpec(sourceRoot) {
   } catch {
     throw new Error(
       `Missing ${mp}.\n` +
-        `A .claude-plugin/marketplace.json is required for Claude Code installation.`,
+        `A .claude-plugin/marketplace.json is required for Claude Code installation.`
     );
   }
 
@@ -26,14 +26,20 @@ export async function claudePluginSpec(sourceRoot) {
   const { name: marketplaceName, plugins } = json;
 
   if (!marketplaceName || !Array.isArray(plugins) || plugins.length === 0) {
-    throw new Error(`Invalid marketplace.json — needs "name" and "plugins[]": ${mp}`);
+    throw new Error(
+      `Invalid marketplace.json — needs "name" and "plugins[]": ${mp}`
+    );
   }
 
   const entry =
-    plugins.find((p) => p.source === './' || p.source === '.' || p.source == null) ?? plugins[0];
+    plugins.find(
+      (p) => p.source === './' || p.source === '.' || p.source == null
+    ) ?? plugins[0];
 
   if (!entry?.name) {
-    throw new Error(`No plugin name found in marketplace.json plugins[]: ${mp}`);
+    throw new Error(
+      `No plugin name found in marketplace.json plugins[]: ${mp}`
+    );
   }
 
   return `${entry.name}@${marketplaceName}`;
@@ -47,6 +53,9 @@ export async function claudePluginSpec(sourceRoot) {
  */
 export function marketplaceName(spec) {
   const name = spec.split('@')[1];
-  if (!name) throw new Error(`Could not parse marketplace name from plugin spec: ${spec}`);
+  if (!name)
+    throw new Error(
+      `Could not parse marketplace name from plugin spec: ${spec}`
+    );
   return name;
 }

package/bin/lib/cursor.mjs

@@ -4,7 +4,10 @@ import { join } from 'node:path';
 
 /** @returns {string} */
 export function cursorPluginsRoot() {
-  return process.env.CURSOR_PLUGINS_LOCAL ?? join(homedir(), '.cursor', 'plugins', 'local');
+  return (
+    process.env.CURSOR_PLUGINS_LOCAL ??
+    join(homedir(), '.cursor', 'plugins', 'local')
+  );
 }
 
 /**

package/dist/AccordionButtonDeprecated/ButtonDeprecated/index.d.ts

@@ -7,8 +7,8 @@ export declare const buttonPresetThemes: {
     readonly lantern: "darkmint";
     readonly royalblue: "brand-purple";
 };
-declare const themes: readonly ["hyper", "navy", "red", "white", "brand-red", "brand-yellow", "brand-purple", "brand-dark-blue", "brand-blue", "mint", "darkmint", "grey", "greyblue"];
-export type ButtonDeprecatedThemes = keyof typeof buttonPresetThemes | (typeof themes)[number];
+declare const _themes: readonly ["hyper", "navy", "red", "white", "brand-red", "brand-yellow", "brand-purple", "brand-dark-blue", "brand-blue", "mint", "darkmint", "grey", "greyblue"];
+export type ButtonDeprecatedThemes = keyof typeof buttonPresetThemes | (typeof _themes)[number];
 export type ButtonDeprecatedProps = ButtonDeprecatedBaseProps & {
     /**
      * Whether button should behave like a block element or inline.

package/dist/AccordionButtonDeprecated/ButtonDeprecated/index.js

@@ -16,7 +16,7 @@ export const buttonPresetThemes = {
   lantern: 'darkmint',
   royalblue: 'brand-purple'
 };
-const themes = ['hyper', 'navy', 'red', 'white', 'brand-red', 'brand-yellow', 'brand-purple', 'brand-dark-blue', 'brand-blue', 'mint', 'darkmint', 'grey', 'greyblue'];
+const _themes = ['hyper', 'navy', 'red', 'white', 'brand-red', 'brand-yellow', 'brand-purple', 'brand-dark-blue', 'brand-blue', 'mint', 'darkmint', 'grey', 'greyblue'];
 const propKeys = ['theme', 'size', 'outline', 'underline', 'link', 'caps', 'go', 'children', 'block', 'className', 'round', 'square', 'flat', 'fitText', 'onClick'];
 const isPreset = theme => {
   return hasIn(buttonPresetThemes, theme);

package/dist/AccordionButtonDeprecated/ButtonDeprecated/styles/index.module.scss

@@ -1,7 +1,6 @@
 @use "sass:color";
 @use "variables";
 @use "mixins";
-@use "~@codecademy/gamut-styles/utils" as *;
 //
 // Base styles
 //
@@ -11,7 +10,8 @@
   display: inline-flex;
   justify-content: center;
   font-weight: variables.$btn-font-weight;
-  @include font-smoothing;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   border: 1px solid transparent;
   border-radius: variables.$btn-border-radius;
   user-select: none;
@@ -33,11 +33,11 @@ fieldset[disabled] a.btn {
 
 @each $name, $color in variables.$btn-swatches {
   @if $name == "brand-yellow" {
-    @include mixins.button-variants($name, $color-black, $color);
+    @include mixins.button-variants($name, variables.$color-black, $color);
   } @else if color.channel(color.to-space($color, hsl), "lightness") > 68 {
-    @include mixins.button-variants($name, $color-black, $color);
+    @include mixins.button-variants($name, variables.$color-black, $color);
   } @else {
-    @include mixins.button-variants($name, $color-white, $color);
+    @include mixins.button-variants($name, variables.$color-white, $color);
   }
 }
 

package/dist/AccordionButtonDeprecated/ButtonDeprecated/styles/mixins.scss

@@ -1,5 +1,4 @@
 @use "sass:color";
-@use "~@codecademy/gamut-styles/utils" as *;
 @use "variables";
 
 // Button variants
@@ -8,7 +7,7 @@
 // and disabled options for all buttons
 
 @mixin button-variant($color, $background, $border: transparent) {
-  $active-background: color.mix($color-black, $background);
+  $active-background: color.mix(variables.$color-black, $background);
 
   @if $border == transparent {
     $active-border: transparent;
@@ -24,7 +23,7 @@
   }
 
   &:focus-visible {
-    box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $background;
+    box-shadow: 0 0 0 2px variables.$color-white, 0 0 0 4px $background;
   }
 
   &:focus-visible,
@@ -60,7 +59,7 @@
   }
 
   &:focus-visible {
-    box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color;
+    box-shadow: 0 0 0 2px variables.$color-white, 0 0 0 4px $color;
   }
 
   &:disabled {
@@ -98,7 +97,8 @@
   }
   .link-#{$name} {
     font-weight: bold;
-    @include font-smoothing;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
     color: $background;
     text-decoration: underline;
 

package/dist/AccordionButtonDeprecated/ButtonDeprecated/styles/variables.scss

@@ -1,6 +1,4 @@
-@use "~@codecademy/gamut-styles/utils" as *;
-
-$btn-padding-x: px-rem(16) !default;
+$btn-padding-x: 1rem !default;
 $btn-padding-y: 0.375rem !default;
 $btn-font-weight: bold !default;
 
@@ -8,18 +6,18 @@ $btn-line-height: 1.5 !default;
 $btn-line-height-lg: calc(4 / 3) !default;
 $btn-line-height-sm: 1.5 !default;
 
-$btn-font-size-base: px-rem(16) !default;
-$btn-font-size-lg: px-rem(20) !default;
-$btn-font-size-sm: px-rem(16) !default;
+$btn-font-size-base: 1rem !default;
+$btn-font-size-lg: 1.25rem !default;
+$btn-font-size-sm: 1rem !default;
 $btn-font-size-xs: 0.75rem !default;
 
 $btn-padding-x-sm: 0.75rem !default;
 $btn-padding-y-sm: 0.25rem !default;
-$btn-min-width-sm: px-rem(128) !default;
+$btn-min-width-sm: 8rem !default;
 
 $btn-padding-x-lg: 1.25rem !default;
 $btn-padding-y-lg: 0.75rem !default;
-$btn-min-width-lg: px-rem(160) !default;
+$btn-min-width-lg: 10rem !default;
 
 $btn-border-radius: 2px !default;
 $btn-round-border-radius: 50px !default;
@@ -30,24 +28,27 @@ $btn-outline-hover-state-modifier: 0.9 !default;
 $btn-outline-active-state-modifier: 0.6 !default;
 $btn-box-shadow-focus-modifier: 0.5 !default;
 
-$btn-disabled-color: $color-gray-600;
+$btn-disabled-color: #646466;
 $btn-box-shadow-color: rgba(0, 0, 0, 0.3);
 
 $btn-swatches: (
   // Gamut Next
-  "hyper": $color-hyper,
-  "red": $color-red,
-  "navy": $color-navy,
-  "white": $color-white,
-  "grey": $color-gray-300,
+  "hyper": #3a10e5,
+  "red": #e91c11,
+  "navy": #10162f,
+  "white": #ffffff,
+  "grey": #c4c3c7,
   // Gamut Classic
-  "brand-blue": $color-blue-500,
-  "brand-red": $brand-red,
-  "brand-yellow": $brand-yellow,
-  "brand-purple": $brand-purple,
-  "brand-dark-blue": $brand-dark-blue,
+  "brand-blue": #3069f0,
+  "brand-red": #fd4d3f,
+  "brand-yellow": #ffd500,
+  "brand-purple": #6400e4,
+  "brand-dark-blue": #141c3a,
   // Editor
-  "mint": $deprecated-swatches-mint-700,
-  "darkmint": $deprecated-swatches-mint-800,
-  "greyblue": $deprecated-swatches-grey-blue-600
+  "mint": #34b3a0,
+  "darkmint": #1a7b72,
+  "greyblue": #354551
 );
+
+$color-black: #000000;
+$color-white: #ffffff;

package/dist/AccordionButtonDeprecated/styles.module.scss

@@ -1,5 +1,3 @@
-@use "~@codecademy/gamut-styles/utils" as *;
-
 .accordionButton {
   align-items: center;
   display: flex;
@@ -8,23 +6,23 @@
   width: 100%;
 
   &.blue {
-    color: $color-blue-200;
+    color: #a5befa;
   }
 
   &.yellow {
-    background-color: $color-yellow-200;
-    border: solid $color-yellow-400;
+    background-color: #fff2b3;
+    border: solid #ffe359;
     border-width: 1px 0;
     font-weight: normal;
     transition: background-color 0.15s ease-in-out;
 
     &:focus-visible {
-      border-color: $color-yellow-800;
+      border-color: #b37620;
     }
 
     &:focus,
     &:hover {
-      background-color: $color-yellow-300;
+      background-color: #ffec8c;
     }
   }
 
@@ -40,7 +38,7 @@
       margin-left: 1rem;
     }
 
-    @include md-viewport {
+    @media only screen and (min-width: 64rem) {
       font-size: 1.75rem;
     }
   }