braid-design-system 32.1.0 → 32.2.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 (148) hide show
  1. package/CHANGELOG.md +133 -0
  2. package/codemod/dist/wrapper.js +181 -183
  3. package/color-mode/query-param/index.d.ts +1 -0
  4. package/color-mode/query-param/package.json +1 -1
  5. package/css/index.d.ts +1 -0
  6. package/css/package.json +1 -1
  7. package/dist/ToastContext.chunk.cjs +21 -21
  8. package/dist/ToastContext.chunk.mjs +120 -120
  9. package/dist/Toggle.chunk.cjs +22 -32
  10. package/dist/Toggle.chunk.mjs +199 -209
  11. package/dist/color-mode/query-param.mjs +1 -1
  12. package/dist/css.d.ts +1 -667
  13. package/dist/css.mjs +7 -7
  14. package/dist/index.d.ts +1 -3952
  15. package/dist/index.mjs +164 -164
  16. package/dist/playroom/FrameComponent.d.ts +1 -323
  17. package/dist/playroom/FrameComponent.mjs +4 -4
  18. package/dist/playroom/components.d.ts +1 -4027
  19. package/dist/playroom/components.mjs +124 -124
  20. package/dist/playroom/scope.d.ts +1 -385
  21. package/dist/playroom/scope.mjs +4 -4
  22. package/dist/playroom/snippets.d.ts +1 -7
  23. package/dist/playroomState.chunk.cjs +1 -1
  24. package/dist/playroomState.chunk.mjs +3 -3
  25. package/dist/reset.d.ts +5075 -1
  26. package/dist/side-effects/lib/components/BraidProvider/BraidProvider.mjs +12 -12
  27. package/dist/side-effects/lib/css/reset/index.mjs +1 -1
  28. package/dist/side-effects/lib/css/reset/resetTracker.mjs +2 -2
  29. package/dist/side-effects/lib/themes/baseTokens/apac.cjs +8 -9
  30. package/dist/side-effects/lib/themes/baseTokens/apac.mjs +8 -10
  31. package/dist/side-effects/lib/themes/index.mjs +5 -5
  32. package/dist/side-effects/lib/themes/makeRuntimeTokens.cjs +4 -10
  33. package/dist/side-effects/lib/themes/makeRuntimeTokens.mjs +5 -10
  34. package/dist/side-effects/lib/themes/tokenType.cjs +15 -0
  35. package/dist/side-effects/lib/themes/tokenType.mjs +16 -0
  36. package/dist/styles/lib/components/Accordion/AccordionItem.css.mjs +3 -3
  37. package/dist/styles/lib/components/Alert/Alert.css.mjs +3 -3
  38. package/dist/styles/lib/components/Autosuggest/Autosuggest.css.mjs +6 -6
  39. package/dist/styles/lib/components/Button/Button.css.cjs +24 -23
  40. package/dist/styles/lib/components/Button/Button.css.mjs +39 -38
  41. package/dist/styles/lib/components/ButtonIcon/ButtonIcon.css.mjs +1 -1
  42. package/dist/styles/lib/components/Column/Column.css.mjs +3 -3
  43. package/dist/styles/lib/components/ContentBlock/ContentBlock.css.mjs +1 -1
  44. package/dist/styles/lib/components/Divider/Divider.css.mjs +7 -7
  45. package/dist/styles/lib/components/Dropdown/Dropdown.css.mjs +2 -2
  46. package/dist/styles/lib/components/Hidden/Hidden.css.mjs +1 -1
  47. package/dist/styles/lib/components/HiddenVisually/HiddenVisually.css.mjs +1 -1
  48. package/dist/styles/lib/components/List/List.css.mjs +4 -4
  49. package/dist/styles/lib/components/Loader/Loader.css.mjs +7 -7
  50. package/dist/styles/lib/components/MenuItem/useMenuItem.css.mjs +1 -1
  51. package/dist/styles/lib/components/MenuRenderer/MenuRenderer.css.mjs +5 -5
  52. package/dist/styles/lib/components/MonthPicker/MonthPicker.css.mjs +1 -1
  53. package/dist/styles/lib/components/OverflowMenu/OverflowMenu.css.mjs +1 -1
  54. package/dist/styles/lib/components/Pagination/Pagination.css.mjs +6 -6
  55. package/dist/styles/lib/components/Rating/Rating.css.mjs +6 -6
  56. package/dist/styles/lib/components/Stepper/Stepper.css.mjs +21 -21
  57. package/dist/styles/lib/components/Tabs/Tabs.css.mjs +17 -17
  58. package/dist/styles/lib/components/Tag/Tag.css.mjs +1 -1
  59. package/dist/styles/lib/components/TextDropdown/TextDropdown.css.mjs +4 -4
  60. package/dist/styles/lib/components/TextLink/TextLink.css.mjs +8 -8
  61. package/dist/styles/lib/components/Textarea/Highlight/Highlight.css.mjs +1 -1
  62. package/dist/styles/lib/components/Textarea/Textarea.css.mjs +3 -3
  63. package/dist/styles/lib/components/Tiles/Tiles.css.mjs +5 -5
  64. package/dist/styles/lib/components/Toggle/Toggle.css.mjs +20 -20
  65. package/dist/styles/lib/components/TooltipRenderer/TooltipRenderer.css.cjs +1 -5
  66. package/dist/styles/lib/components/TooltipRenderer/TooltipRenderer.css.mjs +7 -11
  67. package/dist/styles/lib/components/icons/IconArrow/IconArrow.css.mjs +4 -4
  68. package/dist/styles/lib/components/icons/IconChevron/IconChevron.css.mjs +4 -4
  69. package/dist/styles/lib/components/icons/IconThumb/IconThumb.css.mjs +2 -2
  70. package/dist/styles/lib/components/private/AvoidWidowIcon/AvoidWidowIcon.css.mjs +1 -1
  71. package/dist/styles/lib/components/private/Field/Field.css.mjs +8 -8
  72. package/dist/styles/lib/components/private/InlineField/InlineField.css.mjs +17 -17
  73. package/dist/styles/lib/components/private/Keyline/Keyline.css.cjs +4 -0
  74. package/dist/styles/lib/components/private/Keyline/Keyline.css.mjs +11 -7
  75. package/dist/styles/lib/components/private/Modal/Modal.css.mjs +16 -16
  76. package/dist/styles/lib/components/private/Modal/ModalExternalGutter.mjs +1 -1
  77. package/dist/styles/lib/components/private/Placeholder/Placeholder.css.mjs +6 -6
  78. package/dist/styles/lib/components/private/Truncate/Truncate.css.mjs +1 -1
  79. package/dist/styles/lib/components/private/hideFocusRings/hideFocusRings.css.mjs +2 -2
  80. package/dist/styles/lib/components/private/hideFocusRings/hideFocusRingsDataAttribute.mjs +1 -1
  81. package/dist/styles/lib/components/private/touchable/debugTouchable.mjs +1 -1
  82. package/dist/styles/lib/components/private/touchable/hitArea.mjs +1 -1
  83. package/dist/styles/lib/components/private/touchable/virtualTouchable.css.mjs +4 -4
  84. package/dist/styles/lib/components/private/touchable/virtualTouchableRules.mjs +2 -2
  85. package/dist/styles/lib/components/useToast/Toast.css.mjs +1 -1
  86. package/dist/styles/lib/css/atoms/atomicProperties.mjs +6 -6
  87. package/dist/styles/lib/css/atoms/atoms.mjs +3 -3
  88. package/dist/styles/lib/css/atoms/sprinkles.css.mjs +8 -8
  89. package/dist/styles/lib/css/breakpoints.mjs +2 -2
  90. package/dist/styles/lib/css/colorModeStyle.mjs +2 -2
  91. package/dist/styles/lib/css/lineHeightContainer.css.mjs +3 -3
  92. package/dist/styles/lib/css/negativeMargin/negativeMargin.css.cjs +4 -9
  93. package/dist/styles/lib/css/negativeMargin/negativeMargin.css.mjs +3 -8
  94. package/dist/styles/lib/css/reset/reset.css.mjs +3 -3
  95. package/dist/styles/lib/css/responsiveStyle.cjs +2 -2
  96. package/dist/styles/lib/css/responsiveStyle.mjs +3 -3
  97. package/dist/styles/lib/css/textAlignedToIcon.css.mjs +3 -3
  98. package/dist/styles/lib/css/typography.css.cjs +1 -16
  99. package/dist/styles/lib/css/typography.css.mjs +5 -20
  100. package/dist/styles/lib/hooks/useIcon/icon.css.mjs +8 -8
  101. package/dist/styles/lib/themes/apac/apacTheme.css.mjs +3 -3
  102. package/dist/styles/lib/themes/apac/tokens.mjs +2 -2
  103. package/dist/styles/lib/themes/docs/docsTheme.css.mjs +3 -3
  104. package/dist/styles/lib/themes/docs/tokens.cjs +8 -8
  105. package/dist/styles/lib/themes/docs/tokens.mjs +8 -10
  106. package/dist/styles/lib/themes/makeBraidTheme.mjs +4 -4
  107. package/dist/styles/lib/themes/makeVanillaTheme.cjs +23 -10
  108. package/dist/styles/lib/themes/makeVanillaTheme.mjs +23 -10
  109. package/dist/styles/lib/themes/seekBusiness/seekBusinessTheme.css.mjs +3 -3
  110. package/dist/styles/lib/themes/seekBusiness/tokens.mjs +2 -2
  111. package/dist/styles/lib/themes/vars.css.mjs +3 -3
  112. package/dist/styles/lib/themes/wireframe/tokens.cjs +25 -29
  113. package/dist/styles/lib/themes/wireframe/tokens.mjs +25 -31
  114. package/dist/styles/lib/themes/wireframe/wireframeTheme.css.mjs +3 -3
  115. package/dist/styles/lib/utils/index.mjs +6 -6
  116. package/dist/test.d.ts +1 -890
  117. package/dist/test.mjs +2 -2
  118. package/dist/themes/apac.d.ts +1 -137
  119. package/dist/themes/apac.mjs +2 -2
  120. package/dist/themes/docs.d.ts +1 -137
  121. package/dist/themes/docs.mjs +2 -2
  122. package/dist/themes/seekBusiness.d.ts +1 -137
  123. package/dist/themes/seekBusiness.mjs +2 -2
  124. package/dist/themes/wireframe.d.ts +1 -137
  125. package/dist/themes/wireframe.mjs +2 -2
  126. package/package.json +4 -3
  127. package/playroom/FrameComponent/index.d.ts +2 -0
  128. package/playroom/FrameComponent/package.json +1 -1
  129. package/playroom/components/index.d.ts +1 -0
  130. package/playroom/components/package.json +1 -1
  131. package/playroom/scope/index.d.ts +2 -0
  132. package/playroom/scope/package.json +1 -1
  133. package/playroom/snippets/index.d.ts +2 -0
  134. package/playroom/snippets/package.json +1 -1
  135. package/reset/index.d.ts +1 -0
  136. package/reset/package.json +1 -1
  137. package/test/index.d.ts +1 -0
  138. package/test/package.json +1 -1
  139. package/themes/apac/index.d.ts +2 -0
  140. package/themes/apac/package.json +1 -1
  141. package/themes/docs/index.d.ts +2 -0
  142. package/themes/docs/package.json +1 -1
  143. package/themes/seekBusiness/index.d.ts +2 -0
  144. package/themes/seekBusiness/package.json +1 -1
  145. package/themes/wireframe/index.d.ts +2 -0
  146. package/themes/wireframe/package.json +1 -1
  147. package/dist/styles/lib/components/Badge/Badge.css.cjs +0 -27
  148. package/dist/styles/lib/components/Badge/Badge.css.mjs +0 -28
package/dist/test.d.ts CHANGED
@@ -1,890 +1 @@
1
- import React, { ReactNode, ComponentType, AnchorHTMLAttributes, ForwardRefRenderFunction } from 'react';
2
- import { FontMetrics } from '@capsizecss/core';
3
-
4
- declare const _default$3: {
5
- vanillaTheme: string;
6
- name: string;
7
- displayName: string;
8
- background: {
9
- lightMode: string;
10
- darkMode: string;
11
- };
12
- webFonts: {
13
- linkTag: string;
14
- }[];
15
- space: {
16
- grid: number;
17
- space: {
18
- gutter: number;
19
- xxsmall: number;
20
- xsmall: number;
21
- small: number;
22
- medium: number;
23
- large: number;
24
- xlarge: number;
25
- xxlarge: number;
26
- };
27
- };
28
- color: {
29
- foreground: {
30
- brandAccentLight: string;
31
- brandAccent: string;
32
- cautionLight: string;
33
- caution: string;
34
- criticalLight: string;
35
- critical: string;
36
- formAccentLight: string;
37
- formAccent: string;
38
- infoLight: string;
39
- info: string;
40
- linkLight: string;
41
- link: string;
42
- linkHover: string;
43
- linkVisited: string;
44
- linkLightVisited: string;
45
- neutral: string;
46
- neutralInverted: string;
47
- positiveLight: string;
48
- positive: string;
49
- promoteLight: string;
50
- promote: string;
51
- rating: string;
52
- secondary: string;
53
- secondaryInverted: string;
54
- };
55
- background: {
56
- body: string;
57
- bodyDark: string;
58
- brand: string;
59
- brandAccent: string;
60
- brandAccentActive: string;
61
- brandAccentHover: string;
62
- brandAccentSoft: string;
63
- brandAccentSoftActive: string;
64
- brandAccentSoftHover: string;
65
- caution: string;
66
- cautionLight: string;
67
- critical: string;
68
- criticalActive: string;
69
- criticalHover: string;
70
- criticalLight: string;
71
- criticalSoft: string;
72
- criticalSoftActive: string;
73
- criticalSoftHover: string;
74
- formAccent: string;
75
- formAccentActive: string;
76
- formAccentHover: string;
77
- formAccentSoft: string;
78
- formAccentSoftActive: string;
79
- formAccentSoftHover: string;
80
- info: string;
81
- infoLight: string;
82
- neutral: string;
83
- neutralActive: string;
84
- neutralHover: string;
85
- neutralLight: string;
86
- neutralSoft: string;
87
- neutralSoftActive: string;
88
- neutralSoftHover: string;
89
- positive: string;
90
- positiveLight: string;
91
- promote: string;
92
- promoteLight: string;
93
- surface: string;
94
- surfaceDark: string;
95
- };
96
- };
97
- backgroundLightness: {
98
- body: "light" | "dark";
99
- bodyDark: "light" | "dark";
100
- brand: "light" | "dark";
101
- brandAccent: "light" | "dark";
102
- brandAccentActive: "light" | "dark";
103
- brandAccentHover: "light" | "dark";
104
- brandAccentSoft: "light" | "dark";
105
- brandAccentSoftActive: "light" | "dark";
106
- brandAccentSoftHover: "light" | "dark";
107
- caution: "light" | "dark";
108
- cautionLight: "light" | "dark";
109
- critical: "light" | "dark";
110
- criticalActive: "light" | "dark";
111
- criticalHover: "light" | "dark";
112
- criticalLight: "light" | "dark";
113
- criticalSoft: "light" | "dark";
114
- criticalSoftActive: "light" | "dark";
115
- criticalSoftHover: "light" | "dark";
116
- formAccent: "light" | "dark";
117
- formAccentActive: "light" | "dark";
118
- formAccentHover: "light" | "dark";
119
- formAccentSoft: "light" | "dark";
120
- formAccentSoftActive: "light" | "dark";
121
- formAccentSoftHover: "light" | "dark";
122
- info: "light" | "dark";
123
- infoLight: "light" | "dark";
124
- neutral: "light" | "dark";
125
- neutralActive: "light" | "dark";
126
- neutralHover: "light" | "dark";
127
- neutralLight: "light" | "dark";
128
- neutralSoft: "light" | "dark";
129
- neutralSoftActive: "light" | "dark";
130
- neutralSoftHover: "light" | "dark";
131
- positive: "light" | "dark";
132
- positiveLight: "light" | "dark";
133
- promote: "light" | "dark";
134
- promoteLight: "light" | "dark";
135
- surface: "light" | "dark";
136
- surfaceDark: "light" | "dark";
137
- };
138
- };
139
-
140
- declare const _default$2: {
141
- vanillaTheme: string;
142
- name: string;
143
- displayName: string;
144
- background: {
145
- lightMode: string;
146
- darkMode: string;
147
- };
148
- webFonts: {
149
- linkTag: string;
150
- }[];
151
- space: {
152
- grid: number;
153
- space: {
154
- gutter: number;
155
- xxsmall: number;
156
- xsmall: number;
157
- small: number;
158
- medium: number;
159
- large: number;
160
- xlarge: number;
161
- xxlarge: number;
162
- };
163
- };
164
- color: {
165
- foreground: {
166
- brandAccentLight: string;
167
- brandAccent: string;
168
- cautionLight: string;
169
- caution: string;
170
- criticalLight: string;
171
- critical: string;
172
- formAccentLight: string;
173
- formAccent: string;
174
- infoLight: string;
175
- info: string;
176
- linkLight: string;
177
- link: string;
178
- linkHover: string;
179
- linkVisited: string;
180
- linkLightVisited: string;
181
- neutral: string;
182
- neutralInverted: string;
183
- positiveLight: string;
184
- positive: string;
185
- promoteLight: string;
186
- promote: string;
187
- rating: string;
188
- secondary: string;
189
- secondaryInverted: string;
190
- };
191
- background: {
192
- body: string;
193
- bodyDark: string;
194
- brand: string;
195
- brandAccent: string;
196
- brandAccentActive: string;
197
- brandAccentHover: string;
198
- brandAccentSoft: string;
199
- brandAccentSoftActive: string;
200
- brandAccentSoftHover: string;
201
- caution: string;
202
- cautionLight: string;
203
- critical: string;
204
- criticalActive: string;
205
- criticalHover: string;
206
- criticalLight: string;
207
- criticalSoft: string;
208
- criticalSoftActive: string;
209
- criticalSoftHover: string;
210
- formAccent: string;
211
- formAccentActive: string;
212
- formAccentHover: string;
213
- formAccentSoft: string;
214
- formAccentSoftActive: string;
215
- formAccentSoftHover: string;
216
- info: string;
217
- infoLight: string;
218
- neutral: string;
219
- neutralActive: string;
220
- neutralHover: string;
221
- neutralLight: string;
222
- neutralSoft: string;
223
- neutralSoftActive: string;
224
- neutralSoftHover: string;
225
- positive: string;
226
- positiveLight: string;
227
- promote: string;
228
- promoteLight: string;
229
- surface: string;
230
- surfaceDark: string;
231
- };
232
- };
233
- backgroundLightness: {
234
- body: "light" | "dark";
235
- bodyDark: "light" | "dark";
236
- brand: "light" | "dark";
237
- brandAccent: "light" | "dark";
238
- brandAccentActive: "light" | "dark";
239
- brandAccentHover: "light" | "dark";
240
- brandAccentSoft: "light" | "dark";
241
- brandAccentSoftActive: "light" | "dark";
242
- brandAccentSoftHover: "light" | "dark";
243
- caution: "light" | "dark";
244
- cautionLight: "light" | "dark";
245
- critical: "light" | "dark";
246
- criticalActive: "light" | "dark";
247
- criticalHover: "light" | "dark";
248
- criticalLight: "light" | "dark";
249
- criticalSoft: "light" | "dark";
250
- criticalSoftActive: "light" | "dark";
251
- criticalSoftHover: "light" | "dark";
252
- formAccent: "light" | "dark";
253
- formAccentActive: "light" | "dark";
254
- formAccentHover: "light" | "dark";
255
- formAccentSoft: "light" | "dark";
256
- formAccentSoftActive: "light" | "dark";
257
- formAccentSoftHover: "light" | "dark";
258
- info: "light" | "dark";
259
- infoLight: "light" | "dark";
260
- neutral: "light" | "dark";
261
- neutralActive: "light" | "dark";
262
- neutralHover: "light" | "dark";
263
- neutralLight: "light" | "dark";
264
- neutralSoft: "light" | "dark";
265
- neutralSoftActive: "light" | "dark";
266
- neutralSoftHover: "light" | "dark";
267
- positive: "light" | "dark";
268
- positiveLight: "light" | "dark";
269
- promote: "light" | "dark";
270
- promoteLight: "light" | "dark";
271
- surface: "light" | "dark";
272
- surfaceDark: "light" | "dark";
273
- };
274
- };
275
-
276
- declare const _default$1: {
277
- vanillaTheme: string;
278
- name: string;
279
- displayName: string;
280
- background: {
281
- lightMode: string;
282
- darkMode: string;
283
- };
284
- webFonts: {
285
- linkTag: string;
286
- }[];
287
- space: {
288
- grid: number;
289
- space: {
290
- gutter: number;
291
- xxsmall: number;
292
- xsmall: number;
293
- small: number;
294
- medium: number;
295
- large: number;
296
- xlarge: number;
297
- xxlarge: number;
298
- };
299
- };
300
- color: {
301
- foreground: {
302
- brandAccentLight: string;
303
- brandAccent: string;
304
- cautionLight: string;
305
- caution: string;
306
- criticalLight: string;
307
- critical: string;
308
- formAccentLight: string;
309
- formAccent: string;
310
- infoLight: string;
311
- info: string;
312
- linkLight: string;
313
- link: string;
314
- linkHover: string;
315
- linkVisited: string;
316
- linkLightVisited: string;
317
- neutral: string;
318
- neutralInverted: string;
319
- positiveLight: string;
320
- positive: string;
321
- promoteLight: string;
322
- promote: string;
323
- rating: string;
324
- secondary: string;
325
- secondaryInverted: string;
326
- };
327
- background: {
328
- body: string;
329
- bodyDark: string;
330
- brand: string;
331
- brandAccent: string;
332
- brandAccentActive: string;
333
- brandAccentHover: string;
334
- brandAccentSoft: string;
335
- brandAccentSoftActive: string;
336
- brandAccentSoftHover: string;
337
- caution: string;
338
- cautionLight: string;
339
- critical: string;
340
- criticalActive: string;
341
- criticalHover: string;
342
- criticalLight: string;
343
- criticalSoft: string;
344
- criticalSoftActive: string;
345
- criticalSoftHover: string;
346
- formAccent: string;
347
- formAccentActive: string;
348
- formAccentHover: string;
349
- formAccentSoft: string;
350
- formAccentSoftActive: string;
351
- formAccentSoftHover: string;
352
- info: string;
353
- infoLight: string;
354
- neutral: string;
355
- neutralActive: string;
356
- neutralHover: string;
357
- neutralLight: string;
358
- neutralSoft: string;
359
- neutralSoftActive: string;
360
- neutralSoftHover: string;
361
- positive: string;
362
- positiveLight: string;
363
- promote: string;
364
- promoteLight: string;
365
- surface: string;
366
- surfaceDark: string;
367
- };
368
- };
369
- backgroundLightness: {
370
- body: "light" | "dark";
371
- bodyDark: "light" | "dark";
372
- brand: "light" | "dark";
373
- brandAccent: "light" | "dark";
374
- brandAccentActive: "light" | "dark";
375
- brandAccentHover: "light" | "dark";
376
- brandAccentSoft: "light" | "dark";
377
- brandAccentSoftActive: "light" | "dark";
378
- brandAccentSoftHover: "light" | "dark";
379
- caution: "light" | "dark";
380
- cautionLight: "light" | "dark";
381
- critical: "light" | "dark";
382
- criticalActive: "light" | "dark";
383
- criticalHover: "light" | "dark";
384
- criticalLight: "light" | "dark";
385
- criticalSoft: "light" | "dark";
386
- criticalSoftActive: "light" | "dark";
387
- criticalSoftHover: "light" | "dark";
388
- formAccent: "light" | "dark";
389
- formAccentActive: "light" | "dark";
390
- formAccentHover: "light" | "dark";
391
- formAccentSoft: "light" | "dark";
392
- formAccentSoftActive: "light" | "dark";
393
- formAccentSoftHover: "light" | "dark";
394
- info: "light" | "dark";
395
- infoLight: "light" | "dark";
396
- neutral: "light" | "dark";
397
- neutralActive: "light" | "dark";
398
- neutralHover: "light" | "dark";
399
- neutralLight: "light" | "dark";
400
- neutralSoft: "light" | "dark";
401
- neutralSoftActive: "light" | "dark";
402
- neutralSoftHover: "light" | "dark";
403
- positive: "light" | "dark";
404
- positiveLight: "light" | "dark";
405
- promote: "light" | "dark";
406
- promoteLight: "light" | "dark";
407
- surface: "light" | "dark";
408
- surfaceDark: "light" | "dark";
409
- };
410
- };
411
-
412
- declare const _default: {
413
- vanillaTheme: string;
414
- name: string;
415
- displayName: string;
416
- background: {
417
- lightMode: string;
418
- darkMode: string;
419
- };
420
- webFonts: {
421
- linkTag: string;
422
- }[];
423
- space: {
424
- grid: number;
425
- space: {
426
- gutter: number;
427
- xxsmall: number;
428
- xsmall: number;
429
- small: number;
430
- medium: number;
431
- large: number;
432
- xlarge: number;
433
- xxlarge: number;
434
- };
435
- };
436
- color: {
437
- foreground: {
438
- brandAccentLight: string;
439
- brandAccent: string;
440
- cautionLight: string;
441
- caution: string;
442
- criticalLight: string;
443
- critical: string;
444
- formAccentLight: string;
445
- formAccent: string;
446
- infoLight: string;
447
- info: string;
448
- linkLight: string;
449
- link: string;
450
- linkHover: string;
451
- linkVisited: string;
452
- linkLightVisited: string;
453
- neutral: string;
454
- neutralInverted: string;
455
- positiveLight: string;
456
- positive: string;
457
- promoteLight: string;
458
- promote: string;
459
- rating: string;
460
- secondary: string;
461
- secondaryInverted: string;
462
- };
463
- background: {
464
- body: string;
465
- bodyDark: string;
466
- brand: string;
467
- brandAccent: string;
468
- brandAccentActive: string;
469
- brandAccentHover: string;
470
- brandAccentSoft: string;
471
- brandAccentSoftActive: string;
472
- brandAccentSoftHover: string;
473
- caution: string;
474
- cautionLight: string;
475
- critical: string;
476
- criticalActive: string;
477
- criticalHover: string;
478
- criticalLight: string;
479
- criticalSoft: string;
480
- criticalSoftActive: string;
481
- criticalSoftHover: string;
482
- formAccent: string;
483
- formAccentActive: string;
484
- formAccentHover: string;
485
- formAccentSoft: string;
486
- formAccentSoftActive: string;
487
- formAccentSoftHover: string;
488
- info: string;
489
- infoLight: string;
490
- neutral: string;
491
- neutralActive: string;
492
- neutralHover: string;
493
- neutralLight: string;
494
- neutralSoft: string;
495
- neutralSoftActive: string;
496
- neutralSoftHover: string;
497
- positive: string;
498
- positiveLight: string;
499
- promote: string;
500
- promoteLight: string;
501
- surface: string;
502
- surfaceDark: string;
503
- };
504
- };
505
- backgroundLightness: {
506
- body: "light" | "dark";
507
- bodyDark: "light" | "dark";
508
- brand: "light" | "dark";
509
- brandAccent: "light" | "dark";
510
- brandAccentActive: "light" | "dark";
511
- brandAccentHover: "light" | "dark";
512
- brandAccentSoft: "light" | "dark";
513
- brandAccentSoftActive: "light" | "dark";
514
- brandAccentSoftHover: "light" | "dark";
515
- caution: "light" | "dark";
516
- cautionLight: "light" | "dark";
517
- critical: "light" | "dark";
518
- criticalActive: "light" | "dark";
519
- criticalHover: "light" | "dark";
520
- criticalLight: "light" | "dark";
521
- criticalSoft: "light" | "dark";
522
- criticalSoftActive: "light" | "dark";
523
- criticalSoftHover: "light" | "dark";
524
- formAccent: "light" | "dark";
525
- formAccentActive: "light" | "dark";
526
- formAccentHover: "light" | "dark";
527
- formAccentSoft: "light" | "dark";
528
- formAccentSoftActive: "light" | "dark";
529
- formAccentSoftHover: "light" | "dark";
530
- info: "light" | "dark";
531
- infoLight: "light" | "dark";
532
- neutral: "light" | "dark";
533
- neutralActive: "light" | "dark";
534
- neutralHover: "light" | "dark";
535
- neutralLight: "light" | "dark";
536
- neutralSoft: "light" | "dark";
537
- neutralSoftActive: "light" | "dark";
538
- neutralSoftHover: "light" | "dark";
539
- positive: "light" | "dark";
540
- positiveLight: "light" | "dark";
541
- promote: "light" | "dark";
542
- promoteLight: "light" | "dark";
543
- surface: "light" | "dark";
544
- surfaceDark: "light" | "dark";
545
- };
546
- };
547
-
548
- declare namespace themes {
549
- export {
550
- _default$3 as apac,
551
- _default as docs,
552
- _default$2 as seekBusiness,
553
- _default$1 as wireframe,
554
- };
555
- }
556
-
557
- declare const breakpoints: {
558
- readonly mobile: 0;
559
- readonly tablet: 740;
560
- readonly desktop: 992;
561
- readonly wide: 1200;
562
- };
563
- type Breakpoint = keyof typeof breakpoints;
564
-
565
- type TextBreakpoint = Exclude<Breakpoint, 'desktop' | 'wide'>;
566
- type FontSizeText = {
567
- fontSize: number;
568
- rows: number;
569
- };
570
- type TextDefinition = Record<TextBreakpoint, FontSizeText>;
571
- type FontWeight = 'regular' | 'medium' | 'strong';
572
- interface BraidTokens {
573
- name: string;
574
- displayName: string;
575
- typography: {
576
- fontFamily: string;
577
- webFont: string | null;
578
- fontMetrics: Pick<FontMetrics, 'capHeight' | 'ascent' | 'descent' | 'lineGap' | 'unitsPerEm'>;
579
- fontWeight: Record<FontWeight, 400 | 500 | 600 | 700 | 800>;
580
- heading: {
581
- weight: {
582
- weak: FontWeight;
583
- regular: FontWeight;
584
- };
585
- level: {
586
- '1': TextDefinition;
587
- '2': TextDefinition;
588
- '3': TextDefinition;
589
- '4': TextDefinition;
590
- };
591
- };
592
- text: {
593
- xsmall: TextDefinition;
594
- small: TextDefinition;
595
- standard: TextDefinition;
596
- large: TextDefinition;
597
- };
598
- };
599
- contentWidth: {
600
- xsmall: number;
601
- small: number;
602
- medium: number;
603
- large: number;
604
- };
605
- grid: number;
606
- touchableSize: number;
607
- space: {
608
- gutter: number;
609
- xxsmall: number;
610
- xsmall: number;
611
- small: number;
612
- medium: number;
613
- large: number;
614
- xlarge: number;
615
- xxlarge: number;
616
- };
617
- transforms: {
618
- touchable: string;
619
- };
620
- transitions: {
621
- fast: string;
622
- touchable: string;
623
- };
624
- border: {
625
- radius: {
626
- standard: string;
627
- large: string;
628
- xlarge: string;
629
- };
630
- width: {
631
- standard: number;
632
- large: number;
633
- };
634
- color: {
635
- brandAccent: string;
636
- brandAccentLight: string;
637
- caution: string;
638
- cautionLight: string;
639
- critical: string;
640
- criticalLight: string;
641
- field: string;
642
- focus: string;
643
- formAccent: string;
644
- formAccentLight: string;
645
- info: string;
646
- infoLight: string;
647
- neutral: string;
648
- neutralInverted: string;
649
- neutralLight: string;
650
- positive: string;
651
- positiveLight: string;
652
- promote: string;
653
- promoteLight: string;
654
- };
655
- };
656
- focusRingSize: number;
657
- shadows: {
658
- small: string;
659
- medium: string;
660
- large: string;
661
- };
662
- color: {
663
- foreground: {
664
- brandAccentLight: string;
665
- brandAccent: string;
666
- cautionLight: string;
667
- caution: string;
668
- criticalLight: string;
669
- critical: string;
670
- formAccentLight: string;
671
- formAccent: string;
672
- infoLight: string;
673
- info: string;
674
- linkLight: string;
675
- link: string;
676
- linkHover: string;
677
- linkVisited: string;
678
- linkLightVisited: string;
679
- neutral: string;
680
- neutralInverted: string;
681
- positiveLight: string;
682
- positive: string;
683
- promoteLight: string;
684
- promote: string;
685
- rating: string;
686
- secondary: string;
687
- secondaryInverted: string;
688
- };
689
- background: {
690
- body: string;
691
- bodyDark: string;
692
- brand: string;
693
- brandAccent: string;
694
- brandAccentActive: string;
695
- brandAccentHover: string;
696
- brandAccentSoft: string;
697
- brandAccentSoftActive: string;
698
- brandAccentSoftHover: string;
699
- caution: string;
700
- cautionLight: string;
701
- critical: string;
702
- criticalActive: string;
703
- criticalHover: string;
704
- criticalLight: string;
705
- criticalSoft: string;
706
- criticalSoftActive: string;
707
- criticalSoftHover: string;
708
- formAccent: string;
709
- formAccentActive: string;
710
- formAccentHover: string;
711
- formAccentSoft: string;
712
- formAccentSoftActive: string;
713
- formAccentSoftHover: string;
714
- info: string;
715
- infoLight: string;
716
- neutral: string;
717
- neutralActive: string;
718
- neutralHover: string;
719
- neutralLight: string;
720
- neutralSoft: string;
721
- neutralSoftActive: string;
722
- neutralSoftHover: string;
723
- positive: string;
724
- positiveLight: string;
725
- promote: string;
726
- promoteLight: string;
727
- surface: string;
728
- surfaceDark: string;
729
- };
730
- };
731
- }
732
-
733
- declare const makeBraidTheme: (tokens: BraidTokens) => {
734
- vanillaTheme: string;
735
- name: string;
736
- displayName: string;
737
- background: {
738
- lightMode: string;
739
- darkMode: string;
740
- };
741
- webFonts: {
742
- linkTag: string;
743
- }[];
744
- space: {
745
- grid: number;
746
- space: {
747
- gutter: number;
748
- xxsmall: number;
749
- xsmall: number;
750
- small: number;
751
- medium: number;
752
- large: number;
753
- xlarge: number;
754
- xxlarge: number;
755
- };
756
- };
757
- color: {
758
- foreground: {
759
- brandAccentLight: string;
760
- brandAccent: string;
761
- cautionLight: string;
762
- caution: string;
763
- criticalLight: string;
764
- critical: string;
765
- formAccentLight: string;
766
- formAccent: string;
767
- infoLight: string;
768
- info: string;
769
- linkLight: string;
770
- link: string;
771
- linkHover: string;
772
- linkVisited: string;
773
- linkLightVisited: string;
774
- neutral: string;
775
- neutralInverted: string;
776
- positiveLight: string;
777
- positive: string;
778
- promoteLight: string;
779
- promote: string;
780
- rating: string;
781
- secondary: string;
782
- secondaryInverted: string;
783
- };
784
- background: {
785
- body: string;
786
- bodyDark: string;
787
- brand: string;
788
- brandAccent: string;
789
- brandAccentActive: string;
790
- brandAccentHover: string;
791
- brandAccentSoft: string;
792
- brandAccentSoftActive: string;
793
- brandAccentSoftHover: string;
794
- caution: string;
795
- cautionLight: string;
796
- critical: string;
797
- criticalActive: string;
798
- criticalHover: string;
799
- criticalLight: string;
800
- criticalSoft: string;
801
- criticalSoftActive: string;
802
- criticalSoftHover: string;
803
- formAccent: string;
804
- formAccentActive: string;
805
- formAccentHover: string;
806
- formAccentSoft: string;
807
- formAccentSoftActive: string;
808
- formAccentSoftHover: string;
809
- info: string;
810
- infoLight: string;
811
- neutral: string;
812
- neutralActive: string;
813
- neutralHover: string;
814
- neutralLight: string;
815
- neutralSoft: string;
816
- neutralSoftActive: string;
817
- neutralSoftHover: string;
818
- positive: string;
819
- positiveLight: string;
820
- promote: string;
821
- promoteLight: string;
822
- surface: string;
823
- surfaceDark: string;
824
- };
825
- };
826
- backgroundLightness: {
827
- body: "light" | "dark";
828
- bodyDark: "light" | "dark";
829
- brand: "light" | "dark";
830
- brandAccent: "light" | "dark";
831
- brandAccentActive: "light" | "dark";
832
- brandAccentHover: "light" | "dark";
833
- brandAccentSoft: "light" | "dark";
834
- brandAccentSoftActive: "light" | "dark";
835
- brandAccentSoftHover: "light" | "dark";
836
- caution: "light" | "dark";
837
- cautionLight: "light" | "dark";
838
- critical: "light" | "dark";
839
- criticalActive: "light" | "dark";
840
- criticalHover: "light" | "dark";
841
- criticalLight: "light" | "dark";
842
- criticalSoft: "light" | "dark";
843
- criticalSoftActive: "light" | "dark";
844
- criticalSoftHover: "light" | "dark";
845
- formAccent: "light" | "dark";
846
- formAccentActive: "light" | "dark";
847
- formAccentHover: "light" | "dark";
848
- formAccentSoft: "light" | "dark";
849
- formAccentSoftActive: "light" | "dark";
850
- formAccentSoftHover: "light" | "dark";
851
- info: "light" | "dark";
852
- infoLight: "light" | "dark";
853
- neutral: "light" | "dark";
854
- neutralActive: "light" | "dark";
855
- neutralHover: "light" | "dark";
856
- neutralLight: "light" | "dark";
857
- neutralSoft: "light" | "dark";
858
- neutralSoftActive: "light" | "dark";
859
- neutralSoftHover: "light" | "dark";
860
- positive: "light" | "dark";
861
- positiveLight: "light" | "dark";
862
- promote: "light" | "dark";
863
- promoteLight: "light" | "dark";
864
- surface: "light" | "dark";
865
- surfaceDark: "light" | "dark";
866
- };
867
- };
868
- type BraidTheme = ReturnType<typeof makeBraidTheme>;
869
-
870
- interface LinkComponentProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
871
- href: string;
872
- }
873
- declare const makeLinkComponent: (render: ForwardRefRenderFunction<HTMLAnchorElement, LinkComponentProps>) => {
874
- readonly __forwardRef__: React.ForwardRefExoticComponent<LinkComponentProps & React.RefAttributes<HTMLAnchorElement>>;
875
- };
876
- type LinkComponent = ReturnType<typeof makeLinkComponent> | ComponentType<LinkComponentProps>;
877
- interface BraidProviderProps {
878
- theme: BraidTheme;
879
- styleBody?: boolean;
880
- linkComponent?: LinkComponent;
881
- children: ReactNode;
882
- }
883
-
884
- interface BraidTestProviderProps extends Omit<BraidProviderProps, 'theme' | 'styleBody'> {
885
- themeName?: keyof typeof themes;
886
- breakpoint?: Breakpoint | null;
887
- }
888
- declare const BraidTestProvider: ({ themeName, breakpoint, ...restProps }: BraidTestProviderProps) => JSX.Element;
889
-
890
- export { BraidTestProvider };
1
+ export { BraidTestProvider } from './reset.js';