datocms-react-ui 2.1.3 → 3.0.0-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 (135) 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/ButtonGroup/Group/styles.module.css.json +1 -1
  4. package/dist/cjs/Canvas/index.js +67 -264
  5. package/dist/cjs/Canvas/index.js.map +1 -1
  6. package/dist/cjs/Canvas/styles.module.css.json +1 -1
  7. package/dist/cjs/ContextInspector/styles.module.css.json +1 -1
  8. package/dist/cjs/Dropdown/styles.module.css.json +1 -1
  9. package/dist/cjs/FieldError/styles.module.css.json +1 -1
  10. package/dist/cjs/FieldHint/styles.module.css.json +1 -1
  11. package/dist/cjs/FormLabel/styles.module.css.json +1 -1
  12. package/dist/cjs/HotKey/styles.module.css.json +1 -1
  13. package/dist/cjs/Section/styles.module.css.json +1 -1
  14. package/dist/cjs/SelectInput/index.js +36 -20
  15. package/dist/cjs/SelectInput/index.js.map +1 -1
  16. package/dist/cjs/SidebarPanel/index.js +4 -11
  17. package/dist/cjs/SidebarPanel/index.js.map +1 -1
  18. package/dist/cjs/SidebarPanel/styles.module.css.json +1 -1
  19. package/dist/cjs/Spinner/styles.module.css.json +1 -1
  20. package/dist/cjs/SplitView/SplitViewSash/styles.module.css.json +1 -1
  21. package/dist/cjs/SwitchField/styles.module.css.json +1 -1
  22. package/dist/cjs/SwitchInput/styles.module.css.json +1 -1
  23. package/dist/cjs/TextInput/styles.module.css.json +1 -1
  24. package/dist/cjs/TextareaInput/styles.module.css.json +1 -1
  25. package/dist/cjs/Toolbar/Button/styles.module.css.json +1 -1
  26. package/dist/cjs/Toolbar/Toolbar/index.js +3 -3
  27. package/dist/cjs/Toolbar/Toolbar/styles.module.css.json +1 -1
  28. package/dist/cjs/Tooltip/TooltipContent/styles.module.css.json +1 -1
  29. package/dist/cjs/Tooltip/TooltipDelayGroup/index.js +2 -2
  30. package/dist/cjs/VerticalSplit/index.js +4 -4
  31. package/dist/cjs/VerticalSplit/styles.module.css.json +1 -1
  32. package/dist/cjs/generateStyleFromCtx/index.js +133 -2
  33. package/dist/cjs/generateStyleFromCtx/index.js.map +1 -1
  34. package/dist/cjs/icons.js +8 -8
  35. package/dist/cjs/icons.js.map +1 -1
  36. package/dist/esm/Button/styles.module.css.json +1 -1
  37. package/dist/esm/ButtonGroup/Button/styles.module.css.json +1 -1
  38. package/dist/esm/ButtonGroup/Group/styles.module.css.json +1 -1
  39. package/dist/esm/Canvas/index.d.ts +67 -264
  40. package/dist/esm/Canvas/index.js +67 -264
  41. package/dist/esm/Canvas/index.js.map +1 -1
  42. package/dist/esm/Canvas/styles.module.css.json +1 -1
  43. package/dist/esm/ContextInspector/styles.module.css.json +1 -1
  44. package/dist/esm/Dropdown/styles.module.css.json +1 -1
  45. package/dist/esm/FieldError/styles.module.css.json +1 -1
  46. package/dist/esm/FieldHint/styles.module.css.json +1 -1
  47. package/dist/esm/FormLabel/styles.module.css.json +1 -1
  48. package/dist/esm/HotKey/styles.module.css.json +1 -1
  49. package/dist/esm/Section/styles.module.css.json +1 -1
  50. package/dist/esm/SelectInput/index.js +36 -20
  51. package/dist/esm/SelectInput/index.js.map +1 -1
  52. package/dist/esm/SidebarPanel/index.d.ts +2 -2
  53. package/dist/esm/SidebarPanel/index.js +4 -11
  54. package/dist/esm/SidebarPanel/index.js.map +1 -1
  55. package/dist/esm/SidebarPanel/styles.module.css.json +1 -1
  56. package/dist/esm/Spinner/styles.module.css.json +1 -1
  57. package/dist/esm/SplitView/SplitViewSash/styles.module.css.json +1 -1
  58. package/dist/esm/SwitchField/styles.module.css.json +1 -1
  59. package/dist/esm/SwitchInput/styles.module.css.json +1 -1
  60. package/dist/esm/TextInput/styles.module.css.json +1 -1
  61. package/dist/esm/TextareaInput/styles.module.css.json +1 -1
  62. package/dist/esm/Toolbar/Button/styles.module.css.json +1 -1
  63. package/dist/esm/Toolbar/Toolbar/index.d.ts +3 -3
  64. package/dist/esm/Toolbar/Toolbar/index.js +3 -3
  65. package/dist/esm/Toolbar/Toolbar/styles.module.css.json +1 -1
  66. package/dist/esm/Tooltip/TooltipContent/styles.module.css.json +1 -1
  67. package/dist/esm/Tooltip/TooltipDelayGroup/index.d.ts +2 -2
  68. package/dist/esm/Tooltip/TooltipDelayGroup/index.js +2 -2
  69. package/dist/esm/VerticalSplit/index.d.ts +4 -4
  70. package/dist/esm/VerticalSplit/index.js +4 -4
  71. package/dist/esm/VerticalSplit/styles.module.css.json +1 -1
  72. package/dist/esm/generateStyleFromCtx/index.js +133 -2
  73. package/dist/esm/generateStyleFromCtx/index.js.map +1 -1
  74. package/dist/esm/icons.js +8 -8
  75. package/dist/esm/icons.js.map +1 -1
  76. package/dist/types/Canvas/index.d.ts +67 -264
  77. package/dist/types/SidebarPanel/index.d.ts +2 -2
  78. package/dist/types/Toolbar/Toolbar/index.d.ts +3 -3
  79. package/dist/types/Tooltip/TooltipDelayGroup/index.d.ts +2 -2
  80. package/dist/types/VerticalSplit/index.d.ts +4 -4
  81. package/package.json +3 -3
  82. package/src/Button/styles.module.css +19 -19
  83. package/src/Button/styles.module.css.json +1 -1
  84. package/src/ButtonGroup/Button/styles.module.css +15 -17
  85. package/src/ButtonGroup/Button/styles.module.css.json +1 -1
  86. package/src/ButtonGroup/Group/styles.module.css +1 -1
  87. package/src/ButtonGroup/Group/styles.module.css.json +1 -1
  88. package/src/Canvas/index.tsx +67 -264
  89. package/src/Canvas/styles.module.css +75 -16
  90. package/src/Canvas/styles.module.css.json +1 -1
  91. package/src/ContextInspector/styles.module.css +10 -10
  92. package/src/ContextInspector/styles.module.css.json +1 -1
  93. package/src/Dropdown/styles.module.css +30 -28
  94. package/src/Dropdown/styles.module.css.json +1 -1
  95. package/src/FieldError/styles.module.css +1 -1
  96. package/src/FieldError/styles.module.css.json +1 -1
  97. package/src/FieldHint/styles.module.css +1 -1
  98. package/src/FieldHint/styles.module.css.json +1 -1
  99. package/src/FormLabel/styles.module.css +2 -2
  100. package/src/FormLabel/styles.module.css.json +1 -1
  101. package/src/HotKey/styles.module.css +1 -1
  102. package/src/HotKey/styles.module.css.json +1 -1
  103. package/src/Section/styles.module.css +8 -8
  104. package/src/Section/styles.module.css.json +1 -1
  105. package/src/SelectInput/index.tsx +47 -26
  106. package/src/SidebarPanel/index.tsx +4 -29
  107. package/src/SidebarPanel/styles.module.css +6 -6
  108. package/src/SidebarPanel/styles.module.css.json +1 -1
  109. package/src/Spinner/styles.module.css +1 -1
  110. package/src/Spinner/styles.module.css.json +1 -1
  111. package/src/SplitView/SplitViewSash/styles.module.css +7 -7
  112. package/src/SplitView/SplitViewSash/styles.module.css.json +1 -1
  113. package/src/SwitchField/styles.module.css +1 -1
  114. package/src/SwitchField/styles.module.css.json +1 -1
  115. package/src/SwitchInput/styles.module.css +16 -13
  116. package/src/SwitchInput/styles.module.css.json +1 -1
  117. package/src/TextInput/styles.module.css +13 -11
  118. package/src/TextInput/styles.module.css.json +1 -1
  119. package/src/TextareaInput/styles.module.css +13 -11
  120. package/src/TextareaInput/styles.module.css.json +1 -1
  121. package/src/Toolbar/Button/styles.module.css +4 -4
  122. package/src/Toolbar/Button/styles.module.css.json +1 -1
  123. package/src/Toolbar/Toolbar/index.tsx +3 -3
  124. package/src/Toolbar/Toolbar/styles.module.css +2 -2
  125. package/src/Toolbar/Toolbar/styles.module.css.json +1 -1
  126. package/src/Tooltip/TooltipContent/styles.module.css +2 -2
  127. package/src/Tooltip/TooltipContent/styles.module.css.json +1 -1
  128. package/src/Tooltip/TooltipDelayGroup/index.tsx +2 -2
  129. package/src/VerticalSplit/index.tsx +4 -4
  130. package/src/VerticalSplit/styles.module.css +7 -11
  131. package/src/VerticalSplit/styles.module.css.json +1 -1
  132. package/src/generateStyleFromCtx/index.ts +153 -0
  133. package/src/icons.tsx +8 -0
  134. package/styles.css +29 -1
  135. package/types.json +388 -388
package/dist/esm/Canvas/index.d.ts CHANGED
@@ -9,281 +9,84 @@ export declare type CanvasProps = {
9
9
  children: ReactNode;
10
10
  };
11
11
  /**
12
- * @example Color palette CSS variables
12
+ * @example Semantic color token CSS variables
13
13
  *
14
- * Within the `Canvas` component, a color palette is made available as a set of
14
+ * Within the `Canvas` component, semantic color tokens are made available as
15
15
  * CSS variables, allowing you to conform to the theme of the current
16
- * environment:
16
+ * environment (including dark mode):
17
17
  *
18
18
  * ```js
19
19
  * <Canvas ctx={ctx}>
20
- * <Section title="Text colors">
20
+ * <Section title="Standalone">
21
21
  * <table>
22
22
  * <tbody>
23
- * <tr>
24
- * <td>
25
- * <code>--base-body-color</code>
26
- * </td>
27
- * <td width="30%">
28
- * <div
29
- * style={{
30
- * width: '30px',
31
- * height: '30px',
32
- * background: 'var(--base-body-color)',
33
- * }}
34
- * />
35
- * </td>
36
- * </tr>
37
- * <tr>
38
- * <td>
39
- * <code>--light-body-color</code>
40
- * </td>
41
- * <td width="30%">
42
- * <div
43
- * style={{
44
- * width: '30px',
45
- * height: '30px',
46
- * background: 'var(--light-body-color)',
47
- * }}
48
- * />
49
- * </td>
50
- * </tr>
51
- * <tr>
52
- * <td>
53
- * <code>--placeholder-body-color</code>
54
- * </td>
55
- * <td width="30%">
56
- * <div
57
- * style={{
58
- * width: '30px',
59
- * height: '30px',
60
- * background: 'var(--placeholder-body-color)',
61
- * }}
62
- * />
63
- * </td>
64
- * </tr>
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
+ * ))}
65
41
  * </tbody>
66
42
  * </table>
67
43
  * </Section>
68
- * <Section title="UI colors">
44
+ * <Section title="Contexts">
69
45
  * <table>
70
46
  * <tbody>
71
- * <tr>
72
- * <td>
73
- * <code>--light-bg-color</code>
74
- * </td>
75
- * <td width="30%">
76
- * <div
77
- * style={{
78
- * width: '30px',
79
- * height: '30px',
80
- * background: 'var(--light-bg-color)',
81
- * }}
82
- * />
83
- * </td>
84
- * </tr>
85
- * <tr>
86
- * <td>
87
- * <code>--lighter-bg-color</code>
88
- * </td>
89
- * <td width="30%">
90
- * <div
91
- * style={{
92
- * width: '30px',
93
- * height: '30px',
94
- * background: 'var(--lighter-bg-color)',
95
- * }}
96
- * />
97
- * </td>
98
- * </tr>
99
- * <tr>
100
- * <td>
101
- * <code>--disabled-bg-color</code>
102
- * </td>
103
- * <td width="30%">
104
- * <div
105
- * style={{
106
- * width: '30px',
107
- * height: '30px',
108
- * background: 'var(--disabled-bg-color)',
109
- * }}
110
- * />
111
- * </td>
112
- * </tr>
113
- * <tr>
114
- * <td>
115
- * <code>--border-color</code>
116
- * </td>
117
- * <td width="30%">
118
- * <div
119
- * style={{
120
- * width: '30px',
121
- * height: '30px',
122
- * background: 'var(--border-color)',
123
- * }}
124
- * />
125
- * </td>
126
- * </tr>
127
- * <tr>
128
- * <td>
129
- * <code>--darker-border-color</code>
130
- * </td>
131
- * <td width="30%">
132
- * <div
133
- * style={{
134
- * width: '30px',
135
- * height: '30px',
136
- * background: 'var(--darker-border-color)',
137
- * }}
138
- * />
139
- * </td>
140
- * </tr>
141
- * <tr>
142
- * <td>
143
- * <code>--alert-color</code>
144
- * </td>
145
- * <td width="30%">
146
- * <div
147
- * style={{
148
- * width: '30px',
149
- * height: '30px',
150
- * background: 'var(--alert-color)',
151
- * }}
152
- * />
153
- * </td>
154
- * </tr>
155
- * <tr>
156
- * <td>
157
- * <code>--warning-color</code>
158
- * </td>
159
- * <td width="30%">
160
- * <div
161
- * style={{
162
- * width: '30px',
163
- * height: '30px',
164
- * background: 'var(--warning-color)',
165
- * }}
166
- * />
167
- * </td>
168
- * </tr>
169
- * <tr>
170
- * <td>
171
- * <code>--notice-color</code>
172
- * </td>
173
- * <td width="30%">
174
- * <div
175
- * style={{
176
- * width: '30px',
177
- * height: '30px',
178
- * background: 'var(--notice-color)',
179
- * }}
180
- * />
181
- * </td>
182
- * </tr>
183
- * <tr>
184
- * <td>
185
- * <code>--warning-bg-color</code>
186
- * </td>
187
- * <td width="30%">
188
- * <div
189
- * style={{
190
- * width: '30px',
191
- * height: '30px',
192
- * background: 'var(--warning-bg-color)',
193
- * }}
194
- * />
195
- * </td>
196
- * </tr>
197
- * <tr>
198
- * <td>
199
- * <code>--add-color</code>
200
- * </td>
201
- * <td width="30%">
202
- * <div
203
- * style={{
204
- * width: '30px',
205
- * height: '30px',
206
- * background: 'var(--add-color)',
207
- * }}
208
- * />
209
- * </td>
210
- * </tr>
211
- * <tr>
212
- * <td>
213
- * <code>--remove-color</code>
214
- * </td>
215
- * <td width="30%">
216
- * <div
217
- * style={{
218
- * width: '30px',
219
- * height: '30px',
220
- * background: 'var(--remove-color)',
221
- * }}
222
- * />
223
- * </td>
224
- * </tr>
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
+ * ))}
225
69
  * </tbody>
226
70
  * </table>
227
71
  * </Section>
228
- * <Section title="Project-specific colors">
72
+ * <Section title="Feedback">
229
73
  * <table>
230
74
  * <tbody>
231
- * <tr>
232
- * <td>
233
- * <code>--accent-color</code>
234
- * </td>
235
- * <td width="30%">
236
- * <div
237
- * style={{
238
- * width: '30px',
239
- * height: '30px',
240
- * background: 'var(--accent-color)',
241
- * }}
242
- * />
243
- * </td>
244
- * </tr>
245
- * <tr>
246
- * <td>
247
- * <code>--primary-color</code>
248
- * </td>
249
- * <td width="30%">
250
- * <div
251
- * style={{
252
- * width: '30px',
253
- * height: '30px',
254
- * background: 'var(--primary-color)',
255
- * }}
256
- * />
257
- * </td>
258
- * </tr>
259
- * <tr>
260
- * <td>
261
- * <code>--light-color</code>
262
- * </td>
263
- * <td width="30%">
264
- * <div
265
- * style={{
266
- * width: '30px',
267
- * height: '30px',
268
- * background: 'var(--light-color)',
269
- * }}
270
- * />
271
- * </td>
272
- * </tr>
273
- * <tr>
274
- * <td>
275
- * <code>--dark-color</code>
276
- * </td>
277
- * <td width="30%">
278
- * <div
279
- * style={{
280
- * width: '30px',
281
- * height: '30px',
282
- * background: 'var(--dark-color)',
283
- * }}
284
- * />
285
- * </td>
286
- * </tr>
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
+ * ))}
287
90
  * </tbody>
288
91
  * </table>
289
92
  * </Section>
@@ -418,7 +221,7 @@ export declare type CanvasProps = {
418
221
  * <td>
419
222
  * <div
420
223
  * style={{
421
- * background: 'var(--accent-color)',
224
+ * background: 'var(--color--accent--surface)',
422
225
  * width: 'var(--spacing-s)',
423
226
  * height: 'var(--spacing-s)',
424
227
  * }}
@@ -432,7 +235,7 @@ export declare type CanvasProps = {
432
235
  * <td>
433
236
  * <div
434
237
  * style={{
435
- * background: 'var(--accent-color)',
238
+ * background: 'var(--color--accent--surface)',
436
239
  * width: 'var(--spacing-m)',
437
240
  * height: 'var(--spacing-m)',
438
241
  * }}
@@ -446,7 +249,7 @@ export declare type CanvasProps = {
446
249
  * <td>
447
250
  * <div
448
251
  * style={{
449
- * background: 'var(--accent-color)',
252
+ * background: 'var(--color--accent--surface)',
450
253
  * width: 'var(--spacing-l)',
451
254
  * height: 'var(--spacing-l)',
452
255
  * }}
@@ -460,7 +263,7 @@ export declare type CanvasProps = {
460
263
  * <td>
461
264
  * <div
462
265
  * style={{
463
- * background: 'var(--accent-color)',
266
+ * background: 'var(--color--accent--surface)',
464
267
  * width: 'var(--spacing-xl)',
465
268
  * height: 'var(--spacing-xl)',
466
269
  * }}
@@ -474,7 +277,7 @@ export declare type CanvasProps = {
474
277
  * <td>
475
278
  * <div
476
279
  * style={{
477
- * background: 'var(--accent-color)',
280
+ * background: 'var(--color--accent--surface)',
478
281
  * width: 'var(--spacing-xxl)',
479
282
  * height: 'var(--spacing-xxl)',
480
283
  * }}
@@ -488,7 +291,7 @@ export declare type CanvasProps = {
488
291
  * <td>
489
292
  * <div
490
293
  * style={{
491
- * background: 'var(--accent-color)',
294
+ * background: 'var(--color--accent--surface)',
492
295
  * width: 'var(--spacing-xxxl)',
493
296
  * height: 'var(--spacing-xxxl)',
494
297
  * }}