@planningcenter/tapestry-react 4.11.5 → 4.11.6-rc.1

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 (70) hide show
  1. package/dist/Button/Button.d.ts.map +1 -1
  2. package/dist/Button/Button.js +1 -1
  3. package/dist/Checkbox/Checkbox.js +1 -1
  4. package/dist/Dialog/Dialog.d.ts.map +1 -1
  5. package/dist/Dialog/Dialog.js +1 -1
  6. package/dist/Field/Field.d.ts.map +1 -1
  7. package/dist/Field/Field.js +1 -1
  8. package/dist/Icon/Status.d.ts.map +1 -1
  9. package/dist/Icon/Status.js +1 -1
  10. package/dist/Logo/logos/api.js +1 -1
  11. package/dist/Logo/logos/calendar.d.ts.map +1 -1
  12. package/dist/Logo/logos/calendar.js +1 -1
  13. package/dist/Logo/logos/check-ins.d.ts.map +1 -1
  14. package/dist/Logo/logos/check-ins.js +1 -1
  15. package/dist/Logo/logos/church-center.d.ts.map +1 -1
  16. package/dist/Logo/logos/church-center.js +1 -1
  17. package/dist/Logo/logos/giving.d.ts.map +1 -1
  18. package/dist/Logo/logos/giving.js +1 -1
  19. package/dist/Logo/logos/groups.d.ts.map +1 -1
  20. package/dist/Logo/logos/groups.js +1 -1
  21. package/dist/Logo/logos/headcounts.d.ts.map +1 -1
  22. package/dist/Logo/logos/headcounts.js +1 -1
  23. package/dist/Logo/logos/home.d.ts.map +1 -1
  24. package/dist/Logo/logos/home.js +1 -1
  25. package/dist/Logo/logos/login.js +1 -1
  26. package/dist/Logo/logos/music-stand.js +1 -1
  27. package/dist/Logo/logos/people.d.ts.map +1 -1
  28. package/dist/Logo/logos/people.js +1 -1
  29. package/dist/Logo/logos/planning-center.js +1 -1
  30. package/dist/Logo/logos/publishing.d.ts.map +1 -1
  31. package/dist/Logo/logos/publishing.js +1 -1
  32. package/dist/Logo/logos/registrations.js +1 -1
  33. package/dist/Logo/logos/services.d.ts.map +1 -1
  34. package/dist/Logo/logos/services.js +1 -1
  35. package/dist/Pagination/Pagination.d.ts.map +1 -1
  36. package/dist/Pagination/Pagination.js +1 -1
  37. package/dist/Radio/Radio.d.ts.map +1 -1
  38. package/dist/Radio/Radio.js +1 -1
  39. package/dist/Sortable/SortableEmpty.d.ts.map +1 -1
  40. package/dist/Sortable/SortableEmpty.js +1 -1
  41. package/dist/Sortable/SortableItem.d.ts.map +1 -1
  42. package/dist/Sortable/SortableItem.js +1 -1
  43. package/dist/Sortable/SortableList.d.ts.map +1 -1
  44. package/dist/Sortable/SortableList.js +1 -1
  45. package/dist/Table/BodyRow.js +1 -1
  46. package/dist/Table/NavigationArrow.d.ts.map +1 -1
  47. package/dist/Table/NavigationArrow.js +1 -1
  48. package/dist/Table/Table.js +1 -1
  49. package/dist/Table/TableContainer.js +1 -1
  50. package/dist/TimeField/TimeField.js +1 -1
  51. package/dist/ToggleSwitch/ToggleSwitch.d.ts.map +1 -1
  52. package/dist/ToggleSwitch/ToggleSwitch.js +1 -1
  53. package/dist/Tooltip/Tooltip.d.ts.map +1 -1
  54. package/dist/Tooltip/Tooltip.js +1 -1
  55. package/dist/designTokens/index.d.ts +29 -25
  56. package/dist/designTokens/index.d.ts.map +1 -1
  57. package/dist/designTokens/index.js +1 -1
  58. package/dist/system/button-themes.d.ts +285 -40
  59. package/dist/system/button-themes.d.ts.map +1 -1
  60. package/dist/system/button-themes.js +1 -1
  61. package/dist/system/colors/colors.d.ts +61 -57
  62. package/dist/system/colors/colors.d.ts.map +1 -1
  63. package/dist/system/colors/colors.js +1 -1
  64. package/dist/system/default-theme.d.ts +304 -53
  65. package/dist/system/default-theme.d.ts.map +1 -1
  66. package/dist/system/default-theme.js +1 -1
  67. package/dist/system/utils.d.ts +1 -1
  68. package/dist/system/utils.d.ts.map +1 -1
  69. package/dist/system/utils.js +1 -1
  70. package/package.json +2 -2
package/dist/system/default-theme.d.ts CHANGED
@@ -1,9 +1,6 @@
1
1
  import * as general from '@planningcenter/icons/paths/general';
2
2
  import * as tapestry from '@planningcenter/icons/paths/tapestry';
3
3
  declare const defaultTheme: {
4
- pageBody: {
5
- backgroundColor: "var(--t-surface-color-card)";
6
- };
7
4
  boxSizes: Partial<Record<import("..").Sizes, import("..").BoxSize>>;
8
5
  breakpoints: {
9
6
  lg: number;
@@ -24,6 +21,11 @@ declare const defaultTheme: {
24
21
  hover: {
25
22
  backgroundColor: string;
26
23
  };
24
+ disabled: {
25
+ backgroundColor: "var(--t-fill-color-button-interaction-solid-disabled)";
26
+ color: "var(--t-text-color-default-disabled)";
27
+ opacity: number;
28
+ };
27
29
  };
28
30
  naked: {
29
31
  active: {
@@ -33,6 +35,10 @@ declare const defaultTheme: {
33
35
  hover: {
34
36
  backgroundColor: string;
35
37
  };
38
+ disabled: {
39
+ color: "var(--t-text-color-default-disabled)";
40
+ opacity: number;
41
+ };
36
42
  };
37
43
  outline: {
38
44
  active: {
@@ -43,68 +49,214 @@ declare const defaultTheme: {
43
49
  backgroundColor: string;
44
50
  };
45
51
  stroke: string;
52
+ disabled: {
53
+ backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
54
+ color: "var(--t-text-color-default-disabled)";
55
+ opacity: number;
56
+ stroke: "var(--t-border-color-button-neutral)";
57
+ };
46
58
  };
47
59
  };
48
60
  default: {
49
61
  fill: {
62
+ backgroundColor: "var(--t-fill-color-button-neutral-solid-default)";
63
+ color: "var(--t-text-color-status-neutral)";
64
+ hover: {
65
+ backgroundColor: "var(--t-fill-color-button-neutral-solid-hover)";
66
+ };
50
67
  active: {
51
- backgroundColor: string;
68
+ backgroundColor: "var(--t-fill-color-button-neutral-solid-active)";
52
69
  };
53
- backgroundColor: string;
54
- color: string;
55
- hover: {
56
- backgroundColor: string;
70
+ disabled: {
71
+ backgroundColor: "var(--t-fill-color-button-interaction-solid-disabled)";
72
+ color: "var(--t-text-color-default-disabled)";
73
+ opacity: number;
57
74
  };
58
75
  };
59
76
  naked: {
77
+ color: "var(--t-text-color-status-neutral)";
78
+ hover: {
79
+ backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-hover)";
80
+ };
60
81
  active: {
61
- backgroundColor: string;
82
+ backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-active)";
62
83
  };
63
- color: string;
64
- hover: {
65
- backgroundColor: string;
84
+ disabled: {
85
+ color: "var(--t-text-color-default-disabled)";
86
+ opacity: number;
66
87
  };
67
88
  };
68
89
  outline: {
90
+ color: "var(--t-text-color-status-neutral)";
91
+ stroke: "var(--t-border-color-button-neutral)";
92
+ hover: {
93
+ backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-hover)";
94
+ };
69
95
  active: {
70
- backgroundColor: string;
96
+ backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-active)";
71
97
  };
72
- color: string;
98
+ disabled: {
99
+ backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
100
+ color: "var(--t-text-color-default-disabled)";
101
+ opacity: number;
102
+ stroke: "var(--t-border-color-button-neutral)";
103
+ };
104
+ };
105
+ };
106
+ secondaryPageHeader: {
107
+ fill: {
108
+ color: "var(--t-text-color-status-neutral)";
109
+ backgroundColor: "var(--t-fill-color-button-neutral-responsive-header-default)";
110
+ stroke: string;
73
111
  hover: {
74
- backgroundColor: string;
112
+ backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-hover)";
75
113
  };
114
+ active: {
115
+ backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-active)";
116
+ };
117
+ disabled: {
118
+ color: "var(--t-text-color-default-disabled)";
119
+ backgroundColor: "var(--t-fill-color-button-neutral-responsive-header-disabled)";
120
+ borderColor: "var(--t-fill-color-button-neutral-responsive-header-disabled)";
121
+ opacity: number;
122
+ };
123
+ mediaQueries: {
124
+ "@media (min-width: 600px)": {
125
+ color: "var(--t-text-color-status-neutral)";
126
+ backgroundColor: string;
127
+ boxShadow: string;
128
+ hover: {
129
+ backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-hover)";
130
+ };
131
+ active: {
132
+ backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-active)";
133
+ };
134
+ disabled: {
135
+ backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
136
+ color: "var(--t-text-color-default-disabled)";
137
+ opacity: number;
138
+ stroke: "var(--t-border-color-button-neutral)";
139
+ };
140
+ };
141
+ };
142
+ };
143
+ naked: {
144
+ color: "var(--t-text-color-status-neutral)";
145
+ backgroundColor: "var(--t-fill-color-button-neutral-responsive-header-default)";
146
+ stroke: string;
147
+ hover: {
148
+ backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-hover)";
149
+ };
150
+ active: {
151
+ backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-active)";
152
+ };
153
+ disabled: {
154
+ color: "var(--t-text-color-default-disabled)";
155
+ backgroundColor: "var(--t-fill-color-button-neutral-responsive-header-disabled)";
156
+ borderColor: "var(--t-fill-color-button-neutral-responsive-header-disabled)";
157
+ opacity: number;
158
+ };
159
+ mediaQueries: {
160
+ "@media (min-width: 600px)": {
161
+ color: "var(--t-text-color-status-neutral)";
162
+ backgroundColor: string;
163
+ boxShadow: string;
164
+ hover: {
165
+ backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-hover)";
166
+ };
167
+ active: {
168
+ backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-active)";
169
+ };
170
+ disabled: {
171
+ backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
172
+ color: "var(--t-text-color-default-disabled)";
173
+ opacity: number;
174
+ stroke: "var(--t-border-color-button-neutral)";
175
+ };
176
+ };
177
+ };
178
+ };
179
+ outline: {
180
+ color: "var(--t-text-color-status-neutral)";
181
+ backgroundColor: "var(--t-fill-color-button-neutral-responsive-header-default)";
76
182
  stroke: string;
183
+ hover: {
184
+ backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-hover)";
185
+ };
186
+ active: {
187
+ backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-active)";
188
+ };
189
+ disabled: {
190
+ color: "var(--t-text-color-default-disabled)";
191
+ backgroundColor: "var(--t-fill-color-button-neutral-responsive-header-disabled)";
192
+ borderColor: "var(--t-fill-color-button-neutral-responsive-header-disabled)";
193
+ opacity: number;
194
+ };
195
+ mediaQueries: {
196
+ "@media (min-width: 600px)": {
197
+ color: "var(--t-text-color-status-neutral)";
198
+ backgroundColor: string;
199
+ boxShadow: string;
200
+ hover: {
201
+ backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-hover)";
202
+ };
203
+ active: {
204
+ backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-active)";
205
+ };
206
+ disabled: {
207
+ backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
208
+ color: "var(--t-text-color-default-disabled)";
209
+ opacity: number;
210
+ stroke: "var(--t-border-color-button-neutral)";
211
+ };
212
+ };
213
+ };
77
214
  };
78
215
  };
79
216
  error: {
80
217
  fill: {
218
+ backgroundColor: "var(--t-fill-color-button-delete-solid-default)";
219
+ color: "var(--t-text-color-default-inverted)";
220
+ hover: {
221
+ backgroundColor: "var(--t-fill-color-button-delete-solid-hover)";
222
+ };
81
223
  active: {
82
- backgroundColor: string;
224
+ backgroundColor: "var(--t-fill-color-button-delete-solid-active)";
83
225
  };
84
- backgroundColor: string;
85
- color: string;
86
- hover: {
87
- backgroundColor: string;
226
+ disabled: {
227
+ backgroundColor: "var(--t-fill-color-button-interaction-solid-disabled)";
228
+ color: "var(--t-text-color-default-disabled)";
229
+ opacity: number;
88
230
  };
89
231
  };
90
232
  naked: {
233
+ color: "var(--t-text-color-status-error)";
234
+ hover: {
235
+ backgroundColor: "var(--t-fill-color-button-delete-outline-dim-hover)";
236
+ };
91
237
  active: {
92
- backgroundColor: string;
238
+ backgroundColor: "var(--t-fill-color-button-delete-outline-dim-active)";
93
239
  };
94
- color: string;
95
- hover: {
96
- backgroundColor: string;
240
+ disabled: {
241
+ color: "var(--t-text-color-default-disabled)";
242
+ opacity: number;
97
243
  };
98
244
  };
99
245
  outline: {
246
+ color: "var(--t-text-color-status-error)";
247
+ stroke: "var(--t-border-color-button-delete)";
248
+ hover: {
249
+ backgroundColor: "var(--t-fill-color-button-delete-outline-dim-hover)";
250
+ };
100
251
  active: {
101
- backgroundColor: string;
252
+ backgroundColor: "var(--t-fill-color-button-delete-outline-dim-active)";
102
253
  };
103
- color: string;
104
- hover: {
105
- backgroundColor: string;
254
+ disabled: {
255
+ backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
256
+ color: "var(--t-text-color-default-disabled)";
257
+ opacity: number;
258
+ stroke: "var(--t-border-color-button-neutral)";
106
259
  };
107
- stroke: string;
108
260
  };
109
261
  };
110
262
  info: {
@@ -117,6 +269,11 @@ declare const defaultTheme: {
117
269
  hover: {
118
270
  backgroundColor: string;
119
271
  };
272
+ disabled: {
273
+ backgroundColor: "var(--t-fill-color-button-interaction-solid-disabled)";
274
+ color: "var(--t-text-color-default-disabled)";
275
+ opacity: number;
276
+ };
120
277
  };
121
278
  naked: {
122
279
  active: {
@@ -126,6 +283,10 @@ declare const defaultTheme: {
126
283
  hover: {
127
284
  backgroundColor: string;
128
285
  };
286
+ disabled: {
287
+ color: "var(--t-text-color-default-disabled)";
288
+ opacity: number;
289
+ };
129
290
  };
130
291
  outline: {
131
292
  active: {
@@ -136,6 +297,12 @@ declare const defaultTheme: {
136
297
  backgroundColor: string;
137
298
  };
138
299
  stroke: string;
300
+ disabled: {
301
+ backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
302
+ color: "var(--t-text-color-default-disabled)";
303
+ opacity: number;
304
+ stroke: "var(--t-border-color-button-neutral)";
305
+ };
139
306
  };
140
307
  };
141
308
  light: {
@@ -148,6 +315,11 @@ declare const defaultTheme: {
148
315
  hover: {
149
316
  backgroundColor: string;
150
317
  };
318
+ disabled: {
319
+ backgroundColor: "var(--t-fill-color-button-interaction-solid-disabled)";
320
+ color: "var(--t-text-color-default-disabled)";
321
+ opacity: number;
322
+ };
151
323
  };
152
324
  naked: {
153
325
  active: {
@@ -157,6 +329,10 @@ declare const defaultTheme: {
157
329
  hover: {
158
330
  backgroundColor: string;
159
331
  };
332
+ disabled: {
333
+ color: "var(--t-text-color-default-disabled)";
334
+ opacity: number;
335
+ };
160
336
  };
161
337
  outline: {
162
338
  active: {
@@ -167,37 +343,58 @@ declare const defaultTheme: {
167
343
  backgroundColor: string;
168
344
  };
169
345
  stroke: string;
346
+ disabled: {
347
+ backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
348
+ color: "var(--t-text-color-default-disabled)";
349
+ opacity: number;
350
+ stroke: "var(--t-border-color-button-neutral)";
351
+ };
170
352
  };
171
353
  };
172
354
  primary: {
173
355
  fill: {
356
+ backgroundColor: "var(--t-fill-color-button-interaction-solid-default)";
357
+ color: "var(--t-text-color-default-inverted)";
358
+ hover: {
359
+ backgroundColor: "var(--t-fill-color-button-interaction-solid-hover)";
360
+ };
174
361
  active: {
175
- backgroundColor: string;
362
+ backgroundColor: "var(--t-fill-color-button-interaction-solid-active)";
176
363
  };
177
- backgroundColor: string;
178
- color: string;
179
- hover: {
180
- backgroundColor: string;
364
+ disabled: {
365
+ backgroundColor: "var(--t-fill-color-button-interaction-solid-disabled)";
366
+ color: "var(--t-text-color-default-disabled)";
367
+ opacity: number;
181
368
  };
182
369
  };
183
370
  naked: {
371
+ color: "var(--t-text-color-interaction-primary)";
372
+ hover: {
373
+ backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-hover)";
374
+ };
184
375
  active: {
185
- backgroundColor: string;
376
+ backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-active)";
186
377
  };
187
- color: string;
188
- hover: {
189
- backgroundColor: string;
378
+ disabled: {
379
+ color: "var(--t-text-color-default-disabled)";
380
+ opacity: number;
190
381
  };
191
382
  };
192
383
  outline: {
384
+ color: "var(--t-text-color-interaction-primary)";
385
+ stroke: "var(--t-border-color-button-info)";
386
+ hover: {
387
+ backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-hover)";
388
+ };
193
389
  active: {
194
- backgroundColor: string;
390
+ backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-active)";
195
391
  };
196
- color: string;
197
- hover: {
198
- backgroundColor: string;
392
+ disabled: {
393
+ backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
394
+ color: "var(--t-text-color-default-disabled)";
395
+ opacity: number;
396
+ stroke: "var(--t-border-color-button-neutral)";
199
397
  };
200
- stroke: string;
201
398
  };
202
399
  };
203
400
  success: {
@@ -210,6 +407,11 @@ declare const defaultTheme: {
210
407
  hover: {
211
408
  backgroundColor: string;
212
409
  };
410
+ disabled: {
411
+ backgroundColor: "var(--t-fill-color-button-interaction-solid-disabled)";
412
+ color: "var(--t-text-color-default-disabled)";
413
+ opacity: number;
414
+ };
213
415
  };
214
416
  naked: {
215
417
  active: {
@@ -219,6 +421,10 @@ declare const defaultTheme: {
219
421
  hover: {
220
422
  backgroundColor: string;
221
423
  };
424
+ disabled: {
425
+ color: "var(--t-text-color-default-disabled)";
426
+ opacity: number;
427
+ };
222
428
  };
223
429
  outline: {
224
430
  active: {
@@ -229,6 +435,12 @@ declare const defaultTheme: {
229
435
  backgroundColor: string;
230
436
  };
231
437
  stroke: string;
438
+ disabled: {
439
+ backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
440
+ color: "var(--t-text-color-default-disabled)";
441
+ opacity: number;
442
+ stroke: "var(--t-border-color-button-neutral)";
443
+ };
232
444
  };
233
445
  };
234
446
  warning: {
@@ -241,6 +453,11 @@ declare const defaultTheme: {
241
453
  hover: {
242
454
  backgroundColor: string;
243
455
  };
456
+ disabled: {
457
+ backgroundColor: "var(--t-fill-color-button-interaction-solid-disabled)";
458
+ color: "var(--t-text-color-default-disabled)";
459
+ opacity: number;
460
+ };
244
461
  };
245
462
  naked: {
246
463
  active: {
@@ -250,6 +467,10 @@ declare const defaultTheme: {
250
467
  hover: {
251
468
  backgroundColor: string;
252
469
  };
470
+ disabled: {
471
+ color: "var(--t-text-color-default-disabled)";
472
+ opacity: number;
473
+ };
253
474
  };
254
475
  outline: {
255
476
  active: {
@@ -260,6 +481,12 @@ declare const defaultTheme: {
260
481
  backgroundColor: string;
261
482
  };
262
483
  stroke: string;
484
+ disabled: {
485
+ backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
486
+ color: "var(--t-text-color-default-disabled)";
487
+ opacity: number;
488
+ stroke: "var(--t-border-color-button-neutral)";
489
+ };
263
490
  };
264
491
  };
265
492
  white: {
@@ -272,6 +499,11 @@ declare const defaultTheme: {
272
499
  hover: {
273
500
  backgroundColor: string;
274
501
  };
502
+ disabled: {
503
+ backgroundColor: "var(--t-fill-color-button-interaction-solid-disabled)";
504
+ color: "var(--t-text-color-default-disabled)";
505
+ opacity: number;
506
+ };
275
507
  };
276
508
  naked: {
277
509
  active: {
@@ -281,6 +513,10 @@ declare const defaultTheme: {
281
513
  hover: {
282
514
  backgroundColor: string;
283
515
  };
516
+ disabled: {
517
+ color: "var(--t-text-color-default-disabled)";
518
+ opacity: number;
519
+ };
284
520
  };
285
521
  outline: {
286
522
  active: {
@@ -291,6 +527,12 @@ declare const defaultTheme: {
291
527
  backgroundColor: string;
292
528
  };
293
529
  stroke: string;
530
+ disabled: {
531
+ backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
532
+ color: "var(--t-text-color-default-disabled)";
533
+ opacity: number;
534
+ stroke: "var(--t-border-color-button-neutral)";
535
+ };
294
536
  };
295
537
  };
296
538
  };
@@ -299,23 +541,29 @@ declare const defaultTheme: {
299
541
  weekStartsOn: number;
300
542
  };
301
543
  checkbox: {
302
- checkedFill: string;
303
- checkedStroke: string;
304
- fill: string;
305
- focusStroke: string;
306
- stroke: string;
544
+ checkedFill: "var(--t-fill-color-control-primary)";
545
+ checkedStroke: "var(--t-fill-color-control-primary)";
546
+ disabled: {
547
+ checkedFill: "var(--t-fill-color-control-disabled)";
548
+ checkedStroke: "var(--t-border-color-control-disabled)";
549
+ fill: "var(--t-fill-color-neutral-070)";
550
+ stroke: "var(--t-border-color-control-disabled)";
551
+ };
552
+ fill: "var(--t-surface-color-card)";
553
+ focusStroke: "var(--t-fill-color-control-primary)";
554
+ stroke: "var(--t-border-color-control-neutral)";
307
555
  };
308
556
  colors: Partial<import("..").Colors> & Record<string, string | [string, string, string, string, string, string, string, string, string, string]> & {
309
557
  create: {
310
- create35: "hsl(97, 57%, 40%)";
558
+ create35: "var(--t-fill-color-control-secondary)";
311
559
  };
312
560
  grays: {
313
561
  light: {
314
- neutral62: "hsl(0, 0%, 58%)";
315
- neutral81: "hsl(0, 0%, 81%)";
562
+ neutral62: "var(--t-fill-color-neutral-030)";
563
+ neutral81: "var(--t-fill-color-neutral-040)";
316
564
  };
317
565
  };
318
- interaction66: "hsl(204, 100%, 40%)";
566
+ interaction66: "var(--t-fill-color-control-primary)";
319
567
  };
320
568
  elevations: string[];
321
569
  fontSizes: number[];
@@ -326,6 +574,9 @@ declare const defaultTheme: {
326
574
  general: typeof general;
327
575
  tapestry: typeof tapestry;
328
576
  };
577
+ pageBody: {
578
+ backgroundColor: "var(--t-surface-color-card)";
579
+ };
329
580
  id: string;
330
581
  lineHeights: number[];
331
582
  spinner: {
@@ -351,7 +602,7 @@ declare const defaultTheme: {
351
602
  trackColor: string;
352
603
  };
353
604
  toggleSwitch: {
354
- backgroundColor: string;
605
+ backgroundColor: "var(--t-fill-color-control-primary)";
355
606
  };
356
607
  };
357
608
  export default defaultTheme;
package/dist/system/default-theme.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"default-theme.d.ts","sourceRoot":"","sources":["../../src/system/default-theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,qCAAqC,CAAA;AAC9D,OAAO,KAAK,QAAQ,MAAM,sCAAsC,CAAA;AAgBhE,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCjB,CAAA;AAED,eAAe,YAAY,CAAA"}
1
+ {"version":3,"file":"default-theme.d.ts","sourceRoot":"","sources":["../../src/system/default-theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,qCAAqC,CAAA;AAC9D,OAAO,KAAK,QAAQ,MAAM,sCAAsC,CAAA;AAqBhE,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCjB,CAAA;AAED,eAAe,YAAY,CAAA"}
package/dist/system/default-theme.js CHANGED
@@ -1,2 +1,2 @@
1
- import*as r from"@planningcenter/icons/paths/general";import*as o from"@planningcenter/icons/paths/tapestry";import{token as e}from"@planningcenter/tapestry";import{designTokens as s}from"../designTokens/index.js";import{boxSizes as t}from"./box-sizes.js";import{buttonThemes as p}from"./button-themes.js";import{colors as a}from"./colors/colors.js";import"polished";import"../utils.js";var i={checkedFill:"primary-light",checkedStroke:"primary",fill:"surfaceTertiary",focusStroke:"blue-5",stroke:s.checkbox.borderColor},x={pageBody:{backgroundColor:e("--t-surface-color-card")},boxSizes:t,breakpoints:{lg:960,md:720,sm:600,xl:1200,xs:480},button:{themes:p},calendar:{weekStartsOn:0},checkbox:i,colors:a,elevations:["0 2px 5px rgba(219,219,219,0.3)","0 4px 12px rgba(0,0,0,0.12)","0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)","0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)","0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)","0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)"],fontSizes:[30,21,18,16,14,12,10],group:{radius:3},icons:{general:r,tapestry:o},id:"default",lineHeights:[40,32,24,24,20,16,16],spinner:{color:"primary",sizes:{lg:3,md:2.5,sm:2,xl:5,xs:1.75,xxl:8,xxs:1.5},thickness:{lg:5,md:4,sm:3,xl:7,xs:3,xxl:9,xxs:3},trackColor:"primary-lighter"},toggleSwitch:{backgroundColor:"interaction66"}};export{x as default};
1
+ import*as r from"@planningcenter/icons/paths/general";import*as o from"@planningcenter/icons/paths/tapestry";import{token as l}from"@planningcenter/tapestry";import{boxSizes as t}from"./box-sizes.js";import{buttonThemes as e}from"./button-themes.js";import{colors as s}from"./colors/colors.js";import"polished";import"../utils.js";var a={boxSizes:t,breakpoints:{lg:960,md:720,sm:600,xl:1200,xs:480},button:{themes:e},calendar:{weekStartsOn:0},checkbox:{checkedFill:l("--t-fill-color-control-primary"),checkedStroke:l("--t-fill-color-control-primary"),disabled:{checkedFill:l("--t-fill-color-control-disabled"),checkedStroke:l("--t-border-color-control-disabled"),fill:l("--t-fill-color-neutral-070"),stroke:l("--t-border-color-control-disabled")},fill:l("--t-surface-color-card"),focusStroke:l("--t-fill-color-control-primary"),stroke:l("--t-border-color-control-neutral")},colors:s,elevations:["0 2px 5px rgba(219,219,219,0.3)","0 4px 12px rgba(0,0,0,0.12)","0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)","0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)","0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)","0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)"],fontSizes:[30,21,18,16,14,12,10],group:{radius:3},icons:{general:r,tapestry:o},pageBody:{backgroundColor:l("--t-surface-color-card")},id:"default",lineHeights:[40,32,24,24,20,16,16],spinner:{color:"primary",sizes:{lg:3,md:2.5,sm:2,xl:5,xs:1.75,xxl:8,xxs:1.5},thickness:{lg:5,md:4,sm:3,xl:7,xs:3,xxl:9,xxs:3},trackColor:"primary-lighter"},toggleSwitch:{backgroundColor:l("--t-fill-color-control-primary")}};export{a as default};
2
2
  //# sourceMappingURL=default-theme.js.map
package/dist/system/utils.d.ts CHANGED
@@ -24,7 +24,7 @@ export declare function expandDirectionalProperty<Prefix extends string>(name: P
24
24
  export declare function parseSides(...sides: Array<number | string>): string | number;
25
25
  export declare function parseColor(color: any): any;
26
26
  export declare function isLightColor(color: any): boolean;
27
- export declare function getForegroundColor(color: any): "dark-9" | "light-9";
27
+ export declare function getForegroundColor(color: any): "staticDark" | "staticLight";
28
28
  export declare function useThemeValue<T>(path: string | string[], defaultValue?: T): any;
29
29
  export declare function useThemeProps<T extends Record<string, any>>(path: string, props: T): any;
30
30
  export declare function useBoxSize(size?: string): any;
package/dist/system/utils.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/system/utils.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,OAAO,IAAI,CAAA;AACxB,eAAO,MAAM,YAAY,KAAK,CAAA;AAC9B,eAAO,MAAM,KAAK,UAA+C,CAAA;AAEjE,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAA;AAED,eAAO,MAAM,YAAY;;;;;;;CAOxB,CAAA;AAED,wBAAgB,YAAY,CAAC,SAAS,KAAA,EAAE,MAAM,KAAA,OAG7C;AAED,wBAAgB,UAAU,CAAC,GAAG,IAAI,OAAA,WAEjC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAE3D;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEtD;AAED,wBAAgB,yBAAyB,CAAC,MAAM,SAAS,MAAM,EAC7D,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,2FAkBd;AAED,wBAAgB,UAAU,CAAC,GAAG,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,mBAS1D;AAED,wBAAgB,UAAU,CAAC,KAAK,KAAA,OAwB/B;AAED,wBAAgB,YAAY,CAAC,KAAK,KAAA,WASjC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,KAAA,wBAEvC;AAED,wBAAgB,aAAa,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,YAAY,CAAC,EAAE,CAAC,OAKzE;AAED,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACzD,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,CAAC,OAGT;AAED,wBAAgB,UAAU,CAAC,IAAI,SAAO,OAarC"}
1
+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/system/utils.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,OAAO,IAAI,CAAA;AACxB,eAAO,MAAM,YAAY,KAAK,CAAA;AAC9B,eAAO,MAAM,KAAK,UAA+C,CAAA;AAEjE,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAA;AAED,eAAO,MAAM,YAAY;;;;;;;CAOxB,CAAA;AAED,wBAAgB,YAAY,CAAC,SAAS,KAAA,EAAE,MAAM,KAAA,OAG7C;AAED,wBAAgB,UAAU,CAAC,GAAG,IAAI,OAAA,WAEjC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAE3D;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEtD;AAED,wBAAgB,yBAAyB,CAAC,MAAM,SAAS,MAAM,EAC7D,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,2FAkBd;AAED,wBAAgB,UAAU,CAAC,GAAG,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,mBAS1D;AAED,wBAAgB,UAAU,CAAC,KAAK,KAAA,OAwB/B;AAED,wBAAgB,YAAY,CAAC,KAAK,KAAA,WASjC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,KAAA,gCAEvC;AAED,wBAAgB,aAAa,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,YAAY,CAAC,EAAE,CAAC,OAKzE;AAED,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACzD,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,CAAC,OAGT;AAED,wBAAgB,UAAU,CAAC,IAAI,SAAO,OAarC"}
package/dist/system/utils.js CHANGED
@@ -1,2 +1,2 @@
1
- import{__assign as e}from'./../ext/tslib/tslib.es6.js';import{ThemeContext as t}from"@emotion/react";import r from"lodash/get";import{darken as n,lighten as o,parseToRgb as a,getLuminance as c}from"polished";import{useContext as u,useCallback as i}from"react";import{getColor as s}from"./colors/colors.js";import"../utils.js";import f from"./default-theme.js";var l=8,p=["xxs","xs","sm","md","lg","xl","xxl"],m={baseline:"baseline",center:"center",end:"flex-end",start:"flex-start",stretch:"stretch"},d={center:"center",end:"flex-end","space-around":"space-around","space-between":"space-between","space-evenly":"space-evenly",start:"flex-start"};function h(e,t){var r=p.indexOf(e);return p[r+t]||e}function v(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return e.some((function(e){return null!=e}))}function x(e){return"number"==typeof e?8*e+"px":e}function g(e){return e/8}function b(t,r){var n=r.split(/\s+/);if(1===n.length){var o=n[0];n=[o,o,o,o]}else 2===n.length?n=n.concat(n):3===n.length&&n.push(n[1]);return["Top","Right","Bottom","Left"].reduce((function(r,o,a){var c;return e(e({},r),((c={})["".concat(t).concat(o)]=n[a],c))}),{})}function y(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return e.reduce((function(e,t){return"string"==typeof t?t:null!=t?8*t+"px":e}),0)}function j(e){if("object"==typeof e){var t=s(e.base)||e.base;if("transparent"===t)return t;if(e.darken&&(t=n(e.darken,t)),e.lighten&&(t=o(e.lighten,t)),void 0!==e.alpha){var r=a(t),c=r.red,u=r.green,i=r.blue;return"rgba(".concat(c,", ").concat(u,", ").concat(i,", ").concat(e.alpha,")")}return t}return s(e)||e}function k(e){if("transparent"===e)return null;try{return c(j(e))>.5}catch(e){return null}}function O(e){return k(e)?"dark-9":"light-9"}function w(e,n){var o=u(t);return e?r(o,e,n||r(f,e)):o||f}function z(t,r){return e(e({},w(t)),r)}function S(t){void 0===t&&(t="md");var r=w("boxSizes"),n=i((function(e){var n=Object.keys(r).indexOf(t);return p[n+e]||t}),[t]);return e(e({},r[t]||{}),{navigateSize:n})}export{m as alignTypes,v as anyDefined,g as convertToBaseUnit,b as expandDirectionalProperty,O as getForegroundColor,k as isLightColor,d as justifyTypes,h as navigateSize,j as parseColor,y as parseSides,p as sizes,l as spacing,x as spacingValue,S as useBoxSize,z as useThemeProps,w as useThemeValue};
1
+ import{__assign as t}from'./../ext/tslib/tslib.es6.js';import{ThemeContext as e}from"@emotion/react";import r from"lodash/get";import{darken as n,lighten as o,parseToRgb as a,getLuminance as c}from"polished";import{useContext as i,useCallback as u}from"react";import{getColor as s}from"./colors/colors.js";import"../utils.js";import f from"./default-theme.js";var l=8,p=["xxs","xs","sm","md","lg","xl","xxl"],m={baseline:"baseline",center:"center",end:"flex-end",start:"flex-start",stretch:"stretch"},d={center:"center",end:"flex-end","space-around":"space-around","space-between":"space-between","space-evenly":"space-evenly",start:"flex-start"};function h(t,e){var r=p.indexOf(t);return p[r+e]||t}function v(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];return t.some((function(t){return null!=t}))}function x(t){return"number"==typeof t?8*t+"px":t}function g(t){return t/8}function b(e,r){var n=r.split(/\s+/);if(1===n.length){var o=n[0];n=[o,o,o,o]}else 2===n.length?n=n.concat(n):3===n.length&&n.push(n[1]);return["Top","Right","Bottom","Left"].reduce((function(r,o,a){var c;return t(t({},r),((c={})["".concat(e).concat(o)]=n[a],c))}),{})}function y(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];return t.reduce((function(t,e){return"string"==typeof e?e:null!=e?8*e+"px":t}),0)}function j(t){if("object"==typeof t){var e=s(t.base)||t.base;if("transparent"===e)return e;if(t.darken&&(e=n(t.darken,e)),t.lighten&&(e=o(t.lighten,e)),void 0!==t.alpha){var r=a(e),c=r.red,i=r.green,u=r.blue;return"rgba(".concat(c,", ").concat(i,", ").concat(u,", ").concat(t.alpha,")")}return e}return s(t)||t}function k(t){if("transparent"===t)return null;try{return c(j(t))>.5}catch(t){return null}}function O(t){return k(t)?"staticDark":"staticLight"}function w(t,n){var o=i(e);return t?r(o,t,n||r(f,t)):o||f}function z(e,r){return t(t({},w(e)),r)}function L(e){void 0===e&&(e="md");var r=w("boxSizes"),n=u((function(t){var n=Object.keys(r).indexOf(e);return p[n+t]||e}),[e]);return t(t({},r[e]||{}),{navigateSize:n})}export{m as alignTypes,v as anyDefined,g as convertToBaseUnit,b as expandDirectionalProperty,O as getForegroundColor,k as isLightColor,d as justifyTypes,h as navigateSize,j as parseColor,y as parseSides,p as sizes,l as spacing,x as spacingValue,L as useBoxSize,z as useThemeProps,w as useThemeValue};
2
2
  //# sourceMappingURL=utils.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@planningcenter/tapestry-react",
3
- "version": "4.11.5",
3
+ "version": "4.11.6-rc.1",
4
4
  "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
5
5
  "author": "Front End Systems Engineering <frontend@pco.bz>",
6
6
  "main": "./dist/index.js",
@@ -78,7 +78,7 @@
78
78
  "dependencies": {
79
79
  "@planningcenter/icons": "^15.25.3",
80
80
  "@planningcenter/react-beautiful-dnd": "^13.4.0",
81
- "@planningcenter/tapestry": "^1.4.1",
81
+ "@planningcenter/tapestry": "^2.0.0",
82
82
  "@popmotion/popcorn": "^0.4.4",
83
83
  "@popperjs/core": "^2.11.6",
84
84
  "@react-hook/window-size": "^3.1.1",