@codecademy/gamut 68.6.1-alpha.ba5407.0 → 68.6.1-alpha.d52035.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.
|
@@ -1,15 +1,43 @@
|
|
|
1
1
|
# Buttons
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Agent reference: which **button component** and which **`variant`** to use. Colors are wired inside each atom — consumers do **not** pass `color`, `bg`, hex, or semantic token names on stock buttons.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
5
|
+
**Related docs:** [overview.md](../overview.md) (reading order) · [foundations/color.md](../foundations/color.md) and `gamut-color-mode` skill — semantic tokens for **custom** styled controls only, not stock button atoms · [foundations/modes.md](../foundations/modes.md) — ColorMode / `<Background>` when placing buttons on colored surfaces
|
|
6
|
+
|
|
7
|
+
**Storybook (UX source of truth):**
|
|
8
|
+
|
|
9
|
+
- [Atoms / Buttons / Button](https://gamut.codecademy.com/?path=/docs-atoms-buttons-button--docs) — variants, light/dark examples
|
|
10
|
+
- [FillButton](https://gamut.codecademy.com/?path=/docs-atoms-buttons-fillbutton--docs) · [StrokeButton](https://gamut.codecademy.com/?path=/docs-atoms-buttons-strokebutton--docs) · [TextButton](https://gamut.codecademy.com/?path=/docs-atoms-buttons-textbutton--docs) · [IconButton](https://gamut.codecademy.com/?path=/docs-atoms-buttons-iconbutton--docs) · [CTAButton](https://gamut.codecademy.com/?path=/docs-atoms-buttons-ctabutton--docs)
|
|
11
|
+
- [Meta / Best practices](https://gamut.codecademy.com/?path=/docs-meta-best-practices--page) — semantic tokens for custom `css` / `variant` / `states`, not prebuilt atoms
|
|
12
|
+
- [UX Writing / Component guidelines / Buttons](https://gamut.codecademy.com/?path=/docs-ux-writing-component-guidelines-buttons--docs) — label copy
|
|
13
|
+
|
|
14
|
+
## Component selection
|
|
15
|
+
|
|
16
|
+
| Component | Use for | Default `variant` |
|
|
17
|
+
| -------------- | --------------------------------------------- | ------------------------------------------------ |
|
|
18
|
+
| `FillButton` | Primary / high-emphasis actions | `primary` |
|
|
19
|
+
| `StrokeButton` | Secondary / outlined actions | `primary` (often pass `secondary` per Storybook) |
|
|
20
|
+
| `TextButton` | Low-emphasis, inline actions | `primary` |
|
|
21
|
+
| `IconButton` | Icon-only; requires `tip` and accessible name | `secondary` |
|
|
22
|
+
| `CTAButton` | Marketing / high-visibility CTA only | `primary` (only option) |
|
|
23
|
+
|
|
24
|
+
## `variant` prop
|
|
25
|
+
|
|
26
|
+
Shared by `FillButton`, `StrokeButton`, `TextButton`, and `IconButton`. `CTAButton` only supports `primary`.
|
|
27
|
+
|
|
28
|
+
| `variant` | Typical use |
|
|
29
|
+
| ----------- | ------------------------------ |
|
|
30
|
+
| `primary` | Submit, main CTA |
|
|
31
|
+
| `secondary` | Close, cancel, low priority |
|
|
32
|
+
| `danger` | Destructive actions |
|
|
33
|
+
| `interface` | Controls styled like UI chrome |
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
<FillButton variant="primary">Submit</FillButton>
|
|
37
|
+
<StrokeButton variant="secondary">Cancel</StrokeButton>
|
|
38
|
+
<IconButton icon={SearchIcon} tip="Search" variant="secondary" />
|
|
39
|
+
<CTAButton>Try Pro for free</CTAButton>
|
|
40
|
+
```
|
|
13
41
|
|
|
14
42
|
## Sizes
|
|
15
43
|
|
|
@@ -17,28 +45,47 @@
|
|
|
17
45
|
|
|
18
46
|
## Key props
|
|
19
47
|
|
|
20
|
-
| Prop
|
|
21
|
-
|
|
22
|
-
| `
|
|
23
|
-
| `
|
|
24
|
-
| `
|
|
25
|
-
| `
|
|
26
|
-
| `
|
|
48
|
+
| Prop | Type | Effect |
|
|
49
|
+
| -------------- | ----------------------------------------------------- | ------------------------------------------------ |
|
|
50
|
+
| `variant` | `"primary" \| "secondary" \| "danger" \| "interface"` | Color emphasis (see table above) |
|
|
51
|
+
| `size` | `"small" \| "normal" \| "large"` | Padding and font size |
|
|
52
|
+
| `icon` | Icon component | Leading or trailing icon (Fill, Stroke, Text) |
|
|
53
|
+
| `iconPosition` | `"left" \| "right"` | Defaults to left |
|
|
54
|
+
| `disabled` | boolean | Disabled state styling |
|
|
55
|
+
| `href` | string | Renders as `<a>` tag |
|
|
56
|
+
| `tip` | string | Required on `IconButton` (tooltip + hover label) |
|
|
27
57
|
|
|
28
58
|
## States
|
|
29
59
|
|
|
30
|
-
|
|
60
|
+
Hover, active, and disabled colors are handled by the component. Do not override state colors with `color` / `bg` props.
|
|
31
61
|
|
|
32
|
-
##
|
|
62
|
+
## Accessibility — `disabled` vs `aria-disabled`
|
|
33
63
|
|
|
64
|
+
| Situation | Use | Why |
|
|
65
|
+
| ------------------------------------------------------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
66
|
+
| Button should not be activatable (default) | `disabled` prop | Renders native `disabled` on `<button>`; removed from tab order; correct for most forms and actions |
|
|
67
|
+
| Disabled button **with a tooltip** that must stay readable on focus | `aria-disabled` only — **do not** also pass `disabled` | Native `disabled` blocks keyboard focus, so the tooltip cannot be reached. Gamut disabled **styles** also match `[aria-disabled='true']`. See [ToolTip — With a disabled Button](https://gamut.codecademy.com/?path=/docs-molecules-tips-tooltip--docs) |
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
// Default — not interactive
|
|
71
|
+
<FillButton disabled>Submit</FillButton>
|
|
72
|
+
|
|
73
|
+
// Disabled but focusable (e.g. wrapped in ToolTip explaining why)
|
|
74
|
+
<ToolTip id="why-disabled" info="Complete the lesson first">
|
|
75
|
+
<FillButton aria-describedby="why-disabled" aria-disabled>
|
|
76
|
+
Submit
|
|
77
|
+
</FillButton>
|
|
78
|
+
</ToolTip>
|
|
34
79
|
```
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
80
|
+
|
|
81
|
+
- **`href` + `disabled`:** `ButtonBase` (internal) drops `href` and renders a `<button disabled>` — link-style buttons cannot stay anchors while disabled.
|
|
82
|
+
- **`IconButton`:** provide an accessible name via `tip` (used as `aria-label` when `aria-label` is omitted). See ToolTip / IconButton Storybook pages.
|
|
83
|
+
- **`ButtonBase` is not exported** from `@codecademy/gamut` (only the `ButtonBaseElements` type is). Prefer stock atoms; custom button styling belongs in Gamut itself or via `css` / `variant` from `gamut-styles`, not by importing `ButtonBase`.
|
|
39
84
|
|
|
40
85
|
## Rules
|
|
41
86
|
|
|
42
|
-
- Use `FillButton` for primary actions and `StrokeButton` for secondary — do not use both at equal weight.
|
|
87
|
+
- Use `FillButton` for primary actions and `StrokeButton` for secondary — do not use both at equal weight on the same screen.
|
|
43
88
|
- Reserve `CTAButton` for marketing / high-visibility promotions; do not use it for standard UI actions.
|
|
89
|
+
- Avoid placing buttons in the wrong color-mode context (e.g. light-mode buttons on a navy band without `<Background>`). See [modes.md](../foundations/modes.md).
|
|
44
90
|
- Every interactive `Card` wrapped in `<Anchor>` should have `isInteractive` — not a button inside.
|
|
91
|
+
- Do not set `color`, `bg`, or hex on stock button components. For custom styled controls, follow [color.md](../foundations/color.md) and `gamut-styles` utilities — do not import internal `ButtonBase`.
|
|
@@ -1,86 +1,172 @@
|
|
|
1
1
|
# Color
|
|
2
2
|
|
|
3
|
-
Use **semantic aliases** for
|
|
3
|
+
Use **semantic aliases** for UI that should respond to **color mode** (light/dark) and **theme** (Core, Admin, Platform, Percipio, LX Studio). The **same semantic token names** (`text`, `primary`, `background`, …) exist across themes; **resolved palette values and hex differ** by `GamutProvider` theme and active ColorMode. Never assume Codecademy Core hex when advising another product.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Prefer **`css` / `variant` / `states`** from `@codecademy/gamut-styles` with semantic names (see Storybook [Best practices](https://gamut.codecademy.com/?path=/docs-meta-best-practices--page)).
|
|
6
|
+
|
|
7
|
+
**Related:** [`setup.md`](../setup.md) (which theme to import) · [`gamut-theming` skill](../../skills/gamut-theming/SKILL.md) · [`gamut-color-mode` skill](../../skills/gamut-color-mode/SKILL.md) · [`modes.md`](modes.md) (`<ColorMode>`, `<Background>`)
|
|
8
|
+
|
|
9
|
+
Percipio, LX Studio, Admin, and Platform override subsets of semantic mappings while keeping the shared alias API — see theme sources below before hardcoding palette names or hex.
|
|
10
|
+
|
|
11
|
+
## Semantic aliases (theme-stable names)
|
|
12
|
+
|
|
13
|
+
These tokens describe **roles**. Actual colors come from the active theme + ColorMode.
|
|
14
|
+
|
|
15
|
+
### Text
|
|
16
|
+
|
|
17
|
+
| Token | Use for | Notes |
|
|
18
|
+
| ---------------- | --------------------------- | -------------------------- |
|
|
19
|
+
| `text` | Default body and UI text | |
|
|
20
|
+
| `text-accent` | Stronger emphasis text | |
|
|
21
|
+
| `text-secondary` | Supporting / secondary copy | Often opacity on base text |
|
|
22
|
+
| `text-disabled` | Disabled state labels | |
|
|
23
|
+
|
|
24
|
+
### Background
|
|
25
|
+
|
|
26
|
+
| Token | Use for | Notes |
|
|
27
|
+
| --------------------- | --------------------------------- | ------------------------- |
|
|
28
|
+
| `background` | Default page/component background | |
|
|
29
|
+
| `background-primary` | Slightly elevated surfaces | |
|
|
30
|
+
| `background-contrast` | Maximum contrast surface | |
|
|
31
|
+
| `background-selected` | Selected row / item | Often low-opacity overlay |
|
|
32
|
+
| `background-hover` | Hover state overlay | |
|
|
33
|
+
| `background-disabled` | Disabled surface | |
|
|
34
|
+
| `background-success` | Success state container | |
|
|
35
|
+
| `background-warning` | Warning state container | |
|
|
36
|
+
| `background-error` | Error state container | |
|
|
37
|
+
|
|
38
|
+
### Interactive
|
|
39
|
+
|
|
40
|
+
| Token | Use for | Notes |
|
|
41
|
+
| ----------------- | ----------------------------------------- | ---------------------------- |
|
|
42
|
+
| `primary` | Primary CTA, links, focus accents | Pairs with `primary-hover` |
|
|
43
|
+
| `primary-hover` | Hover on primary interactive | |
|
|
44
|
+
| `primary-inverse` | Accent on top of primary-colored surfaces | |
|
|
45
|
+
| `secondary` | Secondary CTA, ghost buttons | Pairs with `secondary-hover` |
|
|
46
|
+
| `secondary-hover` | Hover on secondary interactive | |
|
|
47
|
+
| `interface` | Checkboxes, toggles, sliders | Pairs with `interface-hover` |
|
|
48
|
+
| `interface-hover` | Hover on interface elements | |
|
|
49
|
+
| `danger` | Destructive actions, error emphasis | Pairs with `danger-hover` |
|
|
50
|
+
| `danger-hover` | Hover on danger interactive | |
|
|
51
|
+
|
|
52
|
+
### Border
|
|
53
|
+
|
|
54
|
+
| Token | Use for | Notes |
|
|
55
|
+
| ------------------ | -------------------------- | ----- |
|
|
56
|
+
| `border-primary` | Strong borders, dividers | |
|
|
57
|
+
| `border-secondary` | Medium-weight borders | |
|
|
58
|
+
| `border-tertiary` | Subtle borders, separators | |
|
|
59
|
+
| `border-disabled` | Disabled input borders | |
|
|
60
|
+
|
|
61
|
+
### Feedback
|
|
62
|
+
|
|
63
|
+
| Token | Use for | Notes |
|
|
64
|
+
| ------------------ | -------------------------- | ----- |
|
|
65
|
+
| `feedback-error` | Error messages, validation | |
|
|
66
|
+
| `feedback-success` | Success messages | |
|
|
67
|
+
| `feedback-warning` | Warning messages | |
|
|
68
|
+
|
|
69
|
+
## Where resolved colors are documented
|
|
70
|
+
|
|
71
|
+
Use these instead of memorizing hex:
|
|
72
|
+
|
|
73
|
+
- **Storybook [ColorMode](https://gamut.codecademy.com/?path=/docs-foundations-colormode--page)** — how aliases map per light/dark for reference layouts.
|
|
74
|
+
- **Storybook Foundations → Theme** — per-product tables and guidance:
|
|
75
|
+
- [Core Theme](https://gamut.codecademy.com/?path=/docs-foundations-theme-core-theme--docs)
|
|
76
|
+
- [Admin Theme](https://gamut.codecademy.com/?path=/docs-foundations-theme-admin-theme--docs)
|
|
77
|
+
- [Platform Theme](https://gamut.codecademy.com/?path=/docs-foundations-theme-platform-theme--docs)
|
|
78
|
+
- [Percipio Theme](https://gamut.codecademy.com/?path=/docs-foundations-theme-percipio-theme--docs)
|
|
79
|
+
- [LX Studio Theme](https://gamut.codecademy.com/?path=/docs-foundations-theme-lx-studio-theme--docs)
|
|
80
|
+
- [Creating Themes](https://gamut.codecademy.com/?path=/docs-foundations-theme-creating-themes--docs) — authoring new themes in `gamut-styles`
|
|
81
|
+
- **Product design YAML** (root `DESIGN.md` from agent-tools): [`DESIGN.Codecademy.md`](../../DESIGN.Codecademy.md), [`DESIGN.Percipio.md`](../../DESIGN.Percipio.md), [`DESIGN.LXStudio.md`](../../DESIGN.LXStudio.md) — semantic ↔ palette for that product.
|
|
82
|
+
- **Source:** theme definitions in [`packages/gamut-styles/src/themes`](https://github.com/Codecademy/gamut/tree/main/packages/gamut-styles/src/themes), palette scales in [`packages/gamut-styles/src/variables`](https://github.com/Codecademy/gamut/tree/main/packages/gamut-styles/src/variables).
|
|
83
|
+
|
|
84
|
+
## Codecademy Core — illustrative light/dark hex only
|
|
85
|
+
|
|
86
|
+
The tables below are **not** valid for Percipio, LX Studio, or other themes. They are a quick mental model for Codecademy **Core** defaults only.
|
|
6
87
|
|
|
7
88
|
### Text
|
|
8
89
|
|
|
9
|
-
| Token
|
|
10
|
-
|
|
11
|
-
| `text`
|
|
12
|
-
| `text-accent`
|
|
13
|
-
| `text-secondary` | navy-800 75% | white 65% |
|
|
14
|
-
| `text-disabled`
|
|
90
|
+
| Token | Light | Dark |
|
|
91
|
+
| ---------------- | ------------ | --------- |
|
|
92
|
+
| `text` | `#10162F` | `#ffffff` |
|
|
93
|
+
| `text-accent` | `#0A0D1C` | `#FFF0E5` |
|
|
94
|
+
| `text-secondary` | navy-800 75% | white 65% |
|
|
95
|
+
| `text-disabled` | navy-800 63% | white 50% |
|
|
15
96
|
|
|
16
97
|
### Background
|
|
17
98
|
|
|
18
|
-
| Token
|
|
19
|
-
|
|
20
|
-
| `background`
|
|
21
|
-
| `background-primary`
|
|
22
|
-
| `background-contrast` | white
|
|
23
|
-
| `background-selected` | navy-800 4%
|
|
24
|
-
| `background-hover`
|
|
25
|
-
| `background-disabled` | navy-800 12% | white 9%
|
|
26
|
-
| `background-success`
|
|
27
|
-
| `background-warning`
|
|
28
|
-
| `background-error`
|
|
99
|
+
| Token | Light | Dark |
|
|
100
|
+
| --------------------- | ------------ | --------- |
|
|
101
|
+
| `background` | `#ffffff` | `#10162F` |
|
|
102
|
+
| `background-primary` | `#FFF0E5` | `#0A0D1C` |
|
|
103
|
+
| `background-contrast` | white | black |
|
|
104
|
+
| `background-selected` | navy-800 4% | white 4% |
|
|
105
|
+
| `background-hover` | navy-800 12% | white 9% |
|
|
106
|
+
| `background-disabled` | navy-800 12% | white 9% |
|
|
107
|
+
| `background-success` | `#F5FFE3` | `#151C07` |
|
|
108
|
+
| `background-warning` | `#FFFAE5` | `#211B00` |
|
|
109
|
+
| `background-error` | `#FBF1F0` | `#280503` |
|
|
29
110
|
|
|
30
111
|
### Interactive
|
|
31
112
|
|
|
32
|
-
| Token
|
|
33
|
-
|
|
34
|
-
| `primary`
|
|
35
|
-
| `primary-hover`
|
|
36
|
-
| `primary-inverse` | `#FFD300`
|
|
37
|
-
| `secondary`
|
|
38
|
-
| `secondary-hover` | navy-800 86% | white 80% |
|
|
39
|
-
| `interface`
|
|
40
|
-
| `interface-hover` | `#5533FF`
|
|
41
|
-
| `danger`
|
|
42
|
-
| `danger-hover`
|
|
113
|
+
| Token | Light | Dark |
|
|
114
|
+
| ----------------- | ------------ | --------- |
|
|
115
|
+
| `primary` | `#3A10E5` | `#FFD300` |
|
|
116
|
+
| `primary-hover` | `#5533FF` | `#CCA900` |
|
|
117
|
+
| `primary-inverse` | `#FFD300` | `#3A10E5` |
|
|
118
|
+
| `secondary` | `#10162F` | `#ffffff` |
|
|
119
|
+
| `secondary-hover` | navy-800 86% | white 80% |
|
|
120
|
+
| `interface` | `#3A10E5` | `#FFD300` |
|
|
121
|
+
| `interface-hover` | `#5533FF` | `#CCA900` |
|
|
122
|
+
| `danger` | `#E91C11` | `#E85D7F` |
|
|
123
|
+
| `danger-hover` | `#BE1809` | `#DC5879` |
|
|
43
124
|
|
|
44
125
|
### Border
|
|
45
126
|
|
|
46
|
-
| Token
|
|
47
|
-
|
|
48
|
-
| `border-primary`
|
|
49
|
-
| `border-secondary` | navy-800 75% | white 65% |
|
|
50
|
-
| `border-tertiary`
|
|
51
|
-
| `border-disabled`
|
|
127
|
+
| Token | Light | Dark |
|
|
128
|
+
| ------------------ | ------------ | --------- |
|
|
129
|
+
| `border-primary` | `#10162F` | `#ffffff` |
|
|
130
|
+
| `border-secondary` | navy-800 75% | white 65% |
|
|
131
|
+
| `border-tertiary` | navy-800 28% | white 20% |
|
|
132
|
+
| `border-disabled` | navy-800 63% | white 50% |
|
|
52
133
|
|
|
53
134
|
### Feedback
|
|
54
135
|
|
|
55
|
-
| Token
|
|
56
|
-
|
|
57
|
-
| `feedback-error`
|
|
58
|
-
| `feedback-success` | `#008A27` | `#AEE938` |
|
|
59
|
-
| `feedback-warning` | `#FFD300` | `#FFFAE5` |
|
|
136
|
+
| Token | Light | Dark |
|
|
137
|
+
| ------------------ | --------- | --------- |
|
|
138
|
+
| `feedback-error` | `#BE1809` | `#E85D7F` |
|
|
139
|
+
| `feedback-success` | `#008A27` | `#AEE938` |
|
|
140
|
+
| `feedback-warning` | `#FFD300` | `#FFFAE5` |
|
|
141
|
+
|
|
142
|
+
## Raw palette (Core-centric reference)
|
|
60
143
|
|
|
61
|
-
|
|
144
|
+
Raw tokens name **fixed** swatches (surfaces, illustration, `<Background bg="…">` on Codecademy). **Palette keys and hex vary by theme** — Percipio and others add or remap scales (`percipioPalette`, etc.). Confirm allowed keys in the active theme or `DESIGN.md` before using a raw token in a non-Core app.
|
|
62
145
|
|
|
63
|
-
|
|
146
|
+
For Codecademy Core defaults:
|
|
64
147
|
|
|
65
|
-
| Name
|
|
66
|
-
|
|
67
|
-
| `navy`
|
|
68
|
-
| `hyper`
|
|
69
|
-
| `yellow` | 0, 400, 500, 900
|
|
70
|
-
| `red`
|
|
71
|
-
| `green`
|
|
72
|
-
| `blue`
|
|
73
|
-
| `beige`
|
|
74
|
-
| `pink`
|
|
75
|
-
| `orange` | 100, 500
|
|
148
|
+
| Name | Weights | Key values (illustrative) |
|
|
149
|
+
| -------- | -------------------------- | -------------------------------- |
|
|
150
|
+
| `navy` | 100–900 | 800 = `#10162F`, 900 = `#0A0D1C` |
|
|
151
|
+
| `hyper` | 400, 500 | 500 = `#3A10E5`, 400 = `#5533FF` |
|
|
152
|
+
| `yellow` | 0, 400, 500, 900 | 500 = `#FFD300` |
|
|
153
|
+
| `red` | 0, 300, 400, 500, 600, 900 | 500 = `#E91C11` |
|
|
154
|
+
| `green` | 0, 100, 400, 700, 900 | 700 = `#008A27` |
|
|
155
|
+
| `blue` | 0, 100, 300, 400, 500, 800 | 500 = `#1557FF` |
|
|
156
|
+
| `beige` | — | `#FFF0E5` |
|
|
157
|
+
| `pink` | 0, 400 | 400 = `#F966FF` |
|
|
158
|
+
| `orange` | 100, 500 | 500 = `#FF8C00` |
|
|
76
159
|
|
|
77
|
-
Named shorthand aliases: `beige`, `blue`, `green`, `hyper`, `navy`, `orange`, `pink`, `red`, `yellow`, `black`, `white`
|
|
160
|
+
Named shorthand aliases commonly used on Core surfaces: `beige`, `blue`, `green`, `hyper`, `navy`, `orange`, `pink`, `red`, `yellow`, `black`, `white`
|
|
78
161
|
|
|
79
162
|
## Decision guide
|
|
80
163
|
|
|
81
164
|
```
|
|
165
|
+
Which product theme is GamutProvider using?
|
|
166
|
+
└─ Unknown → check setup.md / DESIGN.md / Storybook theme page before assuming hex or palette name
|
|
167
|
+
|
|
82
168
|
Coloring UI text or backgrounds?
|
|
83
|
-
└─
|
|
84
|
-
└─ Must
|
|
85
|
-
└─
|
|
169
|
+
└─ Must adapt to light/dark OR theme? → semantic alias (text, background, primary, …)
|
|
170
|
+
└─ Must stay fixed regardless of mode? → raw palette token (confirm key exists in that theme)
|
|
171
|
+
└─ Section background with content inside? → <Background bg="…"> (see modes.md)
|
|
86
172
|
```
|
|
@@ -11,7 +11,7 @@ Gamut is the Codecademy / Skillsoft design system — React component library (`
|
|
|
11
11
|
- Mobile-first, 12-column grid
|
|
12
12
|
- Semantic color tokens guarantee WCAG AA contrast automatically
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
**ColorMode in product UI:** Use `<ColorMode>` and `<Background>` from `@codecademy/gamut-styles` for scoped light/dark and contrast-safe surfaces — see [foundations/modes.md](foundations/modes.md) and the `gamut-color-mode` skill. Storybook: [ColorMode](https://gamut.codecademy.com/?path=/docs-foundations-colormode--page), [Best practices](https://gamut.codecademy.com/?path=/docs-meta-best-practices--page) (semantic tokens + `css` / `variant` / `states`).
|
|
15
15
|
|
|
16
16
|
## Themes
|
|
17
17
|
|
|
@@ -27,12 +27,12 @@ Set the theme at the app root via `<GamutProvider theme={...}>`.
|
|
|
27
27
|
|
|
28
28
|
## Reading order
|
|
29
29
|
|
|
30
|
-
| File | What it covers
|
|
31
|
-
| ------------------------------------------------------ |
|
|
32
|
-
| [setup.md](setup.md) | Packages, GamutProvider, theme selection
|
|
33
|
-
| [foundations/color.md](foundations/color.md) | Semantic
|
|
34
|
-
| [foundations/modes.md](foundations/modes.md) | Light/dark ColorMode, Background component
|
|
35
|
-
| [foundations/typography.md](foundations/typography.md) | Typefaces, font scale, rules
|
|
36
|
-
| [foundations/spacing.md](foundations/spacing.md) | Spacing, border radius, responsive grid
|
|
37
|
-
| [components/overview.md](components/overview.md) | Full component catalog
|
|
38
|
-
| [components/buttons.md](components/buttons.md) | Button variants, props, decision tree
|
|
30
|
+
| File | What it covers |
|
|
31
|
+
| ------------------------------------------------------ | ----------------------------------------------------------------------- |
|
|
32
|
+
| [setup.md](setup.md) | Packages, GamutProvider, theme selection |
|
|
33
|
+
| [foundations/color.md](foundations/color.md) | Semantic roles (all themes), where to verify hex, Core-only cheatsheets |
|
|
34
|
+
| [foundations/modes.md](foundations/modes.md) | Light/dark ColorMode, Background component |
|
|
35
|
+
| [foundations/typography.md](foundations/typography.md) | Typefaces, font scale, rules |
|
|
36
|
+
| [foundations/spacing.md](foundations/spacing.md) | Spacing, border radius, responsive grid |
|
|
37
|
+
| [components/overview.md](components/overview.md) | Full component catalog |
|
|
38
|
+
| [components/buttons.md](components/buttons.md) | Button variants, props, decision tree |
|
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.6.1-alpha.
|
|
4
|
+
"version": "68.6.1-alpha.d52035.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.
|
|
9
|
-
"@codecademy/gamut-illustrations": "0.58.12-alpha.
|
|
10
|
-
"@codecademy/gamut-patterns": "0.10.31-alpha.
|
|
11
|
-
"@codecademy/gamut-styles": "18.0.1-alpha.
|
|
12
|
-
"@codecademy/variance": "0.26.2-alpha.
|
|
8
|
+
"@codecademy/gamut-icons": "9.57.6-alpha.d52035.0",
|
|
9
|
+
"@codecademy/gamut-illustrations": "0.58.12-alpha.d52035.0",
|
|
10
|
+
"@codecademy/gamut-patterns": "0.10.31-alpha.d52035.0",
|
|
11
|
+
"@codecademy/gamut-styles": "18.0.1-alpha.d52035.0",
|
|
12
|
+
"@codecademy/variance": "0.26.2-alpha.d52035.0",
|
|
13
13
|
"@formatjs/intl-locale": "5.3.1",
|
|
14
14
|
"@react-aria/interactions": "3.25.0",
|
|
15
15
|
"@types/marked": "^4.0.8",
|