@codecademy/gamut 68.7.1-alpha.29afd9.0 → 68.7.1-alpha.3f9e13.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.
- package/agent-tools/DESIGN.Codecademy.md +80 -112
- package/agent-tools/DESIGN.LXStudio.md +127 -132
- package/agent-tools/DESIGN.Percipio.md +121 -126
- package/agent-tools/DESIGN.md +12 -1
- package/bin/lib/claude.mjs +5 -14
- package/bin/lib/cursor.mjs +1 -4
- package/dist/AccordionButtonDeprecated/ButtonDeprecated/index.d.ts +2 -2
- package/dist/AccordionButtonDeprecated/ButtonDeprecated/index.js +1 -1
- package/dist/Alert/elements.d.ts +2 -2
- package/dist/Anchor/index.d.ts +9 -19
- package/dist/Anchor/index.js +6 -9
- package/dist/BarChart/BarRow/elements.d.ts +45 -47
- package/dist/BarChart/utils/hooks.d.ts +2 -2
- package/dist/BarChart/utils/hooks.js +1 -3
- package/dist/Box/GridBox.d.ts +0 -1
- package/dist/Box/GridBox.js +1 -1
- package/dist/Box/props.d.ts +1 -1
- package/dist/Breadcrumbs/index.d.ts +5 -5
- package/dist/Breadcrumbs/index.js +2 -2
- package/dist/Button/CTAButton.d.ts +2 -2
- package/dist/Button/FillButton.d.ts +4 -4
- package/dist/Button/IconButton.d.ts +4 -4
- package/dist/Button/StrokeButton.d.ts +4 -4
- package/dist/Button/TextButton.d.ts +4 -4
- package/dist/Button/shared/InlineIconButton.d.ts +2 -2
- package/dist/Button/shared/styles.d.ts +3 -3
- package/dist/Button/shared/types.d.ts +1 -1
- package/dist/ButtonBase/ButtonBase.d.ts +4 -9
- package/dist/ButtonBase/ButtonBase.js +4 -11
- package/dist/Card/elements.d.ts +103 -109
- package/dist/Card/styles.d.ts +8 -8
- package/dist/Coachmark/index.d.ts +1 -1
- package/dist/ConnectedForm/ConnectedForm.d.ts +1 -1
- package/dist/ConnectedForm/ConnectedFormGroup.js +3 -4
- package/dist/ConnectedForm/utils.d.ts +1 -1
- package/dist/ConnectedForm/utils.js +1 -1
- package/dist/DatePicker/DatePickerInput/index.d.ts +1 -1
- package/dist/Disclosure/elements.d.ts +12 -18
- package/dist/FeatureShimmer/index.js +1 -1
- package/dist/Form/SelectDropdown/SelectDropdown.js +1 -1
- package/dist/Form/SelectDropdown/elements/containers.js +1 -1
- package/dist/Form/SelectDropdown/elements/controls.js +2 -2
- package/dist/Form/SelectDropdown/elements/multi-value.js +2 -2
- package/dist/Form/SelectDropdown/types/internal.d.ts +2 -2
- package/dist/Form/SelectDropdown/utils.js +1 -2
- package/dist/Form/elements/Form.d.ts +15 -15
- package/dist/Form/elements/FormGroup.d.ts +1 -1
- package/dist/Form/styles/Checkbox-styles.d.ts +1 -1
- package/dist/GridForm/GridFormButtons/index.d.ts +4 -4
- package/dist/List/ListProvider.d.ts +1 -1
- package/dist/List/elements.d.ts +42 -44
- package/dist/Menu/MenuItem.js +6 -10
- package/dist/Menu/elements.d.ts +2 -2
- package/dist/Modals/Dialog.js +2 -6
- package/dist/Modals/Modal.js +2 -5
- package/dist/Modals/elements.d.ts +1 -1
- package/dist/Pagination/AnimatedPaginationButtons.d.ts +29 -31
- package/dist/Pagination/EllipsisButton.d.ts +2 -2
- package/dist/Pagination/PaginationButton.d.ts +6 -6
- package/dist/Pagination/utils.d.ts +29 -31
- package/dist/Pagination/utils.js +11 -14
- package/dist/Popover/Popover.js +6 -6
- package/dist/Popover/types.d.ts +3 -4
- package/dist/PopoverContainer/PopoverContainer.js +9 -9
- package/dist/PopoverContainer/hooks.d.ts +4 -16
- package/dist/PopoverContainer/hooks.js +27 -50
- package/dist/PopoverContainer/types.d.ts +1 -2
- package/dist/Tabs/TabButton.d.ts +2 -2
- package/dist/Tabs/TabNavLink.d.ts +2 -2
- package/dist/Tag/elements.d.ts +8 -14
- package/dist/Tag/index.js +1 -1
- package/dist/Tip/InfoTip/InfoTipButton.d.ts +4 -4
- package/dist/Tip/PreviewTip/elements.d.ts +6 -12
- package/dist/Tip/__tests__/helpers.d.ts +1 -1
- package/dist/Tip/shared/FloatingTip.js +2 -2
- package/dist/Tip/shared/types.d.ts +2 -2
- package/dist/Tip/shared/utils.js +1 -1
- package/dist/utils/react.js +2 -4
- package/package.json +10 -10
- package/dist/utils/nullish.d.ts +0 -10
- package/dist/utils/nullish.js +0 -11
|
@@ -5,12 +5,12 @@ description: Design tokens for the Skillsoft Percipio platform.
|
|
|
5
5
|
colors:
|
|
6
6
|
# palette — raw swatches; set once on :root and then always reference by token name, never use hex values directly in code
|
|
7
7
|
percipioTextPrimary: '#222325'
|
|
8
|
-
percipioTextSecondary: '
|
|
8
|
+
percipioTextSecondary: 'rgba(34, 35, 37, 0.75)'
|
|
9
9
|
percipioTextDisabled: '#AFB6C2'
|
|
10
|
-
|
|
10
|
+
sapphire: '#1C50BB'
|
|
11
11
|
percipioActionPrimaryHover: '#141C36'
|
|
12
12
|
percipioActionSecondary: '#6A6E75'
|
|
13
|
-
percipioActionSecondaryHover: '
|
|
13
|
+
percipioActionSecondaryHover: 'rgba(106, 110, 117, 0.86)'
|
|
14
14
|
percipioActionDangerHover: '#A52020'
|
|
15
15
|
percipioDanger: '#B83C3C'
|
|
16
16
|
percipioFeedbackSuccess: '#1B8057'
|
|
@@ -20,10 +20,10 @@ colors:
|
|
|
20
20
|
percipioBgWarning: '#FFF7E0'
|
|
21
21
|
percipioBgError: '#FFF1F5'
|
|
22
22
|
navy-800: '#10162F'
|
|
23
|
-
navy-400: '
|
|
24
|
-
navy-300: '
|
|
25
|
-
navy-200: '
|
|
26
|
-
navy-100: '
|
|
23
|
+
navy-400: 'rgba(16, 22, 47, 0.47)'
|
|
24
|
+
navy-300: 'rgba(16, 22, 47, 0.28)'
|
|
25
|
+
navy-200: 'rgba(16, 22, 47, 0.12)'
|
|
26
|
+
navy-100: 'rgba(16, 22, 47, 0.04)'
|
|
27
27
|
white: '#ffffff'
|
|
28
28
|
# semantic aliases — use these in code, not palette swatches or hex values
|
|
29
29
|
text: '{colors.percipioTextPrimary}'
|
|
@@ -38,7 +38,7 @@ colors:
|
|
|
38
38
|
background-success: '{colors.percipioBgSuccess}'
|
|
39
39
|
background-warning: '{colors.percipioBgWarning}'
|
|
40
40
|
background-error: '{colors.percipioBgError}'
|
|
41
|
-
primary: '{colors.
|
|
41
|
+
primary: '{colors.sapphire}'
|
|
42
42
|
primary-hover: '{colors.percipioActionPrimaryHover}'
|
|
43
43
|
primary-inverse: '{colors.white}'
|
|
44
44
|
secondary: '{colors.percipioActionSecondary}'
|
|
@@ -56,17 +56,17 @@ colors:
|
|
|
56
56
|
shadow-secondary: '{colors.navy-400}'
|
|
57
57
|
typography:
|
|
58
58
|
base:
|
|
59
|
-
fontFamily: '"Roboto", sans-serif'
|
|
59
|
+
fontFamily: '"Skillsoft Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif'
|
|
60
60
|
fontSize: '1rem'
|
|
61
61
|
fontWeight: '400'
|
|
62
62
|
lineHeight: '1.5'
|
|
63
63
|
accent:
|
|
64
|
-
fontFamily: '"Roboto", sans-serif'
|
|
64
|
+
fontFamily: '"Skillsoft Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif'
|
|
65
65
|
fontSize: '0.875rem'
|
|
66
66
|
fontWeight: '400'
|
|
67
67
|
lineHeight: '1.5'
|
|
68
68
|
title:
|
|
69
|
-
fontFamily: '"Roboto", sans-serif'
|
|
69
|
+
fontFamily: '"Skillsoft Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif'
|
|
70
70
|
fontSize: '2.125rem'
|
|
71
71
|
fontWeight: '500'
|
|
72
72
|
lineHeight: '1.2'
|
|
@@ -118,21 +118,23 @@ This file defines the visual design tokens for the Skillsoft Percipio platform,
|
|
|
118
118
|
|
|
119
119
|
**Storybook**: https://gamut.codecademy.com
|
|
120
120
|
|
|
121
|
+
> **Other Gamut themes:** This document covers **Percipio** only. For Codecademy (Core/Admin/Platform) or LX Studio, install that product's `DESIGN.md` instead: `gamut plugin install cursor --theme core` or `--theme lxstudio`.
|
|
122
|
+
|
|
121
123
|
---
|
|
122
124
|
|
|
123
125
|
## Visual Theme & Atmosphere
|
|
124
126
|
|
|
125
|
-
Percipio communicates **professional clarity** — clean, trustworthy, and enterprise-ready. The design voice is
|
|
127
|
+
Percipio communicates **professional clarity** — clean, trustworthy, and enterprise-ready. The design voice is neutral and corporate: functional, with clear hierarchy. Brand blue drives interactive affordances; neutral grays define text and structure.
|
|
126
128
|
|
|
127
|
-
**Density**: Medium.
|
|
129
|
+
**Density**: Medium. Information-dense layouts with softer shadows and a muted neutral palette.
|
|
128
130
|
|
|
129
131
|
**Design philosophy**:
|
|
130
132
|
|
|
131
133
|
- Light mode only — no dark mode support
|
|
132
|
-
-
|
|
133
|
-
- Text
|
|
134
|
-
- Shadows are soft and minimal (
|
|
135
|
-
- Title font weight is 500
|
|
134
|
+
- Brand blue (`sapphire` / `primary`) for buttons, links, and focus rings
|
|
135
|
+
- Text uses dedicated Percipio palette tokens (`percipioTextPrimary`, etc.)
|
|
136
|
+
- Shadows are soft and minimal (`shadow-primary` → `navy-200`)
|
|
137
|
+
- Title font weight is **500** via `fontWeight="title"` — use semantic weight, not literal `700`
|
|
136
138
|
|
|
137
139
|
---
|
|
138
140
|
|
|
@@ -140,9 +142,9 @@ Percipio communicates **professional clarity** — clean, trustworthy, and enter
|
|
|
140
142
|
|
|
141
143
|
Percipio uses a single Gamut theme — light mode only.
|
|
142
144
|
|
|
143
|
-
| Theme | Use case | Base font
|
|
144
|
-
| ------------ | --------------------------- |
|
|
145
|
-
| **Percipio** | Skillsoft Percipio platform |
|
|
145
|
+
| Theme | Use case | Base font | Dark mode |
|
|
146
|
+
| ------------ | --------------------------- | --------------------- | ---------- |
|
|
147
|
+
| **Percipio** | Skillsoft Percipio platform | Skillsoft Text / Sans | light only |
|
|
146
148
|
|
|
147
149
|
The active theme is set at the app root via `<GamutProvider theme={percipioTheme}>`.
|
|
148
150
|
|
|
@@ -154,65 +156,65 @@ Use these token names when specifying colors. Percipio is light mode only — th
|
|
|
154
156
|
|
|
155
157
|
### Text
|
|
156
158
|
|
|
157
|
-
| Token |
|
|
158
|
-
| ---------------- |
|
|
159
|
-
| `text` |
|
|
160
|
-
| `text-accent` |
|
|
161
|
-
| `text-secondary` |
|
|
162
|
-
| `text-disabled` |
|
|
159
|
+
| Token | Resolves to | Use for |
|
|
160
|
+
| ---------------- | ----------------------- | ------------------------------------------------ |
|
|
161
|
+
| `text` | `percipioTextPrimary` | Default body and UI text |
|
|
162
|
+
| `text-accent` | `percipioTextPrimary` | Emphasis text (same value as `text` in Percipio) |
|
|
163
|
+
| `text-secondary` | `percipioTextSecondary` | Supporting / secondary copy |
|
|
164
|
+
| `text-disabled` | `percipioTextDisabled` | Disabled state labels |
|
|
163
165
|
|
|
164
166
|
### Background
|
|
165
167
|
|
|
166
|
-
| Token |
|
|
167
|
-
| --------------------- |
|
|
168
|
-
| `background` |
|
|
169
|
-
| `background-primary` |
|
|
170
|
-
| `background-selected` |
|
|
171
|
-
| `background-hover` |
|
|
172
|
-
| `background-disabled` |
|
|
173
|
-
| `background-success` |
|
|
174
|
-
| `background-warning` |
|
|
175
|
-
| `background-error` |
|
|
168
|
+
| Token | Resolves to | Use for |
|
|
169
|
+
| --------------------- | ------------------- | --------------------------------- |
|
|
170
|
+
| `background` | `white` | Default page/component background |
|
|
171
|
+
| `background-primary` | `percipioBgPrimary` | Slightly elevated surfaces |
|
|
172
|
+
| `background-selected` | `navy-100` | Selected row / item |
|
|
173
|
+
| `background-hover` | `navy-200` | Hover state overlay |
|
|
174
|
+
| `background-disabled` | `navy-200` | Disabled surface |
|
|
175
|
+
| `background-success` | `percipioBgSuccess` | Success state container |
|
|
176
|
+
| `background-warning` | `percipioBgWarning` | Warning state container |
|
|
177
|
+
| `background-error` | `percipioBgError` | Error state container |
|
|
176
178
|
|
|
177
179
|
### Interactive
|
|
178
180
|
|
|
179
|
-
| Token |
|
|
180
|
-
| ----------------- |
|
|
181
|
-
| `primary` |
|
|
182
|
-
| `primary-hover` |
|
|
183
|
-
| `primary-inverse` |
|
|
184
|
-
| `secondary` |
|
|
185
|
-
| `secondary-hover` |
|
|
186
|
-
| `danger` |
|
|
187
|
-
| `danger-hover` |
|
|
181
|
+
| Token | Resolves to | Use for |
|
|
182
|
+
| ----------------- | ------------------------------ | ------------------------------------ |
|
|
183
|
+
| `primary` | `sapphire` | Primary CTA, links, focus rings |
|
|
184
|
+
| `primary-hover` | `percipioActionPrimaryHover` | Hover state of primary interactive |
|
|
185
|
+
| `primary-inverse` | `white` | Primary on a colored background |
|
|
186
|
+
| `secondary` | `percipioActionSecondary` | Secondary CTA, ghost buttons |
|
|
187
|
+
| `secondary-hover` | `percipioActionSecondaryHover` | Hover state of secondary interactive |
|
|
188
|
+
| `danger` | `percipioDanger` | Destructive actions, error states |
|
|
189
|
+
| `danger-hover` | `percipioActionDangerHover` | Hover on danger interactive |
|
|
188
190
|
|
|
189
191
|
### Border
|
|
190
192
|
|
|
191
193
|
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
194
|
|
|
193
|
-
| Token |
|
|
194
|
-
| ------------------ |
|
|
195
|
-
| `border-primary` |
|
|
196
|
-
| `border-secondary` |
|
|
197
|
-
| `border-tertiary` |
|
|
198
|
-
| `border-disabled` |
|
|
195
|
+
| Token | Resolves to | Use for |
|
|
196
|
+
| ------------------ | ----------- | ----------------------------------- |
|
|
197
|
+
| `border-primary` | `navy-400` | Standard input and card borders |
|
|
198
|
+
| `border-secondary` | `navy-200` | Subtle dividers, section separators |
|
|
199
|
+
| `border-tertiary` | `navy-800` | Strong structural borders |
|
|
200
|
+
| `border-disabled` | `navy-300` | Disabled input borders |
|
|
199
201
|
|
|
200
202
|
### Feedback
|
|
201
203
|
|
|
202
|
-
| Token |
|
|
203
|
-
| ------------------ |
|
|
204
|
-
| `feedback-error` |
|
|
205
|
-
| `feedback-success` |
|
|
206
|
-
| `feedback-warning` |
|
|
204
|
+
| Token | Resolves to | Use for |
|
|
205
|
+
| ------------------ | ------------------------- | -------------------------------- |
|
|
206
|
+
| `feedback-error` | `percipioDanger` | Error messages, validation |
|
|
207
|
+
| `feedback-success` | `percipioFeedbackSuccess` | Success messages, confirmations |
|
|
208
|
+
| `feedback-warning` | `percipioFeedbackWarning` | Warning messages, caution states |
|
|
207
209
|
|
|
208
210
|
### Shadow
|
|
209
211
|
|
|
210
|
-
| Token |
|
|
211
|
-
| ------------------ |
|
|
212
|
-
| `shadow-primary` |
|
|
213
|
-
| `shadow-secondary` |
|
|
212
|
+
| Token | Resolves to |
|
|
213
|
+
| ------------------ | ----------- |
|
|
214
|
+
| `shadow-primary` | `navy-200` |
|
|
215
|
+
| `shadow-secondary` | `navy-400` |
|
|
214
216
|
|
|
215
|
-
|
|
217
|
+
Use `shadow-primary` for standard elevated surfaces.
|
|
216
218
|
|
|
217
219
|
---
|
|
218
220
|
|
|
@@ -220,23 +222,23 @@ Percipio shadows are softer than Codecademy's — use `shadow-primary` for stand
|
|
|
220
222
|
|
|
221
223
|
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
224
|
|
|
223
|
-
|
|
|
224
|
-
| ------------------------------ |
|
|
225
|
-
| `percipioTextPrimary` |
|
|
226
|
-
| `percipioTextSecondary` |
|
|
227
|
-
| `percipioTextDisabled` |
|
|
228
|
-
| `
|
|
229
|
-
| `percipioActionPrimaryHover` |
|
|
230
|
-
| `percipioActionSecondary` |
|
|
231
|
-
| `percipioActionSecondaryHover` |
|
|
232
|
-
| `percipioActionDangerHover` |
|
|
233
|
-
| `percipioDanger` |
|
|
234
|
-
| `percipioFeedbackSuccess` |
|
|
235
|
-
| `percipioFeedbackWarning` |
|
|
236
|
-
| `percipioBgPrimary` |
|
|
237
|
-
| `percipioBgSuccess` |
|
|
238
|
-
| `percipioBgWarning` |
|
|
239
|
-
| `percipioBgError` |
|
|
225
|
+
| Palette token | Semantic alias(es) |
|
|
226
|
+
| ------------------------------ | -------------------------- |
|
|
227
|
+
| `percipioTextPrimary` | `text`, `text-accent` |
|
|
228
|
+
| `percipioTextSecondary` | `text-secondary` |
|
|
229
|
+
| `percipioTextDisabled` | `text-disabled` |
|
|
230
|
+
| `sapphire` | `primary` |
|
|
231
|
+
| `percipioActionPrimaryHover` | `primary-hover` |
|
|
232
|
+
| `percipioActionSecondary` | `secondary` |
|
|
233
|
+
| `percipioActionSecondaryHover` | `secondary-hover` |
|
|
234
|
+
| `percipioActionDangerHover` | `danger-hover` |
|
|
235
|
+
| `percipioDanger` | `danger`, `feedback-error` |
|
|
236
|
+
| `percipioFeedbackSuccess` | `feedback-success` |
|
|
237
|
+
| `percipioFeedbackWarning` | `feedback-warning` |
|
|
238
|
+
| `percipioBgPrimary` | `background-primary` |
|
|
239
|
+
| `percipioBgSuccess` | `background-success` |
|
|
240
|
+
| `percipioBgWarning` | `background-warning` |
|
|
241
|
+
| `percipioBgError` | `background-error` |
|
|
240
242
|
|
|
241
243
|
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
244
|
|
|
@@ -246,34 +248,32 @@ The full core swatch palette (navy, blue, green, yellow, red, etc.) is also avai
|
|
|
246
248
|
|
|
247
249
|
### Typefaces
|
|
248
250
|
|
|
249
|
-
|
|
251
|
+
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.
|
|
250
252
|
|
|
251
|
-
| Token | Font
|
|
252
|
-
| ----------- |
|
|
253
|
-
| `base` | `"
|
|
254
|
-
| `accent` | `"
|
|
255
|
-
| `monospace` | `"Roboto Mono", monospace`
|
|
256
|
-
| `system` | `"Roboto", sans-serif`
|
|
253
|
+
| Token | Font | Use for |
|
|
254
|
+
| ----------- | ------------------------------ | ----------------------------------------- |
|
|
255
|
+
| `base` | `"Skillsoft Text", sans-serif` | All default UI text, headlines, body copy |
|
|
256
|
+
| `accent` | `"Skillsoft Sans", sans-serif` | Labels, captions, accent UI |
|
|
257
|
+
| `monospace` | `"Roboto Mono", monospace` | Code editor contexts |
|
|
258
|
+
| `system` | `"Roboto", sans-serif` | Performance-critical surfaces |
|
|
257
259
|
|
|
258
260
|
### Rules
|
|
259
261
|
|
|
260
|
-
- **
|
|
261
|
-
- **
|
|
262
|
+
- **Skillsoft Text Medium (500)** for headlines, sub-headlines, CTAs, and buttons — use `fontWeight="title"`, not literal `700`.
|
|
263
|
+
- **Skillsoft Text Regular (400)** for body text, UI labels, and menu items.
|
|
262
264
|
- Text is **left-aligned** by default. Center-align only for short marketing headlines. Never right-align.
|
|
263
265
|
- Do not adjust letter-spacing.
|
|
264
266
|
|
|
265
267
|
### Font weight scale
|
|
266
268
|
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
|
270
|
-
|
|
|
271
|
-
| `base` | 400 | Body text, UI labels |
|
|
272
|
-
| `title` | **500** | Headlines, CTAs, buttons _(differs from Codecademy's 700)_ |
|
|
269
|
+
| Token | Value | Use |
|
|
270
|
+
| ------- | ------- | ------------------------ |
|
|
271
|
+
| `base` | 400 | Body text, UI labels |
|
|
272
|
+
| `title` | **500** | Headlines, CTAs, buttons |
|
|
273
273
|
|
|
274
274
|
### Font size scale
|
|
275
275
|
|
|
276
|
-
|
|
276
|
+
Standard Gamut font size scale:
|
|
277
277
|
|
|
278
278
|
| Token key | Size | Common use |
|
|
279
279
|
| --------- | ---- | ---------------------------- |
|
|
@@ -289,7 +289,7 @@ Shared with Core — all sizes are identical.
|
|
|
289
289
|
|
|
290
290
|
### Line height scale
|
|
291
291
|
|
|
292
|
-
|
|
292
|
+
Standard Gamut line height scale:
|
|
293
293
|
|
|
294
294
|
| Token | Value | Use |
|
|
295
295
|
| ------------- | ----- | ------------------------------- |
|
|
@@ -305,7 +305,7 @@ Target 45–85 characters per line; 66 characters is ideal. Max 50 for multi-col
|
|
|
305
305
|
|
|
306
306
|
## Spacing Scale
|
|
307
307
|
|
|
308
|
-
|
|
308
|
+
All spacing is multiples of 4px on an 8px grid.
|
|
309
309
|
|
|
310
310
|
| Token | Value |
|
|
311
311
|
| ----- | ----- |
|
|
@@ -325,8 +325,6 @@ Identical to Core. All spacing is multiples of 4px on an 8px grid.
|
|
|
325
325
|
|
|
326
326
|
## Border Radius Scale
|
|
327
327
|
|
|
328
|
-
Identical to Core.
|
|
329
|
-
|
|
330
328
|
| Token | Value | Use |
|
|
331
329
|
| ------ | ----- | ------------------------------------------ |
|
|
332
330
|
| `none` | 0px | Square / non-interactive elements |
|
|
@@ -340,7 +338,7 @@ Identical to Core.
|
|
|
340
338
|
|
|
341
339
|
## Responsive Behavior
|
|
342
340
|
|
|
343
|
-
|
|
341
|
+
Mobile-first; apply styles from the named breakpoint up.
|
|
344
342
|
|
|
345
343
|
| Token | Min-width | Max content |
|
|
346
344
|
| -------- | --------- | ----------- |
|
|
@@ -365,15 +363,13 @@ Minimum interactive touch target: **44×44px** on mobile breakpoints.
|
|
|
365
363
|
|
|
366
364
|
## Component Library
|
|
367
365
|
|
|
368
|
-
|
|
366
|
+
Gamut atoms, molecules, and organisms all apply. Use semantic tokens below for Percipio-specific styling.
|
|
369
367
|
|
|
370
|
-
Key
|
|
368
|
+
Key patterns:
|
|
371
369
|
|
|
372
|
-
- `FillButton`
|
|
373
|
-
- `
|
|
374
|
-
- `
|
|
375
|
-
- `Card` has softer shadows (navy-200 vs navy-800 in Codecademy light mode)
|
|
376
|
-
- Card shadow patterns (`patternLeft`, `patternRight`) are available but rarely used in Percipio UIs
|
|
370
|
+
- `FillButton` — `bg: primary`, `hover: primary-hover`
|
|
371
|
+
- `Checkbox` / `Toggle` — `primary`, `hover: primary-hover`
|
|
372
|
+
- `Card` — `shadow-primary` (`navy-200`); `patternLeft` / `patternRight` are available but rarely used
|
|
377
373
|
|
|
378
374
|
---
|
|
379
375
|
|
|
@@ -382,15 +378,14 @@ Key Percipio-specific visual differences:
|
|
|
382
378
|
### Colors
|
|
383
379
|
|
|
384
380
|
- **Do** use semantic color aliases (`primary`, `text`, `background`, etc.) — never hardcode hex values.
|
|
385
|
-
- **Do** use
|
|
386
|
-
- **Don't** use Codecademy's hyper-purple or yellow in Percipio contexts.
|
|
381
|
+
- **Do** use `primary` (resolves to palette `sapphire`) as the brand interactive color.
|
|
387
382
|
- **Don't** attempt dark mode — Percipio is light only.
|
|
388
383
|
|
|
389
384
|
### Typography
|
|
390
385
|
|
|
391
386
|
- **Do** use title weight (500) for headlines, CTAs, and buttons — not 700.
|
|
392
387
|
- **Do** keep body text at 150–175% line height for readability.
|
|
393
|
-
- **Don't** use
|
|
388
|
+
- **Don't** use fonts outside the Percipio theme stack (Skillsoft Text, Skillsoft Sans, Roboto Mono for code).
|
|
394
389
|
- **Don't** right-align or center-align body paragraphs.
|
|
395
390
|
- **Don't** adjust letter-spacing.
|
|
396
391
|
|
|
@@ -406,27 +401,27 @@ Key Percipio-specific visual differences:
|
|
|
406
401
|
|
|
407
402
|
Quick color/token reference for generating or specifying Percipio UI:
|
|
408
403
|
|
|
409
|
-
| Scenario | Tokens
|
|
410
|
-
| ---------------- |
|
|
411
|
-
| Primary button | `bg: primary
|
|
412
|
-
| Body text | `color: text
|
|
413
|
-
| Headline | `color: text
|
|
414
|
-
| Secondary text | `color: text-secondary
|
|
415
|
-
| Disabled text | `color: text-disabled
|
|
416
|
-
| Elevated surface | `bg: background-primary
|
|
417
|
-
| Card default | `bg: background
|
|
418
|
-
| Error state | `color: feedback-error
|
|
419
|
-
| Success state | `color: feedback-success
|
|
420
|
-
| Warning state | `color: feedback-warning
|
|
421
|
-
| Disabled state | `color: text-disabled
|
|
404
|
+
| Scenario | Tokens |
|
|
405
|
+
| ---------------- | -------------------------------------------------------------------------------------------------- |
|
|
406
|
+
| Primary button | `bg: primary`, `color: primary-inverse`, `hover: primary-hover` |
|
|
407
|
+
| Body text | `color: text`, `font: base`, `size: 16`, `weight: 400`, `lineHeight: base` |
|
|
408
|
+
| Headline | `color: text`, `font: base`, `size: 34–64`, `weight: title`, `lineHeight: title` |
|
|
409
|
+
| Secondary text | `color: text-secondary` |
|
|
410
|
+
| Disabled text | `color: text-disabled` |
|
|
411
|
+
| Elevated surface | `bg: background-primary` |
|
|
412
|
+
| Card default | `bg: background`, `borderRadius: none` — add `isInteractive` for hover shadow + `borderRadius: md` |
|
|
413
|
+
| Error state | `color: feedback-error`, `bg: background-error`, `borderColor: danger` |
|
|
414
|
+
| Success state | `color: feedback-success`, `bg: background-success` |
|
|
415
|
+
| Warning state | `color: feedback-warning`, `bg: background-warning` |
|
|
416
|
+
| Disabled state | `color: text-disabled`, `bg: background-disabled`, `borderColor: border-disabled` |
|
|
422
417
|
|
|
423
418
|
### Component token cheatsheet
|
|
424
419
|
|
|
425
420
|
```
|
|
426
|
-
FillButton → bg: primary
|
|
427
|
-
StrokeButton → bg: transparent,
|
|
428
|
-
Checkbox/Toggle → primary
|
|
429
|
-
Card → bg: background, shadow: shadow-primary (
|
|
421
|
+
FillButton → bg: primary, color: primary-inverse, hover: primary-hover
|
|
422
|
+
StrokeButton → bg: transparent, borderColor: secondary, hover: secondary-hover
|
|
423
|
+
Checkbox/Toggle → bg: primary, hover: primary-hover
|
|
424
|
+
Card → bg: background, shadow: shadow-primary (navy-200, soft)
|
|
430
425
|
Alert (error) → uses feedback-error + background-error
|
|
431
426
|
Alert (success) → uses feedback-success + background-success
|
|
432
427
|
Alert (warning) → uses feedback-warning + background-warning
|
package/agent-tools/DESIGN.md
CHANGED
|
@@ -1 +1,12 @@
|
|
|
1
|
-
|
|
1
|
+
Product-specific design context lives in this directory. **Use one `DESIGN.md` per app — matched to the Gamut theme that app uses.**
|
|
2
|
+
|
|
3
|
+
| Source file | Install with `--theme` |
|
|
4
|
+
| ---------------------- | --------------------------------------------------------- |
|
|
5
|
+
| `DESIGN.Codecademy.md` | `core`, `admin`, `platform` (aliases: `codecademy`, `cc`) |
|
|
6
|
+
| `DESIGN.Percipio.md` | `percipio` |
|
|
7
|
+
| `DESIGN.LXStudio.md` | `lxstudio` (alias: `lx-studio`) |
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
gamut plugin install cursor --theme <name>
|
|
11
|
+
# refresh: gamut plugin update cursor --theme <name> --force
|
|
12
|
+
```
|
package/bin/lib/claude.mjs
CHANGED
|
@@ -15,7 +15,7 @@ export async function claudePluginSpec(sourceRoot) {
|
|
|
15
15
|
} catch {
|
|
16
16
|
throw new Error(
|
|
17
17
|
`Missing ${mp}.\n` +
|
|
18
|
-
`A .claude-plugin/marketplace.json is required for Claude Code installation
|
|
18
|
+
`A .claude-plugin/marketplace.json is required for Claude Code installation.`,
|
|
19
19
|
);
|
|
20
20
|
}
|
|
21
21
|
|
|
@@ -26,20 +26,14 @@ export async function claudePluginSpec(sourceRoot) {
|
|
|
26
26
|
const { name: marketplaceName, plugins } = json;
|
|
27
27
|
|
|
28
28
|
if (!marketplaceName || !Array.isArray(plugins) || plugins.length === 0) {
|
|
29
|
-
throw new Error(
|
|
30
|
-
`Invalid marketplace.json — needs "name" and "plugins[]": ${mp}`
|
|
31
|
-
);
|
|
29
|
+
throw new Error(`Invalid marketplace.json — needs "name" and "plugins[]": ${mp}`);
|
|
32
30
|
}
|
|
33
31
|
|
|
34
32
|
const entry =
|
|
35
|
-
plugins.find(
|
|
36
|
-
(p) => p.source === './' || p.source === '.' || p.source == null
|
|
37
|
-
) ?? plugins[0];
|
|
33
|
+
plugins.find((p) => p.source === './' || p.source === '.' || p.source == null) ?? plugins[0];
|
|
38
34
|
|
|
39
35
|
if (!entry?.name) {
|
|
40
|
-
throw new Error(
|
|
41
|
-
`No plugin name found in marketplace.json plugins[]: ${mp}`
|
|
42
|
-
);
|
|
36
|
+
throw new Error(`No plugin name found in marketplace.json plugins[]: ${mp}`);
|
|
43
37
|
}
|
|
44
38
|
|
|
45
39
|
return `${entry.name}@${marketplaceName}`;
|
|
@@ -53,9 +47,6 @@ export async function claudePluginSpec(sourceRoot) {
|
|
|
53
47
|
*/
|
|
54
48
|
export function marketplaceName(spec) {
|
|
55
49
|
const name = spec.split('@')[1];
|
|
56
|
-
if (!name)
|
|
57
|
-
throw new Error(
|
|
58
|
-
`Could not parse marketplace name from plugin spec: ${spec}`
|
|
59
|
-
);
|
|
50
|
+
if (!name) throw new Error(`Could not parse marketplace name from plugin spec: ${spec}`);
|
|
60
51
|
return name;
|
|
61
52
|
}
|
package/bin/lib/cursor.mjs
CHANGED
|
@@ -4,10 +4,7 @@ import { join } from 'node:path';
|
|
|
4
4
|
|
|
5
5
|
/** @returns {string} */
|
|
6
6
|
export function cursorPluginsRoot() {
|
|
7
|
-
return (
|
|
8
|
-
process.env.CURSOR_PLUGINS_LOCAL ??
|
|
9
|
-
join(homedir(), '.cursor', 'plugins', 'local')
|
|
10
|
-
);
|
|
7
|
+
return process.env.CURSOR_PLUGINS_LOCAL ?? join(homedir(), '.cursor', 'plugins', 'local');
|
|
11
8
|
}
|
|
12
9
|
|
|
13
10
|
/**
|
|
@@ -7,8 +7,8 @@ export declare const buttonPresetThemes: {
|
|
|
7
7
|
readonly lantern: "darkmint";
|
|
8
8
|
readonly royalblue: "brand-purple";
|
|
9
9
|
};
|
|
10
|
-
declare const
|
|
11
|
-
export type ButtonDeprecatedThemes = keyof typeof buttonPresetThemes | (typeof
|
|
10
|
+
declare const themes: readonly ["hyper", "navy", "red", "white", "brand-red", "brand-yellow", "brand-purple", "brand-dark-blue", "brand-blue", "mint", "darkmint", "grey", "greyblue"];
|
|
11
|
+
export type ButtonDeprecatedThemes = keyof typeof buttonPresetThemes | (typeof themes)[number];
|
|
12
12
|
export type ButtonDeprecatedProps = ButtonDeprecatedBaseProps & {
|
|
13
13
|
/**
|
|
14
14
|
* Whether button should behave like a block element or inline.
|
|
@@ -16,7 +16,7 @@ export const buttonPresetThemes = {
|
|
|
16
16
|
lantern: 'darkmint',
|
|
17
17
|
royalblue: 'brand-purple'
|
|
18
18
|
};
|
|
19
|
-
const
|
|
19
|
+
const themes = ['hyper', 'navy', 'red', 'white', 'brand-red', 'brand-yellow', 'brand-purple', 'brand-dark-blue', 'brand-blue', 'mint', 'darkmint', 'grey', 'greyblue'];
|
|
20
20
|
const propKeys = ['theme', 'size', 'outline', 'underline', 'link', 'caps', 'go', 'children', 'block', 'className', 'round', 'square', 'flat', 'fitText', 'onClick'];
|
|
21
21
|
const isPreset = theme => {
|
|
22
22
|
return hasIn(buttonPresetThemes, theme);
|