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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/agent-tools/DESIGN.Codecademy.md +65 -65
  2. package/agent-tools/DESIGN.LXStudio.md +66 -66
  3. package/agent-tools/DESIGN.Percipio.md +78 -78
  4. package/package.json +6 -6
package/agent-tools/DESIGN.Codecademy.md CHANGED
@@ -230,15 +230,15 @@ LX Studio extends Core with these differences:
230
230
 
231
231
  **Semantic color overrides (light mode)**:
232
232
 
233
- | Token | Core value | LX Studio value |
234
- | -------------------- | ------------------- | ----------------------------- |
235
- | `primary` | hyper-500 `#3A10E5` | sapphire `#1C50BB` |
236
- | `primary-hover` | hyper-400 `#5533FF` | navy-800 `#10162F` |
237
- | `feedback-success` | green-700 `#008A27` | `#06844F` (lxStudioSuccess) |
238
- | `background-primary` | beige `#FFF0E5` | `#FAFBFC` (lxStudioBgPrimary) |
239
- | `shadow-primary` | navy-800 | navy-200 |
240
- | `border-primary` | navy-800 | navy-400 |
241
- | `border-disabled` | navy-500 | navy-300 |
233
+ | Token | Core value | LX Studio value |
234
+ | -------------------- | ----------- | ------------------- |
235
+ | `primary` | `hyper-500` | `sapphire` |
236
+ | `primary-hover` | `hyper-400` | `navy-800` |
237
+ | `feedback-success` | `green-700` | `lxStudioSuccess` |
238
+ | `background-primary` | `beige` | `lxStudioBgPrimary` |
239
+ | `shadow-primary` | navy-800 | navy-200 |
240
+ | `border-primary` | navy-800 | navy-400 |
241
+ | `border-disabled` | navy-500 | navy-300 |
242
242
 
243
243
  ---
244
244
 
@@ -248,55 +248,55 @@ Use these token names when specifying colors in designs. They resolve to the cor
248
248
 
249
249
  ### Text
250
250
 
251
- | Token | Light | Dark | Use for |
252
- | ---------------- | -------------------------- | --------------- | --------------------------- |
253
- | `text` | navy-800 `#10162F` at 100% | white `#ffffff` | Default body and UI text |
254
- | `text-accent` | navy-900 `#0A0D1C` | beige `#FFF0E5` | Stronger emphasis text |
255
- | `text-secondary` | navy-800 at 75% | white at 65% | Supporting / secondary copy |
256
- | `text-disabled` | navy-800 at 63% | white at 50% | Disabled state labels |
251
+ | Token | Light | Dark | Use for |
252
+ | ---------------- | --------------- | ------------ | --------------------------- |
253
+ | `text` | `navy-800` | `white` | Default body and UI text |
254
+ | `text-accent` | `navy-900` | `beige` | Stronger emphasis text |
255
+ | `text-secondary` | navy-800 at 75% | white at 65% | Supporting / secondary copy |
256
+ | `text-disabled` | navy-800 at 63% | white at 50% | Disabled state labels |
257
257
 
258
258
  ### Background
259
259
 
260
- | Token | Light | Dark | Use for |
261
- | --------------------- | ------------------ | -------------------- | --------------------------------- |
262
- | `background` | white `#ffffff` | navy-800 `#10162F` | Default page/component background |
263
- | `background-primary` | beige `#FFF0E5` | navy-900 `#0A0D1C` | Slightly elevated surfaces |
264
- | `background-contrast` | white | black `#000000` | Maximum contrast surface |
265
- | `background-selected` | navy-800 at 4% | white at 4% | Selected row / item |
266
- | `background-hover` | navy-800 at 12% | white at 9% | Hover state overlay |
267
- | `background-disabled` | navy-800 at 12% | white at 9% | Disabled surface |
268
- | `background-success` | green-0 `#F5FFE3` | green-900 `#151C07` | Success state container |
269
- | `background-warning` | yellow-0 `#FFFAE5` | yellow-900 `#211B00` | Warning state container |
270
- | `background-error` | red-0 `#FBF1F0` | red-900 `#280503` | Error state container |
260
+ | Token | Light | Dark | Use for |
261
+ | --------------------- | --------------- | ------------ | --------------------------------- |
262
+ | `background` | `white` | `navy-800` | Default page/component background |
263
+ | `background-primary` | `beige` | `navy-900` | Slightly elevated surfaces |
264
+ | `background-contrast` | `white` | `black` | Maximum contrast surface |
265
+ | `background-selected` | navy-800 at 4% | white at 4% | Selected row / item |
266
+ | `background-hover` | navy-800 at 12% | white at 9% | Hover state overlay |
267
+ | `background-disabled` | navy-800 at 12% | white at 9% | Disabled surface |
268
+ | `background-success` | `green-0` | `green-900` | Success state container |
269
+ | `background-warning` | `yellow-0` | `yellow-900` | Warning state container |
270
+ | `background-error` | `red-0` | `red-900` | Error state container |
271
271
 
272
272
  ### Interactive
273
273
 
274
- | Token | Light | Dark | Use for |
275
- | ----------------- | -------------------- | -------------------- | ------------------------------------ |
276
- | `primary` | hyper-500 `#3A10E5` | yellow-500 `#FFD300` | Primary CTA, links, focus rings |
277
- | `primary-hover` | hyper-400 `#5533FF` | yellow-400 `#CCA900` | Hover state of primary interactive |
278
- | `primary-inverse` | yellow-500 `#FFD300` | hyper-500 `#3A10E5` | Primary on a colored background |
279
- | `secondary` | navy-800 `#10162F` | white `#ffffff` | Secondary CTA, ghost buttons |
280
- | `secondary-hover` | navy-800 at 86% | white at 80% | Hover state of secondary interactive |
281
- | `danger` | red-500 `#E91C11` | red-300 `#E85D7F` | Destructive actions, error states |
282
- | `danger-hover` | red-600 `#BE1809` | red-400 `#DC5879` | Hover on danger interactive |
274
+ | Token | Light | Dark | Use for |
275
+ | ----------------- | --------------- | ------------ | ------------------------------------ |
276
+ | `primary` | `hyper-500` | `yellow-500` | Primary CTA, links, focus rings |
277
+ | `primary-hover` | `hyper-400` | `yellow-400` | Hover state of primary interactive |
278
+ | `primary-inverse` | `yellow-500` | `hyper-500` | Primary on a colored background |
279
+ | `secondary` | `navy-800` | `white` | Secondary CTA, ghost buttons |
280
+ | `secondary-hover` | navy-800 at 86% | white at 80% | Hover state of secondary interactive |
281
+ | `danger` | `red-500` | `red-300` | Destructive actions, error states |
282
+ | `danger-hover` | `red-600` | `red-400` | Hover on danger interactive |
283
283
 
284
284
  ### Border
285
285
 
286
- | Token | Light | Dark | Use for |
287
- | ------------------ | ------------------ | --------------- | -------------------------- |
288
- | `border-primary` | navy-800 `#10162F` | white `#ffffff` | Strong borders, dividers |
289
- | `border-secondary` | navy-800 at 75% | white at 65% | Medium-weight borders |
290
- | `border-tertiary` | navy-800 at 28% | white at 20% | Subtle borders, separators |
291
- | `border-disabled` | navy-800 at 63% | white at 50% | Disabled input borders |
286
+ | Token | Light | Dark | Use for |
287
+ | ------------------ | --------------- | ------------ | -------------------------- |
288
+ | `border-primary` | `navy-800` | `white` | Strong borders, dividers |
289
+ | `border-secondary` | navy-800 at 75% | white at 65% | Medium-weight borders |
290
+ | `border-tertiary` | navy-800 at 28% | white at 20% | Subtle borders, separators |
291
+ | `border-disabled` | navy-800 at 63% | white at 50% | Disabled input borders |
292
292
 
293
293
  ### Feedback
294
294
 
295
- | Token | Light | Dark | Use for |
296
- | ------------------ | ------------------- | ------------------- | -------------------------------- |
297
- | `feedback-error` | red-600 `#BE1809` | red-300 `#E85D7F` | Error messages, validation |
298
- | `feedback-success` | green-700 `#008A27` | green-400 `#AEE938` | Success messages, confirmations |
299
- | `feedback-warning` | yellow `#FFD300` | yellow-0 `#FFFAE5` | Warning messages, caution states |
295
+ | Token | Light | Dark | Use for |
296
+ | ------------------ | ----------- | ----------- | -------------------------------- |
297
+ | `feedback-error` | `red-600` | `red-300` | Error messages, validation |
298
+ | `feedback-success` | `green-700` | `green-400` | Success messages, confirmations |
299
+ | `feedback-warning` | `yellow` | `yellow-0` | Warning messages, caution states |
300
300
 
301
301
  ### Shadow
302
302
 
@@ -313,32 +313,32 @@ All colors available as static tokens regardless of color mode. Use these only w
313
313
 
314
314
  ### Core Palette
315
315
 
316
- | Name | Weights available | Notes |
317
- | --------------- | ---------------------------- | --------------------------------------------------------------------------------- |
318
- | `navy` | 100–900 | 100–700 are rgba transparencies of `#10162F`; 800 = `#10162F`; 900 = `#0A0D1C` |
319
- | `white` | 100–700 | rgba transparencies of `#ffffff` (no solid white weight — use `white` for `#fff`) |
320
- | `blue` | 0, 100, 300, 400, 500, 800 | 500 = `#1557FF` |
321
- | `hyper` | 400, 500 | 500 = `#3A10E5` (purple-blue), 400 = `#5533FF` |
322
- | `green` | 0, 100, 400, 700, 900 | 700 = `#008A27` |
323
- | `yellow` | 0, 400, 500, 900 | 500 = `#FFD300` |
324
- | `red` | 0, 300, 400, 500, 600, 900 | 500 = `#E91C11` |
325
- | `gray` | 100, 200, 300, 600, 800, 900 | |
326
- | `pink` | 0, 400 | 400 = `#F966FF` |
327
- | `orange` | 100, 500 | 500 = `#FF8C00` |
328
- | `beige` | 100 (alias: `beige`) | `#FFF0E5` |
329
- | `black` | — | `#000000` |
330
- | `white` (solid) | — | `#ffffff` |
316
+ | Name | Weights available | Notes |
317
+ | --------------- | ---------------------------- | -------------------------------------------------------------------------- |
318
+ | `navy` | 100–900 | 100–700 are rgba transparencies of `navy-800`; 800 and 900 are solid |
319
+ | `white` | 100–700 | rgba transparencies of `white` (no solid white weight — use `white` token) |
320
+ | `blue` | 0, 100, 300, 400, 500, 800 | named alias `blue` maps to `blue-500` |
321
+ | `hyper` | 400, 500 | named alias `hyper` maps to `hyper-500` |
322
+ | `green` | 0, 100, 400, 700, 900 | named alias `green` maps to `green-700` |
323
+ | `yellow` | 0, 400, 500, 900 | named alias `yellow` maps to `yellow-500` |
324
+ | `red` | 0, 300, 400, 500, 600, 900 | named alias `red` maps to `red-500` |
325
+ | `gray` | 100, 200, 300, 600, 800, 900 | |
326
+ | `pink` | 0, 400 | named alias `pink` maps to `pink-400` |
327
+ | `orange` | 100, 500 | named alias `orange` maps to `orange-500` |
328
+ | `beige` | 100 (alias: `beige`) | solid `beige` token |
329
+ | `black` | — | `black` token |
330
+ | `white` (solid) | — | `white` token |
331
331
 
332
332
  **Named aliases** (shorthand for common weights):
333
333
  `beige`, `blue`, `green`, `hyper`, `lightBlue`, `lightGreen`, `navy`, `orange`, `paleBlue`, `paleGreen`, `palePink`, `paleRed`, `paleYellow`, `pink`, `red`, `yellow`, `black`, `white`
334
334
 
335
335
  ### Platform-only additions
336
336
 
337
- `lightBeige` (`#FFFBF8`), `gold` (`#8A7300`), `teal` (`#006D82`), `purple` (`#B3CCFF`)
337
+ `lightBeige`, `gold`, `teal`, `purple` (Platform theme palette)
338
338
 
339
339
  ### LX Studio additions
340
340
 
341
- `sapphire` (`#1C50BB`), `lxStudioSuccess` (`#06844F`), `lxStudioBgPrimary` (`#FAFBFC`)
341
+ `sapphire`, `lxStudioSuccess`, `lxStudioBgPrimary` (LX Studio theme palette)
342
342
 
343
343
  ---
344
344
 
@@ -602,8 +602,8 @@ Quick color/token reference for generating or specifying UI:
602
602
 
603
603
  | Scenario | Tokens |
604
604
  | ---------------------- | ----------------------------------------------------------------------------------------------------- |
605
- | Primary button (light) | `bg: primary (#3A10E5)`, `color: white`, `hover: primary-hover (#5533FF)` |
606
- | Primary button (dark) | `bg: primary (#FFD300)`, `color: navy-800`, `hover: primary-hover (#CCA900)` |
605
+ | Primary button (light) | `bg: primary`, `color: white`, `hover: primary-hover` |
606
+ | Primary button (dark) | `bg: primary`, `color: text`, `hover: primary-hover` |
607
607
  | Body text | `color: text`, `font: base (Apercu Pro)`, `size: 16px`, `weight: 400`, `lineHeight: base (1.5)` |
608
608
  | Headline | `color: text-accent`, `font: base`, `size: 34–64px`, `weight: title (700)`, `lineHeight: title (1.2)` |
609
609
  | Caption / label | `color: text-secondary`, `font: accent (Suisse Int'l Mono)`, `size: 14px` |
package/agent-tools/DESIGN.LXStudio.md CHANGED
@@ -164,64 +164,64 @@ Use these token names when specifying colors. LX Studio is light mode only — t
164
164
 
165
165
  ### Text
166
166
 
167
- | Token | Value | Use for |
168
- | ---------------- | --------------------------------- | --------------------------- |
169
- | `text` | `#10162F` (navy-800) | Default body and UI text |
170
- | `text-accent` | `#0A0D1C` (navy-900) | Stronger emphasis text |
171
- | `text-secondary` | navy-600 `rgba(16, 22, 47, 0.75)` | Supporting / secondary copy |
172
- | `text-disabled` | navy-500 `rgba(16, 22, 47, 0.63)` | Disabled state labels |
167
+ | Token | Resolves to | Use for |
168
+ | ---------------- | ----------- | --------------------------- |
169
+ | `text` | `navy-800` | Default body and UI text |
170
+ | `text-accent` | `navy-900` | Stronger emphasis text |
171
+ | `text-secondary` | `navy-600` | Supporting / secondary copy |
172
+ | `text-disabled` | `navy-500` | Disabled state labels |
173
173
 
174
174
  ### Background
175
175
 
176
- | Token | Value | Use for |
177
- | --------------------- | --------------------------------- | --------------------------------- |
178
- | `background` | `#ffffff` | Default page/component background |
179
- | `background-primary` | `#FAFBFC` (lxStudioBgPrimary) | Slightly elevated surfaces |
180
- | `background-contrast` | `#ffffff` | Maximum contrast surface |
181
- | `background-selected` | navy-100 `rgba(16, 22, 47, 0.04)` | Selected row / item |
182
- | `background-hover` | navy-200 `rgba(16, 22, 47, 0.12)` | Hover state overlay |
183
- | `background-disabled` | navy-200 `rgba(16, 22, 47, 0.12)` | Disabled surface |
184
- | `background-success` | `#F5FFE3` (green-0) | Success state container |
185
- | `background-warning` | `#FFFAE5` (yellow-0) | Warning state container |
186
- | `background-error` | `#FBF1F0` (red-0) | Error state container |
176
+ | Token | Resolves to | Use for |
177
+ | --------------------- | ------------------- | --------------------------------- |
178
+ | `background` | `white` | Default page/component background |
179
+ | `background-primary` | `lxStudioBgPrimary` | Slightly elevated surfaces |
180
+ | `background-contrast` | `white` | Maximum contrast surface |
181
+ | `background-selected` | `navy-100` | Selected row / item |
182
+ | `background-hover` | `navy-200` | Hover state overlay |
183
+ | `background-disabled` | `navy-200` | Disabled surface |
184
+ | `background-success` | `green-0` | Success state container |
185
+ | `background-warning` | `yellow-0` | Warning state container |
186
+ | `background-error` | `red-0` | Error state container |
187
187
 
188
188
  ### Interactive
189
189
 
190
- | Token | Value | Use for |
191
- | ----------------- | --------------------------------- | ------------------------------------ |
192
- | `primary` | `#1C50BB` (sapphire) | Primary CTA, links, focus rings |
193
- | `primary-hover` | `#10162F` (navy-800) | Hover state of primary interactive |
194
- | `primary-inverse` | `#FFD300` (yellow-500) | Primary on a colored background |
195
- | `secondary` | `#10162F` (navy-800) | Secondary CTA, ghost buttons |
196
- | `secondary-hover` | navy-700 `rgba(16, 22, 47, 0.86)` | Hover state of secondary interactive |
197
- | `danger` | `#E91C11` (red-500) | Destructive actions, error states |
198
- | `danger-hover` | `#BE1809` (red-600) | Hover on danger interactive |
190
+ | Token | Resolves to | Use for |
191
+ | ----------------- | ------------ | ------------------------------------ |
192
+ | `primary` | `sapphire` | Primary CTA, links, focus rings |
193
+ | `primary-hover` | `navy-800` | Hover state of primary interactive |
194
+ | `primary-inverse` | `yellow-500` | Primary on a colored background |
195
+ | `secondary` | `navy-800` | Secondary CTA, ghost buttons |
196
+ | `secondary-hover` | `navy-700` | Hover state of secondary interactive |
197
+ | `danger` | `red-500` | Destructive actions, error states |
198
+ | `danger-hover` | `red-600` | Hover on danger interactive |
199
199
 
200
200
  ### Border
201
201
 
202
- | Token | Value | Use for |
203
- | ------------------ | --------------------------------- | ------------------------------- |
204
- | `border-primary` | navy-400 `rgba(16, 22, 47, 0.47)` | Standard input and card borders |
205
- | `border-secondary` | navy-600 `rgba(16, 22, 47, 0.75)` | Medium-weight borders |
206
- | `border-tertiary` | `#10162F` (navy-800) | Strong structural borders |
207
- | `border-disabled` | navy-300 `rgba(16, 22, 47, 0.28)` | Disabled input borders |
202
+ | Token | Resolves to | Use for |
203
+ | ------------------ | ----------- | ------------------------------- |
204
+ | `border-primary` | `navy-400` | Standard input and card borders |
205
+ | `border-secondary` | `navy-600` | Medium-weight borders |
206
+ | `border-tertiary` | `navy-800` | Strong structural borders |
207
+ | `border-disabled` | `navy-300` | Disabled input borders |
208
208
 
209
209
  LX Studio's `border-primary` is mid-gray (navy-400) rather than Core's near-black navy-800 — borders are softer and less prominent.
210
210
 
211
211
  ### Feedback
212
212
 
213
- | Token | Value | Use for |
214
- | ------------------ | --------------------------- | -------------------------------- |
215
- | `feedback-error` | `#BE1809` (red-600) | Error messages, validation |
216
- | `feedback-success` | `#06844F` (lxStudioSuccess) | Success messages, confirmations |
217
- | `feedback-warning` | `#FFD300` (yellow-500) | Warning messages, caution states |
213
+ | Token | Resolves to | Use for |
214
+ | ------------------ | ----------------- | -------------------------------- |
215
+ | `feedback-error` | `red-600` | Error messages, validation |
216
+ | `feedback-success` | `lxStudioSuccess` | Success messages, confirmations |
217
+ | `feedback-warning` | `yellow-500` | Warning messages, caution states |
218
218
 
219
219
  ### Shadow
220
220
 
221
- | Token | Value |
222
- | ------------------ | --------------------------------- |
223
- | `shadow-primary` | navy-200 `rgba(16, 22, 47, 0.12)` |
224
- | `shadow-secondary` | navy-600 `rgba(16, 22, 47, 0.75)` |
221
+ | Token | Resolves to |
222
+ | ------------------ | ----------- |
223
+ | `shadow-primary` | `navy-200` |
224
+ | `shadow-secondary` | `navy-600` |
225
225
 
226
226
  LX Studio shadows are soft — use `shadow-primary` for standard elevated surfaces. This matches Percipio's shadow weight, not Core's hard navy-800 shadow.
227
227
 
@@ -231,11 +231,11 @@ LX Studio shadows are soft — use `shadow-primary` for standard elevated surfac
231
231
 
232
232
  LX Studio adds named colors to the core palette. Use semantic aliases in code, not these raw names.
233
233
 
234
- | Named color | Value | Mapped to |
235
- | ------------------- | --------- | -------------------- |
236
- | `sapphire` | `#1C50BB` | `primary` |
237
- | `lxStudioSuccess` | `#06844F` | `feedback-success` |
238
- | `lxStudioBgPrimary` | `#FAFBFC` | `background-primary` |
234
+ | Palette token | Semantic alias(es) |
235
+ | ------------------- | -------------------- |
236
+ | `sapphire` | `primary` |
237
+ | `lxStudioSuccess` | `feedback-success` |
238
+ | `lxStudioBgPrimary` | `background-primary` |
239
239
 
240
240
  The full core swatch palette (navy, hyper, blue, green, yellow, red, etc.) is also available. Raw swatches should only be used for fixed colors that must not adapt (illustrations, data viz, etc.).
241
241
 
@@ -369,9 +369,9 @@ Same component library as Codecademy — all atoms, molecules, and organisms app
369
369
 
370
370
  Key LX Studio-specific visual differences:
371
371
 
372
- - `FillButton` uses sapphire `#1C50BB` instead of hyper-500
373
- - `FillButton` hover shifts to navy-800 `#10162F` — darker on hover
374
- - `Checkbox` / `Toggle` use hyper-500 `#3A10E5`
372
+ - `FillButton` uses `primary` (`sapphire`) instead of Core `hyper-500`
373
+ - `FillButton` hover uses `primary-hover` (`navy-800`) — darker on hover
374
+ - `Checkbox` / `Toggle` use palette `hyper-500` (not `primary`)
375
375
  - All interactive elements have `borderRadius: md` (8px) instead of Core's 4px
376
376
  - `Card` shadows use navy-200 (soft) rather than navy-800 (hard)
377
377
  - No `Card-beige` variant — LX Studio `background-primary` is off-white, not beige
@@ -383,7 +383,7 @@ Key LX Studio-specific visual differences:
383
383
  ### Colors
384
384
 
385
385
  - **Do** use semantic color aliases (`primary`, `text`, `background`, etc.) — never hardcode hex values.
386
- - **Do** use `primary` / `sapphire` (`#1C50BB`) for buttons and links.
386
+ - **Do** use `primary` (resolves to palette `sapphire`) for buttons and links.
387
387
  - **Don't** attempt dark mode — LX Studio is light only.
388
388
  - **Don't** use the Percipio or Codecademy primary blue/hyper colors directly; go through semantic aliases.
389
389
 
@@ -408,26 +408,26 @@ Key LX Studio-specific visual differences:
408
408
 
409
409
  Quick color/token reference for generating or specifying LX Studio UI:
410
410
 
411
- | Scenario | Tokens |
412
- | ---------------- | ------------------------------------------------------------------------------------------------------------------------- |
413
- | Primary button | `bg: primary (#1C50BB)`, `color: white`, `hover: primary-hover (#10162F)`, `borderRadius: md (8px)` |
414
- | Body text | `color: text (#10162F)`, `font: Skillsoft Text`, `size: 16px`, `weight: 400`, `lineHeight: base (1.5)` |
415
- | Headline | `color: text-accent (#0A0D1C)`, `font: Skillsoft Text`, `size: 34–64px`, `weight: title (500)`, `lineHeight: title (1.2)` |
416
- | Secondary text | `color: text-secondary (navy-600)` |
417
- | Disabled text | `color: text-disabled (navy-500)` |
418
- | Elevated surface | `bg: background-primary (#FAFBFC)` |
419
- | Card default | `bg: background (#ffffff)`, `borderRadius: none` — add `isInteractive` for hover shadow + `borderRadius: md (8px)` |
420
- | Error state | `color: feedback-error (#BE1809)`, `bg: background-error (#FBF1F0)`, `border: danger` |
421
- | Success state | `color: feedback-success (#06844F)`, `bg: background-success (#F5FFE3)` |
422
- | Warning state | `color: feedback-warning (#FFD300)`, `bg: background-warning (#FFFAE5)` |
423
- | Disabled state | `color: text-disabled (navy-500)`, `bg: background-disabled (navy-200)`, `border: border-disabled` |
411
+ | Scenario | Tokens |
412
+ | ---------------- | -------------------------------------------------------------------------------------------------- |
413
+ | Primary button | `bg: primary`, `color: white`, `hover: primary-hover`, `borderRadius: md` |
414
+ | Body text | `color: text`, `font: base`, `size: 16`, `weight: 400`, `lineHeight: base` |
415
+ | Headline | `color: text-accent`, `font: base`, `size: 34–64`, `weight: title`, `lineHeight: title` |
416
+ | Secondary text | `color: text-secondary` |
417
+ | Disabled text | `color: text-disabled` |
418
+ | Elevated surface | `bg: background-primary` |
419
+ | Card default | `bg: background`, `borderRadius: none` — add `isInteractive` for hover shadow + `borderRadius: md` |
420
+ | Error state | `color: feedback-error`, `bg: background-error`, `borderColor: danger` |
421
+ | Success state | `color: feedback-success`, `bg: background-success` |
422
+ | Warning state | `color: feedback-warning`, `bg: background-warning` |
423
+ | Disabled state | `color: text-disabled`, `bg: background-disabled`, `borderColor: border-disabled` |
424
424
 
425
425
  ### Component token cheatsheet
426
426
 
427
427
  ```
428
- FillButton → bg: primary (#1C50BB), color: white, hover: primary-hover (#10162F), radius: 8px
429
- StrokeButton → bg: transparent, border: secondary (#10162F)
430
- Checkbox/Toggle → hyper-500 (#3A10E5), hover: hyper-400 (#5533FF), radius: 4px
428
+ FillButton → bg: primary, color: white, hover: primary-hover, borderRadius: md
429
+ StrokeButton → bg: transparent, borderColor: secondary
430
+ Checkbox/Toggle → palette hyper-500, hover hyper-400, borderRadius: sm
431
431
  Card → bg: background, shadow: shadow-primary (navy-200, soft), radius: none
432
432
  Alert (error) → uses feedback-error + background-error
433
433
  Alert (success) → uses feedback-success + background-success
package/agent-tools/DESIGN.Percipio.md CHANGED
@@ -154,63 +154,63 @@ Use these token names when specifying colors. Percipio is light mode only — th
154
154
 
155
155
  ### Text
156
156
 
157
- | Token | Value | Use for |
158
- | ---------------- | ------------------------ | ------------------------------------------------ |
159
- | `text` | `#222325` | Default body and UI text |
160
- | `text-accent` | `#222325` | Emphasis text (same value as `text` in Percipio) |
161
- | `text-secondary` | `rgba(34, 35, 37, 0.75)` | Supporting / secondary copy |
162
- | `text-disabled` | `#AFB6C2` | Disabled state labels |
157
+ | Token | Resolves to | Use for |
158
+ | ---------------- | ----------------------- | ------------------------------------------------ |
159
+ | `text` | `percipioTextPrimary` | Default body and UI text |
160
+ | `text-accent` | `percipioTextPrimary` | Emphasis text (same value as `text` in Percipio) |
161
+ | `text-secondary` | `percipioTextSecondary` | Supporting / secondary copy |
162
+ | `text-disabled` | `percipioTextDisabled` | Disabled state labels |
163
163
 
164
164
  ### Background
165
165
 
166
- | Token | Value | Use for |
167
- | --------------------- | --------------------------------- | --------------------------------- |
168
- | `background` | `#ffffff` | Default page/component background |
169
- | `background-primary` | `#FAFBFC` | Slightly elevated surfaces |
170
- | `background-selected` | navy-100 `rgba(16, 22, 47, 0.04)` | Selected row / item |
171
- | `background-hover` | navy-200 `rgba(16, 22, 47, 0.12)` | Hover state overlay |
172
- | `background-disabled` | navy-200 `rgba(16, 22, 47, 0.12)` | Disabled surface |
173
- | `background-success` | `#EEF7F3` | Success state container |
174
- | `background-warning` | `#FFF7E0` | Warning state container |
175
- | `background-error` | `#FFF1F5` | Error state container |
166
+ | Token | Resolves to | Use for |
167
+ | --------------------- | ------------------- | --------------------------------- |
168
+ | `background` | `white` | Default page/component background |
169
+ | `background-primary` | `percipioBgPrimary` | Slightly elevated surfaces |
170
+ | `background-selected` | `navy-100` | Selected row / item |
171
+ | `background-hover` | `navy-200` | Hover state overlay |
172
+ | `background-disabled` | `navy-200` | Disabled surface |
173
+ | `background-success` | `percipioBgSuccess` | Success state container |
174
+ | `background-warning` | `percipioBgWarning` | Warning state container |
175
+ | `background-error` | `percipioBgError` | Error state container |
176
176
 
177
177
  ### Interactive
178
178
 
179
- | Token | Value | Use for |
180
- | ----------------- | --------------------------- | ------------------------------------ |
181
- | `primary` | `#1C50BB` (sapphire) | Primary CTA, links, focus rings |
182
- | `primary-hover` | `#141C36` | Hover state of primary interactive |
183
- | `primary-inverse` | `#ffffff` | Primary on a colored background |
184
- | `secondary` | `#6A6E75` | Secondary CTA, ghost buttons |
185
- | `secondary-hover` | `rgba(106, 110, 117, 0.86)` | Hover state of secondary interactive |
186
- | `danger` | `#B83C3C` | Destructive actions, error states |
187
- | `danger-hover` | `#A52020` | Hover on danger interactive |
179
+ | Token | Resolves to | Use for |
180
+ | ----------------- | ------------------------------ | ------------------------------------ |
181
+ | `primary` | `sapphire` | Primary CTA, links, focus rings |
182
+ | `primary-hover` | `percipioActionPrimaryHover` | Hover state of primary interactive |
183
+ | `primary-inverse` | `white` | Primary on a colored background |
184
+ | `secondary` | `percipioActionSecondary` | Secondary CTA, ghost buttons |
185
+ | `secondary-hover` | `percipioActionSecondaryHover` | Hover state of secondary interactive |
186
+ | `danger` | `percipioDanger` | Destructive actions, error states |
187
+ | `danger-hover` | `percipioActionDangerHover` | Hover on danger interactive |
188
188
 
189
189
  ### Border
190
190
 
191
191
  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.
192
192
 
193
- | Token | Value | Use for |
194
- | ------------------ | --------------------------------- | ----------------------------------- |
195
- | `border-primary` | navy-400 `rgba(16, 22, 47, 0.47)` | Standard input and card borders |
196
- | `border-secondary` | navy-200 `rgba(16, 22, 47, 0.12)` | Subtle dividers, section separators |
197
- | `border-tertiary` | `#10162F` (navy-800) | Strong structural borders |
198
- | `border-disabled` | navy-300 `rgba(16, 22, 47, 0.28)` | Disabled input borders |
193
+ | Token | Resolves to | Use for |
194
+ | ------------------ | ----------- | ----------------------------------- |
195
+ | `border-primary` | `navy-400` | Standard input and card borders |
196
+ | `border-secondary` | `navy-200` | Subtle dividers, section separators |
197
+ | `border-tertiary` | `navy-800` | Strong structural borders |
198
+ | `border-disabled` | `navy-300` | Disabled input borders |
199
199
 
200
200
  ### Feedback
201
201
 
202
- | Token | Value | Use for |
203
- | ------------------ | --------- | -------------------------------- |
204
- | `feedback-error` | `#B83C3C` | Error messages, validation |
205
- | `feedback-success` | `#1B8057` | Success messages, confirmations |
206
- | `feedback-warning` | `#EF5B0D` | Warning messages, caution states |
202
+ | Token | Resolves to | Use for |
203
+ | ------------------ | ------------------------- | -------------------------------- |
204
+ | `feedback-error` | `percipioDanger` | Error messages, validation |
205
+ | `feedback-success` | `percipioFeedbackSuccess` | Success messages, confirmations |
206
+ | `feedback-warning` | `percipioFeedbackWarning` | Warning messages, caution states |
207
207
 
208
208
  ### Shadow
209
209
 
210
- | Token | Value |
211
- | ------------------ | --------------------------------- |
212
- | `shadow-primary` | navy-200 `rgba(16, 22, 47, 0.12)` |
213
- | `shadow-secondary` | navy-400 `rgba(16, 22, 47, 0.47)` |
210
+ | Token | Resolves to |
211
+ | ------------------ | ----------- |
212
+ | `shadow-primary` | `navy-200` |
213
+ | `shadow-secondary` | `navy-400` |
214
214
 
215
215
  Percipio shadows are softer than Codecademy's — use `shadow-primary` for standard elevated surfaces.
216
216
 
@@ -220,23 +220,23 @@ Percipio shadows are softer than Codecademy's — use `shadow-primary` for stand
220
220
 
221
221
  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.
222
222
 
223
- | Named color | Value | Mapped to |
224
- | ------------------------------ | --------------------------- | -------------------------- |
225
- | `percipioTextPrimary` | `#222325` | `text`, `text-accent` |
226
- | `percipioTextSecondary` | `rgba(34, 35, 37, 0.75)` | `text-secondary` |
227
- | `percipioTextDisabled` | `#AFB6C2` | `text-disabled` |
228
- | `sapphire` | `#1C50BB` | `primary` |
229
- | `percipioActionPrimaryHover` | `#141C36` | `primary-hover` |
230
- | `percipioActionSecondary` | `#6A6E75` | `secondary` |
231
- | `percipioActionSecondaryHover` | `rgba(106, 110, 117, 0.86)` | `secondary-hover` |
232
- | `percipioActionDangerHover` | `#A52020` | `danger-hover` |
233
- | `percipioDanger` | `#B83C3C` | `danger`, `feedback-error` |
234
- | `percipioFeedbackSuccess` | `#1B8057` | `feedback-success` |
235
- | `percipioFeedbackWarning` | `#EF5B0D` | `feedback-warning` |
236
- | `percipioBgPrimary` | `#FAFBFC` | `background-primary` |
237
- | `percipioBgSuccess` | `#EEF7F3` | `background-success` |
238
- | `percipioBgWarning` | `#FFF7E0` | `background-warning` |
239
- | `percipioBgError` | `#FFF1F5` | `background-error` |
223
+ | Palette token | Semantic alias(es) |
224
+ | ------------------------------ | -------------------------- |
225
+ | `percipioTextPrimary` | `text`, `text-accent` |
226
+ | `percipioTextSecondary` | `text-secondary` |
227
+ | `percipioTextDisabled` | `text-disabled` |
228
+ | `sapphire` | `primary` |
229
+ | `percipioActionPrimaryHover` | `primary-hover` |
230
+ | `percipioActionSecondary` | `secondary` |
231
+ | `percipioActionSecondaryHover` | `secondary-hover` |
232
+ | `percipioActionDangerHover` | `danger-hover` |
233
+ | `percipioDanger` | `danger`, `feedback-error` |
234
+ | `percipioFeedbackSuccess` | `feedback-success` |
235
+ | `percipioFeedbackWarning` | `feedback-warning` |
236
+ | `percipioBgPrimary` | `background-primary` |
237
+ | `percipioBgSuccess` | `background-success` |
238
+ | `percipioBgWarning` | `background-warning` |
239
+ | `percipioBgError` | `background-error` |
240
240
 
241
241
  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.).
242
242
 
@@ -369,10 +369,10 @@ Same component library as Codecademy — all atoms, molecules, and organisms app
369
369
 
370
370
  Key Percipio-specific visual differences:
371
371
 
372
- - `FillButton` uses sapphire `#1C50BB` instead of hyper-purple
373
- - `FillButton` hover shifts to near-black `#141C36` rather than a lighter blue
374
- - `Checkbox` / `Toggle` use sapphire `#1C50BB` via `primary`
375
- - `Card` has softer shadows (navy-200 vs navy-800 in Codecademy light mode)
372
+ - `FillButton` uses `primary` (`sapphire`) instead of Core `hyper-500`
373
+ - `FillButton` hover uses `primary-hover` (`percipioActionPrimaryHover`) rather than a lighter blue
374
+ - `Checkbox` / `Toggle` use `primary` (`sapphire`)
375
+ - `Card` has softer `shadow-primary` (`navy-200` vs `navy-800` in Codecademy light mode)
376
376
  - Card shadow patterns (`patternLeft`, `patternRight`) are available but rarely used in Percipio UIs
377
377
 
378
378
  ---
@@ -382,7 +382,7 @@ Key Percipio-specific visual differences:
382
382
  ### Colors
383
383
 
384
384
  - **Do** use semantic color aliases (`primary`, `text`, `background`, etc.) — never hardcode hex values.
385
- - **Do** use `primary` / `sapphire` (`#1C50BB`) as the brand interactive color.
385
+ - **Do** use `primary` (resolves to palette `sapphire`) as the brand interactive color.
386
386
  - **Don't** use Codecademy's hyper-purple or yellow in Percipio contexts.
387
387
  - **Don't** attempt dark mode — Percipio is light only.
388
388
 
@@ -406,26 +406,26 @@ Key Percipio-specific visual differences:
406
406
 
407
407
  Quick color/token reference for generating or specifying Percipio UI:
408
408
 
409
- | Scenario | Tokens |
410
- | ---------------- | ------------------------------------------------------------------------------------------------------------------ |
411
- | Primary button | `bg: primary (#1C50BB)`, `color: white`, `hover: primary-hover (#141C36)` |
412
- | Body text | `color: text (#222325)`, `font: Skillsoft Text`, `size: 16px`, `weight: 400`, `lineHeight: base (1.5)` |
413
- | Headline | `color: text (#222325)`, `font: Skillsoft Text`, `size: 34–64px`, `weight: title (500)`, `lineHeight: title (1.2)` |
414
- | Secondary text | `color: text-secondary (rgba(34, 35, 37, 0.75))` |
415
- | Disabled text | `color: text-disabled (#AFB6C2)` |
416
- | Elevated surface | `bg: background-primary (#FAFBFC)` |
417
- | Card default | `bg: background (#ffffff)`, `borderRadius: none` — add `isInteractive` for hover shadow + `borderRadius: md` |
418
- | Error state | `color: feedback-error (#B83C3C)`, `bg: background-error (#FFF1F5)`, `border: danger` |
419
- | Success state | `color: feedback-success (#1B8057)`, `bg: background-success (#EEF7F3)` |
420
- | Warning state | `color: feedback-warning (#EF5B0D)`, `bg: background-warning (#FFF7E0)` |
421
- | Disabled state | `color: text-disabled (#AFB6C2)`, `bg: background-disabled (navy-200)`, `border: border-disabled` |
409
+ | Scenario | Tokens |
410
+ | ---------------- | -------------------------------------------------------------------------------------------------- |
411
+ | Primary button | `bg: primary`, `color: primary-inverse`, `hover: primary-hover` |
412
+ | Body text | `color: text`, `font: base`, `size: 16`, `weight: 400`, `lineHeight: base` |
413
+ | Headline | `color: text`, `font: base`, `size: 34–64`, `weight: title`, `lineHeight: title` |
414
+ | Secondary text | `color: text-secondary` |
415
+ | Disabled text | `color: text-disabled` |
416
+ | Elevated surface | `bg: background-primary` |
417
+ | Card default | `bg: background`, `borderRadius: none` — add `isInteractive` for hover shadow + `borderRadius: md` |
418
+ | Error state | `color: feedback-error`, `bg: background-error`, `borderColor: danger` |
419
+ | Success state | `color: feedback-success`, `bg: background-success` |
420
+ | Warning state | `color: feedback-warning`, `bg: background-warning` |
421
+ | Disabled state | `color: text-disabled`, `bg: background-disabled`, `borderColor: border-disabled` |
422
422
 
423
423
  ### Component token cheatsheet
424
424
 
425
425
  ```
426
- FillButton → bg: primary (#1C50BB), color: white, hover: primary-hover (#141C36)
427
- StrokeButton → bg: transparent, border: secondary (#6A6E75)
428
- Checkbox/Toggle → primary (#1C50BB), hover: primary-hover (#141C36)
426
+ FillButton → bg: primary, color: primary-inverse, hover: primary-hover
427
+ StrokeButton → bg: transparent, borderColor: secondary, hover: secondary-hover
428
+ Checkbox/Toggle → bg: primary, hover: primary-hover
429
429
  Card → bg: background, shadow: shadow-primary (navy-200, soft)
430
430
  Alert (error) → uses feedback-error + background-error
431
431
  Alert (success) → uses feedback-success + background-success
package/package.json CHANGED
@@ -1,15 +1,15 @@
1
1
  {
2
2
  "name": "@codecademy/gamut",
3
3
  "description": "Styleguide & Component library for Codecademy",
4
- "version": "68.7.1-alpha.77d9da.0",
4
+ "version": "68.7.1-alpha.89ca82.0",
5
5
  "author": "Codecademy Engineering <dev@codecademy.com>",
6
6
  "bin": "./bin/gamut.mjs",
7
7
  "dependencies": {
8
- "@codecademy/gamut-icons": "9.57.6-alpha.77d9da.0",
9
- "@codecademy/gamut-illustrations": "0.58.12-alpha.77d9da.0",
10
- "@codecademy/gamut-patterns": "0.10.31-alpha.77d9da.0",
11
- "@codecademy/gamut-styles": "18.0.1-alpha.77d9da.0",
12
- "@codecademy/variance": "0.26.2-alpha.77d9da.0",
8
+ "@codecademy/gamut-icons": "9.57.6-alpha.89ca82.0",
9
+ "@codecademy/gamut-illustrations": "0.58.12-alpha.89ca82.0",
10
+ "@codecademy/gamut-patterns": "0.10.31-alpha.89ca82.0",
11
+ "@codecademy/gamut-styles": "18.0.1-alpha.89ca82.0",
12
+ "@codecademy/variance": "0.26.2-alpha.89ca82.0",
13
13
  "@formatjs/intl-locale": "5.3.1",
14
14
  "@react-aria/interactions": "3.25.0",
15
15
  "@types/marked": "^4.0.8",