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.
- package/dist/cjs/Canvas/index.js +175 -73
- package/dist/cjs/Canvas/index.js.map +1 -1
- package/dist/cjs/SelectInput/index.js +5 -2
- package/dist/cjs/SelectInput/index.js.map +1 -1
- package/dist/esm/Canvas/index.d.ts +175 -73
- package/dist/esm/Canvas/index.js +175 -73
- package/dist/esm/Canvas/index.js.map +1 -1
- package/dist/esm/SelectInput/index.js +5 -2
- package/dist/esm/SelectInput/index.js.map +1 -1
- package/dist/types/Canvas/index.d.ts +175 -73
- package/package.json +3 -3
- package/src/Canvas/index.tsx +175 -73
- package/src/SelectInput/index.tsx +6 -0
- package/types.json +484 -356
package/src/Canvas/index.tsx
CHANGED
|
@@ -36,84 +36,186 @@ export type CanvasProps = {
|
|
|
36
36
|
/**
|
|
37
37
|
* @example Semantic color token CSS variables
|
|
38
38
|
*
|
|
39
|
-
*
|
|
40
|
-
*
|
|
41
|
-
*
|
|
39
|
+
* Inside `Canvas`, the host exposes a full semantic color palette as CSS
|
|
40
|
+
* custom properties. Components should reference these tokens directly —
|
|
41
|
+
* they adapt to the user's active theme (including dark mode)
|
|
42
|
+
* automatically.
|
|
43
|
+
*
|
|
44
|
+
* ### How to read a token name
|
|
45
|
+
*
|
|
46
|
+
* ```
|
|
47
|
+
* --color--{property} // standalone (one -- after color)
|
|
48
|
+
* --color--{context}--{property} // context pair (two -- after color)
|
|
49
|
+
* ```
|
|
50
|
+
*
|
|
51
|
+
* **Properties** — `surface` (backgrounds), `ink` (text/icons),
|
|
52
|
+
* `border` (1px lines), `outline` (focus rings), plus `fill` / `track`
|
|
53
|
+
* for progress bars.
|
|
54
|
+
*
|
|
55
|
+
* **Standalone** tokens work on any neutral page. **Contexts** are
|
|
56
|
+
* self-contained environments: always pair a `surface` with the `ink`,
|
|
57
|
+
* `border`, and hover states from the *same* context. Never mix — e.g.
|
|
58
|
+
* don't put `--color--primary--ink` on `--color--danger--surface`.
|
|
59
|
+
*
|
|
60
|
+
* Non-color tokens `--shadow--elevated` / `--shadow--float` /
|
|
61
|
+
* `--shadow--ambient` are ready-made `box-shadow` composites.
|
|
42
62
|
*
|
|
43
63
|
* ```js
|
|
44
64
|
* <Canvas ctx={ctx}>
|
|
45
|
-
* <Section title="Standalone">
|
|
46
|
-
* <table>
|
|
47
|
-
*
|
|
48
|
-
*
|
|
49
|
-
*
|
|
50
|
-
*
|
|
51
|
-
*
|
|
52
|
-
*
|
|
53
|
-
*
|
|
54
|
-
*
|
|
55
|
-
*
|
|
56
|
-
*
|
|
57
|
-
*
|
|
58
|
-
* ]
|
|
59
|
-
*
|
|
60
|
-
*
|
|
61
|
-
*
|
|
62
|
-
*
|
|
63
|
-
*
|
|
64
|
-
* </
|
|
65
|
-
*
|
|
66
|
-
*
|
|
67
|
-
*
|
|
65
|
+
* <Section title="Standalone — use on any neutral page">
|
|
66
|
+
* <table><tbody>
|
|
67
|
+
* {[
|
|
68
|
+
* ['--color--surface', 'Default page background'],
|
|
69
|
+
* ['--color--surface-hover', 'Hovered row / list item'],
|
|
70
|
+
* ['--color--surface-muted', 'Muted section / card background'],
|
|
71
|
+
* ['--color--ink', 'Primary text'],
|
|
72
|
+
* ['--color--ink-subtle', 'Secondary text / captions'],
|
|
73
|
+
* ['--color--ink-hover', 'Text under hover'],
|
|
74
|
+
* ['--color--ink-muted', 'De-emphasized text'],
|
|
75
|
+
* ['--color--ink-placeholder', 'Input placeholder text'],
|
|
76
|
+
* ['--color--ink-primary', 'Brand-highlighted text / icons'],
|
|
77
|
+
* ['--color--ink-accent', 'Links / accent text'],
|
|
78
|
+
* ['--color--ink-disabled', 'Disabled text'],
|
|
79
|
+
* ['--color--border', 'Default 1px border'],
|
|
80
|
+
* ['--color--border-hover', 'Border under hover'],
|
|
81
|
+
* ].map(([t, d]) => (
|
|
82
|
+
* <tr key={t}>
|
|
83
|
+
* <td><code>{t}</code></td>
|
|
84
|
+
* <td style={{ color: 'var(--color--ink-subtle)' }}>{d}</td>
|
|
85
|
+
* <td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td>
|
|
86
|
+
* </tr>
|
|
87
|
+
* ))}
|
|
88
|
+
* </tbody></table>
|
|
68
89
|
* </Section>
|
|
69
|
-
*
|
|
70
|
-
*
|
|
71
|
-
*
|
|
72
|
-
*
|
|
73
|
-
*
|
|
74
|
-
*
|
|
75
|
-
*
|
|
76
|
-
*
|
|
77
|
-
*
|
|
78
|
-
*
|
|
79
|
-
*
|
|
80
|
-
*
|
|
81
|
-
*
|
|
82
|
-
* '--color--disabled--surface',
|
|
83
|
-
* '--color--disabled--ink',
|
|
84
|
-
* '--color--focus--border',
|
|
85
|
-
* '--color--focus--outline',
|
|
86
|
-
* ].map((v) => (
|
|
87
|
-
* <tr key={v}>
|
|
88
|
-
* <td><code>{v}</code></td>
|
|
89
|
-
* <td width="30%">
|
|
90
|
-
* <div style={{ width: '30px', height: '30px', background: `var(${v})` }} />
|
|
91
|
-
* </td>
|
|
92
|
-
* </tr>
|
|
93
|
-
* ))}
|
|
94
|
-
* </tbody>
|
|
95
|
-
* </table>
|
|
90
|
+
*
|
|
91
|
+
* <Section title="Context: raised — modals, dropdowns, popovers">
|
|
92
|
+
* <table><tbody>
|
|
93
|
+
* {['--color--raised--surface', '--color--raised--surface-hover', '--color--raised--surface-active']
|
|
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: primary — main call-to-action buttons, badges, nav">
|
|
99
|
+
* <table><tbody>
|
|
100
|
+
* {['--color--primary--surface', '--color--primary--surface-hover', '--color--primary--surface-active', '--color--primary--surface-muted', '--color--primary--ink', '--color--primary--border']
|
|
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>
|
|
96
103
|
* </Section>
|
|
97
|
-
*
|
|
98
|
-
*
|
|
99
|
-
*
|
|
100
|
-
*
|
|
101
|
-
*
|
|
102
|
-
*
|
|
103
|
-
*
|
|
104
|
-
*
|
|
105
|
-
*
|
|
106
|
-
*
|
|
107
|
-
*
|
|
108
|
-
*
|
|
109
|
-
*
|
|
110
|
-
*
|
|
111
|
-
*
|
|
112
|
-
*
|
|
113
|
-
*
|
|
114
|
-
*
|
|
115
|
-
*
|
|
116
|
-
*
|
|
104
|
+
*
|
|
105
|
+
* <Section title="Context: tinted — subtle brand-tinted surfaces">
|
|
106
|
+
* <table><tbody>
|
|
107
|
+
* {['--color--tinted--surface', '--color--tinted--surface-hover', '--color--tinted--surface-active', '--color--tinted--ink']
|
|
108
|
+
* .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>))}
|
|
109
|
+
* </tbody></table>
|
|
110
|
+
* </Section>
|
|
111
|
+
*
|
|
112
|
+
* <Section title="Context: accent, selected, disabled, danger, enterprise">
|
|
113
|
+
* <table><tbody>
|
|
114
|
+
* {['--color--accent--surface', '--color--accent--ink',
|
|
115
|
+
* '--color--selected--surface', '--color--selected--ink', '--color--selected--border',
|
|
116
|
+
* '--color--disabled--surface', '--color--disabled--ink',
|
|
117
|
+
* '--color--danger--surface', '--color--danger--ink',
|
|
118
|
+
* '--color--enterprise--surface']
|
|
119
|
+
* .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>))}
|
|
120
|
+
* </tbody></table>
|
|
121
|
+
* </Section>
|
|
122
|
+
*
|
|
123
|
+
* <Section title="Context: focus — focus rings and outlines">
|
|
124
|
+
* <table><tbody>
|
|
125
|
+
* {['--color--focus--border', '--color--focus--outline']
|
|
126
|
+
* .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>))}
|
|
127
|
+
* </tbody></table>
|
|
128
|
+
* </Section>
|
|
129
|
+
*
|
|
130
|
+
* <Section title="Feedback — validation and form states">
|
|
131
|
+
* <table><tbody>
|
|
132
|
+
* {['--color--feedback-fail--ink', '--color--feedback-fail--border', '--color--feedback-fail--outline',
|
|
133
|
+
* '--color--feedback-warning--ink', '--color--feedback-warning--surface', '--color--feedback-warning--border',
|
|
134
|
+
* '--color--feedback-success--ink', '--color--feedback-success--border']
|
|
135
|
+
* .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>))}
|
|
136
|
+
* </tbody></table>
|
|
137
|
+
* </Section>
|
|
138
|
+
*
|
|
139
|
+
* <Section title="Context: highlight — rich text inline highlights">
|
|
140
|
+
* <table><tbody>
|
|
141
|
+
* {['--color--highlight--surface']
|
|
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="Diffs — content versioning (added / removed / changed)">
|
|
147
|
+
* <table><tbody>
|
|
148
|
+
* {['--color--diff-added--surface', '--color--diff-removed--surface', '--color--diff-changed--surface',
|
|
149
|
+
* '--color--diff-added--surface-subtle', '--color--diff-removed--surface-subtle', '--color--diff-changed--surface-subtle',
|
|
150
|
+
* '--color--diff-added--outline-subtle', '--color--diff-removed--outline-subtle', '--color--diff-changed--outline-subtle',
|
|
151
|
+
* '--color--diff-changed--border', '--color--diff-changed--border-negative']
|
|
152
|
+
* .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>))}
|
|
153
|
+
* </tbody></table>
|
|
154
|
+
* </Section>
|
|
155
|
+
*
|
|
156
|
+
* <Section title="Status — publishing workflow badges (ink-only)">
|
|
157
|
+
* <table><tbody>
|
|
158
|
+
* {['--color--status-draft--ink', '--color--status-outdated--ink', '--color--status-published--ink']
|
|
159
|
+
* .map((t) => (<tr key={t}><td><code>{t}</code></td><td><span style={{ color: `var(${t})`, fontWeight: 'bold' }}>Sample text</span></td></tr>))}
|
|
160
|
+
* </tbody></table>
|
|
161
|
+
* </Section>
|
|
162
|
+
*
|
|
163
|
+
* <Section title="Backdrop & overlay — scrims and floating UI">
|
|
164
|
+
* <table><tbody>
|
|
165
|
+
* {['--color--backdrop--surface', '--color--backdrop--ink',
|
|
166
|
+
* '--color--overlay--surface', '--color--overlay--surface-subtle', '--color--overlay--ink']
|
|
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="Stacked — dark layered UI (uploaders, media players)">
|
|
172
|
+
* <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>
|
|
173
|
+
* <table><tbody>
|
|
174
|
+
* {['--color--stacked--surface-base', '--color--stacked--surface', '--color--stacked--surface-raised',
|
|
175
|
+
* '--color--stacked--surface-hover', '--color--stacked--surface-translucent',
|
|
176
|
+
* '--color--stacked--surface-button', '--color--stacked--surface-button-active',
|
|
177
|
+
* '--color--stacked--ink', '--color--stacked--ink-subtle', '--color--stacked--border']
|
|
178
|
+
* .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>))}
|
|
179
|
+
* </tbody></table>
|
|
180
|
+
* </Section>
|
|
181
|
+
*
|
|
182
|
+
* <Section title="Progress — bar track and fill">
|
|
183
|
+
* <table><tbody>
|
|
184
|
+
* {['--color--progress--track', '--color--progress--fill', '--color--progress--fill-hover']
|
|
185
|
+
* .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>))}
|
|
186
|
+
* </tbody></table>
|
|
187
|
+
* </Section>
|
|
188
|
+
*
|
|
189
|
+
* <Section title="Tooltip — small dark floating labels">
|
|
190
|
+
* <table><tbody>
|
|
191
|
+
* {['--color--tooltip--surface', '--color--tooltip--surface-hover', '--color--tooltip--ink', '--color--tooltip--ink-subtle']
|
|
192
|
+
* .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>))}
|
|
193
|
+
* </tbody></table>
|
|
194
|
+
* </Section>
|
|
195
|
+
*
|
|
196
|
+
* <Section title="Code — dark code blocks, logs, error traces">
|
|
197
|
+
* <table><tbody>
|
|
198
|
+
* {['--color--code--surface', '--color--code--ink']
|
|
199
|
+
* .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>))}
|
|
200
|
+
* </tbody></table>
|
|
201
|
+
* </Section>
|
|
202
|
+
*
|
|
203
|
+
* <Section title="Shadow colors and scrollbar">
|
|
204
|
+
* <table><tbody>
|
|
205
|
+
* {['--color--shadow-subtle', '--color--shadow', '--color--shadow-strong', '--color--scrollbar']
|
|
206
|
+
* .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>))}
|
|
207
|
+
* </tbody></table>
|
|
208
|
+
* </Section>
|
|
209
|
+
*
|
|
210
|
+
* <Section title="Shadow composites — drop-in box-shadow values">
|
|
211
|
+
* <div style={{ display: 'flex', gap: 'var(--spacing-l)', padding: 'var(--spacing-l)' }}>
|
|
212
|
+
* {['--shadow--elevated', '--shadow--float', '--shadow--ambient'].map((t) => (
|
|
213
|
+
* <div key={t} style={{ textAlign: 'center' }}>
|
|
214
|
+
* <div style={{ width: '80px', height: '80px', background: 'var(--color--surface)', borderRadius: '4px', boxShadow: `var(${t})` }} />
|
|
215
|
+
* <code style={{ display: 'block', marginTop: 'var(--spacing-s)', fontSize: 'var(--font-size-xs)' }}>{t}</code>
|
|
216
|
+
* </div>
|
|
217
|
+
* ))}
|
|
218
|
+
* </div>
|
|
117
219
|
* </Section>
|
|
118
220
|
* </Canvas>;
|
|
119
221
|
* ```
|
|
@@ -92,6 +92,11 @@ const useStyles = (isDisabled?: boolean, error?: boolean) => {
|
|
|
92
92
|
multiValueRemove: (provided) => ({
|
|
93
93
|
...provided,
|
|
94
94
|
cursor: 'pointer',
|
|
95
|
+
color: 'var(--color--tinted--ink)',
|
|
96
|
+
':hover': {
|
|
97
|
+
backgroundColor: 'var(--color--tinted--surface-hover)',
|
|
98
|
+
color: 'var(--color--tinted--ink)',
|
|
99
|
+
},
|
|
95
100
|
}),
|
|
96
101
|
menu: (provided) => {
|
|
97
102
|
return {
|
|
@@ -134,6 +139,7 @@ const useStyles = (isDisabled?: boolean, error?: boolean) => {
|
|
|
134
139
|
...provided,
|
|
135
140
|
fontSize: 'inherit',
|
|
136
141
|
padding: 3,
|
|
142
|
+
color: 'var(--color--tinted--ink)',
|
|
137
143
|
}),
|
|
138
144
|
};
|
|
139
145
|
}, [isDisabled, error]);
|