datocms-react-ui 3.0.0-alpha.0 → 3.0.1-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/cjs/Canvas/index.js +175 -73
  2. package/dist/cjs/Canvas/index.js.map +1 -1
  3. package/dist/cjs/SelectInput/index.js +5 -2
  4. package/dist/cjs/SelectInput/index.js.map +1 -1
  5. package/dist/esm/Canvas/index.d.ts +175 -73
  6. package/dist/esm/Canvas/index.js +175 -73
  7. package/dist/esm/Canvas/index.js.map +1 -1
  8. package/dist/esm/SelectInput/index.js +5 -2
  9. package/dist/esm/SelectInput/index.js.map +1 -1
  10. package/dist/types/Canvas/index.d.ts +175 -73
  11. package/package.json +3 -3
  12. package/src/Canvas/index.tsx +175 -73
  13. package/src/SelectInput/index.tsx +6 -0
  14. package/types.json +484 -356
package/dist/cjs/Canvas/index.js CHANGED
@@ -44,84 +44,186 @@ exports.useCtx = useCtx;
44
44
  /**
45
45
  * @example Semantic color token CSS variables
46
46
  *
47
- * Within the `Canvas` component, semantic color tokens are made available as
48
- * CSS variables, allowing you to conform to the theme of the current
49
- * environment (including dark mode):
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.
51
+ *
52
+ * ### How to read a token name
53
+ *
54
+ * ```
55
+ * --color--{property} // standalone (one -- after color)
56
+ * --color--{context}--{property} // context pair (two -- after color)
57
+ * ```
58
+ *
59
+ * **Properties** — `surface` (backgrounds), `ink` (text/icons),
60
+ * `border` (1px lines), `outline` (focus rings), plus `fill` / `track`
61
+ * for progress bars.
62
+ *
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`.
67
+ *
68
+ * Non-color tokens `--shadow--elevated` / `--shadow--float` /
69
+ * `--shadow--ambient` are ready-made `box-shadow` composites.
50
70
  *
51
71
  * ```js
52
72
  * <Canvas ctx={ctx}>
53
- * <Section title="Standalone">
54
- * <table>
55
- * <tbody>
56
- * {[
57
- * '--color--surface',
58
- * '--color--surface-hover',
59
- * '--color--surface-muted',
60
- * '--color--ink',
61
- * '--color--ink-subtle',
62
- * '--color--ink-placeholder',
63
- * '--color--ink-accent',
64
- * '--color--border',
65
- * '--color--border-hover',
66
- * ].map((v) => (
67
- * <tr key={v}>
68
- * <td><code>{v}</code></td>
69
- * <td width="30%">
70
- * <div style={{ width: '30px', height: '30px', background: `var(${v})` }} />
71
- * </td>
72
- * </tr>
73
- * ))}
74
- * </tbody>
75
- * </table>
73
+ * <Section title="Standalone — use on any neutral page">
74
+ * <table><tbody>
75
+ * {[
76
+ * ['--color--surface', 'Default page background'],
77
+ * ['--color--surface-hover', 'Hovered row / list item'],
78
+ * ['--color--surface-muted', 'Muted section / card background'],
79
+ * ['--color--ink', 'Primary text'],
80
+ * ['--color--ink-subtle', 'Secondary text / captions'],
81
+ * ['--color--ink-hover', 'Text under hover'],
82
+ * ['--color--ink-muted', 'De-emphasized text'],
83
+ * ['--color--ink-placeholder', 'Input placeholder text'],
84
+ * ['--color--ink-primary', 'Brand-highlighted text / icons'],
85
+ * ['--color--ink-accent', 'Links / accent text'],
86
+ * ['--color--ink-disabled', 'Disabled text'],
87
+ * ['--color--border', 'Default 1px border'],
88
+ * ['--color--border-hover', 'Border under hover'],
89
+ * ].map(([t, d]) => (
90
+ * <tr key={t}>
91
+ * <td><code>{t}</code></td>
92
+ * <td style={{ color: 'var(--color--ink-subtle)' }}>{d}</td>
93
+ * <td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td>
94
+ * </tr>
95
+ * ))}
96
+ * </tbody></table>
76
97
  * </Section>
77
- * <Section title="Contexts">
78
- * <table>
79
- * <tbody>
80
- * {[
81
- * '--color--primary--surface',
82
- * '--color--primary--ink',
83
- * '--color--tinted--surface',
84
- * '--color--tinted--ink',
85
- * '--color--accent--surface',
86
- * '--color--accent--ink',
87
- * '--color--selected--surface',
88
- * '--color--danger--surface',
89
- * '--color--danger--ink',
90
- * '--color--disabled--surface',
91
- * '--color--disabled--ink',
92
- * '--color--focus--border',
93
- * '--color--focus--outline',
94
- * ].map((v) => (
95
- * <tr key={v}>
96
- * <td><code>{v}</code></td>
97
- * <td width="30%">
98
- * <div style={{ width: '30px', height: '30px', background: `var(${v})` }} />
99
- * </td>
100
- * </tr>
101
- * ))}
102
- * </tbody>
103
- * </table>
98
+ *
99
+ * <Section title="Context: raised — modals, dropdowns, popovers">
100
+ * <table><tbody>
101
+ * {['--color--raised--surface', '--color--raised--surface-hover', '--color--raised--surface-active']
102
+ * .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>))}
103
+ * </tbody></table>
104
+ * </Section>
105
+ *
106
+ * <Section title="Context: primary — main call-to-action buttons, badges, nav">
107
+ * <table><tbody>
108
+ * {['--color--primary--surface', '--color--primary--surface-hover', '--color--primary--surface-active', '--color--primary--surface-muted', '--color--primary--ink', '--color--primary--border']
109
+ * .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>))}
110
+ * </tbody></table>
104
111
  * </Section>
105
- * <Section title="Feedback">
106
- * <table>
107
- * <tbody>
108
- * {[
109
- * '--color--feedback-fail--ink',
110
- * '--color--feedback-fail--border',
111
- * '--color--feedback-warning--ink',
112
- * '--color--feedback-warning--surface',
113
- * '--color--feedback-success--ink',
114
- * '--color--feedback-success--border',
115
- * ].map((v) => (
116
- * <tr key={v}>
117
- * <td><code>{v}</code></td>
118
- * <td width="30%">
119
- * <div style={{ width: '30px', height: '30px', background: `var(${v})` }} />
120
- * </td>
121
- * </tr>
122
- * ))}
123
- * </tbody>
124
- * </table>
112
+ *
113
+ * <Section title="Context: tinted — subtle brand-tinted surfaces">
114
+ * <table><tbody>
115
+ * {['--color--tinted--surface', '--color--tinted--surface-hover', '--color--tinted--surface-active', '--color--tinted--ink']
116
+ * .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>))}
117
+ * </tbody></table>
118
+ * </Section>
119
+ *
120
+ * <Section title="Context: accent, selected, disabled, danger, enterprise">
121
+ * <table><tbody>
122
+ * {['--color--accent--surface', '--color--accent--ink',
123
+ * '--color--selected--surface', '--color--selected--ink', '--color--selected--border',
124
+ * '--color--disabled--surface', '--color--disabled--ink',
125
+ * '--color--danger--surface', '--color--danger--ink',
126
+ * '--color--enterprise--surface']
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',
141
+ * '--color--feedback-warning--ink', '--color--feedback-warning--surface', '--color--feedback-warning--border',
142
+ * '--color--feedback-success--ink', '--color--feedback-success--border']
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-removed--surface', '--color--diff-changed--surface',
157
+ * '--color--diff-added--surface-subtle', '--color--diff-removed--surface-subtle', '--color--diff-changed--surface-subtle',
158
+ * '--color--diff-added--outline-subtle', '--color--diff-removed--outline-subtle', '--color--diff-changed--outline-subtle',
159
+ * '--color--diff-changed--border', '--color--diff-changed--border-negative']
160
+ * .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>))}
161
+ * </tbody></table>
162
+ * </Section>
163
+ *
164
+ * <Section title="Status — publishing workflow badges (ink-only)">
165
+ * <table><tbody>
166
+ * {['--color--status-draft--ink', '--color--status-outdated--ink', '--color--status-published--ink']
167
+ * .map((t) => (<tr key={t}><td><code>{t}</code></td><td><span style={{ color: `var(${t})`, fontWeight: 'bold' }}>Sample text</span></td></tr>))}
168
+ * </tbody></table>
169
+ * </Section>
170
+ *
171
+ * <Section title="Backdrop & overlay — scrims and floating UI">
172
+ * <table><tbody>
173
+ * {['--color--backdrop--surface', '--color--backdrop--ink',
174
+ * '--color--overlay--surface', '--color--overlay--surface-subtle', '--color--overlay--ink']
175
+ * .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>))}
176
+ * </tbody></table>
177
+ * </Section>
178
+ *
179
+ * <Section title="Stacked — dark layered UI (uploaders, media players)">
180
+ * <p>Stacked gives you three layers of depth (base → surface → raised) plus buttons, borders and a translucent fill. Use it when a dark inline panel needs internal hierarchy.</p>
181
+ * <table><tbody>
182
+ * {['--color--stacked--surface-base', '--color--stacked--surface', '--color--stacked--surface-raised',
183
+ * '--color--stacked--surface-hover', '--color--stacked--surface-translucent',
184
+ * '--color--stacked--surface-button', '--color--stacked--surface-button-active',
185
+ * '--color--stacked--ink', '--color--stacked--ink-subtle', '--color--stacked--border']
186
+ * .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>))}
187
+ * </tbody></table>
188
+ * </Section>
189
+ *
190
+ * <Section title="Progress — bar track and fill">
191
+ * <table><tbody>
192
+ * {['--color--progress--track', '--color--progress--fill', '--color--progress--fill-hover']
193
+ * .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>))}
194
+ * </tbody></table>
195
+ * </Section>
196
+ *
197
+ * <Section title="Tooltip — small dark floating labels">
198
+ * <table><tbody>
199
+ * {['--color--tooltip--surface', '--color--tooltip--surface-hover', '--color--tooltip--ink', '--color--tooltip--ink-subtle']
200
+ * .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>))}
201
+ * </tbody></table>
202
+ * </Section>
203
+ *
204
+ * <Section title="Code — dark code blocks, logs, error traces">
205
+ * <table><tbody>
206
+ * {['--color--code--surface', '--color--code--ink']
207
+ * .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>))}
208
+ * </tbody></table>
209
+ * </Section>
210
+ *
211
+ * <Section title="Shadow colors and scrollbar">
212
+ * <table><tbody>
213
+ * {['--color--shadow-subtle', '--color--shadow', '--color--shadow-strong', '--color--scrollbar']
214
+ * .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>))}
215
+ * </tbody></table>
216
+ * </Section>
217
+ *
218
+ * <Section title="Shadow composites — drop-in box-shadow values">
219
+ * <div style={{ display: 'flex', gap: 'var(--spacing-l)', padding: 'var(--spacing-l)' }}>
220
+ * {['--shadow--elevated', '--shadow--float', '--shadow--ambient'].map((t) => (
221
+ * <div key={t} style={{ textAlign: 'center' }}>
222
+ * <div style={{ width: '80px', height: '80px', background: 'var(--color--surface)', borderRadius: '4px', boxShadow: `var(${t})` }} />
223
+ * <code style={{ display: 'block', marginTop: 'var(--spacing-s)', fontSize: 'var(--font-size-xs)' }}>{t}</code>
224
+ * </div>
225
+ * ))}
226
+ * </div>
125
227
  * </Section>
126
228
  * </Canvas>;
127
229
  * ```
package/dist/cjs/Canvas/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Canvas/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAoC;AAKpC,6CAKe;AACf,gEAA+D;AAC/D,oFAAyC;AAIzC,8DAA8D;AACjD,QAAA,UAAU,GAAG,IAAA,qBAAa,EAAiB,IAAI,CAAC,CAAC;AAE9D,SAAgB,MAAM;IACpB,IAAM,GAAG,GAAG,IAAA,kBAAU,EAAC,kBAAU,CAAC,CAAC;IAEnC,IAAI,CAAC,GAAG,EAAE;QACR,MAAM,IAAI,KAAK,CAAC,6BAA6B,CAAC,CAAC;KAChD;IAED,OAAO,GAAQ,CAAC;AAClB,CAAC;AARD,wBAQC;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsSG;AAEH,SAAgB,MAAM,CAAC,EAIT;QAHZ,GAAG,SAAA,EACH,QAAQ,cAAA,EACR,aAAa,mBAAA;IAEL,IAAA,IAAI,GAAK,GAAkC,KAAvC,CAAwC;IAEpD,IAAA,iBAAS,EAAC;QACR,IAAI,CAAC,aAAa,IAAI,kBAAkB,IAAI,GAAG,EAAE;YAC/C,IAAM,oBAAkB,GAAG,GAAiC,CAAC;YAC7D,oBAAkB,CAAC,gBAAgB,EAAE,CAAC;YAEtC,OAAO;gBACL,oBAAkB,CAAC,eAAe,EAAE,CAAC;YACvC,CAAC,CAAC;SACH;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC;IAE1B,OAAO,CACL,8BAAC,kBAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG;QAC7B,uCACE,SAAS,EAAE,IAAA,oBAAU,EAAC,gCAAC,CAAC,cAAc,EAAE,gCAAC,CAAC,MAAM,CAAC,EACjD,KAAK,EAAE,IAAA,2CAAoB,EAAC,GAAG,CAAC,IAE/B,QAAQ,CACL,CACc,CACvB,CAAC;AACJ,CAAC;AA9BD,wBA8BC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Canvas/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAoC;AAKpC,6CAKe;AACf,gEAA+D;AAC/D,oFAAyC;AAIzC,8DAA8D;AACjD,QAAA,UAAU,GAAG,IAAA,qBAAa,EAAiB,IAAI,CAAC,CAAC;AAE9D,SAAgB,MAAM;IACpB,IAAM,GAAG,GAAG,IAAA,kBAAU,EAAC,kBAAU,CAAC,CAAC;IAEnC,IAAI,CAAC,GAAG,EAAE;QACR,MAAM,IAAI,KAAK,CAAC,6BAA6B,CAAC,CAAC;KAChD;IAED,OAAO,GAAQ,CAAC;AAClB,CAAC;AARD,wBAQC;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4YG;AAEH,SAAgB,MAAM,CAAC,EAIT;QAHZ,GAAG,SAAA,EACH,QAAQ,cAAA,EACR,aAAa,mBAAA;IAEL,IAAA,IAAI,GAAK,GAAkC,KAAvC,CAAwC;IAEpD,IAAA,iBAAS,EAAC;QACR,IAAI,CAAC,aAAa,IAAI,kBAAkB,IAAI,GAAG,EAAE;YAC/C,IAAM,oBAAkB,GAAG,GAAiC,CAAC;YAC7D,oBAAkB,CAAC,gBAAgB,EAAE,CAAC;YAEtC,OAAO;gBACL,oBAAkB,CAAC,eAAe,EAAE,CAAC;YACvC,CAAC,CAAC;SACH;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC;IAE1B,OAAO,CACL,8BAAC,kBAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG;QAC7B,uCACE,SAAS,EAAE,IAAA,oBAAU,EAAC,gCAAC,CAAC,cAAc,EAAE,gCAAC,CAAC,MAAM,CAAC,EACjD,KAAK,EAAE,IAAA,2CAAoB,EAAC,GAAG,CAAC,IAE/B,QAAQ,CACL,CACc,CACvB,CAAC;AACJ,CAAC;AA9BD,wBA8BC"}
package/dist/cjs/SelectInput/index.js CHANGED
@@ -97,7 +97,10 @@ var useStyles = function (isDisabled, error) {
97
97
  : 'var(--color--border-hover)',
98
98
  } });
99
99
  },
100
- multiValueRemove: function (provided) { return (__assign(__assign({}, provided), { cursor: 'pointer' })); },
100
+ multiValueRemove: function (provided) { return (__assign(__assign({}, provided), { cursor: 'pointer', color: 'var(--color--tinted--ink)', ':hover': {
101
+ backgroundColor: 'var(--color--tinted--surface-hover)',
102
+ color: 'var(--color--tinted--ink)',
103
+ } })); },
101
104
  menu: function (provided) {
102
105
  return __assign(__assign({}, provided), { zIndex: 1000, minWidth: 250, backgroundColor: 'var(--color--raised--surface)' });
103
106
  },
@@ -116,7 +119,7 @@ var useStyles = function (isDisabled, error) {
116
119
  multiValue: function (provided) {
117
120
  return __assign(__assign({}, provided), { zIndex: 100, backgroundColor: 'var(--color--tinted--surface)', userSelect: 'none' });
118
121
  },
119
- multiValueLabel: function (provided) { return (__assign(__assign({}, provided), { fontSize: 'inherit', padding: 3 })); },
122
+ multiValueLabel: function (provided) { return (__assign(__assign({}, provided), { fontSize: 'inherit', padding: 3, color: 'var(--color--tinted--ink)' })); },
120
123
  };
121
124
  }, [isDisabled, error]);
122
125
  };
package/dist/cjs/SelectInput/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SelectInput/index.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SelectInput/index.tsx"],"names":[],"mappings":"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"}
package/dist/esm/Canvas/index.d.ts CHANGED
@@ -11,84 +11,186 @@ export declare type CanvasProps = {
11
11
  /**
12
12
  * @example Semantic color token CSS variables
13
13
  *
14
- * Within the `Canvas` component, semantic color tokens are made available as
15
- * CSS variables, allowing you to conform to the theme of the current
16
- * environment (including dark mode):
14
+ * Inside `Canvas`, the host exposes a full semantic color palette as CSS
15
+ * custom properties. Components should reference these tokens directly —
16
+ * they adapt to the user's active theme (including dark mode)
17
+ * automatically.
18
+ *
19
+ * ### How to read a token name
20
+ *
21
+ * ```
22
+ * --color--{property} // standalone (one -- after color)
23
+ * --color--{context}--{property} // context pair (two -- after color)
24
+ * ```
25
+ *
26
+ * **Properties** — `surface` (backgrounds), `ink` (text/icons),
27
+ * `border` (1px lines), `outline` (focus rings), plus `fill` / `track`
28
+ * for progress bars.
29
+ *
30
+ * **Standalone** tokens work on any neutral page. **Contexts** are
31
+ * self-contained environments: always pair a `surface` with the `ink`,
32
+ * `border`, and hover states from the *same* context. Never mix — e.g.
33
+ * don't put `--color--primary--ink` on `--color--danger--surface`.
34
+ *
35
+ * Non-color tokens `--shadow--elevated` / `--shadow--float` /
36
+ * `--shadow--ambient` are ready-made `box-shadow` composites.
17
37
  *
18
38
  * ```js
19
39
  * <Canvas ctx={ctx}>
20
- * <Section title="Standalone">
21
- * <table>
22
- * <tbody>
23
- * {[
24
- * '--color--surface',
25
- * '--color--surface-hover',
26
- * '--color--surface-muted',
27
- * '--color--ink',
28
- * '--color--ink-subtle',
29
- * '--color--ink-placeholder',
30
- * '--color--ink-accent',
31
- * '--color--border',
32
- * '--color--border-hover',
33
- * ].map((v) => (
34
- * <tr key={v}>
35
- * <td><code>{v}</code></td>
36
- * <td width="30%">
37
- * <div style={{ width: '30px', height: '30px', background: `var(${v})` }} />
38
- * </td>
39
- * </tr>
40
- * ))}
41
- * </tbody>
42
- * </table>
40
+ * <Section title="Standalone — use on any neutral page">
41
+ * <table><tbody>
42
+ * {[
43
+ * ['--color--surface', 'Default page background'],
44
+ * ['--color--surface-hover', 'Hovered row / list item'],
45
+ * ['--color--surface-muted', 'Muted section / card background'],
46
+ * ['--color--ink', 'Primary text'],
47
+ * ['--color--ink-subtle', 'Secondary text / captions'],
48
+ * ['--color--ink-hover', 'Text under hover'],
49
+ * ['--color--ink-muted', 'De-emphasized text'],
50
+ * ['--color--ink-placeholder', 'Input placeholder text'],
51
+ * ['--color--ink-primary', 'Brand-highlighted text / icons'],
52
+ * ['--color--ink-accent', 'Links / accent text'],
53
+ * ['--color--ink-disabled', 'Disabled text'],
54
+ * ['--color--border', 'Default 1px border'],
55
+ * ['--color--border-hover', 'Border under hover'],
56
+ * ].map(([t, d]) => (
57
+ * <tr key={t}>
58
+ * <td><code>{t}</code></td>
59
+ * <td style={{ color: 'var(--color--ink-subtle)' }}>{d}</td>
60
+ * <td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td>
61
+ * </tr>
62
+ * ))}
63
+ * </tbody></table>
43
64
  * </Section>
44
- * <Section title="Contexts">
45
- * <table>
46
- * <tbody>
47
- * {[
48
- * '--color--primary--surface',
49
- * '--color--primary--ink',
50
- * '--color--tinted--surface',
51
- * '--color--tinted--ink',
52
- * '--color--accent--surface',
53
- * '--color--accent--ink',
54
- * '--color--selected--surface',
55
- * '--color--danger--surface',
56
- * '--color--danger--ink',
57
- * '--color--disabled--surface',
58
- * '--color--disabled--ink',
59
- * '--color--focus--border',
60
- * '--color--focus--outline',
61
- * ].map((v) => (
62
- * <tr key={v}>
63
- * <td><code>{v}</code></td>
64
- * <td width="30%">
65
- * <div style={{ width: '30px', height: '30px', background: `var(${v})` }} />
66
- * </td>
67
- * </tr>
68
- * ))}
69
- * </tbody>
70
- * </table>
65
+ *
66
+ * <Section title="Context: raised — modals, dropdowns, popovers">
67
+ * <table><tbody>
68
+ * {['--color--raised--surface', '--color--raised--surface-hover', '--color--raised--surface-active']
69
+ * .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>))}
70
+ * </tbody></table>
71
+ * </Section>
72
+ *
73
+ * <Section title="Context: primary — main call-to-action buttons, badges, nav">
74
+ * <table><tbody>
75
+ * {['--color--primary--surface', '--color--primary--surface-hover', '--color--primary--surface-active', '--color--primary--surface-muted', '--color--primary--ink', '--color--primary--border']
76
+ * .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>))}
77
+ * </tbody></table>
71
78
  * </Section>
72
- * <Section title="Feedback">
73
- * <table>
74
- * <tbody>
75
- * {[
76
- * '--color--feedback-fail--ink',
77
- * '--color--feedback-fail--border',
78
- * '--color--feedback-warning--ink',
79
- * '--color--feedback-warning--surface',
80
- * '--color--feedback-success--ink',
81
- * '--color--feedback-success--border',
82
- * ].map((v) => (
83
- * <tr key={v}>
84
- * <td><code>{v}</code></td>
85
- * <td width="30%">
86
- * <div style={{ width: '30px', height: '30px', background: `var(${v})` }} />
87
- * </td>
88
- * </tr>
89
- * ))}
90
- * </tbody>
91
- * </table>
79
+ *
80
+ * <Section title="Context: tinted — subtle brand-tinted surfaces">
81
+ * <table><tbody>
82
+ * {['--color--tinted--surface', '--color--tinted--surface-hover', '--color--tinted--surface-active', '--color--tinted--ink']
83
+ * .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>))}
84
+ * </tbody></table>
85
+ * </Section>
86
+ *
87
+ * <Section title="Context: accent, selected, disabled, danger, enterprise">
88
+ * <table><tbody>
89
+ * {['--color--accent--surface', '--color--accent--ink',
90
+ * '--color--selected--surface', '--color--selected--ink', '--color--selected--border',
91
+ * '--color--disabled--surface', '--color--disabled--ink',
92
+ * '--color--danger--surface', '--color--danger--ink',
93
+ * '--color--enterprise--surface']
94
+ * .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>))}
95
+ * </tbody></table>
96
+ * </Section>
97
+ *
98
+ * <Section title="Context: focus — focus rings and outlines">
99
+ * <table><tbody>
100
+ * {['--color--focus--border', '--color--focus--outline']
101
+ * .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>))}
102
+ * </tbody></table>
103
+ * </Section>
104
+ *
105
+ * <Section title="Feedback — validation and form states">
106
+ * <table><tbody>
107
+ * {['--color--feedback-fail--ink', '--color--feedback-fail--border', '--color--feedback-fail--outline',
108
+ * '--color--feedback-warning--ink', '--color--feedback-warning--surface', '--color--feedback-warning--border',
109
+ * '--color--feedback-success--ink', '--color--feedback-success--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: highlight — rich text inline highlights">
115
+ * <table><tbody>
116
+ * {['--color--highlight--surface']
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="Diffs — content versioning (added / removed / changed)">
122
+ * <table><tbody>
123
+ * {['--color--diff-added--surface', '--color--diff-removed--surface', '--color--diff-changed--surface',
124
+ * '--color--diff-added--surface-subtle', '--color--diff-removed--surface-subtle', '--color--diff-changed--surface-subtle',
125
+ * '--color--diff-added--outline-subtle', '--color--diff-removed--outline-subtle', '--color--diff-changed--outline-subtle',
126
+ * '--color--diff-changed--border', '--color--diff-changed--border-negative']
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="Status — publishing workflow badges (ink-only)">
132
+ * <table><tbody>
133
+ * {['--color--status-draft--ink', '--color--status-outdated--ink', '--color--status-published--ink']
134
+ * .map((t) => (<tr key={t}><td><code>{t}</code></td><td><span style={{ color: `var(${t})`, fontWeight: 'bold' }}>Sample text</span></td></tr>))}
135
+ * </tbody></table>
136
+ * </Section>
137
+ *
138
+ * <Section title="Backdrop & overlay — scrims and floating UI">
139
+ * <table><tbody>
140
+ * {['--color--backdrop--surface', '--color--backdrop--ink',
141
+ * '--color--overlay--surface', '--color--overlay--surface-subtle', '--color--overlay--ink']
142
+ * .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>))}
143
+ * </tbody></table>
144
+ * </Section>
145
+ *
146
+ * <Section title="Stacked — dark layered UI (uploaders, media players)">
147
+ * <p>Stacked gives you three layers of depth (base → surface → raised) plus buttons, borders and a translucent fill. Use it when a dark inline panel needs internal hierarchy.</p>
148
+ * <table><tbody>
149
+ * {['--color--stacked--surface-base', '--color--stacked--surface', '--color--stacked--surface-raised',
150
+ * '--color--stacked--surface-hover', '--color--stacked--surface-translucent',
151
+ * '--color--stacked--surface-button', '--color--stacked--surface-button-active',
152
+ * '--color--stacked--ink', '--color--stacked--ink-subtle', '--color--stacked--border']
153
+ * .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>))}
154
+ * </tbody></table>
155
+ * </Section>
156
+ *
157
+ * <Section title="Progress — bar track and fill">
158
+ * <table><tbody>
159
+ * {['--color--progress--track', '--color--progress--fill', '--color--progress--fill-hover']
160
+ * .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>))}
161
+ * </tbody></table>
162
+ * </Section>
163
+ *
164
+ * <Section title="Tooltip — small dark floating labels">
165
+ * <table><tbody>
166
+ * {['--color--tooltip--surface', '--color--tooltip--surface-hover', '--color--tooltip--ink', '--color--tooltip--ink-subtle']
167
+ * .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>))}
168
+ * </tbody></table>
169
+ * </Section>
170
+ *
171
+ * <Section title="Code — dark code blocks, logs, error traces">
172
+ * <table><tbody>
173
+ * {['--color--code--surface', '--color--code--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="Shadow colors and scrollbar">
179
+ * <table><tbody>
180
+ * {['--color--shadow-subtle', '--color--shadow', '--color--shadow-strong', '--color--scrollbar']
181
+ * .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>))}
182
+ * </tbody></table>
183
+ * </Section>
184
+ *
185
+ * <Section title="Shadow composites — drop-in box-shadow values">
186
+ * <div style={{ display: 'flex', gap: 'var(--spacing-l)', padding: 'var(--spacing-l)' }}>
187
+ * {['--shadow--elevated', '--shadow--float', '--shadow--ambient'].map((t) => (
188
+ * <div key={t} style={{ textAlign: 'center' }}>
189
+ * <div style={{ width: '80px', height: '80px', background: 'var(--color--surface)', borderRadius: '4px', boxShadow: `var(${t})` }} />
190
+ * <code style={{ display: 'block', marginTop: 'var(--spacing-s)', fontSize: 'var(--font-size-xs)' }}>{t}</code>
191
+ * </div>
192
+ * ))}
193
+ * </div>
92
194
  * </Section>
93
195
  * </Canvas>;
94
196
  * ```