datocms-react-ui 2.2.0-alpha.1 → 2.2.0-alpha.3

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 (81) hide show
  1. package/dist/cjs/Button/styles.module.css.json +1 -1
  2. package/dist/cjs/ButtonGroup/Button/styles.module.css.json +1 -1
  3. package/dist/cjs/Canvas/index.js +523 -367
  4. package/dist/cjs/Canvas/index.js.map +1 -1
  5. package/dist/cjs/Canvas/styles.module.css.json +1 -1
  6. package/dist/cjs/Dropdown/styles.module.css.json +1 -1
  7. package/dist/cjs/FieldError/styles.module.css.json +1 -1
  8. package/dist/cjs/FormLabel/styles.module.css.json +1 -1
  9. package/dist/cjs/HotKey/styles.module.css.json +1 -1
  10. package/dist/cjs/Section/index.js +7 -6
  11. package/dist/cjs/Section/index.js.map +1 -1
  12. package/dist/cjs/Section/styles.module.css.json +1 -1
  13. package/dist/cjs/SelectInput/index.js +12 -12
  14. package/dist/cjs/SelectInput/index.js.map +1 -1
  15. package/dist/cjs/SplitView/SplitViewSash/styles.module.css.json +1 -1
  16. package/dist/cjs/TextInput/styles.module.css.json +1 -1
  17. package/dist/cjs/TextareaInput/styles.module.css.json +1 -1
  18. package/dist/cjs/Tooltip/TooltipContent/styles.module.css.json +1 -1
  19. package/dist/cjs/generateStyleFromCtx/index.js +1 -1
  20. package/dist/cjs/generateStyleFromCtx/index.js.map +1 -1
  21. package/dist/esm/Button/styles.module.css.json +1 -1
  22. package/dist/esm/ButtonGroup/Button/styles.module.css.json +1 -1
  23. package/dist/esm/Canvas/index.d.ts +501 -367
  24. package/dist/esm/Canvas/index.js +523 -367
  25. package/dist/esm/Canvas/index.js.map +1 -1
  26. package/dist/esm/Canvas/styles.module.css.json +1 -1
  27. package/dist/esm/Dropdown/styles.module.css.json +1 -1
  28. package/dist/esm/FieldError/styles.module.css.json +1 -1
  29. package/dist/esm/FormLabel/styles.module.css.json +1 -1
  30. package/dist/esm/HotKey/styles.module.css.json +1 -1
  31. package/dist/esm/Section/index.js +7 -6
  32. package/dist/esm/Section/index.js.map +1 -1
  33. package/dist/esm/Section/styles.module.css.json +1 -1
  34. package/dist/esm/SelectInput/index.js +12 -12
  35. package/dist/esm/SelectInput/index.js.map +1 -1
  36. package/dist/esm/SplitView/SplitViewSash/styles.module.css.json +1 -1
  37. package/dist/esm/TextInput/styles.module.css.json +1 -1
  38. package/dist/esm/TextareaInput/styles.module.css.json +1 -1
  39. package/dist/esm/Tooltip/TooltipContent/styles.module.css.json +1 -1
  40. package/dist/esm/generateStyleFromCtx/index.js +1 -1
  41. package/dist/esm/generateStyleFromCtx/index.js.map +1 -1
  42. package/dist/types/Canvas/index.d.ts +501 -367
  43. package/package.json +3 -3
  44. package/src/Button/styles.module.css +3 -3
  45. package/src/Button/styles.module.css.json +1 -1
  46. package/src/ButtonGroup/Button/styles.module.css +5 -5
  47. package/src/ButtonGroup/Button/styles.module.css.json +1 -1
  48. package/src/Canvas/index.tsx +526 -367
  49. package/src/Canvas/styles.module.css +4 -4
  50. package/src/Canvas/styles.module.css.json +1 -1
  51. package/src/Dropdown/styles.module.css +6 -6
  52. package/src/Dropdown/styles.module.css.json +1 -1
  53. package/src/FieldError/styles.module.css +1 -1
  54. package/src/FieldError/styles.module.css.json +1 -1
  55. package/src/FormLabel/styles.module.css +1 -1
  56. package/src/FormLabel/styles.module.css.json +1 -1
  57. package/src/HotKey/styles.module.css +1 -1
  58. package/src/HotKey/styles.module.css.json +1 -1
  59. package/src/Section/index.tsx +17 -16
  60. package/src/Section/styles.module.css +35 -29
  61. package/src/Section/styles.module.css.json +1 -1
  62. package/src/SelectInput/index.tsx +12 -12
  63. package/src/SplitView/SplitViewSash/styles.module.css +1 -1
  64. package/src/SplitView/SplitViewSash/styles.module.css.json +1 -1
  65. package/src/TextInput/styles.module.css +4 -4
  66. package/src/TextInput/styles.module.css.json +1 -1
  67. package/src/TextareaInput/styles.module.css +4 -4
  68. package/src/TextareaInput/styles.module.css.json +1 -1
  69. package/src/Toolbar/Badge/styles.module.css.json +5 -0
  70. package/src/Toolbar/DotsDropdown/styles.module.css.json +4 -0
  71. package/src/Toolbar/GoBack/styles.module.css.json +1 -0
  72. package/src/Toolbar/Pagination/styles.module.css.json +1 -0
  73. package/src/Toolbar/PrimaryButton/styles.module.css.json +5 -0
  74. package/src/Toolbar/Space/styles.module.css.json +1 -0
  75. package/src/Toolbar/Subtitle/styles.module.css.json +1 -0
  76. package/src/Tooltip/TooltipContent/styles.module.css +3 -2
  77. package/src/Tooltip/TooltipContent/styles.module.css.json +1 -1
  78. package/src/base.css +17 -0
  79. package/src/generateStyleFromCtx/index.ts +2 -2
  80. package/styles.css +1 -1
  81. package/types.json +452 -382
package/dist/cjs/Canvas/index.js CHANGED
@@ -42,397 +42,531 @@ function useCtx() {
42
42
  }
43
43
  exports.useCtx = useCtx;
44
44
  /**
45
- * @example Semantic color token CSS variables
45
+ * @example Colors
46
46
  *
47
- * Inside `Canvas`, the host exposes a full semantic color palette as CSS
48
- * custom properties. Components should reference these tokens directly —
49
- * they adapt to the user's active theme (including dark mode)
50
- * automatically.
47
+ * A full semantic color palette is exposed inside `Canvas` as `--color--*` CSS variables.
51
48
  *
52
- * ### How to read a token name
49
+ * Regarding dark mode, `ctx.colorScheme` resolves to `'light'` or `'dark'`. The SDK runtime also sets `data-color-scheme` on `<html>` so selectors like `[data-color-scheme="dark"] {…}` work out of the box.
53
50
  *
54
- * ```
55
- * --color--{property} // standalone (one -- after color)
56
- * --color--{context}--{property} // context pair (two -- after color)
51
+ * #### Token name shape
52
+ *
53
+ * Tokens follow one of two name shapes:
54
+ *
55
+ * | Shape | Meaning |
56
+ * | --- | --- |
57
+ * | `--color--{property}` | standalone (one `--` after color) |
58
+ * | `--color--{context}--{property}` | context pair (two `--` after color) |
59
+ *
60
+ * **Properties** are the role a color plays:
61
+ *
62
+ * | Property | Role |
63
+ * | --- | --- |
64
+ * | `surface` | backgrounds |
65
+ * | `ink` | text and icons |
66
+ * | `border` | 1px lines |
67
+ * | `outline` | focus rings and block-level rings |
68
+ * | `fill` / `track` | indicator fills and their backgrounds |
69
+ *
70
+ * **Standalone tokens** are for neutral page chrome; use them by default. Elevated neutral surfaces (modals, dropdowns, popovers) are standalone too, with hover and active variants for the raised layer. Pair them with the standalone ink tokens.
71
+ *
72
+ * **Context tokens** describe a self-contained mini-environment (a primary CTA, a danger button). Contexts come in two shapes:
73
+ *
74
+ * 1. **Ink-owning contexts**: signal contexts (primary, primary-soft, danger, danger-soft, warning-soft, success-soft, selected) and dark/inverted elevation contexts (overlay, backdrop, stacked, tooltip, code). Each defines an ink balanced on its own surface, so always pair surface and ink from the *same* context.
75
+ * 2. **Single-property contexts**: focus (outline/border), progress (fill/track), highlight (surface), scrollbar (fill). Not surface+ink environments; the pairing rule doesn't apply.
76
+ *
77
+ * > [!WARNING] Never cross ink-owning contexts
78
+ * > Don't put a primary ink on a danger surface, or a danger-soft surface under a warning-soft ink. Each ink-owning context is contrast-balanced as a unit, and mixing produces illegible combinations, especially in dark mode.
79
+ *
80
+ * #### Defining custom colors
81
+ *
82
+ * Reserve custom colors for things genuinely outside the design system, such as brand illustrations, data-viz palettes, vendor-specific UI. Most needs ("primary button color", "error state") are already covered by tokens. When a custom color is justified, define it once per theme using the `[data-color-scheme="dark"]` selector that the SDK already sets:
83
+ *
84
+ * ```css
85
+ * .my-plugin {
86
+ * --my-brand: #4a90e2;
87
+ * }
88
+ *
89
+ * [data-color-scheme="dark"] .my-plugin {
90
+ * --my-brand: #6aa9ec;
91
+ * }
92
+ *
93
+ * .my-plugin__cta {
94
+ * background: var(--my-brand);
95
+ * color: var(--color--primary--ink);
96
+ * }
57
97
  * ```
58
98
  *
59
- * **Properties** — `surface` (backgrounds), `ink` (text/icons),
60
- * `border` (1px lines), `outline` (focus rings), plus `fill` / `track`
61
- * for progress bars.
99
+ * For non-CSS branching (image sources, third-party widget themes, syntax-highlighting presets), branch on `ctx.colorScheme` directly, e.g. `<img src={ctx.colorScheme === 'dark' ? logoDark : logoLight} />`. On modern browsers, the CSS `light-dark()` function is a more concise alternative to the per-theme variable pattern above.
62
100
  *
63
- * **Standalone** tokens work on any neutral page. **Contexts** are
64
- * self-contained environments: always pair a `surface` with the `ink`,
65
- * `border`, and hover states from the *same* context. Never mix — e.g.
66
- * don't put `--color--primary--ink` on `--color--danger--surface`.
101
+ * #### Available tokens
67
102
  *
68
- * Non-color tokens `--shadow--raised` / `--shadow--floating` /
69
- * `--shadow--lifted` / `--shadow--ambient` are ready-made `box-shadow`
70
- * composites.
103
+ * A swatch for every available token, grouped by context.
71
104
  *
72
105
  * ```js
73
106
  * <Canvas ctx={ctx}>
74
- * <Section title="Standalone — use on any neutral page">
75
- * <table><tbody>
76
- * {[
77
- * ['--color--surface', 'Default page background'],
78
- * ['--color--surface-hover', 'Hovered row / list item'],
79
- * ['--color--surface-muted', 'Muted section / card background'],
80
- * ['--color--ink', 'Primary text'],
81
- * ['--color--ink-subtle', 'Secondary text / captions'],
82
- * ['--color--ink-hover', 'Text under hover'],
83
- * ['--color--ink-muted', 'De-emphasized text'],
84
- * ['--color--ink-placeholder', 'Input placeholder text'],
85
- * ['--color--ink-primary', 'Brand-highlighted text / icons'],
86
- * ['--color--ink-accent', 'Links / accent text'],
87
- * ['--color--ink-disabled', 'Disabled text'],
88
- * ['--color--border', 'Default 1px border'],
89
- * ['--color--border-hover', 'Border under hover'],
90
- * ].map(([t, d]) => (
91
- * <tr key={t}>
92
- * <td><code>{t}</code></td>
93
- * <td style={{ color: 'var(--color--ink-subtle)' }}>{d}</td>
94
- * <td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td>
95
- * </tr>
96
- * ))}
97
- * </tbody></table>
98
- * </Section>
99
- *
100
- * <Section title="Context: raised — modals, dropdowns, popovers">
101
- * <table><tbody>
102
- * {['--color--raised--surface', '--color--raised--surface-hover', '--color--raised--surface-active']
103
- * .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
104
- * </tbody></table>
105
- * </Section>
106
- *
107
- * <Section title="Context: primary — main call-to-action buttons, badges, nav">
108
- * <table><tbody>
109
- * {['--color--primary--surface', '--color--primary--surface-hover', '--color--primary--surface-active', '--color--primary--surface-muted', '--color--primary--ink', '--color--primary--border']
110
- * .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
111
- * </tbody></table>
112
- * </Section>
113
- *
114
- * <Section title="Context: tinted — subtle brand-tinted surfaces">
115
- * <table><tbody>
116
- * {['--color--tinted--surface', '--color--tinted--surface-hover', '--color--tinted--surface-active', '--color--tinted--ink', '--color--tinted--border']
117
- * .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
118
- * </tbody></table>
119
- * </Section>
120
- *
121
- * <Section title="Context: accent, selected, disabled, danger">
122
- * <table><tbody>
123
- * {['--color--accent--surface', '--color--accent--ink',
124
- * '--color--selected--surface', '--color--selected--ink', '--color--selected--border',
125
- * '--color--disabled--surface', '--color--disabled--ink',
126
- * '--color--danger--surface', '--color--danger--ink']
127
- * .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
128
- * </tbody></table>
129
- * </Section>
130
- *
131
- * <Section title="Context: focus — focus rings and outlines">
132
- * <table><tbody>
133
- * {['--color--focus--border', '--color--focus--outline']
134
- * .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
135
- * </tbody></table>
136
- * </Section>
137
- *
138
- * <Section title="Feedback — validation and form states">
139
- * <table><tbody>
140
- * {['--color--feedback-fail--ink', '--color--feedback-fail--border', '--color--feedback-fail--outline', '--color--feedback-fail--surface',
141
- * '--color--feedback-warning--ink', '--color--feedback-warning--border', '--color--feedback-warning--outline', '--color--feedback-warning--surface',
142
- * '--color--feedback-success--ink', '--color--feedback-success--border', '--color--feedback-success--outline', '--color--feedback-success--surface']
143
- * .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
144
- * </tbody></table>
145
- * </Section>
146
- *
147
- * <Section title="Context: highlight — rich text inline highlights">
148
- * <table><tbody>
149
- * {['--color--highlight--surface']
150
- * .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
151
- * </tbody></table>
152
- * </Section>
153
- *
154
- * <Section title="Diffs — content versioning (added / removed / changed)">
155
- * <table><tbody>
156
- * {['--color--diff-added--surface', '--color--diff-added--outline', '--color--diff-added--ink', '--color--diff-added--ink-subtle',
157
- * '--color--diff-removed--surface', '--color--diff-removed--outline', '--color--diff-removed--ink', '--color--diff-removed--ink-subtle',
158
- * '--color--diff-changed--surface', '--color--diff-changed--outline']
159
- * .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
160
- * </tbody></table>
161
- * </Section>
162
- *
163
- * <Section title="Status — publishing workflow badges (ink-only)">
164
- * <table><tbody>
165
- * {['--color--status-draft--ink', '--color--status-outdated--ink', '--color--status-published--ink']
166
- * .map((t) => (<tr key={t}><td><code>{t}</code></td><td><span style={{ color: `var(${t})`, fontWeight: 'bold' }}>Sample text</span></td></tr>))}
167
- * </tbody></table>
168
- * </Section>
169
- *
170
- * <Section title="Backdrop & overlay — scrims and floating UI">
171
- * <table><tbody>
172
- * {['--color--backdrop--surface', '--color--backdrop--ink',
173
- * '--color--overlay--surface', '--color--overlay--surface-hover', '--color--overlay--surface-active', '--color--overlay--ink']
174
- * .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
175
- * </tbody></table>
176
- * </Section>
177
- *
178
- * <Section title="Stacked — dark layered UI (uploaders, media players)">
179
- * <p>Stacked gives you layered dark surfaces (base → upper) plus action buttons, borders and ink tones. Use it when a dark inline panel needs internal hierarchy.</p>
180
- * <table><tbody>
181
- * {['--color--stacked--surface', '--color--stacked--surface-upper',
182
- * '--color--stacked--surface-action', '--color--stacked--surface-action-hover', '--color--stacked--surface-action-active',
183
- * '--color--stacked--ink', '--color--stacked--ink-subtle', '--color--stacked--border']
184
- * .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
185
- * </tbody></table>
186
- * </Section>
187
- *
188
- * <Section title="Progress — bar track and fill">
189
- * <table><tbody>
190
- * {['--color--progress--track', '--color--progress--fill', '--color--progress--fill-hover']
191
- * .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
192
- * </tbody></table>
193
- * </Section>
194
- *
195
- * <Section title="Tooltip — small dark floating labels">
196
- * <table><tbody>
197
- * {['--color--tooltip--surface', '--color--tooltip--surface-hover', '--color--tooltip--ink', '--color--tooltip--ink-subtle']
198
- * .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
199
- * </tbody></table>
200
- * </Section>
201
- *
202
- * <Section title="Code — dark code blocks, logs, error traces">
203
- * <table><tbody>
204
- * {['--color--code--surface', '--color--code--ink']
205
- * .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
206
- * </tbody></table>
207
- * </Section>
208
- *
209
- * <Section title="Scrollbar">
210
- * <table><tbody>
211
- * {['--color--scrollbar--fill']
212
- * .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
213
- * </tbody></table>
214
- * </Section>
215
- *
216
- * <Section title="Shadow composites — drop-in box-shadow values">
217
- * <div style={{ display: 'flex', gap: 'var(--spacing-l)', padding: 'var(--spacing-l)' }}>
218
- * {['--shadow--raised', '--shadow--floating', '--shadow--lifted', '--shadow--ambient'].map((t) => (
219
- * <div key={t} style={{ textAlign: 'center' }}>
220
- * <div style={{ width: '80px', height: '80px', background: 'var(--color--surface)', borderRadius: '4px', boxShadow: `var(${t})` }} />
221
- * <code style={{ display: 'block', marginTop: 'var(--spacing-s)', fontSize: 'var(--font-size-xs)' }}>{t}</code>
222
- * </div>
223
- * ))}
224
- * </div>
225
- * </Section>
107
+ * <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-l)' }}>
108
+ * <StateManager initial={true}>
109
+ * {(isOpen, setOpen) => (
110
+ * <Section
111
+ * title="Standalone"
112
+ * collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
113
+ * >
114
+ * <p>
115
+ * One-level tokens that work on any neutral page. The <code>surface</code>, <code>ink</code> and <code>border</code> families cover the page background, body text and dividers; the <code>surface-raised</code> variants belong to the elevated layer used by modals, dropdowns and popovers. The tone-on-neutral inks (<code>ink-danger</code>, <code>ink-warning</code>, <code>ink-success</code>) color text and icons on a neutral surface; inside a toned panel use that context's own ink instead.
116
+ * </p>
117
+ * <Swatches
118
+ * tokens={[
119
+ * ['--color--surface', 'Page background everything else sits on'],
120
+ * ['--color--surface-hover', 'Hovered row inside lists and tables'],
121
+ * ['--color--surface-muted', 'Background of muted section panels and quiet cards'],
122
+ * ['--color--surface-raised', 'Elevated layer for modals, dropdowns and popovers'],
123
+ * ['--color--surface-raised-hover', 'Hovered option inside a dropdown menu'],
124
+ * ['--color--surface-raised-active', 'Focused or pressed option inside a dropdown menu'],
125
+ * ['--color--ink', 'Primary body text'],
126
+ * ['--color--ink-subtle', 'Secondary text, captions, helper labels'],
127
+ * ['--color--ink-hover', 'Toolbar icon and link fill on hover'],
128
+ * ['--color--ink-muted', 'Deemphasized text that should recede'],
129
+ * ['--color--ink-placeholder', 'Empty-input placeholder text'],
130
+ * ['--color--ink-primary', 'Theme-colored text and icons for branded labels'],
131
+ * ['--color--ink-link', 'Inline links and accent text'],
132
+ * ['--color--ink-danger', 'Error text or icon on a neutral surface'],
133
+ * ['--color--ink-warning', 'Warning text or icon on a neutral surface'],
134
+ * ['--color--ink-success', 'Success text or icon on a neutral surface'],
135
+ * ['--color--ink-disabled', 'Label color on disabled inputs and buttons'],
136
+ * ['--color--border', 'Default 1px divider between cards, rows and sections'],
137
+ * ['--color--border-hover', 'Border of an input or card when hovered'],
138
+ * ]}
139
+ * />
140
+ * </Section>
141
+ * )}
142
+ * </StateManager>
143
+ *
144
+ * <StateManager initial={false}>
145
+ * {(isOpen, setOpen) => (
146
+ * <Section
147
+ * title="Context: primary"
148
+ * collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
149
+ * >
150
+ * <p>
151
+ * The project's brand hue (the color the user picked for their DatoCMS project) at full strength. Reach for it on the main call-to-action button on a page, and on badges or navigation bars that need to stand out. The <code>surface-secondary</code> variant is a quieter brand surface step (for accent badges and inline action chips) that keeps the same white <code>ink</code>.
152
+ * </p>
153
+ * <Swatches
154
+ * tokens={[
155
+ * ['--color--primary--surface', 'Resting background of a primary call-to-action button'],
156
+ * ['--color--primary--surface-hover', 'Hovered primary button background'],
157
+ * ['--color--primary--surface-active', 'Pressed primary button background'],
158
+ * ['--color--primary--surface-muted', 'Muted variant of the primary surface'],
159
+ * ['--color--primary--surface-secondary', 'Quieter brand surface for accent badges and inline chips'],
160
+ * ['--color--primary--ink', 'Text and icon color sitting on any primary surface'],
161
+ * ['--color--primary--border', 'Thin border drawn on top of a primary surface'],
162
+ * ]}
163
+ * />
164
+ * </Section>
165
+ * )}
166
+ * </StateManager>
167
+ *
168
+ * <StateManager initial={false}>
169
+ * {(isOpen, setOpen) => (
170
+ * <Section
171
+ * title="Context: primary-soft"
172
+ * collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
173
+ * >
174
+ * <p>
175
+ * A soft panel in the same project brand hue: a pale brand surface paired with saturated brand ink. Quieter than primary, still clearly on-brand, for secondary actions, chips and tinted callouts.
176
+ * </p>
177
+ * <Swatches
178
+ * tokens={[
179
+ * ['--color--primary-soft--surface', 'Resting background of secondary brand-tinted buttons'],
180
+ * ['--color--primary-soft--surface-hover', 'Hovered tinted button background'],
181
+ * ['--color--primary-soft--surface-active', 'Pressed tinted button background'],
182
+ * ['--color--primary-soft--ink', 'Text and icon color on a soft brand surface'],
183
+ * ['--color--primary-soft--border', 'Thin border drawn on top of a soft brand surface'],
184
+ * ]}
185
+ * />
186
+ * </Section>
187
+ * )}
188
+ * </StateManager>
189
+ *
190
+ * <StateManager initial={false}>
191
+ * {(isOpen, setOpen) => (
192
+ * <Section
193
+ * title="Context: selected"
194
+ * collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
195
+ * >
196
+ * <p>
197
+ * The active selection state: the highlighted entry in a list or tree, the currently picked option in a radio or choice group, the chosen card in a gallery.
198
+ * </p>
199
+ * <Swatches
200
+ * tokens={[
201
+ * ['--color--selected--surface', 'Background of the currently active entry in a list or tree'],
202
+ * ['--color--selected--surface-hover', 'Hover on an entry that is already selected'],
203
+ * ['--color--selected--ink', 'Text and icon color inside the selected entry'],
204
+ * ['--color--selected--border', 'Border or outline ring drawn around a selected option or card'],
205
+ * ]}
206
+ * />
207
+ * </Section>
208
+ * )}
209
+ * </StateManager>
210
+ *
211
+ * <StateManager initial={false}>
212
+ * {(isOpen, setOpen) => (
213
+ * <Section
214
+ * title="Context: disabled"
215
+ * collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
216
+ * >
217
+ * <p>
218
+ * The flat, low-contrast pair applied to non-interactive controls: disabled buttons, disabled selects and disabled toggles.
219
+ * </p>
220
+ * <PairSwatches
221
+ * tokens={[
222
+ * ['--color--disabled--surface', '--color--disabled--ink', 'Disabled button or control: muted background with low-contrast label'],
223
+ * ]}
224
+ * />
225
+ * </Section>
226
+ * )}
227
+ * </StateManager>
228
+ *
229
+ * <StateManager initial={false}>
230
+ * {(isOpen, setOpen) => (
231
+ * <Section
232
+ * title="Context: danger"
233
+ * collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
234
+ * >
235
+ * <p>
236
+ * Reserved for destructive actions, such as Delete, Remove or Reset operations.
237
+ * </p>
238
+ * <PairSwatches
239
+ * tokens={[
240
+ * ['--color--danger--surface', '--color--danger--ink', 'Destructive action button: vivid red surface with white label'],
241
+ * ]}
242
+ * />
243
+ * </Section>
244
+ * )}
245
+ * </StateManager>
246
+ *
247
+ * <StateManager initial={false}>
248
+ * {(isOpen, setOpen) => (
249
+ * <Section
250
+ * title="Context: focus"
251
+ * collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
252
+ * >
253
+ * <p>
254
+ * The keyboard-focus ring drawn around inputs, buttons and any other focusable control. Pair <code>border</code> on the element itself with <code>outline</code> as a soft halo.
255
+ * </p>
256
+ * <Swatches
257
+ * tokens={[
258
+ * ['--color--focus--border', 'Border color of the focused element'],
259
+ * ['--color--focus--outline', 'Soft outline ring drawn around the focused element'],
260
+ * ]}
261
+ * />
262
+ * </Section>
263
+ * )}
264
+ * </StateManager>
265
+ *
266
+ * <StateManager initial={false}>
267
+ * {(isOpen, setOpen) => (
268
+ * <Section
269
+ * title="Signal tones"
270
+ * collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
271
+ * >
272
+ * <p>
273
+ * Soft panels for validation states and notifications: red for failures, amber for warnings, green for successes. Each <code>-soft</code> context is a pale surface paired with saturated ink, following the same four-property shape (surface, ink, border, outline), so you can swap the tone without touching layout. For a colored message on a plain neutral surface, reach for the standalone <code>ink-danger</code>, <code>ink-warning</code> and <code>ink-success</code> instead.
274
+ * </p>
275
+ * <Swatches
276
+ * tokens={[
277
+ * ['--color--danger-soft--surface', 'Background of error banners and alert toasts'],
278
+ * ['--color--danger-soft--ink', 'Error message text and the icon inside an error panel'],
279
+ * ['--color--danger-soft--border', 'Border around an invalid input or alert toast'],
280
+ * ['--color--danger-soft--outline', 'Soft halo around an invalid field on focus'],
281
+ * ['--color--warning-soft--surface', 'Background of warning banners and plugin notices'],
282
+ * ['--color--warning-soft--ink', 'Text inside warning banners and warning toasts'],
283
+ * ['--color--warning-soft--border', 'Border around warning banners and modified-state pills'],
284
+ * ['--color--warning-soft--outline', 'Soft halo for warning emphasis'],
285
+ * ['--color--success-soft--surface', 'Background of success toasts'],
286
+ * ['--color--success-soft--ink', 'Text inside success toasts and success banners'],
287
+ * ['--color--success-soft--border', 'Border around success banners'],
288
+ * ['--color--success-soft--outline', 'Soft halo for success emphasis'],
289
+ * ]}
290
+ * />
291
+ * </Section>
292
+ * )}
293
+ * </StateManager>
294
+ *
295
+ * <StateManager initial={false}>
296
+ * {(isOpen, setOpen) => (
297
+ * <Section
298
+ * title="Context: highlight"
299
+ * collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
300
+ * >
301
+ * <p>
302
+ * The yellow marker pen for inline rich-text highlights inside Structured Text editors.
303
+ * </p>
304
+ * <Swatches
305
+ * tokens={[
306
+ * ['--color--highlight--surface', 'Background of a highlighted span inside a rich text editor'],
307
+ * ]}
308
+ * />
309
+ * </Section>
310
+ * )}
311
+ * </StateManager>
312
+ *
313
+ * <StateManager initial={false}>
314
+ * {(isOpen, setOpen) => (
315
+ * <Section
316
+ * title="Diffs"
317
+ * collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
318
+ * >
319
+ * <p>
320
+ * Content-versioning palette across three intents: green for added, red for removed, blue for changed. Inline text diffs use the surface tint; block-level revision panels use the outline. For positive/negative rule indicators, the left-border tone depends on whether the rule was just edited: a subtle ink when stable, a vivid one when freshly changed. The changed variant has no ink stops, since rule borders are only ever green or red.
321
+ * </p>
322
+ * <Swatches
323
+ * tokens={[
324
+ * ['--color--diff-added--surface', 'Background of inline added text inside a text diff'],
325
+ * ['--color--diff-added--outline', 'Outline drawn around a block-level added revision panel'],
326
+ * ['--color--diff-added--ink', 'Left-border color of a positive rule when it was recently changed (vivid)'],
327
+ * ['--color--diff-added--ink-subtle', 'Left-border color of a positive rule when it was not recently changed'],
328
+ * ['--color--diff-removed--surface', 'Background of inline removed text inside a text diff'],
329
+ * ['--color--diff-removed--outline', 'Outline drawn around a block-level removed revision panel'],
330
+ * ['--color--diff-removed--ink', 'Left-border color of a negative rule when it was recently changed (vivid)'],
331
+ * ['--color--diff-removed--ink-subtle', 'Left-border color of a negative rule when it was not recently changed'],
332
+ * ['--color--diff-changed--surface', 'Background of inline changed text inside a text diff'],
333
+ * ['--color--diff-changed--outline', 'Outline drawn around a block-level changed revision panel'],
334
+ * ]}
335
+ * />
336
+ * </Section>
337
+ * )}
338
+ * </StateManager>
339
+ *
340
+ * <StateManager initial={false}>
341
+ * {(isOpen, setOpen) => (
342
+ * <Section
343
+ * title="Status"
344
+ * collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
345
+ * >
346
+ * <p>
347
+ * Publishing-workflow status dots. Ink-only because the colored dot is the whole marker, no surface or border needed.
348
+ * </p>
349
+ * <Swatches
350
+ * tokens={[
351
+ * ['--color--status-draft--ink', 'Dot color for records that exist only as a draft'],
352
+ * ['--color--status-outdated--ink', 'Dot color for published records with unpublished changes'],
353
+ * ['--color--status-published--ink', 'Dot color for fully published records'],
354
+ * ]}
355
+ * />
356
+ * </Section>
357
+ * )}
358
+ * </StateManager>
359
+ *
360
+ * <StateManager initial={false}>
361
+ * {(isOpen, setOpen) => (
362
+ * <Section
363
+ * title="Backdrop and overlay"
364
+ * collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
365
+ * >
366
+ * <p>
367
+ * Two scrims for two jobs. The backdrop is the full-screen dim painted behind a modal dialog. The overlay is the lighter scrim that sits on top of media or thumbnails and hosts reversed buttons designed to read against dark imagery.
368
+ * </p>
369
+ * <PairSwatches
370
+ * tokens={[
371
+ * ['--color--backdrop--surface', '--color--backdrop--ink', 'Full-screen modal dim with icon color for close controls'],
372
+ * ]}
373
+ * />
374
+ * <Swatches
375
+ * tokens={[
376
+ * ['--color--overlay--surface', 'Scrim painted over media thumbnails and image cards'],
377
+ * ['--color--overlay--surface-hover', 'Hover background of a reversed button floating on dark media'],
378
+ * ['--color--overlay--surface-active', 'Pressed background of a reversed button on dark media'],
379
+ * ['--color--overlay--ink', 'Text and icon color inside reversed buttons on overlay surfaces'],
380
+ * ]}
381
+ * />
382
+ * </Section>
383
+ * )}
384
+ * </StateManager>
385
+ *
386
+ * <StateManager initial={false}>
387
+ * {(isOpen, setOpen) => (
388
+ * <Section
389
+ * title="Stacked"
390
+ * collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
391
+ * >
392
+ * <p>
393
+ * Layered dark inline areas, the kind used for asset uploaders and audio/video players. The wrapper paints the base surface; an inner detail panel sits a layer up; transparent action buttons gain visibility on hover and press.
394
+ * </p>
395
+ * <Swatches
396
+ * tokens={[
397
+ * ['--color--stacked--surface', 'Base layer of a dark inline panel'],
398
+ * ['--color--stacked--surface-upper', 'Inner detail panel sitting one layer above the base'],
399
+ * ['--color--stacked--surface-action', 'Resting background of action buttons inside a stacked panel (transparent)'],
400
+ * ['--color--stacked--surface-action-hover', 'Hovered action button inside a stacked panel'],
401
+ * ['--color--stacked--surface-action-active', 'Pressed action button inside a stacked panel'],
402
+ * ['--color--stacked--ink', 'Main text and values on a stacked surface'],
403
+ * ['--color--stacked--ink-subtle', 'Field labels and secondary text on a stacked surface'],
404
+ * ['--color--stacked--border', 'Column rules and dividers inside a stacked panel'],
405
+ * ]}
406
+ * />
407
+ * </Section>
408
+ * )}
409
+ * </StateManager>
410
+ *
411
+ * <StateManager initial={false}>
412
+ * {(isOpen, setOpen) => (
413
+ * <Section
414
+ * title="Progress"
415
+ * collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
416
+ * >
417
+ * <p>
418
+ * Horizontal progress bars used to report quota usage, upload advancement and similar percentage indicators.
419
+ * </p>
420
+ * <Swatches
421
+ * tokens={[
422
+ * ['--color--progress--track', 'Empty portion of the bar (the background track)'],
423
+ * ['--color--progress--fill', 'Filled portion of the bar, drawn in the brand color'],
424
+ * ['--color--progress--fill-hover', 'Fill color when the bar is hovered'],
425
+ * ]}
426
+ * />
427
+ * </Section>
428
+ * )}
429
+ * </StateManager>
430
+ *
431
+ * <StateManager initial={false}>
432
+ * {(isOpen, setOpen) => (
433
+ * <Section
434
+ * title="Tooltip"
435
+ * collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
436
+ * >
437
+ * <p>
438
+ * Small dark floating labels: the plain tooltip shown on hover, and the keyboard-hint variant that pairs a description with a keyboard shortcut.
439
+ * </p>
440
+ * <Swatches
441
+ * tokens={[
442
+ * ['--color--tooltip--surface', 'Background of standard and keyboard-hint tooltips'],
443
+ * ['--color--tooltip--surface-hover', 'Hover background for interactive controls living inside a tooltip'],
444
+ * ['--color--tooltip--ink', 'Primary text inside a tooltip'],
445
+ * ['--color--tooltip--ink-subtle', 'Secondary text inside a tooltip, e.g. the keyboard shortcut hint'],
446
+ * ]}
447
+ * />
448
+ * </Section>
449
+ * )}
450
+ * </StateManager>
451
+ *
452
+ * <StateManager initial={false}>
453
+ * {(isOpen, setOpen) => (
454
+ * <Section
455
+ * title="Code"
456
+ * collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
457
+ * >
458
+ * <p>
459
+ * The dark monospaced surface used by build logs, error traces and other terminal-style output.
460
+ * </p>
461
+ * <PairSwatches
462
+ * tokens={[
463
+ * ['--color--code--surface', '--color--code--ink', 'Dark monospaced surface with its text color'],
464
+ * ]}
465
+ * />
466
+ * </Section>
467
+ * )}
468
+ * </StateManager>
469
+ *
470
+ * <StateManager initial={false}>
471
+ * {(isOpen, setOpen) => (
472
+ * <Section
473
+ * title="Scrollbar"
474
+ * collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
475
+ * >
476
+ * <p>
477
+ * Tint applied globally to the native scrollbar thumb. Most visible in Firefox and on systems that keep scrollbars always on.
478
+ * </p>
479
+ * <Swatches
480
+ * tokens={[
481
+ * ['--color--scrollbar--fill', 'Color of the native scrollbar thumb across the whole app'],
482
+ * ]}
483
+ * />
484
+ * </Section>
485
+ * )}
486
+ * </StateManager>
487
+ *
488
+ * <StateManager initial={false}>
489
+ * {(isOpen, setOpen) => (
490
+ * <Section
491
+ * title="Field type groups"
492
+ * collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
493
+ * >
494
+ * <p>
495
+ * Fixed-hue soft chips for field type group icons. Each context exposes a <code>surface</code> (chip background) and an <code>ink</code> (icon fill). The hues are not brand-adaptive — they are fixed across projects and automatically flip between a pale surface with saturated ink in light mode and a deep surface with bright ink in dark mode.
496
+ * </p>
497
+ * <PairSwatches
498
+ * tokens={[
499
+ * ['--color--field-group-text--surface', '--color--field-group-text--ink', 'Text / string / structured-text fields'],
500
+ * ['--color--field-group-rich-text--surface', '--color--field-group-rich-text--ink', 'Rich-text and single-block fields'],
501
+ * ['--color--field-group-media--surface', '--color--field-group-media--ink', 'File, gallery and video fields'],
502
+ * ['--color--field-group-datetime--surface', '--color--field-group-datetime--ink', 'Date and date-time fields'],
503
+ * ['--color--field-group-number--surface', '--color--field-group-number--ink', 'Integer and float fields'],
504
+ * ['--color--field-group-boolean--surface', '--color--field-group-boolean--ink', 'Boolean fields'],
505
+ * ['--color--field-group-location--surface', '--color--field-group-location--ink', 'Lat/lon fields'],
506
+ * ['--color--field-group-color--surface', '--color--field-group-color--ink', 'Color fields'],
507
+ * ['--color--field-group-seo--surface', '--color--field-group-seo--ink', 'Slug and SEO fields'],
508
+ * ['--color--field-group-reference--surface', '--color--field-group-reference--ink', 'Link and links fields'],
509
+ * ['--color--field-group-json--surface', '--color--field-group-json--ink', 'JSON fields'],
510
+ * ]}
511
+ * />
512
+ * </Section>
513
+ * )}
514
+ * </StateManager>
515
+ * </div>
226
516
  * </Canvas>;
227
517
  * ```
228
518
  *
229
- * @example Typography CSS variables
519
+ * @example Shadows
230
520
  *
231
- * Typography is a foundational element in UI design. Good typography
232
- * establishes a strong, cohesive visual hierarchy and presents content clearly
233
- * and efficiently to users. Within the `Canvas` component, a set of CSS
234
- * variables is available allowing your plugin to conform to the overall
235
- * look&feel of DatoCMS:
521
+ * Four ready-made `box-shadow` composites (raised, floating, lifted, ambient). Drop them straight into a `box-shadow` property.
236
522
  *
237
523
  * ```js
238
524
  * <Canvas ctx={ctx}>
239
- * <table>
240
- * <tbody>
241
- * <tr>
242
- * <td>
243
- * <code>--font-size-xxs</code>
244
- * </td>
245
- * <td>
246
- * <div style={{ fontSize: 'var(--font-size-xxs)' }}>
247
- * Size XXS
248
- * </div>
249
- * </td>
250
- * </tr>
251
- * <tr>
252
- * <td>
253
- * <code>--font-size-xs</code>
254
- * </td>
255
- * <td>
256
- * <div style={{ fontSize: 'var(--font-size-xs)' }}>Size XS</div>
257
- * </td>
258
- * </tr>
259
- * <tr>
260
- * <td>
261
- * <code>--font-size-s</code>
262
- * </td>
263
- * <td>
264
- * <div style={{ fontSize: 'var(--font-size-s)' }}>Size S</div>
265
- * </td>
266
- * </tr>
267
- * <tr>
268
- * <td>
269
- * <code>--font-size-m</code>
270
- * </td>
271
- * <td>
272
- * <div style={{ fontSize: 'var(--font-size-m)' }}>Size M</div>
273
- * </td>
274
- * </tr>
275
- * <tr>
276
- * <td>
277
- * <code>--font-size-l</code>
278
- * </td>
279
- * <td>
280
- * <div
281
- * style={{
282
- * fontSize: 'var(--font-size-l)',
283
- * fontWeight: 'var(--font-weight-bold)',
284
- * }}
285
- * >
286
- * Size L
287
- * </div>
288
- * </td>
289
- * </tr>
290
- * <tr>
291
- * <td>
292
- * <code>--font-size-xl</code>
293
- * </td>
294
- * <td>
295
- * <div
296
- * style={{
297
- * fontSize: 'var(--font-size-xl)',
298
- * fontWeight: 'var(--font-weight-bold)',
299
- * }}
300
- * >
301
- * Size XL
302
- * </div>
303
- * </td>
304
- * </tr>
305
- * <tr>
306
- * <td>
307
- * <code>--font-size-xxl</code>
308
- * </td>
309
- * <td>
310
- * <div
311
- * style={{
312
- * fontSize: 'var(--font-size-xxl)',
313
- * fontWeight: 'var(--font-weight-bold)',
314
- * }}
315
- * >
316
- * Size XXL
317
- * </div>
318
- * </td>
319
- * </tr>
320
- * <tr>
321
- * <td>
322
- * <code>--font-size-xxxl</code>
323
- * </td>
324
- * <td>
325
- * <div
326
- * style={{
327
- * fontSize: 'var(--font-size-xxxl)',
328
- * fontWeight: 'var(--font-weight-bold)',
329
- * }}
330
- * >
331
- * Size XXXL
332
- * </div>
333
- * </td>
334
- * </tr>
335
- * </tbody>
336
- * </table>
525
+ * <Swatches
526
+ * kind="shadow"
527
+ * tokens={['--shadow--raised', '--shadow--floating', '--shadow--lifted', '--shadow--ambient']}
528
+ * />
337
529
  * </Canvas>;
338
530
  * ```
339
531
  *
340
- * @example Spacing CSS variables
532
+ * @example Typography
341
533
  *
342
- * The following CSS variables are available as well, to mimick the spacing
343
- * between elements used by the main DatoCMS application. Negative spacing
344
- * variables are available too (`--negative-spacing-<SIZE>`).
534
+ * Typography is a foundational element in UI design. Good typography establishes a strong, cohesive visual hierarchy and presents content clearly and efficiently to users. Within the `Canvas` component, a set of CSS variables is available allowing your plugin to conform to the overall look&feel of DatoCMS:
345
535
  *
346
536
  * ```js
347
537
  * <Canvas ctx={ctx}>
348
- * <table>
349
- * <tbody>
350
- * <tr>
351
- * <td>
352
- * <code>--spacing-s</code>
353
- * </td>
354
- * <td>
355
- * <div
356
- * style={{
357
- * background: 'var(--color--accent--surface)',
358
- * width: 'var(--spacing-s)',
359
- * height: 'var(--spacing-s)',
360
- * }}
361
- * />
362
- * </td>
363
- * </tr>
364
- * <tr>
365
- * <td>
366
- * <code>--spacing-m</code>
367
- * </td>
368
- * <td>
369
- * <div
370
- * style={{
371
- * background: 'var(--color--accent--surface)',
372
- * width: 'var(--spacing-m)',
373
- * height: 'var(--spacing-m)',
374
- * }}
375
- * />
376
- * </td>
377
- * </tr>
378
- * <tr>
379
- * <td>
380
- * <code>--spacing-l</code>
381
- * </td>
382
- * <td>
383
- * <div
384
- * style={{
385
- * background: 'var(--color--accent--surface)',
386
- * width: 'var(--spacing-l)',
387
- * height: 'var(--spacing-l)',
388
- * }}
389
- * />
390
- * </td>
391
- * </tr>
392
- * <tr>
393
- * <td>
394
- * <code>--spacing-xl</code>
395
- * </td>
396
- * <td>
397
- * <div
398
- * style={{
399
- * background: 'var(--color--accent--surface)',
400
- * width: 'var(--spacing-xl)',
401
- * height: 'var(--spacing-xl)',
402
- * }}
403
- * />
404
- * </td>
405
- * </tr>
406
- * <tr>
407
- * <td>
408
- * <code>--spacing-xxl</code>
409
- * </td>
410
- * <td>
411
- * <div
412
- * style={{
413
- * background: 'var(--color--accent--surface)',
414
- * width: 'var(--spacing-xxl)',
415
- * height: 'var(--spacing-xxl)',
416
- * }}
417
- * />
418
- * </td>
419
- * </tr>
420
- * <tr>
421
- * <td>
422
- * <code>--spacing-xxxl</code>
423
- * </td>
424
- * <td>
425
- * <div
426
- * style={{
427
- * background: 'var(--color--accent--surface)',
428
- * width: 'var(--spacing-xxxl)',
429
- * height: 'var(--spacing-xxxl)',
430
- * }}
431
- * />
432
- * </td>
433
- * </tr>
434
- * </tbody>
435
- * </table>
538
+ * <Swatches
539
+ * kind="font-size"
540
+ * tokens={[
541
+ * '--font-size-xxs',
542
+ * '--font-size-xs',
543
+ * '--font-size-s',
544
+ * '--font-size-m',
545
+ * '--font-size-l',
546
+ * '--font-size-xl',
547
+ * '--font-size-xxl',
548
+ * '--font-size-xxxl',
549
+ * ]}
550
+ * />
551
+ * </Canvas>;
552
+ * ```
553
+ *
554
+ * @example Spacing
555
+ *
556
+ * The following CSS variables are available as well, to mimick the spacing between elements used by the main DatoCMS application. Negative spacing variables are available too (`--negative-spacing-<SIZE>`).
557
+ *
558
+ * ```js
559
+ * <Canvas ctx={ctx}>
560
+ * <Spacings
561
+ * tokens={[
562
+ * '--spacing-s',
563
+ * '--spacing-m',
564
+ * '--spacing-l',
565
+ * '--spacing-xl',
566
+ * '--spacing-xxl',
567
+ * '--spacing-xxxl',
568
+ * ]}
569
+ * />
436
570
  * </Canvas>;
437
571
  * ```
438
572
  */
@@ -449,6 +583,28 @@ function Canvas(_a) {
449
583
  }
450
584
  return undefined;
451
585
  }, [mode, noAutoResizer]);
586
+ // The semantic color tokens are only set on the canvas wrapper, so the page
587
+ // itself (`html`/`body`, outside the wrapper) can't reference them. Mirror
588
+ // the scrollbar token onto the document root so the page-level scrollbar can
589
+ // be themed too (consumed by the layered `html` rule in `base.css`).
590
+ var scrollbarFill = ctx.cssDesignTokens['--color--scrollbar--fill'];
591
+ (0, react_1.useEffect)(function () {
592
+ if (typeof document === 'undefined' || !scrollbarFill) {
593
+ return undefined;
594
+ }
595
+ var property = '--color--scrollbar--fill';
596
+ var root = document.documentElement;
597
+ var previous = root.style.getPropertyValue(property);
598
+ root.style.setProperty(property, scrollbarFill);
599
+ return function () {
600
+ if (previous) {
601
+ root.style.setProperty(property, previous);
602
+ }
603
+ else {
604
+ root.style.removeProperty(property);
605
+ }
606
+ };
607
+ }, [scrollbarFill]);
452
608
  return (react_1.default.createElement(exports.CtxContext.Provider, { value: ctx },
453
609
  react_1.default.createElement("div", { className: (0, classnames_1.default)(styles_module_css_json_1.default.themeVariables, styles_module_css_json_1.default.canvas), style: (0, generateStyleFromCtx_1.generateStyleFromCtx)(ctx) }, children)));
454
610
  }